您的位置:首页 > 财经 > 金融 > LogicFlow 学习笔记——11. 对齐线 和 键盘快捷键

LogicFlow 学习笔记——11. 对齐线 和 键盘快捷键

2024/12/22 0:03:18 来源:https://blog.csdn.net/lt5227/article/details/139742788  浏览:    关键词:LogicFlow 学习笔记——11. 对齐线 和 键盘快捷键

对齐线 Snapline

对齐线能够在节点移动过程中,将移动节点的位置与画布中其他节点位置进行对比,辅助位置调整。位置对比有如下两个方面。

  • 节点中心位置
  • 节点的边框

对齐线使用

普通编辑模式下,默认开启对齐线,也可通过配置进行关闭。 在静默模式下,无法移动节点,所以关闭了对齐线功能,无法通过配置开启。

对齐线样式设置

// 关闭对齐线功能
const lf = new LogicFlow({snapline: false,
});

更多样式修改参见主题

键盘快捷键 Keyboard

快捷键配置

通过创建 LogicFlow 实例时传入 options 的 keyboard 属性可以开启快捷键, 可以只配置 enabled 属性,为 true 时,代表开启默认的快捷键。

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一致。
以自定义删除功能为例,在删除之前添加一个确认操作。

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));}},},],},
});

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com