快捷導(dǎo)航

vue?LogicFlow自定義邊實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年01月11日 08:39:20 作者：小鑫同學(xué)

這篇文章主要為大家介紹了vue?LogicFlow自定義邊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

??推薦幾個(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 流程圖編輯框架的自定義邊（Edge），Edge 就是連接 Node 與 Node 之間的元素。項(xiàng)目整體基于Vue3+Vite3+Ts4開(kāi)發(fā)，為幫助還為熟練使用 Vue3 和 Typescript 語(yǔ)法的小伙伴提供便利，如果你已經(jīng)很熟練在Vue3中的開(kāi)發(fā)習(xí)慣，建議直接訪問(wèn) LogicFlow 將獲取完整的入門指南。

1. 認(rèn)識(shí)自定義邊（Edge）模板：

同上一節(jié)的自定義業(yè)務(wù)節(jié)點(diǎn)模板一樣，Edge 同樣是需要繼承自內(nèi)置的 XxxNode 和 XxxEdgeModel 類，并且導(dǎo)出 type 、view 和 model 三個(gè)選項(xiàng)，我相信上一節(jié)的代碼你能運(yùn)行成功，這一節(jié)就更加簡(jiǎn)單。

下面這段代碼繼承自內(nèi)置的 PolylineEdge 和 PolylineEdgeModel 實(shí)現(xiàn)本節(jié)的自定義 Edge：

// 源碼位置：./src/CustomEdge.ts
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
class CustomEdgeNode extends PolylineEdge {
	// 官網(wǎng)指示：由于邊的編輯復(fù)雜度問(wèn)題，絕大多數(shù)情況下，自定義邊時(shí)不推薦自定義view
}
class CustomEdgeModel extends PolylineEdgeModel {
}
export default {
    type: "CustomEdge",
    view: CustomEdgeNode,
    model: CustomEdgeModel,
}

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

優(yōu)先進(jìn)行注冊(cè)的原因和上一節(jié)中提到的一樣，這里就不再贅述了，請(qǐng)接著往下操作吧。

2.1 注冊(cè)自定義 Edge：

注冊(cè)過(guò)程依舊是兩個(gè)步驟：

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

// 導(dǎo)入自定義 Edge
import CustomEdge from "./CustomEdge";
// 準(zhǔn)備兩個(gè)Node，并使用自定義Edge來(lái)連接它們倆
const graphData = {}
onMounted(() => {
  // 在執(zhí)行 render 前進(jìn)行注冊(cè)
  lf.value.register(CustomEdge);
  lf.value.render();
})

2.2 如何使用自定義 Edge：

與 Node 的定義相同，但是要將自定義的 Edge 放置到 edges 中，區(qū)別是 edge 需要明確 源節(jié)點(diǎn) ID 和 目標(biāo)節(jié)點(diǎn) ID 兩個(gè)值，通過(guò)這兩個(gè)值來(lái)定位被 Edge 連接的到底是誰(shuí)，type 同樣需要指定為自定義 Edge 的 type 屬性值；

// 準(zhǔn)備兩個(gè)Node，并使用自定義Edge來(lái)連接它們倆
const graphData = {
  nodes: [
    {
      id: '242b1b6c-1721-4b10-b4ad-c895094cf332',
      type: 'rect',
      x: 100,
      y: 100
    },
    {
      id: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
      type: 'circle',
      x: 300,
      y: 200
    }
  ],
  edges: [
    {
      sourceNodeId: '242b1b6c-1721-4b10-b4ad-c895094cf332',
      targetNodeId: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
      type: 'CustomEdge',
    }
  ]
}

3. 自定義 Edge 的 Text & Outline 的風(fēng)格：

對(duì)于 Edge 風(fēng)格的自定義同樣是通過(guò)重寫不同的函數(shù)來(lái)實(shí)現(xiàn)，如重寫：getEdgeStyle()、getTextStyle() 和 getOutlineStyle()，還有最后對(duì)箭頭風(fēng)格的自定義；

class CustomEdgeModel extends PolylineEdgeModel {
	getEdgeStyle() {
      const style = super.getEdgeStyle();
      const { properties } = this;
      if (properties.isActived) {
          style.strokeDasharray = "4 4";
      }
      style.stroke = "orange";
      return style;
  }
  getTextStyle() {
      const style = super.getTextStyle();
      style.color = "#3451F1";
      style.fontSize = 20;
      style.background && (style.background.fill = "#F2F131");
      return style;
  }
  getOutlineStyle() {
      const style = super.getOutlineStyle();
      style.stroke = "red";
      style.hover && (style.hover.stroke = "red");
      return style;
  }
}

當(dāng)你完成了上面幾個(gè)函數(shù)的重寫后就得到的下面截圖的效果：

4. 開(kāi)啟邊（Edge）動(dòng)畫：

增加動(dòng)畫可以體現(xiàn)從一個(gè) Node 到流向另一個(gè) Node 的過(guò)程，在大多數(shù)的流程圖編輯軟件中都有這樣的功能存在。

在LF中可以通過(guò) lf.openEdgeAnimation(edgeId) 啟動(dòng)默認(rèn)動(dòng)畫，也可以通過(guò)重寫 getEdgeAnimationStyle() 函數(shù)來(lái)自定義動(dòng)畫的屬性；

開(kāi)啟默認(rèn)動(dòng)畫：為需要開(kāi)啟動(dòng)畫的 Edge 增加 id 字段，并在執(zhí)行渲染函數(shù) render() 后開(kāi)啟動(dòng)畫：

const graphData = {
  edges: [
    {
    	// 增加 id 字段
      id: '702a4d2f-b516-4769-adb0-5a4f4f5c07a9',
      sourceNodeId: '242b1b6c-1721-4b10-b4ad-c895094cf332',
      targetNodeId: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
      type: 'CustomEdge',
    }
  ]
}
onMounted(() => {
  lf.value.render(graphData);
  // 執(zhí)行渲染后開(kāi)啟動(dòng)畫
  lf.value.openEdgeAnimation("702a4d2f-b516-4769-adb0-5a4f4f5c07a9");
})

自定義動(dòng)畫屬性：重寫 getEdgeAnimationStyle() 函數(shù)設(shè)置動(dòng)畫屬性，重寫 setAttributes() 函數(shù)開(kāi)啟動(dòng)畫：

class CustomEdgeModel extends PolylineEdgeModel {
		// ... 省略部分代碼
  	setAttributes(): void {
        this.isAnimation = true;
    }
    getEdgeAnimationStyle() {
        const style = super.getEdgeAnimationStyle();
        style.strokeDasharray = "5 5";
        style.animationDuration = "10s";
        return style;
    }
}

5. 自定義節(jié)點(diǎn)間邊（Edge）的類型：

默認(rèn) Edge 的類型可以在實(shí)例化 LF 時(shí)通過(guò) edgeType 選項(xiàng)進(jìn)行調(diào)整，也可以使用 lf.setDefaultEdgeType(edgeType) 函數(shù)來(lái)指定；除此之外，為了滿足不同的業(yè)務(wù)節(jié)點(diǎn)使用不同類型的邊來(lái)表示還可以通過(guò)實(shí)例化LF時(shí)通過(guò)設(shè)置 edgeGenerator 函數(shù)進(jìn)行顯示規(guī)則的定義。

通過(guò)函數(shù)設(shè)置默認(rèn)類型：

lf.value.setDefaultEdgeType("CustomEdge");

通過(guò)選項(xiàng)設(shè)置默認(rèn)類型：

lf.value = new LogicFlow({
  edgeType: "CustomEdge",
})

按同節(jié)點(diǎn)類型設(shè)置不同的類型：

lf.value = new LogicFlow({
  edgeGenerator(sourceNode, targetNode, currentEdge?) {
    if (sourceNode.type === 'rect') return 'CustomEdge'
  },
})

6. 自定義箭頭的類型：

通過(guò) setTheme() 函數(shù)中提供的 arrow 選項(xiàng)，可以指定默認(rèn) Edge 箭頭的風(fēng)格；也可以在繼承 PolylineEdge 后通過(guò)重寫getEndArrow() 函數(shù)來(lái)實(shí)現(xiàn)更多顯示風(fēng)格。

通過(guò) setTheme() 函數(shù)設(shè)置剪頭的風(fēng)格：

f.value.setTheme({
  arrow: {
    offset: 4, // 箭頭垂線長(zhǎng)度
    verticalLength: 2, // 箭頭底線長(zhǎng)度
  }
})

通過(guò)重寫 getEndArrow() 函數(shù)，按 properties 傳遞的類型來(lái)實(shí)現(xiàn)不同的效果：

class CustomEdgeNode extends PolylineEdge {
    getEndArrow() {
        const { model } = this.props;
        const { properties: { arrowType } } = model;
        const { stroke, strokeWidth } = this.getArrowStyle();
        const pathAttr = {
            stroke,
            strokeWidth
        }
        if (arrowType === 'half') { // 半箭頭
            return (
                h('path', {
                    ...pathAttr,
                    d: 'M 0 0 -10 5'
                })
            )
        }
        return h('path', {
            ...pathAttr,
            d: 'M 0 0 -10 -5 -10 5 z'
        })
    }
}