1

I have two figures, one in the visible area of my canvas and one outside (on the right). It is not possible to make a connection because I can't reach the other figure. Is it possible to autoscroll, to the right while creating a connection so I can connect to that figure?

Dreqnoid
  • 31
  • 7

2 Answers2

0

Unfortunately you will have to handle the scrolling on your own. Try something like this

var canvas = new draw2d.Canvas("canvas_id");
var scrollElement = canvas.getScrollArea();
var viewArea = new draw2d.geo.Rectangle(
                            scrollElement.scrollLeft(), scrollElement.scrollTop(),
                            scrollElement.width() * canvas.zoomFactor, scrollElement.height() * canvas.zoomFactor);

var outputLocator  = new draw2d.layout.locator.OutputPortLocator();
var port = figure.createPort("output", outputLocator);

port.on('drag', function(){

  if (!viewArea.contains(port.getBoundingBox())) {
    // -- the port has moved off the visible area of the canvas so scroll the view.   
  }
})
Thomas Kagan
  • 440
  • 3
  • 16
  • Hi Thomas, I didn't manage it with above code but created another solution. By using a different connection router and a own canvas policy i'm able to readout the mouse position and scrollbars off my canvas. With that code i can create an autoscroll option. – Dreqnoid Jun 09 '17 at 08:04
0

Canvas policy:

var myScroll = draw2d.policy.canvas.CanvasPolicy.extend ({ NAME: 'myScroll',
                init: function() {
                this._super();
              },


onMouseMove: function(the, mouseX, mouseY, shiftKey, ctrlKey) {

        this._super(the, mouseX, mouseY, shiftKey, ctrlKey);

        if (mouseX>the.getWidth()-100+the.getScrollLeft()) { 

            $buffer = $("#canvas").scrollLeft();
            $treshold = 10;
            $("#canvas").scrollLeft($buffer+$treshold);


        }
}
Dreqnoid
  • 31
  • 7