对齐线 Snapline
对齐线能够在节点移动过程中,将移动节点的位置与画布中其他节点位置进行对比,辅助位置调整。位置对比有如下两个方面。
- 节点中心位置
- 节点的边框
对齐线使用
普通编辑模式下,默认开启对齐线,也可通过配置进行关闭。 在静默模式下,无法移动节点,所以关闭了对齐线功能,无法通过配置开启。
对齐线样式设置
typescript
// 关闭对齐线功能
const lf = new LogicFlow({
snapline: false,
});
更多样式修改参见主题
键盘快捷键 Keyboard
快捷键配置
通过创建 LogicFlow
实例时传入 options 的 keyboard 属性可以开启快捷键, 可以只配置 enabled 属性,为 true 时,代表开启默认的快捷键。
typescript
const lf = new LogicFlow({
container: document.querySelector("#app"),
keyboard: {
enabled: true,
},
});
内置快捷键功能
LogicFlow 内置了复制,粘贴,redo/undo,删除 的快捷键。
快捷键 | 功能 |
---|---|
cmd+c 或 ctrl+c | 复制节点 |
cmd+v 或 ctrl + v | 粘贴节点 |
cmd+z 或 ctrl+z | 撤销操作 |
cmd+y 或 ctrl+y | 回退操作 |
backspace | 删除操作 |
自定义快捷键
shortcuts 则可以定义用户自定义的一组快捷键 值得一提的是 keys 的规则,与mousetrap一致。
以自定义删除功能为例,在删除之前添加一个确认操作。
typescript
const lf = new LogicFlow({
// ...
keyboard: {
enabled: true,
shortcuts: [
{
keys: ["backspace"],
callback: () => {
const r = window.confirm("确定要删除吗?");
if (r) {
const elements = lf.getSelectElements(true);
lf.clearSelectElements();
elements.edges.forEach((edge) => lf.deleteEdge(edge.id));
elements.nodes.forEach((node) => lf.deleteNode(node.id));
}
},
},
],
},
});