@leafer-ui/worker 1.0.0 → 1.0.1

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.
@@ -48,6 +48,8 @@ const I$2 = IncrementId;
48
48
  const { round, pow: pow$1, PI: PI$4 } = Math;
49
49
  const MathHelper = {
50
50
  within(value, min, max) {
51
+ if (typeof min === 'object')
52
+ max = min.max, min = min.min;
51
53
  if (min !== undefined && value < min)
52
54
  value = min;
53
55
  if (max !== undefined && value > max)
@@ -150,10 +152,10 @@ const MatrixHelper = {
150
152
  t.e += x;
151
153
  t.f += y;
152
154
  },
153
- translateInner(t, x, y, isMoveOrigin) {
155
+ translateInner(t, x, y, hasOrigin) {
154
156
  t.e += t.a * x + t.c * y;
155
157
  t.f += t.b * x + t.d * y;
156
- if (isMoveOrigin)
158
+ if (hasOrigin)
157
159
  t.e -= x, t.f -= y;
158
160
  },
159
161
  scale(t, scaleX, scaleY = scaleX) {
@@ -312,7 +314,7 @@ const MatrixHelper = {
312
314
  to.y -= (f * a - e * b) * s;
313
315
  }
314
316
  },
315
- setLayout(t, layout, origin, bcChanged) {
317
+ setLayout(t, layout, origin, around, bcChanged) {
316
318
  const { x, y, scaleX, scaleY } = layout;
317
319
  if (bcChanged === undefined)
318
320
  bcChanged = layout.rotation || layout.skewX || layout.skewY;
@@ -344,10 +346,10 @@ const MatrixHelper = {
344
346
  }
345
347
  t.e = x;
346
348
  t.f = y;
347
- if (origin)
348
- M$6.translateInner(t, -origin.x, -origin.y, true);
349
+ if (origin = origin || around)
350
+ M$6.translateInner(t, -origin.x, -origin.y, !around);
349
351
  },
350
- getLayout(t, origin, firstSkewY) {
352
+ getLayout(t, origin, around, firstSkewY) {
351
353
  const { a, b, c, d, e, f } = t;
352
354
  let x = e, y = f, scaleX, scaleY, rotation, skewX, skewY;
353
355
  if (b || c) {
@@ -376,9 +378,11 @@ const MatrixHelper = {
376
378
  scaleY = d;
377
379
  rotation = skewX = skewY = 0;
378
380
  }
379
- if (origin) {
381
+ if (origin = around || origin) {
380
382
  x += origin.x * a + origin.y * c;
381
383
  y += origin.x * b + origin.y * d;
384
+ if (!around)
385
+ x -= origin.x, y -= origin.y;
382
386
  }
383
387
  return { x, y, scaleX, scaleY, rotation, skewX, skewY };
384
388
  },
@@ -706,12 +710,12 @@ class Matrix {
706
710
  toInnerPoint(outer, to, distance) {
707
711
  MatrixHelper.toInnerPoint(this, outer, to, distance);
708
712
  }
709
- setLayout(data, origin) {
710
- MatrixHelper.setLayout(this, data, origin);
713
+ setLayout(data, origin, around) {
714
+ MatrixHelper.setLayout(this, data, origin, around);
711
715
  return this;
712
716
  }
713
- getLayout(origin, firstSkewY) {
714
- return MatrixHelper.getLayout(this, origin, firstSkewY);
717
+ getLayout(origin, around, firstSkewY) {
718
+ return MatrixHelper.getLayout(this, origin, around, firstSkewY);
715
719
  }
716
720
  withScale(scaleX, scaleY) {
717
721
  return MatrixHelper.withScale(this, scaleX, scaleY);
@@ -1999,7 +2003,7 @@ class LeaferCanvasBase extends Canvas$1 {
1999
2003
  DataHelper.copyAttrs(this.size, size, canvasSizeAttrs);
2000
2004
  this.size.pixelRatio || (this.size.pixelRatio = 1);
2001
2005
  this.bounds = new Bounds(0, 0, this.width, this.height);
2002
- if (!this.unreal) {
2006
+ if (this.context && !this.unreal) {
2003
2007
  this.updateViewSize();
2004
2008
  this.smooth = this.config.smooth;
2005
2009
  }
@@ -2172,7 +2176,7 @@ class LeaferCanvasBase extends Canvas$1 {
2172
2176
  this.manager ? this.manager.recycle(this) : this.destroy();
2173
2177
  }
2174
2178
  }
2175
- updateRender() { }
2179
+ updateRender(_bounds) { }
2176
2180
  unrealCanvas() { }
2177
2181
  destroy() {
2178
2182
  this.manager = this.view = this.parentView = null;
@@ -4066,8 +4070,13 @@ const LeafHelper = {
4066
4070
  zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
4067
4071
  copy$7(matrix$1, t.__localMatrix);
4068
4072
  scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
4069
- moveByMatrix(t, matrix$1);
4070
- t.scaleResize(scaleX, scaleY, resize !== true);
4073
+ if (t.origin || t.around) {
4074
+ L.setTransform(t, matrix$1, resize);
4075
+ }
4076
+ else {
4077
+ moveByMatrix(t, matrix$1);
4078
+ t.scaleResize(scaleX, scaleY, resize !== true);
4079
+ }
4071
4080
  },
4072
4081
  rotateOfWorld(t, origin, angle) {
4073
4082
  L.rotateOfLocal(t, getTempLocal(t, origin), angle);
@@ -4075,8 +4084,13 @@ const LeafHelper = {
4075
4084
  rotateOfLocal(t, origin, angle) {
4076
4085
  copy$7(matrix$1, t.__localMatrix);
4077
4086
  rotateOfOuter$2(matrix$1, origin, angle);
4078
- moveByMatrix(t, matrix$1);
4079
- t.rotation = MathHelper.formatRotation(t.rotation + angle);
4087
+ if (t.origin || t.around) {
4088
+ L.setTransform(t, matrix$1);
4089
+ }
4090
+ else {
4091
+ moveByMatrix(t, matrix$1);
4092
+ t.rotation = MathHelper.formatRotation(t.rotation + angle);
4093
+ }
4080
4094
  },
4081
4095
  skewOfWorld(t, origin, skewX, skewY, resize) {
4082
4096
  L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
@@ -4099,7 +4113,7 @@ const LeafHelper = {
4099
4113
  L.setTransform(t, matrix$1, resize);
4100
4114
  },
4101
4115
  setTransform(t, transform, resize) {
4102
- const layout = getLayout(transform);
4116
+ const layout = getLayout(transform, t.origin && L.getInnerOrigin(t, t.origin), t.around && L.getInnerOrigin(t, t.around));
4103
4117
  if (resize) {
4104
4118
  const scaleX = layout.scaleX / t.scaleX;
4105
4119
  const scaleY = layout.scaleY / t.scaleY;
@@ -4112,13 +4126,19 @@ const LeafHelper = {
4112
4126
  t.set(layout);
4113
4127
  }
4114
4128
  },
4129
+ getFlipTransform(t, axis) {
4130
+ const m = getMatrixData();
4131
+ const sign = axis === 'x' ? 1 : -1;
4132
+ scaleOfOuter$2(m, L.getLocalOrigin(t, 'center'), -1 * sign, 1 * sign);
4133
+ return m;
4134
+ },
4115
4135
  getLocalOrigin(t, origin) {
4116
4136
  return PointHelper.tempToOuterOf(L.getInnerOrigin(t, origin), t.localTransform);
4117
4137
  },
4118
4138
  getInnerOrigin(t, origin) {
4119
- if (typeof origin === 'string')
4120
- AroundHelper.toPoint(origin, t.boxBounds, origin = {});
4121
- return origin;
4139
+ const innerOrigin = {};
4140
+ AroundHelper.toPoint(origin, t.boxBounds, innerOrigin);
4141
+ return innerOrigin;
4122
4142
  },
4123
4143
  getRelativeWorld(t, relative, temp) {
4124
4144
  copy$7(matrix$1, t.worldTransform);
@@ -4545,7 +4565,10 @@ const LeafEventer = {
4545
4565
  on(type, listener, options) {
4546
4566
  let capture, once;
4547
4567
  if (options) {
4548
- if (typeof options === 'boolean') {
4568
+ if (options === 'once') {
4569
+ once = true;
4570
+ }
4571
+ else if (typeof options === 'boolean') {
4549
4572
  capture = options;
4550
4573
  }
4551
4574
  else {
@@ -4576,7 +4599,7 @@ const LeafEventer = {
4576
4599
  if (listener) {
4577
4600
  let capture;
4578
4601
  if (options)
4579
- capture = typeof options === 'boolean' ? options : options.capture;
4602
+ capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture);
4580
4603
  let events, index;
4581
4604
  const map = __getListenerMap(this, capture);
4582
4605
  typeList.forEach(type => {
@@ -4878,7 +4901,7 @@ const LeafMatrix = {
4878
4901
  const layout = this.__layout, local = this.__local, data = this.__;
4879
4902
  if (layout.affectScaleOrRotation) {
4880
4903
  if (layout.scaleChanged || layout.rotationChanged) {
4881
- setLayout(local, data, null, layout.affectRotation);
4904
+ setLayout(local, data, null, null, layout.affectRotation);
4882
4905
  layout.scaleChanged = layout.rotationChanged = false;
4883
4906
  }
4884
4907
  }
@@ -4886,7 +4909,7 @@ const LeafMatrix = {
4886
4909
  local.f = data.y + data.offsetY;
4887
4910
  if (data.around || data.origin) {
4888
4911
  toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$1);
4889
- translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
4912
+ translateInner(local, -tempPoint$1.x, -tempPoint$1.y, !data.around);
4890
4913
  }
4891
4914
  }
4892
4915
  this.__layout.matrixChanged = false;
@@ -5115,7 +5138,7 @@ const { LEAF, create } = IncrementId;
5115
5138
  const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
5116
5139
  const { toOuterOf } = BoundsHelper;
5117
5140
  const { copy: copy$4 } = PointHelper;
5118
- const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
5141
+ const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
5119
5142
  let Leaf = class Leaf {
5120
5143
  get tag() { return this.__tag; }
5121
5144
  set tag(_value) { }
@@ -5141,6 +5164,8 @@ let Leaf = class Leaf {
5141
5164
  get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
5142
5165
  get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
5143
5166
  get pathInputed() { return this.__.__pathInputed; }
5167
+ set event(map) { let event; for (let key in map)
5168
+ event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event); }
5144
5169
  constructor(data) {
5145
5170
  this.innerId = create(LEAF);
5146
5171
  this.reset(data);
@@ -5400,6 +5425,9 @@ let Leaf = class Leaf {
5400
5425
  skewOfWorld(worldOrigin, skewX, skewY, resize) {
5401
5426
  skewOfWorld(this, worldOrigin, skewX, skewY, resize);
5402
5427
  }
5428
+ flip(axis) {
5429
+ transform(this, getFlipTransform(this, axis));
5430
+ }
5403
5431
  scaleResize(scaleX, scaleY = scaleX, _noResize) {
5404
5432
  this.scaleX *= scaleX;
5405
5433
  this.scaleY *= scaleY;
@@ -5757,7 +5785,7 @@ class LeafLevelList {
5757
5785
  }
5758
5786
  }
5759
5787
 
5760
- const version = "1.0.0-rc.30";
5788
+ const version = "1.0.1";
5761
5789
  const inviteCode = {};
5762
5790
 
5763
5791
  class LeaferCanvas extends LeaferCanvasBase {
@@ -5827,7 +5855,7 @@ function useCanvas(_canvasType, _power) {
5827
5855
  Platform.name = 'web';
5828
5856
  Platform.isWorker = true;
5829
5857
  Platform.requestRender = function (render) { requestAnimationFrame(render); };
5830
- Platform.devicePixelRatio = 1;
5858
+ defineKey(Platform, 'devicePixelRatio', { get() { return 1; } });
5831
5859
  const { userAgent } = navigator;
5832
5860
  if (userAgent.indexOf("Firefox") > -1) {
5833
5861
  Platform.conicGradientRotate90 = true;
@@ -6323,14 +6351,14 @@ class Renderer {
6323
6351
  if (Debug.showRepaint)
6324
6352
  this.canvas.strokeWorld(bounds, 'red');
6325
6353
  this.target.__render(this.canvas, options);
6326
- this.renderBounds = realBounds || bounds;
6354
+ this.renderBounds = realBounds = realBounds || bounds;
6327
6355
  this.renderOptions = options;
6328
- this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
6356
+ this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
6329
6357
  if (Debug.showHitView)
6330
6358
  this.renderHitView(options);
6331
6359
  if (Debug.showBoundsView)
6332
6360
  this.renderBoundsView(options);
6333
- this.canvas.updateRender();
6361
+ this.canvas.updateRender(realBounds);
6334
6362
  }
6335
6363
  renderHitView(_options) { }
6336
6364
  renderBoundsView(_options) { }
@@ -7652,7 +7680,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
7652
7680
  this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
7653
7681
  if (this.isApp)
7654
7682
  this.__setApp();
7655
- this.__checkAutoLayout(config);
7683
+ this.__checkAutoLayout(config, parentApp);
7656
7684
  this.view = canvas.view;
7657
7685
  if (parentApp) {
7658
7686
  this.__bindApp(parentApp);
@@ -7753,9 +7781,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
7753
7781
  this.leafer = leafer;
7754
7782
  this.__level = 1;
7755
7783
  }
7756
- __checkAutoLayout(config) {
7757
- if (!config.width || !config.height) {
7758
- this.autoLayout = new AutoBounds(config);
7784
+ __checkAutoLayout(config, parentApp) {
7785
+ if (!parentApp) {
7786
+ if (!config.width || !config.height)
7787
+ this.autoLayout = new AutoBounds(config);
7759
7788
  this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
7760
7789
  }
7761
7790
  }
@@ -7890,7 +7919,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
7890
7919
  list.push(item);
7891
7920
  }
7892
7921
  }
7893
- zoom(_zoomType, _padding, _fixedScale) { return undefined; }
7922
+ zoom(_zoomType, _padding, _fixedScale) {
7923
+ return debug$3.error('need @leafer-in/view');
7924
+ }
7894
7925
  getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
7895
7926
  getValidScale(changeScale) { return changeScale; }
7896
7927
  getWorldPointByClient(clientPoint, updateClient) {
@@ -8417,8 +8448,7 @@ let Canvas = class Canvas extends Rect {
8417
8448
  destroy() {
8418
8449
  if (this.canvas) {
8419
8450
  this.canvas.destroy();
8420
- this.canvas = null;
8421
- this.context = null;
8451
+ this.canvas = this.context = null;
8422
8452
  }
8423
8453
  super.destroy();
8424
8454
  }
@@ -8771,11 +8801,13 @@ let App = class App extends Leafer {
8771
8801
  this.renderer.update();
8772
8802
  }
8773
8803
  __render(canvas, options) {
8774
- if (options.matrix) {
8775
- const { a, b, c, d, e, f } = options.matrix;
8776
- canvas.setTransform(a, b, c, d, e, f);
8804
+ if (canvas.context) {
8805
+ if (options.matrix) {
8806
+ const { a, b, c, d, e, f } = options.matrix;
8807
+ canvas.setTransform(a, b, c, d, e, f);
8808
+ }
8809
+ this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
8777
8810
  }
8778
- this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
8779
8811
  }
8780
8812
  __onResize(event) {
8781
8813
  this.children.forEach(leafer => leafer.resize(event));
@@ -9142,11 +9174,14 @@ leafer.getValidScale = function (changeScale) {
9142
9174
  };
9143
9175
 
9144
9176
  class Transformer {
9177
+ get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
9145
9178
  constructor(interaction) {
9146
9179
  this.interaction = interaction;
9147
9180
  }
9148
9181
  move(data) {
9149
9182
  const { interaction } = this;
9183
+ if (!data.moveType)
9184
+ data.moveType = 'move';
9150
9185
  if (!this.moveData) {
9151
9186
  const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
9152
9187
  data.path = path;
@@ -9311,8 +9346,10 @@ class Dragger {
9311
9346
  return;
9312
9347
  }
9313
9348
  if (!this.moving && canDrag) {
9314
- if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty)
9349
+ if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) {
9350
+ this.dragData.moveType = 'drag';
9315
9351
  interaction.emit(MoveEvent.START, this.dragData);
9352
+ }
9316
9353
  }
9317
9354
  if (!this.moving) {
9318
9355
  this.dragStart(data, canDrag);
@@ -9351,6 +9388,7 @@ class Dragger {
9351
9388
  this.dragData.throughPath = throughPath;
9352
9389
  this.dragData.path = path;
9353
9390
  if (this.moving) {
9391
+ this.dragData.moveType = 'drag';
9354
9392
  interaction.emit(MoveEvent.BEFORE_MOVE, this.dragData);
9355
9393
  interaction.emit(MoveEvent.MOVE, this.dragData);
9356
9394
  }
@@ -9417,6 +9455,7 @@ class Dragger {
9417
9455
  endDragData.path = path;
9418
9456
  if (this.moving) {
9419
9457
  this.moving = false;
9458
+ endDragData.moveType = 'drag';
9420
9459
  interaction.emit(MoveEvent.END, endDragData);
9421
9460
  }
9422
9461
  if (this.dragging) {
@@ -9475,7 +9514,7 @@ class Dragger {
9475
9514
  totalY += moveY;
9476
9515
  PointHelper.move(downData, moveX, moveY);
9477
9516
  PointHelper.move(this.dragData, moveX, moveY);
9478
- interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY }));
9517
+ interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
9479
9518
  interaction.pointerMoveReal(data);
9480
9519
  }, 10);
9481
9520
  }
@@ -9595,9 +9634,11 @@ const config = {
9595
9634
  const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
9596
9635
  class InteractionBase {
9597
9636
  get dragging() { return this.dragger.dragging; }
9637
+ get transforming() { return this.transformer.transforming; }
9598
9638
  get moveMode() { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
9639
+ get canHover() { return this.config.pointer.hover && !this.config.mobile; }
9599
9640
  get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
9600
- get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.config.pointer.hover && this.downData && this.isTreePath(this.downData); }
9641
+ get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
9601
9642
  get isHoldMiddleKey() { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
9602
9643
  get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
9603
9644
  get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
@@ -9690,6 +9731,7 @@ class InteractionBase {
9690
9731
  if (!downData)
9691
9732
  return;
9692
9733
  PointerButton.defaultLeft(data);
9734
+ data.multiTouch = downData.multiTouch;
9693
9735
  this.findPath(data);
9694
9736
  const upData = Object.assign(Object.assign({}, data), { path: data.path.clone() });
9695
9737
  data.path.addList(downData.path.list);
@@ -9762,7 +9804,7 @@ class InteractionBase {
9762
9804
  this.updateCursor();
9763
9805
  }
9764
9806
  pointerHover(data) {
9765
- if (this.config.pointer.hover) {
9807
+ if (this.canHover) {
9766
9808
  this.pointerOverOrOut(data);
9767
9809
  this.pointerEnterOrLeave(data);
9768
9810
  }
@@ -9899,7 +9941,7 @@ class InteractionBase {
9899
9941
  this.hoverData = data;
9900
9942
  }
9901
9943
  updateCursor(data) {
9902
- if (!this.config.cursor || !this.config.pointer.hover)
9944
+ if (!this.config.cursor || !this.canHover)
9903
9945
  return;
9904
9946
  if (!data) {
9905
9947
  this.updateHoverData();
@@ -10787,7 +10829,7 @@ function createPattern(ui, paint, pixelRatio) {
10787
10829
  const { abs } = Math;
10788
10830
  function checkImage(ui, canvas, paint, allowPaint) {
10789
10831
  const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
10790
- if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
10832
+ if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
10791
10833
  return false;
10792
10834
  }
10793
10835
  else {
@@ -11765,7 +11807,10 @@ const ExportModule = {
11765
11807
  const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
11766
11808
  let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
11767
11809
  const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
11810
+ let sliceLeaf;
11768
11811
  if (slice) {
11812
+ sliceLeaf = leaf;
11813
+ sliceLeaf.__worldOpacity = 0;
11769
11814
  leaf = leafer;
11770
11815
  renderOptions.bounds = canvas.bounds;
11771
11816
  }
@@ -11780,6 +11825,8 @@ const ExportModule = {
11780
11825
  leaf.__render(canvas, renderOptions);
11781
11826
  }
11782
11827
  canvas.restore();
11828
+ if (sliceLeaf)
11829
+ sliceLeaf.__updateWorldOpacity();
11783
11830
  if (trim) {
11784
11831
  trimBounds = getTrimBounds(canvas);
11785
11832
  const old = canvas, { width, height } = trimBounds;