Prevent the diagram from moving

GoJS
1

Hi,

How can I prevent the whole diagram from being moved when scrolling?
It’s happens when there is no scroll and trying to scroll, happens also in almost all of the samples.
I’ve tried to disable the panning tool by calling “myDiagram.toolManager.panningTool.isEnabled = false” when initializing the diagram but that does not seem to be working.

myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
        initialContentAlignment: go.Spot.Top,
        allowDrop: true,
        "animationManager.isEnabled": false,
        "undoManager.isEnabled": false,
        isReadOnly: true,
        allowSelect: false,
        "BackgroundSingleClicked" : handleBackgroundClick,
        "InitialLayoutCompleted": onInitialComplete
    });

myDiagram.toolManager.panningTool.isEnabled = false;

Thanks,
Dor.

2

An aside: you can achieve that disabling of the PanningTool in your diagram initialization by:

          . . .
          "panningTool.isEnabled": false,
          . . .

I’m afraid that I don’t understand exactly the behavior that you want to avoid. What do you mean by “diagram from being moved when scrolling”?

“Scrolling a diagram” by definition means changing the value of Diagram.position. That changes where the nodes and links get drawn in the viewport.

“Moving a node” by definition means changing the value of Node.position or Node.location.

3

Hi,

Thanks for the fast reply.
The situation I’m trying to avoid happens when the canvas is bigger than the actual diagram and I’m scrolling the diagram.
In that case I expect nothing to happen since the whole diagram is visible and there are no scroll bars but in fact, the diagram is moving inside the canvas.
Disabling the panning tool prevent me to move the diagram around inside the canvas when dragging but when I’m using the mouse touchpad (in apple mouse) or the mac touchpad it moves the diagram inside the canvas.
It happens also in any of the examples in GoJS Tools -- Northwoods Software

Dor.

4

OK, if I understand you correctly, I think you do indeed want to disable the PanningTool when the whole document fits within the viewport. But did you want to allow panning when there are scrollbars?

If not, just leave the PanningTool.isEnabled to false.

But if so, you could enable/disable it automatically with a DiagramEvent listener like:

  $(go.Diagram, . . . ,
    { . . .,
      "ViewportBoundsChanged", function(e) {
          e.diagram.toolManager.panningTool.isEnabled =
              !e.diagram.viewportBounds.containsRect(e.diagram.documentBounds);
      },
      . . .
    })

Hmmm, you might also need to establish a “DocumentBoundsChanged” DiagramEvent listener just like it.

5

I do want the ability to scroll when needed and just disable the ability to move the diagram around in the canvas.
The case when the diagram moves around in the canvas happens when the diagram is smaller than the canvas and I’m using the mac touchpad or the apple touch mouse and scrolling over the diagram.

Disabling the panning tool didn’t work for me.
It just disable the ability to drag and move the diagram but its still moving when I’m using a touchpad.
Am I missing something? can you post a simple example where the diagram is smaller than the canvas and is not moveable?
The only case it works for me is when the whole diagram is disabled and thats not what I want.

Thanks again for replying so fast.

6

I think that when you use the touchpad (two fingers, yes?) that it is scrolling the scrollbar, not using the PanningTool. So you may want to also set Diagram.allowHorizontalScroll and Diagram.allowVerticalScroll.

7

Hi,

Thanks for helping.
In order to scroll only when the diagram is not fully visible I’ve used:

        "ViewportBoundsChanged": function(e) {
          let allowScroll = !e.diagram.viewportBounds.containsRect(e.diagram.documentBounds);
          myDiagram.allowHorizontalScroll = allowScroll;
          myDiagram.allowVerticalScroll = allowScroll;
        }

Dor.