The nodes are all svg files ,600 objects
There are more than 20 groups
Wiring is normal Wiring and has no animation
This is to use the tool to generate the drawn SVG file:
<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1198_4363)">
<rect x="68" y="39.5" width="1" height="10" transform="rotate(-90 68 39.5)" fill="black"/>
<rect y="39.5" width="1" height="10" transform="rotate(-90 0 39.5)" fill="black"/>
<rect x="10.5" y="42.5" width="7" height="57" rx="3.5" transform="rotate(-90 10.5 42.5)" stroke="black"/>
<rect x="60.5" y="42.5" width="7" height="7" rx="3.5" transform="rotate(-90 60.5 42.5)" stroke="black"/>
</g>
<defs>
<clipPath id="clip0_1198_4363">
<rect width="78" height="78" fill="white"/>
This is groups template codes:
export const cabinet_group = ($, callback, myContextMenu) => {
return $(go.Group, "Vertical", new go.Binding("layerName", "layerName"),
{
layerName: "Background",
//movable: false,
// resizable: false, resizeObjectName: "SHAPE",
resizable: false,
contextMenu: myContextMenu,
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2), click: (e, obj) => {
callback(e, obj);
}
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.TextBlock,
{
margin: 1,
font: "Bold 12pt Sans-Serif",
stroke: "black",
},
new go.Binding("text", "text")),
$(go.Panel, "Auto",
$(go.Shape, "Rectangle",
{
parameter1: 14,
fill: "white",
name: "SHAPE",
minSize: new go.Size(CellSize.width * 2, CellSize.height * 2)
},),
$(go.Panel, "Auto", { name: "TABLE", alignment: go.Spot.Top },
$(go.TextBlock,
{ name: "TABLEText", text: '', stroke: "#000", font: "10px 微软雅黑, Arial, sans-serif" }
)
),
$(go.Placeholder,
{ padding: new go.Margin(10, 10, 50, 10) })
),
);
}
This is one of node template codes:
export const jkLine = ($, callback, myContextMenu) => {
return $(go.Node, "Spot", new go.Binding("layerName", "layerName"),
{
locationSpot: go.Spot.Center, contextMenu: myContextMenu, click: (e, obj) => {
callback(e, obj);
}
},
$(go.Picture, { desiredSize: new go.Size(65, 65), cursor: 'pointer' }, { source: require("@/assets/images/jkline.svg"), angle: 0 }),
$(go.Shape, portStyle(true),
{ portId: "input", alignment: go.Spot.Left, fromLinkable: true, toMaxLinks: 1, width: 1, height: 1 }
),
$(go.Shape, portStyle(false),
{ portId: "out", alignment: go.Spot.Right, toLinkable: true, toMaxLinks: 1, width: 1, height: 1 }),
$(go.TextBlock,
{ name: "TABLEText", stroke: "#000", font: "10px 微软雅黑, Arial, sans-serif", wrap: go.TextBlock.WrapFit,
}
)
);
}
This is links template codes:
export const line = ($) => {
return $(go.Link, new go.Binding("layerName", "layerName"),
{
routing: go.Link.Orthogonal,
curve: go.Link.JumpOver,
curviness: 0,
relinkableFrom: true, relinkableTo: true,reshapable: true,
resegmentable: true,
selectionAdorned: false,
shadowOffset: new go.Point(0, 0), shadowBlur: 5, shadowColor: "blue",
},
$(go.Shape,{ name: "SHAPE", strokeWidth: 1, stroke: 'black' }),
);
}
This is links Layout codes:
myDiagram.layout = $(go.LayeredDigraphLayout, {
direction: 0, //方向
layerSpacing: 1, //图形间距
columnSpacing: 100, //列间距
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource, //分层排列
initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn, //
aggressiveOption: go.LayeredDigraphLayout.AggressiveMore, //排列少交叉
packOption: 1, //线链接方式
});
Thank You walter
