轻量级流程图控件GoJS示例连载（三）：思维导图

轻量级流程图控件GoJS思维导图示例

通过移动最接近树根节点的节点来控制布局。当其中一个节点水平移动到根的另一侧时，其所有子节点将以新方向发送到Layout.doLayout，从而导致文本始终从根向外移动。该spotConverter功能用于管理 GraphObject.fromSpot和GraphObject.toSpot手动节点，所以TreeLayout.setsPortSpot和TreeLayout.setsChildPortSpot 属性被设置为假，使布图所述图将不会覆盖值。

删除节点时，CommandHandler.deletesTree属性确保使用它删除所有子节点。拖动节点时，DraggingTool.dragsTree 属性确保用它拖动所有子节点。这两个都是在Diagram的初始化期间设置的。

节点模板还定义了Part.selectionAdornmentTemplate，以允许创建新节点，并使用附加命令创建GraphObject.contextMenu。

想要了解更多相关信息请点击这里。

在页面中查看此示例页面的源代码

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",        {          padding: 20,          // when the user drags a node, also move/copy/delete the whole subtree starting with that node          "commandHandler.copiesTree": true,          "commandHandler.deletesTree": true,          "draggingTool.dragsTree": true,          initialContentAlignment: go.Spot.Center,  // center the whole graph          "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); })      );

想要查看完整代码请点击这里。

在GitHub上查看此示例页面的源代码

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.startTransaction("Change Text Weight");    var node = adorn.adornedPart;    var tb = node.findObject("TEXT");    // assume "bold" is at the start of the font specifier    var idx = tb.font.indexOf("bold");    if (idx < 0) {      tb.font = "bold " + tb.font;    } else {      tb.font = tb.font.substr(idx + 5);    }    adorn.diagram.commitTransaction("Change Text Weight");  }  function updateNodeDirection(node, dir) {    myDiagram.model.setDataProperty(node.data, "dir", dir);    // recursively update the direction of the child nodes    var chl = node.findTreeChildrenNodes(); // gives us an iterator of the child nodes related to this particular node    while(chl.next()) {      updateNodeDirection(chl.value, dir);    }  }  function addNodeAndLink(e, obj) {    var adorn = obj.part;    var diagram = adorn.diagram;    diagram.startTransaction("Add Node");    var oldnode = adorn.adornedPart;    var olddata = oldnode.data;    // copy the brush and direction to the new node data    var newdata = { text: "idea", brush: olddata.brush, dir: olddata.dir, parent: olddata.key };    diagram.model.addNodeData(newdata);    layoutTree(oldnode);    diagram.commitTransaction("Add Node");    // if the new node is off-screen, scroll the diagram to show the new node    var newnode = diagram.findNodeForData(newdata);    if (newnode !== null) diagram.scrollToRect(newnode.actualBounds);  }  function layoutTree(node) {    if (node.data.key === 0) {  // adding to the root     layoutAll();  // lay out everything    } else {  // otherwise lay out only the subtree starting at this parent node      var parts = node.findTreeParts();      layoutAngle(parts, node.data.dir === "left" 180 : 0);    }  }

想要查看完整代码请点击这里。

标签：思维导图