How to overcome the port detach issue?

Question

In this example : Undo/Redo

• Drop the start node on to the canvas.
• Mousedown on the port and drag it.
• Now while dragging press RIGHT CLICK.

Now the issue is that the port become detach from the start node. It should not be happen.

Please look in to the image below for better understanding. Please help me to overcome this issue. Thanks in advance.

Answer 1

This is a bug and will be fixed in one of the next releases.

Answer 2

I have closely analyse the issue and come to the conclusion as :

• Problem is on Mouse Down and Mouse Up.
• As I have seen when I have mouse down and drag the port and then press right mouse down. then what happen is mouse down called in the canvas.js.

• Then when right mouse up then mouse up of canvas.js called and make mouseDown = false.

  this.html.bind("mouseup touchend", $.proxy(function(event)
      {
          if (this.mouseDown === false)
              return;
  
          event = this._getEvent(event);
  
          this.mouseDown = false;// it makes mouseDown false
          this.onMouseUp();
      }, this));
  

• So for know quick fix I have ckecked if right mouse up and right mouse down then return as:

In Mouse Down :

    this.html.bind("mousedown touchstart", $.proxy(function(event)
        {                
           event.preventDefault();

           if(event.which == 3)//added this in the mouse down
              return;

           event = this._getEvent(event);

           this.mouseDownX = event.clientX;
           this.mouseDownY = event.clientY;
           var pos = this.fromDocumentToCanvasCoordinate(event.clientX, event.clientY);
           this.mouseDown = true;
           this.onMouseDown(pos.x, pos.y);
    }, this));

In Mouse Up :

this.html.bind("mouseup touchend", $.proxy(function(event)
        {
            //added extra condition for right click
            if (this.mouseDown === false || event.which == 3)
                return;

            event = this._getEvent(event);

            this.mouseDown = false;// it makes mouseDown false
            this.onMouseUp();
        }, this));

• After above modification the problem is resolved, I might be wrong. Please correct me, as i have not tested it deeply but ya its working. I need your guidance on that. Sorry for altering the code.

THANKS YOU SO MUCH:)