@leafer-in/linker 2.3.0 → 2.3.2
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/dist/linker.cjs +569 -0
- package/dist/linker.esm.js +567 -0
- package/dist/linker.esm.min.js +2 -0
- package/dist/linker.esm.min.js.map +1 -0
- package/dist/linker.js +544 -0
- package/dist/linker.min.cjs +2 -0
- package/dist/linker.min.cjs.map +1 -0
- package/dist/linker.min.js +2 -0
- package/dist/linker.min.js.map +1 -0
- package/package.json +6 -6
package/dist/linker.js
ADDED
|
@@ -0,0 +1,544 @@
|
|
|
1
|
+
this.LeaferIN = this.LeaferIN || {};
|
|
2
|
+
|
|
3
|
+
this.LeaferIN.linker = function(exports, draw, core) {
|
|
4
|
+
"use strict";
|
|
5
|
+
function __decorate(decorators, target, key, desc) {
|
|
6
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
7
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
8
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
9
|
+
}
|
|
10
|
+
typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
|
|
11
|
+
var e = new Error(message);
|
|
12
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
13
|
+
};
|
|
14
|
+
class LinkerData extends draw.LineData {
|
|
15
|
+
get __usePathBox() {
|
|
16
|
+
return this.path || this.__pathInputed;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
const {directionData: directionData} = draw.AroundHelper;
|
|
20
|
+
const directionNames = [ "top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "center" ];
|
|
21
|
+
const LinkerHelper = {
|
|
22
|
+
getCtrlPoint(linker, node, point, direction, ctrl, offsetAngle) {
|
|
23
|
+
if (node) {
|
|
24
|
+
point = node.getBoxPoint(point, linker);
|
|
25
|
+
}
|
|
26
|
+
let ctrlPoint;
|
|
27
|
+
switch (direction) {
|
|
28
|
+
case "left":
|
|
29
|
+
case "top-left":
|
|
30
|
+
case "bottom-left":
|
|
31
|
+
ctrlPoint = {
|
|
32
|
+
x: point.x - ctrl.x,
|
|
33
|
+
y: point.y
|
|
34
|
+
};
|
|
35
|
+
break;
|
|
36
|
+
|
|
37
|
+
case "top":
|
|
38
|
+
ctrlPoint = {
|
|
39
|
+
x: point.x,
|
|
40
|
+
y: point.y - ctrl.y
|
|
41
|
+
};
|
|
42
|
+
break;
|
|
43
|
+
|
|
44
|
+
case "right":
|
|
45
|
+
case "top-right":
|
|
46
|
+
case "bottom-right":
|
|
47
|
+
ctrlPoint = {
|
|
48
|
+
x: point.x + ctrl.x,
|
|
49
|
+
y: point.y
|
|
50
|
+
};
|
|
51
|
+
break;
|
|
52
|
+
|
|
53
|
+
case "bottom":
|
|
54
|
+
ctrlPoint = {
|
|
55
|
+
x: point.x,
|
|
56
|
+
y: point.y + ctrl.y
|
|
57
|
+
};
|
|
58
|
+
break;
|
|
59
|
+
|
|
60
|
+
default:
|
|
61
|
+
ctrlPoint = {
|
|
62
|
+
x: point.x,
|
|
63
|
+
y: point.y
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
if (offsetAngle) {
|
|
67
|
+
offsetAngle = offsetAngle / 180 * Math.PI;
|
|
68
|
+
ctrlPoint = {
|
|
69
|
+
x: (ctrlPoint.x - point.x) * Math.cos(offsetAngle) - (ctrlPoint.y - point.y) * Math.sin(offsetAngle) + point.x,
|
|
70
|
+
y: (ctrlPoint.x - point.x) * Math.sin(offsetAngle) + (ctrlPoint.y - point.y) * Math.cos(offsetAngle) + point.y
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
if (node) node.getWorldPointByBox(ctrlPoint, linker, undefined, true);
|
|
74
|
+
return ctrlPoint;
|
|
75
|
+
},
|
|
76
|
+
isOppositeDirection(from, to) {
|
|
77
|
+
switch (from) {
|
|
78
|
+
case "left":
|
|
79
|
+
return to == "right";
|
|
80
|
+
|
|
81
|
+
case "top":
|
|
82
|
+
return to == "bottom";
|
|
83
|
+
|
|
84
|
+
case "right":
|
|
85
|
+
return to == "left";
|
|
86
|
+
|
|
87
|
+
case "bottom":
|
|
88
|
+
return to == "top";
|
|
89
|
+
|
|
90
|
+
case "center":
|
|
91
|
+
return to == "center";
|
|
92
|
+
|
|
93
|
+
default:
|
|
94
|
+
return false;
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
getDirectionForFromPoint(from, to) {
|
|
98
|
+
const a = from.x - to.x;
|
|
99
|
+
const b = from.y - to.y;
|
|
100
|
+
let direction;
|
|
101
|
+
let angle = 180 * Math.atan2(b, a) / Math.PI;
|
|
102
|
+
if (angle < 0) angle = 360 + angle;
|
|
103
|
+
if (angle > 315 || angle < 45) {
|
|
104
|
+
direction = "left";
|
|
105
|
+
} else if (angle > 45 && angle < 135) {
|
|
106
|
+
direction = "top";
|
|
107
|
+
} else if (angle > 135 && angle < 225) {
|
|
108
|
+
direction = "right";
|
|
109
|
+
} else {
|
|
110
|
+
direction = "bottom";
|
|
111
|
+
}
|
|
112
|
+
return direction;
|
|
113
|
+
},
|
|
114
|
+
getRotateDirection(direction, rotation, totalDirection = 8) {
|
|
115
|
+
let directionIndex = draw.Direction9[direction];
|
|
116
|
+
directionIndex = (directionIndex + Math.round(rotation / (360 / totalDirection))) % totalDirection;
|
|
117
|
+
if (directionIndex < 0) directionIndex += totalDirection;
|
|
118
|
+
return directionNames[directionIndex];
|
|
119
|
+
},
|
|
120
|
+
getDirection: getDirection,
|
|
121
|
+
getPointDirection: getPointDirection,
|
|
122
|
+
autoRotatePoint(point, origin, ui) {
|
|
123
|
+
const {rotation: rotation, scaleX: scaleX, scaleY: scaleY} = ui;
|
|
124
|
+
const oneFlip = scaleX * scaleY < 0;
|
|
125
|
+
if (rotation || oneFlip) draw.PointHelper.rotate(point, oneFlip ? -rotation : rotation, origin);
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
function getPointDirection(boxPoint, bounds, eight) {
|
|
129
|
+
const {width: width, height: height} = bounds;
|
|
130
|
+
const hitRadiusX = width / 4;
|
|
131
|
+
const hitRadiusY = height / 4;
|
|
132
|
+
for (let i = 0; i < directionData.length; i++) {
|
|
133
|
+
const unit = directionData[i];
|
|
134
|
+
const px = unit.x * width;
|
|
135
|
+
const py = unit.y * height;
|
|
136
|
+
const dx = boxPoint.x - px;
|
|
137
|
+
const dy = boxPoint.y - py;
|
|
138
|
+
if (Math.abs(dx) <= hitRadiusX && Math.abs(dy) <= hitRadiusY) {
|
|
139
|
+
if (eight) {
|
|
140
|
+
if (directionNames[i] !== "center") return directionNames[i];
|
|
141
|
+
} else return directionNames[i];
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
return undefined;
|
|
145
|
+
}
|
|
146
|
+
function getDirection(boxPoint, bounds, four) {
|
|
147
|
+
const {width: width, height: height} = bounds;
|
|
148
|
+
const center = draw.BoundsHelper.getPoint(bounds, "center", true);
|
|
149
|
+
const dx = boxPoint.x - center.x;
|
|
150
|
+
const dy = boxPoint.y - center.y;
|
|
151
|
+
if (!four) {
|
|
152
|
+
if (Math.abs(dx) < width / 4 && Math.abs(dy) < height / 4) return "center";
|
|
153
|
+
}
|
|
154
|
+
const ax = Math.abs(dx) * height;
|
|
155
|
+
const ay = Math.abs(dy) * width;
|
|
156
|
+
if (ax > ay) {
|
|
157
|
+
return dx > 0 ? "right" : "left";
|
|
158
|
+
}
|
|
159
|
+
return dy > 0 ? "bottom" : "top";
|
|
160
|
+
}
|
|
161
|
+
function linkerPointType(defaultValue) {
|
|
162
|
+
return draw.decorateLeafAttr(defaultValue, key => draw.attr({
|
|
163
|
+
set(value) {
|
|
164
|
+
if (this.__setAttr(key, value)) {
|
|
165
|
+
const layout = this.__layout;
|
|
166
|
+
if (!layout.linkerChanged) {
|
|
167
|
+
draw.doBoundsType(this);
|
|
168
|
+
draw.doStrokeType(this);
|
|
169
|
+
layout.linkerChanged = true;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}));
|
|
174
|
+
}
|
|
175
|
+
const {moveTo: moveTo, bezierCurveTo: bezierCurveTo, drawPoints: drawPoints$1} = draw.PathCommandDataHelper;
|
|
176
|
+
const {isEmpty: isEmpty, getPoint: getPoint} = draw.BoundsHelper;
|
|
177
|
+
const {getDistance: getDistance} = draw.PointHelper;
|
|
178
|
+
const {getCtrlPoint: getCtrlPoint, getDirectionForFromPoint: getDirectionForFromPoint, isOppositeDirection: isOppositeDirection} = LinkerHelper;
|
|
179
|
+
const {max: max, min: min, abs: abs} = Math;
|
|
180
|
+
exports.Linker = class Linker extends draw.Line {
|
|
181
|
+
get __tag() {
|
|
182
|
+
return "Linker";
|
|
183
|
+
}
|
|
184
|
+
constructor(data) {
|
|
185
|
+
super(data);
|
|
186
|
+
this.onStartNodeChange = this.onStartNodeChange.bind(this);
|
|
187
|
+
this.onEndNodeChange = this.onEndNodeChange.bind(this);
|
|
188
|
+
}
|
|
189
|
+
__updatePath() {
|
|
190
|
+
const layout = this.__layout;
|
|
191
|
+
const {startNode: startNode, endNode: endNode} = this;
|
|
192
|
+
if (layout.linkerChanged) {
|
|
193
|
+
this.updateLinkerNode("start");
|
|
194
|
+
this.updateLinkerNode("end");
|
|
195
|
+
this.updateLinkerPoint("start");
|
|
196
|
+
this.updateLinkerPoint("end");
|
|
197
|
+
if (startNode !== this.startNode) this.listenLinkerNode(this.startNode, startNode, "start");
|
|
198
|
+
if (endNode !== this.endNode) this.listenLinkerNode(this.endNode, endNode, "end");
|
|
199
|
+
layout.linkerChanged = false;
|
|
200
|
+
}
|
|
201
|
+
this.updateLinkerPath();
|
|
202
|
+
}
|
|
203
|
+
listenLinkerNode(newNode, oldNode, type) {
|
|
204
|
+
if (oldNode) {
|
|
205
|
+
oldNode.off(draw.BoundsEvent.WORLD, type === "end" ? this.onEndNodeChange : this.onStartNodeChange);
|
|
206
|
+
const list = type === "end" ? oldNode.endLinker : oldNode.startLinker;
|
|
207
|
+
if (list) {
|
|
208
|
+
const index = list.indexOf(this);
|
|
209
|
+
if (index > -1) list.splice(index, 1);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
if (newNode) {
|
|
213
|
+
newNode.on(draw.BoundsEvent.WORLD, type === "end" ? this.onEndNodeChange : this.onStartNodeChange);
|
|
214
|
+
const list = type === "end" ? newNode.endLinker || (newNode.endLinker = []) : newNode.startLinker || (newNode.startLinker = []);
|
|
215
|
+
list.push(this);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
onStartNodeChange() {
|
|
219
|
+
this.onLinkerNodeChange("start");
|
|
220
|
+
}
|
|
221
|
+
onEndNodeChange() {
|
|
222
|
+
this.onLinkerNodeChange("end");
|
|
223
|
+
}
|
|
224
|
+
onLinkerNodeChange(type) {
|
|
225
|
+
if (this.leaferIsCreated) {
|
|
226
|
+
const {layouter: layouter, zoomLayer: zoomLayer} = this.leafer;
|
|
227
|
+
if (layouter.__updatedList.has(zoomLayer)) return;
|
|
228
|
+
layouter.addExtra(this, true);
|
|
229
|
+
}
|
|
230
|
+
const {startData: startData, endData: endData} = this;
|
|
231
|
+
if (type == "start") {
|
|
232
|
+
this.updateLinkerPoint("start");
|
|
233
|
+
if (endData && endData.auto) this.updateLinkerPoint("end");
|
|
234
|
+
} else {
|
|
235
|
+
if (startData && startData.auto) this.updateLinkerPoint("start");
|
|
236
|
+
this.updateLinkerPoint("end");
|
|
237
|
+
}
|
|
238
|
+
this.__layout.boxChange();
|
|
239
|
+
draw.LeafHelper.updateBounds(this);
|
|
240
|
+
}
|
|
241
|
+
updateLinkerNode(type) {
|
|
242
|
+
const {startPoint: startPoint, endPoint: endPoint} = this;
|
|
243
|
+
const nowPoint = type === "end" ? endPoint : startPoint;
|
|
244
|
+
if (nowPoint) {
|
|
245
|
+
const {id: id} = nowPoint;
|
|
246
|
+
const ui = id && (draw.isString(id) ? this.app.findId(id) : id);
|
|
247
|
+
type === "end" ? this.endNode = ui : this.startNode = ui;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
getLinkerNodeCenter(type) {
|
|
251
|
+
const {startPoint: startPoint, endPoint: endPoint, startNode: startNode, endNode: endNode, startData: startData, endData: endData} = this;
|
|
252
|
+
const node = type === "end" ? endNode : startNode;
|
|
253
|
+
const data = type === "end" ? endData || endPoint : startData || startPoint;
|
|
254
|
+
if (node) {
|
|
255
|
+
const {worldRenderBounds: worldRenderBounds} = node;
|
|
256
|
+
if (isEmpty(worldRenderBounds)) draw.LeafHelper.updateBounds(node);
|
|
257
|
+
return getPoint(node.worldRenderBounds, "center");
|
|
258
|
+
} else {
|
|
259
|
+
return data && draw.isObject(data.point) && this.getWorldPointByLocal(data.point);
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
updateLinkerPoint(type) {
|
|
263
|
+
const {startPoint: startPoint, endPoint: endPoint} = this;
|
|
264
|
+
const nowPoint = type === "end" ? endPoint : startPoint;
|
|
265
|
+
if (nowPoint) {
|
|
266
|
+
const data = {};
|
|
267
|
+
const {id: id, offset: offset} = nowPoint;
|
|
268
|
+
let {direction: direction, point: point} = nowPoint;
|
|
269
|
+
if (direction === "center" || !direction && id && !point) {
|
|
270
|
+
const start = this.getLinkerNodeCenter("start");
|
|
271
|
+
const end = this.getLinkerNodeCenter("end");
|
|
272
|
+
const from = type === "end" ? end : start;
|
|
273
|
+
const to = type === "end" ? start : end;
|
|
274
|
+
if (from && to) direction = getDirectionForFromPoint(from, to);
|
|
275
|
+
data.auto = true;
|
|
276
|
+
}
|
|
277
|
+
if (!direction && draw.isString(point)) direction = point;
|
|
278
|
+
data.direction = direction;
|
|
279
|
+
const ui = type === "end" ? this.endNode : this.startNode;
|
|
280
|
+
let p;
|
|
281
|
+
if (ui) {
|
|
282
|
+
if (!point) point = direction;
|
|
283
|
+
if (point) {
|
|
284
|
+
const {boxBounds: boxBounds} = ui;
|
|
285
|
+
if (isEmpty(boxBounds)) draw.LeafHelper.updateBounds(ui);
|
|
286
|
+
p = getPoint(boxBounds, point, true);
|
|
287
|
+
ui.getWorldPointByBox(p, this, false, true);
|
|
288
|
+
}
|
|
289
|
+
} else {
|
|
290
|
+
if (draw.isObject(point)) p = point;
|
|
291
|
+
}
|
|
292
|
+
if (p && offset) {
|
|
293
|
+
const o = Object.assign({}, offset);
|
|
294
|
+
if (!offset.x) o.x = 0;
|
|
295
|
+
if (!offset.y) o.y = 0;
|
|
296
|
+
if (ui) ui.getWorldPoint(o, this, true, true);
|
|
297
|
+
draw.PointHelper.move(p, o);
|
|
298
|
+
}
|
|
299
|
+
data.point = p;
|
|
300
|
+
type === "end" ? this.endData = p && data : this.startData = p && data;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
updateLinkerPath() {
|
|
304
|
+
const data = this.__;
|
|
305
|
+
const path = data.path = [];
|
|
306
|
+
const hasPoints = data.points && data.points.length;
|
|
307
|
+
const {startData: startData, endData: endData, startNode: startNode, endNode: endNode} = this;
|
|
308
|
+
if (!startData || !endData) {
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
const startPoint = startData.point, endPoint = endData.point;
|
|
312
|
+
const startDirection = startData.direction, endDirection = endData.direction;
|
|
313
|
+
const half = {
|
|
314
|
+
x: abs((startPoint.x - endPoint.x) / 2),
|
|
315
|
+
y: abs((startPoint.y - endPoint.y) / 2)
|
|
316
|
+
};
|
|
317
|
+
const arrowWidth = this.__.strokeWidth * 8;
|
|
318
|
+
let minCtrl;
|
|
319
|
+
if (this.__.__useArrow) {
|
|
320
|
+
const ratio = min(getDistance(startPoint, endPoint) / (arrowWidth * 25), 1);
|
|
321
|
+
minCtrl = max(arrowWidth * ratio * 12, arrowWidth * 3);
|
|
322
|
+
} else {
|
|
323
|
+
minCtrl = arrowWidth * 2;
|
|
324
|
+
}
|
|
325
|
+
if (endDirection) {
|
|
326
|
+
if (isOppositeDirection(startDirection, endDirection) && startDirection === getDirectionForFromPoint(startPoint, endPoint)) {
|
|
327
|
+
minCtrl = arrowWidth * 2;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
half.x = max(minCtrl, half.x);
|
|
331
|
+
half.y = max(minCtrl, half.y);
|
|
332
|
+
if (hasPoints) {
|
|
333
|
+
minCtrl *= .6;
|
|
334
|
+
const points = draw.PointHelper.toNumberPoints(data.points);
|
|
335
|
+
drawPoints$1(path, [ startPoint.x, startPoint.y, ...points, endPoint.x, endPoint.y ], data.curve, false, data);
|
|
336
|
+
if (startDirection) {
|
|
337
|
+
const handleX = path[4];
|
|
338
|
+
const handleY = path[5];
|
|
339
|
+
half.x = max(minCtrl, abs(handleX - startPoint.x));
|
|
340
|
+
half.y = max(minCtrl, abs(handleY - startPoint.y));
|
|
341
|
+
const startCtrlPoint = getCtrlPoint(this, startNode, startPoint, startDirection, half);
|
|
342
|
+
path[4] = startCtrlPoint.x;
|
|
343
|
+
path[5] = startCtrlPoint.y;
|
|
344
|
+
}
|
|
345
|
+
const len = path.length;
|
|
346
|
+
if (endDirection) {
|
|
347
|
+
const handleX = path[len - 4];
|
|
348
|
+
const handleY = path[len - 3];
|
|
349
|
+
half.x = max(minCtrl, abs(handleX - endPoint.x));
|
|
350
|
+
half.y = max(minCtrl, abs(handleY - endPoint.y));
|
|
351
|
+
const endCtrlPoint = getCtrlPoint(this, endNode, endPoint, endDirection, half);
|
|
352
|
+
path[len - 4] = endCtrlPoint.x;
|
|
353
|
+
path[len - 3] = endCtrlPoint.y;
|
|
354
|
+
} else {
|
|
355
|
+
path[len - 4] = endPoint.x;
|
|
356
|
+
path[len - 3] = endPoint.y;
|
|
357
|
+
}
|
|
358
|
+
} else {
|
|
359
|
+
const startCtrlPoint = startDirection ? getCtrlPoint(this, startNode, startPoint, startDirection, half) : startPoint;
|
|
360
|
+
const endCtrlPoint = endDirection ? getCtrlPoint(this, endNode, endPoint, endDirection, half) : endPoint;
|
|
361
|
+
moveTo(path, startPoint.x, startPoint.y);
|
|
362
|
+
bezierCurveTo(path, startCtrlPoint.x, startCtrlPoint.y, endCtrlPoint.x, endCtrlPoint.y, endPoint.x, endPoint.y);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
createStartPoint(worldPoint, node, options) {
|
|
366
|
+
const data = this.createLinkerPoint(worldPoint, node, options);
|
|
367
|
+
this.startPoint = data;
|
|
368
|
+
return data;
|
|
369
|
+
}
|
|
370
|
+
createEndPoint(worldPoint, node, options) {
|
|
371
|
+
const data = this.createLinkerPoint(worldPoint, node, options);
|
|
372
|
+
this.endPoint = data;
|
|
373
|
+
return data;
|
|
374
|
+
}
|
|
375
|
+
createLinkerPoint(worldPoint, node, options) {
|
|
376
|
+
const data = {};
|
|
377
|
+
if (node && node.id) {
|
|
378
|
+
const point = node.getBoxPoint(worldPoint);
|
|
379
|
+
const {boxBounds: boxBounds} = node;
|
|
380
|
+
const mode = options && options.mode;
|
|
381
|
+
const edge = mode === "edge" || !mode;
|
|
382
|
+
const four = mode === "four";
|
|
383
|
+
const auto = mode === "auto";
|
|
384
|
+
const free = mode === "free";
|
|
385
|
+
if (!auto) {
|
|
386
|
+
if (four) {
|
|
387
|
+
data.point = LinkerHelper.getDirection(point, boxBounds, four);
|
|
388
|
+
} else {
|
|
389
|
+
data.direction = LinkerHelper.getDirection(point, boxBounds, edge);
|
|
390
|
+
data.point = LinkerHelper.getPointDirection(point, boxBounds, edge) || data.direction;
|
|
391
|
+
if (data.point === data.direction) delete data.direction;
|
|
392
|
+
if (free || edge) {
|
|
393
|
+
const snapPoint = draw.BoundsHelper.getPoint(boxBounds, data.point);
|
|
394
|
+
const offsetX = point.x - snapPoint.x;
|
|
395
|
+
const offsetY = point.y - snapPoint.y;
|
|
396
|
+
const snapRadius = options && options.snapRadius || 10;
|
|
397
|
+
if (Math.abs(offsetX) > snapRadius || Math.abs(offsetY) > snapRadius) {
|
|
398
|
+
const offset = data.offset = {
|
|
399
|
+
x: Math.abs(offsetX) > snapRadius ? offsetX : 0,
|
|
400
|
+
y: Math.abs(offsetY) > snapRadius ? offsetY : 0
|
|
401
|
+
};
|
|
402
|
+
if (edge && (offset.x || offset.y)) {
|
|
403
|
+
switch (data.direction || data.point) {
|
|
404
|
+
case "top":
|
|
405
|
+
case "bottom":
|
|
406
|
+
offset.y = 0;
|
|
407
|
+
break;
|
|
408
|
+
|
|
409
|
+
case "right":
|
|
410
|
+
case "left":
|
|
411
|
+
offset.x = 0;
|
|
412
|
+
break;
|
|
413
|
+
|
|
414
|
+
default:
|
|
415
|
+
if (offset.x > offset.y) offset.y = 0; else offset.x = 0;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
data.id = node.id;
|
|
423
|
+
} else {
|
|
424
|
+
data.point = this.getLocalPoint(worldPoint);
|
|
425
|
+
}
|
|
426
|
+
return data;
|
|
427
|
+
}
|
|
428
|
+
};
|
|
429
|
+
__decorate([ draw.dataProcessor(LinkerData) ], exports.Linker.prototype, "__", void 0);
|
|
430
|
+
__decorate([ linkerPointType() ], exports.Linker.prototype, "startPoint", void 0);
|
|
431
|
+
__decorate([ linkerPointType() ], exports.Linker.prototype, "endPoint", void 0);
|
|
432
|
+
__decorate([ draw.pathType({
|
|
433
|
+
type: "C",
|
|
434
|
+
value: .5
|
|
435
|
+
}) ], exports.Linker.prototype, "curve", void 0);
|
|
436
|
+
exports.Linker = __decorate([ draw.registerUI() ], exports.Linker);
|
|
437
|
+
const {toNumberPoints: toNumberPoints} = core.PointHelper;
|
|
438
|
+
const {M: M, L: L, C: C, Z: Z} = core.PathCommandMap;
|
|
439
|
+
function drawPoints(data, originPoints, curve, close) {
|
|
440
|
+
const points = toNumberPoints(originPoints);
|
|
441
|
+
const count = points.length >> 1;
|
|
442
|
+
if (count < 2) return;
|
|
443
|
+
data.push(M, points[0], points[1]);
|
|
444
|
+
if (!curve || count < 3) {
|
|
445
|
+
for (let i = 1; i < count; i++) {
|
|
446
|
+
data.push(L, points[i * 2], points[i * 2 + 1]);
|
|
447
|
+
}
|
|
448
|
+
if (close) data.push(Z);
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
451
|
+
let tension = curve === true ? .5 : curve;
|
|
452
|
+
if (tension < 0) tension = 0; else if (tension > 1) tension = 1;
|
|
453
|
+
const end = close ? count : count - 1;
|
|
454
|
+
let lastOutX = points[0];
|
|
455
|
+
let lastOutY = points[1];
|
|
456
|
+
{
|
|
457
|
+
const dx = points[2] - points[0];
|
|
458
|
+
const dy = points[3] - points[1];
|
|
459
|
+
const len = Math.sqrt(dx * dx + dy * dy);
|
|
460
|
+
if (len) {
|
|
461
|
+
lastOutX = points[0] + dx / len * len * tension;
|
|
462
|
+
lastOutY = points[1] + dy / len * len * tension;
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
for (let i = 0; i < end; i++) {
|
|
466
|
+
const index = i + 1 === count ? 0 : i + 1;
|
|
467
|
+
const bx = points[index * 2];
|
|
468
|
+
const by = points[index * 2 + 1];
|
|
469
|
+
const prev = index === 0 ? count - 1 : index - 1;
|
|
470
|
+
const next = index + 1 === count ? 0 : index + 1;
|
|
471
|
+
const ax = points[prev * 2];
|
|
472
|
+
const ay = points[prev * 2 + 1];
|
|
473
|
+
const cx = points[next * 2];
|
|
474
|
+
const cy = points[next * 2 + 1];
|
|
475
|
+
let bax = ax - bx;
|
|
476
|
+
let bay = ay - by;
|
|
477
|
+
let bcx = cx - bx;
|
|
478
|
+
let bcy = cy - by;
|
|
479
|
+
const ab = Math.sqrt(bax * bax + bay * bay);
|
|
480
|
+
const bc = Math.sqrt(bcx * bcx + bcy * bcy);
|
|
481
|
+
let inX = bx;
|
|
482
|
+
let inY = by;
|
|
483
|
+
let outX = bx;
|
|
484
|
+
let outY = by;
|
|
485
|
+
if (ab || bc) {
|
|
486
|
+
let ux = 0;
|
|
487
|
+
let uy = 0;
|
|
488
|
+
if (ab) {
|
|
489
|
+
ux += bax / ab;
|
|
490
|
+
uy += bay / ab;
|
|
491
|
+
}
|
|
492
|
+
if (bc) {
|
|
493
|
+
ux += bcx / bc;
|
|
494
|
+
uy += bcy / bc;
|
|
495
|
+
}
|
|
496
|
+
let uLen = Math.sqrt(ux * ux + uy * uy);
|
|
497
|
+
if (!uLen) {
|
|
498
|
+
if (bc) {
|
|
499
|
+
ux = bcx / bc;
|
|
500
|
+
uy = bcy / bc;
|
|
501
|
+
} else {
|
|
502
|
+
ux = bax / ab;
|
|
503
|
+
uy = bay / ab;
|
|
504
|
+
}
|
|
505
|
+
uLen = 1;
|
|
506
|
+
}
|
|
507
|
+
ux /= uLen;
|
|
508
|
+
uy /= uLen;
|
|
509
|
+
let tx = -uy;
|
|
510
|
+
let ty = ux;
|
|
511
|
+
if (bc) {
|
|
512
|
+
if (tx * bcx + ty * bcy < 0) {
|
|
513
|
+
tx = -tx;
|
|
514
|
+
ty = -ty;
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
let cos = 0;
|
|
518
|
+
if (ab && bc) {
|
|
519
|
+
cos = (bax * bcx + bay * bcy) / (ab * bc);
|
|
520
|
+
if (cos > 1) cos = 1; else if (cos < -1) cos = -1;
|
|
521
|
+
}
|
|
522
|
+
let angleFactor = Math.sqrt(Math.sqrt(Math.max(0, 1 - cos * cos)));
|
|
523
|
+
if (angleFactor < .15) angleFactor = .15;
|
|
524
|
+
let inLength = ab * tension * angleFactor;
|
|
525
|
+
let outLength = bc * tension * angleFactor;
|
|
526
|
+
const maxLength = Math.min(ab || bc, bc || ab) * .5;
|
|
527
|
+
if (inLength > maxLength) inLength = maxLength;
|
|
528
|
+
if (outLength > maxLength) outLength = maxLength;
|
|
529
|
+
inX = bx - tx * inLength;
|
|
530
|
+
inY = by - ty * inLength;
|
|
531
|
+
outX = bx + tx * outLength;
|
|
532
|
+
outY = by + ty * outLength;
|
|
533
|
+
}
|
|
534
|
+
data.push(C, lastOutX, lastOutY, inX, inY, bx, by);
|
|
535
|
+
lastOutX = outX;
|
|
536
|
+
lastOutY = outY;
|
|
537
|
+
}
|
|
538
|
+
if (close) data.push(Z);
|
|
539
|
+
}
|
|
540
|
+
draw.Plugin.add("linker");
|
|
541
|
+
draw.registerPointsCurve("C", drawPoints);
|
|
542
|
+
exports.LinkerData = LinkerData;
|
|
543
|
+
return exports;
|
|
544
|
+
}({}, LeaferUI, LeaferUI);
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var t=require("@leafer-ui/draw"),e=require("@leafer-ui/core");function n(t,e,n,o){var i,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,o);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(s=(r<3?i(s):r>3?i(e,n,s):i(e,n))||s);return r>3&&s&&Object.defineProperty(e,n,s),s}"function"==typeof SuppressedError&&SuppressedError;class o extends t.LineData{get __usePathBox(){return this.path||this.__pathInputed}}const{directionData:i}=t.AroundHelper,r=["top-left","top","top-right","right","bottom-right","bottom","bottom-left","left","center"],s={getCtrlPoint(t,e,n,o,i,r){let s;switch(e&&(n=e.getBoxPoint(n,t)),o){case"left":case"top-left":case"bottom-left":s={x:n.x-i.x,y:n.y};break;case"top":s={x:n.x,y:n.y-i.y};break;case"right":case"top-right":case"bottom-right":s={x:n.x+i.x,y:n.y};break;case"bottom":s={x:n.x,y:n.y+i.y};break;default:s={x:n.x,y:n.y}}return r&&(r=r/180*Math.PI,s={x:(s.x-n.x)*Math.cos(r)-(s.y-n.y)*Math.sin(r)+n.x,y:(s.x-n.x)*Math.sin(r)+(s.y-n.y)*Math.cos(r)+n.y}),e&&e.getWorldPointByBox(s,t,void 0,!0),s},isOppositeDirection(t,e){switch(t){case"left":return"right"==e;case"top":return"bottom"==e;case"right":return"left"==e;case"bottom":return"top"==e;case"center":return"center"==e;default:return!1}},getDirectionForFromPoint(t,e){const n=t.x-e.x,o=t.y-e.y;let i,r=180*Math.atan2(o,n)/Math.PI;return r<0&&(r=360+r),i=r>315||r<45?"left":r>45&&r<135?"top":r>135&&r<225?"right":"bottom",i},getRotateDirection(e,n,o=8){let i=t.Direction9[e];return i=(i+Math.round(n/(360/o)))%o,i<0&&(i+=o),r[i]},getDirection:function(e,n,o){const{width:i,height:r}=n,s=t.BoundsHelper.getPoint(n,"center",!0),a=e.x-s.x,d=e.y-s.y;if(!o&&Math.abs(a)<i/4&&Math.abs(d)<r/4)return"center";const h=Math.abs(a)*r,c=Math.abs(d)*i;if(h>c)return a>0?"right":"left";return d>0?"bottom":"top"},getPointDirection:function(t,e,n){const{width:o,height:s}=e,a=o/4,d=s/4;for(let e=0;e<i.length;e++){const h=i[e],c=h.x*o,p=h.y*s,u=t.x-c,l=t.y-p;if(Math.abs(u)<=a&&Math.abs(l)<=d){if(!n)return r[e];if("center"!==r[e])return r[e]}}return},autoRotatePoint(e,n,o){const{rotation:i,scaleX:r,scaleY:s}=o,a=r*s<0;(i||a)&&t.PointHelper.rotate(e,a?-i:i,n)}};function a(e){return t.decorateLeafAttr(e,e=>t.attr({set(n){if(this.__setAttr(e,n)){const e=this.__layout;e.linkerChanged||(t.doBoundsType(this),t.doStrokeType(this),e.linkerChanged=!0)}}}))}const{moveTo:d,bezierCurveTo:h,drawPoints:c}=t.PathCommandDataHelper,{isEmpty:p,getPoint:u}=t.BoundsHelper,{getDistance:l}=t.PointHelper,{getCtrlPoint:f,getDirectionForFromPoint:x,isOppositeDirection:y}=s,{max:g,min:P,abs:k}=Math;exports.Linker=class extends t.Line{get __tag(){return"Linker"}constructor(t){super(t),this.onStartNodeChange=this.onStartNodeChange.bind(this),this.onEndNodeChange=this.onEndNodeChange.bind(this)}__updatePath(){const t=this.__layout,{startNode:e,endNode:n}=this;t.linkerChanged&&(this.updateLinkerNode("start"),this.updateLinkerNode("end"),this.updateLinkerPoint("start"),this.updateLinkerPoint("end"),e!==this.startNode&&this.listenLinkerNode(this.startNode,e,"start"),n!==this.endNode&&this.listenLinkerNode(this.endNode,n,"end"),t.linkerChanged=!1),this.updateLinkerPath()}listenLinkerNode(e,n,o){if(n){n.off(t.BoundsEvent.WORLD,"end"===o?this.onEndNodeChange:this.onStartNodeChange);const e="end"===o?n.endLinker:n.startLinker;if(e){const t=e.indexOf(this);t>-1&&e.splice(t,1)}}if(e){e.on(t.BoundsEvent.WORLD,"end"===o?this.onEndNodeChange:this.onStartNodeChange);("end"===o?e.endLinker||(e.endLinker=[]):e.startLinker||(e.startLinker=[])).push(this)}}onStartNodeChange(){this.onLinkerNodeChange("start")}onEndNodeChange(){this.onLinkerNodeChange("end")}onLinkerNodeChange(e){if(this.leaferIsCreated){const{layouter:t,zoomLayer:e}=this.leafer;if(t.__updatedList.has(e))return;t.addExtra(this,!0)}const{startData:n,endData:o}=this;"start"==e?(this.updateLinkerPoint("start"),o&&o.auto&&this.updateLinkerPoint("end")):(n&&n.auto&&this.updateLinkerPoint("start"),this.updateLinkerPoint("end")),this.__layout.boxChange(),t.LeafHelper.updateBounds(this)}updateLinkerNode(e){const{startPoint:n,endPoint:o}=this,i="end"===e?o:n;if(i){const{id:n}=i,o=n&&(t.isString(n)?this.app.findId(n):n);"end"===e?this.endNode=o:this.startNode=o}}getLinkerNodeCenter(e){const{startPoint:n,endPoint:o,startNode:i,endNode:r,startData:s,endData:a}=this,d="end"===e?r:i,h="end"===e?a||o:s||n;if(d){const{worldRenderBounds:e}=d;return p(e)&&t.LeafHelper.updateBounds(d),u(d.worldRenderBounds,"center")}return h&&t.isObject(h.point)&&this.getWorldPointByLocal(h.point)}updateLinkerPoint(e){const{startPoint:n,endPoint:o}=this,i="end"===e?o:n;if(i){const n={},{id:o,offset:r}=i;let{direction:s,point:a}=i;if("center"===s||!s&&o&&!a){const t=this.getLinkerNodeCenter("start"),o=this.getLinkerNodeCenter("end"),i="end"===e?o:t,r="end"===e?t:o;i&&r&&(s=x(i,r)),n.auto=!0}!s&&t.isString(a)&&(s=a),n.direction=s;const d="end"===e?this.endNode:this.startNode;let h;if(d){if(a||(a=s),a){const{boxBounds:e}=d;p(e)&&t.LeafHelper.updateBounds(d),h=u(e,a,!0),d.getWorldPointByBox(h,this,!1,!0)}}else t.isObject(a)&&(h=a);if(h&&r){const e=Object.assign({},r);r.x||(e.x=0),r.y||(e.y=0),d&&d.getWorldPoint(e,this,!0,!0),t.PointHelper.move(h,e)}n.point=h,"end"===e?this.endData=h&&n:this.startData=h&&n}}updateLinkerPath(){const e=this.__,n=e.path=[],o=e.points&&e.points.length,{startData:i,endData:r,startNode:s,endNode:a}=this;if(!i||!r)return;const p=i.point,u=r.point,L=i.direction,b=r.direction,N={x:k((p.x-u.x)/2),y:k((p.y-u.y)/2)},C=8*this.__.strokeWidth;let M;if(this.__.__useArrow){const t=P(l(p,u)/(25*C),1);M=g(C*t*12,3*C)}else M=2*C;if(b&&y(L,b)&&L===x(p,u)&&(M=2*C),N.x=g(M,N.x),N.y=g(M,N.y),o){M*=.6;const o=t.PointHelper.toNumberPoints(e.points);if(c(n,[p.x,p.y,...o,u.x,u.y],e.curve,!1,e),L){const t=n[4],e=n[5];N.x=g(M,k(t-p.x)),N.y=g(M,k(e-p.y));const o=f(this,s,p,L,N);n[4]=o.x,n[5]=o.y}const i=n.length;if(b){const t=n[i-4],e=n[i-3];N.x=g(M,k(t-u.x)),N.y=g(M,k(e-u.y));const o=f(this,a,u,b,N);n[i-4]=o.x,n[i-3]=o.y}else n[i-4]=u.x,n[i-3]=u.y}else{const t=L?f(this,s,p,L,N):p,e=b?f(this,a,u,b,N):u;d(n,p.x,p.y),h(n,t.x,t.y,e.x,e.y,u.x,u.y)}}createStartPoint(t,e,n){const o=this.createLinkerPoint(t,e,n);return this.startPoint=o,o}createEndPoint(t,e,n){const o=this.createLinkerPoint(t,e,n);return this.endPoint=o,o}createLinkerPoint(e,n,o){const i={};if(n&&n.id){const r=n.getBoxPoint(e),{boxBounds:a}=n,d=o&&o.mode,h="edge"===d||!d,c="four"===d,p="free"===d;if(!("auto"===d))if(c)i.point=s.getDirection(r,a,c);else if(i.direction=s.getDirection(r,a,h),i.point=s.getPointDirection(r,a,h)||i.direction,i.point===i.direction&&delete i.direction,p||h){const e=t.BoundsHelper.getPoint(a,i.point),n=r.x-e.x,s=r.y-e.y,d=o&&o.snapRadius||10;if(Math.abs(n)>d||Math.abs(s)>d){const t=i.offset={x:Math.abs(n)>d?n:0,y:Math.abs(s)>d?s:0};if(h&&(t.x||t.y))switch(i.direction||i.point){case"top":case"bottom":t.y=0;break;case"right":case"left":t.x=0;break;default:t.x>t.y?t.y=0:t.x=0}}}i.id=n.id}else i.point=this.getLocalPoint(e);return i}},n([t.dataProcessor(o)],exports.Linker.prototype,"__",void 0),n([a()],exports.Linker.prototype,"startPoint",void 0),n([a()],exports.Linker.prototype,"endPoint",void 0),n([t.pathType({type:"C",value:.5})],exports.Linker.prototype,"curve",void 0),exports.Linker=n([t.registerUI()],exports.Linker);const{toNumberPoints:L}=e.PointHelper,{M:b,L:N,C:C,Z:M}=e.PathCommandMap;t.Plugin.add("linker"),t.registerPointsCurve("C",function(t,e,n,o){const i=L(e),r=i.length>>1;if(r<2)return;if(t.push(b,i[0],i[1]),!n||r<3){for(let e=1;e<r;e++)t.push(N,i[2*e],i[2*e+1]);return void(o&&t.push(M))}let s=!0===n?.5:n;s<0?s=0:s>1&&(s=1);const a=o?r:r-1;let d=i[0],h=i[1];{const t=i[2]-i[0],e=i[3]-i[1],n=Math.sqrt(t*t+e*e);n&&(d=i[0]+t/n*n*s,h=i[1]+e/n*n*s)}for(let e=0;e<a;e++){const n=e+1===r?0:e+1,o=i[2*n],a=i[2*n+1],c=0===n?r-1:n-1,p=n+1===r?0:n+1;let u=i[2*c]-o,l=i[2*c+1]-a,f=i[2*p]-o,x=i[2*p+1]-a;const y=Math.sqrt(u*u+l*l),g=Math.sqrt(f*f+x*x);let P=o,k=a,L=o,b=a;if(y||g){let t=0,e=0;y&&(t+=u/y,e+=l/y),g&&(t+=f/g,e+=x/g);let n=Math.sqrt(t*t+e*e);n||(g?(t=f/g,e=x/g):(t=u/y,e=l/y),n=1),t/=n,e/=n;let i=-e,r=t;g&&i*f+r*x<0&&(i=-i,r=-r);let d=0;y&&g&&(d=(u*f+l*x)/(y*g),d>1?d=1:d<-1&&(d=-1));let h=Math.sqrt(Math.sqrt(Math.max(0,1-d*d)));h<.15&&(h=.15);let c=y*s*h,p=g*s*h;const N=.5*Math.min(y||g,g||y);c>N&&(c=N),p>N&&(p=N),P=o-i*c,k=a-r*c,L=o+i*p,b=a+r*p}t.push(C,d,h,P,k,o,a),d=L,h=b}o&&t.push(M)}),exports.LinkerData=o;
|
|
2
|
+
//# sourceMappingURL=linker.min.cjs.map
|