vue-x6 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
package/README.md ADDED
@@ -0,0 +1,57 @@
1
+ # vue-x6
2
+
3
+ <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>
4
+ ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-x6?style=flat-square)
5
+ ![npm](https://img.shields.io/npm/dm/vue-x6?style=flat-square)
6
+ <a href="/LICENSE"><img src="https://img.shields.io/github/license/lloydzhou/vue-x6?style=flat-square" alt="MIT License"></a>
7
+
8
+ ## 提供自定义渲染器在vue中直接渲染x6画布
9
+
10
+ 1. 使用`createRender`自定义渲染器
11
+ 2. 只需抽象create/insert/update/remove既可
12
+ 3. 最后渲染出来的instance就是Graph/Node/Edge对象,这些对象使用ref可以直接绑定
13
+ 4. Graph内部将Children做进一步处理,生成带key的子组件(避免list diff导致元素id变化)
14
+
15
+ ## 安装
16
+ ```
17
+ npm install vue-x6
18
+ yarn add vue-x6
19
+ ```
20
+
21
+ ## demo
22
+
23
+ [online demo](https://codesandbox.io/s/vue-x6-demo-nhogrp?file=/src/App.js)
24
+
25
+ ```
26
+ <script setup lang="ts">
27
+ import { ref } from 'vue'
28
+ import { Snapline } from "@antv/x6-plugin-snapline";
29
+ import { Graph, Node, Edge, ElementOfPlugin } from './lib/index'
30
+ const click = (e) => {
31
+ console.log(e)
32
+ }
33
+ const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)
34
+ const visible = ref(true)
35
+ const toggle = () => visible.value = !visible.value
36
+ </script>
37
+
38
+ <template>
39
+ <button @click="toggle">显示/隐藏node2</button>
40
+ <Graph grid>
41
+ <SnaplinePlugin key="Snapline" />
42
+ <Node id="1" label="node1" :x="100" :y="100" :width="80" :height="40" @click="click" />
43
+ <Node id="2" label="node2" :x="200" :y="200" :width="80" :height="40" @click="click" v-if="visible" />
44
+ <Node id="3" label="node3" :x="200" :y="100" :width="80" :height="40" parent="1" @click="click" />
45
+ <Edge source="1" target="2" @click="click" />
46
+ </Graph>
47
+ </template>
48
+ ```
49
+
50
+ ## TODO
51
+ - [x] 提供渲染器
52
+ - [x] Graph组件
53
+ - [x] Node/Edge组件
54
+ - [x] ElementOfPlugin函数方便封装官方plugin
55
+ - [ ] NodePort
56
+ - [ ] NodeTool/EdgeTool
57
+
@@ -0,0 +1,17 @@
1
+ import { Graph as X6Graph } from '@antv/x6';
2
+ import type { DefineComponent, Ref } from 'vue';
3
+ interface Props {
4
+ container?: Ref<HTMLElement>;
5
+ }
6
+ type Graph = DefineComponent<X6Graph.Options & Props, {
7
+ [key: string]: any;
8
+ }>;
9
+ export declare const Graph: Graph;
10
+ export declare const Node: DefineComponent<unknown, {
11
+ [key: string]: any;
12
+ }, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
13
+ export declare const Edge: DefineComponent<unknown, {
14
+ [key: string]: any;
15
+ }, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
16
+ export declare function ElementOfPlugin(name: any, type: any): any;
17
+ export {};
package/dist/index.cjs ADDED
@@ -0,0 +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;
@@ -0,0 +1,2 @@
1
+ export * from './Graph';
2
+ export * from './render';
package/dist/index.js ADDED
@@ -0,0 +1,157 @@
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";
3
+ import { createRenderer as A } from "@vue/runtime-core";
4
+ const O = /* @__PURE__ */ new Map();
5
+ function _(e, n) {
6
+ return O.set(e, n), e;
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,
15
+ insert: (e, n) => e && e._insert(n),
16
+ remove: (e) => e && e._remove(),
17
+ createElement: I,
18
+ createText(e) {
19
+ const n = { text: e, _insert: (o) => n.parentNode = o };
20
+ return n;
21
+ },
22
+ createComment: () => null,
23
+ setText: () => null,
24
+ setElementText: () => null,
25
+ parentNode: (e) => e.parentNode,
26
+ nextSibling(e) {
27
+ }
28
+ // optional, DOM-specific
29
+ // querySelector,
30
+ // setScopeId,
31
+ // cloneNode,
32
+ // insertStaticContent,
33
+ }), D = /* @__PURE__ */ P({
34
+ inheritAttrs: !1,
35
+ name: "Graph",
36
+ setup(e, {
37
+ attrs: n,
38
+ slots: o,
39
+ expose: s
40
+ }) {
41
+ const {
42
+ container: r
43
+ } = e, {
44
+ width: a = 800,
45
+ height: t = 600,
46
+ ...c
47
+ } = n, l = v(r), p = S({
48
+ 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({
53
+ container: l.value,
54
+ width: a,
55
+ height: t,
56
+ ...c
57
+ });
58
+ const h = j(() => (u.value || []).filter((i) => i.props).map((i) => {
59
+ const {
60
+ key: f,
61
+ props: b = {},
62
+ type: G
63
+ } = i, {
64
+ id: m
65
+ } = b;
66
+ 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);
69
+ }
70
+ return i;
71
+ }), p);
72
+ q(h, p.graph);
73
+ }
74
+ }), y(() => {
75
+ p.graph && p.graph.dispose();
76
+ }), () => {
77
+ const h = o.default && o.default() || [];
78
+ return M(() => u.value = h), x("div", {
79
+ style: {
80
+ width: "100%",
81
+ height: "100%",
82
+ position: "relative"
83
+ }
84
+ }, [!r && x("div", {
85
+ ref: l
86
+ }, null)]);
87
+ };
88
+ }
89
+ }), g = (e) => Object.entries(e).reduce((n, [o, s]) => (o.startsWith("on") ? n.events[o.substr(2).toLowerCase()] = s : n.props[o] = s, n), {
90
+ props: {},
91
+ events: {}
92
+ }), E = (e, n, o) => {
93
+ const s = Object.entries(n).map(([r, a]) => {
94
+ const t = (c) => {
95
+ const {
96
+ cell: l
97
+ } = c;
98
+ e && l.id === e.id && a(c);
99
+ };
100
+ return o.on(`cell:${r}`, t), () => o.off(`cell:${r}`, t);
101
+ });
102
+ return () => s.forEach((r) => r());
103
+ }, w = (e, n, o) => {
104
+ const {
105
+ props: s = {},
106
+ events: r = {}
107
+ } = g(o);
108
+ let a;
109
+ const t = e(o);
110
+ 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);
116
+ }
117
+ };
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) => {
122
+ const {
123
+ props: u = {},
124
+ events: d = {}
125
+ } = g(p), i = e({
126
+ shape: t.shape,
127
+ ...u,
128
+ parent: void 0
129
+ }).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 = {};
133
+ }, t;
134
+ }, z = (e, n) => {
135
+ const {
136
+ props: o = {},
137
+ events: s = {}
138
+ } = g(n), r = new e({
139
+ enabled: !0,
140
+ ...o
141
+ });
142
+ return r._insert = (a) => {
143
+ a.use(r), E(null, s, r);
144
+ }, 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));
148
+ }
149
+ export {
150
+ H as Edge,
151
+ _ as ElementOf,
152
+ K as ElementOfPlugin,
153
+ D as Graph,
154
+ F as Node,
155
+ W as createApp,
156
+ q as render
157
+ };
@@ -0,0 +1,6 @@
1
+ import type { DefineComponent } from 'vue';
2
+ export declare function ElementOf<Element, T extends string>(type: T, Ctor: () => any): DefineComponent<Element, {
3
+ [key: string]: any;
4
+ }>;
5
+ declare const render: import("vue").RootRenderFunction<any>, createApp: import("vue").CreateAppFunction<any>;
6
+ export { render, createApp };
package/package.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "name": "vue-x6",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "run-p type-check build-only tsd",
8
+ "build-only": "vite build",
9
+ "type-check": "vue-tsc --noEmit",
10
+ "tsd": "tsc -d --skipLibCheck --emitDeclarationOnly --jsx preserve --esModuleInterop --declarationDir dist src/lib/index.ts",
11
+ "preview": "vite preview"
12
+ },
13
+ "files": [
14
+ "dist"
15
+ ],
16
+ "keywords": [
17
+ "antv",
18
+ "x6",
19
+ "graph",
20
+ "svg",
21
+ "react",
22
+ "typescript"
23
+ ],
24
+ "main": "./dist/index.cjs",
25
+ "module": "./dist/index.js",
26
+ "types": "./dist/index.d.ts",
27
+ "author": "lloydzhou",
28
+ "license": "MIT",
29
+ "homepage": "https://github.com/lloydzhou/vue-x6",
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "git@github.com:lloydzhou/vue-x6.git"
33
+ },
34
+ "peerDependencies": {
35
+ "@antv/x6": "^2.5.1",
36
+ "vue": "^3.2.45"
37
+ },
38
+ "devDependencies": {
39
+ "@antv/x6": "^2.5.1",
40
+ "@antv/x6-plugin-snapline": "^2.1.6",
41
+ "@vitejs/plugin-vue": "^4.0.0",
42
+ "@vitejs/plugin-vue-jsx": "^3.0.0",
43
+ "npm-run-all": "^4.1.5",
44
+ "typescript": "^4.9.3",
45
+ "vite": "^4.1.0",
46
+ "vue": "^3.2.45",
47
+ "vue-tsc": "^1.0.24"
48
+ }
49
+ }