「GoJs实现Tab和Enter新增下级和同级节点」—简洁而实用的解决方案

2024-01-24 09:11:39

1. 导言：探索GoJs的奇妙世界

在信息图表的世界中，GoJs作为一款备受赞誉的JavaScript库，以其强大的功能和灵活性备受推崇。它允许你构建各式各样的图表和图示，其中包括脑图。而脑图的奇妙之处在于，它不仅可以帮助你快速整理思绪，还可以让你以一种视觉化的方式将想法串联起来。

然而，在实际使用GoJs的时候，你可能会遇到一个问题：如何通过键盘快捷键来添加下级和同级节点。虽然你可以在工具栏中找到添加节点的按钮，但使用快捷键显然更加高效和便捷。

2. 踏上实现之旅：让按键成为你的创作利器

为了解决这一问题，你可以利用GoJs提供的工具类来兼容按键的点击。当用户按下特定的按键（例如Tab或Enter）时，你可以使用keyCode来判断用户按下的按键，然后执行原本绑定的操作逻辑。

这听起来或许有些复杂，但别担心，我会一步一步地引导你完成实现过程。

3. 代码示例：亲自动手，感受实现的快感

首先，你需要引入GoJs库，并在你的代码中创建一个图表对象。之后，你可以添加一些基本的操作，例如添加节点和连线。

var myDiagram = new go.Diagram("myDiagramDiv"); // 创建图表对象

// 添加节点
var nodeData = { key: "1", text: "节点1" };
myDiagram.model.addNodeData(nodeData);

// 添加连线
var linkData = { from: "1", to: "2", text: "连线1" };
myDiagram.model.addLinkData(linkData);

现在，让我们来添加键盘快捷键的功能。你可以使用keydown事件监听器来监听用户的键盘输入。

document.addEventListener("keydown", function(e) {
  // 检查用户按下的按键是否为Tab或Enter
  if (e.keyCode === 9 || e.keyCode === 13) {
    // 执行原本绑定的操作逻辑
    // 在这里，我们只是打印一条消息
    console.log("你按下了Tab或Enter键");
  }
});

当然，你也可以根据自己的需求来修改操作逻辑。例如，你可以添加一个新的节点，或者添加一条新的连线。

// 添加一个新的节点
var newNodeData = { key: "3", text: "新节点" };
myDiagram.model.addNodeData(newNodeData);

// 添加一条新的连线
var newLinkData = { from: "2", to: "3", text: "新连线" };
myDiagram.model.addLinkData(newLinkData);