vue项目中 LogicFlow 如何添加自定义html节点 并修改对应样式

在Vue项目中使用LogicFlow时，可以通过自定义节点来添加自定义HTML元素。以下是如何添加自定义节点并修改其样式的步骤和示例代码：

1. 创建自定义节点类：

import { RectNode } from '@logicflow/core';
 
class CustomHtmlNode extends RectNode {
  render(view) {
    // 创建一个DOM元素
    const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
    const div = document.createElement('div');
    div.innerHTML = `
      <div style="background-color: #5c6bc0; color: white; padding: 10px;">
        自定义HTML内容
      </div>
    `;
    foreignObject.setAttribute('width', view.width);
    foreignObject.setAttribute('height', view.height);
    foreignObject.appendChild(div);
    // 将foreignObject添加到SVG
    this.foreignObject = foreignObject;
    return foreignObject;
  }
 
  update(newAttrs, oldAttrs) {
    // 更新节点样式
    if (newAttrs.size !== oldAttrs.size) {
      this.foreignObject.setAttribute('width', newAttrs.size.width);
      this.foreignObject.setAttribute('height', newAttrs.size.height);
    }
  }
}

2. 注册自定义节点：

import LogicFlow from '@logicflow/core';
import { CustomHtmlNode } from './CustomHtmlNode';
 
LogicFlow.use(CustomHtmlNode);
 
// 初始化LogicFlow实例
const lf = new LogicFlow({
  container: document.querySelector('#app'),
  grid: true,
  nodes: [
    {
      id: 'node1',
      type: 'custom-html',
      x: 100,
      y: 100,
      width: 120,
      height: 40,
    },
  ],
});

3. 在Vue组件中使用LogicFlow：

<template>
  <div id="app">
    <!-- LogicFlow 容器 -->
  </div>
</template>
 
<script>
// 引入LogicFlow初始化代码
</script>
 
<style>
/* 添加自定义节点的CSS样式 */
foreignObject div {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 更多样式 */
}
</style>

确保在Vue组件的<script>部分包含上述自定义节点的创建和注册代码，并在模板的<style>部分添加相应的CSS样式。这样，当你向LogicFlow图表中添加类型为custom-html的节点时，它将显示你定义的HTML内容和样式。