The location of port

@3q wrote:

In this case,
https://gojs.net/latest/samples/dynamicPorts.html
Q1:I want to be able to bind the location of each port.

  var portSizeV = new go.Size(11, 4);
  var portSizeH = new go.Size(4, 11);

  var gnTemplate =
    g_(go.Node, "Table",
        { locationObjectName: "BODY",
          locationSpot: go.Spot.Center,
          selectionObjectName: "BODY"
        },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

        // the body
        g_(go.Panel, "Auto",
          { row: 1, column: 1, name: "BODY",
            stretch: go.GraphObject.Fill },
          g_(go.Shape, "Rectangle",
            { fill: null, 
        	  stroke: "rgba(255,0,0,1)",
        	  strokeWidth: 4,
        	  minSize: new go.Size(85, 85) },
        	  new go.Binding("background","isHighlighted",function(h) {
        		    return h ? "rgba(255,0,0,0.1)" : "transparent";
        		}).ofObject(),
              new go.Binding("stroke","color"), 
              new go.Binding("strokeWidth","thickness"),
              new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
          g_(go.TextBlock,
            { margin: 10, textAlign: "center",
            font: "bold 10pt  Segoe UI,sans-serif",
            stroke: "black", editable: true },
            new go.Binding("stroke","text_color"), 
            new go.Binding("font", "font").makeTwoWay(),
            new go.Binding("text", "text").makeTwoWay())
        ),  // end Auto Panel body

        //left
        g_(go.Panel, "Vertical",
          new go.Binding("itemArray", "leftArray"),
          { row: 1, column: 0,
            itemTemplate:
              g_(go.Panel,"Spot",
                g_(go.Shape, "Rectangle",
                  { 
                    stroke: null, strokeWidth: 0,
                    desiredSize: portSizeV,
                    margin: new go.Margin(6,0),
                    _side: "left",  
                    //fromLinkableSelfNode:true,
                    //toLinkableSelfNode:true,
                    portId:"",
                    fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
                    fromLinkable: true, toLinkable: true, cursor: "pointer" },
                    new go.Binding("portId", "portId"),
                    new go.Binding("location", "portLoc"),
                    new go.Binding("fill", "portColor")),
                g_(go.TextBlock, {
                  editable: true,
                  angle:0,
                  text:"111",
                  font: "bold 3pt serif",
                  alignment:new go.Spot(0,0,0,9)
                },new go.Binding("text","portText").makeTwoWay())
              )  // end itemTemplate
          }
        ),  

        //top
        g_(go.Panel, "Horizontal",
          new go.Binding("itemArray", "topArray"),
          { row: 0, column: 1,
            itemTemplate:
              g_(go.Panel,"Spot",
                g_(go.Shape, "Rectangle",
                  { stroke: null, strokeWidth: 0,
                    desiredSize: portSizeH,scale:0.5,
                    margin: new go.Margin(0, 6),
                    _side: "top",
                    //fromLinkableSelfNode:true,
                    //toLinkableSelfNode:true,
                    portId:"",
                    fromSpot: go.Spot.Top, toSpot: go.Spot.Top,
                    fromLinkable: true, toLinkable: true, cursor: "pointer" },
                    new go.Binding("portId", "portId"),
                    new go.Binding("location", "portLoc"),
                    new go.Binding("fill", "portColor")),
                g_(go.TextBlock, {
                  editable: true,
                  text:"222",
                  angle:-90,
                  font: "bold 3pt serif",
                  alignment:new go.Spot(0,0,8,-10)
                },new go.Binding("text","portText").makeTwoWay())
              )  // end itemTemplate
          }
        ), 

        //right
        g_(go.Panel, "Vertical",
          new go.Binding("itemArray", "rightArray"),
          { row: 1, column: 2,
            itemTemplate:
              g_(go.Panel,"Spot",
                g_(go.Shape, "Rectangle",
                  { stroke: null, strokeWidth: 0,
                    desiredSize: portSizeV,
                    margin: new go.Margin(6, 0),
                    _side: "right",
                    //fromLinkableSelfNode:true,
                    //toLinkableSelfNode:true,
                    portId:"",
                    fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
                    fromLinkable: true, toLinkable: true, cursor: "pointer" },
                    new go.Binding("portId", "portId"),
                    new go.Binding("location", "portLoc"),
                    new go.Binding("fill", "portColor")),
                g_(go.TextBlock, {
                  editable: true,
                  text:"333",
                  angle:0,
                  font: "bold 3pt serif",
                  alignment:new go.Spot(0,0,22,10)
                },new go.Binding("text","portText").makeTwoWay())
              )  // end itemTemplate
          }
        ),  // end Vertical Panel

         //bottom
        g_(go.Panel, "Horizontal",
          new go.Binding("itemArray", "bottomArray"),
          { row: 2, column: 1,
            itemTemplate:
              g_(go.Panel,"Spot",
                g_(go.Shape, "Rectangle",
                  { stroke: null, strokeWidth: 0,
                    desiredSize: portSizeH,
                    margin: new go.Margin(0, 6) ,
                   _side: "bottom",
                   alignment:new go.Spot(0,0,0,0),
                   //fromLinkableSelfNode:true,
                   //toLinkableSelfNode:true,
                   portId:"",
                   fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom,
                   fromLinkable: true, toLinkable: true, cursor: "pointer"},
                  new go.Binding("portId", "portId"),
                  new go.Binding("location", "portLoc"),
                  new go.Binding("fill", "portColor")),
                g_(go.TextBlock,{
                  editable: true,
                  text:"444",
                  angle:90,
                  font: "bold 3pt serif",
                  alignment:new go.Spot(0,0,10,22)
                },new go.Binding("text","portText").makeTwoWay())
              )  // end itemTemplate
          }
        )  // end Horizontal Panel
      );  // end Node

 function addPort(side) {
	myDiagram.startTransaction("addPort");
        myDiagram.selection.each(function(node) {
		      if (!(node instanceof go.Node)) return;
		      var i = 0;
		      var str = side.substr(0,2);
		      while (node.findPort(str + i.toString()) !== node) i++;
		      var text = str + i.toString();
		      var nodeId = node.data.nodeId;
		      var portNodeLoc =node..data.loc;//!!!!!!!!!!!!How do I get the location of a port on each node
		      
		      var arr = node.data[side + "Array"];
		      if (arr) {
		        var newportdata = {
					portId: text,
					portLoc:portNodeLoc,
					portColor:"rgba(255,0,0,1)" 
				};
	 myDiagram.model.insertArrayItem(arr, -1, newportdata);
		        
		      }
		    });
	 myDiagram.commitTransaction("addPort");
		  }

Q2：How do I get the location of a port on each node?node.data.loc only get the location of node.

Posts: 1

Participants: 1

Read full topic