0.4.3 • Published 4 months ago
x6-html-shape v0.4.3
x6-html-shape
html shape for @antv/x6
online demo
example
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',
})
事件穿透
- 由于DOM层级关系,html-shape实现的节点总是在svg上层
- 通过给
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();
});
}
react
react18
import createRender from 'x6-html-shape/dist/react'
const render = createRender(Component)
register({
shape: 'react18-node',
render,
width: 100,
height: 40,
})
react17
import createRender from 'x6-html-shape/dist/react17'
const render = createRender(Component)
register({
shape: 'react17-node',
render,
width: 100,
height: 40,
})
react-portal
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,
})
vue
vue3
import createRender from 'x6-html-shape/dist/vue'
const render = createRender(Component)
register({
shape: 'vue3-node',
render,
width: 100,
height: 40,
})
vue2
import createRender from 'x6-html-shape/dist/vue2'
const render = createRender(Component)
register({
shape: 'vue2-node',
render,
width: 100,
height: 40,
})
vue3-teleport
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,
})
svelte
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,
})
0.4.3
4 months ago
0.4.2
5 months ago
0.4.1
12 months ago
0.4.0
12 months ago
0.3.9
12 months ago
0.3.8
12 months ago
0.3.7
12 months ago
0.3.6
12 months ago
0.3.5
12 months ago
0.3.4
12 months ago
0.3.3
12 months ago
0.3.2
12 months ago
0.3.1
12 months ago
0.3.0
12 months ago
0.2.8
12 months ago
0.2.7
12 months ago
0.2.6
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.0
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago