html shape for @antv/x6
import { register } from "x6-html-shape";
register({
shape: "html-shape-for-react",
render: (node, graph, container) => {
const root = createRoot(container);
root.render(<CustomComponent node={node} />);
return () => root.unmount();
},
width: 100,
height: 40
});
const graph = new Graph({
container: this.container,
background: {
color: "#F2F7FA"
}
});
graph.addNode({
shape: "html-shape-for-react",
x: 100,
y: 200,
label: 'rect',
})
x6-html-shape-container
设置pointer-events: none
屏蔽这一层的交互,使得鼠标事件能穿透到svg内部节点。但是x6-html-shape-node
内部有一些元素是需要交互的,所以给节点打开forwardEvent
将节点内部的鼠标事件转发到对应的x6-node
内部export function forwardEvent(eventType, fromElement, toElement) {
fromElement.addEventListener(eventType, function (event) {
toElement.dispatchEvent(new event.constructor(event.type, event));
event.preventDefault();
event.stopPropagation();
});
}
import createRender from 'x6-html-shape/dist/react'
const render = createRender(Component)
register({
shape: 'react18-node',
render,
width: 100,
height: 40,
})
import createRender from 'x6-html-shape/dist/react17'
const render = createRender(Component)
register({
shape: 'react17-node',
render,
width: 100,
height: 40,
})
import { register } from 'x6-html-shape'
import createRender from 'x6-html-shape/dist/portal'
// 1. createRender using Component
const [render, Provider] = createRender(Component)
2. register node
register({
shape: 'react-portal-node',
render,
width: 100,
height: 40,
})
// 3.render Provider in react app before call graph.addNode
<Provider />
// 4. add Node
graph.addNode({
shape: 'react-portal-node',
id: 'node1',
label: 'node1',
x: 100,
y: 100,
})
import createRender from 'x6-html-shape/dist/vue'
const render = createRender(Component)
register({
shape: 'vue3-node',
render,
width: 100,
height: 40,
})
import createRender from 'x6-html-shape/dist/vue2'
const render = createRender(Component)
register({
shape: 'vue2-node',
render,
width: 100,
height: 40,
})
import { register } from 'x6-html-shape'
import createRender from 'x6-html-shape/dist/teleport'
// 1. createRender using Component
const [render, Provider] = createRender(Component)
2. register node
register({
shape: 'vue3-teleport-node',
render,
width: 100,
height: 40,
})
// 3.render Provider in react app before call graph.addNode
<Provider />
// 4. add Node
graph.addNode({
shape: 'vue3-teleport-node',
id: 'vue3-teleport-node',
label: 'vue3 teleport node',
x: 100,
y: 100,
})
import { register } from 'x6-html-shape'
import createRender from 'x6-html-shape/dist/svelte'
// 1. createRender using Component
const render = createRender(Component)
2. register node
register({
shape: 'svelte-node',
render,
width: 100,
height: 40,
})
// 3. add Node
graph.addNode({
shape: 'svelte-node',
label: 'svelte node',
x: 100,
y: 100,
})