sample radial layout

radial layout for from and to functionality

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<script src="https://gojs.net/latest/extensions/RadialLayout.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 init() {
  const $ = go.GraphObject.make;
  myDiagram =
    $(
      go.Diagram, "myDiagramDiv", // must be the ID or reference to div
      {
				layout: $(RadialLayout, {
          maxLayers: 2,
          rotateNode: function(node, angle, sweep, radius) { // method override must be function, not =>
            // rotate the nodes and make sure the text is not upside-down
            node.angle = angle;
            var label = node.findObject("TEXTBLOCK");
            if (label !== null) {
              label.angle = ((angle > 90 && angle < 270 || angle < -90) ? 180 : 0);
            }
          },
          commitLayers: function() { // method override must be function, not =>
            // optional: add circles in the background
            // need to remove any old ones first
            const diagram = this.diagram;
            var gridlayer = diagram.findLayer("Grid");
            var circles = new go.Set( /*go.Part*/ );
            gridlayer.parts.each(circle => {
              if (circle.name === "CIRCLE") circles.add(circle);
            });
            circles.each(circle => diagram.remove(circle));
            // add circles centered at the root
            for (var lay = 1; lay <= this.maxLayers; lay++) {
              var radius = lay * this.layerThickness;
              var circle =
                $(go.Part, {
                    name: "CIRCLE",
                    layerName: "Grid"
                  }, {
                    locationSpot: go.Spot.Center,
                    location: this.root.location
                  },
                  $(go.Shape, "Circle", {
                    width: radius * 2,
                    height: radius * 2
                  }, {
                    fill: "rgba(200,200,200,0.2)",
                    stroke: null
                  }));
              diagram.add(circle);
            }
          }
        }),
        "undoManager.isEnabled": true // enable undo & redo
      });

 /*...