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

对齐线 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));
          }
        },
      },
    ],
  },
});
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
CSDN_PBB3 小时前
[STM32 - 野火] - - - 固件库学习笔记 - - - 十五.设置FLASH的读写保护及解除
笔记·stm32·学习
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
鸡啄米的时光机7 小时前
vscode的一些实用操作
vscode·学习
Kai HVZ7 小时前
《深度学习》——调整学习率和保存使用最优模型
人工智能·深度学习·学习