LogicFlow自定义使用

自定义节点样式

安装相应的库，第二个引入控制画布缩放，历史前后退等功能

pnpm add @logicflow/core

# 插件包（不使用插件时不需要引入）
pnpm add @logicflow/extension

创建一个基础元素

<div class="container" ref="container"></div>

index.vue
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Control } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'
import {onMounted,ref} from 'vue'
import ThemeRect from "./ThemeRect"; //自定义节点

```javascript
const data = {
    nodes: [
        {
            id: '1',
            type: 'theme-rect', //应用自定义节点类型标识
            x: 100,
            y: 60,
            properties:{ //动态设置
                color: 'red',
                bgc:'skyblue'
            }
        },
    ]
}
const lf = ref()
const container = ref()

onMounted(()=>{
    LogicFlow.use(Control); // 开启功能操作区域
    lf.value = new LogicFlow({
        container: container.value,
        grid: true,
        isSilentMode: false, // 仅浏览不可编辑
        stopScrollGraph: false, // 禁止鼠标滚动移动画布
        stopMoveGraph: false, // 禁止拖动画布
        stopZoomGraph: false, // 禁止缩放画布
        adjustNodePosition: true, // 允许拖动节点
        height:800
    });
    lf.value.register(ThemeRect); //注册自定义节点类型
    lf.value.render(data);
    lf.value.translateCenter(); //初始化居中显示
})

Node.vue
<template>
    <div class="node">
        <h1 className="title" :style="{backgroundColor:props.properties.color}">节点1</h1>
        <div className="content" :style="{backgroundColor:props.properties.bgc}">
            审批流节点
        </div>
    </div>
</template>

<script setup>
const props = defineProps(["properties"])
</script>

<style lang="scss" scoped>
.node{
    width: 200px;
    border: 1px solid #ccc;
    .title{
        text-align: center;
        height: 50px;
        line-height: 50px;
        background-color: yellow;
    }
    .content{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>

import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
import Node from './Node.vue';
import { createApp, h } from 'vue';

class DemoModel extends HtmlNodeModel {
    setAttributes(){
        this.text.editable = false; //是否可以编辑节点的text文本
    }
    getOutlineStyle() {
        const style = super.getOutlineStyle();
        // style.stroke = 'none'; //描边
        // style.hover.stroke = 'none';
        return style;
    }
}

class DemoNode extends HtmlNode{
    constructor(props) {
        super(props)        
        this.isMounted = false
        this.r = h(Node, {
            properties: props.model.getProperties(), // 获取节点数组中的properties中的数据直接作为props传递
        })
        this.app = createApp({
            render: () => this.r
        })
    }
    setHtml(rootEl) {  
        if (!this.isMounted) {
            this.isMounted = true
            const node = document.createElement('div')
            rootEl.appendChild(node)
            this.app.mount(node)
        } else {
            this.r.component.props.properties = this.props.model.getProperties()
        }
            setHtml(rootEl) {  
        if (!this.isMounted) {
            this.isMounted = true
            const node = document.createElement('div')
            rootEl.appendChild(node)
            this.app.mount(node)        
        } else {
            this.r.component.props.properties = this.props.model.getProperties()
        }
        this.props.model.width = this.r.component.vnode.el.clientWidth + 2.5  // 动态根据元素大小设置四个连线点位置
        this.props.model.height = this.r.component.vnode.el.clientHeight + 2.5  
    }
    }
}


export default {
    type: 'theme-rect',
    view: DemoNode,
    model: DemoModel
}

props.model.getProperties()方法用于读取对应节点的properties属性值

            this.props.model.width = this.r.component.vnode.el.clientWidth + 2.5  // 动态根据元素大小设置四个连线点位置
            this.props.model.height = this.r.component.vnode.el.clientHeight + 2.5  

顶部创建一个添加节点操作区域，

    <div class="opt">
        <ul>
            <li @mousedown="createStartNode">开始节点</li>
            <li @mousedown="createEndNode">结束节点</li>
            <li @mousedown="createFillNode" >填单节点</li>
            <li @mousedown="createApproveNode">审批节点</li>
        </ul>
    </div>

（开始节点和结束节点的自定义组件未写）

function createFillNode(){
    if(!lf.value) return
    const node = {
        id: setId(),
        type: 'theme-rect',
        properties:{ //动态设置
            color: '#576a95',
            bgc:'white',
            title:'填单节点'
        }
    }
    lf.value.dnd.startDrag(node);
}

function createApproveNode(){
    if(!lf.value) return
    const node = {
        id: setId(),
        type: 'theme-rect',
        properties:{ //动态设置
            color: '#ff943e',
            bgc:'white',
            title:'审批节点'
        }
    }
    lf.value.dnd.startDrag(node);
}

常用方法