vue-x6 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +57 -0
- package/dist/Graph.d.ts +17 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +157 -0
- package/dist/render.d.ts +6 -0
- package/package.json +49 -0
package/README.md
ADDED
@@ -0,0 +1,57 @@
|
|
1
|
+
# vue-x6
|
2
|
+
|
3
|
+
<a href="https://www.npmjs.com/package/vue-x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/vue-x6.svg?style=flat-square"></a>
|
4
|
+
![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-x6?style=flat-square)
|
5
|
+
![npm](https://img.shields.io/npm/dm/vue-x6?style=flat-square)
|
6
|
+
<a href="/LICENSE"><img src="https://img.shields.io/github/license/lloydzhou/vue-x6?style=flat-square" alt="MIT License"></a>
|
7
|
+
|
8
|
+
## 提供自定义渲染器在vue中直接渲染x6画布
|
9
|
+
|
10
|
+
1. 使用`createRender`自定义渲染器
|
11
|
+
2. 只需抽象create/insert/update/remove既可
|
12
|
+
3. 最后渲染出来的instance就是Graph/Node/Edge对象,这些对象使用ref可以直接绑定
|
13
|
+
4. Graph内部将Children做进一步处理,生成带key的子组件(避免list diff导致元素id变化)
|
14
|
+
|
15
|
+
## 安装
|
16
|
+
```
|
17
|
+
npm install vue-x6
|
18
|
+
yarn add vue-x6
|
19
|
+
```
|
20
|
+
|
21
|
+
## demo
|
22
|
+
|
23
|
+
[online demo](https://codesandbox.io/s/vue-x6-demo-nhogrp?file=/src/App.js)
|
24
|
+
|
25
|
+
```
|
26
|
+
<script setup lang="ts">
|
27
|
+
import { ref } from 'vue'
|
28
|
+
import { Snapline } from "@antv/x6-plugin-snapline";
|
29
|
+
import { Graph, Node, Edge, ElementOfPlugin } from './lib/index'
|
30
|
+
const click = (e) => {
|
31
|
+
console.log(e)
|
32
|
+
}
|
33
|
+
const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)
|
34
|
+
const visible = ref(true)
|
35
|
+
const toggle = () => visible.value = !visible.value
|
36
|
+
</script>
|
37
|
+
|
38
|
+
<template>
|
39
|
+
<button @click="toggle">显示/隐藏node2</button>
|
40
|
+
<Graph grid>
|
41
|
+
<SnaplinePlugin key="Snapline" />
|
42
|
+
<Node id="1" label="node1" :x="100" :y="100" :width="80" :height="40" @click="click" />
|
43
|
+
<Node id="2" label="node2" :x="200" :y="200" :width="80" :height="40" @click="click" v-if="visible" />
|
44
|
+
<Node id="3" label="node3" :x="200" :y="100" :width="80" :height="40" parent="1" @click="click" />
|
45
|
+
<Edge source="1" target="2" @click="click" />
|
46
|
+
</Graph>
|
47
|
+
</template>
|
48
|
+
```
|
49
|
+
|
50
|
+
## TODO
|
51
|
+
- [x] 提供渲染器
|
52
|
+
- [x] Graph组件
|
53
|
+
- [x] Node/Edge组件
|
54
|
+
- [x] ElementOfPlugin函数方便封装官方plugin
|
55
|
+
- [ ] NodePort
|
56
|
+
- [ ] NodeTool/EdgeTool
|
57
|
+
|
package/dist/Graph.d.ts
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
import { Graph as X6Graph } from '@antv/x6';
|
2
|
+
import type { DefineComponent, Ref } from 'vue';
|
3
|
+
interface Props {
|
4
|
+
container?: Ref<HTMLElement>;
|
5
|
+
}
|
6
|
+
type Graph = DefineComponent<X6Graph.Options & Props, {
|
7
|
+
[key: string]: any;
|
8
|
+
}>;
|
9
|
+
export declare const Graph: Graph;
|
10
|
+
export declare const Node: DefineComponent<unknown, {
|
11
|
+
[key: string]: any;
|
12
|
+
}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
|
13
|
+
export declare const Edge: DefineComponent<unknown, {
|
14
|
+
[key: string]: any;
|
15
|
+
}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
|
16
|
+
export declare function ElementOfPlugin(name: any, type: any): any;
|
17
|
+
export {};
|
package/dist/index.cjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("vue"),v=require("@antv/x6"),y=require("@vue/runtime-core"),N=new Map;function E(e,n){return N.set(e,n),e}const T=function(e,n,o,s,r,i,t,a,u){e._update(n,o,s)},j=function(e,n,o,s){const r=N.get(e);return r&&r(s)},{render:O,createApp:w}=y.createRenderer({patchProp:T,insert:(e,n)=>e&&e._insert(n),remove:e=>e&&e._remove(),createElement:j,createText(e){const n={text:e,_insert:o=>n.parentNode=o};return n},createComment:()=>null,setText:()=>null,setElementText:()=>null,parentNode:e=>e.parentNode,nextSibling(e){}}),G=p.defineComponent({inheritAttrs:!1,name:"Graph",setup(e,{attrs:n,slots:o,expose:s}){const{container:r}=e,{width:i=800,height:t=600,...a}=n,u=p.ref(r),c=p.shallowReactive({graph:null}),d=p.ref(),h=p.ref(new Map);return s(c),p.onMounted(()=>{if(Object.keys(a).forEach(f=>a[f]===""&&(a[f]=!0)),u.value){c.graph=new v.Graph({container:u.value,width:i,height:t,...a});const f=p.h(()=>(d.value||[]).filter(l=>l.props).map(l=>{const{key:m,props:C={},type:P}=l,{id:g}=C;if(!m){const x=v.StringExt.hashcode(JSON.stringify(C));l.key=g||h.value.get(g)||h.value.get(x)||v.StringExt.uuid(),!g&&P!=="Edge"&&h.value.set(g||x,l.key)}return l}),c);O(f,c.graph)}}),p.onUnmounted(()=>{c.graph&&c.graph.dispose()}),()=>{const f=o.default&&o.default()||[];return p.nextTick(()=>d.value=f),p.createVNode("div",{style:{width:"100%",height:"100%",position:"relative"}},[!r&&p.createVNode("div",{ref:u},null)])}}}),_=e=>Object.entries(e).reduce((n,[o,s])=>(o.startsWith("on")?n.events[o.substr(2).toLowerCase()]=s:n.props[o]=s,n),{props:{},events:{}}),b=(e,n,o)=>{const s=Object.entries(n).map(([r,i])=>{const t=a=>{const{cell:u}=a;e&&u.id===e.id&&i(a)};return o.on(`cell:${r}`,t),()=>o.off(`cell:${r}`,t)});return()=>s.forEach(r=>r())},S=(e,n,o)=>{const{props:s={},events:r={}}=_(o);let i;const t=e(o);t._remove=()=>{t._removeEvent(),i.model.removeCell(t)},t._insert=c=>{if(i=c.addCell(t),t._removeEvent=b(t,r,i),t.parentNode=c,s.parent){const d=i.getCellById(s.parent);d&&d.addChild(t)}};let a,u={};return t._update=(c,d,h)=>{a&&clearTimeout(a),u[c]=h,a=setTimeout(()=>t._update_props(u),1)},t._update_props=c=>{const{props:d={},events:h={}}=_(c),l=e({shape:t.shape,...d,parent:void 0}).getProp();v.ObjectExt.isEqual(t.getProp(),l)||Object.keys(l).forEach(m=>{["id","parent","shape"].indexOf(m)===-1&&t.setProp(m,l[m])}),t._removeEvent(),t._removeEvent=b(t,h,i),c={}},t},M=(e,n)=>{const{props:o={},events:s={}}=_(n),r=new e({enabled:!0,...o});return r._insert=i=>{i.use(r),b(null,s,r)},r._remove=()=>r.dispose(),r._update=()=>null,r},V=E("Node",S.bind(null,v.Node.create,"rect")),q=E("Edge",S.bind(null,v.Edge.create,"edge"));function k(e,n){return E(e,M.bind(null,n))}exports.Edge=q;exports.ElementOf=E;exports.ElementOfPlugin=k;exports.Graph=G;exports.Node=V;exports.createApp=w;exports.render=O;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
@@ -0,0 +1,157 @@
|
|
1
|
+
import { defineComponent as P, ref as v, shallowReactive as S, onMounted as T, h as j, onUnmounted as y, nextTick as M, createVNode as x } from "vue";
|
2
|
+
import { Node as $, Edge as V, Graph as k, StringExt as N, ObjectExt as R } from "@antv/x6";
|
3
|
+
import { createRenderer as A } from "@vue/runtime-core";
|
4
|
+
const O = /* @__PURE__ */ new Map();
|
5
|
+
function _(e, n) {
|
6
|
+
return O.set(e, n), e;
|
7
|
+
}
|
8
|
+
const B = function(e, n, o, s, r, a, t, c, l) {
|
9
|
+
e._update(n, o, s);
|
10
|
+
}, I = function(e, n, o, s) {
|
11
|
+
const r = O.get(e);
|
12
|
+
return r && r(s);
|
13
|
+
}, { render: q, createApp: W } = A({
|
14
|
+
patchProp: B,
|
15
|
+
insert: (e, n) => e && e._insert(n),
|
16
|
+
remove: (e) => e && e._remove(),
|
17
|
+
createElement: I,
|
18
|
+
createText(e) {
|
19
|
+
const n = { text: e, _insert: (o) => n.parentNode = o };
|
20
|
+
return n;
|
21
|
+
},
|
22
|
+
createComment: () => null,
|
23
|
+
setText: () => null,
|
24
|
+
setElementText: () => null,
|
25
|
+
parentNode: (e) => e.parentNode,
|
26
|
+
nextSibling(e) {
|
27
|
+
}
|
28
|
+
// optional, DOM-specific
|
29
|
+
// querySelector,
|
30
|
+
// setScopeId,
|
31
|
+
// cloneNode,
|
32
|
+
// insertStaticContent,
|
33
|
+
}), D = /* @__PURE__ */ P({
|
34
|
+
inheritAttrs: !1,
|
35
|
+
name: "Graph",
|
36
|
+
setup(e, {
|
37
|
+
attrs: n,
|
38
|
+
slots: o,
|
39
|
+
expose: s
|
40
|
+
}) {
|
41
|
+
const {
|
42
|
+
container: r
|
43
|
+
} = e, {
|
44
|
+
width: a = 800,
|
45
|
+
height: t = 600,
|
46
|
+
...c
|
47
|
+
} = n, l = v(r), p = S({
|
48
|
+
graph: null
|
49
|
+
}), u = v(), d = v(/* @__PURE__ */ new Map());
|
50
|
+
return s(p), T(() => {
|
51
|
+
if (Object.keys(c).forEach((h) => c[h] === "" && (c[h] = !0)), l.value) {
|
52
|
+
p.graph = new k({
|
53
|
+
container: l.value,
|
54
|
+
width: a,
|
55
|
+
height: t,
|
56
|
+
...c
|
57
|
+
});
|
58
|
+
const h = j(() => (u.value || []).filter((i) => i.props).map((i) => {
|
59
|
+
const {
|
60
|
+
key: f,
|
61
|
+
props: b = {},
|
62
|
+
type: G
|
63
|
+
} = i, {
|
64
|
+
id: m
|
65
|
+
} = b;
|
66
|
+
if (!f) {
|
67
|
+
const C = N.hashcode(JSON.stringify(b));
|
68
|
+
i.key = m || d.value.get(m) || d.value.get(C) || N.uuid(), !m && G !== "Edge" && d.value.set(m || C, i.key);
|
69
|
+
}
|
70
|
+
return i;
|
71
|
+
}), p);
|
72
|
+
q(h, p.graph);
|
73
|
+
}
|
74
|
+
}), y(() => {
|
75
|
+
p.graph && p.graph.dispose();
|
76
|
+
}), () => {
|
77
|
+
const h = o.default && o.default() || [];
|
78
|
+
return M(() => u.value = h), x("div", {
|
79
|
+
style: {
|
80
|
+
width: "100%",
|
81
|
+
height: "100%",
|
82
|
+
position: "relative"
|
83
|
+
}
|
84
|
+
}, [!r && x("div", {
|
85
|
+
ref: l
|
86
|
+
}, null)]);
|
87
|
+
};
|
88
|
+
}
|
89
|
+
}), g = (e) => Object.entries(e).reduce((n, [o, s]) => (o.startsWith("on") ? n.events[o.substr(2).toLowerCase()] = s : n.props[o] = s, n), {
|
90
|
+
props: {},
|
91
|
+
events: {}
|
92
|
+
}), E = (e, n, o) => {
|
93
|
+
const s = Object.entries(n).map(([r, a]) => {
|
94
|
+
const t = (c) => {
|
95
|
+
const {
|
96
|
+
cell: l
|
97
|
+
} = c;
|
98
|
+
e && l.id === e.id && a(c);
|
99
|
+
};
|
100
|
+
return o.on(`cell:${r}`, t), () => o.off(`cell:${r}`, t);
|
101
|
+
});
|
102
|
+
return () => s.forEach((r) => r());
|
103
|
+
}, w = (e, n, o) => {
|
104
|
+
const {
|
105
|
+
props: s = {},
|
106
|
+
events: r = {}
|
107
|
+
} = g(o);
|
108
|
+
let a;
|
109
|
+
const t = e(o);
|
110
|
+
t._remove = () => {
|
111
|
+
t._removeEvent(), a.model.removeCell(t);
|
112
|
+
}, t._insert = (p) => {
|
113
|
+
if (a = p.addCell(t), t._removeEvent = E(t, r, a), t.parentNode = p, s.parent) {
|
114
|
+
const u = a.getCellById(s.parent);
|
115
|
+
u && u.addChild(t);
|
116
|
+
}
|
117
|
+
};
|
118
|
+
let c, l = {};
|
119
|
+
return t._update = (p, u, d) => {
|
120
|
+
c && clearTimeout(c), l[p] = d, c = setTimeout(() => t._update_props(l), 1);
|
121
|
+
}, t._update_props = (p) => {
|
122
|
+
const {
|
123
|
+
props: u = {},
|
124
|
+
events: d = {}
|
125
|
+
} = g(p), i = e({
|
126
|
+
shape: t.shape,
|
127
|
+
...u,
|
128
|
+
parent: void 0
|
129
|
+
}).getProp();
|
130
|
+
R.isEqual(t.getProp(), i) || Object.keys(i).forEach((f) => {
|
131
|
+
["id", "parent", "shape"].indexOf(f) === -1 && t.setProp(f, i[f]);
|
132
|
+
}), t._removeEvent(), t._removeEvent = E(t, d, a), p = {};
|
133
|
+
}, t;
|
134
|
+
}, z = (e, n) => {
|
135
|
+
const {
|
136
|
+
props: o = {},
|
137
|
+
events: s = {}
|
138
|
+
} = g(n), r = new e({
|
139
|
+
enabled: !0,
|
140
|
+
...o
|
141
|
+
});
|
142
|
+
return r._insert = (a) => {
|
143
|
+
a.use(r), E(null, s, r);
|
144
|
+
}, r._remove = () => r.dispose(), r._update = () => null, r;
|
145
|
+
}, F = _("Node", w.bind(null, $.create, "rect")), H = _("Edge", w.bind(null, V.create, "edge"));
|
146
|
+
function K(e, n) {
|
147
|
+
return _(e, z.bind(null, n));
|
148
|
+
}
|
149
|
+
export {
|
150
|
+
H as Edge,
|
151
|
+
_ as ElementOf,
|
152
|
+
K as ElementOfPlugin,
|
153
|
+
D as Graph,
|
154
|
+
F as Node,
|
155
|
+
W as createApp,
|
156
|
+
q as render
|
157
|
+
};
|
package/dist/render.d.ts
ADDED
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { DefineComponent } from 'vue';
|
2
|
+
export declare function ElementOf<Element, T extends string>(type: T, Ctor: () => any): DefineComponent<Element, {
|
3
|
+
[key: string]: any;
|
4
|
+
}>;
|
5
|
+
declare const render: import("vue").RootRenderFunction<any>, createApp: import("vue").CreateAppFunction<any>;
|
6
|
+
export { render, createApp };
|
package/package.json
ADDED
@@ -0,0 +1,49 @@
|
|
1
|
+
{
|
2
|
+
"name": "vue-x6",
|
3
|
+
"version": "1.0.0",
|
4
|
+
"type": "module",
|
5
|
+
"scripts": {
|
6
|
+
"dev": "vite",
|
7
|
+
"build": "run-p type-check build-only tsd",
|
8
|
+
"build-only": "vite build",
|
9
|
+
"type-check": "vue-tsc --noEmit",
|
10
|
+
"tsd": "tsc -d --skipLibCheck --emitDeclarationOnly --jsx preserve --esModuleInterop --declarationDir dist src/lib/index.ts",
|
11
|
+
"preview": "vite preview"
|
12
|
+
},
|
13
|
+
"files": [
|
14
|
+
"dist"
|
15
|
+
],
|
16
|
+
"keywords": [
|
17
|
+
"antv",
|
18
|
+
"x6",
|
19
|
+
"graph",
|
20
|
+
"svg",
|
21
|
+
"react",
|
22
|
+
"typescript"
|
23
|
+
],
|
24
|
+
"main": "./dist/index.cjs",
|
25
|
+
"module": "./dist/index.js",
|
26
|
+
"types": "./dist/index.d.ts",
|
27
|
+
"author": "lloydzhou",
|
28
|
+
"license": "MIT",
|
29
|
+
"homepage": "https://github.com/lloydzhou/vue-x6",
|
30
|
+
"repository": {
|
31
|
+
"type": "git",
|
32
|
+
"url": "git@github.com:lloydzhou/vue-x6.git"
|
33
|
+
},
|
34
|
+
"peerDependencies": {
|
35
|
+
"@antv/x6": "^2.5.1",
|
36
|
+
"vue": "^3.2.45"
|
37
|
+
},
|
38
|
+
"devDependencies": {
|
39
|
+
"@antv/x6": "^2.5.1",
|
40
|
+
"@antv/x6-plugin-snapline": "^2.1.6",
|
41
|
+
"@vitejs/plugin-vue": "^4.0.0",
|
42
|
+
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
43
|
+
"npm-run-all": "^4.1.5",
|
44
|
+
"typescript": "^4.9.3",
|
45
|
+
"vite": "^4.1.0",
|
46
|
+
"vue": "^3.2.45",
|
47
|
+
"vue-tsc": "^1.0.24"
|
48
|
+
}
|
49
|
+
}
|