Moving node outside graph area is not possible

[avshenuk]

When moving a node outside a graph area, the node simply stays on the boundary and not moving further. It re-appears though in the position where the mouse returns back to the area. So basically jumps from one position to another one.

The reason seems to be that MouseTool collects mouse events only from the root VNode and not the whole document/page.

This prevents smooth interactions with the graph and doesn't seem possible to override from the outside as this is core behavior of mouse events processing in Sprotty.

It also seems quite nontrivial to fix either, as the events collection is generic across modules and depends on them being attached to VNode and not to the whole document (and perhaps Sprotty is running NOT only in browsers?).

So if you decide to not try to fix this, could you please suggest some workarounds?

P.S. There is also certain logic determining the element being moved which will most likely stop working due to the fact that the node is detached when moving outside the graph area. Guess this is fixable by adding some logic to isVisible in the views though.

[spoenemann]

What would you like to achieve? A drag-and-drop functionality where you can drag elements to some other part of the application?

[avshenuk]

What would you like to achieve? A drag-and-drop functionality where you can drag elements to some other part of the application?

Sorry for not being clear. It's only about dragging a node around on the graph.

Let's take the class diagram example. The graph area is restricted by the container in the middle. But it's easy to imagine the graph going outside those boundaries (just invisible to us). That happens for instance when you drag the whole graph and it simply disappears and re-appears when you drag it back.

So in my mind, that's natural for the node itself to disappear too, when being dragged, following the mouse movement. But currently it's simply stuck on the edge of the boundaries.

[avshenuk]

Just to clarify it a bit more. What I currently do in MouseMoveListener to achieve that effect:

• Added draggedTarget: SModelElement; for storing target on mouseDown().
• Added

        $(document).on('mousemove', e => {
            const actions = this.mouseMoveInternal(e.originalEvent);
            if (actions.length > 0) {
                e.preventDefault();
                for (const action of actions) {
                    this.actionDispatcher.dispatch(action);
                }
            }
        });
        $(document).on('mouseup', e => {
            const actions = this.mouseUpInternal(e.originalEvent);
            if (actions.length > 0) {
                e.preventDefault();
                for (const action of actions) {
                    this.actionDispatcher.dispatch(action);
                }
            }
        });

to listen for those events on the whole document.

• Made mouseMove and mouseUp "internal" (to prevent from being triggered by Sprotty) and changed them to operate on this.draggedTarget instead.

So this way the node keeps being dragged after the mouse has left the canvas area.