go.js节点大小怎么保存

Go.js节点大小保存的方式有多种，包括使用模型数据保存节点大小、利用图形工具保存、保存到外部存储等方法。其中，利用模型数据保存节点大小是最常见的方法。下面将详细解释这一方法并提供其他保存方式的概述。

一、利用模型数据保存节点大小

在Go.js中，模型数据是保存节点和连接信息的关键。通过将节点大小信息（如宽度和高度）存储在模型数据中，可以确保这些信息在图表重新加载时保持不变。以下是步骤：

1. 创建节点数据模型

在创建节点数据模型时，添加宽度和高度属性。例如：

var nodeDataArray = [
  { key: 1, text: "Node 1", width: 100, height: 100 },
  { key: 2, text: "Node 2", width: 150, height: 120 }
];

2. 绑定节点大小

在定义节点模板时，使用数据绑定来绑定节点的宽度和高度。例如：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    {
      resizable: true,
      resizeObjectName: "SHAPE",
      // 当节点大小改变时，更新模型数据
      layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
      resizeAdornmentTemplate:
        $(go.Adornment, "Spot",
          $(go.Placeholder),
          $(go.Shape, {
            alignment: go.Spot.TopLeft,
            cursor: "nwse-resize",
            desiredSize: new go.Size(8, 8),
            fill: "lightblue",
            stroke: "dodgerblue"
          }),
          $(go.Shape, {
            alignment: go.Spot.TopRight,
            cursor: "nesw-resize",
            desiredSize: new go.Size(8, 8),
            fill: "lightblue",
            stroke: "dodgerblue"
          }),
          $(go.Shape, {
            alignment: go.Spot.BottomLeft,
            cursor: "nesw-resize",
            desiredSize: new go.Size(8, 8),
            fill: "lightblue",
            stroke: "dodgerblue"
          }),
          $(go.Shape, {
            alignment: go.Spot.BottomRight,
            cursor: "nwse-resize",
            desiredSize: new go.Size(8, 8),
            fill: "lightblue",
            stroke: "dodgerblue"
          })
        )
    },
    new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape, "RoundedRectangle",
      { name: "SHAPE", fill: "white", strokeWidth: 0 },
      new go.Binding("width", "width").makeTwoWay(),
      new go.Binding("height", "height").makeTwoWay()
    ),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text", "text"))
  );

3. 更新模型数据

当节点大小改变时，更新模型数据。例如：

myDiagram.addDiagramListener("PartResized", function(e) {
  var node = e.subject;
  node.diagram.model.commit(function(m) {
    m.set(node.data, "width", node.actualBounds.width);
    m.set(node.data, "height", node.actualBounds.height);
  }, "resize node");
});

二、利用图形工具保存节点大小

1. 使用图形工具

使用图形工具如PingCode和Worktile来管理和保存项目中的节点大小信息。这些工具可以直接与Go.js集成，提供更高级的项目管理功能。

2. 结合外部存储

将节点大小信息保存到外部数据库或文件系统中。当图表重新加载时，从外部存储中读取这些信息并应用到节点中。

三、保存到外部存储

1. 使用数据库

将节点大小信息保存到数据库中。例如：

var nodeData = {
  key: 1,
  text: "Node 1",
  width: 100,
  height: 100
};
// 使用AJAX将数据保存到数据库
$.ajax({
  type: "POST",
  url: "/saveNodeData",
  data: JSON.stringify(nodeData),
  contentType: "application/json",
  success: function(response) {
    console.log("Node data saved successfully");
  }
});

2. 从数据库加载数据

当图表重新加载时，从数据库中读取节点大小信息并应用到节点中。例如：

$.ajax({
  type: "GET",
  url: "/getNodeData",
  success: function(response) {
    var nodeDataArray = response;
    myDiagram.model = new go.GraphLinksModel(nodeDataArray);
  }
});

四、结合本地存储

1. 使用本地存储

将节点大小信息保存到浏览器的本地存储中。例如：

var nodeData = {
  key: 1,
  text: "Node 1",
  width: 100,
  height: 100
};
// 保存到本地存储
localStorage.setItem("nodeData", JSON.stringify(nodeData));

2. 从本地存储加载数据

当图表重新加载时，从本地存储中读取节点大小信息并应用到节点中。例如：

var nodeData = JSON.parse(localStorage.getItem("nodeData"));
if (nodeData) {
  myDiagram.model = new go.GraphLinksModel([nodeData]);
}

五、利用文件系统

1. 保存到文件系统

将节点大小信息保存到文件系统中。例如，将数据保存到JSON文件：

var nodeData = {
  key: 1,
  text: "Node 1",
  width: 100,
  height: 100
};
var blob = new Blob([JSON.stringify(nodeData)], { type: "application/json" });
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = "nodeData.json";
a.click();

2. 从文件系统加载数据

当图表重新加载时，从文件系统中读取节点大小信息并应用到节点中。例如：

var input = document.createElement("input");
input.type = "file";
input.onchange = function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var nodeData = JSON.parse(e.target.result);
    myDiagram.model = new go.GraphLinksModel([nodeData]);
  };
  reader.readAsText(file);
};
input.click();

六、项目管理系统的应用

在实际开发中，项目管理系统如PingCode和Worktile可以有效地帮助团队管理和保存节点大小信息。这些系统提供了丰富的功能，可以与Go.js进行无缝集成。

1. 研发项目管理系统PingCode

PingCode是一个专业的研发项目管理系统，可以帮助团队更好地管理项目中的节点大小信息。通过与Go.js集成，PingCode可以自动保存和加载节点大小信息，确保团队成员在协作过程中始终保持数据的一致性。

2. 通用项目协作软件Worktile

Worktile是一个通用的项目协作软件，适用于各种类型的项目管理。通过与Go.js集成，Worktile可以提供强大的节点大小管理功能，帮助团队更高效地进行项目管理和协作。

总结

在Go.js中，保存节点大小的方法有很多，包括利用模型数据保存、使用图形工具、保存到外部存储、结合本地存储和利用文件系统等。通过选择合适的方法，可以确保节点大小信息在图表重新加载时保持不变，提高项目管理和协作的效率。特别是利用项目管理系统如PingCode和Worktile，可以进一步提升团队的协作效率和项目管理水平。