Canvas position

I use ‘initialPosition: new go.Point(0, 0),’ to fix my panel, but after dragging into the node, the initial coordinate of the panel still changes. Can the initial coordinate of the canvas always be fixed to (0, 0), and drag the node to the right or below to exceed Scroll bars appear at the edges instead of moving the canvas
And can it be set that the node exceeds the canvas size, and the canvas can only be scrolled when a scroll bar appears, instead of the canvas can scroll to the node to the edge of the canvas

Looking forward to your reply

The Diagram properties named “initial…” refers to the state of the diagram at a particular time, not what you are thinking of. That particular time is after the programmer has replaced the value of Diagram.model, when the library has had time to create all of the nodes and links, lay them out, and update the display. This is discussed at: GoJS Initial Viewport -- Northwoods Software

I think you are wanting some different behaviors for your diagram than the standard behaviors.

  1. Are you trying to disallow the user from scrolling to negative coordinates? You can implement this by providing a function for Diagram.positionComputation: Diagram | GoJS API. See the discussion at: GoJS Coordinate Systems-- Northwoods Software and the sample at: Scroll Modes GoJS Sample. Basically you want to use a function that never returns negative values for the x or y.

  2. I think you want to make sure that the Diagram.documentBounds’s Rect.position is never at positive values for x or y. You can do that by making your Diagram.positionComputation smarter – not just never negative values for x and y but also so that the x or y are not positive values as long as the Diagram.documentBounds width or height are smaller than the space available in the viewport. But I’m not sure exactly what you want here.

  3. I think you want to disable auto-scrolling. Just set Diagram.autoScrollRegion to a zero Margin.

Thank you for your reply

I think if I drag a node up or to the left, the canvas won’t expand, the node will stay at the edge, and when I drag it to the right or down, the canvas will expand and a scroll bar will appear, instead of moving my other nodes to the left

Like this picture, when I drag a node to the right border, he will move my other nodes to the left, until the left side also reaches the border, the scroll bar will appear, which is not what I want

You may also need to limit where nodes can be moved to. There are two ways of doing that:

  1. set or bind Node.minLocation, or
  2. set Node.dragComputation to a function that only returns the new Node.location Point that you want to allow.

I hope node shouldn’t go out of the view port in left and top side ,but in the right and bottom it can move out of the view port means it should enable the vertical and horizontal scroll bar

My question is the same as this one, but I didn’t get the result I wanted according to the suggestions inside. Can you give me more detailed suggestions?
Thank you

Try this:

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          positionComputation: (diag, pt) => new go.Point(Math.max(-diag.padding.left, pt.x), Math.max(, pt.y))

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
          dragComputation: (node, pt, snappt) => {
            var dx = node.location.x - node.actualBounds.x;
            var dy = node.location.y - node.actualBounds.y;
            return new go.Point(Math.max(dx, snappt.x), Math.max(dy, snappt.y));
        // the details of the node don't matter
        $(go.Shape, { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock, { margin: 8 },
          new go.Binding("text"))

The Diagram.positionComputation ensures that the viewport never shows negative coordinates, except immediately along the edge as determined by the Diagram.padding.

The Node.dragComputation keeps the user from dragging nodes into negative coordinates.

This is effective, but when my node is dragged to the right and lower borders, it will still put my other nodes on the left or move up, instead of scrolling.

This is the original look, but when I move the serverAction node to the right edge, my start node will move to the left,

but I hope that the start node will not move, but the canvas has a vertical or horizontal scroll bar
thank you for your patience

Yes, as you move nodes down or to the right, the diagram scrolls to show more of the area occupied by the diagram in the viewport. You did say that the user should be able to scroll. They can do so even if the nodes are close together entirely within the viewport – i.e. when the Diagram.documentBounds fits within the Diagram.viewportBounds.

I don’t see how you can keep the top or left node at a constant distance from the top-left corner of the viewport but still allow scrolling (changing Diagram.position), without changing the zoom level (changing Diagram.scale).

Just to be clear about the terminology, when the diagram is scrolled, none of the nodes are “moved”. Moving a node means changing its Node.location or Node.position. When scrolling happens, nodes may appear to have moved within the viewport, but their Node.location has not changed. Similarly, when zooming, nodes may appear to move, but their Node.location has not changed.

Sorry, there is a problem with my description. I know that the coordinates of the nodes have not changed, but because the graph will automatically accommodate more nodes, the user looks like it has moved

Yes, that is because the diagram has scrolled so that the “RunServerAction” node can be visible.

If you don’t want to see scrollbars but want to allow unlimited scrolling, you could set Diagram.scrollMode to go.Diagram.InfiniteScroll. But I don’t think that is what you want.

Yes, because I disabled the mouse to move the canvas, I hope that the canvas can only be moved by the scroll bar. If Diagram.scrollMode: go.Diagram.InfiniteScroll is set, the scroll bar will not appear.
thank you for your patience

You could override Diagram.computeBounds to always include the origin:

      $(go.Diagram, "myDiagramDiv",
          "undoManager.isEnabled": true,
          positionComputation: (diag, pt) => new go.Point(Math.max(-diag.padding.left, pt.x), Math.max(, pt.y)),
          computeBounds: function() {
            var r =;
            r.unionPoint(new go.Point(-this.padding.left,;
            return r;

Cool, this is exactly what I want, thank you very much