Node structure - Can we create a hollow section inside the node to be able to dock links inside for the input ports? The links should also have a half filled ellipses as an arrow head that can fit inside a node


#1

NodeStructure
linking
linked


#2

I think so. If you give us some time, we can try it.


#3

Sure. Thank you!


#4
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  go.Shape.defineFigureGenerator("Port", function(shape, w, h) {
    var geo = new go.Geometry();
    var cpOffset = 4 * ((Math.sqrt(2) - 1) / 3) * .5;
    var fig = new go.PathFigure(0, 0, true);
    geo.add(fig);
    fig.add(new go.PathSegment(go.PathSegment.Line, .5 * w, 0));
    fig.add(new go.PathSegment(go.PathSegment.Bezier, w, .5 * h, (.5 + cpOffset) * w, 0, w, (.5 - cpOffset) * h));
    fig.add(new go.PathSegment(go.PathSegment.Bezier, .5 * w, h, w, (.5 + cpOffset) * h, (.5 + cpOffset) * w, h));
    fig.add(new go.PathSegment(go.PathSegment.Line, 0, h));
    return geo;
  });

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

    var temporaryLink =
      $(go.Link,
        $(go.Shape, { stroke: "blue", strokeWidth: 2 }),
        $(go.Shape,
          { segmentIndex: -1, segmentOffset: new go.Point(10/2, 0),
            figure: "Port", fill: "gray", strokeWidth: 0, width: 10, height: 12 })
      );

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            "undoManager.isEnabled": true,
            "linkingTool.temporaryLink": temporaryLink,
            "relinkingTool.temporaryLink": temporaryLink,
            "ModelChanged": function(e) {     // just for demonstration purposes,
              if (e.isTransactionFinished) {  // show the model data in the page's TextArea
                document.getElementById("mySavedModel").textContent = e.model.toJson();
              }
            }
          });

    function portStyle(input) {
      return {
        figure: "Port",
        width: 10, height: 12,
        fill: input ? "white" : "gray",
        strokeWidth: input ? 1 : 0,
        stroke: "gray",
        alignment: input ? new go.Spot(0, 0.5, -0.51, 0) : new go.Spot(1, 0.5, -0.51, 0),
        alignmentFocus: input ? go.Spot.Left : go.Spot.Left,
        portId: input ? "in" : "out",
        fromLinkable: !input,
        toLinkable: input,
        fromSpot: go.Spot.Right,
        toSpot: go.Spot.Left
      }
    }

    function updatePort(node, link, port) {
      var input = port.toLinkable;  // a bit of a hack to decide if a port is for input or not
      var connected = node.findLinksConnected(port.portId).count > 0;
      if (input && !connected) {
        port.fill = "white";
        port.strokeWidth = 1;
        port.alignment = input ? new go.Spot(0, 0.5, -port.strokeWidth/2, 0) : go.Spot.Left;
      } else {
        port.fill = "gray";
        port.strokeWidth = 0;
        port.alignment = input ? go.Spot.Left : go.Spot.Right;
      }
    }

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        { locationObjectName: "BODY", selectionObjectName: "BODY" },
        { linkConnected: updatePort, linkDisconnected: updatePort },
        $(go.Panel, "Auto", { name: "BODY", width: 100, height: 50 },
          $(go.Shape, { fill: "white", stroke: "gray" }),
          $(go.TextBlock, { editable: true },
            new go.Binding("text").makeTwoWay())
        ),
        $(go.Shape, portStyle(true)),
        $(go.Shape, portStyle(false))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { relinkableFrom: true, relinkableTo: true },
        $(go.Shape))

    myDiagram.model = $(go.GraphLinksModel,
    {
      linkFromPortIdProperty: "fromPort",
      linkToPortIdProperty: "toPort",
      nodeDataArray:
        [
          { key: 1, text: "Alpha"  },
          { key: 2, text: "Beta" },
        ],
      linkDataArray:
        [
          { from: 1, fromPort: "out", to: 2, toPort: "in" }
        ]
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>

This, after making a copy of the “Beta” node and starting to draw a new link to it, results in:
image


#5

Works perfectly. Thank you for the assistance.