vue-x6 1.0.5 → 1.0.7

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),v=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 n=new Map,r=(e,o,t,i)=>{if(!e)return;const a=n.get(e.id)||{};c&&clearTimeout(c),a[o]=i,n.set(e.id,{...a,[o]:i}),c=setTimeout(()=>{e._update(n.get(e.id)||{}),n.set(e.id,{})},1)};return B.createRenderer({patchProp:r,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,[n,r])=>(n.startsWith("on")?c.events[n.substr(2).toLowerCase()]=r:c.props[n]=r===""?!0:r,c),{props:{},events:{}}),M=(s,c,n)=>{const r=Object.entries(c).map(([e,o])=>{const t=i=>{const{cell:a}=i;s&&a.id===s.id&&o(i)};return n.on(`cell:${e}`,t),()=>n.off(`cell:${e}`,t)});return()=>r.forEach(e=>e())},I=d.defineComponent({inheritAttrs:!1,name:"Graph",setup(s,{attrs:c,slots:n,expose:r}){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,b="")=>E.filter(P=>P.props).map(P=>{const{props:$={},type:_,children:O=[]}=P,{id:u}=$,x=v.StringExt.hashcode(JSON.stringify($));let h=u&&`${b}:${_}:${u}`||u&&N.value.get(`${b}:${_}:${u}`)||N.value.get(`${b}:${x}`);return h||(h=v.StringExt.uuid(),!u&&_!=="Edge"&&N.value.set(u?`${b}:${u}`:`${b}:${x}`,h)),d.h(_,{...$,id:u||h,key:h},O&&k(O,h))}).filter(P=>P.key);return r(l),d.onMounted(()=>{if(g.value){l.graph=new v.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=n.default&&n.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)])}}}),y=(s,c,n,r)=>{const{props:e={},events:o={}}=T(n),t=s(n);if(t._remove=()=>{t._removeEvent(),r.model.removeCell(t)},t._update=i=>{const{props:a={},events:f={}}=T(i),l=s({shape:t.shape,...a,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=M(t,f,r),r.trigger("updated:props",{cell:t})},r.model.addCell(t),t.parentNode=r,e.parent){const i=r.getCellById(e.parent);i&&i.addChild(t)}return t._removeEvent=M(t,o,r),d.nextTick(()=>t._update(e)),t},R=(s,c,n)=>{const{props:r={},events:e={}}=T(c),o=new s({enabled:!0,...r});return o._remove=()=>o.dispose(),o._update=()=>null,n.use(o),M(null,e,o),o},C=(s,c,n,r)=>{const{id:e}=n,o={id:e,cell:{id:""},props:n,_update:i=>o.props=i,_insert:i=>o.cell=i,_remove:()=>{o._update(null),r.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 r.on("updated:props",t),o},q=(s,c)=>C(n=>n.getLabels(),(n,r)=>n.setLabels([...r]),s,c),L=(s,c,n,r)=>{const{id:e,name:o}=n,t={id:e,name:o,props:n,cell:{id:""},_update:a=>t.props=a,_insert:a=>t.cell=a,_remove:()=>{t._update(),r.off("updated:props",i)}},i=({cell:a})=>{t.cell.id==a.id&&c(t,a,t.props)};return r.on("updated:props",i),t},w=(s,c,n)=>L(s,(r,e,o)=>{const t=e.attr("line");e.attr("line",{...t,[s]:o})},c,n),V=(s,c,n)=>L(s,(r,e,o)=>{const{port:t}=e,i=e.getPropByPath("ports/groups")||{};o?i[r.name]=t.parseGroup(o):delete i[r.name],e.setPropByPath("ports/groups",{...i})},c,n),A=(s,c)=>C(n=>n.getPorts(),(n,r)=>{n.setPropByPath("ports/items",r)},s,c),j=(s,c)=>C(n=>{const r=n.getTools();return r&&r.items?r.items:r||[]},(n,r)=>n.setTools(r),s,c),z=p("Node",y.bind(null,v.Node.create,"rect")),J=p("Edge",y.bind(null,v.Edge.create,"edge")),U=p("SourceMarker",w.bind(null,"sourceMarker")),W=p("TargetMarker",w.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;
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)},_=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:{}}),T=(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={}}=_(c),{width:i=800,height:a=600,...f}=o,g=d.ref(e),l=d.shallowReactive({graph:null}),m=d.ref([]),M=d.ref(new Map),k=(E,P="")=>E.map(N=>{const{props:$={},type:b,children:O=[]}=N,{id:u}=$||{},x=h.StringExt.hashcode(JSON.stringify($));let v=u&&`${P}:${b}:${u}`||u&&M.value.get(`${P}:${b}:${u}`)||M.value.get(`${P}:${x}`);return v||(v=h.StringExt.uuid(),!u&&b!=="Edge"&&M.value.set(u?`${P}:${u}`:`${P}:${x}`,v)),d.h(b,{...$,id:u||v,key:v},O&&k(O,v))}).filter(N=>N.key);return n(l),d.onMounted(()=>{if(g.value){l.graph=new h.Graph({container:g.value,width:i,height:a,...f}),T(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={}}=_(r),t=s({shape:c,...e});if(t._remove=()=>{t._removeEvent(),n.model.removeCell(t)},t._update=i=>{const{props:a={},events:f={}}=_(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=T(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=T(t,o,n),d.nextTick(()=>t._update(e)),t},R=(s,c,r)=>{const{props:n={},events:e={}}=_(c),o=new s({enabled:!0,...n});return o._remove=()=>o.dispose(),o._update=()=>null,r.use(o),T(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 x, onUnmounted as q, nextTick as L, createVNode as O } from "vue";
2
- import { Node as z, Edge as J, Graph as U, ObjectExt as W, StringExt as w } from "@antv/x6";
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) || {}), n.set(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,7 +41,7 @@ const F = (s) => {
41
41
  // cloneNode,
42
42
  // insertStaticContent,
43
43
  }, s);
44
- }, b = (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), {
44
+ }, _ = (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
  }), P = (s, c, n) => {
@@ -68,27 +68,27 @@ const F = (s) => {
68
68
  } = s, {
69
69
  props: r = {},
70
70
  events: t = {}
71
- } = b(c), {
71
+ } = _(c), {
72
72
  width: a = 800,
73
73
  height: i = 600,
74
74
  ...m
75
75
  } = r, u = N(e), p = A({
76
76
  graph: null
77
- }), f = N([]), $ = N(/* @__PURE__ */ new Map()), C = (h, v = "") => h.filter((E) => E.props).map((E) => {
77
+ }), f = N([]), b = N(/* @__PURE__ */ new Map()), C = (h, v = "") => h.map(($) => {
78
78
  const {
79
79
  props: T = {},
80
- type: _,
80
+ type: E,
81
81
  children: G = []
82
- } = E, {
82
+ } = $, {
83
83
  id: d
84
- } = T, k = w.hashcode(JSON.stringify(T));
85
- let g = d && `${v}:${_}:${d}` || d && $.value.get(`${v}:${_}:${d}`) || $.value.get(`${v}:${k}`);
86
- return g || (g = w.uuid(), !d && _ !== "Edge" && $.value.set(d ? `${v}:${d}` : `${v}:${k}`, g)), x(_, {
84
+ } = T || {}, k = O.hashcode(JSON.stringify(T));
85
+ let g = d && `${v}:${E}:${d}` || d && b.value.get(`${v}:${E}:${d}`) || b.value.get(`${v}:${k}`);
86
+ return g || (g = O.uuid(), !d && E !== "Edge" && b.value.set(d ? `${v}:${d}` : `${v}:${k}`, g)), w(E, {
87
87
  ...T,
88
88
  id: d || g,
89
89
  key: g
90
90
  }, G && C(G, g));
91
- }).filter((E) => E.key);
91
+ }).filter(($) => $.key);
92
92
  return o(p), V(() => {
93
93
  if (u.value) {
94
94
  p.graph = new U({
@@ -100,19 +100,19 @@ const F = (s) => {
100
100
  const {
101
101
  render: h
102
102
  } = F(p.graph);
103
- h(x(() => f.value), p.graph);
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)), O("div", {
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 && O("div", {
115
+ }, [!e && x("div", {
116
116
  ref: u
117
117
  }, null)]);
118
118
  };
@@ -121,14 +121,17 @@ const F = (s) => {
121
121
  const {
122
122
  props: e = {},
123
123
  events: r = {}
124
- } = b(n), t = s(n);
124
+ } = _(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
- } = b(a), p = s({
134
+ } = _(a), p = s({
132
135
  shape: t.shape,
133
136
  ...i,
134
137
  parent: void 0
@@ -147,7 +150,7 @@ const F = (s) => {
147
150
  const {
148
151
  props: o = {},
149
152
  events: e = {}
150
- } = b(c), r = new s({
153
+ } = _(c), r = new s({
151
154
  enabled: !0,
152
155
  ...o
153
156
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-x6",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",