Force Directed layout on gojs v2-1-34

by saurabhkolhe

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go.js"></script>
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:650px"></div>
</div>
<! This is diagram chart template >

JavaScript

function init() {
  const $ = go.GraphObject.make;

  myDiagram = $(go.Diagram, "myDiagramDiv", {
    "undoManager.isEnabled": true,
  });

  myDiagram.nodeTemplate = $(
    go.Node,
    "Vertical",
    {
      selectable: true,
      selectionAdorned: false,
    },
    $(
      go.Panel,
      "Auto",
      $(
        go.Panel,
        "Table",
        $(
          go.Panel,
          "Auto",
          $(go.Shape, "Rectangle", {
            fill: "yellow",
            name: "SHAPE",
            height: 40,
          })
        ),
        $(
          go.TextBlock,
          {
            textAlign: "center",
            verticalAlignment: go.Spot.Bottom,
            row: 2,
            width: 150,
            height: 30,
          },
          new go.Binding("text", "name")
        )
      )
    )
  );

  // 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" }
    )
  );

  myDiagram.layout = $(go.ForceDirectedLayout, {
    defaultSpringLength: 30,
    defaultElectricalCharge: 200,
  });

  load();
  
  myDiagram.addDiagramListener("InitialLayoutCompleted", () => {
  	myDiagram.zoomToFit();
  });
} // end init

function load() {
  var nodeDataArray = [
    {
      key: 0,
      name: "Demo Assembly Component ID-0",
    },
    {
      key: 1,
      name: "Demo Assembly Component ID-1",
    },
    {
      key: 2,
      name: "Demo Assembly Component ID-2",
    },
    {
      key: 3,
      name: "Demo Assembly Component ID-3",
    },
    {
      key: 4,
      name: "Demo Assembly Component ID-4",
    },
    {
      key: 5,
      name: "Demo Assembly Component ID-5",
    },
    {
      key: 6,
      name: "Demo Assembly Component ID-6",
    },
    {
      key: 7,
      name: "Demo Assembly Component...