gojs实现拖拽流程图设计编辑导出json和svg图片格式代码
代码语言:html
所属分类:图表
代码描述:gojs实现拖拽流程图设计编辑导出json和svg图片格式代码
代码标签: gojs 拖拽 流程图 设计 编辑 导出 json svg 图片 格式 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
</head>
<body >
<div id="sample">
<div style="width:100%; white-space:nowrap;">
<span style="display: inline-block; vertical-align: top; width:100px">
<div id="myPaletteDiv" style="border: solid 1px black; height: 720px"></div>
</span>
<span style="display: inline-block; vertical-align: top; width:80%">
<div id="myDiagramDiv" style="border: solid 1px black; height: 720px"></div>
</span>
</div>
<p>
Mouse-over a Node to view its ports.
Drag from these ports to create new Links.
Selecting Links allows you to re-shape and re-link them.
Selecting a Node and then clicking its TextBlock will allow
you to edit text (except on the Start and End Nodes).
</p>
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
Diagram Model saved in JSON format:
<textarea id="mySavedModel" style="width:100%;height:300px">{ "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"key":-1, "loc":"175 0","category":"Yellowish", "text":"Plan Execution"},
{"key":0, "loc":"-8.000000000000014 80", "text":"Manual Execution"},
{"key":1, "loc":"175 121.99999999999993", "text":"Presighting"},
{"key":5, "loc":"365.00000000000006 81.00000000000006", "text":"Automation"},
{"text":"Sighting", "key":-2, "loc":"175 188"},
{"text":"Class TP Escape", "key":-7, "loc":"-106 254"},
{"text":"Silicone / Circuit / Spec Bug", "key":-8, "loc":"63 262"},
{"text":"SW / FW Bug", "key":-9, "loc":"226 256"},
{"text":"Periphery Bug", "key":-10, "loc":"386 256"},
{"text":"Test Content\nBug", "key":-11, "loc":"537 264"},
{"key":-12, "loc":"183 368", "text":"Stabilize"}
],
"linkDataArray": [
{"from":5, "to":1, "fromPort":"A", "toPort":"T", "points":[315.50000000000006,81.00000000000006,305.50000000000006,81.00000000000006,175,81.00000000000006,175,88.35,175,95.69999999999993,175,105.69999999999993]},
{"from":0, "to":1, "fromPort":"A", "toPort":"T", "points":[62.499999999999986,80,72.49999999999999,80,175,80,175,87.84999999999997,175,95.69999999999993,175,105.69999999999993]},
{"from":-1, "to":0, "fromPort":"B", "toPort":"T", "points":[175,16.3,175,26.3,175,40,-8.000000000000014,40,-8.000000000000014,53.7,-8.000000000000014,63.7]},
{"from":-1, "to":5, "fromPort":"B", "toPort":"T", "points":[175,16.3,175,26.3,175,40.50000000000003,365.00000000000006,40.50000000000003,365.00000000000006,54.70000000000006,365.00000000000006,64.70000000000006]},
{"from":1, "to":-2, "fromPort":"B", "toPort":"T", "points":[175,138.29999999999993,175,148.29999999999993,175,154.99999999999994,175,154.99999999999994,175,161.7,175,171.7]},
{"from":-2, "to":-7, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,221,-106,221,-106,227.7,-106,237.7]},
{"from":-2, "to":-8, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,221.1,63,221.1,63,227.9,63,237.9]},
{"from":-2, "to":-9, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,222,226,222,226,229.7,226,239.7]},
{"from":-2, "to":-10, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,222,386,222,386,229.7,386,239.7]},
{"from":-2, "to":-11, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,222.1,537,222.1,537,229.9,537,239.9]},
{"from":-9, "to":-12, "fromPort":"B", "toPort":"T", "points":[226,272.3,226,282.3,226,312,183,312,183,341.7,183,351.7]},
{"from":-8, "to":-12, "fromPort":"B", "toPort":"L", "points":[63,286.1,63,296.1,63,368,99,368,135,368,145,368]},
{"from":-7, "to":-12, "fromPort":"B", "toPort":"L", "points":[-106,270.3,-106,280.3,-106,368,14.5,368,135,368,145,368]},
{"from":-10, "to":-12, "fromPort":"B", "toPort":"R", "points":[386,272.3,386,282.3,386,368,308.5,368,231,368,221,368]},
{"from":-11, "to":-12, "fromPort":"B", "toPort":"R", "points":[537,288.1,537,298.1,537,368,384,368,231,368,221,368]},
{"from":-12, "to":-1, "fromPort":"B", "toPort":"T", "points":[183,384.30000000000007,183,394.30000000000007,183,396,132,396,132,340,140,340,140,228,108,228,108,-28,175,-28,175,-26.3,175,-16.3]}
]}
</textarea>
<p>Click the button below to render the current GoJS Diagram into SVG at one-half scale.
The SVG is not interactive like the GoJS diagram, but can be used for printing or display.
For more informatio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0