How to set the initial position of the first object dropped in the canvas

GoJS
1

Hi,
Thanks for your continued help. How can I set the position of the first object dropped on canvas to new go.Point(50, 50), I have defined my canvas like this.

diagram = GJS(go.Diagram, 'canvas', {
      'toolManager.hoverDelay': 50,
      initialContentAlignment: go.Spot.TopLeft,
      allowDrop: true,
      'undoManager.isEnabled': true,
      'linkingTool.isEnabled': false,
      'linkingTool.direction': go.LinkingTool.ForwardsOnly,
      scrollsPageOnFocus: false,
      allowHorizontalScroll: false,
      allowVerticalScroll: false,
      initialPosition : new go.Point(50, 50),
      initialAutoScale: go.Diagram.Uniform,
      scrollMode: go.Diagram.InfiniteScroll,
    });

Previously I was using it

diagram = GJS(go.Diagram, 'canvas', {
      'toolManager.hoverDelay': 50,
      initialContentAlignment: go.Spot.TopLeft,
      allowDrop: true,
      'undoManager.isEnabled': true,
      'linkingTool.isEnabled': false,
      'linkingTool.direction': go.LinkingTool.ForwardsOnly,
      scrollsPageOnFocus: false,
      allowHorizontalScroll: false,
      allowVerticalScroll: false,
      initialPosition : new go.Point(50, 50),
      initialAutoScale: go.Diagram.Uniform,
      scrollMode: go.Diagram.InfiniteScroll,
      layout: GJS(go.LayeredDigraphLayout, {
        arrangementOrigin: new go.Point(50, 50),
       })
    });

With the second approach, it was possible but with the first one, it is not. I don’t want to use the ```layout`` on canvas.

2

Diagram.initialPosition refers to the starting Diagram.position, not to the GraphObject.position of any Node.

If you want to assign the Node.position or Node.location when the user has dropped (a copy of) a node in the diagram, thereby ignoring where the user did the drop, implement an “ExternalObjectsDropped” DiagramEvent listener that assigns the desired position or location to each of the dropped nodes. GoJS Events -- Northwoods Software

More generally, it is actually the responsibility of the Diagram.layout to position nodes, but if you do not assign that property of your diagram, then you have the freedom to move nodes around programmatically whenever you want.

3

I don’t want to use Diagram.layout.
On ExternalObjectsDropped

const checkTriggerActivity = e.subject.first().data;
      if (checkTriggerActivity.type === 'trigger') {
        this.isTriggerDragged = true;
        console.log('check if this is a node inside the listerner', e.subject.first());
        diagram.layout.arrangementOrigin = new go.Point(50, 50);
      }

I am trying to set the position of the first node. Is there something wrong with this ?? I am not able to achieve the desired result.

Is there a way to set it
diagram.layout.arrangementOrigin = new go.Point(50, 50)
other than this

4

Layout.arrangementOrigin just applies to a Layout. Since you do not have a layout, it really has no effect on drag-and-drop results.

Just set the Node.position or Node.location. For example, in this Diagram initialization:

$(go.Diagram, . . .,
  {
    . . .,
    "ExternalObjectsDropped": function(e) {
      var x = 50;
      e.subject.each(function(part) {
        if (part instanceof go.Node) {
          part.position = new go.Point(x, 50);
          x += 50;
        }
      });
    }
  })
1 Like
5

Thank You @walter It worked!!