??推薦幾個好用的工具

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

進入正題

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

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

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

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

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

• 實例化LF時配置：

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

• 實例化LF后配置：

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

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

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

網(wǎng)格在LF中主要起到的作用是對節(jié)點的中心點和移動時的定位，默認網(wǎng)格選項關(guān)閉，中心點和移動的最小單位為1px，當開啟網(wǎng)格選項后，渲染的中心點和移動時的最小單位將調(diào)整為20px。在自定義節(jié)點的寬高時為了更好的與網(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)格解決了一個節(jié)點的中心點和移動時的定位對齊問題，那么多個節(jié)點的位置調(diào)整就需要用到對齊線輔助進行了，該snapline選項默認開啟，對齊線的樣式可以通過設(shè)置主題中的選項來自定義；

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

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

在前面的示例中一直是啟用了Gird來充當著背景的角色，LF對象在實例化的時候同樣可以通過選項來控制背景，默認是關(guān)閉的狀態(tài)，修改的選項是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)品中也是比不可少的一塊功能，可以大大方便使用者的體驗，在LF中默認關(guān)閉了快捷鍵的使用，可以在實例化LF時通過啟用enabled選項來支持；LF除內(nèi)置的快捷鍵外也支持自定義來擴展快捷鍵的使用；

• 內(nèi)置快捷鍵

• 啟用快捷鍵

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

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

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true,
    shortcuts: [
      {
        keys: ["backspace"],
        callback: () => {
          const r = window.confirm("確定要刪除嗎？");
          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提供了更多方便控制圖編輯方式的選項，同樣是可以在實例化LF時通過選項初始化，也支持實例化LF后通過lf.updateEditConfig函數(shù)進行調(diào)整；

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

• 如下啟用了只讀的靜默模式、禁止縮放、禁止鼠標滾動移動畫布、禁止拖動畫布：

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

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

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

總結(jié)

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

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

最新評論