vue-x6 1.0.0 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -0
- package/README.md +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.js +65 -67
- package/dist/render.d.ts +1 -1
- package/package.json +1 -1
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2023 Lloyd Zhou
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
@@ -20,13 +20,13 @@ yarn add vue-x6
|
|
20
20
|
|
21
21
|
## demo
|
22
22
|
|
23
|
-
[online demo](https://codesandbox.io/
|
23
|
+
[online demo](https://codesandbox.io/p/github/lloydzhou/vue-x6/master?file=%2Fsrc%2FApp.vue)
|
24
24
|
|
25
25
|
```
|
26
26
|
<script setup lang="ts">
|
27
27
|
import { ref } from 'vue'
|
28
28
|
import { Snapline } from "@antv/x6-plugin-snapline";
|
29
|
-
import { Graph, Node, Edge, ElementOfPlugin } from '
|
29
|
+
import { Graph, Node, Edge, ElementOfPlugin } from 'vue-x6'
|
30
30
|
const click = (e) => {
|
31
31
|
console.log(e)
|
32
32
|
}
|
package/dist/index.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),v=require("@antv/x6"),S=require("@vue/runtime-core"),O=new Map;function E(e,n){return O.set(e,n),e}const{render:C,createApp:T}=S.createRenderer({patchProp:(e,n,o,s)=>e._update(n,o,s),insert:(e,n)=>e&&e._insert(n),remove:e=>e&&e._remove(),createElement:(e,n,o,s)=>{const r=O.get(e);return r&&r(s)},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){}}),j=l.defineComponent({inheritAttrs:!1,name:"Graph",setup(e,{attrs:n,slots:o,expose:s}){const{container:r}=e,{width:a=800,height:t=600,...c}=n,u=l.ref(r),i=l.shallowReactive({graph:null}),d=l.ref(),h=l.ref(new Map);return s(i),l.onMounted(()=>{if(Object.keys(c).forEach(f=>c[f]===""&&(c[f]=!0)),u.value){i.graph=new v.Graph({container:u.value,width:a,height:t,...c});const f=l.h(()=>(d.value||[]).filter(p=>p.props).map(p=>{const{key:g,props:x={},type:y}=p,{id:m}=x;if(!g){const N=v.StringExt.hashcode(JSON.stringify(x));p.key=m||h.value.get(m)||h.value.get(N)||v.StringExt.uuid(),!m&&y!=="Edge"&&h.value.set(m||N,p.key)}return p}),i);C(f,i.graph)}}),l.onUnmounted(()=>{i.graph&&i.graph.dispose()}),()=>{const f=o.default&&o.default()||[];return l.nextTick(()=>d.value=f),l.createVNode("div",{style:{width:"100%",height:"100%",position:"relative"}},[!r&&l.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,a])=>{const t=c=>{const{cell:u}=c;e&&u.id===e.id&&a(c)};return o.on(`cell:${r}`,t),()=>o.off(`cell:${r}`,t)});return()=>s.forEach(r=>r())},P=(e,n,o)=>{const{props:s={},events:r={}}=_(o);let a;const t=e(o);t._remove=()=>{t._removeEvent(),a.model.removeCell(t)},t._insert=i=>{if(a=i.addCell(t),t._removeEvent=b(t,r,a),t.parentNode=i,s.parent){const d=a.getCellById(s.parent);d&&d.addChild(t)}};let c,u={};return t._update=(i,d,h)=>{c&&clearTimeout(c),u[i]=h,c=setTimeout(()=>t._update_props(u),1)},t._update_props=i=>{const{props:d={},events:h={}}=_(i),p=e({shape:t.shape,...d,parent:void 0}).getProp();v.ObjectExt.isEqual(t.getProp(),p)||Object.keys(p).forEach(g=>{["id","parent","shape"].indexOf(g)===-1&&t.setProp(g,p[g])}),t._removeEvent(),t._removeEvent=b(t,h,a),i={}},t},w=(e,n)=>{const{props:o={},events:s={}}=_(n),r=new e({enabled:!0,...o});return r._insert=a=>{a.use(r),b(null,s,r)},r._remove=()=>r.dispose(),r._update=()=>null,r},M=E("Node",P.bind(null,v.Node.create,"rect")),G=E("Edge",P.bind(null,v.Edge.create,"edge"));function q(e,n){return E(e,w.bind(null,n))}exports.Edge=G;exports.ElementOf=E;exports.ElementOfPlugin=q;exports.Graph=j;exports.Node=M;exports.createApp=T;exports.render=C;
|
package/dist/index.js
CHANGED
@@ -1,21 +1,19 @@
|
|
1
|
-
import { defineComponent as
|
2
|
-
import { Node as
|
1
|
+
import { defineComponent as T, ref as m, shallowReactive as j, onMounted as y, h as G, onUnmounted as M, nextTick as $, createVNode as N } from "vue";
|
2
|
+
import { Node as S, Edge as k, Graph as R, StringExt as C, ObjectExt as V } from "@antv/x6";
|
3
3
|
import { createRenderer as A } from "@vue/runtime-core";
|
4
4
|
const O = /* @__PURE__ */ new Map();
|
5
5
|
function _(e, n) {
|
6
6
|
return O.set(e, n), e;
|
7
7
|
}
|
8
|
-
const
|
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,
|
8
|
+
const { render: B, createApp: L } = A({
|
9
|
+
patchProp: (e, n, o, s) => e._update(n, o, s),
|
15
10
|
insert: (e, n) => e && e._insert(n),
|
16
11
|
remove: (e) => e && e._remove(),
|
17
|
-
createElement:
|
18
|
-
|
12
|
+
createElement: (e, n, o, s) => {
|
13
|
+
const r = O.get(e);
|
14
|
+
return r && r(s);
|
15
|
+
},
|
16
|
+
createText: (e) => {
|
19
17
|
const n = { text: e, _insert: (o) => n.parentNode = o };
|
20
18
|
return n;
|
21
19
|
},
|
@@ -30,7 +28,7 @@ const B = function(e, n, o, s, r, a, t, c, l) {
|
|
30
28
|
// setScopeId,
|
31
29
|
// cloneNode,
|
32
30
|
// insertStaticContent,
|
33
|
-
}),
|
31
|
+
}), U = /* @__PURE__ */ T({
|
34
32
|
inheritAttrs: !1,
|
35
33
|
name: "Graph",
|
36
34
|
setup(e, {
|
@@ -41,47 +39,47 @@ const B = function(e, n, o, s, r, a, t, c, l) {
|
|
41
39
|
const {
|
42
40
|
container: r
|
43
41
|
} = e, {
|
44
|
-
width:
|
42
|
+
width: p = 800,
|
45
43
|
height: t = 600,
|
46
|
-
...
|
47
|
-
} = n, l =
|
44
|
+
...i
|
45
|
+
} = n, l = m(r), a = j({
|
48
46
|
graph: null
|
49
|
-
}),
|
50
|
-
return s(
|
51
|
-
if (Object.keys(
|
52
|
-
|
47
|
+
}), d = m(), u = m(/* @__PURE__ */ new Map());
|
48
|
+
return s(a), y(() => {
|
49
|
+
if (Object.keys(i).forEach((h) => i[h] === "" && (i[h] = !0)), l.value) {
|
50
|
+
a.graph = new R({
|
53
51
|
container: l.value,
|
54
|
-
width:
|
52
|
+
width: p,
|
55
53
|
height: t,
|
56
|
-
...
|
54
|
+
...i
|
57
55
|
});
|
58
|
-
const h =
|
56
|
+
const h = G(() => (d.value || []).filter((c) => c.props).map((c) => {
|
59
57
|
const {
|
60
58
|
key: f,
|
61
59
|
props: b = {},
|
62
|
-
type:
|
63
|
-
} =
|
64
|
-
id:
|
60
|
+
type: P
|
61
|
+
} = c, {
|
62
|
+
id: v
|
65
63
|
} = b;
|
66
64
|
if (!f) {
|
67
|
-
const
|
68
|
-
|
65
|
+
const x = C.hashcode(JSON.stringify(b));
|
66
|
+
c.key = v || u.value.get(v) || u.value.get(x) || C.uuid(), !v && P !== "Edge" && u.value.set(v || x, c.key);
|
69
67
|
}
|
70
|
-
return
|
71
|
-
}),
|
72
|
-
|
68
|
+
return c;
|
69
|
+
}), a);
|
70
|
+
B(h, a.graph);
|
73
71
|
}
|
74
|
-
}),
|
75
|
-
|
72
|
+
}), M(() => {
|
73
|
+
a.graph && a.graph.dispose();
|
76
74
|
}), () => {
|
77
75
|
const h = o.default && o.default() || [];
|
78
|
-
return
|
76
|
+
return $(() => d.value = h), N("div", {
|
79
77
|
style: {
|
80
78
|
width: "100%",
|
81
79
|
height: "100%",
|
82
80
|
position: "relative"
|
83
81
|
}
|
84
|
-
}, [!r &&
|
82
|
+
}, [!r && N("div", {
|
85
83
|
ref: l
|
86
84
|
}, null)]);
|
87
85
|
};
|
@@ -90,12 +88,12 @@ const B = function(e, n, o, s, r, a, t, c, l) {
|
|
90
88
|
props: {},
|
91
89
|
events: {}
|
92
90
|
}), E = (e, n, o) => {
|
93
|
-
const s = Object.entries(n).map(([r,
|
94
|
-
const t = (
|
91
|
+
const s = Object.entries(n).map(([r, p]) => {
|
92
|
+
const t = (i) => {
|
95
93
|
const {
|
96
94
|
cell: l
|
97
|
-
} =
|
98
|
-
e && l.id === e.id &&
|
95
|
+
} = i;
|
96
|
+
e && l.id === e.id && p(i);
|
99
97
|
};
|
100
98
|
return o.on(`cell:${r}`, t), () => o.off(`cell:${r}`, t);
|
101
99
|
});
|
@@ -105,33 +103,33 @@ const B = function(e, n, o, s, r, a, t, c, l) {
|
|
105
103
|
props: s = {},
|
106
104
|
events: r = {}
|
107
105
|
} = g(o);
|
108
|
-
let
|
106
|
+
let p;
|
109
107
|
const t = e(o);
|
110
108
|
t._remove = () => {
|
111
|
-
t._removeEvent(),
|
112
|
-
}, t._insert = (
|
113
|
-
if (
|
114
|
-
const
|
115
|
-
|
109
|
+
t._removeEvent(), p.model.removeCell(t);
|
110
|
+
}, t._insert = (a) => {
|
111
|
+
if (p = a.addCell(t), t._removeEvent = E(t, r, p), t.parentNode = a, s.parent) {
|
112
|
+
const d = p.getCellById(s.parent);
|
113
|
+
d && d.addChild(t);
|
116
114
|
}
|
117
115
|
};
|
118
|
-
let
|
119
|
-
return t._update = (
|
120
|
-
|
121
|
-
}, t._update_props = (
|
116
|
+
let i, l = {};
|
117
|
+
return t._update = (a, d, u) => {
|
118
|
+
i && clearTimeout(i), l[a] = u, i = setTimeout(() => t._update_props(l), 1);
|
119
|
+
}, t._update_props = (a) => {
|
122
120
|
const {
|
123
|
-
props:
|
124
|
-
events:
|
125
|
-
} = g(
|
121
|
+
props: d = {},
|
122
|
+
events: u = {}
|
123
|
+
} = g(a), c = e({
|
126
124
|
shape: t.shape,
|
127
|
-
...
|
125
|
+
...d,
|
128
126
|
parent: void 0
|
129
127
|
}).getProp();
|
130
|
-
|
131
|
-
["id", "parent", "shape"].indexOf(f) === -1 && t.setProp(f,
|
132
|
-
}), t._removeEvent(), t._removeEvent = E(t,
|
128
|
+
V.isEqual(t.getProp(), c) || Object.keys(c).forEach((f) => {
|
129
|
+
["id", "parent", "shape"].indexOf(f) === -1 && t.setProp(f, c[f]);
|
130
|
+
}), t._removeEvent(), t._removeEvent = E(t, u, p), a = {};
|
133
131
|
}, t;
|
134
|
-
},
|
132
|
+
}, I = (e, n) => {
|
135
133
|
const {
|
136
134
|
props: o = {},
|
137
135
|
events: s = {}
|
@@ -139,19 +137,19 @@ const B = function(e, n, o, s, r, a, t, c, l) {
|
|
139
137
|
enabled: !0,
|
140
138
|
...o
|
141
139
|
});
|
142
|
-
return r._insert = (
|
143
|
-
|
140
|
+
return r._insert = (p) => {
|
141
|
+
p.use(r), E(null, s, r);
|
144
142
|
}, r._remove = () => r.dispose(), r._update = () => null, r;
|
145
|
-
},
|
146
|
-
function
|
147
|
-
return _(e,
|
143
|
+
}, W = _("Node", w.bind(null, S.create, "rect")), D = _("Edge", w.bind(null, k.create, "edge"));
|
144
|
+
function F(e, n) {
|
145
|
+
return _(e, I.bind(null, n));
|
148
146
|
}
|
149
147
|
export {
|
150
|
-
|
148
|
+
D as Edge,
|
151
149
|
_ as ElementOf,
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
150
|
+
F as ElementOfPlugin,
|
151
|
+
U as Graph,
|
152
|
+
W as Node,
|
153
|
+
L as createApp,
|
154
|
+
B as render
|
157
155
|
};
|
package/dist/render.d.ts
CHANGED
@@ -2,5 +2,5 @@ import type { DefineComponent } from 'vue';
|
|
2
2
|
export declare function ElementOf<Element, T extends string>(type: T, Ctor: () => any): DefineComponent<Element, {
|
3
3
|
[key: string]: any;
|
4
4
|
}>;
|
5
|
-
declare const render: import("vue").RootRenderFunction<
|
5
|
+
declare const render: import("vue").RootRenderFunction<import("vue").RendererElement>, createApp: import("vue").CreateAppFunction<import("vue").RendererElement>;
|
6
6
|
export { render, createApp };
|