logic-flow自定义节点

目前基于需要选择任一一种基本节点类型（如rect、circle、polygon等）来继承

新建节点文件（例：CustomCircle.js）

// CustomCircle.js
import { CircleNode, CircleNodeModel } from "@logicflow/core";
// 继承基础节点
class customCircleModel extends CircleNodeModel {
    // 定义此注册类型节点的样式（获取样式相关的方法）
}
class customCircleView extends CircleNode {
    // 定义此注册类型节点svg dom（getShape定义更复杂的节点外观）
}
export default {
    type: "CustomCircleNode",
    view: customCircleView,
    model: customCircleModel
};

引入注册+使用

<template>
    <el-container>
        <div class="container" ref="container"></div>
    </el-container>
</template>

<script>
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
// 1.引入自定义节点
import CustomCircleNode from '../components/CustomCircle.js';

export default {
    data() {
        return {
            nodes: [
                {
                    id: '1',
                    // 3.使用自定义节点
                    type: 'CustomCircleNode',
                    x: 100,
                    y: 100,
                }
            ],
        };
    },
    mounted() {
        this.lf = new LogicFlow({
            container: this.$refs.container,
            grid: true,
        });
        // 2.注册自定义节点
        this.lf.register(CustomCircleNode);
        this.lf.render({
            nodes: this.nodes,
            edges: this.edges,
        });
    },
};
</script>

<style>
.container {
    width: 1000px;
    height: 500px;
}
</style>