對齊線 Snapline

對齊線能夠在節(jié)點移動過程中，將移動節(jié)點的位置與畫布中其他節(jié)點位置進行對比，輔助位置調(diào)整。位置對比有如下兩個方面。

• 節(jié)點中心位置
• 節(jié)點的邊框

對齊線使用

普通編輯模式下，默認開啟對齊線，也可通過配置進行關(guān)閉。 在靜默模式下，無法移動節(jié)點，所以關(guān)閉了對齊線功能，無法通過配置開啟。

對齊線樣式設(shè)置

// 關(guān)閉對齊線功能
const lf = new LogicFlow({snapline: false,
});

更多樣式修改參見主題

鍵盤快捷鍵 Keyboard

快捷鍵配置

通過創(chuàng)建 LogicFlow 實例時傳入 options 的 keyboard 屬性可以開啟快捷鍵， 可以只配置 enabled 屬性，為 true 時，代表開啟默認的快捷鍵。

const lf = new LogicFlow({container: document.querySelector("#app"),keyboard: {enabled: true,},
});

內(nèi)置快捷鍵功能

LogicFlow 內(nèi)置了復(fù)制，粘貼，redo/undo，刪除 的快捷鍵。

快捷鍵	功能
cmd+c 或 ctrl+c	復(fù)制節(jié)點
cmd+v 或 ctrl + v	粘貼節(jié)點
cmd+z 或 ctrl+z	撤銷操作
cmd+y 或 ctrl+y	回退操作
backspace	刪除操作

自定義快捷鍵

shortcuts 則可以定義用戶自定義的一組快捷鍵 值得一提的是 keys 的規(guī)則，與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));}},},],},
});