LogicFlow 学习笔记——10. LogicFlow 进阶边

我们可以基于 Vue 组件自定义边，可以在边上添加任何想要的 Vue 组件，甚至将原有的边通过样式隐藏，重新绘制。
如 Example3 中所示：
在这里插入图片描述

锚点

默认情况下，LogicFlow 只记录节点与节点的信息。但是在一些业务场景下，需要关注到锚点，比如在 UML 类图中的关联关系；或者锚点表示节点的入口和出口之类。这个时候需要重写连线的保存方法，将锚点信息也一起保存。

class CustomEdgeModel2 extends LineEdgeModel {// 重写此方法，使保存数据是能带上锚点数据。getData() {const data = super.getData();data.sourceAnchorId = this.sourceAnchorId;data.targetAnchorId = this.targetAnchorId;return data;}
}

动画

由于 LogicFlow 是基于 svg 的流程图编辑框架，所以我们可以给 svg 添加动画的方式来给流程图添加动画效果。为了方便使用，我们也内置了基础的动画效果。在定义边的时候，可以将属性isAnimation设置为 true 就可以让边动起来，也可以使用lf.openEdgeAnimation(edgeId)来开启边的默认动画。

class CustomEdgeModel extends PolylineEdgeModel {setAttributes() {this.isAnimation = true;}getEdgeAnimationStyle() {const style = super.getEdgeAnimationStyle();style.strokeDasharray = "5 5";style.animationDuration = "10s";return style;}
}

下面我们对上面的内容写一个简单的样例：
样例中使用了 JSX 所以需要进行配置，在项目中，运行pnpm install @vitejs/plugin-vue-jsx并在vite.config.js增加如下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({plugins: [vue(), vueJsx()]
});

新建src/views/Example/LogicFlowAdvance/Edge/Example01/CustomCard.vue代码如下：

<script setup lang="tsx">
import { ref } from 'vue'const props = defineProps({properties: {type: Object,required: true}
})type Answer = {text: stringid: string
}type Properties = {title: stringcontent: stringanswers: Answer[]
}// Example props passed to the component
const properties = ref(props.properties as Properties)
</script>
<template><div class="html-card"><!-- <ElButton οnclick="alert(123)" type="primary" style="margin-left: 15px">Title</ElButton> --><div class="html-card-header">{{ properties.title }}</div><div class="html-card-body">{{ properties.content }}</div><div class="html-card-footer"><div v-for="answer in properties.answers" :key="answer.id" class="html-card-label">{{ answer.text }}</div></div></div>
</template>
<style scoped>
.html-card {width: 240px;height: 100%;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);border-radius: 4px;border: 1px solid #ebeef5;background-color: #fff;overflow: hidden;color: #303133;transition: 0.3s;box-sizing: border-box;padding: 5px;
}
/* 定义节点不被允许连接的时候，节点样式 */
.lf-node-not-allow .html-card {border-color: #f56c6c;
}
.lf-node-allow .html-card {border-color: #67c23a;
}
.html-card-header {font-size: 12px;line-height: 24px;margin-left: 14px;
}
.html-card-header:before {content: '';position: absolute;left: 5px;top: 13px;display: block;width: 7px;height: 7px;border: 1px solid #cbcef5;border-radius: 6px;
}
.html-card-body {font-size: 12px;color: #6f6a6f;margin-top: 5px;
}.html-card-footer {display: flex;position: absolute;bottom: 5px;
}
.html-card-label {font-size: 12px;line-height: 16px;padding: 2px;background: #ebeef5;margin-right: 10px;
}
</style>

新建src/views/Example/LogicFlowAdvance/Edge/Example01/CustomCard.tsx代码如下：

import { HtmlNode, HtmlNodeModel } from '@logicflow/core'
import { createApp, h, App, VNode, render } from 'vue'
import CustomCard from './CustomCard.vue'class HtmlCard extends HtmlNode {isMounted: booleanapp: App<Element>r: VNodeconstructor(props: any) {super(props)this.isMounted = falsethis.r = h(CustomCard, {properties: props.model.getProperties(),text: props.model.inputData})this.app = createApp({render: () => this.r})}// 重写HtmlNode的setHtml，来控制html节点内容。setHtml(rootEl: HTMLElement) {if(!this.isMounted) {this.isMounted = trueconst node = this.getCardEl()render(node, rootEl)} else {if (this.r.component) {this.r.component.props.properties = this.props.model.getProperties();}}}getCardEl() {const { properties } = this.props.modelreturn <><CustomCard properties={properties} /></>}
}
class HtmlCardModel extends HtmlNodeModel {initNodeData(data: any) {super.initNodeData(data)// 禁止节点文本可以编辑this.text.editable = falsethis.width = 240// 定义连接规则，只允许出口节点连接入口节点const rule = {message: '只允许出口节点连接入口节点',validate: (sourceNode: any, targetNode: any, sourceAnchor: any, targetAnchor: any) => {console.log(sourceNode, targetNode)console.log(sourceAnchor, targetAnchor)return sourceAnchor.type === 'sourceAnchor' && targetAnchor.type === 'targetAnchor'}}this.sourceRules.push(rule)}setAttributes() {const {properties: { content }} = this// 动态计算节点的高度const rowSize = Math.ceil(content.length / 20)this.height = 60 + rowSize * 18}/*** 计算每个锚点的位置*/getDefaultAnchor() {const { height, x, y, id, properties } = thisconst anchorPositon = []anchorPositon.push({x,y: y - height / 2,type: 'targetAnchor',id: `${id}_targetAnchor`})if (properties.answers) {let preOffset = 5properties.answers.forEach((answer: any) => {const text = answer.text// 计算每个锚点的位置，锚点的位置一般相对节点中心点进行偏移const offsetX = preOffset + (this.getBytesLength(text) * 6 + 4) / 2 - this.width / 2preOffset += this.getBytesLength(text) * 6 + 4 + 10const offsetY = height / 2anchorPositon.push({x: x + offsetX,y: y + offsetY,type: 'sourceAnchor',id: answer.id})})}return anchorPositon}getBytesLength(word: any) {if (!word) {return 0}let totalLength = 0for (let i = 0; i < word.length; i++) {const c = word.charCodeAt(i)if (word.match(/[A-Z]/)) {totalLength += 1.5} else if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {totalLength += 1.2} else {totalLength += 2}}return totalLength}
}export default {type: 'html-card',view: HtmlCard,model: HtmlCardModel
}

新建src/views/Example/LogicFlowAdvance/Edge/Example01/CustomEdge.tsx代码如下：

import { BezierEdge, BezierEdgeModel } from '@logicflow/core'class CustomEdge extends BezierEdge {}class CustomEdgeModel extends BezierEdgeModel {getEdgeStyle() {const style = super.getEdgeStyle()// svg属性style.strokeWidth = 1style.stroke = '#ababac'return style}/*** 重写此方法，使保存数据是能带上锚点数据。*/getData() {const data: any = super.getData()data.sourceAnchorId = this.sourceAnchorIddata.targetAnchorId = this.targetAnchorIdreturn data}setAttributes() {this.isAnimation = true;}
}export default {type: 'custom-edge',view: CustomEdge,model: CustomEdgeModel
}

新建src/views/Example/LogicFlowAdvance/Edge/Example01/data.ts，内容如下：

const data = {nodes: [{id: 'node_id_1',type: 'html-card',x: 340,y: 100,properties: {title: '普通话术',content: '喂，您好，这里是XX装饰，专业的装修品牌。请问您最近有装修吗？',answers: [{ id: '1', text: '装好了' },{ id: '2', text: '肯定' },{ id: '3', text: '拒绝' },{ id: '4', text: '否定' },{ id: '5', text: '默认' }]}},{id: 'node_id_2',type: 'html-card',x: 160,y: 300,properties: {title: '推荐话术',content:'先生\\女士，您好！几年来，我们通过对各种性质的建筑空间进行设计和施工，使我们积累了丰富的管理、设计和施工经验，公司本着以绿色环保为主题，对家居住宅、办公、商铺等不同特点的室内装饰产品形成了独特的装饰理念。',answers: [{ id: '1', text: '感兴趣' },{ id: '2', text: '不感兴趣' },{ id: '3', text: '拒绝' }]}},{id: 'node_id_3',type: 'html-card',x: 480,y: 260,properties: { title: '结束话术', content: '抱歉！打扰您了!', answers: [] }},{id: 'node_id_4',type: 'html-card',x: 180,y: 500,properties: {title: '结束话术',content: '好的，我们将安排师傅与您联系!',answers: []}}],edges: [{id: 'e54d545f-3381-4769-90ef-0ee469c43e9c',type: 'custom-edge',sourceNodeId: 'node_id_1',targetNodeId: 'node_id_2',startPoint: { x: 289, y: 148 },endPoint: { x: 160, y: 216 },properties: {},pointsList: [{ x: 289, y: 148 },{ x: 289, y: 248 },{ x: 160, y: 116 },{ x: 160, y: 216 }],sourceAnchorId: '2',targetAnchorId: 'node_id_2_targetAnchor'},{id: 'ea4eb652-d5de-4a85-aae5-c38ecc013fe6',type: 'custom-edge',sourceNodeId: 'node_id_2',targetNodeId: 'node_id_4',startPoint: { x: 65, y: 384 },endPoint: { x: 180, y: 461 },properties: {},pointsList: [{ x: 65, y: 384 },{ x: 65, y: 484 },{ x: 180, y: 361 },{ x: 180, y: 461 }],sourceAnchorId: '1',targetAnchorId: 'node_id_4_targetAnchor'},{id: 'da216c9e-6afe-4472-baca-67d98abb1d31',type: 'custom-edge',sourceNodeId: 'node_id_1',targetNodeId: 'node_id_3',startPoint: { x: 365, y: 148 },endPoint: { x: 480, y: 221 },properties: {},pointsList: [{ x: 365, y: 148 },{ x: 365, y: 248 },{ x: 480, y: 121 },{ x: 480, y: 221 }],sourceAnchorId: '4',targetAnchorId: 'node_id_3_targetAnchor'},{id: '47e8aff3-1124-403b-8c64-78d94ec03298',type: 'custom-edge',sourceNodeId: 'node_id_1',targetNodeId: 'node_id_3',startPoint: { x: 327, y: 148 },endPoint: { x: 480, y: 221 },properties: {},pointsList: [{ x: 327, y: 148 },{ x: 327, y: 248 },{ x: 476, y: 161 },{ x: 480, y: 221 }],sourceAnchorId: '3',targetAnchorId: 'node_id_3_targetAnchor'}]
}export default data

最后新建src/views/Example/LogicFlowAdvance/Edge/Example01/Example01.vue内容如下：

<script setup lang="ts">
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { onMounted } from 'vue'
import data from './data'
import CustomCard from './CustomCard'
import CustomEdge from './CustomEdge'
import CustomEdge2 from './CustomEdge2'// 在组件挂载时执行
onMounted(() => {// 创建 LogicFlow 实例const lf = new LogicFlow({container: document.getElementById('container')!, // 指定容器元素grid: true // 启用网格})lf.register(CustomCard)lf.register(CustomEdge)lf.register(CustomEdge2)lf.setDefaultEdgeType('custom-edge')lf.render(data)
})
</script><template><h3>Example01</h3><div id="container"></div><!-- 用于显示 LogicFlow 图表的容器 -->
</template><style>
#container {/* 容器宽度 */width: 100%;/* 容器高度 */height: 600px;
}
</style>