logicflow vue 添加节点

要在 LogicFlow Vue 中添加一个节点，可以按照以下步骤操作：

1.在 Vue 组件中引入 LogicFlow。例如：

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

2.在 Vue 组件中创建一个 LogicFlow 实例。例如：

mounted() {
  this.lf = new LogicFlow({
    container: document.querySelector('#lf-container'),
    ...
  });
},

3.定义一个节点类型并将其注册到 LogicFlow 实例中。例如：

const nodeType = 'rect';
LogicFlow.register(nodeType, {
  draw(model, group) {
    const { width, height } = model;
    return group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width,
        height,
        fill: '#fff',
        stroke: '#000',
        radius: 4,
      },
    });
  },
});

4.在 LogicFlow 实例中添加一个节点。例如：

const node = {
  id: 'node1',
  type: 'rect',
  x: 100,
  y: 100,
  width: 80,
  height: 40,
};
this.lf.add(node);

通过这些步骤，你就可以在 LogicFlow Vue 中添加一个节点了。