uiik 1.3.0-beta.4 → 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.
Files changed (7) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/index.esm.js +489 -325
  3. package/index.js +491 -323
  4. package/package.json +2 -2
  5. package/transform.d.ts +6 -2
  6. package/types.d.ts +3 -0
  7. package/utils.d.ts +18 -2
package/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
- * uiik v1.3.0-beta.4
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-2023 @holyhigh2 may be freely distributed under the MIT license
5
+ * c) 2021-2024 @holyhigh2 may be freely distributed under the MIT license
6
6
  */
7
7
  (function (global, factory) {
8
8
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/is'), require('myfx/collection'), require('myfx/object'), require('myfx/string'), require('myfx/array'), require('myfx/tree'), require('myfx/utils')) :
@@ -45,45 +45,47 @@
45
45
 
46
46
  const UtMap = new WeakMap();
47
47
  class UiiTransform {
48
- constructor(el) {
48
+ constructor(el, useTransform = true) {
49
49
  this.angle = 0;
50
50
  this.el = el;
51
+ this.useTransform = useTransform;
51
52
  this.normalize(el);
52
53
  UtMap.set(el, this);
53
54
  }
54
55
  normalize(el) {
55
- let { x, y } = normalize(el || this.el);
56
- this.x = x;
57
- this.y = y;
56
+ let { offx, offy } = normalize(el || this.el, this.useTransform);
57
+ this.offx = offx * -1;
58
+ this.offy = offy * -1;
58
59
  return this;
59
60
  }
60
61
  moveTo(x, y) {
61
62
  this.x = x;
62
63
  this.y = y;
63
- moveTo(this.el, this.x, this.y);
64
+ (this.useTransform ? transformMoveTo : moveTo)(this.el, this.x + this.offx, this.y + this.offy);
64
65
  }
65
66
  moveToX(x) {
66
67
  this.x = x;
67
- moveTo(this.el, this.x, this.y);
68
+ (this.useTransform ? transformMoveTo : moveTo)(this.el, this.x + this.offx, NaN);
68
69
  }
69
70
  moveToY(y) {
70
71
  this.y = y;
71
- moveTo(this.el, this.x, this.y);
72
+ (this.useTransform ? transformMoveTo : moveTo)(this.el, NaN, this.y + this.offy);
72
73
  }
73
74
  rotateTo(deg, cx, cy) {
74
75
  this.angle = deg;
75
76
  rotateTo(this.el, deg, cx, cy);
76
77
  }
77
78
  }
78
- function normalize(el) {
79
+ function normalize(el, useTransform) {
79
80
  const style = window.getComputedStyle(el);
81
+ let offx = 0, offy = 0;
80
82
  let x = 0, y = 0;
83
+ let mx = 0, my = 0;
81
84
  if (el instanceof HTMLElement) {
82
- x = (parseFloat(style.left) || 0) + (parseFloat(style.marginLeft) || 0);
83
- y = (parseFloat(style.top) || 0) + (parseFloat(style.marginTop) || 0);
84
- el.style.setProperty("left", "0", "important");
85
- el.style.setProperty("top", "0", "important");
86
- el.style.setProperty("margin", "0", "important");
85
+ x = parseFloat(style.left) || 0;
86
+ y = parseFloat(style.top) || 0;
87
+ mx = parseFloat(style.marginLeft) || 0;
88
+ my = parseFloat(style.marginTop) || 0;
87
89
  }
88
90
  else {
89
91
  x =
@@ -92,24 +94,30 @@
92
94
  y =
93
95
  parseFloat(object.get(el, "y.baseVal.value") || object.get(el, "cy.baseVal.value")) ||
94
96
  0;
95
- el.removeAttribute("x");
96
- el.removeAttribute("y");
97
- el.removeAttribute("cx");
98
- el.removeAttribute("cy");
99
- }
100
- const { x: tx, y: ty } = getTranslate(el);
101
- x += tx || 0;
102
- y += ty || 0;
103
- moveTo(el, x, y);
104
- return { x, y };
97
+ }
98
+ if (useTransform) {
99
+ (offx = x), (offy = y);
100
+ }
101
+ else {
102
+ (offx = 0), (offy = 0);
103
+ }
104
+ return { offx: offx + mx, offy: offy + my };
105
105
  }
106
- function wrapper(el) {
106
+ function wrapper(el, useTransform = true) {
107
107
  let ut = UtMap.get(el);
108
108
  if (ut)
109
109
  return ut.normalize(el);
110
- return new UiiTransform(el);
110
+ return new UiiTransform(el, useTransform);
111
111
  }
112
112
  function transformMove(transofrmStr, x, y, unit = false) {
113
+ if (!is.isNumber(x) || is.isNaN(x)) {
114
+ return (`translateY(${y}${unit ? "px" : ""}) ` +
115
+ transofrmStr.replace(/translateY\([^)]+?\)/, "").trim());
116
+ }
117
+ if (!is.isNumber(y) || is.isNaN(x)) {
118
+ return (`translateX(${x}${unit ? "px" : ""}) ` +
119
+ transofrmStr.replace(/translateX\([^)]+?\)/, "").trim());
120
+ }
113
121
  return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""}) ` +
114
122
  transofrmStr.replace(/translate\([^)]+?\)/, "").trim());
115
123
  }
@@ -118,6 +126,14 @@
118
126
  let transformStr = "";
119
127
  if (el instanceof SVGGraphicsElement) {
120
128
  transformStr = el.getAttribute("transform") || "";
129
+ if (!transformStr) {
130
+ xVal =
131
+ parseFloat(object.get(el, "x.baseVal.value") || object.get(el, "cx.baseVal.value")) ||
132
+ 0;
133
+ yVal =
134
+ parseFloat(object.get(el, "y.baseVal.value") || object.get(el, "cy.baseVal.value")) ||
135
+ 0;
136
+ }
121
137
  }
122
138
  else {
123
139
  let style = el.style;
@@ -145,11 +161,26 @@
145
161
  }
146
162
  function moveTo(el, x, y) {
147
163
  if (el instanceof SVGGraphicsElement) {
148
- el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x, y));
164
+ if (x)
165
+ el.setAttribute("x", x + "");
166
+ if (y)
167
+ el.setAttribute("y", y + "");
168
+ }
169
+ else {
170
+ let style = el.style;
171
+ if (x)
172
+ style.left = x + "px";
173
+ if (y)
174
+ style.top = y + "px";
175
+ }
176
+ }
177
+ function transformMoveTo(el, x, y) {
178
+ if (el instanceof SVGGraphicsElement) {
179
+ el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x || 0, y || 0));
149
180
  }
150
181
  else {
151
182
  let style = el.style;
152
- style.transform = transformMove(style.transform || "", x, y, true);
183
+ style.transform = transformMove(style.transform || "", x || 0, y || 0, true);
153
184
  }
154
185
  }
155
186
  const EXP_GET_TRANSLATE = /translate\(\s*(?<x>[\d.-]+)\D*,\s*(?<y>[\d.-]+)\D*\)/gim;
@@ -198,6 +229,7 @@
198
229
 
199
230
  const ONE_ANG = Math.PI / 180;
200
231
  const ONE_RAD = 180 / Math.PI;
232
+ const THRESHOLD = 3;
201
233
  function getBox(child, parent) {
202
234
  const rect = child.getBoundingClientRect();
203
235
  const rs = { x: 0, y: 0, w: rect.width, h: rect.height };
@@ -277,33 +309,30 @@
277
309
  return { x, y };
278
310
  }
279
311
  function getStyleSize(el, cStyle) {
312
+ if ("getBBox" in el) {
313
+ let { width, height } = el.getBBox();
314
+ return { w: width, h: height };
315
+ }
280
316
  if (!cStyle)
281
317
  cStyle = window.getComputedStyle(el);
282
318
  const w = parseFloat(cStyle.width);
283
319
  const h = parseFloat(cStyle.height);
284
320
  return { w, h };
285
321
  }
286
- const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<e>[\d.-]+)\s*,\s*(?<f>[\d.-]+)\s*\)/;
287
322
  function getMatrixInfo(el, recur = false) {
288
- const rs = _getMatrixInfo(el);
323
+ const rs = { scale: 1, angle: 0, x: 0, y: 0 };
324
+ let a = 1, b = 0;
325
+ let elCStyle = window.getComputedStyle(el);
326
+ let matrix = new DOMMatrix(elCStyle.transform);
289
327
  if (recur) {
290
328
  let p = el.parentElement;
291
- while (p && p.tagName !== "BODY") {
292
- let prs = _getMatrixInfo(p);
293
- rs.scale *= prs.scale;
329
+ while (p && p.tagName !== "BODY" && p.tagName.toLowerCase() !== "svg") {
330
+ let pCStyle = window.getComputedStyle(p);
331
+ const pMatrix = new DOMMatrix(pCStyle.transform);
332
+ matrix = matrix.multiply(pMatrix);
294
333
  p = p.parentElement;
295
334
  }
296
335
  }
297
- return rs;
298
- }
299
- function _getMatrixInfo(el) {
300
- const rs = { scale: 1, angle: 0, x: 0, y: 0 };
301
- let a = 1, b = 0;
302
- let elCStyle;
303
- if (el instanceof SVGGraphicsElement || el instanceof HTMLElement) {
304
- elCStyle = window.getComputedStyle(el);
305
- }
306
- let matrix = _getMatrix(elCStyle.transform);
307
336
  if (matrix) {
308
337
  a = matrix.a;
309
338
  b = matrix.b;
@@ -316,30 +345,11 @@
316
345
  rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
317
346
  return rs;
318
347
  }
319
- function _getMatrix(transform) {
320
- let matrix = null;
321
- if (window.WebKitCSSMatrix) {
322
- matrix = new WebKitCSSMatrix(transform);
323
- }
324
- else {
325
- const matched = transform.match(EXP_MATRIX);
326
- if (matched && matched.groups) {
327
- matrix = {
328
- a: parseFloat(matched.groups.a),
329
- b: parseFloat(matched.groups.b),
330
- c: parseFloat(matched.groups.c),
331
- d: parseFloat(matched.groups.d),
332
- e: parseFloat(matched.groups.e),
333
- f: parseFloat(matched.groups.f),
334
- };
335
- }
336
- }
337
- return matrix;
338
- }
339
348
  function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
340
349
  if (!elRect) {
341
350
  elRect = el.getBoundingClientRect();
342
351
  }
352
+ let rx = elRect.x, ry = elRect.y;
343
353
  if (!elCStyle) {
344
354
  elCStyle = window.getComputedStyle(el);
345
355
  }
@@ -348,20 +358,20 @@
348
358
  }
349
359
  const scale = matrixInfo.scale;
350
360
  let x = event.clientX -
351
- elRect.x -
361
+ rx -
352
362
  (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
353
363
  el.scrollLeft * scale;
354
364
  let y = event.clientY -
355
- elRect.y -
365
+ ry -
356
366
  (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
357
367
  el.scrollTop * scale;
358
- return { x: x / scale, y: y / scale };
368
+ return { x: x / scale, y: y / scale, scale };
359
369
  }
360
- function getRectInContainer(el, container) {
370
+ function getRectInContainer(el, container, matrixInfo) {
361
371
  const elRect = el.getBoundingClientRect();
362
372
  const containerRect = container.getBoundingClientRect();
363
373
  const elCStyle = window.getComputedStyle(container);
364
- const matrixInfo = getMatrixInfo(container);
374
+ matrixInfo = matrixInfo || getMatrixInfo(container, true);
365
375
  const scale = matrixInfo.scale;
366
376
  let x = elRect.x -
367
377
  containerRect.x -
@@ -378,6 +388,12 @@
378
388
  h: elRect.height / scale,
379
389
  };
380
390
  }
391
+ function getRectCenter(el, matrixInfo) {
392
+ const panelRect = getRectInContainer(el, el.parentElement, matrixInfo);
393
+ let x = Math.round(panelRect.x + panelRect.w / 2);
394
+ let y = Math.round(panelRect.y + panelRect.h / 2);
395
+ return { x, y };
396
+ }
381
397
  function getCenterXy(el, ox, oy) {
382
398
  const cStyle = window.getComputedStyle(el);
383
399
  const center = cStyle.transformOrigin;
@@ -397,7 +413,19 @@
397
413
  return { sx: startX, sy: startY, x: startX + ox, y: startY + oy, ox, oy };
398
414
  }
399
415
  function getCenterXySVG(el, ox, oy) {
400
- const { x, y } = getTranslate(el);
416
+ let elRect = el.getBoundingClientRect();
417
+ let svgRect = el.ownerSVGElement.getBoundingClientRect();
418
+ let x = elRect.x - svgRect.x;
419
+ let y = elRect.y - svgRect.y;
420
+ const shadowDom = el.cloneNode();
421
+ rotateTo(shadowDom, 0);
422
+ const parentEl = el.parentElement;
423
+ if (parentEl) {
424
+ parentEl.appendChild(shadowDom);
425
+ const offsetXY = getRectInContainer(shadowDom, parentEl);
426
+ (offsetXY.x), (offsetXY.y);
427
+ parentEl.removeChild(shadowDom);
428
+ }
401
429
  return { sx: x, sy: y, x: x + ox, y: y + oy, ox, oy };
402
430
  }
403
431
  function getVertex(el, ox, oy) {
@@ -405,7 +433,9 @@
405
433
  const w = parseFloat(cStyle.width);
406
434
  const h = parseFloat(cStyle.height);
407
435
  const { originX, originY } = parseOxy(ox, oy, w, h);
408
- const { x, y, sx, sy } = el instanceof SVGGraphicsElement ? getCenterXySVG(el, originX, originY) : getCenterXy(el);
436
+ const { x, y, sx, sy } = el instanceof SVGGraphicsElement
437
+ ? getCenterXySVG(el, originX, originY)
438
+ : getCenterXy(el);
409
439
  const { angle } = getMatrixInfo(el);
410
440
  return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
411
441
  }
@@ -417,28 +447,43 @@
417
447
  { x: w, y: h },
418
448
  ];
419
449
  return collection.map(originVertex, ({ x, y }) => {
420
- const nx = (x - cx + sx) * Math.cos(radian) -
421
- (y - cy + sy) * Math.sin(radian);
422
- const ny = (x - cx + sx) * Math.sin(radian) +
423
- (y - cy + sy) * Math.cos(radian);
450
+ const nx = (x - cx + sx) * Math.cos(radian) - (y - cy + sy) * Math.sin(radian);
451
+ const ny = (x - cx + sx) * Math.sin(radian) + (y - cy + sy) * Math.cos(radian);
424
452
  return { x: cx + nx, y: cy + ny };
425
453
  });
426
454
  }
427
- function parseOxy(ox, oy, w, h) {
455
+ function parseOxy(ox, oy, w, h, el) {
428
456
  let originX = 0, originY = 0;
457
+ let transformOrigin;
429
458
  if (is.isString(ox)) {
430
459
  originX = (parseFloat(ox) / 100) * w;
431
460
  }
432
461
  else if (is.isNumber(ox)) {
433
462
  originX = ox;
434
463
  }
464
+ else if (el) {
465
+ if (!transformOrigin)
466
+ transformOrigin = window.getComputedStyle(el).transformOrigin;
467
+ const centerPair = transformOrigin.split(" ");
468
+ originX = parseFloat(centerPair[0]);
469
+ }
435
470
  if (is.isString(oy)) {
436
471
  originY = (parseFloat(oy) / 100) * h;
437
472
  }
438
473
  else if (is.isNumber(oy)) {
439
474
  originY = oy;
440
475
  }
476
+ else if (el) {
477
+ if (!transformOrigin)
478
+ transformOrigin = window.getComputedStyle(el).transformOrigin;
479
+ const centerPair = transformOrigin.split(" ");
480
+ originY = parseFloat(centerPair[1]);
481
+ }
441
482
  return { originX, originY };
483
+ }
484
+ function normalizeVector(x, y) {
485
+ let len = Math.sqrt(x * x + y * y);
486
+ return { x: x / len, y: y / len };
442
487
  }
443
488
 
444
489
  var _Uii_listeners;
@@ -535,9 +580,10 @@
535
580
  e.preventDefault();
536
581
  return false;
537
582
  }
583
+ let matrixInfo = getMatrixInfo(el, true);
538
584
  const pointerMove = (ev) => {
539
- const offX = ev.clientX - originPosX;
540
- const offY = ev.clientY - originPosY;
585
+ const offX = (ev.clientX - originPosX) / matrixInfo.scale;
586
+ const offY = (ev.clientY - originPosY) / matrixInfo.scale;
541
587
  if (!dragging) {
542
588
  if (Math.abs(offX) > threshold || Math.abs(offY) > threshold) {
543
589
  dragging = true;
@@ -620,7 +666,6 @@
620
666
  _Uii_listeners = new WeakMap();
621
667
 
622
668
  var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
623
- const THRESHOLD$4 = 1;
624
669
  const CLASS_SPLITTABLE = "uii-splittable";
625
670
  const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
626
671
  const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
@@ -689,8 +734,17 @@
689
734
  dom2 = h.nextElementSibling;
690
735
  }
691
736
  else {
692
- dom2 = getRootEl(h, con);
693
- dom1 = dom2.previousElementSibling;
737
+ let domCon = getRootEl(h, con);
738
+ let domL = domCon.previousElementSibling;
739
+ let domR = domCon.nextElementSibling;
740
+ if (domL && !domL.querySelector(this.opts.handle)) {
741
+ dom1 = domL;
742
+ dom2 = domCon;
743
+ }
744
+ else {
745
+ dom1 = domCon;
746
+ dom2 = domR;
747
+ }
694
748
  }
695
749
  __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);
696
750
  });
@@ -764,6 +818,7 @@
764
818
  const dom2Style = dom2.style;
765
819
  const ghost = opts.ghost;
766
820
  const ghostClass = opts.ghostClass;
821
+ const ghostTo = opts.ghostTo;
767
822
  let ghostNode = null;
768
823
  let sticked = 'none';
769
824
  if (originSize < minSize1 / 2) {
@@ -787,7 +842,8 @@
787
842
  ghostNode.className =
788
843
  ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
789
844
  }
790
- currentTarget.parentNode.appendChild(ghostNode);
845
+ let ghostParent = ghostTo ? (is.isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : currentTarget.parentNode;
846
+ ghostParent.appendChild(ghostNode);
791
847
  onClone && onClone({ clone: ghostNode }, ev);
792
848
  }
793
849
  }
@@ -829,10 +885,10 @@
829
885
  anotherSize = blockSize - ds1 - splitterSize;
830
886
  if (ghostNode) {
831
887
  if (dir === 'v') {
832
- ghostNode.style.top = startPos + ds1 - handleSize / 2 + 'px';
888
+ ghostNode.style.top = startPos + ds1 - splitterSize / 2 + 'px';
833
889
  }
834
890
  else {
835
- ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
891
+ ghostNode.style.left = startPos + ds1 - splitterSize / 2 + 'px';
836
892
  }
837
893
  }
838
894
  else {
@@ -847,16 +903,16 @@
847
903
  onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
848
904
  }
849
905
  if (dir === 'v') {
850
- currentStyle.top = dom2.offsetTop - handleSize / 2 + 'px';
906
+ currentStyle.top = dom2.offsetTop - splitterSize / 2 + 'px';
851
907
  }
852
908
  else {
853
- currentStyle.left = dom2.offsetLeft - handleSize / 2 + 'px';
909
+ currentStyle.left = dom2.offsetLeft - splitterSize / 2 + 'px';
854
910
  }
855
911
  }
856
912
  onSplit && onSplit({ size1: ds1, size2: anotherSize }, ev);
857
913
  });
858
914
  onPointerEnd((args) => {
859
- var _a, _b;
915
+ var _a;
860
916
  const { ev, currentStyle } = args;
861
917
  switch (dir) {
862
918
  case 'v':
@@ -878,17 +934,17 @@
878
934
  dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
879
935
  }
880
936
  if (dir === 'v') {
881
- currentStyle.top = startPos + ds1 - handleSize / 2 + 'px';
937
+ currentStyle.top = startPos + ds1 - splitterSize / 2 + 'px';
882
938
  }
883
939
  else {
884
- currentStyle.left = startPos + ds1 - handleSize / 2 + 'px';
940
+ currentStyle.left = startPos + ds1 - splitterSize / 2 + 'px';
885
941
  }
886
- ((_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = ghostNode.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
942
+ (_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
887
943
  }
888
944
  onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
889
945
  });
890
946
  }, {
891
- threshold: THRESHOLD$4,
947
+ threshold: THRESHOLD,
892
948
  lockPage: true
893
949
  });
894
950
  };
@@ -896,7 +952,6 @@
896
952
  return new Splittable(container, opts);
897
953
  }
898
954
 
899
- const THRESHOLD$3 = 2;
900
955
  const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
901
956
  const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
902
957
  const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
@@ -932,14 +987,12 @@
932
987
  const onPointerDown = opts.onPointerDown;
933
988
  if (onPointerDown && onPointerDown(ev) === false)
934
989
  return true;
935
- let container = panel instanceof SVGGraphicsElement
936
- ? panel.ownerSVGElement
937
- : panel.parentElement;
938
- let setOrigin = !(panel instanceof SVGGraphicsElement);
939
- let matrixInfo = getMatrixInfo(panel);
940
- const offset = getRectInContainer(panel, container);
990
+ let container = panel.parentElement;
991
+ let matrixInfo = getMatrixInfo(panel, true);
992
+ const offset = getRectInContainer(panel, container, matrixInfo);
941
993
  const offsetParentRect = container.getBoundingClientRect();
942
994
  const offsetParentCStyle = window.getComputedStyle(container);
995
+ let setOrigin = !(panel instanceof SVGGraphicsElement) && matrixInfo.angle != 0;
943
996
  const { w, h } = getStyleSize(panel);
944
997
  const originW = w;
945
998
  const originH = h;
@@ -983,10 +1036,10 @@
983
1036
  toTransformOrigin = "0 0";
984
1037
  break;
985
1038
  }
986
- let minWidth;
987
- let minHeight;
988
- let maxWidth;
989
- let maxHeight;
1039
+ let minWidth = 1;
1040
+ let minHeight = 1;
1041
+ let maxWidth = 9999;
1042
+ let maxHeight = 9999;
990
1043
  if (is.isArray(opts.minSize)) {
991
1044
  minWidth = opts.minSize[0];
992
1045
  minHeight = opts.minSize[1];
@@ -1018,9 +1071,8 @@
1018
1071
  let currentVertex;
1019
1072
  let refPoint;
1020
1073
  let k1;
1021
- let startOx = 0;
1022
- let startOy = 0;
1023
1074
  let sX = 0, sY = 0;
1075
+ let startPointXy;
1024
1076
  onPointerStart(function (args) {
1025
1077
  var _a;
1026
1078
  const { ev } = args;
@@ -1054,16 +1106,17 @@
1054
1106
  const w = parseFloat(cStyle.width);
1055
1107
  const h = parseFloat(cStyle.height);
1056
1108
  const oxy = parseOxy(opts.ox, opts.oy, w, h);
1057
- startOx = oxy.originX;
1058
- startOy = oxy.originY;
1059
- const { x, y, sx, sy } = panel instanceof SVGGraphicsElement
1060
- ? getCenterXySVG(panel, startOx, startOy)
1061
- : getCenterXy(panel);
1062
- let centerX = x, centerY = y;
1109
+ oxy.originX;
1110
+ oxy.originY;
1111
+ const panelRect = getRectInContainer(panel, panel.parentElement, matrixInfo);
1112
+ let centerX = Math.round(panelRect.x + panelRect.w / 2);
1113
+ let centerY = Math.round(panelRect.y + panelRect.h / 2);
1114
+ let sx = Math.round(centerX - originW / 2);
1115
+ let sy = Math.round(centerY - originH / 2);
1116
+ transform.x = sx;
1117
+ transform.y = sy;
1063
1118
  const deg = matrixInfo.angle * ONE_ANG;
1064
- currentVertex =
1065
- vertexBeforeTransform =
1066
- calcVertex(originW, originH, centerX, centerY, sx, sy, deg);
1119
+ currentVertex = vertexBeforeTransform = calcVertex(originW, originH, centerX, centerY, sx, sy, deg);
1067
1120
  switch (dir) {
1068
1121
  case "s":
1069
1122
  case "e":
@@ -1092,26 +1145,27 @@
1092
1145
  style.transformOrigin = toTransformOrigin;
1093
1146
  }
1094
1147
  else {
1095
- style.transformOrigin = `${centerX - transform.x}px ${centerY - transform.y}px`;
1148
+ style.transformOrigin = `${centerX - sx}px ${centerY - sy}px`;
1096
1149
  }
1097
1150
  }
1098
1151
  if (panel instanceof SVGGraphicsElement) {
1099
1152
  sX = matrixInfo.x - currentVertex[0].x;
1100
1153
  sY = matrixInfo.y - currentVertex[0].y;
1101
1154
  }
1102
- onStart && onStart.call(uiik, { w: originW, h: originH, transform }, ev);
1155
+ startPointXy = getPointInContainer(ev, container, offsetParentRect, offsetParentCStyle, matrixInfo);
1156
+ onStart &&
1157
+ onStart.call(uiik, { w: originW, h: originH, transform }, ev);
1103
1158
  });
1104
1159
  onPointerMove((args) => {
1105
- const { ev } = args;
1106
- const currentXy = getPointInContainer(ev, container, offsetParentRect, offsetParentCStyle);
1107
- let newX = currentXy.x;
1108
- let newY = currentXy.y;
1109
- let angle = Math.atan2(newY - refPoint.y, newX - refPoint.x) * ONE_RAD -
1110
- matrixInfo.angle;
1111
- let hyLen = Math.sqrt((newX - refPoint.x) * (newX - refPoint.x) +
1112
- (newY - refPoint.y) * (newY - refPoint.y));
1160
+ const { ev, offX, offY } = args;
1161
+ let newX = startPointXy.x + offX;
1162
+ let newY = startPointXy.y + offY;
1163
+ const rpx = refPoint.x;
1164
+ const rpy = refPoint.y;
1165
+ let angle = Math.atan2(newY - rpy, newX - rpx) * ONE_RAD - matrixInfo.angle;
1166
+ let hyLen = Math.sqrt((newX - rpx) * (newX - rpx) + (newY - rpy) * (newY - rpy));
1113
1167
  let pl1 = Math.abs(k1 === Infinity
1114
- ? newY - refPoint.y
1168
+ ? newY - refPoint.y / matrixInfo.scale
1115
1169
  : hyLen * Math.cos(angle * ONE_ANG));
1116
1170
  let pl2 = Math.sqrt(hyLen * hyLen - pl1 * pl1);
1117
1171
  let w = originW;
@@ -1119,6 +1173,18 @@
1119
1173
  let y = originY;
1120
1174
  let x = originX;
1121
1175
  let angl = 0;
1176
+ switch (dir) {
1177
+ case "w":
1178
+ case "sw":
1179
+ angl =
1180
+ Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
1181
+ break;
1182
+ case "n":
1183
+ case "ne":
1184
+ case "nw":
1185
+ angl =
1186
+ Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
1187
+ }
1122
1188
  switch (dir) {
1123
1189
  case "s":
1124
1190
  h = pl2;
@@ -1126,17 +1192,63 @@
1126
1192
  case "e":
1127
1193
  w = pl1;
1128
1194
  break;
1195
+ case "n":
1196
+ h = pl2;
1197
+ if (angl === 90) {
1198
+ h = newY - currentVertex[2].y;
1199
+ }
1200
+ break;
1201
+ case "w":
1202
+ w = pl1;
1203
+ if (angl === 0) {
1204
+ w = newX - currentVertex[1].x;
1205
+ }
1206
+ break;
1207
+ case "nw":
1208
+ w = pl1;
1209
+ h = pl2;
1210
+ if (matrixInfo.angle === 180) {
1211
+ w = newX - currentVertex[3].x;
1212
+ h = newY - currentVertex[3].y;
1213
+ }
1214
+ break;
1129
1215
  case "se":
1216
+ case "sw":
1217
+ case "ne":
1130
1218
  w = pl1;
1131
1219
  h = pl2;
1132
1220
  break;
1221
+ }
1222
+ if (minHeight && h < minHeight)
1223
+ h = minHeight;
1224
+ if (maxHeight && h > maxHeight)
1225
+ h = maxHeight;
1226
+ if (minWidth && w < minWidth) {
1227
+ w = minWidth;
1228
+ }
1229
+ if (maxWidth && w > maxWidth)
1230
+ w = maxWidth;
1231
+ let hLine, wLine;
1232
+ switch (dir) {
1233
+ case "s":
1234
+ hLine = { p1: currentVertex[1], p2: currentVertex[0] };
1235
+ h = limitWH(newX, newY, hLine, h, minHeight);
1236
+ break;
1237
+ case "e":
1238
+ wLine = { p1: currentVertex[0], p2: currentVertex[2] };
1239
+ w = limitWH(newX, newY, wLine, w, minWidth);
1240
+ break;
1241
+ case "se":
1242
+ wLine = { p1: currentVertex[0], p2: currentVertex[2] };
1243
+ hLine = { p1: currentVertex[1], p2: currentVertex[0] };
1244
+ w = limitWH(newX, newY, wLine, w, minWidth);
1245
+ h = limitWH(newX, newY, hLine, h, minHeight);
1246
+ break;
1133
1247
  case "n":
1134
- h = pl2;
1135
- angl =
1136
- Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
1248
+ hLine = { p1: currentVertex[2], p2: currentVertex[3] };
1249
+ h = limitWH(newX, newY, hLine, h, minHeight);
1137
1250
  let plh;
1138
1251
  if (angl === 90) {
1139
- h = newY - currentVertex[2].y;
1140
1252
  x = currentVertex[2].x;
1141
1253
  y = newY;
1142
1254
  }
@@ -1152,12 +1264,10 @@
1152
1264
  }
1153
1265
  break;
1154
1266
  case "w":
1155
- w = pl1;
1156
- angl =
1157
- Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
1267
+ wLine = { p1: currentVertex[3], p2: currentVertex[1] };
1268
+ w = limitWH(newX, newY, wLine, w, minWidth);
1158
1269
  let plw;
1159
1270
  if (angl === 0) {
1160
- w = newX - currentVertex[1].x;
1161
1271
  x = newX;
1162
1272
  y = currentVertex[1].y;
1163
1273
  }
@@ -1173,20 +1283,59 @@
1173
1283
  }
1174
1284
  break;
1175
1285
  case "nw":
1176
- w = pl1;
1177
- h = pl2;
1286
+ wLine = { p1: currentVertex[3], p2: currentVertex[1] };
1287
+ hLine = { p1: currentVertex[2], p2: currentVertex[3] };
1288
+ w = limitWH(newX, newY, wLine, w, minWidth);
1289
+ h = limitWH(newX, newY, hLine, h, minHeight);
1178
1290
  x = newX;
1179
1291
  y = newY;
1180
- if (matrixInfo.angle === 180) {
1181
- w = newX - currentVertex[3].x;
1182
- h = newY - currentVertex[3].y;
1292
+ let cv2x = currentVertex[2].x;
1293
+ let cv2y = currentVertex[2].y;
1294
+ let cv1x = currentVertex[1].x;
1295
+ let cv1y = currentVertex[1].y;
1296
+ let v32n = normalizeVector(cv2x - currentVertex[3].x, cv2y - currentVertex[3].y);
1297
+ v32n.x *= minWidth;
1298
+ v32n.y *= minWidth;
1299
+ let v10n = normalizeVector(currentVertex[0].x - cv1x, currentVertex[0].y - cv1y);
1300
+ v10n.x *= minWidth;
1301
+ v10n.y *= minWidth;
1302
+ let wp1 = { x: wLine.p1.x + v32n.x, y: wLine.p1.y + v32n.y };
1303
+ let wp2 = { x: wLine.p2.x + v10n.x, y: wLine.p2.y + v10n.y };
1304
+ let invalid = (wp2.x - wp1.x) * (newY - wp1.y) -
1305
+ (wp2.y - wp1.y) * (newX - wp1.x) >
1306
+ 0;
1307
+ if (invalid) {
1308
+ let v20n = normalizeVector(currentVertex[0].x - cv2x, currentVertex[0].y - cv2y);
1309
+ v20n.x *= h;
1310
+ v20n.y *= h;
1311
+ x = wp1.x + v20n.x;
1312
+ y = wp1.y + v20n.y;
1313
+ }
1314
+ let v31n = normalizeVector(cv1x - currentVertex[3].x, cv1y - currentVertex[3].y);
1315
+ v31n.x *= minHeight;
1316
+ v31n.y *= minHeight;
1317
+ let v20n = normalizeVector(currentVertex[0].x - cv2x, currentVertex[0].y - cv2y);
1318
+ v20n.x *= minHeight;
1319
+ v20n.y *= minHeight;
1320
+ let hp1 = { x: hLine.p1.x + v31n.x, y: hLine.p1.y + v31n.y };
1321
+ let hp2 = { x: hLine.p2.x + v20n.x, y: hLine.p2.y + v20n.y };
1322
+ invalid =
1323
+ (hp2.x - hp1.x) * (newY - hp1.y) -
1324
+ (hp2.y - hp1.y) * (newX - hp1.x) >
1325
+ 0;
1326
+ if (invalid) {
1327
+ let v10n = normalizeVector(currentVertex[0].x - cv1x, currentVertex[0].y - cv1y);
1328
+ v10n.x *= w;
1329
+ v10n.y *= w;
1330
+ x = hp2.x + v10n.x;
1331
+ y = hp2.y + v10n.y;
1183
1332
  }
1184
1333
  break;
1185
1334
  case "sw":
1186
- w = pl1;
1187
- h = pl2;
1188
- angl =
1189
- Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
1335
+ wLine = { p1: currentVertex[3], p2: currentVertex[1] };
1336
+ hLine = { p1: currentVertex[1], p2: currentVertex[0] };
1337
+ w = limitWH(newX, newY, wLine, w, minWidth);
1338
+ h = limitWH(newX, newY, hLine, h, minHeight);
1190
1339
  let plw1;
1191
1340
  if (angl === 0) {
1192
1341
  x = newX;
@@ -1204,10 +1353,10 @@
1204
1353
  }
1205
1354
  break;
1206
1355
  case "ne":
1207
- w = pl1;
1208
- h = pl2;
1209
- angl =
1210
- Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
1356
+ wLine = { p1: currentVertex[0], p2: currentVertex[2] };
1357
+ hLine = { p1: currentVertex[2], p2: currentVertex[3] };
1358
+ w = limitWH(newX, newY, wLine, w, minWidth);
1359
+ h = limitWH(newX, newY, hLine, h, minHeight);
1211
1360
  let plne;
1212
1361
  if (angl === 0) {
1213
1362
  x = newX;
@@ -1225,18 +1374,6 @@
1225
1374
  }
1226
1375
  break;
1227
1376
  }
1228
- if (changeW) {
1229
- if (minWidth && w < minWidth)
1230
- w = minWidth;
1231
- if (maxWidth && w > maxWidth)
1232
- w = maxWidth;
1233
- }
1234
- if (changeH) {
1235
- if (minHeight && h < minHeight)
1236
- h = minHeight;
1237
- if (maxHeight && h > maxHeight)
1238
- h = maxHeight;
1239
- }
1240
1377
  if (aspectRatio) {
1241
1378
  if (changeW) {
1242
1379
  style.width = w + "px";
@@ -1261,19 +1398,22 @@
1261
1398
  }
1262
1399
  }
1263
1400
  if (changeY) {
1264
- transform.moveToY(y + sY);
1401
+ transform.moveTo(x, y + sY);
1265
1402
  }
1266
1403
  if (changeX) {
1267
- transform.moveToX(x + sX);
1404
+ transform.moveTo(x + sX, y);
1268
1405
  }
1269
1406
  lastX = x;
1270
1407
  lastY = y;
1271
1408
  currentW = w;
1272
1409
  currentH = h;
1273
1410
  if (onResize && onResize.call) {
1274
- const { x, y, sx, sy } = panel instanceof SVGGraphicsElement
1275
- ? getCenterXySVG(panel, startOx, startOy)
1276
- : getCenterXy(panel);
1411
+ onResize.call;
1412
+ const panelRect = getRectInContainer(panel, panel.parentElement, matrixInfo);
1413
+ let centerX = Math.round(panelRect.x + panelRect.w / 2);
1414
+ let centerY = Math.round(panelRect.y + panelRect.h / 2);
1415
+ let sx = Math.round(centerX - originW / 2);
1416
+ let sy = Math.round(centerY - originH / 2);
1277
1417
  onResize.call(uiik, {
1278
1418
  w,
1279
1419
  h,
@@ -1285,7 +1425,7 @@
1285
1425
  sx: sx,
1286
1426
  sy: sy,
1287
1427
  deg: matrixInfo.angle,
1288
- transform
1428
+ transform,
1289
1429
  }, ev);
1290
1430
  }
1291
1431
  });
@@ -1300,37 +1440,31 @@
1300
1440
  moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
1301
1441
  resize(transform, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
1302
1442
  }
1303
- panel.style.transformOrigin = originalTransformOrigin;
1304
- const { x, y, sx, sy, ox, oy } = panel instanceof SVGGraphicsElement
1305
- ? getCenterXySVG(panel, startOx, startOy)
1306
- : getCenterXy(panel);
1307
- let centerX = x, centerY = y;
1443
+ if (setOrigin)
1444
+ panel.style.transformOrigin = originalTransformOrigin;
1445
+ let { x: centerX, y: centerY } = getRectCenter(panel, matrixInfo);
1446
+ let sx = Math.round(centerX - currentW / 2);
1447
+ let sy = Math.round(centerY - currentH / 2);
1308
1448
  const deg = matrixInfo.angle * ONE_ANG;
1309
1449
  const currentVertex = calcVertex(currentW, currentH, centerX, centerY, sx, sy, deg);
1310
- if (panel instanceof SVGGraphicsElement) {
1311
- if (matrixInfo.angle != 0) {
1312
- const oxy = parseOxy(opts.ox, opts.oy, currentW, currentH);
1313
- rotateTo(transform.el, matrixInfo.angle, oxy.originX, originY);
1314
- let { x, y, sx, sy } = getCenterXySVG(panel, oxy.originX, originY);
1315
- let currentVertex2 = calcVertex(currentW, currentH, x, y, sx, sy, deg);
1316
- transform.moveTo(transform.x - (currentVertex2[0].x - currentVertex[0].x), transform.y - (currentVertex2[0].y - currentVertex[0].y));
1317
- }
1318
- }
1319
- else {
1320
- if (changeX || changeY) {
1321
- transform.moveTo(transform.x - (currentVertex[0].x - lastX), transform.y - (currentVertex[0].y - lastY));
1322
- }
1323
- else {
1324
- transform.moveTo(transform.x -
1325
- (currentVertex[0].x - vertexBeforeTransform[0].x), transform.y -
1326
- (currentVertex[0].y - vertexBeforeTransform[0].y));
1450
+ if (setOrigin) {
1451
+ if (panel instanceof HTMLElement) {
1452
+ if (changeX || changeY) {
1453
+ transform.moveTo(transform.x - (currentVertex[0].x - lastX), transform.y - (currentVertex[0].y - lastY));
1454
+ }
1455
+ else {
1456
+ transform.moveTo(transform.x -
1457
+ (currentVertex[0].x - vertexBeforeTransform[0].x), transform.y -
1458
+ (currentVertex[0].y - vertexBeforeTransform[0].y));
1459
+ }
1327
1460
  }
1328
1461
  }
1329
1462
  handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
1330
- onEnd && onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
1463
+ onEnd &&
1464
+ onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
1331
1465
  });
1332
1466
  }, {
1333
- threshold: THRESHOLD$3,
1467
+ threshold: THRESHOLD,
1334
1468
  lockPage: true,
1335
1469
  });
1336
1470
  }
@@ -1364,6 +1498,15 @@
1364
1498
  });
1365
1499
  }
1366
1500
  }
1501
+ function limitWH(newX, newY, line, value, minValue) {
1502
+ let p1 = line.p1;
1503
+ let p2 = line.p2;
1504
+ let invalid = (p2.x - p1.x) * (newY - p1.y) - (p2.y - p1.y) * (newX - p1.x) > 0;
1505
+ if (invalid) {
1506
+ return minValue;
1507
+ }
1508
+ return value;
1509
+ }
1367
1510
  function resize(transform, style, w, h) {
1368
1511
  if (transform.el instanceof SVGGraphicsElement) {
1369
1512
  if (is.isDefined(w))
@@ -1393,14 +1536,15 @@
1393
1536
  super(els, object.assign({
1394
1537
  containment: false,
1395
1538
  watch: true,
1396
- threshold: 0,
1539
+ threshold: THRESHOLD,
1397
1540
  ghost: false,
1398
1541
  direction: "",
1399
1542
  scroll: true,
1543
+ useTransform: true,
1400
1544
  snapOptions: {
1401
1545
  tolerance: 10,
1402
1546
  },
1403
- self: false
1547
+ self: false,
1404
1548
  }, opts));
1405
1549
  _Draggable_instances.add(this);
1406
1550
  _Draggable_handleMap.set(this, new WeakMap());
@@ -1455,7 +1599,7 @@
1455
1599
  let draggableList = this.ele;
1456
1600
  const eleString = this.eleString;
1457
1601
  const initStyle = __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).bind(this);
1458
- this.addPointerDown(bindTarget, ({ ev, currentTarget, currentStyle, currentCStyle, pointX, pointY, onPointerStart, onPointerMove, onPointerEnd }) => {
1602
+ this.addPointerDown(bindTarget, ({ ev, currentCStyle, onPointerStart, onPointerMove, onPointerEnd, }) => {
1459
1603
  var _a;
1460
1604
  let t = ev.target;
1461
1605
  if (!t)
@@ -1464,7 +1608,7 @@
1464
1608
  draggableList = bindTarget.querySelectorAll(eleString);
1465
1609
  initStyle(draggableList);
1466
1610
  }
1467
- let findRs = tree.closest(t, node => collection.includes(draggableList, node), 'parentNode');
1611
+ let findRs = tree.closest(t, (node) => collection.includes(draggableList, node), "parentNode");
1468
1612
  if (!findRs)
1469
1613
  return true;
1470
1614
  const dragDom = findRs;
@@ -1475,28 +1619,23 @@
1475
1619
  if (opts.self && dragDom !== t)
1476
1620
  return true;
1477
1621
  const onPointerDown = opts.onPointerDown;
1478
- if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
1622
+ if (onPointerDown &&
1623
+ onPointerDown({ draggable: dragDom }, ev) === false)
1479
1624
  return true;
1480
1625
  const filter = opts.filter;
1481
1626
  if (filter) {
1482
- if (collection.some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
1627
+ if (collection.some(dragDom.querySelectorAll(filter), (ele) => ele.contains(t)))
1483
1628
  return true;
1484
1629
  }
1485
- const offsetParent = dragDom instanceof HTMLElement ? dragDom.offsetParent || document.body : dragDom.ownerSVGElement;
1486
- const offsetParentRect = offsetParent.getBoundingClientRect();
1487
- const offsetParentCStyle = window.getComputedStyle(offsetParent);
1488
- const offsetXy = getPointInContainer(ev, dragDom);
1489
- let offsetPointX = offsetXy.x;
1490
- let offsetPointY = offsetXy.y;
1491
- const matrixInfo = getMatrixInfo(dragDom, true);
1492
- const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
1493
- if (matrixInfo.angle != 0) {
1494
- offsetPointX = currentXy.x - matrixInfo.x;
1495
- offsetPointY = currentXy.y - matrixInfo.y;
1496
- }
1630
+ let offsetParent;
1631
+ let offsetParentRect;
1632
+ let offsetParentCStyle;
1633
+ let offsetPointX = 0;
1634
+ let offsetPointY = 0;
1497
1635
  const inContainer = !!container;
1498
1636
  const ghost = opts.ghost;
1499
1637
  const ghostClass = opts.ghostClass;
1638
+ const ghostTo = opts.ghostTo;
1500
1639
  const direction = opts.direction;
1501
1640
  const onStart = opts.onStart;
1502
1641
  const onDrag = opts.onDrag;
@@ -1504,64 +1643,25 @@
1504
1643
  const onClone = opts.onClone;
1505
1644
  const originalZIndex = currentCStyle.zIndex;
1506
1645
  let zIndex = opts.zIndex || originalZIndex;
1507
- const classes = opts.classes || '';
1646
+ const classes = opts.classes || "";
1508
1647
  const group = opts.group;
1509
- if (group) {
1510
- let i = -1;
1511
- collection.each(DRAGGER_GROUPS[group], el => {
1512
- const z = parseInt(currentCStyle.zIndex) || 0;
1513
- if (z > i)
1514
- i = z;
1515
- });
1516
- zIndex = i + 1;
1517
- }
1518
1648
  const scroll = opts.scroll;
1519
1649
  const scrollSpeed = opts.scrollSpeed || 10;
1520
1650
  let gridX, gridY;
1521
- const grid = opts.grid;
1522
- if (is.isArray(grid)) {
1523
- gridX = grid[0];
1524
- gridY = grid[1];
1525
- }
1526
- else if (is.isNumber(grid)) {
1527
- gridX = gridY = grid;
1528
- }
1529
1651
  const snapOn = opts.snap;
1530
1652
  let snappable;
1531
1653
  const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
1532
1654
  const onSnap = opts.onSnap;
1533
1655
  let lastSnapDirY = "", lastSnapDirX = "";
1534
1656
  let lastSnapping = "";
1535
- if (snapOn) {
1536
- snappable = collection.map((container || document).querySelectorAll(snapOn), (el) => {
1537
- const { x, y, w, h } = getRectInContainer(el, offsetParent);
1538
- return {
1539
- x1: x,
1540
- y1: y,
1541
- x2: x + w,
1542
- y2: y + h,
1543
- el: el,
1544
- };
1545
- });
1546
- }
1547
1657
  const dragDomRect = dragDom.getBoundingClientRect();
1548
- const originW = dragDomRect.width + parseFloat(currentCStyle.borderLeftWidth) + parseFloat(currentCStyle.borderRightWidth);
1549
- const originH = dragDomRect.height + parseFloat(currentCStyle.borderTopWidth) + parseFloat(currentCStyle.borderBottomWidth);
1658
+ let originW;
1659
+ let originH;
1550
1660
  let minX = 0;
1551
1661
  let minY = 0;
1552
1662
  let maxX = 0;
1553
1663
  let maxY = 0;
1554
- let originOffX = 0;
1555
- let originOffY = 0;
1556
- if (inContainer) {
1557
- maxX = container.scrollWidth - originW;
1558
- maxY = container.scrollHeight - originH;
1559
- }
1560
- if (maxX < 0)
1561
- maxX = 0;
1562
- if (maxY < 0)
1563
- maxY = 0;
1564
- let copyNode;
1664
+ let ghostNode;
1565
1665
  let transform;
1566
1666
  let timer = null;
1567
1667
  let toLeft = false;
@@ -1569,45 +1669,114 @@
1569
1669
  let toRight = false;
1570
1670
  let toBottom = false;
1571
1671
  let endX = 0, endY = 0;
1672
+ let startMatrixInfo;
1673
+ let startPointXy;
1572
1674
  onPointerStart(function (args) {
1573
- var _a;
1574
1675
  const { ev } = args;
1676
+ offsetParent =
1677
+ dragDom instanceof HTMLElement
1678
+ ? dragDom.offsetParent || document.body
1679
+ : dragDom.ownerSVGElement;
1680
+ offsetParentRect = offsetParent.getBoundingClientRect();
1681
+ offsetParentCStyle = window.getComputedStyle(offsetParent);
1682
+ startMatrixInfo = getMatrixInfo(dragDom, true);
1683
+ const offsetXy = getPointInContainer(ev, dragDom, undefined, undefined, startMatrixInfo);
1684
+ offsetPointX = offsetXy.x;
1685
+ offsetPointY = offsetXy.y;
1686
+ startPointXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle, startMatrixInfo);
1687
+ originW =
1688
+ dragDomRect.width;
1689
+ originH =
1690
+ dragDomRect.height;
1691
+ if (dragDom instanceof SVGGElement || dragDom instanceof SVGSVGElement) {
1692
+ let bbox = dragDom.getBBox();
1693
+ offsetPointX += bbox.x;
1694
+ offsetPointY += bbox.y;
1695
+ }
1696
+ if (startMatrixInfo.angle != 0) {
1697
+ let { sx, sy } = getCenterXy(dragDom);
1698
+ offsetPointX = startPointXy.x - sx;
1699
+ offsetPointY = startPointXy.y - sy;
1700
+ }
1701
+ if (group) {
1702
+ let i = -1;
1703
+ collection.each(DRAGGER_GROUPS[group], (el) => {
1704
+ const z = parseInt(currentCStyle.zIndex) || 0;
1705
+ if (z > i)
1706
+ i = z;
1707
+ });
1708
+ zIndex = i + 1;
1709
+ }
1710
+ const grid = opts.grid;
1711
+ if (is.isArray(grid)) {
1712
+ gridX = grid[0];
1713
+ gridY = grid[1];
1714
+ }
1715
+ else if (is.isNumber(grid)) {
1716
+ gridX = gridY = grid;
1717
+ }
1718
+ if (snapOn) {
1719
+ snappable = collection.map((container || document).querySelectorAll(snapOn), (el) => {
1720
+ const { x, y, w, h } = getRectInContainer(el, offsetParent);
1721
+ return {
1722
+ x1: x,
1723
+ y1: y,
1724
+ x2: x + w,
1725
+ y2: y + h,
1726
+ el: el,
1727
+ };
1728
+ });
1729
+ }
1730
+ if (inContainer) {
1731
+ maxX =
1732
+ container.scrollWidth - originW / startMatrixInfo.scale;
1733
+ maxY =
1734
+ container.scrollHeight - originH / startMatrixInfo.scale;
1735
+ }
1736
+ if (maxX < 0)
1737
+ maxX = 0;
1738
+ if (maxY < 0)
1739
+ maxY = 0;
1575
1740
  if (ghost) {
1576
1741
  if (is.isFunction(ghost)) {
1577
- copyNode = ghost(dragDom);
1742
+ ghostNode = ghost(dragDom);
1578
1743
  }
1579
1744
  else {
1580
- copyNode = dragDom.cloneNode(true);
1581
- copyNode.style.opacity = "0.3";
1582
- copyNode.style.pointerEvents = "none";
1583
- copyNode.style.position = "absolute";
1745
+ ghostNode = dragDom.cloneNode(true);
1746
+ ghostNode.style.opacity = "0.3";
1747
+ ghostNode.style.pointerEvents = "none";
1748
+ ghostNode.style.position = "absolute";
1584
1749
  }
1585
- copyNode.style.zIndex = zIndex + '';
1750
+ ghostNode.style.zIndex = zIndex + "";
1586
1751
  if (ghostClass) {
1587
- copyNode.classList.add(...array.compact(string.split(ghostClass, ' ')));
1752
+ ghostNode.classList.add(...array.compact(string.split(ghostClass, " ")));
1588
1753
  }
1589
- copyNode.classList.add(...array.compact(string.split(classes, ' ')));
1590
- copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
1591
- (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
1592
- transform = wrapper(copyNode);
1593
- onClone && onClone({ clone: copyNode }, ev);
1754
+ ghostNode.classList.add(...array.compact(string.split(classes, " ")));
1755
+ ghostNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
1756
+ let ghostParent = ghostTo ? (is.isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : dragDom.parentNode;
1757
+ ghostParent === null || ghostParent === void 0 ? void 0 : ghostParent.appendChild(ghostNode);
1758
+ transform = wrapper(ghostNode, opts.useTransform);
1759
+ onClone && onClone({ clone: ghostNode }, ev);
1594
1760
  }
1595
1761
  else {
1596
- transform = wrapper(dragDom);
1762
+ transform = wrapper(dragDom, opts.useTransform);
1597
1763
  }
1598
- dragDom.classList.add(...array.compact(string.split(classes, ' ')));
1599
- if (!copyNode)
1600
- dragDom.style.zIndex = zIndex + '';
1764
+ dragDom.classList.add(...array.compact(string.split(classes, " ")));
1765
+ if (!ghostNode)
1766
+ dragDom.style.zIndex = zIndex + "";
1601
1767
  dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
1602
- onStart && onStart({ draggable: dragDom, x: currentXy.x, y: currentXy.y, transform }, ev);
1603
- const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
1768
+ onStart &&
1769
+ onStart({ draggable: dragDom, x: startPointXy.x, y: startPointXy.y, transform }, ev);
1770
+ const customEv = new Event("uii-dragactive", {
1771
+ bubbles: true,
1772
+ cancelable: false,
1773
+ });
1604
1774
  dragDom.dispatchEvent(customEv);
1605
1775
  });
1606
1776
  onPointerMove((args) => {
1607
1777
  const { ev, pointX, pointY, offX, offY } = args;
1608
- const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
1609
- let newX = currentXy.x;
1610
- let newY = currentXy.y;
1778
+ let newX = startPointXy.x + offX;
1779
+ let newY = startPointXy.y + offY;
1611
1780
  if (scroll) {
1612
1781
  const lX = pointX - offsetParentRect.x;
1613
1782
  const lY = pointY - offsetParentRect.y;
@@ -1617,9 +1786,7 @@
1617
1786
  toTop = lY < EDGE_THRESHOLD;
1618
1787
  toRight = rX < EDGE_THRESHOLD;
1619
1788
  toBottom = rY < EDGE_THRESHOLD;
1620
- if (toLeft || toTop
1621
- ||
1622
- toRight || toBottom) {
1789
+ if (toLeft || toTop || toRight || toBottom) {
1623
1790
  if (!timer) {
1624
1791
  timer = setInterval(() => {
1625
1792
  if (toLeft) {
@@ -1651,17 +1818,17 @@
1651
1818
  y = ((y / gridY) >> 0) * gridY;
1652
1819
  }
1653
1820
  if (inContainer) {
1654
- if (originOffX + x < minX) {
1655
- x = -0;
1821
+ if (x < minX) {
1822
+ x = 0;
1656
1823
  }
1657
- if (originOffY + y < minY) {
1658
- y = -0;
1824
+ if (y < minY) {
1825
+ y = 0;
1659
1826
  }
1660
- if (originOffX + x > maxX) {
1661
- x = maxX - originOffX;
1827
+ if (x > maxX) {
1828
+ x = maxX;
1662
1829
  }
1663
- if (originOffY + y > maxY) {
1664
- y = maxY - originOffY;
1830
+ if (y > maxY) {
1831
+ y = maxY;
1665
1832
  }
1666
1833
  }
1667
1834
  let canDrag = true;
@@ -1734,7 +1901,7 @@
1734
1901
  if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
1735
1902
  setTimeout(() => {
1736
1903
  onSnap({
1737
- el: copyNode || dragDom,
1904
+ el: ghostNode || dragDom,
1738
1905
  targetH: targetX,
1739
1906
  targetV: targetY,
1740
1907
  dirH: snapDirX,
@@ -1756,7 +1923,7 @@
1756
1923
  oy: offY,
1757
1924
  x: x,
1758
1925
  y: y,
1759
- transform
1926
+ transform,
1760
1927
  }, ev) === false) {
1761
1928
  canDrag = false;
1762
1929
  endX = x;
@@ -1778,7 +1945,7 @@
1778
1945
  }
1779
1946
  });
1780
1947
  onPointerEnd((args) => {
1781
- var _a, _b;
1948
+ var _a;
1782
1949
  const { ev, currentStyle } = args;
1783
1950
  if (scroll) {
1784
1951
  if (timer) {
@@ -1786,25 +1953,32 @@
1786
1953
  timer = null;
1787
1954
  }
1788
1955
  }
1789
- dragDom.classList.remove(...array.compact(string.split(classes, ' ')));
1956
+ dragDom.classList.remove(...array.compact(string.split(classes, " ")));
1790
1957
  currentStyle.zIndex = originalZIndex;
1791
1958
  dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
1792
1959
  let moveToGhost = true;
1793
1960
  if (onEnd) {
1794
- moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY, transform }, ev) === false ? false : true;
1961
+ moveToGhost =
1962
+ onEnd({ draggable: dragDom, x: endX, y: endY, transform }, ev) ===
1963
+ false
1964
+ ? false
1965
+ : true;
1795
1966
  }
1796
- const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
1967
+ const customEv = new Event("uii-dragdeactive", {
1968
+ bubbles: true,
1969
+ cancelable: false,
1970
+ });
1797
1971
  dragDom.dispatchEvent(customEv);
1798
1972
  if (ghost) {
1799
- ((_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.contains(copyNode)) && ((_b = dragDom.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(copyNode));
1973
+ (_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
1800
1974
  if (moveToGhost !== false) {
1801
- wrapper(dragDom).moveTo(transform.x, transform.y);
1975
+ wrapper(dragDom, opts.useTransform).moveTo(transform.x, transform.y);
1802
1976
  }
1803
1977
  }
1804
1978
  });
1805
1979
  }, {
1806
1980
  threshold: this.opts.threshold || 0,
1807
- lockPage: true
1981
+ lockPage: true,
1808
1982
  });
1809
1983
  }
1810
1984
  onOptionChanged(opts) {
@@ -1833,10 +2007,10 @@
1833
2007
  const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
1834
2008
  ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
1835
2009
  if (!is.isUndefined(this.opts.cursor)) {
1836
- el.style.cursor = this.opts.cursor.default || 'move';
2010
+ el.style.cursor = this.opts.cursor.default || "move";
1837
2011
  if (is.isDefined(this.opts.cursor.over)) {
1838
2012
  el.dataset.cursorOver = this.opts.cursor.over;
1839
- el.dataset.cursorActive = this.opts.cursor.active || 'move';
2013
+ el.dataset.cursorActive = this.opts.cursor.active || "move";
1840
2014
  }
1841
2015
  }
1842
2016
  });
@@ -1968,7 +2142,6 @@
1968
2142
  return new Droppable(els, opts);
1969
2143
  }
1970
2144
 
1971
- const THRESHOLD$2 = 2;
1972
2145
  const CLASS_ROTATABLE = "uii-rotatable";
1973
2146
  const CLASS_ROTATABLE_HANDLE = "uii-rotatable-handle";
1974
2147
  const CLASS_ROTATABLE_ACTIVE = "uii-rotatable-active";
@@ -2020,23 +2193,20 @@
2020
2193
  let startOy = 0;
2021
2194
  let startDeg = 0;
2022
2195
  let container;
2196
+ let startPointXy;
2023
2197
  onPointerStart(function (args) {
2024
2198
  const { ev } = args;
2025
2199
  const { w, h } = getStyleSize(el);
2026
- const { originX, originY } = parseOxy(opts.ox, opts.oy, w, h);
2200
+ const { originX, originY } = parseOxy(opts.ox, opts.oy, w, h, el);
2027
2201
  startOx = originX;
2028
2202
  startOy = originY;
2029
- const { x, y, ox, oy } = el instanceof SVGGraphicsElement
2030
- ? getCenterXySVG(el, startOx, startOy)
2031
- : getCenterXy(el, startOx, startOy);
2032
- (centerX = x), (centerY = y);
2033
- (startOx = ox), (startOy = oy);
2034
- container =
2035
- el instanceof SVGGraphicsElement
2036
- ? el.ownerSVGElement : el.parentElement;
2037
- const currentXy = getPointInContainer(ev, container);
2203
+ let centerXy = getRectCenter(el);
2204
+ centerX = centerXy.x;
2205
+ centerY = centerXy.y;
2206
+ container = el.parentElement;
2207
+ startPointXy = getPointInContainer(ev, container);
2038
2208
  startDeg =
2039
- Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
2209
+ Math.atan2(startPointXy.y - centerY, startPointXy.x - centerX) * ONE_RAD +
2040
2210
  90;
2041
2211
  if (startDeg < 0)
2042
2212
  startDeg = 360 + startDeg;
@@ -2046,10 +2216,11 @@
2046
2216
  onStart && onStart({ deg, cx: centerX, cy: centerY }, ev);
2047
2217
  });
2048
2218
  onPointerMove((args) => {
2049
- const { ev } = args;
2050
- const currentXy = getPointInContainer(ev, container);
2219
+ const { ev, offX, offY } = args;
2220
+ let newX = startPointXy.x + offX;
2221
+ let newY = startPointXy.y + offY;
2051
2222
  deg =
2052
- Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
2223
+ Math.atan2(newY - centerY, newX - centerX) * ONE_RAD +
2053
2224
  90 -
2054
2225
  startDeg;
2055
2226
  onRotate &&
@@ -2069,7 +2240,7 @@
2069
2240
  onEnd && onEnd({ deg }, ev);
2070
2241
  });
2071
2242
  }, {
2072
- threshold: THRESHOLD$2,
2243
+ threshold: THRESHOLD,
2073
2244
  lockPage: true,
2074
2245
  });
2075
2246
  }
@@ -2175,7 +2346,6 @@
2175
2346
  const CLASS_SELECTOR = "uii-selector";
2176
2347
  const CLASS_SELECTING = "uii-selecting";
2177
2348
  const CLASS_SELECTED = "uii-selected";
2178
- const THRESHOLD$1 = 2;
2179
2349
  class Selectable extends Uii {
2180
2350
  constructor(container, opts) {
2181
2351
  super(container, object.assign({
@@ -2240,10 +2410,9 @@
2240
2410
  if (onPointerDown && onPointerDown(ev) === false)
2241
2411
  return true;
2242
2412
  let originPos = "";
2243
- let matrixInfo = getMatrixInfo(currentTarget);
2244
- const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
2245
- let hitPosX = startxy.x;
2246
- let hitPosY = startxy.y;
2413
+ let startPointXy = getPointInContainer(ev, con, currentRect, currentCStyle);
2414
+ let hitPosX = startPointXy.x;
2415
+ let hitPosY = startPointXy.y;
2247
2416
  const style = selector.style;
2248
2417
  let selection = [];
2249
2418
  let lastSelection = [];
@@ -2267,13 +2436,9 @@
2267
2436
  style.display = 'block';
2268
2437
  onStart && onStart({ selection: __classPrivateFieldGet(that, _Selectable__lastSelected, "f"), selectable: con }, ev);
2269
2438
  });
2270
- onPointerMove((args) => {
2271
- const { ev } = args;
2272
- const currentXy = getPointInContainer(ev, currentTarget, currentRect, currentCStyle, matrixInfo);
2273
- let pointX = currentXy.x;
2274
- let pointY = currentXy.y;
2275
- let offX = pointX - hitPosX;
2276
- let offY = pointY - hitPosY;
2439
+ onPointerMove(({ ev, offX, offY }) => {
2440
+ let pointX = startPointXy.x + offX;
2441
+ let pointY = startPointXy.y + offY;
2277
2442
  if (scroll) {
2278
2443
  const ltX = ev.clientX - currentRect.x;
2279
2444
  const ltY = ev.clientY - currentRect.y;
@@ -2378,7 +2543,7 @@
2378
2543
  onEnd({ selection, selectable: con }, ev);
2379
2544
  });
2380
2545
  }, {
2381
- threshold: THRESHOLD$1,
2546
+ threshold: THRESHOLD,
2382
2547
  lockPage: true
2383
2548
  });
2384
2549
  };
@@ -2392,7 +2557,6 @@
2392
2557
  const CLASS_SORTABLE_GHOST = "uii-sortable-ghost";
2393
2558
  const CLASS_SORTABLE_ACTIVE = "uii-sortable-active";
2394
2559
  const ATTR_SORTABLE_ACTIVE = "uii-sortable-active";
2395
- const THRESHOLD = 2;
2396
2560
  class Sortable extends Uii {
2397
2561
  constructor(container, opts) {
2398
2562
  super(container, object.merge({
@@ -2768,7 +2932,7 @@
2768
2932
  return new Sortable(container, opts);
2769
2933
  }
2770
2934
 
2771
- var version = "1.3.0-beta.4";
2935
+ var version = "1.3.2";
2772
2936
  var repository = {
2773
2937
  type: "git",
2774
2938
  url: "https://github.com/holyhigh2/uiik"
@@ -2813,6 +2977,7 @@
2813
2977
  exports.Selectable = Selectable;
2814
2978
  exports.Sortable = Sortable;
2815
2979
  exports.Splittable = Splittable;
2980
+ exports.THRESHOLD = THRESHOLD;
2816
2981
  exports.Uii = Uii;
2817
2982
  exports.UiiTransform = UiiTransform;
2818
2983
  exports.VERSION = VERSION;
@@ -2824,6 +2989,7 @@
2824
2989
  exports.getMatrixInfo = getMatrixInfo;
2825
2990
  exports.getPointInContainer = getPointInContainer;
2826
2991
  exports.getPointOffset = getPointOffset;
2992
+ exports.getRectCenter = getRectCenter;
2827
2993
  exports.getRectInContainer = getRectInContainer;
2828
2994
  exports.getStyleSize = getStyleSize;
2829
2995
  exports.getStyleXy = getStyleXy;
@@ -2841,11 +3007,13 @@
2841
3007
  exports.newSelectable = newSelectable;
2842
3008
  exports.newSortable = newSortable;
2843
3009
  exports.newSplittable = newSplittable;
3010
+ exports.normalizeVector = normalizeVector;
2844
3011
  exports.parseOxy = parseOxy;
2845
3012
  exports.restoreCursor = restoreCursor;
2846
3013
  exports.rotateTo = rotateTo;
2847
3014
  exports.saveCursor = saveCursor;
2848
3015
  exports.setCursor = setCursor;
3016
+ exports.transformMoveTo = transformMoveTo;
2849
3017
  exports.unlockPage = unlockPage;
2850
3018
  exports.wrapper = wrapper;
2851
3019