vue-x6 1.0.5 → 1.0.6
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 +21 -18
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),h=require("@antv/x6"),B=require("@vue/runtime-core"),G=new Map;function p(s,c){return G.set(s,c),s}const S=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=G.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)},T=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:{}}),M=(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=d.defineComponent({inheritAttrs:!1,name:"Graph",setup(s,{attrs:c,slots:r,expose:n}){const{container:e}=s,{props:o={},events:t={}}=T(c),{width:i=800,height:a=600,...f}=o,g=d.ref(e),l=d.shallowReactive({graph:null}),m=d.ref([]),N=d.ref(new Map),k=(E,P="")=>E.filter(b=>b.props).map(b=>{const{props:$={},type:_,children:O=[]}=b,{id:u}=$,x=h.StringExt.hashcode(JSON.stringify($));let v=u&&`${P}:${_}:${u}`||u&&N.value.get(`${P}:${_}:${u}`)||N.value.get(`${P}:${x}`);return v||(v=h.StringExt.uuid(),!u&&_!=="Edge"&&N.value.set(u?`${P}:${u}`:`${P}:${x}`,v)),d.h(_,{...$,id:u||v,key:v},O&&k(O,v))}).filter(b=>b.key);return n(l),d.onMounted(()=>{if(g.value){l.graph=new h.Graph({container:g.value,width:i,height:a,...f}),M(null,t,l.graph);const{render:E}=S(l.graph);E(d.h(()=>m.value),l.graph)}}),d.onUnmounted(()=>{l.graph&&l.graph.dispose()}),()=>{const E=r.default&&r.default()||[];return d.nextTick(()=>m.value=k(E)),d.createVNode("div",{style:{width:"100%",height:"100%",position:"relative"}},[!e&&d.createVNode("div",{ref:g},null)])}}}),w=(s,c,r,n)=>{const{props:e={},events:o={}}=T(r),t=s({shape:c,...e});if(t._remove=()=>{t._removeEvent(),n.model.removeCell(t)},t._update=i=>{const{props:a={},events:f={}}=T(i),l=s({shape:t.shape,...a,parent:void 0}).getProp();h.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=M(t,f,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=M(t,o,n),d.nextTick(()=>t._update(e)),t},R=(s,c,r)=>{const{props:n={},events:e={}}=T(c),o=new s({enabled:!0,...n});return o._remove=()=>o.dispose(),o._update=()=>null,r.use(o),M(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),f=a.findIndex(l=>l.id===e),g=f===-1?a.length:f;o.props?a.splice(g,1,o.props):a.splice(g,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),y=(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)=>y(s,(n,e,o)=>{const t=e.attr("line");e.attr("line",{...t,[s]:o})},c,r),V=(s,c,r)=>y(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),z=p("Node",w.bind(null,h.Node.create,"rect")),J=p("Edge",w.bind(null,h.Edge.create,"edge")),U=p("SourceMarker",L.bind(null,"sourceMarker")),W=p("TargetMarker",L.bind(null,"targetMarker")),D=p("PortGroup",V.bind(null,"group")),F=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=J;exports.EdgeTool=K;exports.ElementOf=p;exports.ElementOfPlugin=X;exports.Graph=I;exports.Label=F;exports.Node=z;exports.NodeTool=Q;exports.Port=H;exports.PortGroup=D;exports.SourceMarker=U;exports.TargetMarker=W;exports.getRender=S;
|
package/dist/index.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
import { defineComponent as R, ref as N, shallowReactive as A, onMounted as V, h as
|
2
|
-
import { Node as z, Edge as J, Graph as U, ObjectExt as W, StringExt as
|
1
|
+
import { defineComponent as R, ref as N, shallowReactive as A, onMounted as V, h as w, onUnmounted as q, nextTick as L, createVNode as x } from "vue";
|
2
|
+
import { Node as z, 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
4
|
const y = /* @__PURE__ */ new Map();
|
5
5
|
function l(s, c) {
|
@@ -14,7 +14,7 @@ const F = (s) => {
|
|
14
14
|
return;
|
15
15
|
const i = n.get(e.id) || {};
|
16
16
|
c && clearTimeout(c), i[r] = a, n.set(e.id, { ...i, [r]: a }), c = setTimeout(() => {
|
17
|
-
e._update(n.get(e.id) || {})
|
17
|
+
e._update(n.get(e.id) || {});
|
18
18
|
}, 1);
|
19
19
|
},
|
20
20
|
insert: (e, r) => e._insert && e._insert(r),
|
@@ -41,10 +41,10 @@ const F = (s) => {
|
|
41
41
|
// cloneNode,
|
42
42
|
// insertStaticContent,
|
43
43
|
}, s);
|
44
|
-
},
|
44
|
+
}, P = (s) => Object.entries(s).reduce((c, [n, o]) => (n.startsWith("on") ? c.events[n.substr(2).toLowerCase()] = o : c.props[n] = o === "" ? !0 : o, c), {
|
45
45
|
props: {},
|
46
46
|
events: {}
|
47
|
-
}),
|
47
|
+
}), b = (s, c, n) => {
|
48
48
|
const o = Object.entries(c).map(([e, r]) => {
|
49
49
|
const t = (a) => {
|
50
50
|
const {
|
@@ -68,7 +68,7 @@ const F = (s) => {
|
|
68
68
|
} = s, {
|
69
69
|
props: r = {},
|
70
70
|
events: t = {}
|
71
|
-
} =
|
71
|
+
} = P(c), {
|
72
72
|
width: a = 800,
|
73
73
|
height: i = 600,
|
74
74
|
...m
|
@@ -81,9 +81,9 @@ const F = (s) => {
|
|
81
81
|
children: G = []
|
82
82
|
} = E, {
|
83
83
|
id: d
|
84
|
-
} = T, k =
|
84
|
+
} = T, k = O.hashcode(JSON.stringify(T));
|
85
85
|
let g = d && `${v}:${_}:${d}` || d && $.value.get(`${v}:${_}:${d}`) || $.value.get(`${v}:${k}`);
|
86
|
-
return g || (g =
|
86
|
+
return g || (g = O.uuid(), !d && _ !== "Edge" && $.value.set(d ? `${v}:${d}` : `${v}:${k}`, g)), w(_, {
|
87
87
|
...T,
|
88
88
|
id: d || g,
|
89
89
|
key: g
|
@@ -96,23 +96,23 @@ const F = (s) => {
|
|
96
96
|
width: a,
|
97
97
|
height: i,
|
98
98
|
...m
|
99
|
-
}),
|
99
|
+
}), b(null, t, p.graph);
|
100
100
|
const {
|
101
101
|
render: h
|
102
102
|
} = F(p.graph);
|
103
|
-
h(
|
103
|
+
h(w(() => f.value), p.graph);
|
104
104
|
}
|
105
105
|
}), q(() => {
|
106
106
|
p.graph && p.graph.dispose();
|
107
107
|
}), () => {
|
108
108
|
const h = n.default && n.default() || [];
|
109
|
-
return L(() => f.value = C(h)),
|
109
|
+
return L(() => f.value = C(h)), x("div", {
|
110
110
|
style: {
|
111
111
|
width: "100%",
|
112
112
|
height: "100%",
|
113
113
|
position: "relative"
|
114
114
|
}
|
115
|
-
}, [!e &&
|
115
|
+
}, [!e && x("div", {
|
116
116
|
ref: u
|
117
117
|
}, null)]);
|
118
118
|
};
|
@@ -121,37 +121,40 @@ const F = (s) => {
|
|
121
121
|
const {
|
122
122
|
props: e = {},
|
123
123
|
events: r = {}
|
124
|
-
} =
|
124
|
+
} = P(n), t = s({
|
125
|
+
shape: c,
|
126
|
+
...e
|
127
|
+
});
|
125
128
|
if (t._remove = () => {
|
126
129
|
t._removeEvent(), o.model.removeCell(t);
|
127
130
|
}, t._update = (a) => {
|
128
131
|
const {
|
129
132
|
props: i = {},
|
130
133
|
events: m = {}
|
131
|
-
} =
|
134
|
+
} = P(a), p = s({
|
132
135
|
shape: t.shape,
|
133
136
|
...i,
|
134
137
|
parent: void 0
|
135
138
|
}).getProp();
|
136
139
|
W.isEqual(t.getProp(), p) || Object.keys(p).forEach((f) => {
|
137
140
|
["id", "parent", "shape"].indexOf(f) === -1 && t.setProp(f, p[f]);
|
138
|
-
}), t._removeEvent(), t._removeEvent =
|
141
|
+
}), t._removeEvent(), t._removeEvent = b(t, m, o), o.trigger("updated:props", {
|
139
142
|
cell: t
|
140
143
|
});
|
141
144
|
}, o.model.addCell(t), t.parentNode = o, e.parent) {
|
142
145
|
const a = o.getCellById(e.parent);
|
143
146
|
a && a.addChild(t);
|
144
147
|
}
|
145
|
-
return t._removeEvent =
|
148
|
+
return t._removeEvent = b(t, r, o), L(() => t._update(e)), t;
|
146
149
|
}, H = (s, c, n) => {
|
147
150
|
const {
|
148
151
|
props: o = {},
|
149
152
|
events: e = {}
|
150
|
-
} =
|
153
|
+
} = P(c), r = new s({
|
151
154
|
enabled: !0,
|
152
155
|
...o
|
153
156
|
});
|
154
|
-
return r._remove = () => r.dispose(), r._update = () => null, n.use(r),
|
157
|
+
return r._remove = () => r.dispose(), r._update = () => null, n.use(r), b(null, e, r), r;
|
155
158
|
}, M = (s, c, n, o) => {
|
156
159
|
const {
|
157
160
|
id: e
|