here are two question:
i mark on the pic.
1.how to make the line straight?
2.how to put the line dot in the middle.
i hope you can know what i wrote.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
init();
});
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "svgDIV", // must be the ID or reference to div
{
initialAutoScale: go.Diagram.Uniform,
layout: $(go.LayeredDigraphLayout, { direction: 90, layerSpacing:1, setsPortSpots: true }),
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
});
function findColumnDefinitionForName(nodedata, attrname) {
var columns = nodedata.columnDefinitions;
for (var i = 0; i < columns.length; i++) {
if (columns[i].attr === attrname) return columns[i];
}
return null;
}
var textTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ fill: null,stroke: null,stretch: go.GraphObject.Fill, alignment: go.Spot.Center }),
$(go.TextBlock, { width: 45,wrap: go.TextBlock.WrapFit ,font: " 8pt sans-serif", textAlign: "center" },
new go.Binding("text", "name"))
);
var rootTemplate =
$(go.Node, "Auto",
{ selectionAdorned: true},new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle", { width: 100, height: 25, margin: 4, fill: null, stroke: "#000000" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 15, font: "bold 8pt sans-serif", stroke: "#8B0000",alignment: go.Spot.Center, font: "12pt sans-serif" },
new go.Binding("text", "name"))
);
var pcsTemplate =
$(go.Node, "Horizontal",
$(go.Panel, "Auto",
$(go.Shape, "Rectangle", { portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35), fill: null, stroke: null}, new go.Binding("fill", "blue"),new go.Binding("background", "statusBGC")),
$(go.Picture, { maxSize: new go.Size(80, 40) }, new go.Binding("source", "img"))
)
);
var lbsTemplate =
$(go.Node, "Horizontal", // going into at middle-left
$(go.TextBlock, { width: 35,wrap: go.TextBlock.WrapFit ,stroke: "#000000",alignment: go.Spot.Center, font: "8pt sans-serif",margin: new go.Margin(0, 0, 0, 0) }, new go.Binding("text", "name")),
$(go.Panel, "Auto",
$(go.Shape, "Rectangle", { portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35), fill: null, stroke: null}, new go.Binding("fill", "blue") ),
$(go.Picture, { maxSize: new go.Size(25, 37) }, new go.Binding("source", "img"))
)
);
var imageTemplate =
$(go.Node, "Horizontal",
$(go.Panel, "Auto",
$(go.Shape, "Rectangle", { portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35), fill: null, stroke: null}, new go.Binding("fill", "blue")),
$(go.Picture, { maxSize: new go.Size(40, 20) }, new go.Binding("source", "img"),new go.Binding("background", "statusBGC"))
)
);
var caseTemplate =
$(go.Node, "Horizontal",{ selectionAdorned: true },
$(go.Panel, "Table", new go.Binding("itemArray", "casedata"),
{ name: "CASETABLE",
defaultAlignment: go.Spot.Left,
itemTemplate:
$(go.Panel, "TableRow",
new go.Binding("background", "back"),
$(go.Picture, new go.Binding("source", "img1"),new go.Binding("background", "statusBGC1"),
{ toolTip:
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 3,font: "8pt sans-serif" },
new go.Binding("text", "name1"))
) // end of Adornment
},
{ column: 0, margin: 2, width: 60, height: 80, margin: 2, imageStretch: go.GraphObject.Fill,maxSize: new go.Size(20, 15)}),
$(go.Picture, new go.Binding("source", "img2"),new go.Binding("background", "statusBGC2"),
{ toolTip:
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 3,font: "8pt sans-serif" },
new go.Binding("text", "name2"))
) // end of Adornment
},
{ column: 1, margin: 2, width: 60, height: 80, margin: 2, imageStretch: go.GraphObject.Fill,maxSize: new go.Size(20, 15)})
) // end of itemTemplate
})
);
var templmap = new go.Map("string", go.Node);
templmap.add("root", rootTemplate);
templmap.add("text", textTemplate);
templmap.add("pcs", pcsTemplate);
templmap.add("lbs", lbsTemplate);
templmap.add("image", imageTemplate);
templmap.add("case", caseTemplate);
myDiagram.nodeTemplateMap = templmap;
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 0 },
{ relinkableFrom: true, relinkableTo: true },
$(go.Shape,{ fill: "red" ,stroke: "red", strokeWidth: 1 }),
$(go.Shape, {strokeWidth:0 ,stroke: "red",fill: "transparent" })
);
myDiagram.model = new go.GraphLinksModel(
[ // node data
{ key: "root", name: "系統", color: "#97FFFF", category: "root", "loc":"450 540"},
{ key: "kv22", name: "KV22", color: "#97FFFF", category: "root", "loc":"450 240"},
{ key: "DS1", name: "DS", category: "lbs", img: "img/tranceNO0.png", "loc":"450 240" },
{ key: "PCS", name: "", category: "pcs" ,img: "img/pcsTopNo.png"},
{ key: "VCB", name: "DS", category: "lbs", img: "img/tranceON1.png" },
//{ key: "DS1", name:"DS1", category: "vcb", name1:"DS", img1: "img/tranceNO0.png",name2:"", img2: "img/pcsTopNo.png", name3:"VCB 52S", img3: "img/tranceON1.png"},
{ key: "PCS1", name: "", category: "pcs", img: "img/pcsTopNo.png" },
{ key: "LBS1", name: "LBS 89T1", category: "lbs", img: "img/PCSON.png" },
{ key: "PCSIMAGE1", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "CASE1", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-12"}
]
},
{ key: "PCS2", parent: "DS1", category: "pcs", img: "img/pcsTopNo.png"},
{ key: "LBS2", parent: "PCS2", name: "LBS 89T2", category: "lbs", img: "img/PCSON.png"},
{ key: "PCSIMAGE2", parent: "LBS2", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "CASE2", parent: "PCSIMAGE2", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-12"}
]
},
//{ key: "PCS3T", name: "", category: "normal"},
{ key: "LBS3-1", name: "LBS 89T3-1", category: "lbs", img: "img/PCSON.png"},
{ key: "PCSIMAGE3-1", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "CASE3", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-12"}
]
},
{ key: "LBS3-2",name: "LBS 89T3-2", category: "lbs", img: "img/PCSON.png"},
{ key: "PCSIMAGE3-2", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "PCS3B", name: "", category: "pcs", img: "img/pcsTopNo.png"},
{ key: "CASE4", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-12"}
]
},
{ key: "PCS4", name: "", category: "pcs", img: "img/pcsTopNo.png"},
{ key: "LBS4", name: "LBS 89T4", category: "lbs", img: "img/PCSON.png"},
{ key: "PCSIMAGE4", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "CASE5", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-12"}
]
},
//{ key: "PCS5T", name: "", category: "normal"},
{ key: "LBS5-1", name: "LBS 89T5-1", category: "lbs", img: "img/PCSON.png"},
{ key: "PCSIMAGE5-1", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "CASE6", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-12"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-13", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-14"}
]
},
{ key: "LBS5-2", name: "LBS 89T5-2", category: "lbs", img: "img/PCSON.png"},
{ key: "PCSIMAGE5-2", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"},
{ key: "PCS5B", name: "", category: "pcs", img: "img/pcsTopNo.png"},
{ key: "CASE7", name: "", category: "case",
casedata: [
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-2"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-4"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-6"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-8"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-10"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-12"},
{ img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-13", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-14"}
]
},
{ key: "PCSLAST1", category: "lbs", name:"DS 89R", img: "img/tranceNO1.png"},
{ key: "PCSLAST2", category: "pcs", name:"aaaa", img: "img/pcsTopNo.png"},
{ key: "PCSLAST3", category: "lbs", name:"VCB 52R", img: "img/tranceON1.png"},
{ key: "PCSLAST4", category: "lbs", name:"VCB 52F", img: "img/tranceON1.png"},
{ key: "PCSLAST5", category: "lbs", name:"VCB 52F", img: "img/tranceON1.png"},
{ key: "PCSLAST6", category: "text", name:"5000KVA TR", img: "img/tranceON1.png"},
{ key: "PCSLAST7", category: "text", name:"所内へ", img: "img/tranceON1.png"},
],
[ // link data
{ from: "root", to: "DS1" },
{ from: "DS1", to: "PCS" },
{ from: "PCS", to: "VCB" },
{ from: "VCB", to: "LBS1" },
{ from: "LBS1", to: "PCS1" },
{ from: "PCS1", to: "PCSIMAGE1" },
{ from: "PCSIMAGE1", to: "CASE1" },
{ from: "VCB", to: "LBS2" },
{ from: "LBS2", to: "PCS2" },
{ from: "PCS2", to: "PCSIMAGE2" },
{ from: "PCSIMAGE2", to: "CASE2" },
// { from: "DS1", to: "PCS3T" },
{ from: "VCB", to: "LBS3-1" },
{ from: "VCB", to: "LBS3-2" },
{ from: "LBS3-1", to: "PCS3B" },
{ from: "LBS3-2", to: "PCS3B" },
{ from: "PCS3B", to: "PCSIMAGE3-1" },
{ from: "PCS3B", to: "PCSIMAGE3-2" },
{ from: "PCSIMAGE3-1", to: "CASE3" },
{ from: "PCSIMAGE3-2", to: "CASE4" },
{ from: "VCB", to: "LBS4" },
{ from: "LBS4", to: "PCS4" },
{ from: "PCS4", to: "PCSIMAGE4" },
{ from: "PCSIMAGE4", to: "CASE5" },
//{ from: "DS1", to: "PCS5T" },
{ from: "VCB", to: "LBS5-1" },
{ from: "VCB", to: "LBS5-2" },
{ from: "LBS5-1", to: "PCS5B" },
{ from: "LBS5-2", to: "PCS5B" },
{ from: "PCS5B", to: "PCSIMAGE5-1" },
{ from: "PCS5B", to: "PCSIMAGE5-2" },
{ from: "PCSIMAGE5-1", to: "CASE6" },
{ from: "PCSIMAGE5-2", to: "CASE7" },
{ from: "kv22", to: "PCSLAST1" },
{ from: "PCSLAST1", to: "PCSLAST2" },
{ from: "PCSLAST2", to: "PCSLAST3" },
{ from: "PCSLAST3", to: "PCSLAST4" },
{ from: "PCSLAST3", to: "PCSLAST5" },
{ from: "PCSLAST4", to: "PCSLAST6" },
{ from: "PCSLAST5", to: "PCSLAST7" },
]);
// force all lanes' layouts to be performed
//relayoutLanes();
} // end init