@antv/x6-vue-shape
Version:
X6 shape for rendering vue components.
112 lines • 3.58 kB
JavaScript
import { NodeView } from '@antv/x6';
import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi';
import { shapeMaps } from './registry';
import { isActive, connect, disconnect } from './teleport';
export class VueShapeView extends NodeView {
getComponentContainer() {
return this.selectors && this.selectors.foContent;
}
confirmUpdate(flag) {
const ret = super.confirmUpdate(flag);
return this.handleAction(ret, VueShapeView.action, () => {
this.renderVueComponent();
});
}
targetId() {
return `${this.graph.view.cid}:${this.cell.id}`;
}
renderVueComponent() {
this.unmountVueComponent();
const root = this.getComponentContainer();
const node = this.cell;
const graph = this.graph;
if (root) {
const { component } = shapeMaps[node.shape];
if (component) {
if (isVue2) {
const Vue = Vue2;
this.vm = new Vue({
el: root,
render(h) {
return h(component, { node, graph });
},
provide() {
return {
getNode: () => node,
getGraph: () => graph,
};
},
});
}
else if (isVue3) {
if (isActive()) {
connect(this.targetId(), component, root, node, graph);
}
else {
this.vm = createApp({
render() {
return h(component, { node, graph });
},
provide() {
return {
getNode: () => node,
getGraph: () => graph,
};
},
});
this.vm.mount(root);
}
}
}
}
}
unmountVueComponent() {
const root = this.getComponentContainer();
if (this.vm) {
isVue2 && this.vm.$destroy();
isVue3 && this.vm.unmount();
this.vm = null;
}
if (root) {
root.innerHTML = '';
}
return root;
}
onMouseDown(e, x, y) {
const target = e.target;
const tagName = target.tagName.toLowerCase();
if (tagName === 'input') {
const type = target.getAttribute('type');
if (type == null ||
[
'text',
'password',
'number',
'email',
'search',
'tel',
'url',
].includes(type)) {
return;
}
}
super.onMouseDown(e, x, y);
}
unmount() {
if (isActive()) {
disconnect(this.targetId());
}
this.unmountVueComponent();
super.unmount();
return this;
}
}
VueShapeView.action = 'vue';
VueShapeView.config({
bootstrap: [VueShapeView.action],
actions: {
component: VueShapeView.action,
},
});
NodeView.registry.register('vue-shape-view', VueShapeView, true);
//# sourceMappingURL=view.js.map