Problem with mouse events when dragging ( port, node, and graph canvas ) outisde of DiagramCanvas

[wahidrachmawan]

Hi :)

I am just trying out the library but unfortunately it seem has a problem related to mouse events when dragging port, node, and graph. -For port problem, when dragging port and releasing mouse outside of DiagramCanvas the line/edge is buggy that's not removed after the mouse is up the line is still pointing to mouse but when you're clicking on a canvas the line is keep alive -Also the port is not pointing to mouse when the mouse is leave outside of DiagramCanvas

https://github.com/Blazor-Diagrams/Blazor.Diagrams/assets/4220747/ff7fd298-8b2f-4f7b-a747-236c04df69aa

-Dragging/moving node: the node is not moving when the mouse is outside of DiagramCanvas also the node is keep moving when the mouse up outside of DiagramCanvas

https://github.com/Blazor-Diagrams/Blazor.Diagrams/assets/4220747/1f1b9e13-1e38-4610-8930-2250723da6aa

-Dragging/moving graph: the graph is not moved when the mouse is outside of DiagramCanvas it also keep moving when the mouse up ouside of DiagramCanvas ( but the problem is only found on Blazor Hybrid )

https://github.com/Blazor-Diagrams/Blazor.Diagrams/assets/4220747/37fe8b74-05c0-417b-9979-cd4907015e7b

-When dragging or moving graph, the text outside of DiagramCanvas are selected

https://github.com/Blazor-Diagrams/Blazor.Diagrams/assets/4220747/e15ab671-cea8-4c62-b203-d6fc2029a305

[zHaytam]

Hello,

Most of these "issues" are normal. Since we're listening to the mousemove event of the diagram canvas (the rectangle with the black border), moving the mouse outside doesn't trigger that event anymore. Most libraries have the same problem.
If we want to fix this, we'll have to listen to the event globally and that introduces other issues.

I do see 2 bugs though:

• When a user starts dragging a link and goes outside of the canvas and lets go, if he comes back to the canvas the link is still moving and he can even put it there.
• When a user starts dragging a node and goes outside of the canvas, it selects all the text

I will check these 2 issues.

[K0369]

@zHaytam I have encountered the first problem too - my workaround was to check in the "OnPointerMove" method if the left mouse button is still pressed. If it is not pressed anymore, I just trigger the "OnPointerUp" method:

        if(e.Buttons == 0)
        {
            OnPointerUp(model, e);
            return;
        }

For my purposes this is enough, but it only works "correctly" because the DragNewLinkBehvaior is not checking which button was released when OnPointerUp is triggered. (You can for example start dragging a link with the left mouse button and keep is pressed, and then end the link by clicking the right mouse button).

A better fix might be to clear the state of the DragNewLinkBehavior when the "onpointerleave"-event of the canvas is triggered, but this event isn't captured at the moment.

Regarding the second problem (text selecting): I just wanted to mention that I can only reproduce the problem in firefox, while it doesn't seem to affect chromium browsers (like edge or chrome).

[wahidrachmawan]

Hi,

I've managed to solve the issue about the mousemove event not triggered when the mouse is outside of diagram canvas by capturing mouse with setPointerCapture but i tested only by using custom PanBehavior and not sure if this method work on other issue.

Thanks

Edit: It seem registering setPointerCapture on Diagram PointerDown event resolve the issue but i am not sure this is the correct way.

[vnooli]

Hi,

@zHaytam Facing same issue, any update on this issue please.

Thanks In Advance, Vinod.

[vnooli]

Hi, @zHaytam , @wahidrachmawan Fixed above issue using CustomDragMovablesBehavior and added condition in OnPointerMove.

    private void OnPointerMove(Model? model, PointerEventArgs e)
    {
        if (_initialPositions.Count == 0 || _lastClientX == null || _lastClientY == null)
            return;

        _moved = true;
        var deltaX = (e.ClientX - _lastClientX.Value) / Diagram.Zoom;
        var deltaY = (e.ClientY - _lastClientY.Value) / Diagram.Zoom;

        foreach (var (movable, initialPosition) in _initialPositions)
        {
            var ndx = ApplyGridSize(deltaX + initialPosition.X);
            var ndy = ApplyGridSize(deltaY + initialPosition.Y);

            if (movable is CustomModel) // Based on your model change it.
            {
                if (ndy >= 0 && ndx >= 0)
                {
                    ApplyPosition(movable, ndx, ndy);
                }
                else
                {
                    _moved = false;
                    OnPointerUp(model, e);
                    Diagram.UnselectModel(movable);
                }
            }
            else
            {
                ApplyPosition(movable, ndx, ndy);
            }
        }
    }

    private void ApplyPosition(MovableModel movable, double ndx, double ndy)
    {
        if (Diagram.Options.GridSnapToCenter && movable is NodeModel node)
        {
            node.SetPosition(ndx - (node.Size?.Width ?? 0) / 2, ndy - (node.Size?.Height ?? 0) / 2);
        }
        else
        {
            movable.SetPosition(ndx, ndy);
        }
    }