vue-x6 1.0.3 → 1.0.5

package/README.md

@@ -39,10 +39,40 @@ const toggle = () => visible.value = !visible.value
   <button @click="toggle">显示/隐藏node2</button>
   <Graph grid>
     <SnaplinePlugin key="Snapline" />
-    <Node id="1" label="node1" :x="100" :y="100" :width="80" :height="40" @click="click" />
+    <Node id="1" label="node1" :x="100" :y="100" :width="80" :height="40" @click="click" >
+    </Node>
     <Node id="2" label="node2" :x="200" :y="200" :width="80" :height="40" @click="click" v-if="visible" />
     <Node id="3" label="node3" :x="200" :y="100" :width="80" :height="40" parent="1" @click="click" />
-    <Edge source="1" target="2" @click="click" />
+    <Edge v-if="visible" source="1" target="2" @click="click">
+      <EdgeTool name="button-remove" :args='{ x: 10, y: 10 }' />
+      <Label :attrs='{text: {text: "Hello Label1"}}' :position='{distance: 0.3}' />
+      <Label :attrs='{text: {text: "Hello Label3"}}' :position='{distance: 0.5}' />
+      <Label :attrs='{text: {text: "Hello Label2"}}' :position='{distance: 0.7}' />
+      <SourceMarker name="diamond" />
+      <TargetMarker name="ellipse" />
+    </Edge>
+  </Graph>
+</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>
 ```
@@ -52,6 +82,14 @@ const toggle = () => visible.value = !visible.value
 - [x] Graph组件
 - [x] Node/Edge组件
 - [x] ElementOfPlugin函数方便封装官方plugin
-- [ ] NodePort
-- [ ] NodeTool/EdgeTool
+- [x] Label(Edge)
+- [x] NodePort
+- [x] NodeTool/EdgeTool
+- [x] SourceMarker/TargetMarker
+
+
+## TIP
+1. vue createRenderer中的createElement也通过包装一层传递root(graph)进去
+2. vue createRenderer传递patchProp，这里通过包装一个patchProps一次性更新整个props
+3. 这里patchProps中有延时逻辑，所以增加`updated:props`事件监听
 

package/dist/Graph.d.ts

@@ -13,5 +13,26 @@ export declare const Node: DefineComponent<unknown, {
 export declare const Edge: DefineComponent<unknown, {
     [key: string]: any;
 }, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const SourceMarker: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const TargetMarker: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const PortGroup: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const Label: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const Port: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const EdgeTool: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
+export declare const NodeTool: DefineComponent<unknown, {
+    [key: string]: any;
+}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
 export declare function ElementOfPlugin(name: string, type: any): any;
 export {};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),g=require("@antv/x6"),w=require("@vue/runtime-core"),C=new Map;function b(e,n){return C.set(e,n),e}const{render:P,createApp:M}=w.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=C.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){}}),E=e=>Object.entries(e).reduce((n,[o,s])=>(o.startsWith("on")?n.events[o.substr(2).toLowerCase()]=s:n.props[o]=s===""?!0:s,n),{props:{},events:{}}),_=(e,n,o)=>{const s=Object.entries(n).map(([r,i])=>{const t=u=>{const{cell:f}=u;e&&f.id===e.id&&i(u)};return o.on(`cell:${r}`,t),()=>o.off(`cell:${r}`,t)});return()=>s.forEach(r=>r())},j=a.defineComponent({inheritAttrs:!1,name:"Graph",setup(e,{attrs:n,slots:o,expose:s}){const{container:r}=e,{props:i={},events:t={}}=E(n),{width:u=800,height:f=600,...c}=i,l=a.ref(r),p=a.shallowReactive({graph:null}),x=a.ref(),d=a.ref(new Map);return s(p),a.onMounted(()=>{if(l.value){p.graph=new g.Graph({container:l.value,width:u,height:f,...c}),_(null,t,p.graph);const h=a.h(()=>(x.value||[]).filter(v=>v.props).map(v=>{const{key:S,props:N={},type:T}=v,{id:m}=N;if(!S){const O=g.StringExt.hashcode(JSON.stringify(N));v.key=m||d.value.get(m)||d.value.get(O)||g.StringExt.uuid(),!m&&T!=="Edge"&&d.value.set(m||O,v.key)}return v}),p);P(h,p.graph)}}),a.onUnmounted(()=>{p.graph&&p.graph.dispose()}),()=>{const h=o.default&&o.default()||[];return a.nextTick(()=>x.value=h),a.createVNode("div",{style:{width:"100%",height:"100%",position:"relative"}},[!r&&a.createVNode("div",{ref:l},null)])}}}),y=(e,n,o)=>{const{props:s={},events:r={}}=E(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=_(t,r,i),t.parentNode=c,s.parent){const l=i.getCellById(s.parent);l&&l.addChild(t)}};let u,f={};return t._update=(c,l,p)=>{u&&clearTimeout(u),f[c]=p,u=setTimeout(()=>t._update_props(f),1)},t._update_props=c=>{const{props:l={},events:p={}}=E(c),d=e({shape:t.shape,...l,parent:void 0}).getProp();g.ObjectExt.isEqual(t.getProp(),d)||Object.keys(d).forEach(h=>{["id","parent","shape"].indexOf(h)===-1&&t.setProp(h,d[h])}),t._removeEvent(),t._removeEvent=_(t,p,i),c={}},t},G=(e,n)=>{const{props:o={},events:s={}}=E(n),r=new e({enabled:!0,...o});return r._insert=i=>{i.use(r),_(null,s,r)},r._remove=()=>r.dispose(),r._update=()=>null,r},q=b("Node",y.bind(null,g.Node.create,"rect")),V=b("Edge",y.bind(null,g.Edge.create,"edge"));function k(e,n){return b(e,G.bind(null,n))}exports.Edge=V;exports.ElementOf=b;exports.ElementOfPlugin=k;exports.Graph=j;exports.Node=q;exports.createApp=M;exports.render=P;
+"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;

package/dist/index.js

@@ -1,158 +1,244 @@
-import { defineComponent as G, ref as _, shallowReactive as M, onMounted as $, h as j, onUnmounted as S, nextTick as k, createVNode as C } from "vue";
-import { Node as R, Edge as V, Graph as A, StringExt as O, ObjectExt as B } from "@antv/x6";
-import { createRenderer as I } from "@vue/runtime-core";
-const w = /* @__PURE__ */ new Map();
-function b(e, n) {
-  return w.set(e, n), e;
+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 { createRenderer as D } from "@vue/runtime-core";
+const y = /* @__PURE__ */ new Map();
+function l(s, c) {
+  return y.set(s, c), s;
 }
-const { render: q, createApp: W } = I({
-  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 = w.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) {
-  }
-  // optional, DOM-specific
-  // querySelector,
-  // setScopeId,
-  // cloneNode,
-  // insertStaticContent,
-}), m = (e) => Object.entries(e).reduce((n, [o, s]) => (o.startsWith("on") ? n.events[o.substr(2).toLowerCase()] = s : n.props[o] = s === "" ? !0 : s, n), {
+const F = (s) => {
+  let c;
+  const n = /* @__PURE__ */ new Map();
+  return D({
+    patchProp: (e, r, t, a) => {
+      if (!e)
+        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, {});
+      }, 1);
+    },
+    insert: (e, r) => e._insert && e._insert(r),
+    remove: (e) => e && e._remove(),
+    createElement: (e, r, t, a) => {
+      const i = y.get(e);
+      return i && i(a, s);
+    },
+    createText: (e) => {
+      const r = { text: e, _insert: (t) => r.parentNode = t };
+      return r;
+    },
+    createComment: (e) => {
+      console.log("createComment", e);
+    },
+    setText: () => null,
+    setElementText: () => null,
+    parentNode: (e) => e.parentNode,
+    nextSibling(e) {
+    }
+    // optional, DOM-specific
+    // querySelector,
+    // setScopeId,
+    // 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), {
   props: {},
   events: {}
-}), g = (e, n, o) => {
-  const s = Object.entries(n).map(([r, p]) => {
-    const t = (l) => {
+}), P = (s, c, n) => {
+  const o = Object.entries(c).map(([e, r]) => {
+    const t = (a) => {
       const {
-        cell: h
-      } = l;
-      e && h.id === e.id && p(l);
+        cell: i
+      } = a;
+      s && i.id === s.id && r(a);
     };
-    return o.on(`cell:${r}`, t), () => o.off(`cell:${r}`, t);
+    return n.on(`cell:${e}`, t), () => n.off(`cell:${e}`, t);
   });
-  return () => s.forEach((r) => r());
-}, D = /* @__PURE__ */ G({
+  return () => o.forEach((e) => e());
+}, te = /* @__PURE__ */ R({
   inheritAttrs: !1,
   name: "Graph",
-  setup(e, {
-    attrs: n,
-    slots: o,
-    expose: s
+  setup(s, {
+    attrs: c,
+    slots: n,
+    expose: o
   }) {
     const {
-      container: r
-    } = e, {
-      props: p = {},
+      container: e
+    } = s, {
+      props: r = {},
       events: t = {}
-    } = m(n), {
-      width: l = 800,
-      height: h = 600,
-      ...i
-    } = p, c = _(r), a = M({
+    } = b(c), {
+      width: a = 800,
+      height: i = 600,
+      ...m
+    } = r, u = N(e), p = A({
       graph: null
-    }), E = _(), d = _(/* @__PURE__ */ new Map());
-    return s(a), $(() => {
-      if (c.value) {
-        a.graph = new A({
-          container: c.value,
-          width: l,
-          height: h,
-          ...i
-        }), g(null, t, a.graph);
-        const u = j(() => (E.value || []).filter((f) => f.props).map((f) => {
-          const {
-            key: T,
-            props: x = {},
-            type: y
-          } = f, {
-            id: v
-          } = x;
-          if (!T) {
-            const N = O.hashcode(JSON.stringify(x));
-            f.key = v || d.value.get(v) || d.value.get(N) || O.uuid(), !v && y !== "Edge" && d.value.set(v || N, f.key);
-          }
-          return f;
-        }), a);
-        q(u, a.graph);
+    }), f = N([]), $ = N(/* @__PURE__ */ new Map()), C = (h, v = "") => h.filter((E) => E.props).map((E) => {
+      const {
+        props: T = {},
+        type: _,
+        children: G = []
+      } = E, {
+        id: d
+      } = T, k = w.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(_, {
+        ...T,
+        id: d || g,
+        key: g
+      }, G && C(G, g));
+    }).filter((E) => E.key);
+    return o(p), V(() => {
+      if (u.value) {
+        p.graph = new U({
+          container: u.value,
+          width: a,
+          height: i,
+          ...m
+        }), P(null, t, p.graph);
+        const {
+          render: h
+        } = F(p.graph);
+        h(x(() => f.value), p.graph);
       }
-    }), S(() => {
-      a.graph && a.graph.dispose();
+    }), q(() => {
+      p.graph && p.graph.dispose();
     }), () => {
-      const u = o.default && o.default() || [];
-      return k(() => E.value = u), C("div", {
+      const h = n.default && n.default() || [];
+      return L(() => f.value = C(h)), O("div", {
         style: {
           width: "100%",
           height: "100%",
           position: "relative"
         }
-      }, [!r && C("div", {
-        ref: c
+      }, [!e && O("div", {
+        ref: u
       }, null)]);
     };
   }
-}), P = (e, n, o) => {
+}), S = (s, c, n, o) => {
   const {
-    props: s = {},
+    props: e = {},
     events: r = {}
-  } = m(o);
-  let p;
-  const t = e(o);
-  t._remove = () => {
-    t._removeEvent(), p.model.removeCell(t);
-  }, t._insert = (i) => {
-    if (p = i.addCell(t), t._removeEvent = g(t, r, p), t.parentNode = i, s.parent) {
-      const c = p.getCellById(s.parent);
-      c && c.addChild(t);
-    }
-  };
-  let l, h = {};
-  return t._update = (i, c, a) => {
-    l && clearTimeout(l), h[i] = a, l = setTimeout(() => t._update_props(h), 1);
-  }, t._update_props = (i) => {
+  } = b(n), t = s(n);
+  if (t._remove = () => {
+    t._removeEvent(), o.model.removeCell(t);
+  }, t._update = (a) => {
     const {
-      props: c = {},
-      events: a = {}
-    } = m(i), d = e({
+      props: i = {},
+      events: m = {}
+    } = b(a), p = s({
       shape: t.shape,
-      ...c,
+      ...i,
       parent: void 0
     }).getProp();
-    B.isEqual(t.getProp(), d) || Object.keys(d).forEach((u) => {
-      ["id", "parent", "shape"].indexOf(u) === -1 && t.setProp(u, d[u]);
-    }), t._removeEvent(), t._removeEvent = g(t, a, p), i = {};
-  }, t;
-}, z = (e, n) => {
+    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", {
+      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;
+}, H = (s, c, n) => {
   const {
     props: o = {},
-    events: s = {}
-  } = m(n), r = new e({
+    events: e = {}
+  } = b(c), r = new s({
     enabled: !0,
     ...o
   });
-  return r._insert = (p) => {
-    p.use(r), g(null, s, r);
-  }, r._remove = () => r.dispose(), r._update = () => null, r;
-}, F = b("Node", P.bind(null, R.create, "rect")), H = b("Edge", P.bind(null, V.create, "edge"));
-function K(e, n) {
-  return b(e, z.bind(null, n));
+  return r._remove = () => r.dispose(), r._update = () => null, n.use(r), P(null, e, r), r;
+}, M = (s, c, n, o) => {
+  const {
+    id: e
+  } = n, r = {
+    id: e,
+    cell: {
+      id: ""
+    },
+    props: n,
+    // update只是将newProps存起来，实际执行逻辑在updated:props里面执行
+    _update: (a) => r.props = a,
+    _insert: (a) => r.cell = a,
+    _remove: () => {
+      r._update(null), o.off("updated:props", t);
+    }
+  }, t = ({
+    cell: a
+  }) => {
+    if (r.cell.id == a.id) {
+      const i = s(a), m = i.findIndex((p) => p.id === e), u = m === -1 ? i.length : m;
+      r.props ? i.splice(u, 1, r.props) : i.splice(u, 1), c(a, i);
+    }
+  };
+  return o.on("updated:props", t), r;
+}, K = (s, c) => M((n) => n.getLabels(), (n, o) => n.setLabels([...o]), s, c), B = (s, c, n, o) => {
+  const {
+    id: e,
+    name: r
+  } = n, t = {
+    id: e,
+    name: r,
+    props: n,
+    cell: {
+      id: ""
+    },
+    // @ts-ignore
+    _update: (i) => t.props = i,
+    _insert: (i) => t.cell = i,
+    _remove: () => {
+      t._update(), o.off("updated:props", a);
+    }
+  }, a = ({
+    cell: i
+  }) => {
+    t.cell.id == i.id && c(t, i, t.props);
+  };
+  return o.on("updated:props", a), t;
+}, I = (s, c, n) => B(s, (o, e, r) => {
+  const t = e.attr("line");
+  e.attr("line", {
+    ...t,
+    [s]: r
+  });
+}, c, n), Q = (s, c, n) => B(s, (o, e, r) => {
+  const {
+    port: t
+  } = e, a = e.getPropByPath("ports/groups") || {};
+  r ? a[o.name] = t.parseGroup(r) : delete a[o.name], e.setPropByPath("ports/groups", {
+    ...a
+  });
+}, c, n), X = (s, c) => M(
+  (n) => n.getPorts(),
+  // getPorts return ObjectExt.cloneDeep
+  (n, o) => {
+    n.setPropByPath("ports/items", o);
+  },
+  s,
+  c
+), j = (s, c) => M((n) => {
+  const o = n.getTools();
+  return o && o.items ? o.items : o || [];
+}, (n, o) => n.setTools(o), s, c), ne = l("Node", S.bind(null, z.create, "rect")), oe = l("Edge", S.bind(null, J.create, "edge")), re = l("SourceMarker", I.bind(null, "sourceMarker")), se = l("TargetMarker", I.bind(null, "targetMarker")), ce = l("PortGroup", Q.bind(null, "group")), ae = l("Label", K), ie = l("Port", X), pe = l("EdgeTool", j), le = l("NodeTool", j);
+function de(s, c) {
+  return l(s, H.bind(null, c));
 }
 export {
-  H as Edge,
-  b as ElementOf,
-  K as ElementOfPlugin,
-  D as Graph,
-  F as Node,
-  W as createApp,
-  q as render
+  oe as Edge,
+  pe as EdgeTool,
+  l as ElementOf,
+  de as ElementOfPlugin,
+  te as Graph,
+  ae as Label,
+  ne as Node,
+  le as NodeTool,
+  ie as Port,
+  ce as PortGroup,
+  re as SourceMarker,
+  se as TargetMarker,
+  F as getRender
 };

package/dist/render.d.ts

@@ -2,5 +2,4 @@ import type { DefineComponent } from 'vue';
 export declare function ElementOf<Element, T extends string>(type: T, Ctor: () => any): DefineComponent<Element, {
     [key: string]: any;
 }>;
-declare const render: import("vue").RootRenderFunction<import("vue").RendererElement>, createApp: import("vue").CreateAppFunction<import("vue").RendererElement>;
-export { render, createApp };
+export declare const getRender: (graph: any) => import("vue").Renderer<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-x6",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -36,10 +36,12 @@
     "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@antv/x6": "^2.5.1",
+    "@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",