對(duì)齊線 Snapline

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

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

對(duì)齊線使用

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

對(duì)齊線樣式設(shè)置

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

更多樣式修改參見主題

鍵盤快捷鍵 Keyboard

快捷鍵配置

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

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é)點(diǎn)
cmd+v 或 ctrl + v	粘貼節(jié)點(diǎn)
cmd+z 或 ctrl+z	撤銷操作
cmd+y 或 ctrl+y	回退操作
backspace	刪除操作

自定義快捷鍵

shortcuts 則可以定義用戶自定義的一組快捷鍵 值得一提的是 keys 的規(guī)則，與mousetrap一致。
以自定義刪除功能為例，在刪除之前添加一個(gè)確認(rèn)操作。

const lf = new LogicFlow({// ...keyboard: {enabled: true,shortcuts: [{keys: ["backspace"],callback: () => {const r = window.confirm("確定要?jiǎng)h除嗎？");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));}},},],},
});