推薦幾個(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ā)自定義開(kāi)發(fā)各種邏輯編排場(chǎng)景，如流程圖、ER圖、BPMN流程等。在工作審批配置、機(jī)器人邏輯編排、無(wú)代碼平臺(tái)流程配置都有較好的應(yīng)用。

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

1. 菜單插件安裝配置：

菜單插件的安裝和配置同上一節(jié)的內(nèi)置插件配置，同樣是將導(dǎo)入的 Menu 對(duì)象在LF實(shí)例化時(shí)傳入 plugins 選項(xiàng)。

默認(rèn)的菜單支持情況如下：

2. 菜單項(xiàng)配置：

下面表格中列出的就是每個(gè)菜單項(xiàng)所支持的配置選項(xiàng)，僅有 callback 是必傳選項(xiàng)：

3. 追加菜單選項(xiàng)：

默認(rèn)的菜單肯定是不能夠覆蓋實(shí)際的業(yè)務(wù)場(chǎng)景的，所以菜單插件安裝后提供了 addMenuConfig 來(lái)擴(kuò)充原有的菜單項(xiàng)，擴(kuò)充菜單仍然需要在渲染前操作：

下面這段代碼配置分別為節(jié)點(diǎn)右鍵菜單添加了分享和屬性兩個(gè)菜單，邊右鍵菜單添加了屬性菜單，畫(huà)布右鍵菜單添加了分享菜單。

const menuConfig = {
  nodeMenu: [
    {
      text: '分享',
      callback() {
        alert('分享成功！');
      }
    },
    {
      text: '屬性',
      callback(node: any) {
        alert(`
          節(jié)點(diǎn)id：${node.id}
          節(jié)點(diǎn)類型：${node.type}
          節(jié)點(diǎn)坐標(biāo)：(x: ${node.x}, y: ${node.y})`
        );
      },
    },
  ],
  edgeMenu: [
    {
      text: '屬性',
      callback(edge: any) {
        alert(`
          邊id：${edge.id}
          邊類型：${edge.type}
          邊坐標(biāo)：(x: ${edge.x}, y: ${edge.y})
          源節(jié)點(diǎn)id：${edge.sourceNodeId}
          目標(biāo)節(jié)點(diǎn)id：${edge.targetNodeId}`
        );
      },
    },
  ],
  graphMenu: [
    {
      text: '分享',
      callback() {
        alert('分享成功！');
      }
    },
  ],
};
lf.value.extension.menu.addMenuConfig(menuConfig);

4. 重置菜單選項(xiàng)：

當(dāng)默認(rèn)的菜單項(xiàng)不夠使用時(shí)可以追加新的菜單選項(xiàng)進(jìn)入，當(dāng)不需要提供的菜單時(shí)就需要重置掉自帶的這幾個(gè)菜單項(xiàng)目，可以按照下面的代碼操作：

edgeMenu: false, // 刪除默認(rèn)的邊右鍵菜單
graphMenu: [], // 覆蓋默認(rèn)的邊右鍵菜單，與false表現(xiàn)一樣

5. 指定類型元素配置菜單：

上面對(duì)菜單的增加和重置都是基于比較大的范圍做的操作，菜單項(xiàng)看起來(lái)都一模一樣的，那么為不同類型的元素如何配置不同的菜單項(xiàng)呢？接著往下操作：

lf.value.extension.menu.setMenuByType({
    type: 'rect',
    menu: [
      {
        text: '分享',
        callback() {
          alert('分享成功ByType！');
        }
      },
    ]
})

PS：上面的代碼把節(jié)點(diǎn)類型為 rect 的菜單替換為了僅有一個(gè)分享菜單項(xiàng)，其它的按類型配置相同。

6. 指定業(yè)務(wù)狀態(tài)設(shè)置菜單：

不同的業(yè)務(wù)節(jié)點(diǎn)會(huì)擁有不同的狀態(tài)，不同的狀態(tài)下支持的菜單項(xiàng)也是不相同的。

• 在自定義節(jié)點(diǎn)時(shí)根據(jù)不同的業(yè)務(wù)狀態(tài)設(shè)置菜單項(xiàng)；
• 在自定義節(jié)點(diǎn)中無(wú)法直接使用LF實(shí)例，需要通過(guò) graphModel 來(lái)派發(fā)事件進(jìn)行消息通知；
• 優(yōu)先級(jí)：指定業(yè)務(wù)狀態(tài)設(shè)置菜單 > 指定類型元素配置菜單 > 通用菜單配置 > 默認(rèn)菜單。

下面的代碼是很經(jīng)典的自定義業(yè)務(wù)節(jié)點(diǎn)的代碼，其中需要說(shuō)明的是 isDisabledNode 為節(jié)點(diǎn)預(yù)留的 properties 屬性掛在的擴(kuò)展業(yè)務(wù)節(jié)點(diǎn)，eventCenter.emit() 自定義業(yè)務(wù)節(jié)點(diǎn)內(nèi)派發(fā)事件的函數(shù)，還需要配置對(duì)應(yīng)的接收函數(shù)來(lái)處理：

import { RectNode, RectNodeModel } from '@logicflow/core';
class CustomNodeModel extends RectNodeModel {
  setAttributes() {
    this.stroke = '#1E90FF';
    this.fill = '#F0F8FF';
    this.radius = 10;
    const { properties: { isDisabledNode } } = this;
    if (!isDisabledNode) {
      // 單獨(dú)為非禁用的元素設(shè)置菜單。
      this.menu = [
        {
          text: 'del',
          callback: (node: any) => {
            this.graphModel.deleteNode(node.id);
            this.graphModel.eventCenter.emit('custom:event', node);
          },
        },
        {
          text: 'edit',
          callback: (node: any) => {
            this.graphModel.setElementStateById(node.id, 2);
          },
        },
        {
          text: 'copy',
          callback: (node: any) => {
            this.graphModel.cloneNode(node.id);
          },
        },
      ];
    }
  }
}
export default {
    type: "CustomNode",
    view: RectNode,
    model: CustomNodeModel,
}

補(bǔ)充監(jiān)聽(tīng)事件函數(shù)：

lf.value.on('custom:event', (r) => {
  console.log(r)
});

總結(jié)

這一節(jié)的內(nèi)容就到此結(jié)束了，代碼量相對(duì)校多，很多配置也依賴前面幾節(jié)的學(xué)習(xí)，還有對(duì)于自定義Edge的添加菜單也是類似的操作，到此內(nèi)置插件的使用就到此告一段落了，接著還有最后一個(gè)小節(jié)，就是要自定義插件，自定義插件將更有益于代碼的復(fù)用，期待一下吧~

更多關(guān)于LogicFlow內(nèi)置菜單插件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論