vue-x6 1.0.4 → 1.0.6

package/README.md

@@ -55,6 +55,28 @@ const toggle = () => visible.value = !visible.value
 </template>
 ```
 
+### x6-vue-shape demo
+```
+import { register, getTeleport } from "@antv/x6-vue-shape";
+import ProgressNode from "./ProgressNode.vue";
+
+register({
+  shape: "custom-vue-node",
+  width: 100,
+  height: 100,
+  component: ProgressNode,
+});
+
+const TeleportContainer = getTeleport();
+
+<template>
+  <TeleportContainer />
+  <Graph grid>
+    <Node shape="custom-vue-node" :x="400" :y="100" />
+  </Graph>
+</template>
+```
+
 ## TODO
 - [x] 提供渲染器
 - [x] Graph组件

package/dist/index.cjs

@@ -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;
+"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

@@ -1,5 +1,5 @@
-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";
-import { Node as z, Edge as J, Graph as U, ObjectExt as W, StringExt as w } from "@antv/x6";
+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";
+import { Node as z, Edge as J, Graph as U, ObjectExt as W, StringExt as O } from "@antv/x6";
 import { createRenderer as D } from "@vue/runtime-core";
 const y = /* @__PURE__ */ new Map();
 function l(s, c) {
@@ -14,7 +14,7 @@ const F = (s) => {
         return;
       const i = n.get(e.id) || {};
       c && clearTimeout(c), i[r] = a, n.set(e.id, { ...i, [r]: a }), c = setTimeout(() => {
-        e._update(n.get(e.id) || {}), n.set(e.id, {});
+        e._update(n.get(e.id) || {});
       }, 1);
     },
     insert: (e, r) => e._insert && e._insert(r),
@@ -41,10 +41,10 @@ const F = (s) => {
     // cloneNode,
     // insertStaticContent,
   }, s);
-}, 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), {
+}, 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), {
   props: {},
   events: {}
-}), P = (s, c, n) => {
+}), b = (s, c, n) => {
   const o = Object.entries(c).map(([e, r]) => {
     const t = (a) => {
       const {
@@ -68,7 +68,7 @@ const F = (s) => {
     } = s, {
       props: r = {},
       events: t = {}
-    } = b(c), {
+    } = P(c), {
       width: a = 800,
       height: i = 600,
       ...m
@@ -81,9 +81,9 @@ const F = (s) => {
         children: G = []
       } = E, {
         id: d
-      } = T, k = w.hashcode(JSON.stringify(T));
+      } = T, k = O.hashcode(JSON.stringify(T));
       let g = d && `${v}:${_}:${d}` || d && $.value.get(`${v}:${_}:${d}`) || $.value.get(`${v}:${k}`);
-      return g || (g = w.uuid(), !d && _ !== "Edge" && $.value.set(d ? `${v}:${d}` : `${v}:${k}`, g)), x(_, {
+      return g || (g = O.uuid(), !d && _ !== "Edge" && $.value.set(d ? `${v}:${d}` : `${v}:${k}`, g)), w(_, {
         ...T,
         id: d || g,
         key: g
@@ -96,23 +96,23 @@ const F = (s) => {
           width: a,
           height: i,
           ...m
-        }), P(null, t, p.graph);
+        }), b(null, t, p.graph);
         const {
           render: h
         } = F(p.graph);
-        h(x(() => f.value), p.graph);
+        h(w(() => f.value), p.graph);
       }
     }), q(() => {
       p.graph && p.graph.dispose();
     }), () => {
       const h = n.default && n.default() || [];
-      return L(() => f.value = C(h)), O("div", {
+      return L(() => f.value = C(h)), x("div", {
         style: {
           width: "100%",
           height: "100%",
           position: "relative"
         }
-      }, [!e && O("div", {
+      }, [!e && x("div", {
         ref: u
       }, null)]);
     };
@@ -121,37 +121,40 @@ const F = (s) => {
   const {
     props: e = {},
     events: r = {}
-  } = b(n), t = s(n);
+  } = P(n), t = s({
+    shape: c,
+    ...e
+  });
   if (t._remove = () => {
     t._removeEvent(), o.model.removeCell(t);
   }, t._update = (a) => {
     const {
       props: i = {},
       events: m = {}
-    } = b(a), p = s({
+    } = P(a), p = s({
       shape: t.shape,
       ...i,
       parent: void 0
     }).getProp();
     W.isEqual(t.getProp(), p) || Object.keys(p).forEach((f) => {
       ["id", "parent", "shape"].indexOf(f) === -1 && t.setProp(f, p[f]);
-    }), t._removeEvent(), t._removeEvent = P(t, m, o), o.trigger("updated:props", {
+    }), t._removeEvent(), t._removeEvent = b(t, m, o), o.trigger("updated:props", {
       cell: t
     });
   }, o.model.addCell(t), t.parentNode = o, e.parent) {
     const a = o.getCellById(e.parent);
     a && a.addChild(t);
   }
-  return t._removeEvent = P(t, r, o), L(() => t._update(e)), t;
+  return t._removeEvent = b(t, r, o), L(() => t._update(e)), t;
 }, H = (s, c, n) => {
   const {
     props: o = {},
     events: e = {}
-  } = b(c), r = new s({
+  } = P(c), r = new s({
     enabled: !0,
     ...o
   });
-  return r._remove = () => r.dispose(), r._update = () => null, n.use(r), P(null, e, r), r;
+  return r._remove = () => r.dispose(), r._update = () => null, n.use(r), b(null, e, r), r;
 }, M = (s, c, n, o) => {
   const {
     id: e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-x6",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -38,8 +38,10 @@
   "devDependencies": {
     "@antv/x6": "^2.5.2",
     "@antv/x6-plugin-snapline": "^2.1.6",
+    "@antv/x6-vue-shape": "^2.0.10",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "element-plus": "^2.3.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.9.3",
     "vite": "^4.1.0",