I am stucked at one place…For arrangement I am using LayeredDigraphLayout with direction property to 0 or 270 for vertical or Horizontal its working fine.
The problem is I am using side ports and links between the ports and when I am dragging dropping a link to port complete Groups rearranges in the direction of the layout.
I think LayeredDigraphLayout links are considered on the right side.
Which layout I should use sothat my port linking from both side should work?
new go.Binding(“layout”, “lyt”, function(data) {
return $(go.LayeredDigraphLayout,
{
direction: data.arrangement,
columnSpacing: 1,
})
}),Before drawing link
after drawing link between ports
But what do you want? It is unclear to me why you are using LayeredDigraphLayout at all.
I just want a layout for a group which could arrange group nodes horizontally or vertically and nodes or groups will have dyanamic ports which I can link. As per your suggestion I could think of TreeLayout or LayeredDigraphLayout. LayeredDigraphLayout looks easier as I just had to pass one property(0 or 270) in simple javascript object.
It worked but Diagram distorted after link is made(in sencond pic).
I should be able to draw a custom link between ports similar to dyanamic ports example.
Here is my group layout part.
myDiagram.linkTemplate =
$(go.Link, // defined below
{
routing: go.Link.AvoidsNodes,
corner: 4,
curve: go.Link.JumpGap,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true
},
new go.Binding(“points”).makeTwoWay(),
$(go.Shape, { stroke: “#2F4F4F”, strokeWidth: 2 })
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
new go.Binding("layout", "lyt2", function(data) {
// var arrangement = new go.TreeLayout.ArrangementHorizontal;
return $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
setsPortSpots:false,
direction: data.arrangement,
columnSpacing: 1,
})
//return $(go.TreeLayout, {arrangement: data.arrangement})
}),
$(go.Panel, "Auto",
$(go.Shape,
new go.Binding("figure", "shapetype"),
{ fill: "rgba(128,128,128,0.33)"},
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
new go.Binding("desiredSize", "size", go.Size.parse),
),
$(go.Placeholder,
{alignment: go.Spot.Center}) // with some extra padding around them
),
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "portArray"),
{ row: 1, column: 1,
itemTemplate:
$(go.Panel,
{ _side: "right",
// fromSpot: go.Spot.Center, toSpot: go.Spot.Center,
//fromSpot: go.Spot.BottomSide , toSpot: go.Spot.TopSide,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
// $(go.Shape, "Circle",
// { stroke: null, strokeWidth: 0,
// desiredSize: portSize,
// margin: new go.Margin(10, 0) },
// new go.Binding("fill", "portColor"))
$(go.Picture, "images/port.png",
{ name: "BODY", width: 15, height: 15, margin: 2}
),
) // end itemTemplate
}
), // end Vertical Panel
);
Here is my nodeArray JSON.
myDiagram.model = go.Model.fromJson({ “class”: “go.GraphLinksModel”,
“copiesArrays”: true,
“copiesArrayObjects”: true,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{
“key”: “parent”,
“name”: “parentshelf”,
“size”: “480 350”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:6,
“lyt2”:{ arrangement:0 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “portonshelf”,
“name”: “portonshelf”,
“size”: “480 80”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“group”: “parent”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
}, {
“portColor”: “yellow”,
“portId”: “right1”
},
{
“portColor”: “yellow”,
“portId”: “right2”
},
{
“portColor”: “yellow”,
“portId”: “right3”
},
{
“portColor”: “yellow”,
“portId”: “right4”
}
],
"commands": [
{ "text": "Add Card", "action": "addCard"},
{ "text": "Add Slot", "action": "add Slot"}
]
},
{
“key”: “slot25”,
“name”: “slot25”,
“size”: “100 100”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“group”: “slot2”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
}, {
“portColor”: “yellow”,
“portId”: “right1”
},
{
“portColor”: “yellow”,
“portId”: “right2”
},
{
“portColor”: “yellow”,
“portId”: “right3”
},
{
“portColor”: “yellow”,
“portId”: “right4”
}
],
"commands": [
{ "text": "Add Card", "action": "addCard"},
{ "text": "Add Slot", "action": "add Slot"}
]
},
{
“key”: “main”,
“name”: “MainShelf”,
“size”: “480 250”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:2,
“group”: “parent”,
“lyt2”:{ arrangement:270 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “slot1”,
“name”: “Slot1”,
“lyt2”:{ arrangement:0},
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“size”: “240 250”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard”},
{ “text”: “Add Slot”, “action”: “add Slot”}
]
},
{
“key”: “slot2”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “slot4”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:0 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “card3”,
“size”: “100 100”,
“color”: “lightgrey”,
“group”: “slot1”,
“shapetype”:“RoundedRectangle”,
“lyt2”:{ arrangement:0 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“name”:“Card3”,
“isGroup”:true,
“commands”: [
{ “text”: “Add Port”, “action”: “addPort” },
{ “text”: “Add Link”, “action”: “addLink” }
]
},
{
“key”: “card5”,
“size”: “90 140”,
“color”: “lightgrey”,
“group”: “slot4”,
“shapetype”:“RoundedRectangle”,
“lyt2”:{ arrangement:0 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“name”:“Card2”,
“isGroup”:true,
“commands”: [
{ “text”: “Add Port”, “action”: “addPort” },
{ “text”: “Add Link”, “action”: “addLink” }
]
},
{
“key”: “innerslot”,
“name”: “InnerSlot1”,
“size”: “30 30”,
“isGroup”: true,
“group”: “card3”
},
{
“key”: “innerslot2”,
“name”: “InnerSlot3”,
“size”: “30 30”,
“isGroup”: true,
“group”: “card3”
},
{
“key”: “innerslot4”,
“name”: “InnerSlot4”,
“size”: “80 50”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
“isGroup”: true,
“group”: “card5”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
},
{
“portColor”: “yellow”,
“portId”: “right1”
}
]
},
{
“key”: “innerslot5”,
“name”: “InnerSlot”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
“size”: “80 50”,
“isGroup”: true,
“group”: “card5”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
},
{
“portColor”: “yellow”,
“portId”: “right1”
}
]
},
{
“key”: “innercard1”,
“name”: “InnerSlot”,
“shapetype”:“RoundedRectangle”,
“lyt2”:{ arrangement:0 },
“size”: “60 30”,
“isGroup”: true,
“group”: “innerslot4”
},
{
“key”: “innercard2”,
“name”: “InnerSlot”,
“shapetype”:“RoundedRectangle”,
“lyt2”:{ arrangement:0 },
“size”: “60 30”,
“isGroup”: true,
“group”: “innerslot5”,
}
],
“linkDataArray”: [
//{“from”:“portonshelf”, “to”:“slot25”, “fromPort”:“right0”, “toPort”:“right1”}
]});
I want a diagram like this…Arrangement was made possible using LayeredDigraphLayout.Only custom link didn’t work.
I think you want to use GridLayout, not one of the layouts that produce different results depending on what links there are.
Probably something like:
if (horizontal) {
return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingWidth: Infinity });
} else {
return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingColumn: 1 });
}
Earlier I tried with gridLayout only but different approach but result is same. It shifting adjacent node little bit up or down.
myDiagram.groupTemplate =
$(go.Group, “Auto”,
new go.Binding("layout", "lyt2", function(data) {
// return $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
// {
// setsPortSpots:false,
// direction: data.arrangement,
// columnSpacing: 1,
// })
if (data.arrangement === 'Horizontal') {
console.log('Horizontal');
return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingWidth: Infinity });
} else {
return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingColumn: 1 });
}
}),
$(go.Panel, "Auto",
$(go.Shape,
new go.Binding("figure", "shapetype"),
{ fill: "rgba(128,128,128,0.33)"},
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
new go.Binding("desiredSize", "size", go.Size.parse),
),
$(go.Placeholder,
{alignment: go.Spot.Center}) // with some extra padding around them
),
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "portArray"),
{ row: 1, column: 1,
itemTemplate:
$(go.Panel,
{ _side: "right",
// fromSpot: go.Spot.Center, toSpot: go.Spot.Center,
//fromSpot: go.Spot.BottomSide , toSpot: go.Spot.TopSide,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
$(go.Picture, "images/port.png",
{ name: "BODY", width: 15, height: 15, margin: 2}
),
) // end itemTemplate
}
), // end Vertical Panel
);
myDiagram.model = go.Model.fromJson({ “class”: “go.GraphLinksModel”,
“copiesArrays”: true,
“copiesArrayObjects”: true,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{
“key”: “main”,
“name”: “MainShelf”,
“size”: “380 250”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:2,
“group”: “parent”,
“lyt2”:{ arrangement:“Horizontal” },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “slot1”,
“name”: “Slot1”,
“lyt2”:{ arrangement:“Vertical” },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“size”: “240 250”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard”},
{ “text”: “Add Slot”, “action”: “add Slot”}
]
},
{
“key”: “slot2”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:“Vertical” },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “card1”,
“name”: “Slot2”,
“size”: “50 50”,
“shapetype”:“RoundedRectangle”,
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“group”: “slot2”,
},
{
“key”: “card2”,
“name”: “Slot2”,
“size”: “50 50”,
“shapetype”:“RoundedRectangle”,
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“group”: “slot2”,
},
{
“key”: “card3”,
“name”: “Slot2”,
“size”: “50 50”,
“shapetype”:“RoundedRectangle”,
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“group”: “slot2”,
}
],
“linkDataArray”: [
//{“from”:“portonshelf”, “to”:“slot25”, “fromPort”:“right0”, “toPort”:“right1”}
]});
Why do you align your Placeholder at the center? I’m sorry, but I really cannot understand your code. I suggest that you simplify the code a lot, perhaps in a separate sample, so that you can understand how to use GoJS. Strip out all of the stuff that you don’t need.
Have you seen Tree Map ?
I don’t think TreeMap will work in my case. I am very close to what I want. just I need a predefined layout or custom layout with Horizontal, Vertical arrangement with custom link. Arrangement I managed to implement with wrong chosen layout with your help.
myDiagram.groupTemplate =
$(go.Group, “Auto”,
new go.Binding("layout", "lyt2", function(data) {
if (data.arrangement === 'Horizontal') {
console.log('Horizontal');
return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingWidth: Infinity });
} else {
return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingColumn: 1 });
}
}),
$(go.Panel, "Auto",
$(go.Shape,
new go.Binding("figure", "shapetype"),
{ fill: "grey"},
new go.Binding("desiredSize", "size", go.Size.parse),
),
$(go.Placeholder,
{padding: 10}) // with some extra padding around them
),
);
myDiagram.model = go.Model.fromJson({ "class": "go.GraphLinksModel",
“copiesArrays”: true,
“copiesArrayObjects”: true,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{
“key”: “main”,
“name”: “MainShelf”,
“size”: “380 250”,
“lyt2”:{ arrangement:“Horizontal” },
“isGroup”: true
},
{
“key”: “slot1”,
“name”: “Slot1”,
“lyt2”:{ arrangement:“Vertical” },
“isGroup”: true,
“group”: “main”,
},
{
“key”: “slot2”,
“name”: “Slot2”,
“lyt2”:{ arrangement:“Vertical” },
“isGroup”: true,
“group”: “main”,
},
{
“key”: “card1”,
“name”: “Slot2”,
“lyt2”:{ arrangement:“Vertical” },
“group”: “slot2”,
},
{
“key”: “card2”,
“name”: “Slot2”,
“size”: “50 50”,
“lyt2”:{ arrangement:“Vertical” },
“group”: “slot2”,
}
]
If there is some way to restrict DigraphLayout not to change diagram upon creating link that would be great.
Here’s what I get when I run your code:
Is this not basically what you want? If not, could you be more precise about what you do want, and under what conditions?
For your other question, you could try setting Layout.isOngoing to false.
It worked like charm. That’s what I wanted. Its exactly what I wanted.
Thanks again.
Hi Walter, Layout.isOngoing to false is working only after diagram has been drawn. I can draw link between ports.
But If there is already present link in LinkDataArray it does re position nodes. So Layout.isOngoing to false no working in case on LinkDataArray.
I’m unsure what you want. Please read GoJS Layouts -- Northwoods Software, which covers all of the possibilities.
I want diagram to be like this.
This pic is without linkarray json data.
This happens when I put a predefined in link in linkarray.
You can see nodes has been horiontallly aligned.
here is my code
myDiagram.model = go.Model.fromJson({ “class”: “go.GraphLinksModel”,
“copiesArrays”: true,
“copiesArrayObjects”: true,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{
“key”: “parent”,
“name”: “parentshelf”,
“size”: “480 350”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:6,
“lyt2”:{ arrangement:0 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “portonshelf”,
“name”: “portonshelf”,
“size”: “480 80”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“group”: “parent”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
}, {
“portColor”: “yellow”,
“portId”: “right1”
},
{
“portColor”: “yellow”,
“portId”: “right2”
},
{
“portColor”: “yellow”,
“portId”: “right3”
},
{
“portColor”: “yellow”,
“portId”: “right4”
}
],
"commands": [
{ "text": "Add Card", "action": "addCard"},
{ "text": "Add Slot", "action": "add Slot"}
]
},
{
“key”: “slot25”,
“name”: “slot25”,
“size”: “100 100”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“group”: “slot2”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
}, {
“portColor”: “yellow”,
“portId”: “right1”
},
{
“portColor”: “yellow”,
“portId”: “right2”
},
{
“portColor”: “yellow”,
“portId”: “right3”
},
{
“portColor”: “yellow”,
“portId”: “right4”
}
],
"commands": [
{ "text": "Add Card", "action": "addCard"},
{ "text": "Add Slot", "action": "add Slot"}
]
},
{
“key”: “main”,
“name”: “MainShelf”,
“size”: “480 250”,
“shapetype”:“Rectangle”,
“stroke”:“black”,
“strokeWidth”:2,
“group”: “parent”,
“lyt2”:{ arrangement:270 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementHorizontal },
“isGroup”: true
},
{
“key”: “slot1”,
“name”: “Slot1”,
“lyt2”:{ arrangement:0},
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“size”: “240 250”,
“cellwidth”:150,
“shapetype”:“Rectangle”,
“cellheight”:450,
“color”:“lightgrey”,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard”},
{ “text”: “Add Slot”, “action”: “add Slot”}
]
},
{
“key”: “slot2”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “slot4”,
“name”: “Slot2”,
“size”: “120 250”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:0 },
// “lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “card5”,
“size”: “90 140”,
“color”: “lightgrey”,
“group”: “slot4”,
“shapetype”:“RoundedRectangle”,
“lyt2”:{ arrangement:0 },
//“lyt”:{ arrangement:go.TreeLayout.ArrangementVertical },
“name”:“Card2”,
“isGroup”:true,
“commands”: [
{ “text”: “Add Port”, “action”: “addPort” },
{ “text”: “Add Link”, “action”: “addLink” }
]
},
{
“key”: “innerslot4”,
“name”: “InnerSlot4”,
“size”: “80 50”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
//“isGroup”: true,
“group”: “card5”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
},
{
“portColor”: “yellow”,
“portId”: “right1”
}
]
},
{
“key”: “innerslot5”,
“name”: “InnerSlot”,
“shapetype”:“Rectangle”,
“lyt2”:{ arrangement:270 },
“size”: “80 50”,
//“isGroup”: true,
“group”: “card5”,
“portArray”: [{
“portColor”: “yellow”,
“portId”: “right0”
},
{
“portColor”: “yellow”,
“portId”: “right1”
}
]
}
],
“linkDataArray”: [
{“from”:“innerslot4”, “to”:“innerslot5”, “fromPort”:“right0”, “toPort”:“right1”}
]});
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv", //Diagram refers to its DIV HTML element by id
{ initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true });
var portSize = new go.Size(15, 15);
// the node template
// includes a panel on each side with an itemArray of panels containing ports
myDiagram.nodeTemplate =
$(go.Node, "Table",
{ layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized },
{
locationSpot: go.Spot.Center
},
// the body
$(go.Panel, "Auto",
{ row: 1, column: 1,
},
$(go.Shape, "RoundedRectangle",
{ fill: "rgba(128,128,128,0.33)", margin: new go.Margin(5, 5)},
new go.Binding("desiredSize", "size", go.Size.parse),
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
),
), // end Auto Panel body
// the Panel holding the right port elements, which are themselves Panels,
// created for each item in the itemArray, bound to data.rightArray
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "portArray"),
{ row: 1, column: 1,
itemTemplate:
$(go.Panel,
{ _side: "right",
fromSpot: go.Spot.BottomSide , toSpot: go.Spot.TopSide,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
$(go.Picture, "images/port.png",
{ name: "BODY", width: 15, height: 15, margin: 2}
),
) // end itemTemplate
}
), // end Vertical Panel
); // end Node
// an orthogonal link template, reshapable and relinkable
myDiagram.linkTemplate =
$(go.Link, // defined below
{
routing: go.Link.AvoidsNodes,
corner: 4,
curve: go.Link.JumpOver,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, { stroke: "#2F4F4F", strokeWidth: 2 })
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
new go.Binding("layout", "lyt2", function(data) {
return $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
// isInitial:false,
isOngoing:false,
setsPortSpots:false,
direction: data.arrangement,
columnSpacing: 1,
})
// if (data.arrangement === 'Horizontal') {
// console.log('Horizontal');
// return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingWidth: Infinity });
// } else {
// return $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(0, 0), wrappingColumn: 1 });
// }
}),
$(go.Panel, "Auto",
$(go.Shape,
new go.Binding("figure", "shapetype"),
{ fill: "rgba(128,128,128,0.33)"},
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
new go.Binding("desiredSize", "size", go.Size.parse),
),
$(go.Placeholder,
{padding: 10}) // with some extra padding around them
),
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "portArray"),
{ row: 1, column: 1,
itemTemplate:
$(go.Panel,
{ _side: "right",
// fromSpot: go.Spot.Center, toSpot: go.Spot.Center,
fromSpot: go.Spot.BottomSide , toSpot: go.Spot.TopSide,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
$(go.Picture, "images/port.png",
{ name: "BODY", width: 15, height: 15, margin: 2}
),
) // end itemTemplate
}
), // end Vertical Panel
);You’ll need to properly format your code if you want us to look at it. Wrap it in triple-backquotes - ``` - and fix the indentation.