uiik 1.3.0-beta.3 → 1.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/CHANGELOG.md +13 -0
- package/index.esm.js +508 -329
- package/index.js +513 -331
- package/package.json +2 -2
- package/transform.d.ts +6 -2
- package/types.d.ts +3 -0
- package/utils.d.ts +19 -3
package/index.esm.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* uiik v1.3.
|
|
2
|
+
* uiik v1.3.2
|
|
3
3
|
* A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
|
|
4
4
|
* https://github.com/holyhigh2/uiik
|
|
5
|
-
* c) 2021-
|
|
5
|
+
* c) 2021-2024 @holyhigh2 may be freely distributed under the MIT license
|
|
6
6
|
*/
|
|
7
|
-
import { isDefined,
|
|
7
|
+
import { isDefined, isNumber, isNaN, isString, isArrayLike, isElement, isEmpty, isArray, isFunction, isBoolean, isUndefined } from 'myfx/is';
|
|
8
8
|
import { find, map, toArray, each, reject, includes, some, flatMap, size } from 'myfx/collection';
|
|
9
9
|
import { get, assign, merge } from 'myfx/object';
|
|
10
10
|
import { split, test } from 'myfx/string';
|
|
11
11
|
import { compact, findIndex } from 'myfx/array';
|
|
12
|
+
import { closest } from 'myfx/tree';
|
|
12
13
|
import { alphaId } from 'myfx/utils';
|
|
13
14
|
|
|
14
15
|
/******************************************************************************
|
|
@@ -46,45 +47,47 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
46
47
|
|
|
47
48
|
const UtMap = new WeakMap();
|
|
48
49
|
class UiiTransform {
|
|
49
|
-
constructor(el) {
|
|
50
|
+
constructor(el, useTransform = true) {
|
|
50
51
|
this.angle = 0;
|
|
51
52
|
this.el = el;
|
|
53
|
+
this.useTransform = useTransform;
|
|
52
54
|
this.normalize(el);
|
|
53
55
|
UtMap.set(el, this);
|
|
54
56
|
}
|
|
55
57
|
normalize(el) {
|
|
56
|
-
let {
|
|
57
|
-
this.
|
|
58
|
-
this.
|
|
58
|
+
let { offx, offy } = normalize(el || this.el, this.useTransform);
|
|
59
|
+
this.offx = offx * -1;
|
|
60
|
+
this.offy = offy * -1;
|
|
59
61
|
return this;
|
|
60
62
|
}
|
|
61
63
|
moveTo(x, y) {
|
|
62
64
|
this.x = x;
|
|
63
65
|
this.y = y;
|
|
64
|
-
moveTo(this.el, this.x, this.y);
|
|
66
|
+
(this.useTransform ? transformMoveTo : moveTo)(this.el, this.x + this.offx, this.y + this.offy);
|
|
65
67
|
}
|
|
66
68
|
moveToX(x) {
|
|
67
69
|
this.x = x;
|
|
68
|
-
moveTo(this.el, this.x
|
|
70
|
+
(this.useTransform ? transformMoveTo : moveTo)(this.el, this.x + this.offx, NaN);
|
|
69
71
|
}
|
|
70
72
|
moveToY(y) {
|
|
71
73
|
this.y = y;
|
|
72
|
-
moveTo(this.el, this.
|
|
74
|
+
(this.useTransform ? transformMoveTo : moveTo)(this.el, NaN, this.y + this.offy);
|
|
73
75
|
}
|
|
74
76
|
rotateTo(deg, cx, cy) {
|
|
75
77
|
this.angle = deg;
|
|
76
78
|
rotateTo(this.el, deg, cx, cy);
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
|
-
function normalize(el) {
|
|
81
|
+
function normalize(el, useTransform) {
|
|
80
82
|
const style = window.getComputedStyle(el);
|
|
83
|
+
let offx = 0, offy = 0;
|
|
81
84
|
let x = 0, y = 0;
|
|
85
|
+
let mx = 0, my = 0;
|
|
82
86
|
if (el instanceof HTMLElement) {
|
|
83
|
-
x =
|
|
84
|
-
y =
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
el.style.setProperty("margin", "0", "important");
|
|
87
|
+
x = parseFloat(style.left) || 0;
|
|
88
|
+
y = parseFloat(style.top) || 0;
|
|
89
|
+
mx = parseFloat(style.marginLeft) || 0;
|
|
90
|
+
my = parseFloat(style.marginTop) || 0;
|
|
88
91
|
}
|
|
89
92
|
else {
|
|
90
93
|
x =
|
|
@@ -93,24 +96,30 @@ function normalize(el) {
|
|
|
93
96
|
y =
|
|
94
97
|
parseFloat(get(el, "y.baseVal.value") || get(el, "cy.baseVal.value")) ||
|
|
95
98
|
0;
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
moveTo(el, x, y);
|
|
105
|
-
return { x, y };
|
|
99
|
+
}
|
|
100
|
+
if (useTransform) {
|
|
101
|
+
(offx = x), (offy = y);
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
(offx = 0), (offy = 0);
|
|
105
|
+
}
|
|
106
|
+
return { offx: offx + mx, offy: offy + my };
|
|
106
107
|
}
|
|
107
|
-
function wrapper(el) {
|
|
108
|
+
function wrapper(el, useTransform = true) {
|
|
108
109
|
let ut = UtMap.get(el);
|
|
109
110
|
if (ut)
|
|
110
111
|
return ut.normalize(el);
|
|
111
|
-
return new UiiTransform(el);
|
|
112
|
+
return new UiiTransform(el, useTransform);
|
|
112
113
|
}
|
|
113
114
|
function transformMove(transofrmStr, x, y, unit = false) {
|
|
115
|
+
if (!isNumber(x) || isNaN(x)) {
|
|
116
|
+
return (`translateY(${y}${unit ? "px" : ""}) ` +
|
|
117
|
+
transofrmStr.replace(/translateY\([^)]+?\)/, "").trim());
|
|
118
|
+
}
|
|
119
|
+
if (!isNumber(y) || isNaN(x)) {
|
|
120
|
+
return (`translateX(${x}${unit ? "px" : ""}) ` +
|
|
121
|
+
transofrmStr.replace(/translateX\([^)]+?\)/, "").trim());
|
|
122
|
+
}
|
|
114
123
|
return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""}) ` +
|
|
115
124
|
transofrmStr.replace(/translate\([^)]+?\)/, "").trim());
|
|
116
125
|
}
|
|
@@ -119,6 +128,14 @@ function getTranslate(el) {
|
|
|
119
128
|
let transformStr = "";
|
|
120
129
|
if (el instanceof SVGGraphicsElement) {
|
|
121
130
|
transformStr = el.getAttribute("transform") || "";
|
|
131
|
+
if (!transformStr) {
|
|
132
|
+
xVal =
|
|
133
|
+
parseFloat(get(el, "x.baseVal.value") || get(el, "cx.baseVal.value")) ||
|
|
134
|
+
0;
|
|
135
|
+
yVal =
|
|
136
|
+
parseFloat(get(el, "y.baseVal.value") || get(el, "cy.baseVal.value")) ||
|
|
137
|
+
0;
|
|
138
|
+
}
|
|
122
139
|
}
|
|
123
140
|
else {
|
|
124
141
|
let style = el.style;
|
|
@@ -146,11 +163,26 @@ function getTranslate(el) {
|
|
|
146
163
|
}
|
|
147
164
|
function moveTo(el, x, y) {
|
|
148
165
|
if (el instanceof SVGGraphicsElement) {
|
|
149
|
-
|
|
166
|
+
if (x)
|
|
167
|
+
el.setAttribute("x", x + "");
|
|
168
|
+
if (y)
|
|
169
|
+
el.setAttribute("y", y + "");
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
let style = el.style;
|
|
173
|
+
if (x)
|
|
174
|
+
style.left = x + "px";
|
|
175
|
+
if (y)
|
|
176
|
+
style.top = y + "px";
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
function transformMoveTo(el, x, y) {
|
|
180
|
+
if (el instanceof SVGGraphicsElement) {
|
|
181
|
+
el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x || 0, y || 0));
|
|
150
182
|
}
|
|
151
183
|
else {
|
|
152
184
|
let style = el.style;
|
|
153
|
-
style.transform = transformMove(style.transform || "", x, y, true);
|
|
185
|
+
style.transform = transformMove(style.transform || "", x || 0, y || 0, true);
|
|
154
186
|
}
|
|
155
187
|
}
|
|
156
188
|
const EXP_GET_TRANSLATE = /translate\(\s*(?<x>[\d.-]+)\D*,\s*(?<y>[\d.-]+)\D*\)/gim;
|
|
@@ -199,6 +231,7 @@ function rotateTo(el, deg, cx, cy) {
|
|
|
199
231
|
|
|
200
232
|
const ONE_ANG = Math.PI / 180;
|
|
201
233
|
const ONE_RAD = 180 / Math.PI;
|
|
234
|
+
const THRESHOLD = 3;
|
|
202
235
|
function getBox(child, parent) {
|
|
203
236
|
const rect = child.getBoundingClientRect();
|
|
204
237
|
const rs = { x: 0, y: 0, w: rect.width, h: rect.height };
|
|
@@ -278,43 +311,38 @@ function getStyleXy(el) {
|
|
|
278
311
|
return { x, y };
|
|
279
312
|
}
|
|
280
313
|
function getStyleSize(el, cStyle) {
|
|
314
|
+
if ("getBBox" in el) {
|
|
315
|
+
let { width, height } = el.getBBox();
|
|
316
|
+
return { w: width, h: height };
|
|
317
|
+
}
|
|
281
318
|
if (!cStyle)
|
|
282
319
|
cStyle = window.getComputedStyle(el);
|
|
283
320
|
const w = parseFloat(cStyle.width);
|
|
284
321
|
const h = parseFloat(cStyle.height);
|
|
285
322
|
return { w, h };
|
|
286
323
|
}
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
let a = 1, b = 0
|
|
290
|
-
let
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
324
|
+
function getMatrixInfo(el, recur = false) {
|
|
325
|
+
const rs = { scale: 1, angle: 0, x: 0, y: 0 };
|
|
326
|
+
let a = 1, b = 0;
|
|
327
|
+
let elCStyle = window.getComputedStyle(el);
|
|
328
|
+
let matrix = new DOMMatrix(elCStyle.transform);
|
|
329
|
+
if (recur) {
|
|
330
|
+
let p = el.parentElement;
|
|
331
|
+
while (p && p.tagName !== "BODY" && p.tagName.toLowerCase() !== "svg") {
|
|
332
|
+
let pCStyle = window.getComputedStyle(p);
|
|
333
|
+
const pMatrix = new DOMMatrix(pCStyle.transform);
|
|
334
|
+
matrix = matrix.multiply(pMatrix);
|
|
335
|
+
p = p.parentElement;
|
|
296
336
|
}
|
|
297
|
-
elCStyle = window.getComputedStyle(elCStyle);
|
|
298
337
|
}
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
a = parseFloat(matched.groups.a);
|
|
307
|
-
b = parseFloat(matched.groups.b);
|
|
308
|
-
parseFloat(matched.groups.c);
|
|
309
|
-
parseFloat(matched.groups.d);
|
|
310
|
-
x = parseFloat(matched.groups.x);
|
|
311
|
-
y = parseFloat(matched.groups.y);
|
|
312
|
-
}
|
|
313
|
-
if (e && f) {
|
|
314
|
-
x = e;
|
|
315
|
-
y = f;
|
|
338
|
+
if (matrix) {
|
|
339
|
+
a = matrix.a;
|
|
340
|
+
b = matrix.b;
|
|
341
|
+
matrix.c;
|
|
342
|
+
matrix.d;
|
|
343
|
+
rs.x = matrix.e;
|
|
344
|
+
rs.y = matrix.f;
|
|
316
345
|
}
|
|
317
|
-
const rs = { scale: 1, angle: 0, x, y };
|
|
318
346
|
rs.scale = Math.sqrt(a * a + b * b);
|
|
319
347
|
rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
|
|
320
348
|
return rs;
|
|
@@ -323,28 +351,29 @@ function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
|
|
|
323
351
|
if (!elRect) {
|
|
324
352
|
elRect = el.getBoundingClientRect();
|
|
325
353
|
}
|
|
354
|
+
let rx = elRect.x, ry = elRect.y;
|
|
326
355
|
if (!elCStyle) {
|
|
327
356
|
elCStyle = window.getComputedStyle(el);
|
|
328
357
|
}
|
|
329
358
|
if (!matrixInfo) {
|
|
330
|
-
matrixInfo = getMatrixInfo(
|
|
359
|
+
matrixInfo = getMatrixInfo(el, true);
|
|
331
360
|
}
|
|
332
361
|
const scale = matrixInfo.scale;
|
|
333
362
|
let x = event.clientX -
|
|
334
|
-
|
|
363
|
+
rx -
|
|
335
364
|
(parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
|
|
336
365
|
el.scrollLeft * scale;
|
|
337
366
|
let y = event.clientY -
|
|
338
|
-
|
|
367
|
+
ry -
|
|
339
368
|
(parseFloat(elCStyle.borderTopWidth) || 0) * scale +
|
|
340
369
|
el.scrollTop * scale;
|
|
341
|
-
return { x: x / scale, y: y / scale };
|
|
370
|
+
return { x: x / scale, y: y / scale, scale };
|
|
342
371
|
}
|
|
343
|
-
function getRectInContainer(el, container) {
|
|
372
|
+
function getRectInContainer(el, container, matrixInfo) {
|
|
344
373
|
const elRect = el.getBoundingClientRect();
|
|
345
374
|
const containerRect = container.getBoundingClientRect();
|
|
346
375
|
const elCStyle = window.getComputedStyle(container);
|
|
347
|
-
|
|
376
|
+
matrixInfo = matrixInfo || getMatrixInfo(container, true);
|
|
348
377
|
const scale = matrixInfo.scale;
|
|
349
378
|
let x = elRect.x -
|
|
350
379
|
containerRect.x -
|
|
@@ -361,6 +390,12 @@ function getRectInContainer(el, container) {
|
|
|
361
390
|
h: elRect.height / scale,
|
|
362
391
|
};
|
|
363
392
|
}
|
|
393
|
+
function getRectCenter(el, matrixInfo) {
|
|
394
|
+
const panelRect = getRectInContainer(el, el.parentElement, matrixInfo);
|
|
395
|
+
let x = Math.round(panelRect.x + panelRect.w / 2);
|
|
396
|
+
let y = Math.round(panelRect.y + panelRect.h / 2);
|
|
397
|
+
return { x, y };
|
|
398
|
+
}
|
|
364
399
|
function getCenterXy(el, ox, oy) {
|
|
365
400
|
const cStyle = window.getComputedStyle(el);
|
|
366
401
|
const center = cStyle.transformOrigin;
|
|
@@ -380,7 +415,19 @@ function getCenterXy(el, ox, oy) {
|
|
|
380
415
|
return { sx: startX, sy: startY, x: startX + ox, y: startY + oy, ox, oy };
|
|
381
416
|
}
|
|
382
417
|
function getCenterXySVG(el, ox, oy) {
|
|
383
|
-
|
|
418
|
+
let elRect = el.getBoundingClientRect();
|
|
419
|
+
let svgRect = el.ownerSVGElement.getBoundingClientRect();
|
|
420
|
+
let x = elRect.x - svgRect.x;
|
|
421
|
+
let y = elRect.y - svgRect.y;
|
|
422
|
+
const shadowDom = el.cloneNode();
|
|
423
|
+
rotateTo(shadowDom, 0);
|
|
424
|
+
const parentEl = el.parentElement;
|
|
425
|
+
if (parentEl) {
|
|
426
|
+
parentEl.appendChild(shadowDom);
|
|
427
|
+
const offsetXY = getRectInContainer(shadowDom, parentEl);
|
|
428
|
+
(offsetXY.x), (offsetXY.y);
|
|
429
|
+
parentEl.removeChild(shadowDom);
|
|
430
|
+
}
|
|
384
431
|
return { sx: x, sy: y, x: x + ox, y: y + oy, ox, oy };
|
|
385
432
|
}
|
|
386
433
|
function getVertex(el, ox, oy) {
|
|
@@ -388,8 +435,10 @@ function getVertex(el, ox, oy) {
|
|
|
388
435
|
const w = parseFloat(cStyle.width);
|
|
389
436
|
const h = parseFloat(cStyle.height);
|
|
390
437
|
const { originX, originY } = parseOxy(ox, oy, w, h);
|
|
391
|
-
const { x, y, sx, sy } = el instanceof SVGGraphicsElement
|
|
392
|
-
|
|
438
|
+
const { x, y, sx, sy } = el instanceof SVGGraphicsElement
|
|
439
|
+
? getCenterXySVG(el, originX, originY)
|
|
440
|
+
: getCenterXy(el);
|
|
441
|
+
const { angle } = getMatrixInfo(el);
|
|
393
442
|
return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
|
|
394
443
|
}
|
|
395
444
|
function calcVertex(w, h, cx, cy, sx, sy, radian) {
|
|
@@ -400,28 +449,43 @@ function calcVertex(w, h, cx, cy, sx, sy, radian) {
|
|
|
400
449
|
{ x: w, y: h },
|
|
401
450
|
];
|
|
402
451
|
return map(originVertex, ({ x, y }) => {
|
|
403
|
-
const nx = (x - cx + sx) * Math.cos(radian) -
|
|
404
|
-
|
|
405
|
-
const ny = (x - cx + sx) * Math.sin(radian) +
|
|
406
|
-
(y - cy + sy) * Math.cos(radian);
|
|
452
|
+
const nx = (x - cx + sx) * Math.cos(radian) - (y - cy + sy) * Math.sin(radian);
|
|
453
|
+
const ny = (x - cx + sx) * Math.sin(radian) + (y - cy + sy) * Math.cos(radian);
|
|
407
454
|
return { x: cx + nx, y: cy + ny };
|
|
408
455
|
});
|
|
409
456
|
}
|
|
410
|
-
function parseOxy(ox, oy, w, h) {
|
|
457
|
+
function parseOxy(ox, oy, w, h, el) {
|
|
411
458
|
let originX = 0, originY = 0;
|
|
459
|
+
let transformOrigin;
|
|
412
460
|
if (isString(ox)) {
|
|
413
461
|
originX = (parseFloat(ox) / 100) * w;
|
|
414
462
|
}
|
|
415
463
|
else if (isNumber(ox)) {
|
|
416
464
|
originX = ox;
|
|
417
465
|
}
|
|
466
|
+
else if (el) {
|
|
467
|
+
if (!transformOrigin)
|
|
468
|
+
transformOrigin = window.getComputedStyle(el).transformOrigin;
|
|
469
|
+
const centerPair = transformOrigin.split(" ");
|
|
470
|
+
originX = parseFloat(centerPair[0]);
|
|
471
|
+
}
|
|
418
472
|
if (isString(oy)) {
|
|
419
473
|
originY = (parseFloat(oy) / 100) * h;
|
|
420
474
|
}
|
|
421
475
|
else if (isNumber(oy)) {
|
|
422
476
|
originY = oy;
|
|
423
477
|
}
|
|
478
|
+
else if (el) {
|
|
479
|
+
if (!transformOrigin)
|
|
480
|
+
transformOrigin = window.getComputedStyle(el).transformOrigin;
|
|
481
|
+
const centerPair = transformOrigin.split(" ");
|
|
482
|
+
originY = parseFloat(centerPair[1]);
|
|
483
|
+
}
|
|
424
484
|
return { originX, originY };
|
|
485
|
+
}
|
|
486
|
+
function normalizeVector(x, y) {
|
|
487
|
+
let len = Math.sqrt(x * x + y * y);
|
|
488
|
+
return { x: x / len, y: y / len };
|
|
425
489
|
}
|
|
426
490
|
|
|
427
491
|
var _Uii_listeners;
|
|
@@ -518,9 +582,10 @@ class Uii {
|
|
|
518
582
|
e.preventDefault();
|
|
519
583
|
return false;
|
|
520
584
|
}
|
|
585
|
+
let matrixInfo = getMatrixInfo(el, true);
|
|
521
586
|
const pointerMove = (ev) => {
|
|
522
|
-
const offX = ev.clientX - originPosX;
|
|
523
|
-
const offY = ev.clientY - originPosY;
|
|
587
|
+
const offX = (ev.clientX - originPosX) / matrixInfo.scale;
|
|
588
|
+
const offY = (ev.clientY - originPosY) / matrixInfo.scale;
|
|
524
589
|
if (!dragging) {
|
|
525
590
|
if (Math.abs(offX) > threshold || Math.abs(offY) > threshold) {
|
|
526
591
|
dragging = true;
|
|
@@ -603,7 +668,6 @@ class Uii {
|
|
|
603
668
|
_Uii_listeners = new WeakMap();
|
|
604
669
|
|
|
605
670
|
var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
|
|
606
|
-
const THRESHOLD$4 = 1;
|
|
607
671
|
const CLASS_SPLITTABLE = "uii-splittable";
|
|
608
672
|
const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
|
|
609
673
|
const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
|
|
@@ -672,8 +736,17 @@ class Splittable extends Uii {
|
|
|
672
736
|
dom2 = h.nextElementSibling;
|
|
673
737
|
}
|
|
674
738
|
else {
|
|
675
|
-
|
|
676
|
-
|
|
739
|
+
let domCon = getRootEl(h, con);
|
|
740
|
+
let domL = domCon.previousElementSibling;
|
|
741
|
+
let domR = domCon.nextElementSibling;
|
|
742
|
+
if (domL && !domL.querySelector(this.opts.handle)) {
|
|
743
|
+
dom1 = domL;
|
|
744
|
+
dom2 = domCon;
|
|
745
|
+
}
|
|
746
|
+
else {
|
|
747
|
+
dom1 = domCon;
|
|
748
|
+
dom2 = domR;
|
|
749
|
+
}
|
|
677
750
|
}
|
|
678
751
|
__classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
|
|
679
752
|
});
|
|
@@ -747,6 +820,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
747
820
|
const dom2Style = dom2.style;
|
|
748
821
|
const ghost = opts.ghost;
|
|
749
822
|
const ghostClass = opts.ghostClass;
|
|
823
|
+
const ghostTo = opts.ghostTo;
|
|
750
824
|
let ghostNode = null;
|
|
751
825
|
let sticked = 'none';
|
|
752
826
|
if (originSize < minSize1 / 2) {
|
|
@@ -770,7 +844,8 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
770
844
|
ghostNode.className =
|
|
771
845
|
ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
|
|
772
846
|
}
|
|
773
|
-
currentTarget.parentNode
|
|
847
|
+
let ghostParent = ghostTo ? (isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : currentTarget.parentNode;
|
|
848
|
+
ghostParent.appendChild(ghostNode);
|
|
774
849
|
onClone && onClone({ clone: ghostNode }, ev);
|
|
775
850
|
}
|
|
776
851
|
}
|
|
@@ -812,10 +887,10 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
812
887
|
anotherSize = blockSize - ds1 - splitterSize;
|
|
813
888
|
if (ghostNode) {
|
|
814
889
|
if (dir === 'v') {
|
|
815
|
-
ghostNode.style.top = startPos + ds1 -
|
|
890
|
+
ghostNode.style.top = startPos + ds1 - splitterSize / 2 + 'px';
|
|
816
891
|
}
|
|
817
892
|
else {
|
|
818
|
-
ghostNode.style.left = startPos + ds1 -
|
|
893
|
+
ghostNode.style.left = startPos + ds1 - splitterSize / 2 + 'px';
|
|
819
894
|
}
|
|
820
895
|
}
|
|
821
896
|
else {
|
|
@@ -830,16 +905,16 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
830
905
|
onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
|
|
831
906
|
}
|
|
832
907
|
if (dir === 'v') {
|
|
833
|
-
currentStyle.top = dom2.offsetTop -
|
|
908
|
+
currentStyle.top = dom2.offsetTop - splitterSize / 2 + 'px';
|
|
834
909
|
}
|
|
835
910
|
else {
|
|
836
|
-
currentStyle.left = dom2.offsetLeft -
|
|
911
|
+
currentStyle.left = dom2.offsetLeft - splitterSize / 2 + 'px';
|
|
837
912
|
}
|
|
838
913
|
}
|
|
839
914
|
onSplit && onSplit({ size1: ds1, size2: anotherSize }, ev);
|
|
840
915
|
});
|
|
841
916
|
onPointerEnd((args) => {
|
|
842
|
-
var _a
|
|
917
|
+
var _a;
|
|
843
918
|
const { ev, currentStyle } = args;
|
|
844
919
|
switch (dir) {
|
|
845
920
|
case 'v':
|
|
@@ -861,17 +936,17 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
861
936
|
dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
|
|
862
937
|
}
|
|
863
938
|
if (dir === 'v') {
|
|
864
|
-
currentStyle.top = startPos + ds1 -
|
|
939
|
+
currentStyle.top = startPos + ds1 - splitterSize / 2 + 'px';
|
|
865
940
|
}
|
|
866
941
|
else {
|
|
867
|
-
currentStyle.left = startPos + ds1 -
|
|
942
|
+
currentStyle.left = startPos + ds1 - splitterSize / 2 + 'px';
|
|
868
943
|
}
|
|
869
|
-
(
|
|
944
|
+
(_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
|
|
870
945
|
}
|
|
871
946
|
onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
|
|
872
947
|
});
|
|
873
948
|
}, {
|
|
874
|
-
threshold: THRESHOLD
|
|
949
|
+
threshold: THRESHOLD,
|
|
875
950
|
lockPage: true
|
|
876
951
|
});
|
|
877
952
|
};
|
|
@@ -879,7 +954,6 @@ function newSplittable(container, opts) {
|
|
|
879
954
|
return new Splittable(container, opts);
|
|
880
955
|
}
|
|
881
956
|
|
|
882
|
-
const THRESHOLD$3 = 2;
|
|
883
957
|
const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
|
|
884
958
|
const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
|
|
885
959
|
const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
|
|
@@ -915,14 +989,12 @@ class Resizable extends Uii {
|
|
|
915
989
|
const onPointerDown = opts.onPointerDown;
|
|
916
990
|
if (onPointerDown && onPointerDown(ev) === false)
|
|
917
991
|
return true;
|
|
918
|
-
let container = panel
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
let setOrigin = !(panel instanceof SVGGraphicsElement);
|
|
922
|
-
let matrixInfo = getMatrixInfo(panel);
|
|
923
|
-
const offset = getRectInContainer(panel, container);
|
|
992
|
+
let container = panel.parentElement;
|
|
993
|
+
let matrixInfo = getMatrixInfo(panel, true);
|
|
994
|
+
const offset = getRectInContainer(panel, container, matrixInfo);
|
|
924
995
|
const offsetParentRect = container.getBoundingClientRect();
|
|
925
996
|
const offsetParentCStyle = window.getComputedStyle(container);
|
|
997
|
+
let setOrigin = !(panel instanceof SVGGraphicsElement) && matrixInfo.angle != 0;
|
|
926
998
|
const { w, h } = getStyleSize(panel);
|
|
927
999
|
const originW = w;
|
|
928
1000
|
const originH = h;
|
|
@@ -966,10 +1038,10 @@ class Resizable extends Uii {
|
|
|
966
1038
|
toTransformOrigin = "0 0";
|
|
967
1039
|
break;
|
|
968
1040
|
}
|
|
969
|
-
let minWidth;
|
|
970
|
-
let minHeight;
|
|
971
|
-
let maxWidth;
|
|
972
|
-
let maxHeight;
|
|
1041
|
+
let minWidth = 1;
|
|
1042
|
+
let minHeight = 1;
|
|
1043
|
+
let maxWidth = 9999;
|
|
1044
|
+
let maxHeight = 9999;
|
|
973
1045
|
if (isArray(opts.minSize)) {
|
|
974
1046
|
minWidth = opts.minSize[0];
|
|
975
1047
|
minHeight = opts.minSize[1];
|
|
@@ -1001,9 +1073,8 @@ class Resizable extends Uii {
|
|
|
1001
1073
|
let currentVertex;
|
|
1002
1074
|
let refPoint;
|
|
1003
1075
|
let k1;
|
|
1004
|
-
let startOx = 0;
|
|
1005
|
-
let startOy = 0;
|
|
1006
1076
|
let sX = 0, sY = 0;
|
|
1077
|
+
let startPointXy;
|
|
1007
1078
|
onPointerStart(function (args) {
|
|
1008
1079
|
var _a;
|
|
1009
1080
|
const { ev } = args;
|
|
@@ -1037,16 +1108,17 @@ class Resizable extends Uii {
|
|
|
1037
1108
|
const w = parseFloat(cStyle.width);
|
|
1038
1109
|
const h = parseFloat(cStyle.height);
|
|
1039
1110
|
const oxy = parseOxy(opts.ox, opts.oy, w, h);
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
const
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
let
|
|
1111
|
+
oxy.originX;
|
|
1112
|
+
oxy.originY;
|
|
1113
|
+
const panelRect = getRectInContainer(panel, panel.parentElement, matrixInfo);
|
|
1114
|
+
let centerX = Math.round(panelRect.x + panelRect.w / 2);
|
|
1115
|
+
let centerY = Math.round(panelRect.y + panelRect.h / 2);
|
|
1116
|
+
let sx = Math.round(centerX - originW / 2);
|
|
1117
|
+
let sy = Math.round(centerY - originH / 2);
|
|
1118
|
+
transform.x = sx;
|
|
1119
|
+
transform.y = sy;
|
|
1046
1120
|
const deg = matrixInfo.angle * ONE_ANG;
|
|
1047
|
-
currentVertex =
|
|
1048
|
-
vertexBeforeTransform =
|
|
1049
|
-
calcVertex(originW, originH, centerX, centerY, sx, sy, deg);
|
|
1121
|
+
currentVertex = vertexBeforeTransform = calcVertex(originW, originH, centerX, centerY, sx, sy, deg);
|
|
1050
1122
|
switch (dir) {
|
|
1051
1123
|
case "s":
|
|
1052
1124
|
case "e":
|
|
@@ -1075,26 +1147,27 @@ class Resizable extends Uii {
|
|
|
1075
1147
|
style.transformOrigin = toTransformOrigin;
|
|
1076
1148
|
}
|
|
1077
1149
|
else {
|
|
1078
|
-
style.transformOrigin = `${centerX -
|
|
1150
|
+
style.transformOrigin = `${centerX - sx}px ${centerY - sy}px`;
|
|
1079
1151
|
}
|
|
1080
1152
|
}
|
|
1081
1153
|
if (panel instanceof SVGGraphicsElement) {
|
|
1082
1154
|
sX = matrixInfo.x - currentVertex[0].x;
|
|
1083
1155
|
sY = matrixInfo.y - currentVertex[0].y;
|
|
1084
1156
|
}
|
|
1085
|
-
|
|
1157
|
+
startPointXy = getPointInContainer(ev, container, offsetParentRect, offsetParentCStyle, matrixInfo);
|
|
1158
|
+
onStart &&
|
|
1159
|
+
onStart.call(uiik, { w: originW, h: originH, transform }, ev);
|
|
1086
1160
|
});
|
|
1087
1161
|
onPointerMove((args) => {
|
|
1088
|
-
const { ev } = args;
|
|
1089
|
-
|
|
1090
|
-
let
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
let hyLen = Math.sqrt((newX -
|
|
1095
|
-
(newY - refPoint.y) * (newY - refPoint.y));
|
|
1162
|
+
const { ev, offX, offY } = args;
|
|
1163
|
+
let newX = startPointXy.x + offX;
|
|
1164
|
+
let newY = startPointXy.y + offY;
|
|
1165
|
+
const rpx = refPoint.x;
|
|
1166
|
+
const rpy = refPoint.y;
|
|
1167
|
+
let angle = Math.atan2(newY - rpy, newX - rpx) * ONE_RAD - matrixInfo.angle;
|
|
1168
|
+
let hyLen = Math.sqrt((newX - rpx) * (newX - rpx) + (newY - rpy) * (newY - rpy));
|
|
1096
1169
|
let pl1 = Math.abs(k1 === Infinity
|
|
1097
|
-
? newY - refPoint.y
|
|
1170
|
+
? newY - refPoint.y / matrixInfo.scale
|
|
1098
1171
|
: hyLen * Math.cos(angle * ONE_ANG));
|
|
1099
1172
|
let pl2 = Math.sqrt(hyLen * hyLen - pl1 * pl1);
|
|
1100
1173
|
let w = originW;
|
|
@@ -1102,6 +1175,18 @@ class Resizable extends Uii {
|
|
|
1102
1175
|
let y = originY;
|
|
1103
1176
|
let x = originX;
|
|
1104
1177
|
let angl = 0;
|
|
1178
|
+
switch (dir) {
|
|
1179
|
+
case "w":
|
|
1180
|
+
case "sw":
|
|
1181
|
+
angl =
|
|
1182
|
+
Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
|
|
1183
|
+
break;
|
|
1184
|
+
case "n":
|
|
1185
|
+
case "ne":
|
|
1186
|
+
case "nw":
|
|
1187
|
+
angl =
|
|
1188
|
+
Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
|
|
1189
|
+
}
|
|
1105
1190
|
switch (dir) {
|
|
1106
1191
|
case "s":
|
|
1107
1192
|
h = pl2;
|
|
@@ -1109,17 +1194,63 @@ class Resizable extends Uii {
|
|
|
1109
1194
|
case "e":
|
|
1110
1195
|
w = pl1;
|
|
1111
1196
|
break;
|
|
1197
|
+
case "n":
|
|
1198
|
+
h = pl2;
|
|
1199
|
+
if (angl === 90) {
|
|
1200
|
+
h = newY - currentVertex[2].y;
|
|
1201
|
+
}
|
|
1202
|
+
break;
|
|
1203
|
+
case "w":
|
|
1204
|
+
w = pl1;
|
|
1205
|
+
if (angl === 0) {
|
|
1206
|
+
w = newX - currentVertex[1].x;
|
|
1207
|
+
}
|
|
1208
|
+
break;
|
|
1209
|
+
case "nw":
|
|
1210
|
+
w = pl1;
|
|
1211
|
+
h = pl2;
|
|
1212
|
+
if (matrixInfo.angle === 180) {
|
|
1213
|
+
w = newX - currentVertex[3].x;
|
|
1214
|
+
h = newY - currentVertex[3].y;
|
|
1215
|
+
}
|
|
1216
|
+
break;
|
|
1112
1217
|
case "se":
|
|
1218
|
+
case "sw":
|
|
1219
|
+
case "ne":
|
|
1113
1220
|
w = pl1;
|
|
1114
1221
|
h = pl2;
|
|
1115
1222
|
break;
|
|
1223
|
+
}
|
|
1224
|
+
if (minHeight && h < minHeight)
|
|
1225
|
+
h = minHeight;
|
|
1226
|
+
if (maxHeight && h > maxHeight)
|
|
1227
|
+
h = maxHeight;
|
|
1228
|
+
if (minWidth && w < minWidth) {
|
|
1229
|
+
w = minWidth;
|
|
1230
|
+
}
|
|
1231
|
+
if (maxWidth && w > maxWidth)
|
|
1232
|
+
w = maxWidth;
|
|
1233
|
+
let hLine, wLine;
|
|
1234
|
+
switch (dir) {
|
|
1235
|
+
case "s":
|
|
1236
|
+
hLine = { p1: currentVertex[1], p2: currentVertex[0] };
|
|
1237
|
+
h = limitWH(newX, newY, hLine, h, minHeight);
|
|
1238
|
+
break;
|
|
1239
|
+
case "e":
|
|
1240
|
+
wLine = { p1: currentVertex[0], p2: currentVertex[2] };
|
|
1241
|
+
w = limitWH(newX, newY, wLine, w, minWidth);
|
|
1242
|
+
break;
|
|
1243
|
+
case "se":
|
|
1244
|
+
wLine = { p1: currentVertex[0], p2: currentVertex[2] };
|
|
1245
|
+
hLine = { p1: currentVertex[1], p2: currentVertex[0] };
|
|
1246
|
+
w = limitWH(newX, newY, wLine, w, minWidth);
|
|
1247
|
+
h = limitWH(newX, newY, hLine, h, minHeight);
|
|
1248
|
+
break;
|
|
1116
1249
|
case "n":
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
|
|
1250
|
+
hLine = { p1: currentVertex[2], p2: currentVertex[3] };
|
|
1251
|
+
h = limitWH(newX, newY, hLine, h, minHeight);
|
|
1120
1252
|
let plh;
|
|
1121
1253
|
if (angl === 90) {
|
|
1122
|
-
h = newY - currentVertex[2].y;
|
|
1123
1254
|
x = currentVertex[2].x;
|
|
1124
1255
|
y = newY;
|
|
1125
1256
|
}
|
|
@@ -1135,12 +1266,10 @@ class Resizable extends Uii {
|
|
|
1135
1266
|
}
|
|
1136
1267
|
break;
|
|
1137
1268
|
case "w":
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
|
|
1269
|
+
wLine = { p1: currentVertex[3], p2: currentVertex[1] };
|
|
1270
|
+
w = limitWH(newX, newY, wLine, w, minWidth);
|
|
1141
1271
|
let plw;
|
|
1142
1272
|
if (angl === 0) {
|
|
1143
|
-
w = newX - currentVertex[1].x;
|
|
1144
1273
|
x = newX;
|
|
1145
1274
|
y = currentVertex[1].y;
|
|
1146
1275
|
}
|
|
@@ -1156,20 +1285,59 @@ class Resizable extends Uii {
|
|
|
1156
1285
|
}
|
|
1157
1286
|
break;
|
|
1158
1287
|
case "nw":
|
|
1159
|
-
|
|
1160
|
-
|
|
1288
|
+
wLine = { p1: currentVertex[3], p2: currentVertex[1] };
|
|
1289
|
+
hLine = { p1: currentVertex[2], p2: currentVertex[3] };
|
|
1290
|
+
w = limitWH(newX, newY, wLine, w, minWidth);
|
|
1291
|
+
h = limitWH(newX, newY, hLine, h, minHeight);
|
|
1161
1292
|
x = newX;
|
|
1162
1293
|
y = newY;
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1294
|
+
let cv2x = currentVertex[2].x;
|
|
1295
|
+
let cv2y = currentVertex[2].y;
|
|
1296
|
+
let cv1x = currentVertex[1].x;
|
|
1297
|
+
let cv1y = currentVertex[1].y;
|
|
1298
|
+
let v32n = normalizeVector(cv2x - currentVertex[3].x, cv2y - currentVertex[3].y);
|
|
1299
|
+
v32n.x *= minWidth;
|
|
1300
|
+
v32n.y *= minWidth;
|
|
1301
|
+
let v10n = normalizeVector(currentVertex[0].x - cv1x, currentVertex[0].y - cv1y);
|
|
1302
|
+
v10n.x *= minWidth;
|
|
1303
|
+
v10n.y *= minWidth;
|
|
1304
|
+
let wp1 = { x: wLine.p1.x + v32n.x, y: wLine.p1.y + v32n.y };
|
|
1305
|
+
let wp2 = { x: wLine.p2.x + v10n.x, y: wLine.p2.y + v10n.y };
|
|
1306
|
+
let invalid = (wp2.x - wp1.x) * (newY - wp1.y) -
|
|
1307
|
+
(wp2.y - wp1.y) * (newX - wp1.x) >
|
|
1308
|
+
0;
|
|
1309
|
+
if (invalid) {
|
|
1310
|
+
let v20n = normalizeVector(currentVertex[0].x - cv2x, currentVertex[0].y - cv2y);
|
|
1311
|
+
v20n.x *= h;
|
|
1312
|
+
v20n.y *= h;
|
|
1313
|
+
x = wp1.x + v20n.x;
|
|
1314
|
+
y = wp1.y + v20n.y;
|
|
1315
|
+
}
|
|
1316
|
+
let v31n = normalizeVector(cv1x - currentVertex[3].x, cv1y - currentVertex[3].y);
|
|
1317
|
+
v31n.x *= minHeight;
|
|
1318
|
+
v31n.y *= minHeight;
|
|
1319
|
+
let v20n = normalizeVector(currentVertex[0].x - cv2x, currentVertex[0].y - cv2y);
|
|
1320
|
+
v20n.x *= minHeight;
|
|
1321
|
+
v20n.y *= minHeight;
|
|
1322
|
+
let hp1 = { x: hLine.p1.x + v31n.x, y: hLine.p1.y + v31n.y };
|
|
1323
|
+
let hp2 = { x: hLine.p2.x + v20n.x, y: hLine.p2.y + v20n.y };
|
|
1324
|
+
invalid =
|
|
1325
|
+
(hp2.x - hp1.x) * (newY - hp1.y) -
|
|
1326
|
+
(hp2.y - hp1.y) * (newX - hp1.x) >
|
|
1327
|
+
0;
|
|
1328
|
+
if (invalid) {
|
|
1329
|
+
let v10n = normalizeVector(currentVertex[0].x - cv1x, currentVertex[0].y - cv1y);
|
|
1330
|
+
v10n.x *= w;
|
|
1331
|
+
v10n.y *= w;
|
|
1332
|
+
x = hp2.x + v10n.x;
|
|
1333
|
+
y = hp2.y + v10n.y;
|
|
1166
1334
|
}
|
|
1167
1335
|
break;
|
|
1168
1336
|
case "sw":
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1337
|
+
wLine = { p1: currentVertex[3], p2: currentVertex[1] };
|
|
1338
|
+
hLine = { p1: currentVertex[1], p2: currentVertex[0] };
|
|
1339
|
+
w = limitWH(newX, newY, wLine, w, minWidth);
|
|
1340
|
+
h = limitWH(newX, newY, hLine, h, minHeight);
|
|
1173
1341
|
let plw1;
|
|
1174
1342
|
if (angl === 0) {
|
|
1175
1343
|
x = newX;
|
|
@@ -1187,10 +1355,10 @@ class Resizable extends Uii {
|
|
|
1187
1355
|
}
|
|
1188
1356
|
break;
|
|
1189
1357
|
case "ne":
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1358
|
+
wLine = { p1: currentVertex[0], p2: currentVertex[2] };
|
|
1359
|
+
hLine = { p1: currentVertex[2], p2: currentVertex[3] };
|
|
1360
|
+
w = limitWH(newX, newY, wLine, w, minWidth);
|
|
1361
|
+
h = limitWH(newX, newY, hLine, h, minHeight);
|
|
1194
1362
|
let plne;
|
|
1195
1363
|
if (angl === 0) {
|
|
1196
1364
|
x = newX;
|
|
@@ -1208,19 +1376,6 @@ class Resizable extends Uii {
|
|
|
1208
1376
|
}
|
|
1209
1377
|
break;
|
|
1210
1378
|
}
|
|
1211
|
-
if (changeW) {
|
|
1212
|
-
console.log(minWidth, 'xxxxxx', w);
|
|
1213
|
-
if (minWidth && w < minWidth)
|
|
1214
|
-
w = minWidth;
|
|
1215
|
-
if (maxWidth && w > maxWidth)
|
|
1216
|
-
w = maxWidth;
|
|
1217
|
-
}
|
|
1218
|
-
if (changeH) {
|
|
1219
|
-
if (minHeight && h < minHeight)
|
|
1220
|
-
h = minHeight;
|
|
1221
|
-
if (maxHeight && h > maxHeight)
|
|
1222
|
-
h = maxHeight;
|
|
1223
|
-
}
|
|
1224
1379
|
if (aspectRatio) {
|
|
1225
1380
|
if (changeW) {
|
|
1226
1381
|
style.width = w + "px";
|
|
@@ -1245,19 +1400,22 @@ class Resizable extends Uii {
|
|
|
1245
1400
|
}
|
|
1246
1401
|
}
|
|
1247
1402
|
if (changeY) {
|
|
1248
|
-
transform.
|
|
1403
|
+
transform.moveTo(x, y + sY);
|
|
1249
1404
|
}
|
|
1250
1405
|
if (changeX) {
|
|
1251
|
-
transform.
|
|
1406
|
+
transform.moveTo(x + sX, y);
|
|
1252
1407
|
}
|
|
1253
1408
|
lastX = x;
|
|
1254
1409
|
lastY = y;
|
|
1255
1410
|
currentW = w;
|
|
1256
1411
|
currentH = h;
|
|
1257
1412
|
if (onResize && onResize.call) {
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1413
|
+
onResize.call;
|
|
1414
|
+
const panelRect = getRectInContainer(panel, panel.parentElement, matrixInfo);
|
|
1415
|
+
let centerX = Math.round(panelRect.x + panelRect.w / 2);
|
|
1416
|
+
let centerY = Math.round(panelRect.y + panelRect.h / 2);
|
|
1417
|
+
let sx = Math.round(centerX - originW / 2);
|
|
1418
|
+
let sy = Math.round(centerY - originH / 2);
|
|
1261
1419
|
onResize.call(uiik, {
|
|
1262
1420
|
w,
|
|
1263
1421
|
h,
|
|
@@ -1269,7 +1427,7 @@ class Resizable extends Uii {
|
|
|
1269
1427
|
sx: sx,
|
|
1270
1428
|
sy: sy,
|
|
1271
1429
|
deg: matrixInfo.angle,
|
|
1272
|
-
transform
|
|
1430
|
+
transform,
|
|
1273
1431
|
}, ev);
|
|
1274
1432
|
}
|
|
1275
1433
|
});
|
|
@@ -1284,37 +1442,31 @@ class Resizable extends Uii {
|
|
|
1284
1442
|
moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
|
|
1285
1443
|
resize(transform, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
|
|
1286
1444
|
}
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
let
|
|
1445
|
+
if (setOrigin)
|
|
1446
|
+
panel.style.transformOrigin = originalTransformOrigin;
|
|
1447
|
+
let { x: centerX, y: centerY } = getRectCenter(panel, matrixInfo);
|
|
1448
|
+
let sx = Math.round(centerX - currentW / 2);
|
|
1449
|
+
let sy = Math.round(centerY - currentH / 2);
|
|
1292
1450
|
const deg = matrixInfo.angle * ONE_ANG;
|
|
1293
1451
|
const currentVertex = calcVertex(currentW, currentH, centerX, centerY, sx, sy, deg);
|
|
1294
|
-
if (
|
|
1295
|
-
if (
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
if (changeX || changeY) {
|
|
1305
|
-
transform.moveTo(transform.x - (currentVertex[0].x - lastX), transform.y - (currentVertex[0].y - lastY));
|
|
1306
|
-
}
|
|
1307
|
-
else {
|
|
1308
|
-
transform.moveTo(transform.x -
|
|
1309
|
-
(currentVertex[0].x - vertexBeforeTransform[0].x), transform.y -
|
|
1310
|
-
(currentVertex[0].y - vertexBeforeTransform[0].y));
|
|
1452
|
+
if (setOrigin) {
|
|
1453
|
+
if (panel instanceof HTMLElement) {
|
|
1454
|
+
if (changeX || changeY) {
|
|
1455
|
+
transform.moveTo(transform.x - (currentVertex[0].x - lastX), transform.y - (currentVertex[0].y - lastY));
|
|
1456
|
+
}
|
|
1457
|
+
else {
|
|
1458
|
+
transform.moveTo(transform.x -
|
|
1459
|
+
(currentVertex[0].x - vertexBeforeTransform[0].x), transform.y -
|
|
1460
|
+
(currentVertex[0].y - vertexBeforeTransform[0].y));
|
|
1461
|
+
}
|
|
1311
1462
|
}
|
|
1312
1463
|
}
|
|
1313
1464
|
handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
|
|
1314
|
-
onEnd &&
|
|
1465
|
+
onEnd &&
|
|
1466
|
+
onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
|
|
1315
1467
|
});
|
|
1316
1468
|
}, {
|
|
1317
|
-
threshold: THRESHOLD
|
|
1469
|
+
threshold: THRESHOLD,
|
|
1318
1470
|
lockPage: true,
|
|
1319
1471
|
});
|
|
1320
1472
|
}
|
|
@@ -1348,6 +1500,15 @@ class Resizable extends Uii {
|
|
|
1348
1500
|
});
|
|
1349
1501
|
}
|
|
1350
1502
|
}
|
|
1503
|
+
function limitWH(newX, newY, line, value, minValue) {
|
|
1504
|
+
let p1 = line.p1;
|
|
1505
|
+
let p2 = line.p2;
|
|
1506
|
+
let invalid = (p2.x - p1.x) * (newY - p1.y) - (p2.y - p1.y) * (newX - p1.x) > 0;
|
|
1507
|
+
if (invalid) {
|
|
1508
|
+
return minValue;
|
|
1509
|
+
}
|
|
1510
|
+
return value;
|
|
1511
|
+
}
|
|
1351
1512
|
function resize(transform, style, w, h) {
|
|
1352
1513
|
if (transform.el instanceof SVGGraphicsElement) {
|
|
1353
1514
|
if (isDefined(w))
|
|
@@ -1377,14 +1538,15 @@ class Draggable extends Uii {
|
|
|
1377
1538
|
super(els, assign({
|
|
1378
1539
|
containment: false,
|
|
1379
1540
|
watch: true,
|
|
1380
|
-
threshold:
|
|
1541
|
+
threshold: THRESHOLD,
|
|
1381
1542
|
ghost: false,
|
|
1382
1543
|
direction: "",
|
|
1383
1544
|
scroll: true,
|
|
1545
|
+
useTransform: true,
|
|
1384
1546
|
snapOptions: {
|
|
1385
1547
|
tolerance: 10,
|
|
1386
1548
|
},
|
|
1387
|
-
self:
|
|
1549
|
+
self: false,
|
|
1388
1550
|
}, opts));
|
|
1389
1551
|
_Draggable_instances.add(this);
|
|
1390
1552
|
_Draggable_handleMap.set(this, new WeakMap());
|
|
@@ -1439,7 +1601,7 @@ class Draggable extends Uii {
|
|
|
1439
1601
|
let draggableList = this.ele;
|
|
1440
1602
|
const eleString = this.eleString;
|
|
1441
1603
|
const initStyle = __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).bind(this);
|
|
1442
|
-
this.addPointerDown(bindTarget, ({ ev,
|
|
1604
|
+
this.addPointerDown(bindTarget, ({ ev, currentCStyle, onPointerStart, onPointerMove, onPointerEnd, }) => {
|
|
1443
1605
|
var _a;
|
|
1444
1606
|
let t = ev.target;
|
|
1445
1607
|
if (!t)
|
|
@@ -1448,7 +1610,7 @@ class Draggable extends Uii {
|
|
|
1448
1610
|
draggableList = bindTarget.querySelectorAll(eleString);
|
|
1449
1611
|
initStyle(draggableList);
|
|
1450
1612
|
}
|
|
1451
|
-
let findRs =
|
|
1613
|
+
let findRs = closest(t, (node) => includes(draggableList, node), "parentNode");
|
|
1452
1614
|
if (!findRs)
|
|
1453
1615
|
return true;
|
|
1454
1616
|
const dragDom = findRs;
|
|
@@ -1457,33 +1619,25 @@ class Draggable extends Uii {
|
|
|
1457
1619
|
return true;
|
|
1458
1620
|
}
|
|
1459
1621
|
if (opts.self && dragDom !== t)
|
|
1460
|
-
return;
|
|
1622
|
+
return true;
|
|
1461
1623
|
const onPointerDown = opts.onPointerDown;
|
|
1462
|
-
if (onPointerDown &&
|
|
1624
|
+
if (onPointerDown &&
|
|
1625
|
+
onPointerDown({ draggable: dragDom }, ev) === false)
|
|
1463
1626
|
return true;
|
|
1464
1627
|
const filter = opts.filter;
|
|
1465
1628
|
if (filter) {
|
|
1466
|
-
if (some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
|
|
1629
|
+
if (some(dragDom.querySelectorAll(filter), (ele) => ele.contains(t)))
|
|
1467
1630
|
return true;
|
|
1468
1631
|
}
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
let
|
|
1474
|
-
let offsetPointY = offsetXy.y;
|
|
1475
|
-
const matrixInfo = getMatrixInfo(dragDom);
|
|
1476
|
-
const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
|
|
1477
|
-
const matrixInfoParent = getMatrixInfo(offsetParent);
|
|
1478
|
-
offsetPointX = offsetPointX / (matrixInfo.scale * matrixInfoParent.scale);
|
|
1479
|
-
offsetPointY = offsetPointY / (matrixInfo.scale * matrixInfoParent.scale);
|
|
1480
|
-
if (matrixInfo.angle != 0) {
|
|
1481
|
-
offsetPointX = currentXy.x - matrixInfo.x;
|
|
1482
|
-
offsetPointY = currentXy.y - matrixInfo.y;
|
|
1483
|
-
}
|
|
1632
|
+
let offsetParent;
|
|
1633
|
+
let offsetParentRect;
|
|
1634
|
+
let offsetParentCStyle;
|
|
1635
|
+
let offsetPointX = 0;
|
|
1636
|
+
let offsetPointY = 0;
|
|
1484
1637
|
const inContainer = !!container;
|
|
1485
1638
|
const ghost = opts.ghost;
|
|
1486
1639
|
const ghostClass = opts.ghostClass;
|
|
1640
|
+
const ghostTo = opts.ghostTo;
|
|
1487
1641
|
const direction = opts.direction;
|
|
1488
1642
|
const onStart = opts.onStart;
|
|
1489
1643
|
const onDrag = opts.onDrag;
|
|
@@ -1491,64 +1645,25 @@ class Draggable extends Uii {
|
|
|
1491
1645
|
const onClone = opts.onClone;
|
|
1492
1646
|
const originalZIndex = currentCStyle.zIndex;
|
|
1493
1647
|
let zIndex = opts.zIndex || originalZIndex;
|
|
1494
|
-
const classes = opts.classes ||
|
|
1648
|
+
const classes = opts.classes || "";
|
|
1495
1649
|
const group = opts.group;
|
|
1496
|
-
if (group) {
|
|
1497
|
-
let i = -1;
|
|
1498
|
-
each(DRAGGER_GROUPS[group], el => {
|
|
1499
|
-
const z = parseInt(currentCStyle.zIndex) || 0;
|
|
1500
|
-
if (z > i)
|
|
1501
|
-
i = z;
|
|
1502
|
-
});
|
|
1503
|
-
zIndex = i + 1;
|
|
1504
|
-
}
|
|
1505
1650
|
const scroll = opts.scroll;
|
|
1506
1651
|
const scrollSpeed = opts.scrollSpeed || 10;
|
|
1507
1652
|
let gridX, gridY;
|
|
1508
|
-
const grid = opts.grid;
|
|
1509
|
-
if (isArray(grid)) {
|
|
1510
|
-
gridX = grid[0];
|
|
1511
|
-
gridY = grid[1];
|
|
1512
|
-
}
|
|
1513
|
-
else if (isNumber(grid)) {
|
|
1514
|
-
gridX = gridY = grid;
|
|
1515
|
-
}
|
|
1516
1653
|
const snapOn = opts.snap;
|
|
1517
1654
|
let snappable;
|
|
1518
1655
|
const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
|
|
1519
1656
|
const onSnap = opts.onSnap;
|
|
1520
1657
|
let lastSnapDirY = "", lastSnapDirX = "";
|
|
1521
1658
|
let lastSnapping = "";
|
|
1522
|
-
if (snapOn) {
|
|
1523
|
-
snappable = map((container || document).querySelectorAll(snapOn), (el) => {
|
|
1524
|
-
const { x, y, w, h } = getRectInContainer(el, offsetParent);
|
|
1525
|
-
return {
|
|
1526
|
-
x1: x,
|
|
1527
|
-
y1: y,
|
|
1528
|
-
x2: x + w,
|
|
1529
|
-
y2: y + h,
|
|
1530
|
-
el: el,
|
|
1531
|
-
};
|
|
1532
|
-
});
|
|
1533
|
-
}
|
|
1534
1659
|
const dragDomRect = dragDom.getBoundingClientRect();
|
|
1535
|
-
|
|
1536
|
-
|
|
1660
|
+
let originW;
|
|
1661
|
+
let originH;
|
|
1537
1662
|
let minX = 0;
|
|
1538
1663
|
let minY = 0;
|
|
1539
1664
|
let maxX = 0;
|
|
1540
1665
|
let maxY = 0;
|
|
1541
|
-
let
|
|
1542
|
-
let originOffY = 0;
|
|
1543
|
-
if (inContainer) {
|
|
1544
|
-
maxX = container.scrollWidth - originW;
|
|
1545
|
-
maxY = container.scrollHeight - originH;
|
|
1546
|
-
}
|
|
1547
|
-
if (maxX < 0)
|
|
1548
|
-
maxX = 0;
|
|
1549
|
-
if (maxY < 0)
|
|
1550
|
-
maxY = 0;
|
|
1551
|
-
let copyNode;
|
|
1666
|
+
let ghostNode;
|
|
1552
1667
|
let transform;
|
|
1553
1668
|
let timer = null;
|
|
1554
1669
|
let toLeft = false;
|
|
@@ -1556,45 +1671,114 @@ class Draggable extends Uii {
|
|
|
1556
1671
|
let toRight = false;
|
|
1557
1672
|
let toBottom = false;
|
|
1558
1673
|
let endX = 0, endY = 0;
|
|
1674
|
+
let startMatrixInfo;
|
|
1675
|
+
let startPointXy;
|
|
1559
1676
|
onPointerStart(function (args) {
|
|
1560
|
-
var _a;
|
|
1561
1677
|
const { ev } = args;
|
|
1678
|
+
offsetParent =
|
|
1679
|
+
dragDom instanceof HTMLElement
|
|
1680
|
+
? dragDom.offsetParent || document.body
|
|
1681
|
+
: dragDom.ownerSVGElement;
|
|
1682
|
+
offsetParentRect = offsetParent.getBoundingClientRect();
|
|
1683
|
+
offsetParentCStyle = window.getComputedStyle(offsetParent);
|
|
1684
|
+
startMatrixInfo = getMatrixInfo(dragDom, true);
|
|
1685
|
+
const offsetXy = getPointInContainer(ev, dragDom, undefined, undefined, startMatrixInfo);
|
|
1686
|
+
offsetPointX = offsetXy.x;
|
|
1687
|
+
offsetPointY = offsetXy.y;
|
|
1688
|
+
startPointXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle, startMatrixInfo);
|
|
1689
|
+
originW =
|
|
1690
|
+
dragDomRect.width;
|
|
1691
|
+
originH =
|
|
1692
|
+
dragDomRect.height;
|
|
1693
|
+
if (dragDom instanceof SVGGElement || dragDom instanceof SVGSVGElement) {
|
|
1694
|
+
let bbox = dragDom.getBBox();
|
|
1695
|
+
offsetPointX += bbox.x;
|
|
1696
|
+
offsetPointY += bbox.y;
|
|
1697
|
+
}
|
|
1698
|
+
if (startMatrixInfo.angle != 0) {
|
|
1699
|
+
let { sx, sy } = getCenterXy(dragDom);
|
|
1700
|
+
offsetPointX = startPointXy.x - sx;
|
|
1701
|
+
offsetPointY = startPointXy.y - sy;
|
|
1702
|
+
}
|
|
1703
|
+
if (group) {
|
|
1704
|
+
let i = -1;
|
|
1705
|
+
each(DRAGGER_GROUPS[group], (el) => {
|
|
1706
|
+
const z = parseInt(currentCStyle.zIndex) || 0;
|
|
1707
|
+
if (z > i)
|
|
1708
|
+
i = z;
|
|
1709
|
+
});
|
|
1710
|
+
zIndex = i + 1;
|
|
1711
|
+
}
|
|
1712
|
+
const grid = opts.grid;
|
|
1713
|
+
if (isArray(grid)) {
|
|
1714
|
+
gridX = grid[0];
|
|
1715
|
+
gridY = grid[1];
|
|
1716
|
+
}
|
|
1717
|
+
else if (isNumber(grid)) {
|
|
1718
|
+
gridX = gridY = grid;
|
|
1719
|
+
}
|
|
1720
|
+
if (snapOn) {
|
|
1721
|
+
snappable = map((container || document).querySelectorAll(snapOn), (el) => {
|
|
1722
|
+
const { x, y, w, h } = getRectInContainer(el, offsetParent);
|
|
1723
|
+
return {
|
|
1724
|
+
x1: x,
|
|
1725
|
+
y1: y,
|
|
1726
|
+
x2: x + w,
|
|
1727
|
+
y2: y + h,
|
|
1728
|
+
el: el,
|
|
1729
|
+
};
|
|
1730
|
+
});
|
|
1731
|
+
}
|
|
1732
|
+
if (inContainer) {
|
|
1733
|
+
maxX =
|
|
1734
|
+
container.scrollWidth - originW / startMatrixInfo.scale;
|
|
1735
|
+
maxY =
|
|
1736
|
+
container.scrollHeight - originH / startMatrixInfo.scale;
|
|
1737
|
+
}
|
|
1738
|
+
if (maxX < 0)
|
|
1739
|
+
maxX = 0;
|
|
1740
|
+
if (maxY < 0)
|
|
1741
|
+
maxY = 0;
|
|
1562
1742
|
if (ghost) {
|
|
1563
1743
|
if (isFunction(ghost)) {
|
|
1564
|
-
|
|
1744
|
+
ghostNode = ghost(dragDom);
|
|
1565
1745
|
}
|
|
1566
1746
|
else {
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1747
|
+
ghostNode = dragDom.cloneNode(true);
|
|
1748
|
+
ghostNode.style.opacity = "0.3";
|
|
1749
|
+
ghostNode.style.pointerEvents = "none";
|
|
1750
|
+
ghostNode.style.position = "absolute";
|
|
1571
1751
|
}
|
|
1572
|
-
|
|
1752
|
+
ghostNode.style.zIndex = zIndex + "";
|
|
1573
1753
|
if (ghostClass) {
|
|
1574
|
-
|
|
1754
|
+
ghostNode.classList.add(...compact(split(ghostClass, " ")));
|
|
1575
1755
|
}
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1756
|
+
ghostNode.classList.add(...compact(split(classes, " ")));
|
|
1757
|
+
ghostNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
|
|
1758
|
+
let ghostParent = ghostTo ? (isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : dragDom.parentNode;
|
|
1759
|
+
ghostParent === null || ghostParent === void 0 ? void 0 : ghostParent.appendChild(ghostNode);
|
|
1760
|
+
transform = wrapper(ghostNode, opts.useTransform);
|
|
1761
|
+
onClone && onClone({ clone: ghostNode }, ev);
|
|
1581
1762
|
}
|
|
1582
1763
|
else {
|
|
1583
|
-
transform = wrapper(dragDom);
|
|
1764
|
+
transform = wrapper(dragDom, opts.useTransform);
|
|
1584
1765
|
}
|
|
1585
|
-
dragDom.classList.add(...compact(split(classes,
|
|
1586
|
-
if (!
|
|
1587
|
-
dragDom.style.zIndex = zIndex +
|
|
1766
|
+
dragDom.classList.add(...compact(split(classes, " ")));
|
|
1767
|
+
if (!ghostNode)
|
|
1768
|
+
dragDom.style.zIndex = zIndex + "";
|
|
1588
1769
|
dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
|
|
1589
|
-
onStart &&
|
|
1590
|
-
|
|
1770
|
+
onStart &&
|
|
1771
|
+
onStart({ draggable: dragDom, x: startPointXy.x, y: startPointXy.y, transform }, ev);
|
|
1772
|
+
const customEv = new Event("uii-dragactive", {
|
|
1773
|
+
bubbles: true,
|
|
1774
|
+
cancelable: false,
|
|
1775
|
+
});
|
|
1591
1776
|
dragDom.dispatchEvent(customEv);
|
|
1592
1777
|
});
|
|
1593
1778
|
onPointerMove((args) => {
|
|
1594
1779
|
const { ev, pointX, pointY, offX, offY } = args;
|
|
1595
|
-
|
|
1596
|
-
let
|
|
1597
|
-
let newY = currentXy.y;
|
|
1780
|
+
let newX = startPointXy.x + offX;
|
|
1781
|
+
let newY = startPointXy.y + offY;
|
|
1598
1782
|
if (scroll) {
|
|
1599
1783
|
const lX = pointX - offsetParentRect.x;
|
|
1600
1784
|
const lY = pointY - offsetParentRect.y;
|
|
@@ -1604,9 +1788,7 @@ class Draggable extends Uii {
|
|
|
1604
1788
|
toTop = lY < EDGE_THRESHOLD;
|
|
1605
1789
|
toRight = rX < EDGE_THRESHOLD;
|
|
1606
1790
|
toBottom = rY < EDGE_THRESHOLD;
|
|
1607
|
-
if (toLeft || toTop
|
|
1608
|
-
||
|
|
1609
|
-
toRight || toBottom) {
|
|
1791
|
+
if (toLeft || toTop || toRight || toBottom) {
|
|
1610
1792
|
if (!timer) {
|
|
1611
1793
|
timer = setInterval(() => {
|
|
1612
1794
|
if (toLeft) {
|
|
@@ -1638,17 +1820,17 @@ class Draggable extends Uii {
|
|
|
1638
1820
|
y = ((y / gridY) >> 0) * gridY;
|
|
1639
1821
|
}
|
|
1640
1822
|
if (inContainer) {
|
|
1641
|
-
if (
|
|
1642
|
-
x =
|
|
1823
|
+
if (x < minX) {
|
|
1824
|
+
x = 0;
|
|
1643
1825
|
}
|
|
1644
|
-
if (
|
|
1645
|
-
y =
|
|
1826
|
+
if (y < minY) {
|
|
1827
|
+
y = 0;
|
|
1646
1828
|
}
|
|
1647
|
-
if (
|
|
1648
|
-
x = maxX
|
|
1829
|
+
if (x > maxX) {
|
|
1830
|
+
x = maxX;
|
|
1649
1831
|
}
|
|
1650
|
-
if (
|
|
1651
|
-
y = maxY
|
|
1832
|
+
if (y > maxY) {
|
|
1833
|
+
y = maxY;
|
|
1652
1834
|
}
|
|
1653
1835
|
}
|
|
1654
1836
|
let canDrag = true;
|
|
@@ -1721,7 +1903,7 @@ class Draggable extends Uii {
|
|
|
1721
1903
|
if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
|
|
1722
1904
|
setTimeout(() => {
|
|
1723
1905
|
onSnap({
|
|
1724
|
-
el:
|
|
1906
|
+
el: ghostNode || dragDom,
|
|
1725
1907
|
targetH: targetX,
|
|
1726
1908
|
targetV: targetY,
|
|
1727
1909
|
dirH: snapDirX,
|
|
@@ -1743,7 +1925,7 @@ class Draggable extends Uii {
|
|
|
1743
1925
|
oy: offY,
|
|
1744
1926
|
x: x,
|
|
1745
1927
|
y: y,
|
|
1746
|
-
transform
|
|
1928
|
+
transform,
|
|
1747
1929
|
}, ev) === false) {
|
|
1748
1930
|
canDrag = false;
|
|
1749
1931
|
endX = x;
|
|
@@ -1765,7 +1947,7 @@ class Draggable extends Uii {
|
|
|
1765
1947
|
}
|
|
1766
1948
|
});
|
|
1767
1949
|
onPointerEnd((args) => {
|
|
1768
|
-
var _a
|
|
1950
|
+
var _a;
|
|
1769
1951
|
const { ev, currentStyle } = args;
|
|
1770
1952
|
if (scroll) {
|
|
1771
1953
|
if (timer) {
|
|
@@ -1773,25 +1955,32 @@ class Draggable extends Uii {
|
|
|
1773
1955
|
timer = null;
|
|
1774
1956
|
}
|
|
1775
1957
|
}
|
|
1776
|
-
dragDom.classList.remove(...compact(split(classes,
|
|
1958
|
+
dragDom.classList.remove(...compact(split(classes, " ")));
|
|
1777
1959
|
currentStyle.zIndex = originalZIndex;
|
|
1778
1960
|
dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
|
|
1779
1961
|
let moveToGhost = true;
|
|
1780
1962
|
if (onEnd) {
|
|
1781
|
-
moveToGhost =
|
|
1963
|
+
moveToGhost =
|
|
1964
|
+
onEnd({ draggable: dragDom, x: endX, y: endY, transform }, ev) ===
|
|
1965
|
+
false
|
|
1966
|
+
? false
|
|
1967
|
+
: true;
|
|
1782
1968
|
}
|
|
1783
|
-
const customEv = new Event("uii-dragdeactive", {
|
|
1969
|
+
const customEv = new Event("uii-dragdeactive", {
|
|
1970
|
+
bubbles: true,
|
|
1971
|
+
cancelable: false,
|
|
1972
|
+
});
|
|
1784
1973
|
dragDom.dispatchEvent(customEv);
|
|
1785
1974
|
if (ghost) {
|
|
1786
|
-
(
|
|
1975
|
+
(_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
|
|
1787
1976
|
if (moveToGhost !== false) {
|
|
1788
|
-
wrapper(dragDom).moveTo(transform.x, transform.y);
|
|
1977
|
+
wrapper(dragDom, opts.useTransform).moveTo(transform.x, transform.y);
|
|
1789
1978
|
}
|
|
1790
1979
|
}
|
|
1791
1980
|
});
|
|
1792
1981
|
}, {
|
|
1793
1982
|
threshold: this.opts.threshold || 0,
|
|
1794
|
-
lockPage: true
|
|
1983
|
+
lockPage: true,
|
|
1795
1984
|
});
|
|
1796
1985
|
}
|
|
1797
1986
|
onOptionChanged(opts) {
|
|
@@ -1820,10 +2009,10 @@ _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Dra
|
|
|
1820
2009
|
const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
|
|
1821
2010
|
ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
|
|
1822
2011
|
if (!isUndefined(this.opts.cursor)) {
|
|
1823
|
-
el.style.cursor = this.opts.cursor.default ||
|
|
2012
|
+
el.style.cursor = this.opts.cursor.default || "move";
|
|
1824
2013
|
if (isDefined(this.opts.cursor.over)) {
|
|
1825
2014
|
el.dataset.cursorOver = this.opts.cursor.over;
|
|
1826
|
-
el.dataset.cursorActive = this.opts.cursor.active ||
|
|
2015
|
+
el.dataset.cursorActive = this.opts.cursor.active || "move";
|
|
1827
2016
|
}
|
|
1828
2017
|
}
|
|
1829
2018
|
});
|
|
@@ -1847,7 +2036,7 @@ class Droppable extends Uii {
|
|
|
1847
2036
|
this.registerEvent(droppable, "mouseenter", (e) => {
|
|
1848
2037
|
if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
|
|
1849
2038
|
return;
|
|
1850
|
-
if (
|
|
2039
|
+
if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
|
|
1851
2040
|
return;
|
|
1852
2041
|
if (opts.hoverClass) {
|
|
1853
2042
|
each(split(opts.hoverClass, ' '), cls => {
|
|
@@ -1862,7 +2051,7 @@ class Droppable extends Uii {
|
|
|
1862
2051
|
this.registerEvent(droppable, "mouseleave", (e) => {
|
|
1863
2052
|
if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
|
|
1864
2053
|
return;
|
|
1865
|
-
if (
|
|
2054
|
+
if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
|
|
1866
2055
|
return;
|
|
1867
2056
|
if (opts.hoverClass) {
|
|
1868
2057
|
each(split(opts.hoverClass, ' '), cls => {
|
|
@@ -1877,14 +2066,14 @@ class Droppable extends Uii {
|
|
|
1877
2066
|
this.registerEvent(droppable, "mousemove", (e) => {
|
|
1878
2067
|
if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
|
|
1879
2068
|
return;
|
|
1880
|
-
if (
|
|
2069
|
+
if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
|
|
1881
2070
|
return;
|
|
1882
2071
|
opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
|
|
1883
2072
|
});
|
|
1884
2073
|
this.registerEvent(droppable, "mouseup", (e) => {
|
|
1885
2074
|
if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
|
|
1886
2075
|
return;
|
|
1887
|
-
if (
|
|
2076
|
+
if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
|
|
1888
2077
|
return;
|
|
1889
2078
|
if (opts.hoverClass) {
|
|
1890
2079
|
each(split(opts.hoverClass, ' '), cls => {
|
|
@@ -1955,7 +2144,6 @@ function newDroppable(els, opts) {
|
|
|
1955
2144
|
return new Droppable(els, opts);
|
|
1956
2145
|
}
|
|
1957
2146
|
|
|
1958
|
-
const THRESHOLD$2 = 2;
|
|
1959
2147
|
const CLASS_ROTATABLE = "uii-rotatable";
|
|
1960
2148
|
const CLASS_ROTATABLE_HANDLE = "uii-rotatable-handle";
|
|
1961
2149
|
const CLASS_ROTATABLE_ACTIVE = "uii-rotatable-active";
|
|
@@ -2007,23 +2195,20 @@ function bindHandle(uiik, handle, el, opts) {
|
|
|
2007
2195
|
let startOy = 0;
|
|
2008
2196
|
let startDeg = 0;
|
|
2009
2197
|
let container;
|
|
2198
|
+
let startPointXy;
|
|
2010
2199
|
onPointerStart(function (args) {
|
|
2011
2200
|
const { ev } = args;
|
|
2012
2201
|
const { w, h } = getStyleSize(el);
|
|
2013
|
-
const { originX, originY } = parseOxy(opts.ox, opts.oy, w, h);
|
|
2202
|
+
const { originX, originY } = parseOxy(opts.ox, opts.oy, w, h, el);
|
|
2014
2203
|
startOx = originX;
|
|
2015
2204
|
startOy = originY;
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
container =
|
|
2022
|
-
el instanceof SVGGraphicsElement
|
|
2023
|
-
? el.ownerSVGElement : el.parentElement;
|
|
2024
|
-
const currentXy = getPointInContainer(ev, container);
|
|
2205
|
+
let centerXy = getRectCenter(el);
|
|
2206
|
+
centerX = centerXy.x;
|
|
2207
|
+
centerY = centerXy.y;
|
|
2208
|
+
container = el.parentElement;
|
|
2209
|
+
startPointXy = getPointInContainer(ev, container);
|
|
2025
2210
|
startDeg =
|
|
2026
|
-
Math.atan2(
|
|
2211
|
+
Math.atan2(startPointXy.y - centerY, startPointXy.x - centerX) * ONE_RAD +
|
|
2027
2212
|
90;
|
|
2028
2213
|
if (startDeg < 0)
|
|
2029
2214
|
startDeg = 360 + startDeg;
|
|
@@ -2033,10 +2218,11 @@ function bindHandle(uiik, handle, el, opts) {
|
|
|
2033
2218
|
onStart && onStart({ deg, cx: centerX, cy: centerY }, ev);
|
|
2034
2219
|
});
|
|
2035
2220
|
onPointerMove((args) => {
|
|
2036
|
-
const { ev } = args;
|
|
2037
|
-
|
|
2221
|
+
const { ev, offX, offY } = args;
|
|
2222
|
+
let newX = startPointXy.x + offX;
|
|
2223
|
+
let newY = startPointXy.y + offY;
|
|
2038
2224
|
deg =
|
|
2039
|
-
Math.atan2(
|
|
2225
|
+
Math.atan2(newY - centerY, newX - centerX) * ONE_RAD +
|
|
2040
2226
|
90 -
|
|
2041
2227
|
startDeg;
|
|
2042
2228
|
onRotate &&
|
|
@@ -2056,7 +2242,7 @@ function bindHandle(uiik, handle, el, opts) {
|
|
|
2056
2242
|
onEnd && onEnd({ deg }, ev);
|
|
2057
2243
|
});
|
|
2058
2244
|
}, {
|
|
2059
|
-
threshold: THRESHOLD
|
|
2245
|
+
threshold: THRESHOLD,
|
|
2060
2246
|
lockPage: true,
|
|
2061
2247
|
});
|
|
2062
2248
|
}
|
|
@@ -2162,7 +2348,6 @@ var _Selectable_instances, _Selectable__detector, _Selectable__lastSelected, _Se
|
|
|
2162
2348
|
const CLASS_SELECTOR = "uii-selector";
|
|
2163
2349
|
const CLASS_SELECTING = "uii-selecting";
|
|
2164
2350
|
const CLASS_SELECTED = "uii-selected";
|
|
2165
|
-
const THRESHOLD$1 = 2;
|
|
2166
2351
|
class Selectable extends Uii {
|
|
2167
2352
|
constructor(container, opts) {
|
|
2168
2353
|
super(container, assign({
|
|
@@ -2227,10 +2412,9 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
|
|
|
2227
2412
|
if (onPointerDown && onPointerDown(ev) === false)
|
|
2228
2413
|
return true;
|
|
2229
2414
|
let originPos = "";
|
|
2230
|
-
let
|
|
2231
|
-
|
|
2232
|
-
let
|
|
2233
|
-
let hitPosY = startxy.y;
|
|
2415
|
+
let startPointXy = getPointInContainer(ev, con, currentRect, currentCStyle);
|
|
2416
|
+
let hitPosX = startPointXy.x;
|
|
2417
|
+
let hitPosY = startPointXy.y;
|
|
2234
2418
|
const style = selector.style;
|
|
2235
2419
|
let selection = [];
|
|
2236
2420
|
let lastSelection = [];
|
|
@@ -2254,13 +2438,9 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
|
|
|
2254
2438
|
style.display = 'block';
|
|
2255
2439
|
onStart && onStart({ selection: __classPrivateFieldGet(that, _Selectable__lastSelected, "f"), selectable: con }, ev);
|
|
2256
2440
|
});
|
|
2257
|
-
onPointerMove((
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
let pointX = currentXy.x;
|
|
2261
|
-
let pointY = currentXy.y;
|
|
2262
|
-
let offX = pointX - hitPosX;
|
|
2263
|
-
let offY = pointY - hitPosY;
|
|
2441
|
+
onPointerMove(({ ev, offX, offY }) => {
|
|
2442
|
+
let pointX = startPointXy.x + offX;
|
|
2443
|
+
let pointY = startPointXy.y + offY;
|
|
2264
2444
|
if (scroll) {
|
|
2265
2445
|
const ltX = ev.clientX - currentRect.x;
|
|
2266
2446
|
const ltY = ev.clientY - currentRect.y;
|
|
@@ -2365,7 +2545,7 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
|
|
|
2365
2545
|
onEnd({ selection, selectable: con }, ev);
|
|
2366
2546
|
});
|
|
2367
2547
|
}, {
|
|
2368
|
-
threshold: THRESHOLD
|
|
2548
|
+
threshold: THRESHOLD,
|
|
2369
2549
|
lockPage: true
|
|
2370
2550
|
});
|
|
2371
2551
|
};
|
|
@@ -2379,7 +2559,6 @@ const CLASS_SORTABLE_CONTAINER = "uii-sortable-container";
|
|
|
2379
2559
|
const CLASS_SORTABLE_GHOST = "uii-sortable-ghost";
|
|
2380
2560
|
const CLASS_SORTABLE_ACTIVE = "uii-sortable-active";
|
|
2381
2561
|
const ATTR_SORTABLE_ACTIVE = "uii-sortable-active";
|
|
2382
|
-
const THRESHOLD = 2;
|
|
2383
2562
|
class Sortable extends Uii {
|
|
2384
2563
|
constructor(container, opts) {
|
|
2385
2564
|
super(container, merge({
|
|
@@ -2755,7 +2934,7 @@ function newSortable(container, opts) {
|
|
|
2755
2934
|
return new Sortable(container, opts);
|
|
2756
2935
|
}
|
|
2757
2936
|
|
|
2758
|
-
var version = "1.3.
|
|
2937
|
+
var version = "1.3.2";
|
|
2759
2938
|
var repository = {
|
|
2760
2939
|
type: "git",
|
|
2761
2940
|
url: "https://github.com/holyhigh2/uiik"
|
|
@@ -2788,4 +2967,4 @@ var index = {
|
|
|
2788
2967
|
newSortable
|
|
2789
2968
|
};
|
|
2790
2969
|
|
|
2791
|
-
export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, Uii, UiiTransform, VERSION, calcVertex, index as default, getBox, getCenterXy, getCenterXySVG, getMatrixInfo, getPointInContainer, getPointOffset, getRectInContainer, getStyleSize, getStyleXy, getTranslate, getVertex, isSVGEl, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, parseOxy, restoreCursor, rotateTo, saveCursor, setCursor, unlockPage, wrapper };
|
|
2970
|
+
export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, THRESHOLD, Uii, UiiTransform, VERSION, calcVertex, index as default, getBox, getCenterXy, getCenterXySVG, getMatrixInfo, getPointInContainer, getPointOffset, getRectCenter, getRectInContainer, getStyleSize, getStyleXy, getTranslate, getVertex, isSVGEl, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, normalizeVector, parseOxy, restoreCursor, rotateTo, saveCursor, setCursor, transformMoveTo, unlockPage, wrapper };
|