gojs实现页面可拖动流程图图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：gojs实现页面可拖动流程图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
 
  <div id="allSampleContent" class="p-4 w-full">
    <script id="code">
    function init() {

      // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
      // For details, see https://gojs.net/latest/intro/buildingObjects.html
      const $ = go.GraphObject.make;  // for conciseness in defining templates

      var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" });
      var greengrad = $(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" });
      var bluegrad = $(go.Brush, "Linear", { 0: "#B0E0E6", 1: "#87CEEB" });
      var redgrad = $(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" });
      var whitegrad = $(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" });

      var bigfont = "bold 13pt Helvetica, Arial, sans-serif";
      var smallfont = "bold 11pt Helvetica, Arial, sans-serif";

      // Common text styling
      function textStyle() {
        return {
          margin: 6,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          font: bigfont
        }
      }

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            // have mouse wheel events zoom in and out instead of scroll up and down
            "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
            initialAutoScale: go.Diagram.Uniform,
            "linkingTool.direction": go.LinkingTool.ForwardsOnly,
            layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }),
            "undoManager.isEnabled": true
          });

      // when the document is modified, add a "*" to the title and enable the "Save" button
      myDiagram.addDiagramListener("Modified", 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.slice(0, idx);
        }
      });

      var defaultAdornment =
        $(go.Adornment, "Spot",
          $(go.Panel, "Auto",
            $(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 4 }),
            $(go.Placeholder)),
          // the button to create a "next" node, at the top-right corner
          $("Button",
            {
              alignment: go.Spot.TopRight,
              click: addNodeAndLink
            },  // this function is defined below
            new go.Binding("visible", "", a => !a.diagram.isReadOnly).ofObject(),
            $(go.Shape, "PlusLine", { desiredSize: new go.Size(6, 6) })
          )
        );

      // define the Node template
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { selectionAdornmentTemplate: defaultAdornment },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          // define the node's outer shape, which will surround the TextBlock
          $(go.Shape, "Rectangle",
            {
              fill: yellowgrad, stroke: "black",
              portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
              toEndSegmentLength: 50, fromEndSegmentLength: 40
            }),
          $(go.TextBlock, "Page",
            {
              margin: 6,
              font: bigfont,
              editable: true
            },
            new go.Binding("text", "text").makeTwoWay()));

      myDiagram.nodeTemplateMap.add("Source",
        $(go.Node, "Auto",
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "RoundedRectangle",
            {
              fill: bluegrad,
              portId: "", fromLinkable: true, cursor: "pointer", fromEndSegmentLength: 40
            }),
          $(go.TextBlock, "Source", textStyle(),
            new go.Binding("text", "text").makeTwoWay())
        ));

      myDiagram.nodeTemplateMap.add("DesiredEvent",
        $(go.Node, "Auto",
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "RoundedRectangle",
            { fill: greengrad, portId: "", toLinkable: true, toEndSegmentLength: 50 }),
          $(go.TextBlock, "Success!", textStyle(),
            new go.Binding("text", "text").makeTwoWay())
        ));

      // Undesired events have a special adornment that allows adding additional "reasons"
      var UndesiredEventAdornment =
        $(go.Adornment, "Spot",
          $(go.Panel, "Auto",
            $(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 4 }),
            $(go.Placeholder)),
          // the button to create a "next" node, at the top-right corner
          $("Button",
            {
              alignment: go.Spot.BottomRight,
              click: addReason
            },  // this function is defined below
            new go.Binding("visible", "", a => !a.diagram.isReadOnly).ofObject(),
            $(go.Shape, "TriangleDown", { desiredSize: new go.Size(10, 10) })
          )
        );

      var reasonTemplate = $(go.Panel, "Horizontal",
        $(go.TextBlock, "Reason",
          {
            margin: new go.Margin(4, 0, 0, 0),
            maxSize: new go.Size(200, NaN),
            wrap: go.TextBlock.WrapFit,
            stroke: "whitesmoke",
            editable: true,
            font: smallfont
          },
          new go.Binding("text", "text").makeTwoWay())
      );


      myDiagram.nodeTemplateMap.add("UndesiredEvent",
        $(go.Node, "Auto",
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          { selectionAdornmentTemplate: UndesiredEventAdornment },
          $(go.Shape, "RoundedRectangle",
            { fill: redgrad, portId: "", toLinkable: true, toEndSegmentLength: 50 }),
          $(go.Panel, "Vertical", { defaultAlignment: go.Spot.TopLeft },

            $(go.TextBlock, "Drop", textStyle(),
              {
                stroke: "whitesmoke",
                minSize: new go.Size(80, NaN)
              },
              new go.Binding("text", "text").makeTwoWay()),

            $(go.Panel, "Vertical",
              {
                defaultAlignment: go.Spot.TopLeft,
                itemTemplate: reasonTemplate
              },
              new go.Binding("itemArray", "reasonsList").makeTwoWay()
            )
          )
        ));

      myDiagram.nodeTemplateMap.add("Comment",
        $(go.Node, "Auto",
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Rectangle",
            { portId: "", fill: whitegrad, fromLinkable: true }),
          $(go.TextBlock, "A comment",
            {
              margin: 9,
              maxSize: new go.Size(200, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: true,
              font: smallfont
            },
            new go.Binding("text", "text").makeTwoWay())
          // no ports, because no links are allowed to connect with a comment
        ));

      // clicking the button on an UndesiredEvent node inserts a new text object into the panel
      function addReason(e, obj) {
        var adorn = obj.part;
        if (adorn === null) return;
        e.handled = true;
        var arr = adorn.adornedPart.data.reasonsList;
        myDiagram.startTransaction("add reason");
        myDiagram.model.addArrayItem(arr, {});
        myDiagram.commitTransaction("add reason");
      }

      // clicking the button of a default node inserts a new node to the right of the selected node,
      // and adds a link to that new node
      function addNodeAndLink(e, obj) {
        var adorn = obj.part;
        if (adorn === null) return;
        e..........完整代码请登录后点击上方下载按钮下载查看