Create Node on Canvas makes no Grid Snapping

GoJS
1

Hi,
we drag an drop HTML elements on GoJS canvas. After dropping we create a Node and place the Node on a position
dgr.transformViewToDoc(new go.Point(canvasPoint.x + (gridSize * 2), canvasPoint.y);

Grid snapping does not work on the position of the new node.
Is it possible to activate grid snapping manually?

Our main interest is to have/generate straight lines without kinks. This is more difficult to achieve with ‘unsnapped’ nodes.

Regards,
Ansgar

2

If you don’t want to make the correct location computation yourself, you could just call Diagram.moveParts with a zero offset to do it for you. Diagram | GoJS API

I’ve just confirmed this by modifying the samples/htmlDragDrop.html sample by adding a call to Diagram.moveParts just before the call to onDrop:

      myDiagram.model.addNodeData(newdata);
      const newnode = myDiagram.findNodeForData(newdata);
      if (newnode) {
        newnode.ensureBounds();
        myDiagram.select(newnode);
        // the additional statement:
        myDiagram.moveParts([ newnode ], new go.Point(0, 0));
        onDrop(newnode, point);
      }

Of course this assumes you have set DraggingTool.isGridSnapEnabled to true, or else you need to pass the appropriate DraggingOptions to that call to Diagram.moveParts.

3

in your samples the diagram moves completely.

the problem what we have, when we drag a new shape onto the canves on an existing shape a line is created automatically but the new shape is not arranged properly with a straight line under top element.
as you see in the attached picture

Unbenannt

the new shape is arranged right or left. we want straight line and arrange the new shape under the top shape

we want it like this attached picture

Unbenannt
Unbenannt746×390 21.4 KB

4

Normally the automatic positioning of nodes is performed by a Layout. You don’t seem to have an explicit Diagram.layout, and probably you don’t want one because you are depending on users doing the positioning manually, as is typical for apps that include palettes.

But when the drop onto a node happens, it seems that you are automatically creating a link from the dropped-onto-node to the newly-dropped-node. You could set the Node.location of that newly dropped node so that it has a particular location relative to the dropped-onto node. Something like:

newnode.location = new go.Point(existingnode.location.x, existingnode.location.y + 100);
5

Thank you for your help