vue-x6 1.0.0

package/README.md

@@ -0,0 +1,57 @@
+# vue-x6
+
+<a href="https://www.npmjs.com/package/vue-x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/vue-x6.svg?style=flat-square"></a>
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-x6?style=flat-square)
+![npm](https://img.shields.io/npm/dm/vue-x6?style=flat-square)
+<a href="/LICENSE"><img src="https://img.shields.io/github/license/lloydzhou/vue-x6?style=flat-square" alt="MIT License"></a>
+
+## 提供自定义渲染器在vue中直接渲染x6画布
+
+1. 使用`createRender`自定义渲染器
+2. 只需抽象create/insert/update/remove既可
+3. 最后渲染出来的instance就是Graph/Node/Edge对象，这些对象使用ref可以直接绑定
+4. Graph内部将Children做进一步处理，生成带key的子组件（避免list diff导致元素id变化）
+
+## 安装
+```
+npm install vue-x6
+yarn add vue-x6
+```
+
+## demo
+
+[online demo](https://codesandbox.io/s/vue-x6-demo-nhogrp?file=/src/App.js)
+
+```
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Snapline } from "@antv/x6-plugin-snapline";
+import { Graph, Node, Edge, ElementOfPlugin } from './lib/index'
+const click = (e) => {
+  console.log(e)
+}
+const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)
+const visible = ref(true)
+const toggle = () => visible.value = !visible.value
+</script>
+
+<template>
+  <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="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" />
+  </Graph>
+</template>
+```
+
+## TODO
+- [x] 提供渲染器
+- [x] Graph组件
+- [x] Node/Edge组件
+- [x] ElementOfPlugin函数方便封装官方plugin
+- [ ] NodePort
+- [ ] NodeTool/EdgeTool
+

package/dist/Graph.d.ts

@@ -0,0 +1,17 @@
+import { Graph as X6Graph } from '@antv/x6';
+import type { DefineComponent, Ref } from 'vue';
+interface Props {
+    container?: Ref<HTMLElement>;
+}
+type Graph = DefineComponent<X6Graph.Options & Props, {
+    [key: string]: any;
+}>;
+export declare const Graph: Graph;
+export declare const Node: 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 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 function ElementOfPlugin(name: any, type: any): any;
+export {};

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Graph';
+export * from './render';

package/dist/index.js

@@ -0,0 +1,157 @@
+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";
+import { Node as $, Edge as V, Graph as k, StringExt as N, ObjectExt as R } from "@antv/x6";
+import { createRenderer as A } from "@vue/runtime-core";
+const O = /* @__PURE__ */ new Map();
+function _(e, n) {
+  return O.set(e, n), e;
+}
+const B = function(e, n, o, s, r, a, t, c, l) {
+  e._update(n, o, s);
+}, I = function(e, n, o, s) {
+  const r = O.get(e);
+  return r && r(s);
+}, { render: q, createApp: W } = A({
+  patchProp: B,
+  insert: (e, n) => e && e._insert(n),
+  remove: (e) => e && e._remove(),
+  createElement: I,
+  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,
+}), D = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  name: "Graph",
+  setup(e, {
+    attrs: n,
+    slots: o,
+    expose: s
+  }) {
+    const {
+      container: r
+    } = e, {
+      width: a = 800,
+      height: t = 600,
+      ...c
+    } = n, l = v(r), p = S({
+      graph: null
+    }), u = v(), d = v(/* @__PURE__ */ new Map());
+    return s(p), T(() => {
+      if (Object.keys(c).forEach((h) => c[h] === "" && (c[h] = !0)), l.value) {
+        p.graph = new k({
+          container: l.value,
+          width: a,
+          height: t,
+          ...c
+        });
+        const h = j(() => (u.value || []).filter((i) => i.props).map((i) => {
+          const {
+            key: f,
+            props: b = {},
+            type: G
+          } = i, {
+            id: m
+          } = b;
+          if (!f) {
+            const C = N.hashcode(JSON.stringify(b));
+            i.key = m || d.value.get(m) || d.value.get(C) || N.uuid(), !m && G !== "Edge" && d.value.set(m || C, i.key);
+          }
+          return i;
+        }), p);
+        q(h, p.graph);
+      }
+    }), y(() => {
+      p.graph && p.graph.dispose();
+    }), () => {
+      const h = o.default && o.default() || [];
+      return M(() => u.value = h), x("div", {
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative"
+        }
+      }, [!r && x("div", {
+        ref: l
+      }, null)]);
+    };
+  }
+}), g = (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: {}
+}), E = (e, n, o) => {
+  const s = Object.entries(n).map(([r, a]) => {
+    const t = (c) => {
+      const {
+        cell: l
+      } = c;
+      e && l.id === e.id && a(c);
+    };
+    return o.on(`cell:${r}`, t), () => o.off(`cell:${r}`, t);
+  });
+  return () => s.forEach((r) => r());
+}, w = (e, n, o) => {
+  const {
+    props: s = {},
+    events: r = {}
+  } = g(o);
+  let a;
+  const t = e(o);
+  t._remove = () => {
+    t._removeEvent(), a.model.removeCell(t);
+  }, t._insert = (p) => {
+    if (a = p.addCell(t), t._removeEvent = E(t, r, a), t.parentNode = p, s.parent) {
+      const u = a.getCellById(s.parent);
+      u && u.addChild(t);
+    }
+  };
+  let c, l = {};
+  return t._update = (p, u, d) => {
+    c && clearTimeout(c), l[p] = d, c = setTimeout(() => t._update_props(l), 1);
+  }, t._update_props = (p) => {
+    const {
+      props: u = {},
+      events: d = {}
+    } = g(p), i = e({
+      shape: t.shape,
+      ...u,
+      parent: void 0
+    }).getProp();
+    R.isEqual(t.getProp(), i) || Object.keys(i).forEach((f) => {
+      ["id", "parent", "shape"].indexOf(f) === -1 && t.setProp(f, i[f]);
+    }), t._removeEvent(), t._removeEvent = E(t, d, a), p = {};
+  }, t;
+}, z = (e, n) => {
+  const {
+    props: o = {},
+    events: s = {}
+  } = g(n), r = new e({
+    enabled: !0,
+    ...o
+  });
+  return r._insert = (a) => {
+    a.use(r), E(null, s, r);
+  }, r._remove = () => r.dispose(), r._update = () => null, r;
+}, F = _("Node", w.bind(null, $.create, "rect")), H = _("Edge", w.bind(null, V.create, "edge"));
+function K(e, n) {
+  return _(e, z.bind(null, n));
+}
+export {
+  H as Edge,
+  _ as ElementOf,
+  K as ElementOfPlugin,
+  D as Graph,
+  F as Node,
+  W as createApp,
+  q as render
+};

package/dist/render.d.ts

@@ -0,0 +1,6 @@
+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<any>, createApp: import("vue").CreateAppFunction<any>;
+export { render, createApp };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "vue-x6",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only tsd",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "tsd": "tsc -d --skipLibCheck --emitDeclarationOnly --jsx preserve --esModuleInterop --declarationDir dist src/lib/index.ts",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "antv",
+    "x6",
+    "graph",
+    "svg",
+    "react",
+    "typescript"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "author": "lloydzhou",
+  "license": "MIT",
+  "homepage": "https://github.com/lloydzhou/vue-x6",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:lloydzhou/vue-x6.git"
+  },
+  "peerDependencies": {
+    "@antv/x6": "^2.5.1",
+    "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "@antv/x6": "^2.5.1",
+    "@antv/x6-plugin-snapline": "^2.1.6",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vue": "^3.2.45",
+    "vue-tsc": "^1.0.24"
+  }
+}