??推薦幾個(gè)好用的工具

• var-conv 適用于VSCode IDE的代碼變量名稱快速轉(zhuǎn)換工具
• generator-vite-plugin 快速生成Vite插件模板項(xiàng)目
• generator-babel-plugin 快速生成Babel插件模板項(xiàng)目

進(jìn)入正題

LogicFlow 是一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和靈活的節(jié)點(diǎn)自定義、插件等拓展機(jī)制。LogicFlow支持前端研發(fā)自定義開發(fā)各種邏輯編排場景，如流程圖、ER圖、BPMN流程等。在工作審批配置、機(jī)器人邏輯編排、無代碼平臺流程配置都有較好的應(yīng)用。

這一節(jié)將講解快速上手 LogicFlow 流程圖編輯框架的更多配置選項(xiàng)，項(xiàng)目整體基于Vue3+Vite3+Ts4開發(fā)，為幫助還為熟練使用 Vue3 和 Typescript 語法的小伙伴提供便利，如果你已經(jīng)很熟練在Vue3中的開發(fā)習(xí)慣，建議直接訪問 LogicFlow 將獲取完整的入門指南。

1. 設(shè)置主題 Theme：

LF設(shè)置主題時(shí)提供了兩種方式的實(shí)現(xiàn)，分別是在實(shí)例化LF對象時(shí)通過 style 選項(xiàng)進(jìn)行配置，另一種方式是在實(shí)例化LF對象后使用內(nèi)置的 lf.setTheme({}) 函數(shù)進(jìn)行配置

設(shè)置主題的常用屬性列表（完整的選項(xiàng)列表參見ThemeApi）：

• 實(shí)例化LF時(shí)配置：

const styleConfig = {} // 主題配置項(xiàng)
lf.value = new LogicFlow({
  container: container.value,
  grid: true,
  // 實(shí)例化LF時(shí)配置主題
  style: styleConfig,
})

• 實(shí)例化LF后配置：

const styleConfig = {} // 主題配置項(xiàng)
lf.value.setTheme(styleConfig);

PS：節(jié)點(diǎn)的 width、height、r 等類似屬性統(tǒng)一歸類為形狀屬性，因其會對錨點(diǎn)位置、連線計(jì)算產(chǎn)生影響，顧不能通過主題進(jìn)行設(shè)置，僅支持在自定義時(shí)調(diào)整。

2. 設(shè)置網(wǎng)格 Gird：

網(wǎng)格在LF中主要起到的作用是對節(jié)點(diǎn)的中心點(diǎn)和移動(dòng)時(shí)的定位，默認(rèn)網(wǎng)格選項(xiàng)關(guān)閉，中心點(diǎn)和移動(dòng)的最小單位為1px，當(dāng)開啟網(wǎng)格選項(xiàng)后，渲染的中心點(diǎn)和移動(dòng)時(shí)的最小單位將調(diào)整為20px。在自定義節(jié)點(diǎn)的寬高時(shí)為了更好的與網(wǎng)格對齊，建議設(shè)置為網(wǎng)格最小單位的整數(shù)倍。

const gridConfig = {
  size: 20,
  visible: true,
  type: 'mesh',
  config: {
    color: '#ababab',
    thickness: 1,
  },
}
lf.value = new LogicFlow({
  container: container.value,
  grid: gridConfig,
})

3. 設(shè)置對齊線 Snapline：

網(wǎng)格解決了一個(gè)節(jié)點(diǎn)的中心點(diǎn)和移動(dòng)時(shí)的定位對齊問題，那么多個(gè)節(jié)點(diǎn)的位置調(diào)整就需要用到對齊線輔助進(jìn)行了，該snapline選項(xiàng)默認(rèn)開啟，對齊線的樣式可以通過設(shè)置主題中的選項(xiàng)來自定義；

const styleConfig = {
  snapline: {
    stroke: '#1E90FF', // 對齊線顏色
    strokeWidth: 1, // 對齊線寬度
  },
}
lf.value.setTheme(styleConfig);

4. 設(shè)置背景 Background：

在前面的示例中一直是啟用了Gird來充當(dāng)著背景的角色，LF對象在實(shí)例化的時(shí)候同樣可以通過選項(xiàng)來控制背景，默認(rèn)是關(guān)閉的狀態(tài)，修改的選項(xiàng)是background；

lf.value = new LogicFlow({
  container: container.value,
  // grid: true, // 關(guān)閉網(wǎng)格
  background: {
    backgroundImage: "url(../grid.svg)",
    backgroundRepeat: "repeat"
  }
})

5. 設(shè)置鍵盤快捷鍵 Keyboard：

快捷鍵在流程圖產(chǎn)品中也是比不可少的一塊功能，可以大大方便使用者的體驗(yàn)，在LF中默認(rèn)關(guān)閉了快捷鍵的使用，可以在實(shí)例化LF時(shí)通過啟用enabled選項(xiàng)來支持；LF除內(nèi)置的快捷鍵外也支持自定義來擴(kuò)展快捷鍵的使用；

• 內(nèi)置快捷鍵

• 啟用快捷鍵

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true
  },
})

• 自定義快捷鍵：快捷鍵keys的定義規(guī)則同mousetrap；下面使用官網(wǎng)的示例來演示自義定刪除節(jié)點(diǎn)的快捷鍵觸發(fā)時(shí)增加二次確認(rèn)的提醒；

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true,
    shortcuts: [
      {
        keys: ["backspace"],
        callback: () => {
          const r = window.confirm("確定要?jiǎng)h除嗎？");
          if (r) {
            const elements = lf.value!.getSelectElements(true);
            lf.value?.clearSelectElements();
            elements.edges.forEach((edge: EdgeConfig) => lf.value!.deleteEdge(edge.id || ''));
            elements.nodes.forEach((node: NodeConfig) => lf.value!.deleteNode(node.id || ''));
          }
        }
      }
    ]
  },
})

6. 設(shè)置圖編輯方式：

LF提供了更多方便控制圖編輯方式的選項(xiàng)，同樣是可以在實(shí)例化LF時(shí)通過選項(xiàng)初始化，也支持實(shí)例化LF后通過lf.updateEditConfig函數(shù)進(jìn)行調(diào)整；

圖編輯模式支持的選項(xiàng)列舉（完整的選項(xiàng)列表詳見editConfigModelApi）：

• 如下啟用了只讀的靜默模式、禁止縮放、禁止鼠標(biāo)滾動(dòng)移動(dòng)畫布、禁止拖動(dòng)畫布：

lf.value = new LogicFlow({
  container: container.value,
  isSilentMode: true, // 靜默模式
  stopZoomGraph: true, // 禁止縮放
  stopScrollGraph: true, // 禁止鼠標(biāo)滾動(dòng)移動(dòng)畫布
  stopMoveGraph: true, // 禁止拖動(dòng)畫布
})

• 通過lf.updateEditConfig更靈活的調(diào)整：

lf.value.updateEditConfig({
	isSilentMode: false
});

總結(jié)

這一節(jié)的內(nèi)容就到此結(jié)束了，現(xiàn)在對主題、網(wǎng)格、對齊線、背景、快捷鍵和圖編輯方式都了解了嗎？這些選項(xiàng)并非是必須的，但是在需要的時(shí)候要知道怎么配置，下一節(jié)開始要著手準(zhǔn)備插件部分的學(xué)習(xí)了，加油~

以上就是vue LogicFlow更多配置選項(xiàng)詳解的詳細(xì)內(nèi)容，更多關(guān)于vue LogicFlow配置選項(xiàng)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論