Highlight the autoScrollRegion to aware user to scroll diagram while dragging

GoJS
1

HI
this is my simple diagram

myDiagram = $(
    go.Diagram,
    "chart-container",
    {
      initialAutoScale: go.Diagram.UniformToFill,
      layout: $(go.LayeredDigraphLayout, {direction:90, layerSpacing: 100 }),
      isReadOnly: false,
      autoScrollRegion: new go.Margin(50, 50, 50, 50),
    }
  );

just need to Highlight the autoScrollRegion to aware user how to scroll while your creating link to out of view node.
so we will add some note about it.
or if we are able to add some penels on edges of canvas like 30px border which is no move with internal graph.
Thanks

2

I suppose you could override the LinkingTool.doMouseMove method to call the super method and then (if the mouse is in the auto-scroll region) highlight that area using a simple Part with the desired background color that you add to the “Grid” Layer at the appropriate position with the appropriate size.

3

Thanks
by using LinkingTool.doMouseMove i got the new idea my problem was chart is not scrolling when mouse is out of diagram bounds.
Now i gets the position of mouse by using LinkingTool.doMouseMove and when mouse get out of bounds i scroll the canvas manually.
for help others this is the code

var customLinkingTool = myDiagram.toolManager.linkingTool;

customLinkingTool.doMouseMove = function() {
  if (this.isActive) {
  
    var widthOfCanvas = parseInt(this.diagram.div.getElementsByTagName("canvas")[0].style.width);
    var heightOfCanvas = parseInt(this.diagram.div.getElementsByTagName("canvas")[0].style.height);

      
    if(this.diagram.lastInput.viewPoint.x < 0 && this.diagram.lastInput.viewPoint.x > -10){
      this.diagram.scroll("pixel", "left", 5);
    }else if(this.diagram.lastInput.viewPoint.x < -10){
      this.diagram.scroll("pixel", "left", 20);
    }

    if(this.diagram.lastInput.viewPoint.y < 0 && this.diagram.lastInput.viewPoint.y > -10){
      this.diagram.scroll("pixel", "up", 5);
    }else if(this.diagram.lastInput.viewPoint.y < -10){
      this.diagram.scroll("pixel", "up", 20);
    }

    if(this.diagram.lastInput.viewPoint.x > widthOfCanvas  && this.diagram.lastInput.viewPoint.x < (widthOfCanvas + 10 )){
      this.diagram.scroll("pixel", "right", 5);
    }else if(this.diagram.lastInput.viewPoint.x >  (widthOfCanvas + 10 )){
      this.diagram.scroll("pixel", "right", 20);
    }

    if(this.diagram.lastInput.viewPoint.y > heightOfCanvas  && this.diagram.lastInput.viewPoint.x < (heightOfCanvas + 10 )){
      this.diagram.scroll("pixel", "down", 5);
    }else if(this.diagram.lastInput.viewPoint.y >  (heightOfCanvas + 10 )){
      this.diagram.scroll("pixel", "down", 20);
    }
  
    //this.moveLastPoint(this.diagram.lastInput.documentPoint);
    go.LinkingTool.prototype.doMouseMove.call(this);
   }

 };

 myDiagram.currentTool = customLinkingTool;
 customLinkingTool.doActivate();

Thank you very much!