Sample diagram chart

testing to and from functionality

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:650px"></div>

</div>

<! This is layered layout >

JavaScript

init();

function nodeClicked(e, node) {
	debugger;
  console.log(node.data);
 /*  var diagram = node.diagram;
  if (diagram === null) return;
  var nodes = myDiagram.nodes;
  nodes.each(n=>{
    n.isVisited = false;
  })
  collapseChildren(node,node.data.key); */
}

function collapseChildren(node,clickedNodeKey){
    node.findTreeChildrenNodes().each(child => {
    if (!child || child.isVisited || child.data.key === clickedNodeKey) return;
    		child.visible = false;
        child.isVisited = true;
        collapseChildren(child,clickedNodeKey);
        
    });
}

function init() {
  const $ = go.GraphObject.make;
  myDiagram =
    $(
      go.Diagram, "myDiagramDiv", // must be the ID or reference to div
      {
				"layout": new go.ForceDirectedLayout(),
        "undoManager.isEnabled": true // enable undo & redo
      });

 /* myDiagram.nodeTemplate =*/
 var nodeTemplate = 
    $(go.Node, "Auto", {
        layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
        click: nodeClicked,
      },
      $(go.Shape, "Rectangle", {
      		fill: "yellow",
          name: "SHAPE",
          height: 40
        }),
      $(go.TextBlock, {minSize: new go.Size(50, 16),
      textAlign: "center"},
        new go.Binding("text", "key")),

    );
  
  // create the nodeTemplateMap, holding three node templates:
const templmap = new go.Map(); // In TypeScript you could write: new go.Map<string, go.Node
templmap.add("",nodeTemplate);
myDiagram.nodeTemplateMap = templmap;


  // define the Link template
  myDiagram.linkTemplate =
    $(go.Link,{
        layerName: "Background",
        corner: 5
      },
      $(go.Shape, {
       	name: "LINK",
        strokeWidth: 1.5,
        stroke: "black"
      }),
      $(go.Shape,  // the "to" arrowhead
            
            { scale: 1, fill: "#D4B52C", toArrow: "Standard" }),
      ); // the link shape

  // read in the JSON-format data from the "mySavedModel" element
  load();
} // end init


function load()...