How can i insert node in tree layout

GoJS
1

hi.

i want insert node between node.

i think the node is looks like correctly inserted in node and link data.

but From the looks of the diagram, it doesn’t seem like it.

Is there an option I made a mistake on?

자산 1
자산 1351×787 27.5 KB

here are my diagram info.
ps. my project based on Gojs Pipes example.

[Diagram properties]
initialScale: initialScale,
“commandHandler.defaultScale”: initialScale,
allowLink: false,
allowDragOut: true,
autoScrollRegion: 0,
layout : $(go.TreeLayout,
alignment: go.TreeLayout.AlignmentStart,
angle: 0,
compaction: go.TreeLayout.CompactionNone,
layerSpacing: -10,
layerSpacingParentOverlap: 0.5,
nodeIndentPastParent: 0.5,
nodeSpacing: 0.5,
setsPortSpot: false,
setsChildPortSpot: false

[Drop event info]
function dropOntoNode(e, oldnode) {
console.log(dropontonode());
if (oldnode instanceof go.Node) {
// drawLink(e, oldnode);
let outnode = oldnode.findNodesOutOf().first();
let innode = oldnode.findNodesInto().first();
console.log("outnode :: ", outnode);
console.log("innode :: ", innode);

    if(outnode && innode){
      console.log("끼워넣기");
      drawLinkBetween(e, oldnode);
    }else if(outnode){
      console.log("아래 넣기");
      drawLink(e, oldnode);
    }
}

}

[Insert node between info]
function drawLinkBetween(e, oldnode){

var diagram = e.diagram;

var newnode = diagram.selection.first();
let prevnode = oldnode;
let nextnode = oldnode.findNodesInto().first();
let previnlink = prevnode.findLinksInto().first();
let nextoutlink = nextnode.findLinksOutOf().first();

diagram.remove(previnlink);
diagram.remove(nextoutlink);

const newport = newnode.ports;
newport.next();
const newport2 = newnode.ports;
newport2.next();
newport2.next();
const prevport = prevnode.ports;
prevport.next();
prevport.next();
const nextport = nextnode.ports;
nextport.next();

diagram.toolManager.linkingTool.insertLink( newnode, newport.value, prevnode, prevport.value);
diagram.toolManager.linkingTool.insertLink( nextnode, nextport.value, newnode, newport2.value );

diagram.layoutDiagram(true);
}

If my explanation is insufficient, please let me know.

my web site url is
https://letsus.co.kr/creativeTool/tool4m4w.html

2

First, if your graph is truly meant to be tree-structured, then you can get the previous node via Node.findTreeParentNode and the collection of succeeding nodes via Node.findTreeChildrenNodes. You can also find the corresponding Links using Node.findTreeParentLink and Node.findTreeChildrenLinks.

Second, I suggest that your code use Node.findPort in order to find the port elements that you want to connect. Stepping through iterators isn’t the most understandable way to get the results that you want.

Third, it appears that you are connecting the new node wrong, as shown by your second screenshot. I think you have the ports confused.

Fourth, you need to execute a transaction around all of these changes that happen upon a drop. That will also avoid the need for calling Diagram.layoutDiagram, since all invalid layouts will automatically be performed towards the end of a transaction.