https://github.com/lloydzhou/antv-x6-lit

参考@vue-lit实现的轻量级X6自定义组件
https://github.com/lloydzhou/antv-x6-lit

Last synced: 7 days ago
JSON representation

参考@vue-lit实现的轻量级X6自定义组件

• Host: GitHub
• URL: https://github.com/lloydzhou/antv-x6-lit
• Owner: lloydzhou
• Created: 2022-05-12T06:40:38.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-05-12T16:03:22.000Z (over 2 years ago)
• Last Synced: 2024-12-27T05:25:23.559Z (22 days ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# antv-x6-lit

参照[@vue/lit](https://www.npmjs.com/package/@vue/lit)写了一个可以在[@antv/x6](https://www.npmjs.com/package/@antv/x6)中作为HTML节点使用的组件

考虑到每一个节点本身并不复杂，所以使用一个非常轻量化的方案。

每一个组件设计参照@vue/lit，API与[Vue Composition API](https://vuejs.org/api/composition-api-setup.html#basic-usage)基本一致。

# demo

这里有一个在线的[DEMO](https://codesandbox.io/s/antv-x6-lit-html-node-ps1cem?file=/src/app.tsx)

模拟了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`
Hello ${state.count} ${props.data.time}!
`;

});

```


## 注册组件

```

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)

```