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>
  <p>
    This is a minimalist HTML and JavaScript skeleton of the GoJS Sample
    <a href="https://gojs.net/latest/samples/mindMap.html">mindMap.html</a>. It was automatically generated from a button on the sample page,
    and does not contain the full HTML. It is intended as a starting point to adapt for your own usage.
    For many samples, you may need to inspect the
    <a href="https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/mindMap.html">full source on Github</a>
    and copy other files or scripts.
  </p>
  <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;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            // when the user drags a node, also move/copy/delete the whole subtree starting with that node
            "commandHandler.copiesTree": true,
            "commandHandler.copiesParentKey": true,
            "commandHandler.deletesTree": true,
            "draggingTool.dragsTree": true,
            "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);
        }
      });

      // a node consists of some text with a line shape underneath
      myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          { selectionObjectName: "TEXT" },
          $(go.TextBlock,
            {
              name: "TEXT",
              minSize: new go.Size(30, 15),
              editable: true
            },
            // remember not only the text string but the scale and the font in the node data
            new go.Binding("text", "text").makeTwoWay(),
            new go.Binding("scale", "scale").makeTwoWay(),
            new go.Binding("font", "font").makeTwoWay()),
          $(go.Shape, "LineH",
            {
              stretch: go.GraphObject.Horizontal,
              strokeWidth: 3, height: 3,
              // this line shape is the port -- what links connect with
              portId: "", fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides
            },
            new go.Binding("stroke", "brush"),
            // make sure links come in from the proper direction and go out appropriately
            new go.Binding("fromSpot", "dir", d => spotConverter(d, true)),
            new go.Binding("toSpot", "dir", d => spotConverter(d, false))),
          // remember the locations of each node in the node data
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          // make sure text "grows" in the desired direction
          new go.Binding("locationSpot", "dir", d => spotConverter(d, false))
        );

      // selected nodes show a button for adding children
      myDiagram.nodeTemplate.selectionAdornmentTemplate =
        $(go.Adornment, "Spot",
          $(go.Panel, "Auto",
            // this Adornment has a rectangular blue Shape around the selected node
            $(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
            $(go.Placeholder, { margin: new go.Margin(4, 4, 0, 4) })
          ),
          // and this Adornment has a Button to the right of the selected node
          $("Button",
            {
              alignment: go.Spot.Right,
              alignmentFocus: go.Spot.Left,
              click: addNodeAndLink  // define click behavior for this Button in the Adornment
            },
            $(go.TextBlock, "+",  // the Button content
              { font: "bold 8pt sans-serif" })
          )
        );

      // the context menu allows users to change the font size and weight,
      // and to perform a limited tree layout starting at that node
      myDiagram.nodeTemplate.contextMenu =
        $("ContextMenu",
          $("ContextMenuButton",
            $(go.TextBlock, "Bigger"),
            { click: (e, obj) => changeTextSize(obj, 1.1) }),
          $("ContextMenuButton",
            $(go.TextBlock, "Smaller"),
            { click: (e, obj) => changeTextSize(obj, 1 / 1.1) }),
          $("ContextMenuButton",
            $(go.TextBlock, "Bold/Normal"),
            { click: (e, obj) => toggleTextWeight(obj) }),
          $("ContextMenuButton",
            $(go.TextBlock, "Copy"),
            { click: (e, obj) => e.diagram.commandHandler.copySelection() }),
          $("ContextMenuButton",
            $(go.TextBlock, "Delete"),
            { click: (e, obj) => e.diagram.commandHandler.deleteSelection() }),
          $("ContextMenuButton",
            $(go.TextBlock, "Undo"),
            { click: (e, obj) => e.diagram.commandHandler.undo() }),
          $("ContextMenuButton",
            $(go.TextBlock, "Redo"),
            { click: (e, obj) => e.diagram.commandHandler.redo() }),
          $("ContextMenuButton",
            $(go.TextBlock, "Layout"),
            {
              click: (e, obj) => {
                var adorn = obj.part;
                adorn.diagram.startTransaction("Subtree Layout");
                layoutTree(adorn.adornedPart);
                adorn.diagram.commitTransaction("Subtree Layout");
              }
            }
          )
        );

      // a link is just a Bezier-curved line of the same color as the node to which it is connected
      myDiagram.linkTemplate =
        $(go.Link,
          {
            curve: go.Link.Bezier,
            fromShortLength: -2,
            toShortLength: -2,
            selectable: false
          },
          $(go.Shape,
            { strokeWidth: 3 },
            new go.Binding("stroke", "toNode", n => {
              if (n.data.brush) return n.data.brush;
              return "black";
            }).ofObject())
        );

      // the Diagram's context menu just displays commands for general functionality
      myDiagram.contextMenu =
        $("ContextMenu",
          $("ContextMenuButton",
            $(go.TextBlock, "Paste"),
            { click: (e, obj) => e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool.mouseDownPoint) },
            new go.Binding("visible", "", o => o.diagram && o.diagram.commandHandler.canPasteSelection(o.diagram.toolManager.contextMenuTool.mouseDownPoint)).ofObject()),
          $("ContextMenuButton",
            $(go.TextBlock, "Undo"),
            { click: (e, obj) => e.diagram.commandHandler.undo() },
            new go.Binding("visible", "", o => o.diagram && o.diagram.commandHandler.canUndo()).ofObject()),
          $("ContextMenuButton",
            $(go.TextBlock, "Redo"),
            { click: (e, obj) => e.diagram.commandHandler.redo() },
            new go.Binding("visible", "", o => o.diagram && o.diagram.commandHandler.canRedo()).ofObject()),
          $("ContextMenuButton",
            $(go.TextBlock, "Save"),
            { click: (e, obj) => save() }),
          $("ContextMenuButton",
            $(go.TextBlock, "Load"),
            { click: (e, obj) => load() })
        );

      myDiagram.addDiagramListener("SelectionMoved", e => {
        var rootX = myDiagram.findNodeForKey(0).location.x;
        myDiagram.selection.each(node => {
          if (node.data.parent !== 0) return; // Only consider nodes connected to the root
          var nodeX = node.location.x;
          if (rootX < nodeX && node.data.dir !== "right") {
            updateNodeDirection(node, "right");
          } else if (rootX > nodeX && node.data.dir !== "left") {
            updateNodeDirection(node, "left");
          }
          layoutTree(node);
        });
      });

      // read in the predefined graph using the JSON format data held in the "mySavedModel" textarea
      load();
    }

    function spotConverter(dir, from) {
      if (dir === "left") {
        return (from ? go.Spot.Left : go.Spot.Right);
      } else {
        return (from ? go.Spot.Right : go.Spot.Left);
      }
    }

    function changeTextSize(obj, factor) {
      var adorn = obj.part;
      adorn.diagram.startTransaction("Change Text Size");
      var node = adorn.adornedPart;
      var tb = node.findObject("TEXT");
      tb.scale *= factor;
      adorn.diagram.commitTransaction("Change Text Size");
    }

    function toggleTextWeight(obj) {
      var adorn = obj.part;
      adorn.diagram.sta.........完整代码请登录后点击上方下载按钮下载查看