@blueking/flow-canvas 0.0.1-beta.2 → 0.0.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +248 -94
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +2 -2
- package/package.json +1 -1
- package/dist/index-BAAMFT_J.js +0 -236
- package/dist/index-CleU3x1v.cjs +0 -1
- package/dist/index-DD3pv5ZZ.cjs +0 -21
- package/dist/index-siYsjzl4.js +0 -181
package/dist/index-DD3pv5ZZ.cjs
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@antv/x6"),f=`.x6-widget-dnd {
|
|
2
|
-
position: absolute;
|
|
3
|
-
top: -10000px;
|
|
4
|
-
left: -10000px;
|
|
5
|
-
z-index: 999999;
|
|
6
|
-
display: none;
|
|
7
|
-
cursor: move;
|
|
8
|
-
opacity: 0.7;
|
|
9
|
-
pointer-events: 'cursor';
|
|
10
|
-
}
|
|
11
|
-
.x6-widget-dnd.dragging {
|
|
12
|
-
display: inline-block;
|
|
13
|
-
}
|
|
14
|
-
.x6-widget-dnd.dragging * {
|
|
15
|
-
pointer-events: none !important;
|
|
16
|
-
}
|
|
17
|
-
.x6-widget-dnd .x6-graph {
|
|
18
|
-
background: transparent;
|
|
19
|
-
box-shadow: none;
|
|
20
|
-
}
|
|
21
|
-
`;var m=function(h,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,n):t,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(h,e,n,t);else for(var o=h.length-1;o>=0;o--)(a=h[o])&&(s=(i<3?a(s):i>3?a(e,n,s):a(e,n))||s);return i>3&&s&&Object.defineProperty(e,n,s),s};class c extends d.View{get targetScroller(){return this.options.target.getPlugin("scroller")}get targetGraph(){return this.options.target}get targetModel(){return this.targetGraph.model}get snapline(){return this.options.target.getPlugin("snapline")}constructor(e){super(),this.name="dnd",this.options=Object.assign(Object.assign({},c.defaults),e),this.init()}init(){d.CssLoader.ensure(this.name,f),this.container=document.createElement("div"),d.Dom.addClass(this.container,this.prefixClassName("widget-dnd")),this.draggingGraph=new d.Graph(Object.assign(Object.assign({},this.options.delegateGraphOptions),{container:document.createElement("div"),width:1,height:1,async:!1})),d.Dom.append(this.container,this.draggingGraph.container)}start(e,n){const t=n;t.preventDefault(),this.targetModel.startBatch("dnd"),d.Dom.addClass(this.container,"dragging"),d.Dom.appendTo(this.container,this.options.draggingContainer||document.body),this.sourceNode=e,this.prepareDragging(e,t.clientX,t.clientY);const i=this.updateNodePosition(t.clientX,t.clientY);this.isSnaplineEnabled()&&(this.snapline.captureCursorOffset({e:t,node:e,cell:e,view:this.draggingView,x:i.x,y:i.y}),this.draggingNode.on("change:position",this.snap,this)),this.delegateDocumentEvents(c.documentEvents,t.data)}isSnaplineEnabled(){return this.snapline&&this.snapline.isEnabled()}prepareDragging(e,n,t){const i=this.draggingGraph,s=i.model,a=this.options.getDragNode(e,{sourceNode:e,draggingGraph:i,targetGraph:this.targetGraph});a.position(0,0);let o=5;if(this.isSnaplineEnabled()&&(o+=this.snapline.options.tolerance||0),this.isSnaplineEnabled()||this.options.scaled){const l=this.targetGraph.transform.getScale();i.scale(l.sx,l.sy),o*=Math.max(l.sx,l.sy)}else i.scale(1,1);this.clearDragging(),s.resetCells([a]);const r=i.findViewByCell(a);r.undelegateEvents(),r.cell.off("changed"),i.fitToContent({padding:o,allowNewOrigin:"any",useCellGeometry:!1});const g=r.getBBox();this.geometryBBox=r.getBBox({useCellGeometry:!0}),this.delta=this.geometryBBox.getTopLeft().diff(g.getTopLeft()),this.draggingNode=a,this.draggingView=r,this.draggingBBox=a.getBBox(),this.padding=o,this.originOffset=this.updateGraphPosition(n,t)}updateGraphPosition(e,n){const t=document.body.scrollTop||document.documentElement.scrollTop,i=document.body.scrollLeft||document.documentElement.scrollLeft,s=this.delta,a=this.geometryBBox,o=this.padding||5,r={left:e-s.x-a.width/2-o+i,top:n-s.y-a.height/2-o+t};return this.draggingGraph&&d.Dom.css(this.container,{left:`${r.left}px`,top:`${r.top}px`}),r}updateNodePosition(e,n){const t=this.targetGraph.clientToLocal(e,n),i=this.draggingBBox;return t.x-=i.width/2,t.y-=i.height/2,this.draggingNode.position(t.x,t.y),t}snap({cell:e,current:n,options:t}){const i=e;if(t.snapped){const s=this.draggingBBox;i.position(s.x+t.tx,s.y+t.ty,{silent:!0}),this.draggingView.translate(),i.position(n.x,n.y,{silent:!0}),this.snapOffset={x:t.tx,y:t.ty}}else this.snapOffset=null}onDragging(e){const n=this.draggingView;if(n){e.preventDefault();const t=this.normalizeEvent(e),i=t.clientX,s=t.clientY;this.updateGraphPosition(i,s);const a=this.updateNodePosition(i,s),o=this.targetGraph.options.embedding.enabled,r=(o||this.isSnaplineEnabled())&&this.isInsideValidArea({x:i,y:s});if(o){n.setEventData(t,{graph:this.targetGraph,candidateEmbedView:this.candidateEmbedView});const g=n.getEventData(t);r?n.processEmbedding(t,g):n.clearEmbedding(g),this.candidateEmbedView=g.candidateEmbedView}this.isSnaplineEnabled()&&(r?this.snapline.snapOnMoving({e:t,view:n,x:a.x,y:a.y}):this.snapline.hide())}}onDragEnd(e){const n=this.draggingNode;if(n){const t=this.normalizeEvent(e),i=this.draggingView,s=this.draggingBBox,a=this.snapOffset;let o=s.x,r=s.y;a&&(o+=a.x,r+=a.y),n.position(o,r,{silent:!0});const g=this.drop(n,{x:t.clientX,y:t.clientY}),l=p=>{p?(this.onDropped(n),this.targetGraph.options.embedding.enabled&&i&&(i.setEventData(t,{cell:p,graph:this.targetGraph,candidateEmbedView:this.candidateEmbedView}),i.finalizeEmbedding(t,i.getEventData(t)))):this.onDropInvalid(),this.candidateEmbedView=null,this.targetModel.stopBatch("dnd")};d.FunctionExt.isAsync(g)?(this.undelegateDocumentEvents(),g.then(l)):l(g)}}clearDragging(){this.draggingNode&&(this.sourceNode=null,this.draggingNode.remove(),this.draggingNode=null,this.draggingView=null,this.delta=null,this.padding=null,this.snapOffset=null,this.originOffset=null,this.undelegateDocumentEvents())}onDropped(e){this.draggingNode===e&&(this.clearDragging(),d.Dom.removeClass(this.container,"dragging"),d.Dom.remove(this.container))}onDropInvalid(){const e=this.draggingNode;e&&this.onDropped(e)}isInsideValidArea(e){let n,t=null;const i=this.targetGraph,s=this.targetScroller;this.options.dndContainer&&(t=this.getDropArea(this.options.dndContainer));const a=t&&t.containsPoint(e);if(s)if(s.options.autoResize)n=this.getDropArea(s.container);else{const o=this.getDropArea(s.container);n=this.getDropArea(i.container).intersectsWithRect(o)}else n=this.getDropArea(i.container);return!a&&n&&n.containsPoint(e)}getDropArea(e){const n=d.Dom.offset(e),t=document.body.scrollTop||document.documentElement.scrollTop,i=document.body.scrollLeft||document.documentElement.scrollLeft;return d.Rectangle.create({x:n.left+parseInt(d.Dom.css(e,"border-left-width"),10)-i,y:n.top+parseInt(d.Dom.css(e,"border-top-width"),10)-t,width:e.clientWidth,height:e.clientHeight})}drop(e,n){if(this.isInsideValidArea(n)){const t=this.targetGraph,i=t.model,s=t.clientToLocal(n),a=this.sourceNode,o=this.options.getDropNode(e,{sourceNode:a,draggingNode:e,targetGraph:this.targetGraph,draggingGraph:this.draggingGraph}),r=o.getBBox();s.x+=r.x-r.width/2,s.y+=r.y-r.height/2;const g=this.snapOffset?1:t.getGridSize();o.position(d.GeometryUtil.snapToGrid(s.x,g),d.GeometryUtil.snapToGrid(s.y,g)),o.removeZIndex();const l=this.options.validateNode,p=l?l(o,{sourceNode:a,draggingNode:e,droppingNode:o,targetGraph:t,draggingGraph:this.draggingGraph}):!0;return typeof p=="boolean"?p?(i.addCell(o,{stencil:this.cid}),o):null:d.FunctionExt.toDeferredBoolean(p).then(u=>u?(i.addCell(o,{stencil:this.cid}),o):null)}return null}onRemove(){this.draggingGraph&&(this.draggingGraph.view.remove(),this.draggingGraph.dispose())}dispose(){this.remove(),d.CssLoader.clean(this.name)}}m([d.View.dispose()],c.prototype,"dispose",null);(function(h){h.defaults={getDragNode:e=>e.clone(),getDropNode:e=>e.clone()},h.documentEvents={mousemove:"onDragging",touchmove:"onDragging",mouseup:"onDragEnd",touchend:"onDragEnd",touchcancel:"onDragEnd"}})(c||(c={}));exports.Dnd=c;
|
package/dist/index-siYsjzl4.js
DELETED
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import { Graph as w, Basecoat as j, DataUri as G, Vector as E, NumberExt as V, Dom as O, Rectangle as C, FunctionExt as N } from "@antv/x6";
|
|
2
|
-
w.prototype.toSVG = function(a, e) {
|
|
3
|
-
const t = this.getPlugin("export");
|
|
4
|
-
t && t.toSVG(a, e);
|
|
5
|
-
};
|
|
6
|
-
w.prototype.toPNG = function(a, e) {
|
|
7
|
-
const t = this.getPlugin("export");
|
|
8
|
-
t && t.toPNG(a, e);
|
|
9
|
-
};
|
|
10
|
-
w.prototype.toJPEG = function(a, e) {
|
|
11
|
-
const t = this.getPlugin("export");
|
|
12
|
-
t && t.toJPEG(a, e);
|
|
13
|
-
};
|
|
14
|
-
w.prototype.exportPNG = function(a, e) {
|
|
15
|
-
const t = this.getPlugin("export");
|
|
16
|
-
t && t.exportPNG(a, e);
|
|
17
|
-
};
|
|
18
|
-
w.prototype.exportJPEG = function(a, e) {
|
|
19
|
-
const t = this.getPlugin("export");
|
|
20
|
-
t && t.exportJPEG(a, e);
|
|
21
|
-
};
|
|
22
|
-
w.prototype.exportSVG = function(a, e) {
|
|
23
|
-
const t = this.getPlugin("export");
|
|
24
|
-
t && t.exportSVG(a, e);
|
|
25
|
-
};
|
|
26
|
-
var U = function(a, e, t, n) {
|
|
27
|
-
var i = arguments.length, s = i < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, f;
|
|
28
|
-
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") s = Reflect.decorate(a, e, t, n);
|
|
29
|
-
else for (var c = a.length - 1; c >= 0; c--) (f = a[c]) && (s = (i < 3 ? f(s) : i > 3 ? f(e, t, s) : f(e, t)) || s);
|
|
30
|
-
return i > 3 && s && Object.defineProperty(e, t, s), s;
|
|
31
|
-
};
|
|
32
|
-
class z extends j {
|
|
33
|
-
constructor() {
|
|
34
|
-
super(), this.name = "export";
|
|
35
|
-
}
|
|
36
|
-
get view() {
|
|
37
|
-
return this.graph.view;
|
|
38
|
-
}
|
|
39
|
-
init(e) {
|
|
40
|
-
this.graph = e;
|
|
41
|
-
}
|
|
42
|
-
exportPNG(e = "chart", t = {}) {
|
|
43
|
-
this.toPNG((n) => {
|
|
44
|
-
G.downloadDataUri(n, e);
|
|
45
|
-
}, t);
|
|
46
|
-
}
|
|
47
|
-
exportJPEG(e = "chart", t = {}) {
|
|
48
|
-
this.toPNG((n) => {
|
|
49
|
-
G.downloadDataUri(n, e);
|
|
50
|
-
}, t);
|
|
51
|
-
}
|
|
52
|
-
exportSVG(e = "chart", t = {}) {
|
|
53
|
-
this.toSVG((n) => {
|
|
54
|
-
G.downloadDataUri(G.svgToDataUrl(n), e);
|
|
55
|
-
}, t);
|
|
56
|
-
}
|
|
57
|
-
toSVG(e, t = {}) {
|
|
58
|
-
this.notify("before:export", t);
|
|
59
|
-
const n = this.view.svg, i = E.create(n).clone();
|
|
60
|
-
let s = i.node;
|
|
61
|
-
const f = i.findOne(`.${this.view.prefixClassName("graph-svg-stage")}`), c = t.viewBox || this.graph.graphToLocal(this.graph.getContentBBox()), h = t.preserveDimensions;
|
|
62
|
-
if (h) {
|
|
63
|
-
const o = typeof h == "boolean" ? c : h;
|
|
64
|
-
i.attr({
|
|
65
|
-
width: o.width,
|
|
66
|
-
height: o.height
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
if (i.removeAttribute("style").attr("viewBox", [c.x, c.y, c.width, c.height].join(" ")), f.removeAttribute("transform"), t.copyStyles !== !1) {
|
|
70
|
-
const o = n.ownerDocument, g = Array.from(n.querySelectorAll("*")), d = Array.from(s.querySelectorAll("*")), u = o.styleSheets.length, P = [];
|
|
71
|
-
for (let r = u - 1; r >= 0; r -= 1)
|
|
72
|
-
P[r] = o.styleSheets[r], o.styleSheets[r].disabled = !0;
|
|
73
|
-
const x = {};
|
|
74
|
-
g.forEach((r, m) => {
|
|
75
|
-
const y = window.getComputedStyle(r, null), v = {};
|
|
76
|
-
Object.keys(y).forEach((S) => {
|
|
77
|
-
v[S] = y.getPropertyValue(S);
|
|
78
|
-
}), x[m] = v;
|
|
79
|
-
}), u !== o.styleSheets.length && P.forEach((r, m) => {
|
|
80
|
-
o.styleSheets[m] = r;
|
|
81
|
-
});
|
|
82
|
-
for (let r = 0; r < u; r += 1)
|
|
83
|
-
o.styleSheets[r].disabled = !1;
|
|
84
|
-
const D = {};
|
|
85
|
-
g.forEach((r, m) => {
|
|
86
|
-
const y = window.getComputedStyle(r, null), v = x[m], S = {};
|
|
87
|
-
Object.keys(y).forEach((b) => {
|
|
88
|
-
!V.isNumber(b) && y.getPropertyValue(b) !== v[b] && (S[b] = y.getPropertyValue(b));
|
|
89
|
-
}), D[m] = S;
|
|
90
|
-
}), d.forEach((r, m) => {
|
|
91
|
-
O.css(r, D[m]);
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
const p = t.stylesheet;
|
|
95
|
-
if (typeof p == "string") {
|
|
96
|
-
const o = n.ownerDocument.implementation.createDocument(null, "xml", null).createCDATASection(p);
|
|
97
|
-
i.prepend(E.create("style", {
|
|
98
|
-
type: "text/css"
|
|
99
|
-
}, [o]));
|
|
100
|
-
}
|
|
101
|
-
const l = () => {
|
|
102
|
-
const o = t.beforeSerialize;
|
|
103
|
-
if (typeof o == "function") {
|
|
104
|
-
const d = N.call(o, this.graph, s);
|
|
105
|
-
d instanceof SVGSVGElement && (s = d);
|
|
106
|
-
}
|
|
107
|
-
const g = new XMLSerializer().serializeToString(s).replace(/ /g, " ");
|
|
108
|
-
this.notify("after:export", t), e(g);
|
|
109
|
-
};
|
|
110
|
-
if (t.serializeImages) {
|
|
111
|
-
const o = i.find("image").map((g) => new Promise((d) => {
|
|
112
|
-
const u = g.attr("xlink:href") || g.attr("href");
|
|
113
|
-
G.imageToDataUri(u, (P, x) => {
|
|
114
|
-
!P && x && g.attr("xlink:href", x), d();
|
|
115
|
-
});
|
|
116
|
-
}));
|
|
117
|
-
Promise.all(o).then(l);
|
|
118
|
-
} else
|
|
119
|
-
l();
|
|
120
|
-
}
|
|
121
|
-
toDataURL(e, t) {
|
|
122
|
-
let n = t.viewBox || this.graph.getContentBBox();
|
|
123
|
-
const i = V.normalizeSides(t.padding);
|
|
124
|
-
t.width && t.height && (i.left + i.right >= t.width && (i.left = i.right = 0), i.top + i.bottom >= t.height && (i.top = i.bottom = 0));
|
|
125
|
-
const s = new C(-i.left, -i.top, i.left + i.right, i.top + i.bottom);
|
|
126
|
-
if (t.width && t.height) {
|
|
127
|
-
const l = n.width + i.left + i.right, o = n.height + i.top + i.bottom;
|
|
128
|
-
s.scale(l / t.width, o / t.height);
|
|
129
|
-
}
|
|
130
|
-
n = C.create(n).moveAndExpand(s);
|
|
131
|
-
const f = typeof t.width == "number" && typeof t.height == "number" ? { width: t.width, height: t.height } : n;
|
|
132
|
-
let c = t.ratio ? parseFloat(t.ratio) : 1;
|
|
133
|
-
(!Number.isFinite(c) || c === 0) && (c = 1);
|
|
134
|
-
const h = {
|
|
135
|
-
width: Math.max(Math.round(f.width * c), 1),
|
|
136
|
-
height: Math.max(Math.round(f.height * c), 1)
|
|
137
|
-
};
|
|
138
|
-
{
|
|
139
|
-
const l = document.createElement("canvas"), o = l.getContext("2d");
|
|
140
|
-
l.width = h.width, l.height = h.height;
|
|
141
|
-
const g = h.width - 1, d = h.height - 1;
|
|
142
|
-
o.fillStyle = "rgb(1,1,1)", o.fillRect(g, d, 1, 1);
|
|
143
|
-
const u = o.getImageData(g, d, 1, 1).data;
|
|
144
|
-
if (u[0] !== 1 || u[1] !== 1 || u[2] !== 1)
|
|
145
|
-
throw new Error("size exceeded");
|
|
146
|
-
}
|
|
147
|
-
const p = new Image();
|
|
148
|
-
p.onload = () => {
|
|
149
|
-
const l = document.createElement("canvas");
|
|
150
|
-
l.width = h.width, l.height = h.height;
|
|
151
|
-
const o = l.getContext("2d");
|
|
152
|
-
o.fillStyle = t.backgroundColor || "white", o.fillRect(0, 0, h.width, h.height);
|
|
153
|
-
try {
|
|
154
|
-
o.drawImage(p, 0, 0, h.width, h.height);
|
|
155
|
-
const g = l.toDataURL(t.type, t.quality);
|
|
156
|
-
e(g);
|
|
157
|
-
} catch {
|
|
158
|
-
}
|
|
159
|
-
}, this.toSVG((l) => {
|
|
160
|
-
p.src = `data:image/svg+xml,${encodeURIComponent(l)}`;
|
|
161
|
-
}, Object.assign(Object.assign({}, t), { viewBox: n, serializeImages: !0, preserveDimensions: Object.assign({}, h) }));
|
|
162
|
-
}
|
|
163
|
-
toPNG(e, t = {}) {
|
|
164
|
-
this.toDataURL(e, Object.assign(Object.assign({}, t), { type: "image/png" }));
|
|
165
|
-
}
|
|
166
|
-
toJPEG(e, t = {}) {
|
|
167
|
-
this.toDataURL(e, Object.assign(Object.assign({}, t), { type: "image/jpeg" }));
|
|
168
|
-
}
|
|
169
|
-
notify(e, t) {
|
|
170
|
-
this.trigger(e, t), this.graph.trigger(e, t);
|
|
171
|
-
}
|
|
172
|
-
dispose() {
|
|
173
|
-
this.off();
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
U([
|
|
177
|
-
j.dispose()
|
|
178
|
-
], z.prototype, "dispose", null);
|
|
179
|
-
export {
|
|
180
|
-
z as Export
|
|
181
|
-
};
|