Dragging both rectangles "breaks" draw2d

[FunDeckHermit]

How to reproduce:

1. Make a figure with relative ports and connect them
2. Select and drag both of them
3. Drag one of the figures The UI is very laggy and unresponsive, ports are not connected to parent anymore. Only the InteractiveManhattanConnectionRouter triggers this behavior. Disabling SnapToGrid does not fix it.

[e2sence]

The UI is very laggy and unresponsive, ports are not connected to parent anymore. Only the InteractiveManhattanConnectionRouter triggers this behavior. Disabling SnapToGrid does not fix it.

Hello please provide more information, it is best to show the code

[ms8817]

Hi,

first of all, thanks for the amazing library, it is very nice and intuitive.

Summary

I can confirm I sometimes get a similar behaviour, when using the InteractiveManhattanConnectionRouter to route my connections, though I am not sure that it is specifically related to the issue as I did not try other routers. I cannot reproduce the bug consistently, it only happens from time to time (this is why I am not being able to provide a minimum reproducible example at the moment).

Expected Behaviour

Dragging a component re-routes the connection "as normal".

Actual behaviour

The interface becomes unresponsive, the connection becomes a straight line connecting source and target port (instead of being routed like the Manhattan router usually does). This bug requires the application to be restarted.

Extra info

It looks like the lag-ish behaviour is due to the library code getting stuck into an infinite recursion, which eventually leads to a stack overflow. Here is a screenshot of the error from the Chrome devTools console (sorry about it being a screenshot instead of a copy and paste, this happened last a couple of days ago and I did not think of copying it).

By stepping through the code with the devTools debugger, I found out that the issue may be related to the function onMouseUp: function onMouseUp(canvas, x, y, shiftKey, ctrlKey) inside draw2d.policy.canvas.BoundingboxSelectionPolicy, though this may be not true.

If this can be useful, here is the function I use to create connections:

let router = new draw2d.layout.connection.InteractiveManhattanConnectionRouter();
router.abortRoutingOnFirstVertexNode = false;

function createDigitalConnection(sourcePort, targetPort) {
    if (sourcePort === "undefined" || targetPort === "undefined") {
        throw "CreateDigitalConnection called with sourcePort or targetPort set to undefined";
    }
   let isBus = false; // Here there is actually some more logic to determine the value of itBus, but it is not relevant to the example. 
   let c = new draw2d.Connection({
        outlineColor: 'white',
        outlineStroke: 1,
        color: isBus ? 'purple' : 'black',
        router: router,
        stroke: isBus ? 3 : 1,
        radius: 6,
        selectable: true,
    });
    // Add label.
    c.add(
        new draw2d.shape.basic.Label({text: '', stroke: 0, fontSize: 10, bold: true, fontColor: 'purple'}),
        new draw2d.layout.locator.BusLabelLocator()
    );
    c.setSource(sourcePort);
    c.setTarget(targetPort);
    return c;
}

Environment

I am running draw2d from within an Electron application packaged with Webpack. The Chromium version I am using i 59. I do not expect electron to have anything to do with this issue though.

[tomcl]

Just a comment on this issue. It seems that connections with colinear end-points trigger this.

Here is the JSON for a circuit which when loaded and interactivemanhattanconnection routed cases the above (@ms8817) stack problem whenever the right-hand component is dragged. All shapes have relative ports with positions as shown in picture.

the shapes as loaded (before the router breaks) are as below

The bug happens on any attempt to drag components: the visible component positions do not change and the application becomes unresponsive:

The JSON showing port info (and some other stuff not relevant):

["CanvasWithFileWaveInfo",[[{"Id":"5036a6e7-4a89-cd5c-32b0-72a0dd808254","Type":["Input",1],"Label":"A","InputPorts":[],"OutputPorts":[{"Id":"0024caa7-0d16-f2d0-1e7d-bb14010eb96f","PortNumber":0,"PortType":"Output","HostId":"5036a6e7-4a89-cd5c-32b0-72a0dd808254"}],"X":500,"Y":58,"H":43,"W":30},{"Id":"36cf8b95-756c-e2c0-66ad-851bf622a271","Type":"Not","Label":"G0","InputPorts":[{"Id":"33bcc2fc-968d-d96e-945b-9282878e0c3b","PortNumber":0,"PortType":"Input","HostId":"36cf8b95-756c-e2c0-66ad-851bf622a271"}],"OutputPorts":[{"Id":"2ec41a0d-299b-9a11-f29d-e4818e9e0edc","PortNumber":0,"PortType":"Output","HostId":"36cf8b95-756c-e2c0-66ad-851bf622a271"}],"X":614,"Y":47,"H":65,"W":42},{"Id":"40d8ddcc-f758-55bc-a0ba-cfc8b7d04b08","Type":["Output",1],"Label":"B","InputPorts":[{"Id":"3a0719f6-2cb2-859a-a58c-bd2506d765f8","PortNumber":0,"PortType":"Input","HostId":"40d8ddcc-f758-55bc-a0ba-cfc8b7d04b08"}],"OutputPorts":[],"X":730,"Y":58,"H":43,"W":30}],[{"Id":"99323780-9b63-8ed6-681c-b6f7bda5b10a","Source":{"Id":"2ec41a0d-299b-9a11-f29d-e4818e9e0edc","PortType":"Output","HostId":"36cf8b95-756c-e2c0-66ad-851bf622a271"},"Target":{"Id":"3a0719f6-2cb2-859a-a58c-bd2506d765f8","PortType":"Input","HostId":"40d8ddcc-f758-55bc-a0ba-cfc8b7d04b08"},"Vertices":[[656,68],[730,68]]},{"Id":"ac65528a-2eee-ebea-6bf6-b195d0a3e528","Source":{"Id":"0024caa7-0d16-f2d0-1e7d-bb14010eb96f","PortType":"Output","HostId":"5036a6e7-4a89-cd5c-32b0-72a0dd808254"},"Target":{"Id":"33bcc2fc-968d-d96e-945b-9282878e0c3b","PortType":"Input","HostId":"36cf8b95-756c-e2c0-66ad-851bf622a271"},"Vertices":[[530,68],[614,68]]}]],{"Ports":[],"ClkWidth":1,"Cursor":0,"Radix":"Bin","LastClk":9,"WaveAdderOpen":true,"WaveAdderPorts":[]},"2020-09-15T08:04:05.965Z"]

The stacktrace info:

RangeError: Maximum call stack size exceeded
    at Class.applyTransformation (C:\github\issie\node_modules\draw2d\dist\draw2d.js:40347)
    at Class.repaint (C:\github\issie\node_modules\draw2d\dist\draw2d.js:10560)
    at Class.repaint (C:\github\issie\node_modules\draw2d\dist\draw2d.js:61545)
    at Class.prototype.<computed> [as repaint] (eval at ./node_modules/script-loader/addScript.js.module.exports (C:\github\issie\node_modules\draw2d\dist\draw2d.js:3671), <anonymous>:79:26)
    at Class.repaint (C:\github\issie\node_modules\draw2d\dist\draw2d.js:15151)
    at Class.prototype.<computed> [as repaint] (eval at ./node_modules/script-loader/addScript.js.module.exports (C:\github\issie\node_modules\draw2d\dist\draw2d.js:3671), <anonymous>:79:26)
    at Class.repaint (C:\github\issie\node_modules\draw2d\dist\draw2d.js:44263)
    at Class.prototype.<computed> [as repaint] (eval at ./node_modules/script-loader/addScript.js.module.exports (C:\github\issie\node_modules\draw2d\dist\draw2d.js:3671), <anonymous>:79:26)
    at Class.repaint (C:\github\issie\node_modules\draw2d\dist\draw2d.js:14688)
    at Class.prototype.<computed> [as repaint] (eval at ./node_modules/script-loader/addScript.js.module.exports (C:\github\issie\node_modules\draw2d\dist\draw2d.js:3671), <anonymous>:79:26)