欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年01月11日 08:39:20   作者：小鑫同學  
這篇文章主要為大家介紹了vue?LogicFlow自定義邊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

??推薦幾個好用的工具

進入正題

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

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

1. 認識自定義邊（Edge）模板：

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

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

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

2. 優(yōu)先進行注冊和使用：

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

2.1 注冊自定義 Edge：

注冊過程依舊是兩個步驟：

  • 第一要將上面編寫的 CustomEdge.ts 導入到 App.vue；
  • 第二要將 CustomEdge 對象通過 lf 實例中的 register() 函數(shù)在 render() 前注冊；
// 導入自定義 Edge
import CustomEdge from "./CustomEdge";
// 準備兩個Node，并使用自定義Edge來連接它們倆
const graphData = {}
onMounted(() => {
  // 在執(zhí)行 render 前進行注冊
  lf.value.register(CustomEdge);
  lf.value.render();
})

2.2 如何使用自定義 Edge：

與 Node 的定義相同，但是要將自定義的 Edge 放置到 edges 中，區(qū)別是 edge 需要明確 源節(jié)點 ID 和 目標節(jié)點 ID 兩個值，通過這兩個值來定位被 Edge 連接的到底是誰，type 同樣需要指定為自定義 Edge 的 type 屬性值；

// 準備兩個Node，并使用自定義Edge來連接它們倆
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 的風格：

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

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;
  }
}

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

4. 開啟邊（Edge）動畫：

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

在LF中可以通過 lf.openEdgeAnimation(edgeId) 啟動默認動畫，也可以通過重寫 getEdgeAnimationStyle() 函數(shù)來自定義動畫的屬性；

  • 開啟默認動畫：為需要開啟動畫的 Edge 增加 id 字段，并在執(zhí)行渲染函數(shù) render() 后開啟動畫：
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í)行渲染后開啟動畫
  lf.value.openEdgeAnimation("702a4d2f-b516-4769-adb0-5a4f4f5c07a9");
})
  • 自定義動畫屬性：重寫 getEdgeAnimationStyle() 函數(shù)設置動畫屬性，重寫 setAttributes() 函數(shù)開啟動畫：
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é)點間邊（Edge）的類型：

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

  • 通過函數(shù)設置默認類型：
lf.value.setDefaultEdgeType("CustomEdge");
  • 通過選項設置默認類型：
lf.value = new LogicFlow({
  edgeType: "CustomEdge",
})
  • 按同節(jié)點類型設置不同的類型：
lf.value = new LogicFlow({
  edgeGenerator(sourceNode, targetNode, currentEdge?) {
    if (sourceNode.type === 'rect') return 'CustomEdge'
  },
})

6. 自定義箭頭的類型：

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

  • 通過 setTheme() 函數(shù)設置剪頭的風格：
f.value.setTheme({
  arrow: {
    offset: 4, // 箭頭垂線長度
    verticalLength: 2, // 箭頭底線長度
  }
})
  • 通過重寫 getEndArrow() 函數(shù)，按 properties 傳遞的類型來實現(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'
        })
    }
}

總結(jié)

這一節(jié)的內(nèi)容就到此結(jié)束了，你的代碼都運行起來了嗎。下一節(jié)將帶來 LF 使用時更多的配置選項介紹。

以上就是vue LogicFlow自定義邊示例詳解的詳細內(nèi)容，更多關(guān)于vue LogicFlow自定義邊的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論