@leafer-in/editor 2.1.9 → 2.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/editor.cjs CHANGED
@@ -491,17 +491,16 @@ const {topLeft: topLeft, top: top, topRight: topRight, right: right$1, bottomRig
491
491
  const {toPoint: toPoint} = draw.AroundHelper, {within: within, sign: sign} = draw.MathHelper, {abs: abs} = Math;
492
492
 
493
493
  const EditDataHelper = {
494
- getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode, boundsType) {
494
+ getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
495
495
  let align, origin = {}, scaleX = 1, scaleY = 1, lockScale;
496
496
  const {widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldTransform: worldTransform, boxBounds: boxBounds} = target;
497
497
  const {width: width, height: height} = startBounds, worldScaleX = abs(worldTransform.scaleX), worldScaleY = abs(worldTransform.scaleY);
498
- const innerBounds = target.getBounds(boundsType, "inner");
499
498
  const originChangedScaleX = target.scaleX / startBounds.scaleX;
500
499
  const originChangedScaleY = target.scaleY / startBounds.scaleY;
501
500
  const signX = sign(originChangedScaleX);
502
501
  const signY = sign(originChangedScaleY);
503
- const changedScaleX = scaleMode ? originChangedScaleX : signX * innerBounds.width / width;
504
- const changedScaleY = scaleMode ? originChangedScaleY : signY * innerBounds.height / height;
502
+ const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
503
+ const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
505
504
  if (draw.isNumber(totalMoveOrScale)) {
506
505
  scaleX = scaleY = Math.sqrt(totalMoveOrScale);
507
506
  } else {
@@ -586,11 +585,10 @@ const EditDataHelper = {
586
585
  if (useScaleX) scaleX /= changedScaleX;
587
586
  if (useScaleY) scaleY /= changedScaleY;
588
587
  if (!flipable) {
589
- if (scaleX < 0) scaleX = 1 / innerBounds.width / worldScaleX;
590
- if (scaleY < 0) scaleY = 1 / innerBounds.height / worldScaleY;
588
+ if (scaleX < 0) scaleX = 1 / boxBounds.width / worldScaleX;
589
+ if (scaleY < 0) scaleY = 1 / boxBounds.height / worldScaleY;
591
590
  }
592
- toPoint(around || align, innerBounds, origin, true);
593
- this.checkOrigin(target, origin, boundsType);
591
+ toPoint(around || align, boxBounds, origin, true);
594
592
  if (dragBounds) {
595
593
  const scaleData = {
596
594
  x: scaleX,
@@ -601,19 +599,15 @@ const EditDataHelper = {
601
599
  scaleY = scaleData.y;
602
600
  }
603
601
  if (useScaleX && widthRange) {
604
- const nowWidth = innerBounds.width * target.scaleX;
602
+ const nowWidth = boxBounds.width * target.scaleX;
605
603
  scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
606
604
  }
607
605
  if (useScaleY && heightRange) {
608
- const nowHeight = innerBounds.height * target.scaleY;
606
+ const nowHeight = boxBounds.height * target.scaleY;
609
607
  scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
610
608
  }
611
- let minWidth = 1, minHeight = 1;
612
- if (boundsType !== "box") {
613
- minWidth += (innerBounds.width - boxBounds.width) * worldScaleX;
614
- minHeight += (innerBounds.height - boxBounds.height) * worldScaleY;
615
- }
616
- const worldWidth = worldScaleX * innerBounds.width, worldHeight = worldScaleY * innerBounds.height;
609
+ const minWidth = 1, minHeight = 1;
610
+ const worldWidth = worldScaleX * boxBounds.width, worldHeight = worldScaleY * boxBounds.height;
617
611
  if (useScaleX && abs(scaleX * worldWidth) < minWidth) scaleX = sign(scaleX) * minWidth / worldWidth;
618
612
  if (useScaleY && abs(scaleY * worldHeight) < minHeight) scaleY = sign(scaleY) * minHeight / worldHeight;
619
613
  if (lockRatio && scaleX !== scaleY) {
@@ -632,7 +626,7 @@ const EditDataHelper = {
632
626
  around: around
633
627
  };
634
628
  },
635
- getRotateData(target, direction, current, last, around, boundsType) {
629
+ getRotateData(target, direction, current, last, around) {
636
630
  let align, origin = {};
637
631
  switch (direction) {
638
632
  case topLeft:
@@ -654,14 +648,13 @@ const EditDataHelper = {
654
648
  default:
655
649
  align = "center";
656
650
  }
657
- toPoint(around || align, target.getBounds(boundsType, "inner"), origin, true);
658
- this.checkOrigin(target, origin, boundsType);
651
+ toPoint(around || align, target.boxBounds, origin, true);
659
652
  return {
660
653
  origin: origin,
661
654
  rotation: draw.PointHelper.getRotation(last, target.getWorldPointByBox(origin), current)
662
655
  };
663
656
  },
664
- getSkewData(target, direction, move, around, boundsType) {
657
+ getSkewData(target, direction, move, around) {
665
658
  let align, origin = {}, skewX = 0, skewY = 0;
666
659
  let last;
667
660
  switch (direction) {
@@ -704,12 +697,10 @@ const EditDataHelper = {
704
697
  align = "left";
705
698
  skewY = 1;
706
699
  }
707
- const innerBounds = target.getBounds(boundsType, "inner");
708
- const {width: width, height: height} = innerBounds;
700
+ const {boxBounds: boxBounds} = target, {width: width, height: height} = boxBounds;
709
701
  last.x = last.x * width;
710
702
  last.y = last.y * height;
711
- toPoint(around || align, innerBounds, origin, true);
712
- this.checkOrigin(target, origin, boundsType);
703
+ toPoint(around || align, boxBounds, origin, true);
713
704
  const rotation = draw.PointHelper.getRotation(last, origin, {
714
705
  x: last.x + (skewX ? move.x : 0),
715
706
  y: last.y + (skewY ? move.y : 0)
@@ -721,13 +712,6 @@ const EditDataHelper = {
721
712
  skewY: skewY
722
713
  };
723
714
  },
724
- checkOrigin(target, origin, boundsType) {
725
- if (boundsType !== "box") {
726
- const {boxBounds: boxBounds} = target, innerBounds = target.getBounds(boundsType, "inner");
727
- origin.x += innerBounds.x - boxBounds.x;
728
- origin.y += innerBounds.y - boxBounds.y;
729
- }
730
- },
731
715
  getAround(around, altKey) {
732
716
  return altKey && !around ? "center" : around;
733
717
  },
@@ -1022,9 +1006,14 @@ class EditBox extends draw.Group {
1022
1006
  if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
1023
1007
  }
1024
1008
  updateBounds(bounds) {
1025
- const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
1009
+ const {editor: editor, target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
1026
1010
  const {editMask: editMask} = editor;
1027
1011
  const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, editBoxType: editBoxType, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
1012
+ if (editBoxType === "stroke") {
1013
+ const {scaleX: scaleX, scaleY: scaleY} = target.worldTransform, {strokeBoxSpread: strokeBoxSpread} = target.__layout;
1014
+ strokeBoxSpread && draw.BoundsHelper.spread(bounds, [ strokeBoxSpread * Math.abs(scaleY), strokeBoxSpread * Math.abs(scaleX) ]);
1015
+ }
1016
+ if (spread) draw.BoundsHelper.spread(bounds, spread);
1028
1017
  editMask.visible = mask ? true : 0;
1029
1018
  if (!draw.isUndefined(dimOthers) || !draw.isUndefined(bright)) {
1030
1019
  editor.setDimOthers(dimOthers);
@@ -1033,8 +1022,6 @@ class EditBox extends draw.Group {
1033
1022
  } else if (editor.hasDimOthers) {
1034
1023
  editor.cancelDimOthers();
1035
1024
  }
1036
- if (editBoxType === "stroke") draw.BoundsHelper.spread(bounds, editor.element.__layout.strokeBoxSpread);
1037
- if (spread) draw.BoundsHelper.spread(bounds, spread);
1038
1025
  if (this.view.worldOpacity) {
1039
1026
  const {width: width, height: height} = bounds;
1040
1027
  const smallSize = draw.isNumber(hideOnSmall) ? hideOnSmall : 10;
@@ -1171,7 +1158,7 @@ class EditBox extends draw.Group {
1171
1158
  this.dragPoint = null;
1172
1159
  }
1173
1160
  onTransformStart(e) {
1174
- const {hideOnMove: hideOnMove, editBoxType: editBoxType} = this.mergedConfig;
1161
+ const {hideOnMove: hideOnMove} = this.mergedConfig;
1175
1162
  if (this.moving || this.gesturing) this.editor.opacity = hideOnMove ? 0 : 1;
1176
1163
  if (this.resizing) draw.ResizeEvent.resizingKeys = this.editor.leafList.keys;
1177
1164
  const {dragStartData: dragStartData, target: target} = this;
@@ -1182,7 +1169,7 @@ class EditBox extends draw.Group {
1182
1169
  x: target.x,
1183
1170
  y: target.y
1184
1171
  };
1185
- dragStartData.bounds = Object.assign({}, target.getLayoutBounds(editBoxType, "local"));
1172
+ dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
1186
1173
  dragStartData.rotation = target.rotation;
1187
1174
  }
1188
1175
  onTransformEnd(e) {
@@ -1555,6 +1542,9 @@ function registerEditTool() {
1555
1542
  const registerInnerEditor = registerEditTool;
1556
1543
 
1557
1544
  const EditToolCreator = {
1545
+ EditTool: "EditTool",
1546
+ LineEditTool: "LineEditTool",
1547
+ PointsEditTool: "PointsEditTool",
1558
1548
  list: {},
1559
1549
  register(EditTool, name) {
1560
1550
  const {tag: tag} = EditTool.prototype;
@@ -1746,7 +1736,7 @@ class TransformTool {
1746
1736
  }
1747
1737
  onScale(e) {
1748
1738
  const {target: target, mergeConfig: mergeConfig, single: single, dragStartData: dragStartData} = this.editBox;
1749
- let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize, editBoxType: editBoxType} = mergeConfig, totalMove;
1739
+ let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig, totalMove;
1750
1740
  if (e instanceof core.ZoomEvent) {
1751
1741
  if (!around) around = target.getBoxPoint(e);
1752
1742
  totalMove = e.totalScale;
@@ -1755,7 +1745,7 @@ class TransformTool {
1755
1745
  }
1756
1746
  const {direction: direction} = e.current;
1757
1747
  if (e.shiftKey || target.lockRatio) lockRatio = true;
1758
- const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, totalMove, lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale", editBoxType);
1748
+ const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, totalMove, lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale");
1759
1749
  const targetX = target.x, targetY = target.y;
1760
1750
  if (e instanceof core.DragEvent && this.editTool && this.editTool.onScaleWithDrag) {
1761
1751
  data.drag = e;
@@ -1767,7 +1757,7 @@ class TransformTool {
1767
1757
  }
1768
1758
  onRotate(e) {
1769
1759
  const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData} = this.editBox;
1770
- const {around: around, rotateAround: rotateAround, rotateGap: rotateGap, diagonalRotateKey: diagonalRotateKey, editBoxType: editBoxType} = mergeConfig;
1760
+ const {around: around, rotateAround: rotateAround, rotateGap: rotateGap, diagonalRotateKey: diagonalRotateKey} = mergeConfig;
1771
1761
  const {direction: direction} = e.current;
1772
1762
  let origin, rotation;
1773
1763
  if (e instanceof core.RotateEvent) {
@@ -1775,7 +1765,7 @@ class TransformTool {
1775
1765
  origin = rotateAround ? draw.AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
1776
1766
  } else {
1777
1767
  const isDiagonalRotate = diagonalRotateKey ? e.isHoldKeys(diagonalRotateKey) : e.shiftKey;
1778
- const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, isDiagonalRotate ? null : rotateAround || target.around || target.origin || around || "center", editBoxType);
1768
+ const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, isDiagonalRotate ? null : rotateAround || target.around || target.origin || around || "center");
1779
1769
  rotation = dragStartData.rotation + data.rotation - target.rotation;
1780
1770
  origin = data.origin;
1781
1771
  }
@@ -1787,8 +1777,8 @@ class TransformTool {
1787
1777
  }
1788
1778
  onSkew(e) {
1789
1779
  const {target: target, mergeConfig: mergeConfig} = this.editBox;
1790
- const {around: around, editBoxType: editBoxType} = mergeConfig;
1791
- const {origin: origin, skewX: skewX, skewY: skewY} = EditDataHelper.getSkewData(target, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey), editBoxType);
1780
+ const {around: around} = mergeConfig;
1781
+ const {origin: origin, skewX: skewX, skewY: skewY} = EditDataHelper.getSkewData(target, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
1792
1782
  if (!skewX && !skewY) return;
1793
1783
  this.skewOf(origin, skewX, skewY);
1794
1784
  }
@@ -1849,7 +1839,7 @@ class TransformTool {
1849
1839
  scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
1850
1840
  if (!this.checkTransform("resizeable")) return;
1851
1841
  const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
1852
- const {beforeScale: beforeScale, editBoxType: editBoxType} = mergeConfig;
1842
+ const {beforeScale: beforeScale} = mergeConfig;
1853
1843
  if (beforeScale) {
1854
1844
  const check = beforeScale({
1855
1845
  target: target,
@@ -1867,8 +1857,7 @@ class TransformTool {
1867
1857
  worldOrigin: worldOrigin,
1868
1858
  scaleX: scaleX,
1869
1859
  scaleY: scaleY,
1870
- transform: transform,
1871
- editBoxType: editBoxType
1860
+ transform: transform
1872
1861
  };
1873
1862
  this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
1874
1863
  const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
@@ -1896,7 +1885,7 @@ class TransformTool {
1896
1885
  rotateOf(origin, rotation) {
1897
1886
  if (!this.checkTransform("rotateable")) return;
1898
1887
  const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
1899
- const {beforeRotate: beforeRotate, editBoxType: editBoxType} = mergeConfig;
1888
+ const {beforeRotate: beforeRotate} = mergeConfig;
1900
1889
  if (beforeRotate) {
1901
1890
  const check = beforeRotate({
1902
1891
  target: target,
@@ -1912,8 +1901,7 @@ class TransformTool {
1912
1901
  editor: editor,
1913
1902
  worldOrigin: worldOrigin,
1914
1903
  rotation: rotation,
1915
- transform: transform,
1916
- editBoxType: editBoxType
1904
+ transform: transform
1917
1905
  };
1918
1906
  this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
1919
1907
  const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
@@ -1923,7 +1911,7 @@ class TransformTool {
1923
1911
  skewOf(origin, skewX, skewY = 0, _resize) {
1924
1912
  if (!this.checkTransform("skewable")) return;
1925
1913
  const {target: target, mergeConfig: mergeConfig, single: single, editor: editor} = this.editBox;
1926
- const {beforeSkew: beforeSkew, editBoxType: editBoxType} = mergeConfig;
1914
+ const {beforeSkew: beforeSkew} = mergeConfig;
1927
1915
  if (beforeSkew) {
1928
1916
  const check = beforeSkew({
1929
1917
  target: target,
@@ -1941,8 +1929,7 @@ class TransformTool {
1941
1929
  worldOrigin: worldOrigin,
1942
1930
  skewX: skewX,
1943
1931
  skewY: skewY,
1944
- transform: transform,
1945
- editBoxType: editBoxType
1932
+ transform: transform
1946
1933
  };
1947
1934
  this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
1948
1935
  const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
@@ -2123,11 +2110,9 @@ exports.Editor = class Editor extends draw.Group {
2123
2110
  unloadEditTool(onlyTool) {
2124
2111
  let tool = this.editTool;
2125
2112
  if (tool) {
2126
- if (!onlyTool) {
2127
- this.editBox.unload();
2128
- this.editTool = null;
2129
- }
2113
+ if (!onlyTool) this.editBox.unload();
2130
2114
  tool.unload();
2115
+ if (!onlyTool) this.editTool = null;
2131
2116
  tool.editTarget = null;
2132
2117
  }
2133
2118
  }
@@ -2400,32 +2385,32 @@ exports.EditTool = class EditTool extends InnerEditor {
2400
2385
  app.unlockLayout();
2401
2386
  }
2402
2387
  onScale(e) {
2403
- const {scaleX: scaleX, scaleY: scaleY, transform: transform, worldOrigin: worldOrigin, editor: editor, editBoxType: editBoxType} = e;
2388
+ const {scaleX: scaleX, scaleY: scaleY, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
2404
2389
  const {app: app, list: list} = editor;
2405
2390
  app.lockLayout();
2406
2391
  list.forEach(target => {
2407
2392
  const resize = editor.getEditSize(target) !== "scale";
2408
- if (transform) target.transformWorld(transform, resize, false, editBoxType); else target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize, false, editBoxType);
2393
+ if (transform) target.transformWorld(transform, resize, false); else target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize, false);
2409
2394
  });
2410
2395
  app.unlockLayout();
2411
2396
  }
2412
2397
  onRotate(e) {
2413
- const {rotation: rotation, transform: transform, worldOrigin: worldOrigin, editor: editor, editBoxType: editBoxType} = e;
2398
+ const {rotation: rotation, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
2414
2399
  const {app: app, list: list} = editor;
2415
2400
  app.lockLayout();
2416
2401
  list.forEach(target => {
2417
2402
  const resize = editor.getEditSize(target) !== "scale";
2418
- if (transform) target.transformWorld(transform, resize, false, editBoxType); else target.rotateOfWorld(worldOrigin, rotation);
2403
+ if (transform) target.transformWorld(transform, resize, false); else target.rotateOfWorld(worldOrigin, rotation);
2419
2404
  });
2420
2405
  app.unlockLayout();
2421
2406
  }
2422
2407
  onSkew(e) {
2423
- const {skewX: skewX, skewY: skewY, transform: transform, worldOrigin: worldOrigin, editor: editor, editBoxType: editBoxType} = e;
2408
+ const {skewX: skewX, skewY: skewY, transform: transform, worldOrigin: worldOrigin, editor: editor} = e;
2424
2409
  const {app: app, list: list} = editor;
2425
2410
  app.lockLayout();
2426
2411
  list.forEach(target => {
2427
2412
  const resize = editor.getEditSize(target) !== "scale";
2428
- if (transform) target.transformWorld(transform, resize, false, editBoxType); else target.skewOfWorld(worldOrigin, skewX, skewY, resize);
2413
+ if (transform) target.transformWorld(transform, resize, false); else target.skewOfWorld(worldOrigin, skewX, skewY, resize);
2429
2414
  });
2430
2415
  app.unlockLayout();
2431
2416
  }
@@ -2569,8 +2554,10 @@ draw.UI.addAttr("editConfig", undefined, draw.dataType);
2569
2554
 
2570
2555
  draw.UI.addAttr("editOuter", ui => {
2571
2556
  ui.updateLayout();
2572
- const name = (ui.tag === "Line" || ui.pathInputed ? "" : ui.points ? "Points" : ui.tag) + "EditTool";
2573
- return ui.__.__isLinePath ? "LineEditTool" : EditToolCreator.list[name] ? name : "EditTool";
2557
+ const {EditTool: EditTool, LineEditTool: LineEditTool, PointsEditTool: PointsEditTool} = EditToolCreator;
2558
+ const name = ui.pathInputed || ui.isPointsMode ? PointsEditTool : ui.tag + "EditTool";
2559
+ const hasTool = EditToolCreator.list[name];
2560
+ return ui.__.__isLinePath && !(name == PointsEditTool && hasTool) ? LineEditTool : hasTool ? name : EditTool;
2574
2561
  }, draw.dataType);
2575
2562
 
2576
2563
  draw.UI.addAttr("editInner", "PathEditor", draw.dataType);