Auto link Creation

GoJS
#1

Hi,
I’m not using GoJs Palette, I’m using a custom palette

export class CustomDiagram extends go.Diagram {
  protected computeBounds() {
    return super.computeBounds().unionPoint(new go.Point(0, 0));
  }
}

const diagramRef = useRef<VolanteDiagram>()

let localDig = $(CustomDiagram, 'messageFlowDiv' , {
      'animationManager.isEnabled': false,
      'initialPosition': new go.Point(0, 0),
    })
diagramRef.current = localDig
  1. when we drag the node(B) from the palette and drop it nearest to the other node(A). The automatic link should be created(A → B).
  2. A and B are linked already. When we try to drop node C on the link. The output should be A → C ->B
    is there any example for both the scenarios and using the location I need to get the nearest part.
#2

#1 I suggest that you use code like that in the “ExternalObjectsDropped” DiagramEvent listener that is in Dropping a Node from a Palette will Automatically be Linked with the Nearest Node

Of course since your users are not dragging from a Palette but from your own component, you’ll have to implement your own drag-and-drop. Just make sure you compute the correct Point in document coordinates by calling Diagram.transformViewToDoc.

#2 There are several examples where dropping a Node onto a Link splices that node between the link’s connected nodes.

The basic idea: Splice Node Into Link

The Flowgrammer sample is perhaps more sophisticated than you need: Flowgrammer

For a different way of splicing a new node into a link: Simple Splicing Sample for GoJS

Related but not what you want because the focus is dropping onto nodes: Reordering Nodes

#3

@walter,
Is there any API or methods to find out the nearest part using location?

#4

The first sample I linked does that.

#5

@walter ,
but in this link Dropping a Node from a Palette will Automatically be Linked with the Nearest Node there is no source code.

#6

All of our samples have source code – just look in the page itself by executing the browser’s View Page Source command. Or by downloading the page.

#7

@walter,

let localDig = $(CustomDiagram, 'messageFlowDiv' , {
      'animationManager.isEnabled': false,
      'initialPosition': new go.Point(0, 0),
      'ExternalObjectsDropped': (e: DiagramEvent) => {
        console.log("e", e)
      }
    })

console was not thrown while dropping the node from the custom palette

#8

That’s right. As I said, if you aren’t using a Diagram such as Palette as the source of the drag-and-drop, you have to implement it yourself. So you cannot use the “ExternalObjectsDropped” DiagramEvent.

https://gojs.net/latest/samples/htmlDragDrop.html

#9

@walter,
Is there any API to find out the nearest port using location?

#10

I assume you saw what that sample is doing – it calls Diagram.findPartsNear to find Nodes that are near a Point in document coordinates.

That Diagram method is just a convenience method that calls the more basic method Diagram.findObjectsNear, which is what you could use to look for individual objects that are ports, e.g. objects have GraphObject.portId set to some string.

As you can guess, the LinkingTool and RelinkingTool also search for nearby ports. If you want to look for valid ports that are nearby, consider this code:

    const tool = myDiagram.toolManager.linkingTool;
    const nearports = myDiagram.findObjectsNear(p, tool.portGravity,
      x => tool.findValidLinkablePort(x, toEnd),
      null, true);

LinkingBaseTool.findValidLinkablePort is an undocumented method that checks GraphObject.fromLinkable or toLinkable and calls either LinkingBaseTool.isValidFrom or isValidTo depending on the value of the “toEnd” argument. Whether you want to pass false or true there depends on which way you want to consider drawing a new link.