Smart Dragging – Antetype 1.3

In Antetype 1.3 we have added two the ways in which you can edit and interact with your screen designs using only your mouse.


Re-order without the screen inspector

Prior to Antetype 1.3 re-arranging the order of elements in a container required the user to shift their focus from the design canvas in the main window to the screen inspector.

A key aim of 1.3 has been to remove the need for the user to shift their focus to the screen inspector and to allow them to keep their attention and focus purely on the design canvas.

With Smart Dragging a user can easily re-arrange elements within a container directly on the canvas, by simply clicking on the item and dragging it to the preferred ordering position.

Re-ordering a container with Smart Dragging

This works for vertical, horizontal and stacked layouts in free layouts the ordering of elements is not important.

Nest mode is dead – long live nesting

Moving an element to another container with Smart Dragging

Moving an element to a new place in the hierarchy in Antetype 1.2 involved using either the screen inspector or enabling “Nest mode”. Nest Mode was enabled using a button on the toolbar or a modifier key while selecting elements.

In Antetype 1.3 nest mode no longer exists, changing the parent container of an element can be done either using the screen inspector or via Smart Dragging.

Just as Smart Dragging can be used to alter the order of elements in a container an element can also be moved between containers. Simply drag an element out of the container it is currently in and place it over the container you would like to add it to. Do not yet let go of the mouse, the new parent container needs to become the target for the drop and while this is happening you will see the target flash blue. Once the new parent container is set as the target you will see that it has a blue outline to indicate as much, you can now let go of the mouse.

Responding to layout changes during a drag

Changing the ordering of elements in a container or moving an element from one container to another will often have an impact on the layout of a screen. This is highly relevant when a container is set to shrink to fit its contents or a element is set to stretch to the size of its container. As an element is dragged using Smart Dragging these changes are reflected immediately in the design, even before you let go of the mouse and commit to the change.

Changing your mind

Should you change your mind in the middle of a drag and decide not to re-order or change the parent container of an element – then just press ESC and everything will snap back to how it was before the drag started.

This post is part of a series of posts about Antetype 1.3.

3 Responses to Smart Dragging – Antetype 1.3

  • Pingback: Antetype 1.3 – Antetype

  • I tried to replace the Label in the Navigator bar in the screen above, with a segmented control. Could not do it. Spent an hour trying to get this to work, but I simply cannot get a segmented control in between the Left and Right container. Go figure…

    • This is because the navigation bar widget in this case has been deigned to always have a label with buttons on either side and it doesn’t accept any other widgets dropped on it.

      You can change this behaviour though – select the Navigation Bar widget in the screen inspector and then from the style inspector find the property “accepts drops” in the content section – put a tick in this box and you will then be able to drop the segments control into the hierarchy and replace the label.

      Hope this helps.

Leave a Reply