antv-x6-lit

参照@vue/lit写了一个可以在@antv/x6中作为HTML节点使用的组件

考虑到每一个节点本身并不复杂，所以使用一个非常轻量化的方案。 每一个组件设计参照@vue/lit，API与Vue Composition API基本一致。

demo

这里有一个在线的DEMO 模拟了onBeforeMount/onMounted/onBeforeUpdate/onUpdated/onUnmounted整个生命周期

定义一个组件

import {
  defineComponent,
  onMounted,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  html,
  reactive
} from "antv-x6-lit";

const component = defineComponent((props: any) => {
  const state = reactive({ count: 0 });
  onMounted(() => {
    const { graph, node, data } = props
    console.log("onMounted", graph, node, data);
    state.count++;
  });
  onBeforeMount(() => {
    console.log("onBeforeMount");
    state.count++;
  });
  onBeforeUpdate(() => {
    console.log("onBeforeUpdate");
  });
  onUpdated(() => {
    console.log("onUpdated");
  });
  onUnmounted(() => {
    console.log("onUnmounted");
  });
  return () => html`<div>Hello ${state.count} ${props.data.time}!</div>`;
});

注册组件

Graph.registerNode(
  "lit-html",
  {
    inherit: "html",
    width: 300,
    height: 40,
    html: component
  },
  true
);

向画布添加组件

const target = graph.addNode({
  x: 180,
  y: 160,
  width: 100,
  height: 40,
  data: {
    time: new Date().toString()
  },
  shape: "lit-html",
});

更新组件

const interval = setInterval(() => {
  // 更新组件data数据
  target.setData({ time: new Date().toString()})
}, 4000)
setTimeout(() => {
  clearInterval(interval)
  // 移除组件，触发组件onUnmounted事件
  graph.removeCells([target], true)
}, 10000)