推薦幾個(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 流程圖編輯框架的自定義業(yè)務(wù)節(jié)點(diǎn)內(nèi)容，代碼要在上一節(jié)的基礎(chǔ)上進(jìn)行開(kāi)發(fā)，使用1024code在線編寫(xiě)代碼的小伙伴可以直接fork上一節(jié)的代碼開(kāi)始，這一節(jié)的大致內(nèi)容包括了，準(zhǔn)備自定義業(yè)務(wù)節(jié)點(diǎn)的模板、注冊(cè)和使用、自定義樣式、自定義形狀、自定義外觀幾個(gè)方面，做好準(zhǔn)備后我們就開(kāi)始了。

1. 認(rèn)識(shí)自定義業(yè)務(wù)節(jié)點(diǎn)模板：

LF框架自定義業(yè)務(wù)節(jié)點(diǎn)使用到了面向?qū)ο笾欣^承的概念，通過(guò)繼承LF提供的 XxxNode 和 XxxNodeModel 類后對(duì)相關(guān)的函數(shù)進(jìn)行重寫(xiě)，并在默認(rèn)導(dǎo)出時(shí)提供 type、view 和 model`；

下面這段代碼繼承了Rect相關(guān)的 RectNode 和 RectNodeModel，如果要繼承其他的內(nèi)置對(duì)象還請(qǐng)查看官方文檔或源碼：

// 源碼位置：./src/CustomNode.ts
import { RectNode, RectNodeModel } from "@logicflow/core";
class CustomNodeView extends RectNode {
}
class CustomNodeModel extends RectNodeModel {
}
export default {
    type: "CustomNode",
    view: CustomNodeView,
    model: CustomNodeModel,
}

2. 優(yōu)先進(jìn)行注冊(cè)和使用：

自定義業(yè)務(wù)模板準(zhǔn)備好以后就可以先進(jìn)行注冊(cè)和使用了，第一個(gè)是因?yàn)樵诶^承內(nèi)置類后雖然沒(méi)有進(jìn)行任何的函數(shù)重寫(xiě)但是不耽誤渲染結(jié)果；第二個(gè)是因?yàn)橐婚_(kāi)始并不熟悉，所以要及時(shí)注冊(cè)和使用起來(lái)看到效果，也是方便后續(xù)的自定義。

2.1 注冊(cè)自定義業(yè)務(wù)節(jié)點(diǎn)：

注冊(cè)過(guò)程主要分兩個(gè)步驟：

• 第一要將上面編寫(xiě)的 CustomNode.ts 導(dǎo)入到 App.vue;
• 第二要將 CustomNode 對(duì)象通過(guò)lf實(shí)例中的 register() 函數(shù)在 render() 前注冊(cè)；

// 導(dǎo)入自定義節(jié)點(diǎn)
import CustomNode from "./CustomNode";
const graphData = {}
...
onMounted(() => {
  // 在執(zhí)行render前進(jìn)行注冊(cè)
  lf.value.register(CustomNode);
  lf.value.render(graphData);
})

2.2 如何使用自定義業(yè)務(wù)節(jié)點(diǎn)：

在成功注冊(cè)后即可通過(guò) render 函數(shù)來(lái)渲染業(yè)務(wù)流程中的一切元素的數(shù)據(jù)，自定義的業(yè)務(wù)節(jié)點(diǎn)和內(nèi)置的默認(rèn)節(jié)點(diǎn)使用方式相同，都是通過(guò) type 選項(xiàng)來(lái)標(biāo)識(shí)；

// 定義graphData
// 數(shù)據(jù)中的type為自定義節(jié)點(diǎn)導(dǎo)出的type屬性的值
// 將節(jié)點(diǎn)在坐標(biāo)為（100,100）的位置顯示
const graphData = {
  nodes: [
    {
      id: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      type: 'CustomNode',
      x: 100,
      y: 100
    }
  ]
}

3. 自定義業(yè)務(wù)節(jié)點(diǎn)樣式：

自定義業(yè)務(wù)節(jié)點(diǎn)樣式（綠色描邊），需要重寫(xiě) RectNodeModel 類中的 getNodeStyle() 函數(shù)，通過(guò)關(guān)鍵詞 super 獲取到父類中的節(jié)點(diǎn)樣式，并改變 stroke 的值為綠色，最后將修改完成的 style 返回；

class CustomNodeModel extends RectNodeModel {
  getNodeStyle() {
  	const style = super.getNodeStyle();
  	style.stroke = 'green';
  	return style;
	}
}

4. 自定義業(yè)務(wù)節(jié)點(diǎn)形狀：

自定義業(yè)務(wù)節(jié)點(diǎn)形狀（圓角矩形）和自定義業(yè)務(wù)節(jié)點(diǎn)樣式一樣的簡(jiǎn)單，重寫(xiě)RectNodeModel類中的initNodeData(data: any)函數(shù)就可以了；

class CustomNodeModel extends RectNodeModel {
  initNodeData(data: any): void {
    super.initNodeData(data);
    this.width = 120;
    this.height = 80;
    this.radius = 10;
  }
}

5. 自定義業(yè)務(wù)節(jié)點(diǎn)外觀：

前面的自定義業(yè)務(wù)節(jié)點(diǎn)樣式和形狀都是在原有內(nèi)置對(duì)象的基礎(chǔ)上進(jìn)行屬性的調(diào)整，為了實(shí)習(xí)更高的自定義的外觀，需要用到類似 Vue 中的 h 函數(shù)（渲染函數(shù)），通過(guò)重寫(xiě) RectNode 中的 Shape() 并借助渲染函數(shù)實(shí)現(xiàn)外觀的自定義；

• 第一步：重寫(xiě) getShape 函數(shù)，獲取 props 中存儲(chǔ)的當(dāng)前節(jié)點(diǎn)的信息，如位置、尺寸和樣式等；
• 第二步：節(jié)點(diǎn)的外觀要基于 SVG 實(shí)現(xiàn)，下面的案例要在業(yè)務(wù)組件左上角顯示一個(gè)ICON，ICON可以從 iconfont 找一個(gè)自己喜歡的；

class CustomNodeView extends RectNode {
  getShape() {
      // 獲取XxxNodeModel中定義的形狀屬性
      const { model } = this.props;
      const { x, y, width, height, radius } = model;
      // 獲取XxxNodeModel中定義的樣式屬性
      const style = model.getNodeStyle();
      return h('g', {}, [
          h('rect', {
              ...style,
              x: x - width / 2,
              y: y - height / 2,
              width,
              height,
              rx: radius,
              ry: radius,
          })
          h('svg', {
              x: x - width / 2 + 5,
              y: y - height / 2 + 5,
              width: 25,
              height: 25,
              viewBox: "0 0 1028 1024",
          }, [
              h('path', {
                  fill: style.stroke,
                  d: "<icon-svg-data>",
              })
          ])
      ]);
  }
}

6. 重啟項(xiàng)目預(yù)覽效果：

至此自定義業(yè)務(wù)節(jié)點(diǎn)基本完成，這種樣式也是大多數(shù)流程管理系統(tǒng)中常見(jiàn)的一種風(fēng)格，接著補(bǔ)充一下 graphData 數(shù)據(jù)，來(lái)看一下最終的效果~

const graphData = {
  nodes: [
    {
      id: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      type: 'CustomNode',
      x: 100,
      y: 100
    },
    {
      id: '681035e6-11e3-43d7-9392-1deed852c01a',
      type: 'CustomNode',
      x: 300,
      y: 100
    }
  ],
  edges: [
    {
      sourceNodeId: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      targetNodeId: '681035e6-11e3-43d7-9392-1deed852c01a',
      type: 'polyline'
    }
  ]
}

總結(jié)

這一節(jié)的內(nèi)容就到此結(jié)束了，自定義業(yè)務(wù)節(jié)點(diǎn)的樣式、形狀和外觀都搞定了嗎？尤其是外觀的自定義需要渲染 SVG 標(biāo)簽，所以掌握一些 SVG 相關(guān)的數(shù)據(jù)或掌握使用工具的生成 SVG 數(shù)據(jù)還是很有必要的，感覺(jué)把這一節(jié)的代碼熟悉熟悉，接著要對(duì) LF中的 Edge 進(jìn)行自定義了。

以上就是vue開(kāi)發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn)的詳細(xì)內(nèi)容，更多關(guān)于LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論