gojs实现可编辑文字和节点增删改的思维导图效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：gojs实现可编辑文字和节点增删改的思维导图效果代码

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

<!DOCTYPE html>
<html lang="en" >

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

  
  
  
<style>

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap");

html {
  font-family: "Open Sans", sans-serif;
  /*   font-family: 'Roboto', sans-serif; */
}
.viewport {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.model-toolbar {
  margin-bottom: 1rem;  
}

#diagramModel {
  width:100%;
  height:80vh;
  background-color: #3a3a3a;
  color: #00FF41;
}
</style>


  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
  
</head>

<body >
  

<div class="viewport col-10 offset-1">



  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px;"></div>

  <br />
  <p>
    When a node is deleted the <a>CommandHandler.deletesTree</a> property ensures that
    all of its children are deleted with it. When a node is dragged the <a>DraggingTool.dragsTree</a>
    property ensures that all its children are dragged with it.
    Both of these are set during the the Diagram's initalization.
  </p>
  <p>
    Node templates also have a <a>Part.selectionAdornmentTemplate</a> defined to allow for new nodes to be created and a <a>GraphObject.contextMenu</a> with additional commands.
  </p>

  <div class="model-toolbar btn-group btn-group-toggle" data-toggle="buttons">
    <button class="btn btn-success" id="SaveButton" onclick="save()">Save</button>
    <button class="btn btn-primary" onclick="load()">Load</button>
    <button disabled class="btn btn-light" onclick="layoutAll()">Layout</button>
    <button class="btn btn-info" onclick="prettyPrint()">Pretty Print</button>
  </div>

  <br />
  <textarea id="diagramModel" class="form-control shadow">
{ "class": "go.TreeModel",
  "nodeDataArray": [
{"key":0, "text":"Mind Map", "loc":"0 0"},
{"key":1, "parent":0, "text":"Getting more time", "brush":"skyblue", "dir":"right", "loc":"77 -22"},
{"key":11, "parent":1, "text":"Wake up early", "brush":"skyblue", "dir":"right", "loc":"200 -48"},
{"key":12, "parent":1, "text":"Delegate", "brush":"skyblue", "dir":"right", "loc":"200 -22"},
{"key":13, "parent":1, "text":"Simplify", "brush":"skyblue", "dir":"right", "loc":"200 4"},
{"key":2, "parent":0, "text":"More effective use", "brush":"darkseagreen", "dir":"right", "loc":"77 43"},
{"key":21, "parent":2, "text":"Planning", "brush":"darkseagreen", "dir":"right", "loc":"203 30"},
{"key":211, "parent":21, "text":"Priorities", "brush":"darkseagreen", "dir":"right", "loc":"274 17"},
{"key":212, "parent":21, "text":"Ways to focus", "brush":"darkseagreen", "dir":"right", "loc":"274 43"},
{"key":22, "parent":2, "text":"Goals", "brush":"darkseagreen", "dir":"right", "loc":"203 56"},
{"key":3, "parent":0, "text":"Time wasting", "brush":"palevioletred", "dir":"left", "loc":"-20 -31.75"},
{"key":31, "parent":3, "text":"Too many meetings", "brush":"palevioletred", "dir":"left", "loc":"-117 -64.25"},
{"key":32, "parent":3, "text":"Too much time spent on details", "brush":"palevioletred", "dir":"left", "loc":"-117 -25.25"},
{"key":33, "parent":3, "text":"Message fatigue", "brush":"palevioletred", "dir":"left", "loc":"-117 0.75"},
{"key":331, "parent":31, "text":"Check messages less", "brush":"palevioletred", "dir":"left", "loc":"-251 -77.25"},
{"key":332, "parent":31, "text":"Message filters", "brush":"palevioletred", "dir":"left", "loc":"-251 -51.25"},
{"key":4, "parent":0, "text":"Key issues", "brush":"coral", "dir":"left", "loc":"-20 52.75"},
{"key":41, "parent":4, "text":"Methods", "brush":"coral", "dir":"left", "loc":"-103 26.75"},
{"key":42, "parent":4, "text":"Deadlines", "brush":"coral", "dir":"left", "loc":"-103 52.75"},
{"key":43, "parent":4, "text":"Checkpoints", "brush":"coral", "dir":"left", "loc":"-103 78.75"}
 ]
}
  </textarea>
</div>

  
      <script >
function init() {
  if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
  var $ = 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", 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);
    }
  });

  // 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", function (d) {
    return spotConverter(d, true);
  }),
  new go.Binding("toSpot", "dir", function (d) {
    return 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", function (d) {
    return 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 .........完整代码请登录后点击上方下载按钮下载查看