gojs学习笔记一

gojs文档

创建Diagram区域

每一个GoJS Diagram被包含在一个HTML的 <div>中，<div>要给定大小：

<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see that area. -->
<div id="myDiagramDiv"
     style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在js中创建Diagram，指定<div>的id：

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv");

$ 是 go.GraphObject.make的简写。

属性设置：

//创建画布
        var objGo = go.GraphObject.make;
        var myDiagram = objGo(go.Diagram, "myDiagramDiv",
            {
                //模型图的中心位置所在坐标
                initialContentAlignment: go.Spot.Center,
                //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
                "undoManager.isEnabled": true,
                //不运行用户改变图表的规模
                allowZoom: false,
                //画布上面是否出现网格
                "grid.visible": true,
                //允许在画布上面双击的时候创建节点
                "clickCreatingTool.archetypeNodeData": { text: "Node" },
                //允许使用ctrl+c、ctrl+v复制粘贴
                "commandHandler.copiesTree": true,  
                //允许使用delete键删除节点
                "commandHandler.deletesTree": true, 
                // dragging for both move and copy
                "draggingTool.dragsTree": true,  
            });

Diagrams and Models

GoJS由Model来保存Data（Javascript对象数组），由Diagram来可视化这些Data。

比如以下代码，Model里加入了Node，然后Diagram就会显示出来。

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { // enable Ctrl-Z to undo and Ctrl-Y to redo
      "undoManager.isEnabled": true
    });

var myModel = $(go.Model);
// for each object in this Array, the Diagram creates a Node to represent it
myModel.nodeDataArray = [
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" }
];
myDiagram.model = myModel;

Styling Node

Node样式可以通过创建包含GraphObject的template来定义。

Shape、TextBlock、Picture、Panel都是继承自GraphObject的类。Shape只有形状、TextBlock只有文字，通过定义template组合在一起。

通过数据绑定，我们将Model中的数据属性和Node联系在一起。

示例：

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { // enable Ctrl-Z to undo and Ctrl-Y to redo
      "undoManager.isEnabled": true
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    // the entire node will have a light-blue background
    { background: "#44CCFF" },
    $(go.Picture,
      // Pictures should normally have an explicit width and height.
      // This picture has a red background, only visible when there is no source set
      // or when the image is partially transparent.
      { margin: 10, width: 50, height: 50, background: "red" },
      // Picture.source is data bound to the "source" attribute of the model data
      new go.Binding("source")),
    $(go.TextBlock,
      "Default Text",  // the initial value for TextBlock.text
      // some room around the text, a larger font, and a white stroke:
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      // TextBlock.text is data bound to the "name" property of the model data
      new go.Binding("text", "name"))
  );

var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
  // for this app we add the "name" and "source" properties
  { name: "Don Meow", source: "cat1.png" },
  { name: "Copricat", source: "cat2.png" },
  { name: "Demeter",  source: "cat3.png" },
  { /* Empty node data */  }
];
myDiagram.model = model;

Links

普通的Model不能link，GraphLinksModel 和TreeModel可以link。

GraphLinksModel的linkDataArray里包含from和to信息。TreeModel的linkDataArray里包含parent信息。

var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B" },
  { key: "C" }
];
model.linkDataArray =
[
  { from: "A", to: "B" },
  { from: "B", to: "C" }
];
myDiagram.model = model;

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;

Diagram的布局

Node根据Link，排列的更好看。定义layout可实现：
https://gojs.net/latest/intro/layouts.html

gojs去水印

在文件中搜索

7eba17a4ca3b1a8346

会看到类似这段代码

a.ax = d[u.Da("7eba17a4ca3b1a8346")][u.Da("78a118b7")](d, u.wl, 4, 4);
//替换成
a.ax = function(){return true;};

npm引入的话，在node_modules中搜索
go.js和go-debug.js分别按上面步骤替换代码即可