Experiment with draw2D

[jdittrich]

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

• [x] drag and drop
• [x] autogrouping via rafts
• [x] 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
• [x] 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…)
• [x] 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]

@jdittrich zooming to mouse cursor must be solved now in https://github.com/AlaaSarhan/quickMockup/commit/571f9659a62e0bf32e1f561a453e0e90df722bd6

you were correct about using setScrollArea but another thing was missing.. the canvas container needed to be absolute displayed too.

[jdittrich]

Some open questions around raft:

• What quickmockup is that elements that are visually within a rectangle are also children of that rectangle. The children are not prevented in moving. As long as you drag the parent/child structure remains the same. As soon as you drop, it is evaluated where you dropped and the element is assigned to a new (or the old) parent.
• It seems not to actually attach children, rather in calculates what is "onboard" and then moves these along.
• We might want to write to or own raft method, since mostly we want the onboard elements to behave like children.
  • Currently we have a overwrite to raft
  • We could make elements that are entirely enclosed children of the innermost, enclosing element
  • We could have an anchor point. If it is enclosed by other elements the element with the ancor point becomes child of the most innermost ("top") element that encloses the point. Which would allow for some comprehensible overlapping things, e.g. desktop-menus having the anchor on top so they can be grouped with a menu bar and overlap the rest.

[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.

[AlaaSarhan]

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

[AlaaSarhan]

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)…

I'm starting to like this idea a lot, at least in concept.. thinking about it technically for now, perhaps I'll attempt to implement it soon