Experiment with draw2D

To make the code more clean and enable functions like zooming or snapping, we could use draw2Dtouch

@AlaaSarhan is doing some work on it

Small things to try out

• drag and drop
• autogrouping via rafts
• ensure that dragged elements are in front of other elements (via canvas.installEditPolicy( new draw2d.policy.canvas.CanvasPolicy({onDragStart ). The event handler gets the figure as parameter on which you can call “toFront()” (see example)
• programmatically add things to the canvas
• enable zooming on mouse cursor (Alaa: … using setScrollArea … the canvas container needed to be absolute displayed too)

mid size things to try out

• add elements by drag and drop, so one can drag a “window”-icon from a toolbar and drop on the canvas to add a “window”-element, like this.
  • Maybe the copy-on-drag-demo helps?
  • Or we basically only have rectangles that are duplicated and then “decorated” with special types like “window”, “button”, “layouting rectangle” (e.g. by having an on-context button that offers “decorations” on click)…
  • One could also register a mouseup (“drop”) on canvas, call the canvas document-to-canvas method and create an element there. This, however, needs to “remember” and signal to the draw-parts what was dragged (ideally NOT by a global variable…)
• edit labels (probably easy)
• layout sub-elements like menu items, tabs, buttons in toolbar…
• Add meaningful snaps: to top/left/right
  • This works with canvas.installEditPolicy(new draw2d.policy.canvas.SnapToGeometryEditPolicy()) however, the lines are directly drawn on canvas, not over the elements, so on a raft they are drawn behind the raft.

Big things to try out in draw2D

• add controls that allow to add e.g. a mock-tab in a mock-tabbar, a mock-menuentry in a mock-menu etc. This is pretty interesting, UX wise: Should there be standard elements like “menu” that have + and - controls to add “menu entries” when you click +? Or just horizontal and vertical layout children – you can drop stuff to add (also lots of menu entries, if you like)?

Bigger things to think about in general

• Should we write the other parts of the UI (toolbars, object settings) in vue or try to do everything UI with draw2D?
  • relates to coupling (to draw and in general)
• What are useful export options?

[AlaaSarhan]

first iteration of adding elements by drag&drop https://github.com/AlaaSarhan/quickMockup/pull/1

[AlaaSarhan]

In current version (commit https://github.com/AlaaSarhan/quickMockup/commit/a6e9c0cca20acddec944c8b8f00875cb7ea3b3f5), I tried to implement a first version of quickMockup approach, in which an element would belong to the container it is dropped inside.

It works basically, but it seems to suffer from performance issues sometimes as well as some odd behavior in combination with toFront.

Gotta give it a third try, probably with Raft-like approach of calculating contained elements on relevant events only, but unlike Raft, it would add them as children and remove them eventually when event is over.