|
|
| Line 11: |
Line 11: |
| This way it is possible to create a design on this page and then include it into articles using pure JSON. | | This way it is possible to create a design on this page and then include it into articles using pure JSON. |
|
| |
|
| <pre>
| | |
| <div id="example1" style="display:none">
| |
| { "class": "GraphLinksModel",
| |
| "nodeDataArray": [
| |
| {"text":"Block 1","key":-1,"loc":"210 -120"},
| |
| {"text":"Buffer Store","key":-2,"loc":"-160 -30","figure":"Cylinder1","size":"60 140"},
| |
| {"text":"Pump","key":-3,"loc":"-10 -30","figure":"Ellipse","size":"60 60"},
| |
| {"text":"Block 2","key":-4,"loc":"210 10"},
| |
| {"text":"Boiler 1","key":-5,"loc":"-430 -80","figure":"Procedure","size":"80 80"},
| |
| {"text":"Boiler 2","key":-6,"loc":"-430 20","figure":"Procedure","size":"80 80"}
| |
| ],
| |
| "linkDataArray": [
| |
| {"from":-2,"to":-3,"points":[-130,-30,-120,-30,-85,-30,-85,-30,-50,-30,-40,-30]},
| |
| {"from":-3,"to":-1,"points":[20,-40,30,-40,85,-40,85,-120,140,-120,150,-120]},
| |
| {"from":-3,"to":-4,"points":[20,-20,30,-20,85,-20,85,10,140,10,150,10]},
| |
| {"from":-5,"to":-2,"points":[-390,-80,-380,-80,-290,-80,-290,-53.33333333333333,-200,-53.33333333333333,-190,-53.33333333333333]},
| |
| {"from":-6,"to":-2,"points":[-390,20,-380,20,-290,20,-290,-6.666666666666664,-200,-6.666666666666664,-190,-6.666666666666664]}
| |
| ]}
| |
| </div>
| |
| </pre>
| |
| <pre id="example1" style="display:none"> | | <pre id="example1" style="display:none"> |
| { "class": "GraphLinksModel", | | { "class": "GraphLinksModel", |
How to Use in Articles
The following two elements have been given an id (view in the source) that can then be passed to a diagram using an iframe tag.
The second element has also been hidden from view.
This way it is possible to create a design on this page and then include it into articles using pure JSON.
{ "class": "GraphLinksModel",
"copiesArrays": true,
"copiesArrayObjects": true,
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"key":1,"name":"Unit One","loc":"-212 83","leftArray":[{"portColor":"#fae3d7","portId":"left0"}],"topArray":[{"portColor":"#d6effc","portId":"top0"}],"bottomArray":[{"portColor":"#ebe3fc","portId":"bottom0"}],"rightArray":[{"portColor":"#eaeef8","portId":"right0"},{"portColor":"#fadfe5","portId":"right1"}]},
{"key":2,"name":"Unit Two","loc":"320 152","leftArray":[{"portColor":"#6cafdb","portId":"left0"},{"portColor":"#66d6d1","portId":"left1"},{"portColor":"#fae3d7","portId":"left2"}],"topArray":[{"portColor":"#d6effc","portId":"top0"}],"bottomArray":[{"portColor":"#eaeef8","portId":"bottom0"},{"portColor":"#eaeef8","portId":"bottom1"},{"portColor":"#6cafdb","portId":"bottom2"}],"rightArray":[]},
{"key":3,"name":"Unit Three","loc":"384 319","leftArray":[{"portColor":"#66d6d1","portId":"left0"},{"portColor":"#fadfe5","portId":"left1"},{"portColor":"#6cafdb","portId":"left2"}],"topArray":[{"portColor":"#66d6d1","portId":"top0"}],"bottomArray":[{"portColor":"#6cafdb","portId":"bottom0"}],"rightArray":[]},
{"key":4,"name":"Unit Four","loc":"138 351","leftArray":[{"portColor":"#fae3d7","portId":"left0"}],"topArray":[{"portColor":"#6cafdb","portId":"top0"}],"bottomArray":[{"portColor":"#6cafdb","portId":"bottom0"}],"rightArray":[{"portColor":"#6cafdb","portId":"right0"},{"portColor":"#66d6d1","portId":"right1"}]}
],
"linkDataArray": [
{"from":4,"to":2,"fromPort":"top0","toPort":"bottom0","points":[138,313,138,303,138,269.5,310,269.5,310,204,310,190]},
{"from":3,"to":2,"fromPort":"top0","toPort":"bottom1","points":[384,281,384,267,384,239.5,320,239.5,320,208,320,190]},
{"from":4,"to":3,"fromPort":"right0","toPort":"left0","points":[176,346,190,346,271,346,271,309,320,309,346,309]},
{"from":4,"to":3,"fromPort":"right1","toPort":"left2","points":[176,356,198,356,283,356,283,329,336,329,346,329]},
{"from":1,"to":2,"fromPort":"right0","toPort":"left1","points":[-174,78,-156,78,68,78,68,152,260,152,282,152]},
{"from":1,"to":2,"fromPort":"right1","toPort":"left2","points":[-174,88,-164,88,60,88,60,162,252,162,282,162]}
]}
{ "class": "GraphLinksModel",
"nodeDataArray": [
{"key":1, "loc":"0 0", "text":"Alpha", "details":"some information about Alpha and its importance"},
{"key":2, "loc":"170 0", "text":"Beta", "color":"blue", "thickness":2, "figure":"Procedure"},
{"key":3, "loc":"0 100", "text":"Gamma", "color":"green", "figure":"Cylinder1"},
{"key":4, "loc":"80 180", "text":"Delta", "color":"red", "figure":"Terminator", "size":"80 40"},
{"key":5, "loc":"350 -50", "text":"Zeta", "group":7, "color":"blue", "figure":"CreateRequest"},
{"key":6, "loc":"350 50", "text":"Eta", "group":7, "figure":"Document", "fill":"lightyellow"},
{"key":7, "isGroup":true, "text":"Theta", "color":"green", "fill":"lightgreen"},
{"key":8, "loc":"520 50", "text":"Iota", "fill":"pink"}
],
"linkDataArray": [
{"from":1, "to":2, "dash":[ 6,3 ], "thickness":4},
{"from":1, "to":3, "dash":[ 2,4 ], "color":"green", "text":"label"},
{"from":3, "to":4, "color":"red", "text":"a red label", "fromSpot":"RightSide"},
{"from":2, "to":1},
{"from":5, "to":6, "text":"in a group"},
{"from":2, "to":7},
{"from":6, "to":8, "dir":0},
{"from":6, "to":8, "dir":1},
{"from":6, "to":8, "dir":2}
]}