快捷導(dǎo)航

LogicFlow內(nèi)置菜單插件實例詳解

更新時間：2023年01月29日 11:01:15 作者：小鑫同學(xué)

這篇文章主要為大家介紹了LogicFlow內(nèi)置菜單插件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

進入正題

LogicFlow 是一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和靈活的節(jié)點自定義、插件等拓展機制。

LogicFlow支持前端研發(fā)自定義開發(fā)各種邏輯編排場景，如流程圖、ER圖、BPMN流程等。在工作審批配置、機器人邏輯編排、無代碼平臺流程配置都有較好的應(yīng)用。

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

1. 菜單插件安裝配置：

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

默認的菜單支持情況如下：


節(jié)點右鍵菜單	刪除	復(fù)制	編輯文案
邊右鍵菜單	刪除	?	編輯文案
畫布右鍵菜單	?	?	?

2. 菜單項配置：

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

字段	類型	作用	是否必須	描述
text	string	文案		菜單項展示的文案
className	string	class名稱		每一項默認class為lf-menu-item，設(shè)置了此字段，calss會在原來的基礎(chǔ)上添加className。
icon	boolean	是否創(chuàng)建icon的span展位		如果簡單的文案不能豐富表示菜單，可以加個icon設(shè)置為true,對應(yīng)的菜單項會增加class為lf-menu-icon的span，通過為其設(shè)置背景的方式，豐富菜單的表示，一般與className配合使用。
callback	Function	點擊后執(zhí)行的回調(diào)	?	三種菜單回調(diào)中分別可以拿到節(jié)點數(shù)據(jù)/邊數(shù)據(jù)/事件信息。

3. 追加菜單選項：

默認的菜單肯定是不能夠覆蓋實際的業(yè)務(wù)場景的，所以菜單插件安裝后提供了 addMenuConfig 來擴充原有的菜單項，擴充菜單仍然需要在渲染前操作：

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

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

4. 重置菜單選項：

當默認的菜單項不夠使用時可以追加新的菜單選項進入，當不需要提供的菜單時就需要重置掉自帶的這幾個菜單項目，可以按照下面的代碼操作：

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

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

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

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

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

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

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

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

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

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) {
      // 單獨為非禁用的元素設(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,
}

補充監(jiān)聽事件函數(shù)：

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

總結(jié)

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

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

您可能感興趣的文章: