可视化—gojs 超多超实用经验分享(四)

目录

• 41.监听连线拖拽结束后的事件
• 42.监听画布的修改事件
• 43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作)
• 44.监听节点鼠标移入移出事件，hover 后显示特定元素
• 45.监听树图实现鼠标点击节点本身展开或收起子节点的功能,而不是点击另外的按钮
• 46.监听文本块编辑结束后回调事件(用于实现调用接口做一些真实的编辑修改操作)
• 47.文本编辑结束后，实现回车后取消编辑状态
• 用到的属性/方法说明：
  • 1. go.LinkingTool.prototype.doActivate
  • 2. reshapable 和 resegmentable 属性
  • 3. new go.Binding("text", "name").makeTwoWay()中 makeTwoWay 的作用
  • 4. Point 基本用法
  • 5. draggingTool.gridSnapCellSize 作用
  • 6.initialPosition 初始坐标
  • 7.修改按钮默认样式
  • 8.放大缩小，还原重做
  • 9.根据 key 值查找节点元素,查找元素内的零件
  • 10.toolManager.hoverDelay

41.监听连线拖拽结束后的事件

可以使用LinkingTool工具来监听连线拖拽结束后的事件。具体步骤如下：

1. 创建一个LinkingTool实例，并将其设置为图表的默认工具：

myDiagram.toolManager.linkingTool = new go.LinkingTool();

1. 监听LinkingTool的doCancel()和doActivate()方法，以便在连线拖拽结束后执行相应的操作：

myDiagram.toolManager.linkingTool.doCancel = function () {
  // 会在用户取消连线拖拽时被调用
  console.log("Linking cancelled");
  go.LinkingTool.prototype.doCancel.call(this);
};

myDiagram.toolManager.linkingTool.doActivate = function () {
  // 会在用户完成连线拖拽时被调用
  console.log("Linking completed");
  go.LinkingTool.prototype.doActivate.call(this);
};

42.监听画布的修改事件

在 gojs 每个案例当中都会有这样一段代码,myDiagram.addDiagramListener('Modified', function() {...}) 方法是用来监听画布的修改事件，当画布被修改时，会执行对应的回调函数。 但是这个方法不适用于持续监听,也就是说 每次修改后保存之后，在修改才能触发

// 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("*");
  console.log(111);
  if (myDiagram.isModified) {
    if (idx < 0) document.title += "*";
  } else {
    if (idx >= 0) document.title = document.title.substr(0, idx);
  }
});

想要监听画布的每一次变化，并执行对应的 JSON 变化，该事件会在每次模型被修改时触发，可以在回调函数中获取到最新的 JSON 数据。如果修改很频繁并且后续操作也较为复杂时,建议将修改函数加一层防抖

myDiagram.addChangedListener((e) => {
  // 执行对应的 JSON 变化操作
  var jsonData = myDiagram.model.toJson();
});

43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作)

删除节点的事件名称为 SelectionDeleting。可以使用以下代码来监听删除节点的事件并调用接口：

myDiagram.addDiagramListener("SelectionDeleting", (e) => {
  const deletedObj = e.subject.first();
  const deleteKey = deletedObj.part.data.key;
});

44.监听节点鼠标移入移出事件，hover 后显示特定元素

通过 GoJS 的事件处理机制来实现树节点鼠标悬浮时显示添加节点按钮的功能。具体实现步骤如下：

1. 在节点模板中添加一个按钮元素，用于显示添加节点按钮。
2. 在节点模板中添加鼠标悬浮事件处理函数，当鼠标悬浮在节点上时，显示添加节点按钮。
3. 在节点模板中添加鼠标移出事件处理函数，当鼠标移出节点时，隐藏添加节点按钮。
4. 在添加节点按钮的模板中添加鼠标单击事件处理函数，用于添加新节点。

myDiagram.nodeTemplate = $(
  go.Node,
  "Auto",
  {
    mouseEnter: function (e, node) {
      // 鼠标悬浮在节点上时，显示添加节点按钮
      var addButton = node.findObject("addButton");
      if (addButton) addButton.visible = true;
    },
    mouseLeave: function (e, node) {
      // 鼠标移出节点时，隐藏添加节点按钮
      var addButton = node.findObject("addButton");
      if (addButton) addButton.visible = false;
    },
  },
  $(go.Shape, "RoundedRectangle", { fill: "white" }),
  $(go.TextBlock, { margin: 8 }, new go.Binding("text", "name")),
  $(
    go.Panel,
    "Horizontal",
    { alignment: go.Spot.BottomRight, margin: 4 },
    $(
      "Button",
      { name: "addButton", visible: false, click: (e, obj) => {} },
      $(go.TextBlock, "+")
    )
  )
);

45.监听树图实现鼠标点击节点本身展开或收起子节点的功能,而不是点击另外的按钮

  // 实现鼠标点击节点本身展开或收起子节点的功能
  myDiagram.addDiagramListener('ObjectSingleClicked', (e, obj) {
    var part = e.subject.part
    if (part instanceof go.Node) {
      if (part.isTreeExpanded) {
        part.collapseTree()
      } else {
        part.expandTree()
      }
    }
  })

46.监听文本块编辑结束后回调事件(用于实现调用接口做一些真实的编辑修改操作)

可以使用 DiagramEvent 类的 TextEdited 事件来监听编辑文字结束的回调函数。该事件在文本编辑器完成编辑并关闭时触发.

myDiagram.addDiagramListener("TextEdited", (e) => {
  const editedText = e.subject.text;
  const key = e.subject.part.data.key;
  console.log("编辑后的内容: " + editedText);
  console.log("节点key:", key);
});

47.文本编辑结束后，实现回车后取消编辑状态

默认情况下，在用户完成文本块编辑后。需要鼠标移出后点击其他区域，才能取消当前正在编辑的文本块的编辑状态，并且在默认情况下，按下回车enter键，视为换行。

但大部分用户的习惯性操作为按下回车enter键，即已经完成编辑操作，而不是换行，因此需要改一个属性。是否可以多行-isMultiline,属性值为 false 时，按下回车完成编辑操作.

$(
  go.TextBlock,
  {
    editable: true, // 是否 可编辑
    isMultiline: false, // 是否 可多行，false
  },
  new go.Binding("text", "name")
);

用到的属性/方法说明：

1. go.LinkingTool.prototype.doActivate

是 GoJS 库中的一个方法，用于在用户开始使用链接工具时激活该工具。当用户点击链接工具按钮或按下链接工具快捷键时，该方法将被调用。

2. reshapable 和 resegmentable 属性

• reshapable属性：表示节点是否可以被重新调整形状。设置为true，则节点可以通过拖动边缘或角落来改变其形状。设置为false，则节点的形状将保持不变。

• resegmentable属性：表示节点的连线是否可以被重新分段。设置为true，则节点的连线可以通过拖动中间的点来添加或删除分段。设置为false，则节点的连线将保持不变。

3. new go.Binding("text", "name").makeTwoWay()中 makeTwoWay 的作用

makeTwoWay 方法用于将绑定设置为双向绑定。在 GoJS 中，绑定是指将数据模型中的属性与图形元素的属性相互关联，以便在数据模型中更改属性时，图形元素的属性也会相应地更改。

当使用 makeTwoWay 方法时，绑定将变为双向绑定，这意味着当图形元素的属性更改时，数据模型中的属性也会相应地更改。这使得数据模型和图形元素之间的同步更加方便和高效。

4. Point 基本用法

Point 是 GoJS 中的一个类，用于表示一个二维平面上的点。它的定义在 GoJS 的 API 文档中可以找到。

在 GoJS 中，可以使用 new go.Point(x, y) 的方式创建一个 Point 对象，其中 x 和 y 分别表示点的横坐标和纵坐标。例如：

var point = new go.Point(100, 200);

也可以使用 Point.parse(str) 方法将一个字符串解析为一个 Point 对象。str 是一个字符串，表示一个点的坐标。Point.parse(str) 方法将这个字符串解析为一个 Point 对象，并将其赋值给 point 变量。例如：

var str = "100 200";
var point = go.Point.parse(str);

5. draggingTool.gridSnapCellSize 作用

draggingTool.gridSnapCellSize 是 gojs 中拖拽工具的属性之一，它定义了拖拽时网格捕捉的单元格大小。当设置了这个属性后，拖拽的元素会自动对齐到网格的单元格边界上，从而使得布局更加整齐美观。例如，如果将 draggingTool.gridSnapCellSize 设置为 20，则拖拽的元素会自动对齐到 20 像素的边界上。这个属性的默认值为 null，表示不进行网格捕捉。

myDiagram = $(go.Diagram, "myDiagramDiv", {
  "draggingTool.gridSnapCellSize": new go.Size(1, 5),
});

6.initialPosition 初始坐标

gojs 生成绘图时，默认情况下是将图形放置在画布的中心位置。因为 gojs 的默认布局是居中布局。但是可以通过设置 Diagram 的 initialPosition 属性来改变它的位置。如果想让绘图从左上角开始，可以：

var myDiagram = $(go.Diagram, "myDiagramDiv", {
  initialPosition: new go.Point(0, 0), // 初始坐标位置
});

7.修改按钮默认样式

$(
  "Button",
  {
    width: 15,
    height: 15,
    "ButtonBorder.fill": "green", // 改掉默认填充色
    _buttonFillOver: "red", // 鼠标悬浮填充色
    //   _buttonStrokeOver: "#000", // 鼠标悬浮边框色
  },
  $(go.TextBlock, "按钮文字")
);

8.放大缩小，还原重做

// 放大
myDiagram.scale += 0.1;
// 缩小
myDiagram.scale -= 0.1;
// 还原
myDiagram.commandHandler.undo();
// 重做
myDiagram.commandHandler.redo();

9.根据 key 值查找节点元素,查找元素内的零件

// 根据 key 值查找节点元素
const node = diagram.findNodeForKey("key值");
// 查找元素内的零件: 查找元素name:TEXT的零件，字体颜色改为红色
node.findObject("TEXT").stroke = "red";

10.toolManager.hoverDelay

toolManager.hoverDelay 属性用于设置鼠标指针悬停在图表元素上时将触发悬停事件的延迟时间

鼠标悬停在图形元素上才会触发 hover 事件。默认值为 300 毫秒。如果将其设置为 200，表示鼠标悬停在图形元素上 200 毫秒后才会触发 hover 事件。

myDiagram = $(go.Diagram, "myDiagramDiv", {
  "toolManager.hoverDelay": 200, // 延时
});

我一般会用在 toolTip 的显示时间上，鼠标悬浮显示 toolTip，默认延时时间有点长，可以通过以上属性，更改为合适的时间,toolTip的基本用法:

$(
  go.TextBlock,
  {
    width: 100,
    maxLines: 1,
    overflow: go.TextBlock.OverflowEllipsis,
  },
  new go.Binding("text", "name").makeTwoWay(),
  {
    toolTip: $("ToolTip", $(go.TextBlock, new go.Binding("text", "name"))),
  }
);