vue-x6 1.0.7 → 1.0.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.cjs +1 -1
- package/dist/index.js +103 -103
- package/package.json +1 -1
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"),P=require("@antv/x6"),B=require("@vue/runtime-core"),y=new Map;function p(s,c){return y.set(s,c),s}const G=s=>{let c;const r=new Map,n=(e,o,t,i)=>{if(!e)return;const a=r.get(e.id)||{};c&&clearTimeout(c),a[o]=i,r.set(e.id,{...a,[o]:i}),c=setTimeout(()=>{e._update(r.get(e.id)||{})},1)};return B.createRenderer({patchProp:n,insert:(e,o)=>e._insert&&e._insert(o),remove:e=>e&&e._remove(),createElement:(e,o,t,i)=>{const a=y.get(e);return a&&a(i,s)},createText:e=>{const o={text:e,_insert:t=>o.parentNode=t};return o},createComment:e=>{console.log("createComment",e)},setText:()=>null,setElementText:()=>null,parentNode:e=>e.parentNode,nextSibling(e){}},s)},M=s=>Object.entries(s).reduce((c,[r,n])=>(r.startsWith("on")?c.events[r.substr(2).toLowerCase()]=n:c.props[r]=n===""?!0:n,c),{props:{},events:{}}),N=(s,c,r)=>{const n=Object.entries(c).map(([e,o])=>{const t=i=>{const{cell:a}=i;s&&a.id===s.id&&o(i)};return r.on(`cell:${e}`,t),()=>r.off(`cell:${e}`,t)});return()=>n.forEach(e=>e())},I=l.defineComponent({inheritAttrs:!1,name:"Graph",setup(s,{attrs:c,slots:r,expose:n}){const{container:e}=s,{props:o={},events:t={}}=M(c),{width:i=800,height:a=600,...h}=o,f=l.ref(e),d=l.shallowReactive({graph:null}),v=l.ref([]),$=l.ref(new Map),k=(b,_="")=>b.filter(u=>u.type==l.Fragment||u.props).map(u=>{const{props:m={},type:T,children:O=[]}=u,{id:g}=m||{},x=P.StringExt.hashcode(JSON.stringify(m));let E=g&&`${_}:${T}:${g}`||g&&$.value.get(`${_}:${T}:${g}`)||$.value.get(`${_}:${x}`);return E||(E=P.StringExt.uuid(),!g&&T!=="Edge"&&$.value.set(g?`${_}:${g}`:`${_}:${x}`,E)),l.h(T,{...m,id:g||E,key:E},O&&k(O,E))}).filter(u=>u.key).reduce((u,m)=>u.concat(m.type===l.Fragment?m.children:m),[]);return n(d),l.onMounted(()=>{if(f.value){d.graph=new P.Graph({container:f.value,width:i,height:a,...h}),N(null,t,d.graph);const{render:b}=G(d.graph);b(l.h(()=>v.value),d.graph)}}),l.onUnmounted(()=>{d.graph&&d.graph.dispose()}),()=>{const b=r.default&&r.default()||[];return l.nextTick(()=>v.value=k(b)),l.createVNode("div",{style:{width:"100%",height:"100%",position:"relative"}},[!e&&l.createVNode("div",{ref:f},null)])}}}),S=(s,c,r,n)=>{const{props:e={},events:o={}}=M(r),t=s({shape:c,...e});if(t._remove=()=>{t._removeEvent(),n.model.removeCell(t)},t._update=i=>{const{props:a={},events:h={}}=M(i),d=s({shape:t.shape,...a,parent:void 0}).getProp();P.ObjectExt.isEqual(t.getProp(),d)||Object.keys(d).forEach(v=>{["id","parent","shape"].indexOf(v)===-1&&t.setProp(v,d[v])}),t._removeEvent(),t._removeEvent=N(t,h,n),n.trigger("updated:props",{cell:t})},n.model.addCell(t),t.parentNode=n,e.parent){const i=n.getCellById(e.parent);i&&i.addChild(t)}return t._removeEvent=N(t,o,n),l.nextTick(()=>t._update(e)),t},R=(s,c,r)=>{const{props:n={},events:e={}}=M(c),o=new s({enabled:!0,...n});return o._remove=()=>o.dispose(),o._update=()=>null,r.use(o),N(null,e,o),o},C=(s,c,r,n)=>{const{id:e}=r,o={id:e,cell:{id:""},props:r,_update:i=>o.props=i,_insert:i=>o.cell=i,_remove:()=>{o._update(null),n.off("updated:props",t)}},t=({cell:i})=>{if(o.cell.id==i.id){const a=s(i),h=a.findIndex(d=>d.id===e),f=h===-1?a.length:h;o.props?a.splice(f,1,o.props):a.splice(f,1),c(i,a)}};return n.on("updated:props",t),o},q=(s,c)=>C(r=>r.getLabels(),(r,n)=>r.setLabels([...n]),s,c),w=(s,c,r,n)=>{const{id:e,name:o}=r,t={id:e,name:o,props:r,cell:{id:""},_update:a=>t.props=a,_insert:a=>t.cell=a,_remove:()=>{t._update(),n.off("updated:props",i)}},i=({cell:a})=>{t.cell.id==a.id&&c(t,a,t.props)};return n.on("updated:props",i),t},L=(s,c,r)=>w(s,(n,e,o)=>{const t=e.attr("line");e.attr("line",{...t,[s]:o})},c,r),V=(s,c,r)=>w(s,(n,e,o)=>{const{port:t}=e,i=e.getPropByPath("ports/groups")||{};o?i[n.name]=t.parseGroup(o):delete i[n.name],e.setPropByPath("ports/groups",{...i})},c,r),A=(s,c)=>C(r=>r.getPorts(),(r,n)=>{r.setPropByPath("ports/items",n)},s,c),j=(s,c)=>C(r=>{const n=r.getTools();return n&&n.items?n.items:n||[]},(r,n)=>r.setTools(n),s,c),F=p("Node",S.bind(null,P.Node.create,"rect")),z=p("Edge",S.bind(null,P.Edge.create,"edge")),J=p("SourceMarker",L.bind(null,"sourceMarker")),U=p("TargetMarker",L.bind(null,"targetMarker")),W=p("PortGroup",V.bind(null,"group")),D=p("Label",q),H=p("Port",A),K=p("EdgeTool",j),Q=p("NodeTool",j);function X(s,c){return p(s,R.bind(null,c))}exports.Edge=z;exports.EdgeTool=K;exports.ElementOf=p;exports.ElementOfPlugin=X;exports.Graph=I;exports.Label=D;exports.Node=F;exports.NodeTool=Q;exports.Port=H;exports.PortGroup=W;exports.SourceMarker=J;exports.TargetMarker=U;exports.getRender=G;
|
package/dist/index.js
CHANGED
@@ -1,31 +1,31 @@
|
|
1
|
-
import { defineComponent as
|
2
|
-
import { Node as
|
1
|
+
import { defineComponent as A, ref as N, shallowReactive as V, onMounted as q, h as w, onUnmounted as z, nextTick as L, createVNode as x, Fragment as y } from "vue";
|
2
|
+
import { Node as F, Edge as J, Graph as U, ObjectExt as W, StringExt as O } from "@antv/x6";
|
3
3
|
import { createRenderer as D } from "@vue/runtime-core";
|
4
|
-
const
|
4
|
+
const S = /* @__PURE__ */ new Map();
|
5
5
|
function l(s, c) {
|
6
|
-
return
|
6
|
+
return S.set(s, c), s;
|
7
7
|
}
|
8
|
-
const
|
8
|
+
const H = (s) => {
|
9
9
|
let c;
|
10
10
|
const n = /* @__PURE__ */ new Map();
|
11
11
|
return D({
|
12
|
-
patchProp: (e,
|
12
|
+
patchProp: (e, o, t, a) => {
|
13
13
|
if (!e)
|
14
14
|
return;
|
15
15
|
const i = n.get(e.id) || {};
|
16
|
-
c && clearTimeout(c), i[
|
16
|
+
c && clearTimeout(c), i[o] = a, n.set(e.id, { ...i, [o]: a }), c = setTimeout(() => {
|
17
17
|
e._update(n.get(e.id) || {});
|
18
18
|
}, 1);
|
19
19
|
},
|
20
|
-
insert: (e,
|
20
|
+
insert: (e, o) => e._insert && e._insert(o),
|
21
21
|
remove: (e) => e && e._remove(),
|
22
|
-
createElement: (e,
|
23
|
-
const i =
|
22
|
+
createElement: (e, o, t, a) => {
|
23
|
+
const i = S.get(e);
|
24
24
|
return i && i(a, s);
|
25
25
|
},
|
26
26
|
createText: (e) => {
|
27
|
-
const
|
28
|
-
return
|
27
|
+
const o = { text: e, _insert: (t) => o.parentNode = t };
|
28
|
+
return o;
|
29
29
|
},
|
30
30
|
createComment: (e) => {
|
31
31
|
console.log("createComment", e);
|
@@ -41,151 +41,151 @@ const F = (s) => {
|
|
41
41
|
// cloneNode,
|
42
42
|
// insertStaticContent,
|
43
43
|
}, s);
|
44
|
-
},
|
44
|
+
}, b = (s) => Object.entries(s).reduce((c, [n, r]) => (n.startsWith("on") ? c.events[n.substr(2).toLowerCase()] = r : c.props[n] = r === "" ? !0 : r, c), {
|
45
45
|
props: {},
|
46
46
|
events: {}
|
47
|
-
}),
|
48
|
-
const
|
47
|
+
}), $ = (s, c, n) => {
|
48
|
+
const r = Object.entries(c).map(([e, o]) => {
|
49
49
|
const t = (a) => {
|
50
50
|
const {
|
51
51
|
cell: i
|
52
52
|
} = a;
|
53
|
-
s && i.id === s.id &&
|
53
|
+
s && i.id === s.id && o(a);
|
54
54
|
};
|
55
55
|
return n.on(`cell:${e}`, t), () => n.off(`cell:${e}`, t);
|
56
56
|
});
|
57
|
-
return () =>
|
58
|
-
},
|
57
|
+
return () => r.forEach((e) => e());
|
58
|
+
}, ne = /* @__PURE__ */ A({
|
59
59
|
inheritAttrs: !1,
|
60
60
|
name: "Graph",
|
61
61
|
setup(s, {
|
62
62
|
attrs: c,
|
63
63
|
slots: n,
|
64
|
-
expose:
|
64
|
+
expose: r
|
65
65
|
}) {
|
66
66
|
const {
|
67
67
|
container: e
|
68
68
|
} = s, {
|
69
|
-
props:
|
69
|
+
props: o = {},
|
70
70
|
events: t = {}
|
71
|
-
} =
|
71
|
+
} = b(c), {
|
72
72
|
width: a = 800,
|
73
73
|
height: i = 600,
|
74
|
-
...
|
75
|
-
} =
|
74
|
+
...g
|
75
|
+
} = o, m = N(e), p = V({
|
76
76
|
graph: null
|
77
|
-
}),
|
77
|
+
}), h = N([]), T = N(/* @__PURE__ */ new Map()), C = (E, _ = "") => E.filter((d) => d.type == y || d.props).map((d) => {
|
78
78
|
const {
|
79
|
-
props:
|
80
|
-
type:
|
79
|
+
props: f = {},
|
80
|
+
type: P,
|
81
81
|
children: G = []
|
82
|
-
} =
|
83
|
-
id:
|
84
|
-
} =
|
85
|
-
let
|
86
|
-
return
|
87
|
-
...
|
88
|
-
id:
|
89
|
-
key:
|
90
|
-
}, G && C(G,
|
91
|
-
}).filter((
|
92
|
-
return
|
93
|
-
if (
|
82
|
+
} = d, {
|
83
|
+
id: u
|
84
|
+
} = f || {}, k = O.hashcode(JSON.stringify(f));
|
85
|
+
let v = u && `${_}:${P}:${u}` || u && T.value.get(`${_}:${P}:${u}`) || T.value.get(`${_}:${k}`);
|
86
|
+
return v || (v = O.uuid(), !u && P !== "Edge" && T.value.set(u ? `${_}:${u}` : `${_}:${k}`, v)), w(P, {
|
87
|
+
...f,
|
88
|
+
id: u || v,
|
89
|
+
key: v
|
90
|
+
}, G && C(G, v));
|
91
|
+
}).filter((d) => d.key).reduce((d, f) => d.concat(f.type === y ? f.children : f), []);
|
92
|
+
return r(p), q(() => {
|
93
|
+
if (m.value) {
|
94
94
|
p.graph = new U({
|
95
|
-
container:
|
95
|
+
container: m.value,
|
96
96
|
width: a,
|
97
97
|
height: i,
|
98
|
-
...
|
99
|
-
}),
|
98
|
+
...g
|
99
|
+
}), $(null, t, p.graph);
|
100
100
|
const {
|
101
|
-
render:
|
102
|
-
} =
|
103
|
-
|
101
|
+
render: E
|
102
|
+
} = H(p.graph);
|
103
|
+
E(w(() => h.value), p.graph);
|
104
104
|
}
|
105
|
-
}),
|
105
|
+
}), z(() => {
|
106
106
|
p.graph && p.graph.dispose();
|
107
107
|
}), () => {
|
108
|
-
const
|
109
|
-
return L(() =>
|
108
|
+
const E = n.default && n.default() || [];
|
109
|
+
return L(() => h.value = C(E)), x("div", {
|
110
110
|
style: {
|
111
111
|
width: "100%",
|
112
112
|
height: "100%",
|
113
113
|
position: "relative"
|
114
114
|
}
|
115
115
|
}, [!e && x("div", {
|
116
|
-
ref:
|
116
|
+
ref: m
|
117
117
|
}, null)]);
|
118
118
|
};
|
119
119
|
}
|
120
|
-
}),
|
120
|
+
}), B = (s, c, n, r) => {
|
121
121
|
const {
|
122
122
|
props: e = {},
|
123
|
-
events:
|
124
|
-
} =
|
123
|
+
events: o = {}
|
124
|
+
} = b(n), t = s({
|
125
125
|
shape: c,
|
126
126
|
...e
|
127
127
|
});
|
128
128
|
if (t._remove = () => {
|
129
|
-
t._removeEvent(),
|
129
|
+
t._removeEvent(), r.model.removeCell(t);
|
130
130
|
}, t._update = (a) => {
|
131
131
|
const {
|
132
132
|
props: i = {},
|
133
|
-
events:
|
134
|
-
} =
|
133
|
+
events: g = {}
|
134
|
+
} = b(a), p = s({
|
135
135
|
shape: t.shape,
|
136
136
|
...i,
|
137
137
|
parent: void 0
|
138
138
|
}).getProp();
|
139
|
-
W.isEqual(t.getProp(), p) || Object.keys(p).forEach((
|
140
|
-
["id", "parent", "shape"].indexOf(
|
141
|
-
}), t._removeEvent(), t._removeEvent =
|
139
|
+
W.isEqual(t.getProp(), p) || Object.keys(p).forEach((h) => {
|
140
|
+
["id", "parent", "shape"].indexOf(h) === -1 && t.setProp(h, p[h]);
|
141
|
+
}), t._removeEvent(), t._removeEvent = $(t, g, r), r.trigger("updated:props", {
|
142
142
|
cell: t
|
143
143
|
});
|
144
|
-
},
|
145
|
-
const a =
|
144
|
+
}, r.model.addCell(t), t.parentNode = r, e.parent) {
|
145
|
+
const a = r.getCellById(e.parent);
|
146
146
|
a && a.addChild(t);
|
147
147
|
}
|
148
|
-
return t._removeEvent =
|
149
|
-
},
|
148
|
+
return t._removeEvent = $(t, o, r), L(() => t._update(e)), t;
|
149
|
+
}, K = (s, c, n) => {
|
150
150
|
const {
|
151
|
-
props:
|
151
|
+
props: r = {},
|
152
152
|
events: e = {}
|
153
|
-
} =
|
153
|
+
} = b(c), o = new s({
|
154
154
|
enabled: !0,
|
155
|
-
...
|
155
|
+
...r
|
156
156
|
});
|
157
|
-
return
|
158
|
-
}, M = (s, c, n,
|
157
|
+
return o._remove = () => o.dispose(), o._update = () => null, n.use(o), $(null, e, o), o;
|
158
|
+
}, M = (s, c, n, r) => {
|
159
159
|
const {
|
160
160
|
id: e
|
161
|
-
} = n,
|
161
|
+
} = n, o = {
|
162
162
|
id: e,
|
163
163
|
cell: {
|
164
164
|
id: ""
|
165
165
|
},
|
166
166
|
props: n,
|
167
167
|
// update只是将newProps存起来,实际执行逻辑在updated:props里面执行
|
168
|
-
_update: (a) =>
|
169
|
-
_insert: (a) =>
|
168
|
+
_update: (a) => o.props = a,
|
169
|
+
_insert: (a) => o.cell = a,
|
170
170
|
_remove: () => {
|
171
|
-
|
171
|
+
o._update(null), r.off("updated:props", t);
|
172
172
|
}
|
173
173
|
}, t = ({
|
174
174
|
cell: a
|
175
175
|
}) => {
|
176
|
-
if (
|
177
|
-
const i = s(a),
|
178
|
-
|
176
|
+
if (o.cell.id == a.id) {
|
177
|
+
const i = s(a), g = i.findIndex((p) => p.id === e), m = g === -1 ? i.length : g;
|
178
|
+
o.props ? i.splice(m, 1, o.props) : i.splice(m, 1), c(a, i);
|
179
179
|
}
|
180
180
|
};
|
181
|
-
return
|
182
|
-
},
|
181
|
+
return r.on("updated:props", t), o;
|
182
|
+
}, Q = (s, c) => M((n) => n.getLabels(), (n, r) => n.setLabels([...r]), s, c), I = (s, c, n, r) => {
|
183
183
|
const {
|
184
184
|
id: e,
|
185
|
-
name:
|
185
|
+
name: o
|
186
186
|
} = n, t = {
|
187
187
|
id: e,
|
188
|
-
name:
|
188
|
+
name: o,
|
189
189
|
props: n,
|
190
190
|
cell: {
|
191
191
|
id: ""
|
@@ -194,54 +194,54 @@ const F = (s) => {
|
|
194
194
|
_update: (i) => t.props = i,
|
195
195
|
_insert: (i) => t.cell = i,
|
196
196
|
_remove: () => {
|
197
|
-
t._update(),
|
197
|
+
t._update(), r.off("updated:props", a);
|
198
198
|
}
|
199
199
|
}, a = ({
|
200
200
|
cell: i
|
201
201
|
}) => {
|
202
202
|
t.cell.id == i.id && c(t, i, t.props);
|
203
203
|
};
|
204
|
-
return
|
205
|
-
},
|
204
|
+
return r.on("updated:props", a), t;
|
205
|
+
}, j = (s, c, n) => I(s, (r, e, o) => {
|
206
206
|
const t = e.attr("line");
|
207
207
|
e.attr("line", {
|
208
208
|
...t,
|
209
|
-
[s]:
|
209
|
+
[s]: o
|
210
210
|
});
|
211
|
-
}, c, n),
|
211
|
+
}, c, n), X = (s, c, n) => I(s, (r, e, o) => {
|
212
212
|
const {
|
213
213
|
port: t
|
214
214
|
} = e, a = e.getPropByPath("ports/groups") || {};
|
215
|
-
|
215
|
+
o ? a[r.name] = t.parseGroup(o) : delete a[r.name], e.setPropByPath("ports/groups", {
|
216
216
|
...a
|
217
217
|
});
|
218
|
-
}, c, n),
|
218
|
+
}, c, n), Y = (s, c) => M(
|
219
219
|
(n) => n.getPorts(),
|
220
220
|
// getPorts return ObjectExt.cloneDeep
|
221
|
-
(n,
|
222
|
-
n.setPropByPath("ports/items",
|
221
|
+
(n, r) => {
|
222
|
+
n.setPropByPath("ports/items", r);
|
223
223
|
},
|
224
224
|
s,
|
225
225
|
c
|
226
|
-
),
|
227
|
-
const
|
228
|
-
return
|
229
|
-
}, (n,
|
230
|
-
function
|
231
|
-
return l(s,
|
226
|
+
), R = (s, c) => M((n) => {
|
227
|
+
const r = n.getTools();
|
228
|
+
return r && r.items ? r.items : r || [];
|
229
|
+
}, (n, r) => n.setTools(r), s, c), re = l("Node", B.bind(null, F.create, "rect")), oe = l("Edge", B.bind(null, J.create, "edge")), se = l("SourceMarker", j.bind(null, "sourceMarker")), ce = l("TargetMarker", j.bind(null, "targetMarker")), ae = l("PortGroup", X.bind(null, "group")), ie = l("Label", Q), pe = l("Port", Y), le = l("EdgeTool", R), de = l("NodeTool", R);
|
230
|
+
function ue(s, c) {
|
231
|
+
return l(s, K.bind(null, c));
|
232
232
|
}
|
233
233
|
export {
|
234
234
|
oe as Edge,
|
235
|
-
|
235
|
+
le as EdgeTool,
|
236
236
|
l as ElementOf,
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
237
|
+
ue as ElementOfPlugin,
|
238
|
+
ne as Graph,
|
239
|
+
ie as Label,
|
240
|
+
re as Node,
|
241
|
+
de as NodeTool,
|
242
|
+
pe as Port,
|
243
|
+
ae as PortGroup,
|
244
|
+
se as SourceMarker,
|
245
|
+
ce as TargetMarker,
|
246
|
+
H as getRender
|
247
247
|
};
|