vue-x6 1.0.4 → 1.0.6

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -55,6 +55,28 @@ const toggle = () => visible.value = !visible.value
55
55
  </template>
56
56
  ```
57
57
 
58
+ ### x6-vue-shape demo
59
+ ```
60
+ import { register, getTeleport } from "@antv/x6-vue-shape";
61
+ import ProgressNode from "./ProgressNode.vue";
62
+
63
+ register({
64
+ shape: "custom-vue-node",
65
+ width: 100,
66
+ height: 100,
67
+ component: ProgressNode,
68
+ });
69
+
70
+ const TeleportContainer = getTeleport();
71
+
72
+ <template>
73
+ <TeleportContainer />
74
+ <Graph grid>
75
+ <Node shape="custom-vue-node" :x="400" :y="100" />
76
+ </Graph>
77
+ </template>
78
+ ```
79
+
58
80
  ## TODO
59
81
  - [x] 提供渲染器
60
82
  - [x] Graph组件
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)},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 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,10 +41,10 @@ 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
+ }, 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
- }), P = (s, c, n) => {
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
- } = b(c), {
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 = w.hashcode(JSON.stringify(T));
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 = w.uuid(), !d && _ !== "Edge" && $.value.set(d ? `${v}:${d}` : `${v}:${k}`, g)), x(_, {
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
- }), P(null, t, p.graph);
99
+ }), b(null, t, p.graph);
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,37 +121,40 @@ const F = (s) => {
121
121
  const {
122
122
  props: e = {},
123
123
  events: r = {}
124
- } = b(n), t = s(n);
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
- } = b(a), p = s({
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 = P(t, m, o), o.trigger("updated:props", {
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 = P(t, r, o), L(() => t._update(e)), t;
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
- } = b(c), r = new s({
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), P(null, e, r), 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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-x6",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
@@ -38,8 +38,10 @@
38
38
  "devDependencies": {
39
39
  "@antv/x6": "^2.5.2",
40
40
  "@antv/x6-plugin-snapline": "^2.1.6",
41
+ "@antv/x6-vue-shape": "^2.0.10",
41
42
  "@vitejs/plugin-vue": "^4.0.0",
42
43
  "@vitejs/plugin-vue-jsx": "^3.0.0",
44
+ "element-plus": "^2.3.0",
43
45
  "npm-run-all": "^4.1.5",
44
46
  "typescript": "^4.9.3",
45
47
  "vite": "^4.1.0",