Resize handles in the GUI editor

Feature requests
#1

It would be nice to have resize handles for GUI elements, similar to Photoshop’s Transform tool.

  • Drag inside the box to move the object
  • One handle in the center of each edge, for one-axis resize
  • One handle in every corner for two-axis resize

Extra features that would be neat, in order of subjective importance:

  • Holding shift should force it to retain its aspect ratio
  • Holding alt should make it resize from the pivot rather than the opposite edge/corner
  • Having the cursor slightly outside any of the corner handles, gives you the option to click and drag to rotate the object
  • A handle in the center that you can move, to change the pivot of the rotation and alt-resize

4 Likes
#2

This would improve the gui workflow by a lot, I sincerely hope this makes the backlog! Especially since the lack of “size” handle makes you resort to modifying all values by number fields right now. Clamp and snapping would also be a huge boost in productivity.

1 Like
#3

This and many other improvements are in the backlog. It may take some time since a major overhaul of the editor is in the works. Thanks.

#4

Regarding snapping, you can hold down the shift-key while dragging the move-manipulator. This makes it snap to the grid. The grid is “auto” by default, but can be configured differently in Preferences under Defold > Scene Editor. Was this what you were asking for?

GUI Layout tool requests
#5

Yes more or less, hidden hotkeys :smiley: Great to avoid decimal values! But an even better albeit very advanced version would be if it “snapped” to other elements as well, showing you guide-lines according to other gui-nodes. Indicating pixel distance and other useful information. A good example of this is the Xcode layout editor.

Now this image only display how it relates to “center” alignment within a view, but it does the same when you drag elements close to other views. Think the basic rule-set is that it displays center and edges, with an added padding as can be seen in image where close to borders of the view.

4 Likes