search

jdittrich / quickMockup

HTML based interface mockups
https://jdittrich.github.io/quickMockup/
MIT License
517 stars 97 forks source link

v2: Add slight outline on elements that currently dragged elements would be grouped with #51

Closed jdittrich closed 4 years ago

jdittrich commented 4 years ago

Story: If I drag an element I would like to know what element it would have as a parent if I drop it now. This is less relevant if the elements all have clear background and border, but if not, results of actions should be more clear.

Idea: Add an outline on the to-be-parent element, triggered by ondragover event (if that exists)

Example: See quick mockup v1

jdittrich commented 4 years ago

That might be a tricky one, since the draw2D documentation does not mention the needed "dragover" event. It exists in the underlying jQueryUI, though. Alternatively, one can try to trigger the outline on dragenter and undo it on dragleave

For highlighting, we could use the build-in glow

AlaaSarhan commented 4 years ago

I tried with dragenter and dragleave .. issue there is that, with current behavior, an element won't be a child until it is dropped with it's bounding box entirely being inside the container, so highlighting the container on dragenter (which is triggered when mouse pointer is inside the container) might give false impression of being a parent of the dragged element if the users choose to drop the element when it is not entirely inside the container.

I'm experimenting with another alternative now, might be slightly more expensive computationally, but with some throttling it should work fine for a long time, I believe

jdittrich commented 4 years ago
AlaaSarhan commented 4 years ago 
* I tried for a while and did it did nothing until I noted: It only works for elements that are already on canvas, right? (many groupings would happen when people drag a new elements, so this is something we would need to figure out.

Yeap that is correct .. through their jQuery UI support, we can make it work for dom elements being dragged on top of the canvas .. but that also needs to wait until we have better dragged dom element rep. (like one that has same size, and probably rendered figure, of the final element that will be added to the canvas on drop) for better visual aid.

* I wonder if the way to highlight all parent elements is not a bit brittle. Would it be possible or even easier to only highlight one (I guess we would not push to highlighted elements, but only have one elements there which is replaced by the next?).  Cause when dragging quickly-ish, the outer element will not "notice" (we could bubble this up, but I guess it is not needed, and only highlighting one is easier)

This one is pretty weird. I tried to get rid of this effect of outer container being highlighted (by storing only last entered container as you have suggested) but the events are quite messy that it just introduced even more quirky behaviors .. I have an idea in mind to eventually solve and simplify a bit the logic, but will require introducing some state management within the canvas, using policies. I was thinking of opening a second issue for that, but let me try and see if I can quickly patch it up in this one, otherwise I'll create a separate issue.

* I will probably make the glow a bit more visible (gree or blue) to make it easier to see, since our elements are gray-ish already.

Yeap that's easy .. will apply a color changing filter + increase the size of the stroke by 2 instead of by 1

AlaaSarhan commented 4 years ago

@jdittrich new version on same branch should now solve the 2nd and 3rd of your points