gojs实现拖拽流程图设计编辑导出json和svg图片格式代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：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 information, see the page on <a href="../intro/makingSVG.html">making SVG</a>.</p>
  <button onclick="makeSVG()">Render as SVG</button>
  <div id="SVGArea"></div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go-1.89.js"></script>
      <script >
function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        {
          initialContentAlignment: go.Spot.Center,
          allowDrop: true,  // must be true to accept drops from the Palette
          "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
          "LinkRelinked": showLinkLabel,
          "animationManager.duration": 800, // slightly longer than default (600ms) animation
          "undoManager.isEnabled": true  // enable undo & redo
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    // helper definitions for node templates

    function nodeStyle() {
      return [
        // The Node.location comes from the "loc" property of the node data,
        // converted by the Point.parse static method.
        // If the Node.location is changed, it updates the "loc" property of the node data,
        // converting back using the Point.stringify static method.
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        {
          // the Node.location is at the center of each node
          locationSpot: go.Spot.Center,
          //isShadowed: true,
          //shadowColor: "#888",
          // handle mouse enter/leave events to show/hide the ports
          mouseEnter: function (e, obj) { showPorts(obj.part, true); },
          mouseLeave: function (e, obj) { showPorts(obj.part, false); }
        }
      ];
    }

    // Define a function for creating a "port" that is normally transparent.
    // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
    // and where the port is positioned on the node, and the boolean "output" and "input" arguments
    // control whether the user can draw links from or to the port.
    function makePort(name, spot, output, input) {
      // the port is basically just a small circle that has a white stroke when it is made visible
      return $(go.Shape, "Circle",
               {
       .........完整代码请登录后点击上方下载按钮下载查看