@formily-design/shared 1.0.0
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/LICENSE.md +20 -0
- package/README.md +1 -0
- package/dist/designable.shared.umd.production.js +1 -0
- package/dist/designable.shared.umd.production.min.js +2051 -0
- package/esm/animation.d.ts +2 -0
- package/esm/animation.js +33 -0
- package/esm/array.d.ts +37 -0
- package/esm/array.js +111 -0
- package/esm/clone.d.ts +4 -0
- package/esm/clone.js +97 -0
- package/esm/compose.d.ts +1 -0
- package/esm/compose.js +7 -0
- package/esm/coordinate.d.ts +106 -0
- package/esm/coordinate.js +475 -0
- package/esm/element.d.ts +6 -0
- package/esm/element.js +137 -0
- package/esm/event.d.ts +96 -0
- package/esm/event.js +213 -0
- package/esm/globalThisPolyfill.d.ts +1 -0
- package/esm/globalThisPolyfill.js +22 -0
- package/esm/index.d.ts +17 -0
- package/esm/index.js +17 -0
- package/esm/instanceof.d.ts +1 -0
- package/esm/instanceof.js +11 -0
- package/esm/keycode.d.ts +147 -0
- package/esm/keycode.js +150 -0
- package/esm/lru.d.ts +73 -0
- package/esm/lru.js +293 -0
- package/esm/observer.d.ts +9 -0
- package/esm/observer.js +29 -0
- package/esm/request-idle.d.ts +10 -0
- package/esm/request-idle.js +8 -0
- package/esm/scroller.d.ts +10 -0
- package/esm/scroller.js +82 -0
- package/esm/subscribable.d.ts +14 -0
- package/esm/subscribable.js +48 -0
- package/esm/types.d.ts +13 -0
- package/esm/types.js +21 -0
- package/esm/uid.d.ts +1 -0
- package/esm/uid.js +9 -0
- package/lib/animation.d.ts +2 -0
- package/lib/animation.js +38 -0
- package/lib/array.d.ts +37 -0
- package/lib/array.js +125 -0
- package/lib/clone.d.ts +4 -0
- package/lib/clone.js +102 -0
- package/lib/compose.d.ts +1 -0
- package/lib/compose.js +11 -0
- package/lib/coordinate.d.ts +106 -0
- package/lib/coordinate.js +504 -0
- package/lib/element.d.ts +6 -0
- package/lib/element.js +145 -0
- package/lib/event.d.ts +96 -0
- package/lib/event.js +218 -0
- package/lib/globalThisPolyfill.d.ts +1 -0
- package/lib/globalThisPolyfill.js +25 -0
- package/lib/index.d.ts +17 -0
- package/lib/index.js +33 -0
- package/lib/instanceof.d.ts +1 -0
- package/lib/instanceof.js +15 -0
- package/lib/keycode.d.ts +147 -0
- package/lib/keycode.js +154 -0
- package/lib/lru.d.ts +73 -0
- package/lib/lru.js +297 -0
- package/lib/observer.d.ts +9 -0
- package/lib/observer.js +33 -0
- package/lib/request-idle.d.ts +10 -0
- package/lib/request-idle.js +13 -0
- package/lib/scroller.d.ts +10 -0
- package/lib/scroller.js +88 -0
- package/lib/subscribable.d.ts +14 -0
- package/lib/subscribable.js +52 -0
- package/lib/types.d.ts +13 -0
- package/lib/types.js +29 -0
- package/lib/uid.d.ts +1 -0
- package/lib/uid.js +12 -0
- package/package.json +32 -0
- package/rollup.config.js +3 -0
- package/src/animation.ts +38 -0
- package/src/array.ts +301 -0
- package/src/clone.ts +96 -0
- package/src/compose.ts +7 -0
- package/src/coordinate.ts +633 -0
- package/src/element.ts +144 -0
- package/src/event.ts +379 -0
- package/src/globalThisPolyfill.ts +19 -0
- package/src/index.ts +17 -0
- package/src/instanceof.ts +10 -0
- package/src/keycode.ts +150 -0
- package/src/lru.ts +322 -0
- package/src/observer.ts +38 -0
- package/src/request-idle.ts +22 -0
- package/src/scroller.ts +113 -0
- package/src/subscribable.ts +60 -0
- package/src/types.ts +27 -0
- package/src/uid.ts +10 -0
- package/tsconfig.build.json +10 -0
- package/tsconfig.json +5 -0
|
@@ -0,0 +1,504 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RectQuadrant = exports.LineSegment = exports.Rect = exports.Point = void 0;
|
|
4
|
+
exports.isRect = isRect;
|
|
5
|
+
exports.isPoint = isPoint;
|
|
6
|
+
exports.isLineSegment = isLineSegment;
|
|
7
|
+
exports.isPointInRect = isPointInRect;
|
|
8
|
+
exports.isEqualRect = isEqualRect;
|
|
9
|
+
exports.getRectPoints = getRectPoints;
|
|
10
|
+
exports.isRectInRect = isRectInRect;
|
|
11
|
+
exports.isCrossRectInRect = isCrossRectInRect;
|
|
12
|
+
exports.calcQuadrantOfPointToRect = calcQuadrantOfPointToRect;
|
|
13
|
+
exports.calcDistanceOfPointToRect = calcDistanceOfPointToRect;
|
|
14
|
+
exports.calcDistancePointToEdge = calcDistancePointToEdge;
|
|
15
|
+
exports.isNearAfter = isNearAfter;
|
|
16
|
+
exports.calcRelativeOfPointToRect = calcRelativeOfPointToRect;
|
|
17
|
+
exports.calcBoundingRect = calcBoundingRect;
|
|
18
|
+
exports.calcRectByStartEndPoint = calcRectByStartEndPoint;
|
|
19
|
+
exports.calcEdgeLinesOfRect = calcEdgeLinesOfRect;
|
|
20
|
+
exports.calcRectOfAxisLineSegment = calcRectOfAxisLineSegment;
|
|
21
|
+
exports.calcSpaceBlockOfRect = calcSpaceBlockOfRect;
|
|
22
|
+
exports.calcExtendsLineSegmentOfRect = calcExtendsLineSegmentOfRect;
|
|
23
|
+
exports.calcOffsetOfSnapLineSegmentToEdge = calcOffsetOfSnapLineSegmentToEdge;
|
|
24
|
+
exports.calcDistanceOfSnapLineToEdges = calcDistanceOfSnapLineToEdges;
|
|
25
|
+
exports.calcCombineSnapLineSegment = calcCombineSnapLineSegment;
|
|
26
|
+
exports.calcClosestEdges = calcClosestEdges;
|
|
27
|
+
const types_1 = require("./types");
|
|
28
|
+
function isRect(rect) {
|
|
29
|
+
return (rect === null || rect === void 0 ? void 0 : rect.x) && (rect === null || rect === void 0 ? void 0 : rect.y) && (rect === null || rect === void 0 ? void 0 : rect.width) && (rect === null || rect === void 0 ? void 0 : rect.height);
|
|
30
|
+
}
|
|
31
|
+
function isPoint(val) {
|
|
32
|
+
return (0, types_1.isValidNumber)(val === null || val === void 0 ? void 0 : val.x) && (0, types_1.isValidNumber)(val === null || val === void 0 ? void 0 : val.y);
|
|
33
|
+
}
|
|
34
|
+
function isLineSegment(val) {
|
|
35
|
+
return isPoint(val === null || val === void 0 ? void 0 : val.start) && isPoint(val === null || val === void 0 ? void 0 : val.end);
|
|
36
|
+
}
|
|
37
|
+
class Point {
|
|
38
|
+
constructor(x, y) {
|
|
39
|
+
this.x = x;
|
|
40
|
+
this.y = y;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
exports.Point = Point;
|
|
44
|
+
class Rect {
|
|
45
|
+
constructor(x, y, width, height) {
|
|
46
|
+
this.x = 0;
|
|
47
|
+
this.y = 0;
|
|
48
|
+
this.width = 0;
|
|
49
|
+
this.height = 0;
|
|
50
|
+
this.x = x;
|
|
51
|
+
this.y = y;
|
|
52
|
+
this.width = width;
|
|
53
|
+
this.height = height;
|
|
54
|
+
}
|
|
55
|
+
get left() {
|
|
56
|
+
return this.x;
|
|
57
|
+
}
|
|
58
|
+
get right() {
|
|
59
|
+
return this.x + this.width;
|
|
60
|
+
}
|
|
61
|
+
get top() {
|
|
62
|
+
return this.y;
|
|
63
|
+
}
|
|
64
|
+
get bottom() {
|
|
65
|
+
return this.y + this.height;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
exports.Rect = Rect;
|
|
69
|
+
class LineSegment {
|
|
70
|
+
constructor(start, end) {
|
|
71
|
+
this.start = { ...start };
|
|
72
|
+
this.end = { ...end };
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
exports.LineSegment = LineSegment;
|
|
76
|
+
var RectQuadrant;
|
|
77
|
+
(function (RectQuadrant) {
|
|
78
|
+
RectQuadrant["Inner1"] = "I1";
|
|
79
|
+
RectQuadrant["Inner2"] = "I2";
|
|
80
|
+
RectQuadrant["Inner3"] = "I3";
|
|
81
|
+
RectQuadrant["Inner4"] = "I4";
|
|
82
|
+
RectQuadrant["Outer1"] = "O1";
|
|
83
|
+
RectQuadrant["Outer2"] = "O2";
|
|
84
|
+
RectQuadrant["Outer3"] = "O3";
|
|
85
|
+
RectQuadrant["Outer4"] = "O4";
|
|
86
|
+
})(RectQuadrant || (exports.RectQuadrant = RectQuadrant = {}));
|
|
87
|
+
function isPointInRect(point, rect, sensitive = true) {
|
|
88
|
+
const boundSensor = (value) => {
|
|
89
|
+
if (!sensitive)
|
|
90
|
+
return 0;
|
|
91
|
+
const sensor = value * 0.1;
|
|
92
|
+
if (sensor > 20)
|
|
93
|
+
return 20;
|
|
94
|
+
if (sensor < 10)
|
|
95
|
+
return 10;
|
|
96
|
+
return sensor;
|
|
97
|
+
};
|
|
98
|
+
return (point.x >= rect.x + boundSensor(rect.width) &&
|
|
99
|
+
point.x <= rect.x + rect.width - boundSensor(rect.width) &&
|
|
100
|
+
point.y >= rect.y + boundSensor(rect.height) &&
|
|
101
|
+
point.y <= rect.y + rect.height - boundSensor(rect.height));
|
|
102
|
+
}
|
|
103
|
+
function isEqualRect(target, source) {
|
|
104
|
+
return ((target === null || target === void 0 ? void 0 : target.x) === (source === null || source === void 0 ? void 0 : source.x) &&
|
|
105
|
+
target.y === source.y &&
|
|
106
|
+
target.width === source.width &&
|
|
107
|
+
target.height === source.height);
|
|
108
|
+
}
|
|
109
|
+
function getRectPoints(source) {
|
|
110
|
+
const p1 = new Point(source.x, source.y);
|
|
111
|
+
const p2 = new Point(source.x + source.width, source.y);
|
|
112
|
+
const p3 = new Point(source.x + source.width, source.y + source.height);
|
|
113
|
+
const p4 = new Point(source.x, source.y + source.height);
|
|
114
|
+
return [p1, p2, p3, p4];
|
|
115
|
+
}
|
|
116
|
+
function isRectInRect(target, source) {
|
|
117
|
+
const [p1, p2, p3, p4] = getRectPoints(target);
|
|
118
|
+
return (isPointInRect(p1, source, false) &&
|
|
119
|
+
isPointInRect(p2, source, false) &&
|
|
120
|
+
isPointInRect(p3, source, false) &&
|
|
121
|
+
isPointInRect(p4, source, false));
|
|
122
|
+
}
|
|
123
|
+
function isCrossRectInRect(target, source) {
|
|
124
|
+
const targetCenterPoint = new Point(target.x + target.width / 2, target.y + target.height / 2);
|
|
125
|
+
const sourceCenterPoint = new Point(source.x + source.width / 2, source.y + source.height / 2);
|
|
126
|
+
return (Math.abs(targetCenterPoint.x - sourceCenterPoint.x) <=
|
|
127
|
+
target.width / 2 + source.width / 2 &&
|
|
128
|
+
Math.abs(targetCenterPoint.y - sourceCenterPoint.y) <=
|
|
129
|
+
target.height / 2 + source.height / 2);
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* 计算点在矩形的哪个象限
|
|
133
|
+
* @param point
|
|
134
|
+
* @param rect
|
|
135
|
+
*/
|
|
136
|
+
function calcQuadrantOfPointToRect(point, rect) {
|
|
137
|
+
const isInner = isPointInRect(point, rect);
|
|
138
|
+
if (point.x <= rect.x + rect.width / 2) {
|
|
139
|
+
if (point.y <= rect.y + rect.height / 2) {
|
|
140
|
+
if (isInner) {
|
|
141
|
+
return RectQuadrant.Inner1;
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
return RectQuadrant.Outer1;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
if (isInner) {
|
|
149
|
+
return RectQuadrant.Inner4;
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
return RectQuadrant.Outer4;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
if (point.y <= rect.y + rect.height / 2) {
|
|
158
|
+
if (isInner) {
|
|
159
|
+
return RectQuadrant.Inner2;
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
return RectQuadrant.Outer2;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
else {
|
|
166
|
+
if (isInner) {
|
|
167
|
+
return RectQuadrant.Inner3;
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
return RectQuadrant.Outer3;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
function calcDistanceOfPointToRect(point, rect) {
|
|
176
|
+
let minX = Math.min(Math.abs(point.x - rect.x), Math.abs(point.x - (rect.x + rect.width)));
|
|
177
|
+
let minY = Math.min(Math.abs(point.y - rect.y), Math.abs(point.y - (rect.y + rect.height)));
|
|
178
|
+
if (point.x >= rect.x && point.x <= rect.x + rect.width) {
|
|
179
|
+
minX = 0;
|
|
180
|
+
}
|
|
181
|
+
if (point.y >= rect.y && point.y <= rect.y + rect.height) {
|
|
182
|
+
minY = 0;
|
|
183
|
+
}
|
|
184
|
+
return Math.sqrt(minX ** 2 + minY ** 2);
|
|
185
|
+
}
|
|
186
|
+
function calcDistancePointToEdge(point, rect) {
|
|
187
|
+
const distanceTop = Math.abs(point.y - rect.y);
|
|
188
|
+
const distanceBottom = Math.abs(point.y - (rect.y + rect.height));
|
|
189
|
+
const distanceLeft = Math.abs(point.x - rect.x);
|
|
190
|
+
const distanceRight = Math.abs(point.x - (rect.x + rect.width));
|
|
191
|
+
return Math.min(distanceTop, distanceBottom, distanceLeft, distanceRight);
|
|
192
|
+
}
|
|
193
|
+
function isNearAfter(point, rect, inline = false) {
|
|
194
|
+
if (inline) {
|
|
195
|
+
return (Math.abs(point.x - rect.x) + Math.abs(point.y - rect.y) >
|
|
196
|
+
Math.abs(point.x - (rect.x + rect.width)) +
|
|
197
|
+
Math.abs(point.y - (rect.y + rect.height)));
|
|
198
|
+
}
|
|
199
|
+
return Math.abs(point.y - rect.y) > Math.abs(point.y - (rect.y + rect.height));
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* 计算点鱼矩形的相对位置信息
|
|
203
|
+
* @param point
|
|
204
|
+
* @param rect
|
|
205
|
+
*/
|
|
206
|
+
function calcRelativeOfPointToRect(point, rect) {
|
|
207
|
+
const distance = calcDistanceOfPointToRect(point, rect);
|
|
208
|
+
const quadrant = calcQuadrantOfPointToRect(point, rect);
|
|
209
|
+
return {
|
|
210
|
+
quadrant,
|
|
211
|
+
distance,
|
|
212
|
+
};
|
|
213
|
+
}
|
|
214
|
+
function calcBoundingRect(rects) {
|
|
215
|
+
if (!(rects === null || rects === void 0 ? void 0 : rects.length))
|
|
216
|
+
return;
|
|
217
|
+
if ((rects === null || rects === void 0 ? void 0 : rects.length) === 1 && !rects[0])
|
|
218
|
+
return;
|
|
219
|
+
let minTop = Infinity;
|
|
220
|
+
let maxBottom = -Infinity;
|
|
221
|
+
let minLeft = Infinity;
|
|
222
|
+
let maxRight = -Infinity;
|
|
223
|
+
rects.forEach((item) => {
|
|
224
|
+
const rect = new Rect(item.x, item.y, item.width, item.height);
|
|
225
|
+
if (rect.top <= minTop) {
|
|
226
|
+
minTop = rect.top;
|
|
227
|
+
}
|
|
228
|
+
if (rect.bottom >= maxBottom) {
|
|
229
|
+
maxBottom = rect.bottom;
|
|
230
|
+
}
|
|
231
|
+
if (rect.left <= minLeft) {
|
|
232
|
+
minLeft = rect.left;
|
|
233
|
+
}
|
|
234
|
+
if (rect.right >= maxRight) {
|
|
235
|
+
maxRight = rect.right;
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
return new Rect(minLeft, minTop, maxRight - minLeft, maxBottom - minTop);
|
|
239
|
+
}
|
|
240
|
+
function calcRectByStartEndPoint(startPoint, endPoint, scrollX = 0, scrollY = 0) {
|
|
241
|
+
let drawStartX = 0, drawStartY = 0;
|
|
242
|
+
if (endPoint.x + scrollX >= startPoint.x &&
|
|
243
|
+
endPoint.y + scrollY >= startPoint.y) {
|
|
244
|
+
//4象限
|
|
245
|
+
drawStartX = startPoint.x;
|
|
246
|
+
drawStartY = startPoint.y;
|
|
247
|
+
return new Rect(drawStartX - scrollX, drawStartY - scrollY, Math.abs(endPoint.x - startPoint.x + scrollX), Math.abs(endPoint.y - startPoint.y + scrollY));
|
|
248
|
+
}
|
|
249
|
+
else if (endPoint.x + scrollX < startPoint.x &&
|
|
250
|
+
endPoint.y + scrollY < startPoint.y) {
|
|
251
|
+
//1象限
|
|
252
|
+
drawStartX = endPoint.x;
|
|
253
|
+
drawStartY = endPoint.y;
|
|
254
|
+
return new Rect(drawStartX, drawStartY, Math.abs(endPoint.x - startPoint.x + scrollX), Math.abs(endPoint.y - startPoint.y + scrollY));
|
|
255
|
+
}
|
|
256
|
+
else if (endPoint.x + scrollX < startPoint.x &&
|
|
257
|
+
endPoint.y + scrollY >= startPoint.y) {
|
|
258
|
+
//3象限
|
|
259
|
+
drawStartX = endPoint.x;
|
|
260
|
+
drawStartY = startPoint.y;
|
|
261
|
+
return new Rect(drawStartX - scrollX, drawStartY - scrollY, Math.abs(endPoint.x - startPoint.x + scrollX), Math.abs(endPoint.y - startPoint.y + scrollY));
|
|
262
|
+
}
|
|
263
|
+
else {
|
|
264
|
+
//2象限
|
|
265
|
+
drawStartX = startPoint.x;
|
|
266
|
+
drawStartY = endPoint.y;
|
|
267
|
+
return new Rect(drawStartX, drawStartY, Math.abs(endPoint.x - startPoint.x + scrollX), Math.abs(endPoint.y - startPoint.y + scrollY));
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
function calcEdgeLinesOfRect(rect) {
|
|
271
|
+
return {
|
|
272
|
+
v: [
|
|
273
|
+
new LineSegment(new Point(rect.x, rect.y), new Point(rect.x, rect.y + rect.height)),
|
|
274
|
+
new LineSegment(new Point(rect.x + rect.width / 2, rect.y), new Point(rect.x + rect.width / 2, rect.y + rect.height)),
|
|
275
|
+
new LineSegment(new Point(rect.x + rect.width, rect.y), new Point(rect.x + rect.width, rect.y + rect.height)),
|
|
276
|
+
],
|
|
277
|
+
h: [
|
|
278
|
+
new LineSegment(new Point(rect.x, rect.y), new Point(rect.x + rect.width, rect.y)),
|
|
279
|
+
new LineSegment(new Point(rect.x, rect.y + rect.height / 2), new Point(rect.x + rect.width, rect.y + rect.height / 2)),
|
|
280
|
+
new LineSegment(new Point(rect.x, rect.y + rect.height), new Point(rect.x + rect.width, rect.y + rect.height)),
|
|
281
|
+
],
|
|
282
|
+
};
|
|
283
|
+
}
|
|
284
|
+
function calcRectOfAxisLineSegment(line) {
|
|
285
|
+
if (!isLineSegment(line))
|
|
286
|
+
return;
|
|
287
|
+
const isXAxis = line.start.x === line.end.x;
|
|
288
|
+
return new Rect(line.start.x, line.start.y, isXAxis ? 0 : line.end.x - line.start.x, isXAxis ? line.end.y - line.start.y : 0);
|
|
289
|
+
}
|
|
290
|
+
function calcSpaceBlockOfRect(target, source, type) {
|
|
291
|
+
const targetRect = new Rect(target.x, target.y, target.width, target.height);
|
|
292
|
+
const sourceRect = new Rect(source.x, source.y, source.width, source.height);
|
|
293
|
+
if (sourceRect.bottom < targetRect.top && sourceRect.left > targetRect.right)
|
|
294
|
+
return;
|
|
295
|
+
if (sourceRect.top > targetRect.bottom && sourceRect.left > targetRect.right)
|
|
296
|
+
return;
|
|
297
|
+
if (sourceRect.bottom < targetRect.top && sourceRect.right < targetRect.left)
|
|
298
|
+
return;
|
|
299
|
+
if (sourceRect.top > targetRect.bottom && sourceRect.right < targetRect.left)
|
|
300
|
+
return;
|
|
301
|
+
if (sourceRect.bottom < targetRect.top) {
|
|
302
|
+
const distance = targetRect.top - sourceRect.bottom;
|
|
303
|
+
const left = Math.min(sourceRect.left, targetRect.left);
|
|
304
|
+
const right = Math.max(sourceRect.right, targetRect.right);
|
|
305
|
+
if (type && type !== 'top')
|
|
306
|
+
return;
|
|
307
|
+
return {
|
|
308
|
+
type: 'top',
|
|
309
|
+
distance,
|
|
310
|
+
rect: new Rect(left, sourceRect.bottom, right - left, distance),
|
|
311
|
+
};
|
|
312
|
+
}
|
|
313
|
+
else if (sourceRect.top > targetRect.bottom) {
|
|
314
|
+
const distance = sourceRect.top - targetRect.bottom;
|
|
315
|
+
const left = Math.min(sourceRect.left, targetRect.left);
|
|
316
|
+
const right = Math.max(sourceRect.right, targetRect.right);
|
|
317
|
+
if (type && type !== 'bottom')
|
|
318
|
+
return;
|
|
319
|
+
return {
|
|
320
|
+
type: 'bottom',
|
|
321
|
+
distance,
|
|
322
|
+
rect: new Rect(left, targetRect.bottom, right - left, distance),
|
|
323
|
+
};
|
|
324
|
+
}
|
|
325
|
+
else if (sourceRect.right < targetRect.left) {
|
|
326
|
+
const distance = targetRect.left - sourceRect.right;
|
|
327
|
+
const top = Math.min(sourceRect.top, targetRect.top);
|
|
328
|
+
const bottom = Math.max(sourceRect.bottom, targetRect.bottom);
|
|
329
|
+
if (type && type !== 'left')
|
|
330
|
+
return;
|
|
331
|
+
return {
|
|
332
|
+
type: 'left',
|
|
333
|
+
distance,
|
|
334
|
+
rect: new Rect(sourceRect.right, top, distance, bottom - top),
|
|
335
|
+
};
|
|
336
|
+
}
|
|
337
|
+
else if (sourceRect.left > targetRect.right) {
|
|
338
|
+
const distance = sourceRect.left - targetRect.right;
|
|
339
|
+
const top = Math.min(sourceRect.top, targetRect.top);
|
|
340
|
+
const bottom = Math.max(sourceRect.bottom, targetRect.bottom);
|
|
341
|
+
if (type && type !== 'right')
|
|
342
|
+
return;
|
|
343
|
+
return {
|
|
344
|
+
type: 'right',
|
|
345
|
+
distance,
|
|
346
|
+
rect: new Rect(targetRect.right, top, distance, bottom - top),
|
|
347
|
+
};
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
function calcExtendsLineSegmentOfRect(targetRect, referRect) {
|
|
351
|
+
if (referRect.right < targetRect.right &&
|
|
352
|
+
targetRect.left <= referRect.right) {
|
|
353
|
+
//右侧
|
|
354
|
+
if (referRect.bottom < targetRect.top) {
|
|
355
|
+
//上方
|
|
356
|
+
return {
|
|
357
|
+
start: { x: referRect.right, y: referRect.bottom },
|
|
358
|
+
end: { x: targetRect.right, y: referRect.bottom },
|
|
359
|
+
};
|
|
360
|
+
}
|
|
361
|
+
else if (referRect.top > targetRect.bottom) {
|
|
362
|
+
//下方
|
|
363
|
+
return {
|
|
364
|
+
start: { x: referRect.right, y: referRect.top },
|
|
365
|
+
end: { x: targetRect.right, y: referRect.top },
|
|
366
|
+
};
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
else if (referRect.left > targetRect.left &&
|
|
370
|
+
targetRect.right >= referRect.left) {
|
|
371
|
+
//左侧
|
|
372
|
+
if (referRect.bottom < targetRect.top) {
|
|
373
|
+
//上方
|
|
374
|
+
return {
|
|
375
|
+
start: { x: targetRect.left, y: referRect.bottom },
|
|
376
|
+
end: { x: referRect.left, y: referRect.bottom },
|
|
377
|
+
};
|
|
378
|
+
}
|
|
379
|
+
else if (referRect.top > targetRect.bottom) {
|
|
380
|
+
//下方
|
|
381
|
+
return {
|
|
382
|
+
start: { x: targetRect.left, y: referRect.top },
|
|
383
|
+
end: { x: referRect.left, y: referRect.top },
|
|
384
|
+
};
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
if (referRect.top < targetRect.top && targetRect.bottom >= referRect.top) {
|
|
388
|
+
//refer在上方
|
|
389
|
+
if (referRect.right < targetRect.left) {
|
|
390
|
+
//右侧
|
|
391
|
+
return {
|
|
392
|
+
start: { x: referRect.right, y: referRect.bottom },
|
|
393
|
+
end: { x: referRect.right, y: targetRect.bottom },
|
|
394
|
+
};
|
|
395
|
+
}
|
|
396
|
+
else if (referRect.left > targetRect.right) {
|
|
397
|
+
//左侧
|
|
398
|
+
return {
|
|
399
|
+
start: { x: referRect.left, y: referRect.bottom },
|
|
400
|
+
end: { x: referRect.left, y: targetRect.bottom },
|
|
401
|
+
};
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
else if (referRect.bottom > targetRect.bottom &&
|
|
405
|
+
referRect.top <= targetRect.bottom) {
|
|
406
|
+
//refer下方
|
|
407
|
+
if (referRect.right < targetRect.left) {
|
|
408
|
+
//右侧
|
|
409
|
+
return {
|
|
410
|
+
start: { x: referRect.right, y: targetRect.top },
|
|
411
|
+
end: { x: referRect.right, y: referRect.top },
|
|
412
|
+
};
|
|
413
|
+
}
|
|
414
|
+
else if (referRect.left > targetRect.right) {
|
|
415
|
+
//左侧
|
|
416
|
+
return {
|
|
417
|
+
start: { x: referRect.left, y: targetRect.top },
|
|
418
|
+
end: { x: referRect.left, y: referRect.top },
|
|
419
|
+
};
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
function calcOffsetOfSnapLineSegmentToEdge(line, current) {
|
|
424
|
+
const edges = calcEdgeLinesOfRect(current);
|
|
425
|
+
const isVerticalLine = line.start.x === line.end.x;
|
|
426
|
+
if (isVerticalLine) {
|
|
427
|
+
return { x: calcMinDistanceValue(edges.x, line.start.x) - current.x, y: 0 };
|
|
428
|
+
}
|
|
429
|
+
function calcEdgeLinesOfRect(rect) {
|
|
430
|
+
return {
|
|
431
|
+
x: [rect.x, rect.x + rect.width / 2, rect.x + rect.width],
|
|
432
|
+
y: [rect.y, rect.y + rect.height / 2, rect.y + rect.height],
|
|
433
|
+
};
|
|
434
|
+
}
|
|
435
|
+
function calcMinDistanceValue(edges, targetValue) {
|
|
436
|
+
let minDistance = Infinity, minDistanceIndex = -1;
|
|
437
|
+
for (let i = 0; i < edges.length; i++) {
|
|
438
|
+
const distance = Math.abs(edges[i] - targetValue);
|
|
439
|
+
if (minDistance > distance) {
|
|
440
|
+
minDistance = distance;
|
|
441
|
+
minDistanceIndex = i;
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
return edges[minDistanceIndex];
|
|
445
|
+
}
|
|
446
|
+
return { x: 0, y: calcMinDistanceValue(edges.y, line.start.y) - current.y };
|
|
447
|
+
}
|
|
448
|
+
function calcDistanceOfSnapLineToEdges(line, edges) {
|
|
449
|
+
var _a, _b, _c, _d;
|
|
450
|
+
let distance = Infinity;
|
|
451
|
+
if (((_a = line === null || line === void 0 ? void 0 : line.start) === null || _a === void 0 ? void 0 : _a.y) === ((_b = line === null || line === void 0 ? void 0 : line.end) === null || _b === void 0 ? void 0 : _b.y)) {
|
|
452
|
+
edges.h.forEach((target) => {
|
|
453
|
+
const _distance = Math.abs(target.start.y - line.start.y);
|
|
454
|
+
if (_distance < distance) {
|
|
455
|
+
distance = _distance;
|
|
456
|
+
}
|
|
457
|
+
});
|
|
458
|
+
}
|
|
459
|
+
else if (((_c = line === null || line === void 0 ? void 0 : line.start) === null || _c === void 0 ? void 0 : _c.x) === ((_d = line === null || line === void 0 ? void 0 : line.end) === null || _d === void 0 ? void 0 : _d.x)) {
|
|
460
|
+
edges.v.forEach((target) => {
|
|
461
|
+
const _distance = Math.abs(target.start.x - line.start.x);
|
|
462
|
+
if (_distance < distance) {
|
|
463
|
+
distance = _distance;
|
|
464
|
+
}
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
else {
|
|
468
|
+
throw new Error('can not calculate slash distance');
|
|
469
|
+
}
|
|
470
|
+
return distance;
|
|
471
|
+
}
|
|
472
|
+
function calcCombineSnapLineSegment(target, source) {
|
|
473
|
+
if (target.start.x === target.end.x) {
|
|
474
|
+
return new LineSegment(new Point(target.start.x, target.start.y > source.start.y ? source.start.y : target.start.y), new Point(target.start.x, target.end.y > source.end.y ? target.end.y : source.end.y));
|
|
475
|
+
}
|
|
476
|
+
return new LineSegment(new Point(target.start.x > source.start.x ? source.start.x : target.start.x, target.start.y), new Point(target.end.x > source.end.x ? target.end.x : source.end.x, target.end.y));
|
|
477
|
+
}
|
|
478
|
+
function calcClosestEdges(line, edges) {
|
|
479
|
+
var _a, _b, _c, _d;
|
|
480
|
+
let result;
|
|
481
|
+
let distance = Infinity;
|
|
482
|
+
if (((_a = line === null || line === void 0 ? void 0 : line.start) === null || _a === void 0 ? void 0 : _a.y) === ((_b = line === null || line === void 0 ? void 0 : line.end) === null || _b === void 0 ? void 0 : _b.y)) {
|
|
483
|
+
edges.h.forEach((target) => {
|
|
484
|
+
const _distance = Math.abs(target.start.y - line.start.y);
|
|
485
|
+
if (_distance < distance) {
|
|
486
|
+
distance = _distance;
|
|
487
|
+
result = target;
|
|
488
|
+
}
|
|
489
|
+
});
|
|
490
|
+
}
|
|
491
|
+
else if (((_c = line === null || line === void 0 ? void 0 : line.start) === null || _c === void 0 ? void 0 : _c.x) === ((_d = line === null || line === void 0 ? void 0 : line.end) === null || _d === void 0 ? void 0 : _d.x)) {
|
|
492
|
+
edges.v.forEach((target) => {
|
|
493
|
+
const _distance = Math.abs(target.start.x - line.start.x);
|
|
494
|
+
if (_distance < distance) {
|
|
495
|
+
distance = _distance;
|
|
496
|
+
result = target;
|
|
497
|
+
}
|
|
498
|
+
});
|
|
499
|
+
}
|
|
500
|
+
else {
|
|
501
|
+
throw new Error('can not calculate slash distance');
|
|
502
|
+
}
|
|
503
|
+
return [distance, result];
|
|
504
|
+
}
|
package/lib/element.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Point } from './coordinate';
|
|
2
|
+
export declare const calcElementOuterWidth: (innerWidth: number, style: CSSStyleDeclaration) => number;
|
|
3
|
+
export declare const calcElementLayout: (element: Element) => "vertical" | "horizontal";
|
|
4
|
+
export declare const calcElementTranslate: (element: HTMLElement) => Point;
|
|
5
|
+
export declare const calcElementRotate: (element: HTMLElement) => number;
|
|
6
|
+
export declare const calcElementScale: (element: HTMLElement) => number;
|
package/lib/element.js
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.calcElementScale = exports.calcElementRotate = exports.calcElementTranslate = exports.calcElementLayout = exports.calcElementOuterWidth = void 0;
|
|
4
|
+
const coordinate_1 = require("./coordinate");
|
|
5
|
+
const InlineLayoutTagNames = new Set([
|
|
6
|
+
'A',
|
|
7
|
+
'ABBR',
|
|
8
|
+
'ACRONYM',
|
|
9
|
+
'AUDIO',
|
|
10
|
+
'B',
|
|
11
|
+
'BDI',
|
|
12
|
+
'BDO',
|
|
13
|
+
'BIG',
|
|
14
|
+
'BR',
|
|
15
|
+
'BUTTON',
|
|
16
|
+
'CANVAS',
|
|
17
|
+
'CITE',
|
|
18
|
+
'CODE',
|
|
19
|
+
'DATA',
|
|
20
|
+
'DATALIST',
|
|
21
|
+
'DEL',
|
|
22
|
+
'DFN',
|
|
23
|
+
'EM',
|
|
24
|
+
'EMBED',
|
|
25
|
+
'I',
|
|
26
|
+
'IFRAME',
|
|
27
|
+
'IMG',
|
|
28
|
+
'INS',
|
|
29
|
+
'KBD',
|
|
30
|
+
'LABEL',
|
|
31
|
+
'MAP',
|
|
32
|
+
'MARK',
|
|
33
|
+
'METER',
|
|
34
|
+
'NOSCRIPT',
|
|
35
|
+
'OBJECT',
|
|
36
|
+
'OUTPUT',
|
|
37
|
+
'PICTURE',
|
|
38
|
+
'PROGRESS',
|
|
39
|
+
'Q',
|
|
40
|
+
'RUBY',
|
|
41
|
+
'S',
|
|
42
|
+
'SAMP',
|
|
43
|
+
'SELECT',
|
|
44
|
+
'SLOT',
|
|
45
|
+
'SMALL',
|
|
46
|
+
'STRONG',
|
|
47
|
+
'SUB',
|
|
48
|
+
'SUP',
|
|
49
|
+
'SVG',
|
|
50
|
+
'TEMPLATE',
|
|
51
|
+
'TEXTAREA',
|
|
52
|
+
'TIME',
|
|
53
|
+
'U',
|
|
54
|
+
'TT',
|
|
55
|
+
'VAR',
|
|
56
|
+
'VIDEO',
|
|
57
|
+
'WBR',
|
|
58
|
+
'INPUT',
|
|
59
|
+
'SPAN',
|
|
60
|
+
]);
|
|
61
|
+
const calcElementOuterWidth = (innerWidth, style) => {
|
|
62
|
+
return (innerWidth +
|
|
63
|
+
parseFloat(style.marginLeft) +
|
|
64
|
+
parseFloat(style.marginRight) +
|
|
65
|
+
parseFloat(style.paddingLeft) +
|
|
66
|
+
parseFloat(style.paddingRight) +
|
|
67
|
+
parseFloat(style.borderLeftWidth) +
|
|
68
|
+
parseFloat(style.borderRightWidth));
|
|
69
|
+
};
|
|
70
|
+
exports.calcElementOuterWidth = calcElementOuterWidth;
|
|
71
|
+
const calcElementLayout = (element) => {
|
|
72
|
+
if (!element)
|
|
73
|
+
return 'vertical';
|
|
74
|
+
const parent = element.parentElement;
|
|
75
|
+
if (!parent)
|
|
76
|
+
return 'vertical';
|
|
77
|
+
const tagName = element.tagName;
|
|
78
|
+
const parentTagName = parent.tagName;
|
|
79
|
+
const style = getComputedStyle(element);
|
|
80
|
+
const parentStyle = getComputedStyle(parent);
|
|
81
|
+
const isNotFullWidth = () => {
|
|
82
|
+
const innerWidth = element.getBoundingClientRect().width;
|
|
83
|
+
const outerWidth = (0, exports.calcElementOuterWidth)(innerWidth, style);
|
|
84
|
+
const parentInnerWidth = parent.getBoundingClientRect().width;
|
|
85
|
+
return outerWidth.toFixed(0) < parentInnerWidth.toFixed(0);
|
|
86
|
+
};
|
|
87
|
+
if (tagName === 'TH' || tagName === 'TD') {
|
|
88
|
+
if (parentTagName === 'TR')
|
|
89
|
+
return 'horizontal';
|
|
90
|
+
}
|
|
91
|
+
if (parentStyle.display === 'flex' && parentStyle.flexDirection === 'row')
|
|
92
|
+
return 'horizontal';
|
|
93
|
+
if (parentStyle.display === 'grid') {
|
|
94
|
+
if (isNotFullWidth()) {
|
|
95
|
+
return 'horizontal';
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
if (InlineLayoutTagNames.has(tagName)) {
|
|
99
|
+
if (style.display === 'block') {
|
|
100
|
+
if (style.float === 'left' || style.float === 'right') {
|
|
101
|
+
if (isNotFullWidth()) {
|
|
102
|
+
return 'horizontal';
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return 'vertical';
|
|
106
|
+
}
|
|
107
|
+
return 'horizontal';
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
exports.calcElementLayout = calcElementLayout;
|
|
111
|
+
const calcElementTranslate = (element) => {
|
|
112
|
+
var _a, _b, _c;
|
|
113
|
+
const transform = (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.transform;
|
|
114
|
+
if (transform) {
|
|
115
|
+
const [x, y] = (_c = (_b = transform
|
|
116
|
+
.match(/translate(?:3d)?\(\s*([-\d.]+)[a-z]+?[\s,]+([-\d.]+)[a-z]+?(?:[\s,]+([-\d.]+))?[a-z]+?\s*\)/)) === null || _b === void 0 ? void 0 : _b.slice(1, 3)) !== null && _c !== void 0 ? _c : [0, 0];
|
|
117
|
+
return new coordinate_1.Point(Number(x), Number(y));
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
return new coordinate_1.Point(Number(element.offsetLeft), Number(element.offsetTop));
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
exports.calcElementTranslate = calcElementTranslate;
|
|
124
|
+
const calcElementRotate = (element) => {
|
|
125
|
+
var _a, _b, _c;
|
|
126
|
+
const transform = (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.transform;
|
|
127
|
+
if (transform) {
|
|
128
|
+
return Number((_c = (_b = transform.match(/rotate\(\s*([-\d.]+)/)) === null || _b === void 0 ? void 0 : _b[1]) !== null && _c !== void 0 ? _c : 0);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
return 0;
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
exports.calcElementRotate = calcElementRotate;
|
|
135
|
+
const calcElementScale = (element) => {
|
|
136
|
+
var _a, _b, _c;
|
|
137
|
+
const transform = (_a = element === null || element === void 0 ? void 0 : element.style) === null || _a === void 0 ? void 0 : _a.transform;
|
|
138
|
+
if (transform) {
|
|
139
|
+
return Number((_c = (_b = transform.match(/scale\(\s*([-\d.]+)/)) === null || _b === void 0 ? void 0 : _b[1]) !== null && _c !== void 0 ? _c : 0);
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
return 0;
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
exports.calcElementScale = calcElementScale;
|