vue-x6 1.0.1 → 1.0.2

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 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;
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 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";
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 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,
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: I,
18
- createText(e) {
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
- }), D = /* @__PURE__ */ P({
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: a = 800,
42
+ width: p = 800,
45
43
  height: t = 600,
46
- ...c
47
- } = n, l = v(r), p = S({
44
+ ...i
45
+ } = n, l = m(r), a = j({
48
46
  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({
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: a,
52
+ width: p,
55
53
  height: t,
56
- ...c
54
+ ...i
57
55
  });
58
- const h = j(() => (u.value || []).filter((i) => i.props).map((i) => {
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: G
63
- } = i, {
64
- id: m
60
+ type: P
61
+ } = c, {
62
+ id: v
65
63
  } = b;
66
64
  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);
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 i;
71
- }), p);
72
- q(h, p.graph);
68
+ return c;
69
+ }), a);
70
+ B(h, a.graph);
73
71
  }
74
- }), y(() => {
75
- p.graph && p.graph.dispose();
72
+ }), M(() => {
73
+ a.graph && a.graph.dispose();
76
74
  }), () => {
77
75
  const h = o.default && o.default() || [];
78
- return M(() => u.value = h), x("div", {
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 && x("div", {
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, a]) => {
94
- const t = (c) => {
91
+ const s = Object.entries(n).map(([r, p]) => {
92
+ const t = (i) => {
95
93
  const {
96
94
  cell: l
97
- } = c;
98
- e && l.id === e.id && a(c);
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 a;
106
+ let p;
109
107
  const t = e(o);
110
108
  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);
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 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) => {
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: u = {},
124
- events: d = {}
125
- } = g(p), i = e({
121
+ props: d = {},
122
+ events: u = {}
123
+ } = g(a), c = e({
126
124
  shape: t.shape,
127
- ...u,
125
+ ...d,
128
126
  parent: void 0
129
127
  }).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 = {};
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
- }, z = (e, n) => {
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 = (a) => {
143
- a.use(r), E(null, s, r);
140
+ return r._insert = (p) => {
141
+ p.use(r), E(null, s, r);
144
142
  }, 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));
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
- H as Edge,
148
+ D as Edge,
151
149
  _ as ElementOf,
152
- K as ElementOfPlugin,
153
- D as Graph,
154
- F as Node,
155
- W as createApp,
156
- q as render
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<any>, createApp: import("vue").CreateAppFunction<any>;
5
+ declare const render: import("vue").RootRenderFunction<import("vue").RendererElement>, createApp: import("vue").CreateAppFunction<import("vue").RendererElement>;
6
6
  export { render, createApp };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-x6",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",