@leafer-editor/worker 1.5.3 → 1.6.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.
Files changed (9) hide show
  1. package/dist/worker.js +476 -289
  2. package/dist/worker.js.map +1 -1
  3. package/dist/worker.min.js +1 -1
  4. package/dist/worker.min.js.map +1 -1
  5. package/dist/worker.module.js +476 -289
  6. package/dist/worker.module.js.map +1 -1
  7. package/dist/worker.module.min.js +1 -1
  8. package/dist/worker.module.min.js.map +1 -1
  9. package/package.json +15 -15
package/dist/worker.js CHANGED
@@ -48,7 +48,7 @@ var LeaferUI = (function (exports) {
48
48
  };
49
49
  const I$2 = IncrementId;
50
50
 
51
- const { round, pow: pow$1, PI: PI$4 } = Math;
51
+ const { round: round$3, pow: pow$1, PI: PI$4 } = Math;
52
52
  const MathHelper = {
53
53
  within(value, min, max) {
54
54
  if (typeof min === 'object')
@@ -112,7 +112,7 @@ var LeaferUI = (function (exports) {
112
112
  },
113
113
  float(num, maxLength) {
114
114
  const a = maxLength !== undefined ? pow$1(10, maxLength) : 1000000000000;
115
- num = round(num * a) / a;
115
+ num = round$3(num * a) / a;
116
116
  return num === -0 ? 0 : num;
117
117
  },
118
118
  getScaleData(scale, size, originSize, scaleData) {
@@ -135,8 +135,15 @@ var LeaferUI = (function (exports) {
135
135
  scaleData.scaleX = scale.x;
136
136
  scaleData.scaleY = scale.y;
137
137
  }
138
+ },
139
+ randInt,
140
+ randColor(opacity) {
141
+ return `rgba(${randInt(255)},${randInt(255)},${randInt(255)},${opacity || 1})`;
138
142
  }
139
143
  };
144
+ function randInt(num) {
145
+ return Math.round(Math.random() * num);
146
+ }
140
147
  const OneRadian = PI$4 / 180;
141
148
  const PI2 = PI$4 * 2;
142
149
  const PI_2 = PI$4 / 2;
@@ -434,7 +441,7 @@ var LeaferUI = (function (exports) {
434
441
  const M$9 = MatrixHelper;
435
442
 
436
443
  const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
437
- const { sin: sin$4, cos: cos$4, abs: abs$6, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
444
+ const { sin: sin$4, cos: cos$4, abs: abs$6, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2, PI: PI$3 } = Math;
438
445
  const PointHelper = {
439
446
  defaultPoint: getPointData(),
440
447
  tempPoint: {},
@@ -455,6 +462,10 @@ var LeaferUI = (function (exports) {
455
462
  t.x = x;
456
463
  t.y = y;
457
464
  },
465
+ round(t, halfPixel) {
466
+ t.x = halfPixel ? round$2(t.x - 0.5) + 0.5 : round$2(t.x);
467
+ t.y = halfPixel ? round$2(t.y - 0.5) + 0.5 : round$2(t.y);
468
+ },
458
469
  move(t, x, y) {
459
470
  t.x += x;
460
471
  t.y += y;
@@ -1320,6 +1331,7 @@ var LeaferUI = (function (exports) {
1320
1331
  'E': 1
1321
1332
  };
1322
1333
 
1334
+ const { randColor } = MathHelper;
1323
1335
  class Debug {
1324
1336
  constructor(name) {
1325
1337
  this.repeatMap = {};
@@ -1334,6 +1346,19 @@ var LeaferUI = (function (exports) {
1334
1346
  static set exclude(name) {
1335
1347
  this.excludeList = getNameList(name);
1336
1348
  }
1349
+ static drawRepaint(canvas, bounds) {
1350
+ const color = randColor();
1351
+ canvas.fillWorld(bounds, color.replace('1)', '.1)'));
1352
+ canvas.strokeWorld(bounds, color);
1353
+ }
1354
+ static drawBounds(leaf, canvas, _options) {
1355
+ const showHit = Debug.showBounds === 'hit', w = leaf.__nowWorld, color = randColor();
1356
+ if (showHit)
1357
+ canvas.setWorld(w), leaf.__drawHitPath(canvas), canvas.fillStyle = color.replace('1)', '.2)'), canvas.fill();
1358
+ canvas.resetTransform();
1359
+ canvas.setStroke(color, 2);
1360
+ showHit ? canvas.stroke() : canvas.strokeWorld(w, color);
1361
+ }
1337
1362
  log(...messages) {
1338
1363
  if (D$6.enable) {
1339
1364
  if (D$6.filterList.length && D$6.filterList.every(name => name !== this.name))
@@ -1420,7 +1445,7 @@ var LeaferUI = (function (exports) {
1420
1445
  return rs;
1421
1446
  },
1422
1447
  need(name) {
1423
- console.error('need plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
1448
+ console.error('please install plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
1424
1449
  }
1425
1450
  };
1426
1451
  setTimeout(() => check.forEach(name => Plugin.has(name, true)));
@@ -2020,7 +2045,7 @@ var LeaferUI = (function (exports) {
2020
2045
  contextMethod()
2021
2046
  ], Canvas.prototype, "strokeText", null);
2022
2047
 
2023
- const { copy: copy$c } = MatrixHelper;
2048
+ const { copy: copy$c, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
2024
2049
  const minSize = { width: 1, height: 1, pixelRatio: 1 };
2025
2050
  const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
2026
2051
  class LeaferCanvasBase extends Canvas {
@@ -2029,6 +2054,8 @@ var LeaferUI = (function (exports) {
2029
2054
  get pixelRatio() { return this.size.pixelRatio; }
2030
2055
  get pixelWidth() { return this.width * this.pixelRatio; }
2031
2056
  get pixelHeight() { return this.height * this.pixelRatio; }
2057
+ get pixelSnap() { return this.config.pixelSnap; }
2058
+ set pixelSnap(value) { this.config.pixelSnap = value; }
2032
2059
  get allowBackgroundColor() { return this.view && this.parentView; }
2033
2060
  constructor(config, manager) {
2034
2061
  super();
@@ -2089,15 +2116,22 @@ var LeaferUI = (function (exports) {
2089
2116
  stopAutoLayout() { }
2090
2117
  setCursor(_cursor) { }
2091
2118
  setWorld(matrix, parentMatrix) {
2092
- const { pixelRatio } = this;
2093
- const w = this.worldTransform;
2094
- if (parentMatrix) {
2095
- const { a, b, c, d, e, f } = parentMatrix;
2096
- this.setTransform(w.a = ((matrix.a * a) + (matrix.b * c)) * pixelRatio, w.b = ((matrix.a * b) + (matrix.b * d)) * pixelRatio, w.c = ((matrix.c * a) + (matrix.d * c)) * pixelRatio, w.d = ((matrix.c * b) + (matrix.d * d)) * pixelRatio, w.e = (((matrix.e * a) + (matrix.f * c) + e)) * pixelRatio, w.f = (((matrix.e * b) + (matrix.f * d) + f)) * pixelRatio);
2097
- }
2098
- else {
2099
- this.setTransform(w.a = matrix.a * pixelRatio, w.b = matrix.b * pixelRatio, w.c = matrix.c * pixelRatio, w.d = matrix.d * pixelRatio, w.e = matrix.e * pixelRatio, w.f = matrix.f * pixelRatio);
2119
+ const { pixelRatio, pixelSnap } = this, w = this.worldTransform;
2120
+ if (parentMatrix)
2121
+ multiplyParent$3(matrix, parentMatrix, w);
2122
+ w.a = matrix.a * pixelRatio;
2123
+ w.b = matrix.b * pixelRatio;
2124
+ w.c = matrix.c * pixelRatio;
2125
+ w.d = matrix.d * pixelRatio;
2126
+ w.e = matrix.e * pixelRatio;
2127
+ w.f = matrix.f * pixelRatio;
2128
+ if (pixelSnap) {
2129
+ if (matrix.half && (matrix.half * pixelRatio) % 2)
2130
+ w.e = round$1(w.e - 0.5) + 0.5, w.f = round$1(w.f - 0.5) + 0.5;
2131
+ else
2132
+ w.e = round$1(w.e), w.f = round$1(w.f);
2100
2133
  }
2134
+ this.setTransform(w.a, w.b, w.c, w.d, w.e, w.f);
2101
2135
  }
2102
2136
  useWorldTransform(worldTransform) {
2103
2137
  if (worldTransform)
@@ -2240,12 +2274,13 @@ var LeaferUI = (function (exports) {
2240
2274
  return this.width === size.width && this.height === size.height && (!size.pixelRatio || this.pixelRatio === size.pixelRatio);
2241
2275
  }
2242
2276
  getSameCanvas(useSameWorldTransform, useSameSmooth) {
2243
- const canvas = this.manager ? this.manager.get(this.size) : Creator.canvas(Object.assign({}, this.size));
2277
+ const { size, pixelSnap } = this, canvas = this.manager ? this.manager.get(size) : Creator.canvas(Object.assign({}, size));
2244
2278
  canvas.save();
2245
2279
  if (useSameWorldTransform)
2246
2280
  copy$c(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
2247
2281
  if (useSameSmooth)
2248
2282
  canvas.smooth = this.smooth;
2283
+ canvas.pixelSnap !== pixelSnap && (canvas.pixelSnap = pixelSnap);
2249
2284
  return canvas;
2250
2285
  }
2251
2286
  recycle(clearBounds) {
@@ -3672,7 +3707,7 @@ var LeaferUI = (function (exports) {
3672
3707
  const R = Resource;
3673
3708
 
3674
3709
  const ImageManager = {
3675
- maxRecycled: 100,
3710
+ maxRecycled: 10,
3676
3711
  recycledList: [],
3677
3712
  patternTasker: new TaskProcessor(),
3678
3713
  get(config) {
@@ -4025,9 +4060,8 @@ var LeaferUI = (function (exports) {
4025
4060
  set(value) {
4026
4061
  if (this.__setAttr(key, value)) {
4027
4062
  this.__layout.hitCanvasChanged = true;
4028
- if (Debug.showHitView) {
4063
+ if (Debug.showBounds === 'hit')
4029
4064
  this.__layout.surfaceChanged || this.__layout.surfaceChange();
4030
- }
4031
4065
  if (this.leafer)
4032
4066
  this.leafer.updateCursor();
4033
4067
  }
@@ -4188,7 +4222,7 @@ var LeaferUI = (function (exports) {
4188
4222
  }
4189
4223
 
4190
4224
  const { copy: copy$a, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
4191
- const matrix$3 = {};
4225
+ const matrix$3 = {}, { round } = Math;
4192
4226
  const LeafHelper = {
4193
4227
  updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
4194
4228
  if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
@@ -4262,6 +4296,8 @@ var LeaferUI = (function (exports) {
4262
4296
  y = x.y, x = x.x;
4263
4297
  x += t.x;
4264
4298
  y += t.y;
4299
+ if (t.leafer && t.leafer.config.pointSnap)
4300
+ x = round(x), y = round(y);
4265
4301
  transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
4266
4302
  },
4267
4303
  zoomOfWorld(t, origin, scaleX, scaleY, resize, transition) {
@@ -4500,6 +4536,7 @@ var LeaferUI = (function (exports) {
4500
4536
  set contentBounds(bounds) { this._contentBounds = bounds; }
4501
4537
  get strokeBounds() { return this._strokeBounds || this.boxBounds; }
4502
4538
  get renderBounds() { return this._renderBounds || this.boxBounds; }
4539
+ set renderBounds(bounds) { this._renderBounds = bounds; }
4503
4540
  get localContentBounds() { toOuterOf$2(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {})); return this[localContent]; }
4504
4541
  get localStrokeBounds() { return this._localStrokeBounds || this; }
4505
4542
  get localRenderBounds() { return this._localRenderBounds || this; }
@@ -4518,11 +4555,13 @@ var LeaferUI = (function (exports) {
4518
4555
  get height() { return this.boxBounds.height; }
4519
4556
  constructor(leaf) {
4520
4557
  this.leaf = leaf;
4521
- this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
4522
4558
  if (this.leaf.__local)
4523
4559
  this._localRenderBounds = this._localStrokeBounds = this.leaf.__local;
4524
- this.boxChange();
4525
- this.matrixChange();
4560
+ if (leaf.__world) {
4561
+ this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
4562
+ this.boxChange();
4563
+ this.matrixChange();
4564
+ }
4526
4565
  }
4527
4566
  createLocal() {
4528
4567
  const local = this.leaf.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
@@ -4854,6 +4893,9 @@ var LeaferUI = (function (exports) {
4854
4893
  }
4855
4894
  this.old = oldSize;
4856
4895
  }
4896
+ static isResizing(leaf) {
4897
+ return this.resizingKeys && this.resizingKeys[leaf.innerId] !== undefined;
4898
+ }
4857
4899
  }
4858
4900
  ResizeEvent.RESIZE = 'resize';
4859
4901
 
@@ -4896,6 +4938,7 @@ var LeaferUI = (function (exports) {
4896
4938
  }
4897
4939
  RenderEvent.REQUEST = 'render.request';
4898
4940
  RenderEvent.CHILD_START = 'render.child_start';
4941
+ RenderEvent.CHILD_END = 'render.child_end';
4899
4942
  RenderEvent.START = 'render.start';
4900
4943
  RenderEvent.BEFORE = 'render.before';
4901
4944
  RenderEvent.RENDER = 'render';
@@ -5275,24 +5318,27 @@ var LeaferUI = (function (exports) {
5275
5318
  const LeafRender = {
5276
5319
  __render(canvas, options) {
5277
5320
  if (this.__worldOpacity) {
5321
+ const data = this.__;
5278
5322
  canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
5279
- canvas.opacity = this.__.opacity;
5323
+ canvas.opacity = options.dimOpacity && !data.dimskip ? data.opacity * options.dimOpacity : data.opacity;
5280
5324
  if (this.__.__single) {
5281
- if (this.__.eraser === 'path')
5325
+ if (data.eraser === 'path')
5282
5326
  return this.__renderEraser(canvas, options);
5283
5327
  const tempCanvas = canvas.getSameCanvas(true, true);
5284
5328
  this.__draw(tempCanvas, options, canvas);
5285
5329
  if (this.__worldFlipped) {
5286
- canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, this.__.__blendMode, true);
5330
+ canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, data.__blendMode, true);
5287
5331
  }
5288
5332
  else {
5289
- canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, this.__.__blendMode);
5333
+ canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, data.__blendMode);
5290
5334
  }
5291
5335
  tempCanvas.recycle(this.__nowWorld);
5292
5336
  }
5293
5337
  else {
5294
5338
  this.__draw(canvas, options);
5295
5339
  }
5340
+ if (Debug.showBounds)
5341
+ Debug.drawBounds(this, canvas, options);
5296
5342
  }
5297
5343
  },
5298
5344
  __clip(canvas, options) {
@@ -5322,14 +5368,19 @@ var LeaferUI = (function (exports) {
5322
5368
  __render(canvas, options) {
5323
5369
  this.__nowWorld = this.__getNowWorld(options);
5324
5370
  if (this.__worldOpacity) {
5325
- if (this.__.__single) {
5326
- if (this.__.eraser === 'path')
5371
+ const data = this.__;
5372
+ if (data.dim)
5373
+ options.dimOpacity = data.dim === true ? 0.2 : data.dim;
5374
+ else if (data.dimskip)
5375
+ options.dimOpacity && (options.dimOpacity = 0);
5376
+ if (data.__single) {
5377
+ if (data.eraser === 'path')
5327
5378
  return this.__renderEraser(canvas, options);
5328
5379
  const tempCanvas = canvas.getSameCanvas(false, true);
5329
5380
  this.__renderBranch(tempCanvas, options);
5330
5381
  const nowWorld = this.__nowWorld;
5331
- canvas.opacity = this.__.opacity;
5332
- canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, this.__.__blendMode, true);
5382
+ canvas.opacity = options.dimOpacity ? data.opacity * options.dimOpacity : data.opacity;
5383
+ canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, data.__blendMode, true);
5333
5384
  tempCanvas.recycle(nowWorld);
5334
5385
  }
5335
5386
  else {
@@ -5404,9 +5455,11 @@ var LeaferUI = (function (exports) {
5404
5455
  reset(data) {
5405
5456
  if (this.leafer)
5406
5457
  this.leafer.forceRender(this.__world);
5407
- this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1 };
5408
- if (data !== null)
5409
- this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
5458
+ if (data !== 0) {
5459
+ this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1 };
5460
+ if (data !== null)
5461
+ this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
5462
+ }
5410
5463
  this.__worldOpacity = 1;
5411
5464
  this.__ = new this.__DataProcessor(this);
5412
5465
  this.__layout = new this.__LayoutProcessor(this);
@@ -5542,9 +5595,10 @@ var LeaferUI = (function (exports) {
5542
5595
  if (options.matrix) {
5543
5596
  if (!this.__cameraWorld)
5544
5597
  this.__cameraWorld = {};
5545
- const cameraWorld = this.__cameraWorld;
5546
- multiplyParent(this.__world, options.matrix, cameraWorld, undefined, this.__world);
5598
+ const cameraWorld = this.__cameraWorld, world = this.__world;
5599
+ multiplyParent(world, options.matrix, cameraWorld, undefined, world);
5547
5600
  toOuterOf(this.__layout.renderBounds, cameraWorld, cameraWorld);
5601
+ cameraWorld.half !== world.half && (cameraWorld.half = world.half);
5548
5602
  return cameraWorld;
5549
5603
  }
5550
5604
  else {
@@ -5704,7 +5758,7 @@ var LeaferUI = (function (exports) {
5704
5758
  __updateHitCanvas() { }
5705
5759
  __render(_canvas, _options) { }
5706
5760
  __drawFast(_canvas, _options) { }
5707
- __draw(_canvas, _options) { }
5761
+ __draw(_canvas, _options, _originCanvas) { }
5708
5762
  __clip(_canvas, _options) { }
5709
5763
  __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
5710
5764
  __updateWorldOpacity() { }
@@ -6074,7 +6128,7 @@ var LeaferUI = (function (exports) {
6074
6128
  }
6075
6129
  }
6076
6130
 
6077
- const version = "1.5.3";
6131
+ const version = "1.6.1";
6078
6132
 
6079
6133
  class LeaferCanvas extends LeaferCanvasBase {
6080
6134
  get allowBackgroundColor() { return true; }
@@ -6314,7 +6368,6 @@ var LeaferUI = (function (exports) {
6314
6368
  }
6315
6369
 
6316
6370
  const { worldBounds: worldBounds$1 } = LeafBoundsHelper;
6317
- const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
6318
6371
  class LayoutBlockData {
6319
6372
  constructor(list) {
6320
6373
  this.updatedBounds = new Bounds();
@@ -6328,13 +6381,7 @@ var LeaferUI = (function (exports) {
6328
6381
  this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds$1);
6329
6382
  }
6330
6383
  setAfter() {
6331
- const { list } = this.updatedList;
6332
- if (list.some(leaf => leaf.noBounds)) {
6333
- this.afterBounds.set(bigBounds);
6334
- }
6335
- else {
6336
- this.afterBounds.setListWithFn(list, worldBounds$1);
6337
- }
6384
+ this.afterBounds.setListWithFn(this.updatedList.list, worldBounds$1);
6338
6385
  this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
6339
6386
  }
6340
6387
  merge(data) {
@@ -6536,6 +6583,22 @@ var LeaferUI = (function (exports) {
6536
6583
  requestLayout() {
6537
6584
  this.target.emit(LayoutEvent.REQUEST);
6538
6585
  }
6586
+ checkRender() {
6587
+ if (this.running) {
6588
+ const { target } = this;
6589
+ if (target.isApp) {
6590
+ target.emit(RenderEvent.CHILD_START, target);
6591
+ target.children.forEach(leafer => {
6592
+ leafer.renderer.FPS = this.FPS;
6593
+ leafer.renderer.checkRender();
6594
+ });
6595
+ target.emit(RenderEvent.CHILD_END, target);
6596
+ }
6597
+ if (this.changed && this.canvas.view)
6598
+ this.render();
6599
+ this.target.emit(RenderEvent.NEXT);
6600
+ }
6601
+ }
6539
6602
  render(callback) {
6540
6603
  if (!(this.running && this.canvas.view))
6541
6604
  return this.update();
@@ -6544,8 +6607,6 @@ var LeaferUI = (function (exports) {
6544
6607
  this.totalBounds = new Bounds();
6545
6608
  debug$6.log(target.innerName, '--->');
6546
6609
  try {
6547
- if (!target.isApp)
6548
- target.app.emit(RenderEvent.CHILD_START, target);
6549
6610
  this.emitRender(RenderEvent.START);
6550
6611
  this.renderOnce(callback);
6551
6612
  this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6613,20 +6674,12 @@ var LeaferUI = (function (exports) {
6613
6674
  }
6614
6675
  clipRender(block) {
6615
6676
  const t = Run.start('PartRender');
6616
- const { canvas } = this;
6617
- const bounds = block.getIntersect(canvas.bounds);
6618
- const includes = block.includes(this.target.__world);
6619
- const realBounds = new Bounds(bounds);
6677
+ const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
6620
6678
  canvas.save();
6621
- if (includes && !Debug.showRepaint) {
6622
- canvas.clear();
6623
- }
6624
- else {
6625
- bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
6626
- canvas.clearWorld(bounds, true);
6627
- canvas.clipWorld(bounds, true);
6628
- }
6629
- this.__render(bounds, includes, realBounds);
6679
+ bounds.spread(Renderer.clipSpread).ceil();
6680
+ canvas.clearWorld(bounds, true);
6681
+ canvas.clipWorld(bounds, true);
6682
+ this.__render(bounds, realBounds);
6630
6683
  canvas.restore();
6631
6684
  Run.end(t);
6632
6685
  }
@@ -6635,28 +6688,22 @@ var LeaferUI = (function (exports) {
6635
6688
  const { canvas } = this;
6636
6689
  canvas.save();
6637
6690
  canvas.clear();
6638
- this.__render(canvas.bounds, true);
6691
+ this.__render(canvas.bounds);
6639
6692
  canvas.restore();
6640
6693
  Run.end(t);
6641
6694
  }
6642
- __render(bounds, includes, realBounds) {
6643
- const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
6695
+ __render(bounds, realBounds) {
6696
+ const { canvas } = this, includes = bounds.includes(this.target.__world), options = includes ? { includes } : { bounds, includes };
6644
6697
  if (this.needFill)
6645
- this.canvas.fillWorld(bounds, this.config.fill);
6698
+ canvas.fillWorld(bounds, this.config.fill);
6646
6699
  if (Debug.showRepaint)
6647
- this.canvas.strokeWorld(bounds, 'red');
6648
- this.target.__render(this.canvas, options);
6700
+ Debug.drawRepaint(canvas, bounds);
6701
+ this.target.__render(canvas, options);
6649
6702
  this.renderBounds = realBounds = realBounds || bounds;
6650
6703
  this.renderOptions = options;
6651
6704
  this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
6652
- if (Debug.showHitView)
6653
- this.renderHitView(options);
6654
- if (Debug.showBoundsView)
6655
- this.renderBoundsView(options);
6656
- this.canvas.updateRender(realBounds);
6657
- }
6658
- renderHitView(_options) { }
6659
- renderBoundsView(_options) { }
6705
+ canvas.updateRender(realBounds);
6706
+ }
6660
6707
  addBlock(block) {
6661
6708
  if (!this.updateBlocks)
6662
6709
  this.updateBlocks = [];
@@ -6672,17 +6719,16 @@ var LeaferUI = (function (exports) {
6672
6719
  }
6673
6720
  }
6674
6721
  __requestRender() {
6675
- if (this.requestTime)
6722
+ const target = this.target;
6723
+ if (this.requestTime || !target)
6676
6724
  return;
6725
+ if (target.parentApp)
6726
+ return target.parentApp.requestRender(false);
6677
6727
  const requestTime = this.requestTime = Date.now();
6678
6728
  Platform.requestRender(() => {
6679
6729
  this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
6680
6730
  this.requestTime = 0;
6681
- if (this.running) {
6682
- if (this.changed && this.canvas.view)
6683
- this.render();
6684
- this.target.emit(RenderEvent.NEXT);
6685
- }
6731
+ this.checkRender();
6686
6732
  });
6687
6733
  }
6688
6734
  __onResize(e) {
@@ -6740,6 +6786,7 @@ var LeaferUI = (function (exports) {
6740
6786
  }
6741
6787
  }
6742
6788
  }
6789
+ Renderer.clipSpread = 10;
6743
6790
 
6744
6791
  const { hitRadiusPoint } = BoundsHelper;
6745
6792
  class Picker {
@@ -6985,6 +7032,7 @@ var LeaferUI = (function (exports) {
6985
7032
  return strokeWidth;
6986
7033
  }
6987
7034
  get __hasStroke() { return this.stroke && this.strokeWidth; }
7035
+ get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
6988
7036
  get __hasMultiPaint() {
6989
7037
  const t = this;
6990
7038
  if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
@@ -7029,14 +7077,14 @@ var LeaferUI = (function (exports) {
7029
7077
  this.__removeInput('fill');
7030
7078
  PaintImage.recycleImage('fill', this);
7031
7079
  this.__isFills = false;
7032
- if (this.__pixelFill)
7033
- this.__pixelFill = false;
7080
+ this.__pixelFill && (this.__pixelFill = false);
7034
7081
  }
7035
7082
  this._fill = value;
7036
7083
  }
7037
7084
  else if (typeof value === 'object') {
7038
7085
  this.__setInput('fill', value);
7039
- this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
7086
+ const layout = this.__leaf.__layout;
7087
+ layout.boxChanged || layout.boxChange();
7040
7088
  this.__isFills = true;
7041
7089
  this._fill || (this._fill = emptyPaint);
7042
7090
  }
@@ -7047,14 +7095,14 @@ var LeaferUI = (function (exports) {
7047
7095
  this.__removeInput('stroke');
7048
7096
  PaintImage.recycleImage('stroke', this);
7049
7097
  this.__isStrokes = false;
7050
- if (this.__pixelStroke)
7051
- this.__pixelStroke = false;
7098
+ this.__pixelStroke && (this.__pixelStroke = false);
7052
7099
  }
7053
7100
  this._stroke = value;
7054
7101
  }
7055
7102
  else if (typeof value === 'object') {
7056
7103
  this.__setInput('stroke', value);
7057
- this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
7104
+ const layout = this.__leaf.__layout;
7105
+ layout.boxChanged || layout.boxChange();
7058
7106
  this.__isStrokes = true;
7059
7107
  this._stroke || (this._stroke = emptyPaint);
7060
7108
  }
@@ -7169,6 +7217,31 @@ var LeaferUI = (function (exports) {
7169
7217
  this._fontWeight = value;
7170
7218
  }
7171
7219
  }
7220
+ setBoxStyle(value) {
7221
+ let t = this.__leaf, box = t.__box;
7222
+ if (value) {
7223
+ const { boxStyle } = this;
7224
+ if (box)
7225
+ for (let key in boxStyle)
7226
+ box[key] = undefined;
7227
+ else
7228
+ box = t.__box = UICreator.get('Rect', 0);
7229
+ const layout = t.__layout, boxLayout = box.__layout;
7230
+ if (!boxStyle)
7231
+ box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
7232
+ box.set(value);
7233
+ if (boxLayout.strokeChanged)
7234
+ layout.strokeChange();
7235
+ if (boxLayout.renderChanged)
7236
+ layout.renderChange();
7237
+ box.__updateChange();
7238
+ }
7239
+ else if (box) {
7240
+ t.__box = box.parent = null;
7241
+ box.destroy();
7242
+ }
7243
+ this._boxStyle = value;
7244
+ }
7172
7245
  }
7173
7246
 
7174
7247
  class ImageData extends RectData {
@@ -7206,7 +7279,7 @@ var LeaferUI = (function (exports) {
7206
7279
  const UIBounds = {
7207
7280
  __updateStrokeSpread() {
7208
7281
  let width = 0, boxWidth = 0;
7209
- const data = this.__, { strokeAlign, strokeWidth } = data;
7282
+ const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
7210
7283
  if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
7211
7284
  boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
7212
7285
  if (!data.__boxStroke) {
@@ -7217,6 +7290,10 @@ var LeaferUI = (function (exports) {
7217
7290
  }
7218
7291
  if (data.__useArrow)
7219
7292
  width += strokeWidth * 5;
7293
+ if (box) {
7294
+ width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
7295
+ boxWidth = box.__layout.strokeBoxSpread;
7296
+ }
7220
7297
  this.__layout.strokeBoxSpread = boxWidth;
7221
7298
  return width;
7222
7299
  },
@@ -7235,25 +7312,26 @@ var LeaferUI = (function (exports) {
7235
7312
  if (backgroundBlur)
7236
7313
  shapeWidth = Math.max(shapeWidth, backgroundBlur);
7237
7314
  this.__layout.renderShapeSpread = shapeWidth;
7238
- return width + (this.__layout.strokeSpread || 0);
7315
+ width += this.__layout.strokeSpread || 0;
7316
+ return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
7239
7317
  }
7240
7318
  };
7241
7319
 
7242
7320
  const UIRender = {
7243
7321
  __updateChange() {
7244
- const data = this.__;
7322
+ const data = this.__, w = this.__world;
7245
7323
  if (data.__useEffect) {
7246
7324
  const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
7247
7325
  data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
7248
7326
  }
7327
+ const half = data.__hasHalf;
7328
+ w.half !== half && (w.half = half);
7249
7329
  data.__checkSingle();
7250
7330
  const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
7251
- if (complex) {
7331
+ if (complex)
7252
7332
  data.__complex = true;
7253
- }
7254
- else {
7333
+ else
7255
7334
  data.__complex && (data.__complex = false);
7256
- }
7257
7335
  },
7258
7336
  __drawFast(canvas, options) {
7259
7337
  drawFast(this, canvas, options);
@@ -7340,10 +7418,11 @@ var LeaferUI = (function (exports) {
7340
7418
 
7341
7419
  const RectRender = {
7342
7420
  __drawFast(canvas, options) {
7343
- let { width, height, fill, stroke, __drawAfterFill } = this.__;
7421
+ let { x, y, width, height } = this.__layout.boxBounds;
7422
+ const { fill, stroke, __drawAfterFill } = this.__;
7344
7423
  if (fill) {
7345
7424
  canvas.fillStyle = fill;
7346
- canvas.fillRect(0, 0, width, height);
7425
+ canvas.fillRect(x, y, width, height);
7347
7426
  }
7348
7427
  if (__drawAfterFill)
7349
7428
  this.__drawAfterFill(canvas, options);
@@ -7362,14 +7441,14 @@ var LeaferUI = (function (exports) {
7362
7441
  if (width < 0 || height < 0) {
7363
7442
  canvas.save();
7364
7443
  this.__clip(canvas, options);
7365
- canvas.strokeRect(half, half, width, height);
7444
+ canvas.strokeRect(x + half, y + half, width, height);
7366
7445
  canvas.restore();
7367
7446
  }
7368
7447
  else
7369
- canvas.strokeRect(half, half, width, height);
7448
+ canvas.strokeRect(x + half, y + half, width, height);
7370
7449
  break;
7371
7450
  case 'outside':
7372
- canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
7451
+ canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
7373
7452
  break;
7374
7453
  }
7375
7454
  }
@@ -7525,6 +7604,12 @@ var LeaferUI = (function (exports) {
7525
7604
  __decorate([
7526
7605
  surfaceType(false)
7527
7606
  ], exports.UI.prototype, "locked", void 0);
7607
+ __decorate([
7608
+ surfaceType(false)
7609
+ ], exports.UI.prototype, "dim", void 0);
7610
+ __decorate([
7611
+ surfaceType(false)
7612
+ ], exports.UI.prototype, "dimskip", void 0);
7528
7613
  __decorate([
7529
7614
  sortType(0)
7530
7615
  ], exports.UI.prototype, "zIndex", void 0);
@@ -7786,7 +7871,7 @@ var LeaferUI = (function (exports) {
7786
7871
  start: true,
7787
7872
  hittable: true,
7788
7873
  smooth: true,
7789
- lazySpeard: 100
7874
+ lazySpeard: 100,
7790
7875
  };
7791
7876
  this.leafs = 0;
7792
7877
  this.__eventIds = [];
@@ -8210,13 +8295,13 @@ var LeaferUI = (function (exports) {
8210
8295
  super.__updateRenderBounds();
8211
8296
  copy$6(childrenRenderBounds, renderBounds);
8212
8297
  this.__updateRectRenderBounds();
8213
- isOverflow = !includes$1(renderBounds, childrenRenderBounds);
8298
+ isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
8214
8299
  if (isOverflow && this.__.overflow !== 'hide')
8215
8300
  add(renderBounds, childrenRenderBounds);
8216
8301
  }
8217
8302
  else
8218
8303
  this.__updateRectRenderBounds();
8219
- !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
8304
+ this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
8220
8305
  }
8221
8306
  __updateRectRenderBounds() { }
8222
8307
  __updateRectChange() { }
@@ -8624,33 +8709,13 @@ var LeaferUI = (function (exports) {
8624
8709
  registerUI()
8625
8710
  ], exports.Canvas);
8626
8711
 
8627
- const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
8712
+ const { copyAndSpread, includes, spread, setList } = BoundsHelper;
8628
8713
  exports.Text = class Text extends exports.UI {
8629
8714
  get __tag() { return 'Text'; }
8630
- get textDrawData() {
8631
- this.__layout.update();
8632
- return this.__.__textDrawData;
8633
- }
8715
+ get textDrawData() { this.updateLayout(); return this.__.__textDrawData; }
8634
8716
  constructor(data) {
8635
8717
  super(data);
8636
8718
  }
8637
- __drawHitPath(canvas) {
8638
- const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__;
8639
- canvas.beginPath();
8640
- if (this.__.__letterSpacing < 0) {
8641
- this.__drawPathByData(canvas);
8642
- }
8643
- else {
8644
- data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
8645
- }
8646
- }
8647
- __drawPathByData(drawer, _data) {
8648
- const { x, y, width, height } = this.__layout.boxBounds;
8649
- drawer.rect(x, y, width, height);
8650
- }
8651
- __drawRenderPath(canvas) {
8652
- canvas.font = this.__.__font;
8653
- }
8654
8719
  __updateTextDrawData() {
8655
8720
  const data = this.__;
8656
8721
  const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
@@ -8667,15 +8732,16 @@ var LeaferUI = (function (exports) {
8667
8732
  const layout = this.__layout;
8668
8733
  const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
8669
8734
  this.__updateTextDrawData();
8670
- const { bounds } = data.__textDrawData;
8735
+ const { bounds: contentBounds } = data.__textDrawData;
8671
8736
  const b = layout.boxBounds;
8737
+ layout.contentBounds = contentBounds;
8672
8738
  if (data.__lineHeight < fontSize)
8673
- spread(bounds, fontSize / 2);
8739
+ spread(contentBounds, fontSize / 2);
8674
8740
  if (autoWidth || autoHeight) {
8675
- b.x = autoWidth ? bounds.x : 0;
8676
- b.y = autoHeight ? bounds.y : 0;
8677
- b.width = autoWidth ? bounds.width : data.width;
8678
- b.height = autoHeight ? bounds.height : data.height;
8741
+ b.x = autoWidth ? contentBounds.x : 0;
8742
+ b.y = autoHeight ? contentBounds.y : 0;
8743
+ b.width = autoWidth ? contentBounds.width : data.width;
8744
+ b.height = autoHeight ? contentBounds.height : data.height;
8679
8745
  if (padding) {
8680
8746
  const [top, right, bottom, left] = data.__padding;
8681
8747
  if (autoWidth)
@@ -8689,23 +8755,45 @@ var LeaferUI = (function (exports) {
8689
8755
  super.__updateBoxBounds();
8690
8756
  if (italic)
8691
8757
  b.width += fontSize * 0.16;
8692
- const contentBounds = includes(b, bounds) ? b : bounds;
8693
- if (!isSame$1(contentBounds, layout.contentBounds)) {
8694
- layout.contentBounds = contentBounds;
8695
- layout.renderChanged = true;
8696
- setList(data.__textBoxBounds = {}, [b, bounds]);
8697
- }
8758
+ const isOverflow = !includes(b, contentBounds) || undefined;
8759
+ if (isOverflow)
8760
+ setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
8698
8761
  else
8699
- data.__textBoxBounds = contentBounds;
8762
+ data.__textBoxBounds = b;
8763
+ this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
8764
+ }
8765
+ __onUpdateSize() {
8766
+ if (this.__box)
8767
+ this.__box.__onUpdateSize();
8768
+ super.__onUpdateSize();
8700
8769
  }
8701
8770
  __updateRenderSpread() {
8702
8771
  let width = super.__updateRenderSpread();
8703
8772
  if (!width)
8704
- width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1;
8773
+ width = this.isOverflow ? 1 : 0;
8705
8774
  return width;
8706
8775
  }
8707
8776
  __updateRenderBounds() {
8708
- copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
8777
+ const { renderBounds, renderSpread } = this.__layout;
8778
+ copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
8779
+ if (this.__box)
8780
+ this.__box.__layout.renderBounds = renderBounds;
8781
+ }
8782
+ __drawRenderPath(canvas) {
8783
+ canvas.font = this.__.__font;
8784
+ }
8785
+ __draw(canvas, options, originCanvas) {
8786
+ const box = this.__box;
8787
+ if (box)
8788
+ box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
8789
+ if (this.textEditing && !Export.running)
8790
+ return;
8791
+ super.__draw(canvas, options, originCanvas);
8792
+ }
8793
+ destroy() {
8794
+ if (this.boxStyle)
8795
+ this.boxStyle = null;
8796
+ super.destroy();
8709
8797
  }
8710
8798
  };
8711
8799
  __decorate([
@@ -8717,6 +8805,9 @@ var LeaferUI = (function (exports) {
8717
8805
  __decorate([
8718
8806
  boundsType(0)
8719
8807
  ], exports.Text.prototype, "height", void 0);
8808
+ __decorate([
8809
+ surfaceType()
8810
+ ], exports.Text.prototype, "boxStyle", void 0);
8720
8811
  __decorate([
8721
8812
  dataType(false)
8722
8813
  ], exports.Text.prototype, "resizeFontSize", void 0);
@@ -8880,26 +8971,25 @@ var LeaferUI = (function (exports) {
8880
8971
  this.leafer = this;
8881
8972
  this.watcher.disable();
8882
8973
  this.layouter.disable();
8883
- this.__eventIds.push(this.on_(PropertyEvent.CHANGE, this.__onPropertyChange, this));
8884
8974
  }
8885
8975
  start() {
8886
8976
  super.start();
8887
- this.children.forEach(leafer => leafer.start());
8977
+ this.forEach(leafer => leafer.start());
8888
8978
  }
8889
8979
  stop() {
8890
- this.children.forEach(leafer => leafer.stop());
8980
+ this.forEach(leafer => leafer.stop());
8891
8981
  super.stop();
8892
8982
  }
8893
8983
  unlockLayout() {
8894
8984
  super.unlockLayout();
8895
- this.children.forEach(leafer => leafer.unlockLayout());
8985
+ this.forEach(leafer => leafer.unlockLayout());
8896
8986
  }
8897
8987
  lockLayout() {
8898
8988
  super.lockLayout();
8899
- this.children.forEach(leafer => leafer.lockLayout());
8989
+ this.forEach(leafer => leafer.lockLayout());
8900
8990
  }
8901
8991
  forceRender(bounds, sync) {
8902
- this.children.forEach(leafer => leafer.forceRender(bounds, sync));
8992
+ this.forEach(leafer => leafer.forceRender(bounds, sync));
8903
8993
  }
8904
8994
  addLeafer(merge) {
8905
8995
  const leafer = new exports.Leafer(merge);
@@ -8919,9 +9009,8 @@ var LeaferUI = (function (exports) {
8919
9009
  leafer.canvas.childIndex = index;
8920
9010
  this.__listenChildEvents(leafer);
8921
9011
  }
8922
- __onPropertyChange() {
8923
- if (Debug.showHitView)
8924
- this.children.forEach(leafer => leafer.forceUpdate('surface'));
9012
+ forEach(fn) {
9013
+ this.children.forEach(fn);
8925
9014
  }
8926
9015
  __onCreated() {
8927
9016
  this.created = this.children.every(child => child.created);
@@ -8944,18 +9033,18 @@ var LeaferUI = (function (exports) {
8944
9033
  const m = options.matrix;
8945
9034
  if (m)
8946
9035
  canvas.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
8947
- this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
9036
+ this.forEach(leafer => canvas.copyWorld(leafer.canvas));
8948
9037
  }
8949
9038
  }
8950
9039
  __onResize(event) {
8951
- this.children.forEach(leafer => leafer.resize(event));
9040
+ this.forEach(leafer => leafer.resize(event));
8952
9041
  super.__onResize(event);
8953
9042
  }
8954
9043
  updateLayout() {
8955
- this.children.forEach(leafer => leafer.updateLayout());
9044
+ this.forEach(leafer => leafer.updateLayout());
8956
9045
  }
8957
9046
  __getChildConfig(userConfig) {
8958
- let config = Object.assign({}, this.config);
9047
+ const config = Object.assign({}, this.config);
8959
9048
  config.hittable = config.realCanvas = undefined;
8960
9049
  if (userConfig)
8961
9050
  DataHelper.assign(config, userConfig);
@@ -9514,6 +9603,7 @@ var LeaferUI = (function (exports) {
9514
9603
  delta: { x: 80 / 4, y: 8.0 },
9515
9604
  },
9516
9605
  pointer: {
9606
+ snap: true,
9517
9607
  hitRadius: 5,
9518
9608
  tapTime: 120,
9519
9609
  longPressTime: 800,
@@ -9608,8 +9698,7 @@ var LeaferUI = (function (exports) {
9608
9698
  if (this.downData) {
9609
9699
  const canDrag = PointHelper.getDistance(this.downData, data) > this.p.dragDistance;
9610
9700
  if (canDrag) {
9611
- if (this.waitTap)
9612
- this.pointerWaitCancel();
9701
+ this.pointerWaitCancel();
9613
9702
  this.waitRightTap = false;
9614
9703
  }
9615
9704
  this.dragger.checkDrag(data, canDrag);
@@ -9869,7 +9958,10 @@ var LeaferUI = (function (exports) {
9869
9958
  }
9870
9959
  getLocal(clientPoint, updateClient) {
9871
9960
  const clientBounds = this.canvas.getClientBounds(updateClient);
9872
- return { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
9961
+ const point = { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
9962
+ if (this.p.snap)
9963
+ PointHelper.round(point);
9964
+ return point;
9873
9965
  }
9874
9966
  emitTap(data) {
9875
9967
  this.emit(exports.PointerEvent.TAP, data);
@@ -9888,9 +9980,11 @@ var LeaferUI = (function (exports) {
9888
9980
  this.waitTap = true;
9889
9981
  }
9890
9982
  tapWaitCancel() {
9891
- clearTimeout(this.tapTimer);
9892
- this.waitTap = false;
9893
- this.tapCount = 0;
9983
+ if (this.waitTap) {
9984
+ clearTimeout(this.tapTimer);
9985
+ this.waitTap = false;
9986
+ this.tapCount = 0;
9987
+ }
9894
9988
  }
9895
9989
  longPressWait(data) {
9896
9990
  clearTimeout(this.longPressTimer);
@@ -9910,8 +10004,10 @@ var LeaferUI = (function (exports) {
9910
10004
  return hasLong;
9911
10005
  }
9912
10006
  longPressWaitCancel() {
9913
- clearTimeout(this.longPressTimer);
9914
- this.longPressed = false;
10007
+ if (this.longPressTimer) {
10008
+ clearTimeout(this.longPressTimer);
10009
+ this.longPressed = false;
10010
+ }
9915
10011
  }
9916
10012
  __onResize() {
9917
10013
  const { dragOut } = this.m;
@@ -10001,25 +10097,26 @@ var LeaferUI = (function (exports) {
10001
10097
  const inner = {};
10002
10098
  const leaf$1 = exports.Leaf.prototype;
10003
10099
  leaf$1.__hitWorld = function (point) {
10004
- if (!this.__.hitSelf)
10100
+ const data = this.__;
10101
+ if (!data.hitSelf)
10005
10102
  return false;
10006
- if (this.__.hitRadius) {
10103
+ const world = this.__world, layout = this.__layout;
10104
+ const isSmall = world.width < 10 && world.height < 10;
10105
+ if (data.hitRadius) {
10007
10106
  copy$5(inner, point), point = inner;
10008
- setRadius(point, this.__.hitRadius);
10107
+ setRadius(point, data.hitRadius);
10009
10108
  }
10010
- toInnerRadiusPointOf(point, this.__world, inner);
10011
- const { width, height } = this.__world;
10012
- const isSmall = width < 10 && height < 10;
10013
- if (this.__.hitBox || isSmall) {
10014
- if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner))
10109
+ toInnerRadiusPointOf(point, world, inner);
10110
+ if (data.hitBox || isSmall) {
10111
+ if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
10015
10112
  return true;
10016
10113
  if (isSmall)
10017
10114
  return false;
10018
10115
  }
10019
- if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
10116
+ if (layout.hitCanvasChanged || !this.__hitCanvas) {
10020
10117
  this.__updateHitCanvas();
10021
- if (!this.__layout.boundsChanged)
10022
- this.__layout.hitCanvasChanged = false;
10118
+ if (!layout.boundsChanged)
10119
+ layout.hitCanvasChanged = false;
10023
10120
  }
10024
10121
  return this.__hit(inner);
10025
10122
  };
@@ -10032,7 +10129,9 @@ var LeaferUI = (function (exports) {
10032
10129
  const matrix$2 = new Matrix();
10033
10130
  const ui$2 = exports.UI.prototype;
10034
10131
  ui$2.__updateHitCanvas = function () {
10035
- const data = this.__, { hitCanvasManager } = this.leafer;
10132
+ if (this.__box)
10133
+ this.__box.__updateHitCanvas();
10134
+ const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
10036
10135
  const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
10037
10136
  const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
10038
10137
  const isHitPixel = isHitPixelFill || isHitPixelStroke;
@@ -10059,6 +10158,8 @@ var LeaferUI = (function (exports) {
10059
10158
  h.setStrokeOptions(data);
10060
10159
  };
10061
10160
  ui$2.__hit = function (inner) {
10161
+ if (this.__box && this.__box.__hit(inner))
10162
+ return true;
10062
10163
  const data = this.__;
10063
10164
  if (data.__isHitPixel && this.__hitPixel(inner))
10064
10165
  return true;
@@ -10107,6 +10208,15 @@ var LeaferUI = (function (exports) {
10107
10208
  return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
10108
10209
  };
10109
10210
 
10211
+ exports.Text.prototype.__drawHitPath = function (canvas) {
10212
+ const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
10213
+ canvas.beginPath();
10214
+ if (__letterSpacing < 0)
10215
+ this.__drawPathByBox(canvas);
10216
+ else
10217
+ data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
10218
+ };
10219
+
10110
10220
  function getSelector$1(ui) {
10111
10221
  return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
10112
10222
  }
@@ -10489,9 +10599,11 @@ var LeaferUI = (function (exports) {
10489
10599
  const tempPoint = {};
10490
10600
  const tempScaleData = {};
10491
10601
  function createData(leafPaint, image, paint, box) {
10492
- const { blendMode, sync } = paint;
10602
+ const { blendMode, changeful, sync } = paint;
10493
10603
  if (blendMode)
10494
10604
  leafPaint.blendMode = blendMode;
10605
+ if (changeful)
10606
+ leafPaint.changeful = changeful;
10495
10607
  if (sync)
10496
10608
  leafPaint.sync = sync;
10497
10609
  leafPaint.data = getPatternData(paint, box, image);
@@ -10724,40 +10836,32 @@ var LeaferUI = (function (exports) {
10724
10836
  }
10725
10837
 
10726
10838
  const { abs: abs$2 } = Math;
10727
- function checkImage(ui, canvas, paint, allowPaint) {
10839
+ function checkImage(ui, canvas, paint, allowDraw) {
10728
10840
  const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
10729
- const { pixelRatio } = canvas;
10730
- if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
10841
+ const { pixelRatio } = canvas, { data } = paint;
10842
+ if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
10731
10843
  return false;
10732
10844
  }
10733
10845
  else {
10734
- const { data } = paint;
10735
- if (allowPaint) {
10736
- if (!data.repeat) {
10737
- let { width, height } = data;
10738
- width *= abs$2(scaleX) * pixelRatio;
10739
- height *= abs$2(scaleY) * pixelRatio;
10740
- if (data.scaleX) {
10741
- width *= data.scaleX;
10742
- height *= data.scaleY;
10743
- }
10744
- allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
10846
+ if (allowDraw) {
10847
+ if (data.repeat) {
10848
+ allowDraw = false;
10745
10849
  }
10746
10850
  else {
10747
- allowPaint = false;
10851
+ if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
10852
+ let { width, height } = data;
10853
+ width *= abs$2(scaleX) * pixelRatio;
10854
+ height *= abs$2(scaleY) * pixelRatio;
10855
+ if (data.scaleX) {
10856
+ width *= data.scaleX;
10857
+ height *= data.scaleY;
10858
+ }
10859
+ allowDraw = (width * height > Platform.image.maxCacheSize);
10860
+ }
10748
10861
  }
10749
10862
  }
10750
- if (allowPaint) {
10751
- canvas.save();
10752
- ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
10753
- if (paint.blendMode)
10754
- canvas.blendMode = paint.blendMode;
10755
- if (data.opacity)
10756
- canvas.opacity *= data.opacity;
10757
- if (data.transform)
10758
- canvas.transform(data.transform);
10759
- canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
10760
- canvas.restore();
10863
+ if (allowDraw) {
10864
+ drawImage(ui, canvas, paint, data);
10761
10865
  return true;
10762
10866
  }
10763
10867
  else {
@@ -10778,13 +10882,26 @@ var LeaferUI = (function (exports) {
10778
10882
  }
10779
10883
  }
10780
10884
  }
10885
+ function drawImage(ui, canvas, paint, data) {
10886
+ canvas.save();
10887
+ ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
10888
+ if (paint.blendMode)
10889
+ canvas.blendMode = paint.blendMode;
10890
+ if (data.opacity)
10891
+ canvas.opacity *= data.opacity;
10892
+ if (data.transform)
10893
+ canvas.transform(data.transform);
10894
+ canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
10895
+ canvas.restore();
10896
+ }
10781
10897
 
10782
10898
  function recycleImage(attrName, data) {
10783
10899
  const paints = data['_' + attrName];
10784
10900
  if (paints instanceof Array) {
10785
- let image, recycleMap, input, url;
10901
+ let paint, image, recycleMap, input, url;
10786
10902
  for (let i = 0, len = paints.length; i < len; i++) {
10787
- image = paints[i].image;
10903
+ paint = paints[i];
10904
+ image = paint.image;
10788
10905
  url = image && image.url;
10789
10906
  if (url) {
10790
10907
  if (!recycleMap)
@@ -10799,8 +10916,6 @@ var LeaferUI = (function (exports) {
10799
10916
  }
10800
10917
  image.unload(paints[i].loadId, !input.some((item) => item.url === url));
10801
10918
  }
10802
- else
10803
- paints[i].style = null;
10804
10919
  }
10805
10920
  }
10806
10921
  return recycleMap;
@@ -10979,7 +11094,7 @@ var LeaferUI = (function (exports) {
10979
11094
  const offsetOutBounds = {};
10980
11095
  function innerShadow(ui, current, shape) {
10981
11096
  let copyBounds, spreadScale;
10982
- const { __nowWorld: nowWorld, __layout: __layout } = ui;
11097
+ const { __nowWorld: nowWorld, __layout } = ui;
10983
11098
  const { innerShadow } = ui.__;
10984
11099
  const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
10985
11100
  const other = current.getSameCanvas();
@@ -11733,6 +11848,28 @@ var LeaferUI = (function (exports) {
11733
11848
  });
11734
11849
  };
11735
11850
  }
11851
+ function mergeConfigAttr() {
11852
+ return (target, key) => {
11853
+ defineKey(target, key, {
11854
+ get() {
11855
+ const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
11856
+ if (element && element.editConfig)
11857
+ Object.assign(mergeConfig, element.editConfig);
11858
+ if (dragPoint) {
11859
+ if (dragPoint.editConfig)
11860
+ Object.assign(mergeConfig, dragPoint.editConfig);
11861
+ if (mergeConfig.editSize === 'font-size')
11862
+ mergeConfig.lockRatio = true;
11863
+ if (dragPoint.pointType === 'resize-rotate') {
11864
+ mergeConfig.around || (mergeConfig.around = 'center');
11865
+ isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
11866
+ }
11867
+ }
11868
+ return this.mergedConfig = mergeConfig;
11869
+ }
11870
+ });
11871
+ };
11872
+ }
11736
11873
 
11737
11874
  const { abs: abs$1 } = Math;
11738
11875
  const { copy: copy$2, scale: scale$1 } = MatrixHelper;
@@ -11744,6 +11881,7 @@ var LeaferUI = (function (exports) {
11744
11881
  constructor() {
11745
11882
  super();
11746
11883
  this.list = [];
11884
+ this.visible = 0;
11747
11885
  this.hittable = false;
11748
11886
  this.strokeAlign = 'center';
11749
11887
  }
@@ -11757,10 +11895,10 @@ var LeaferUI = (function (exports) {
11757
11895
  if (list.length) {
11758
11896
  setListWithFn(bounds$2, list, worldBounds);
11759
11897
  this.set(bounds$2);
11898
+ this.visible = true;
11760
11899
  }
11761
- else {
11762
- this.width = this.height = 1;
11763
- }
11900
+ else
11901
+ this.visible = 0;
11764
11902
  }
11765
11903
  __draw(canvas, options) {
11766
11904
  const { list } = this;
@@ -11772,8 +11910,9 @@ var LeaferUI = (function (exports) {
11772
11910
  const { worldTransform, worldRenderBounds } = leaf;
11773
11911
  if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
11774
11912
  const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
11913
+ copy$2(matrix$1, worldTransform);
11914
+ matrix$1.half = strokeWidth % 2;
11775
11915
  if (aScaleX !== aScaleY) {
11776
- copy$2(matrix$1, worldTransform);
11777
11916
  scale$1(matrix$1, 1 / aScaleX, 1 / aScaleY);
11778
11917
  canvas.setWorld(matrix$1, options.matrix);
11779
11918
  canvas.beginPath();
@@ -11782,7 +11921,7 @@ var LeaferUI = (function (exports) {
11782
11921
  canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
11783
11922
  }
11784
11923
  else {
11785
- canvas.setWorld(worldTransform, options.matrix);
11924
+ canvas.setWorld(matrix$1, options.matrix);
11786
11925
  canvas.beginPath();
11787
11926
  if (leaf.__.__useArrow)
11788
11927
  leaf.__drawPath(canvas);
@@ -11817,7 +11956,8 @@ var LeaferUI = (function (exports) {
11817
11956
  super(data);
11818
11957
  this.strokeArea = new exports.Rect({ strokeAlign: 'center' });
11819
11958
  this.fillArea = new exports.Rect();
11820
- this.visible = this.hittable = false;
11959
+ this.visible = 0;
11960
+ this.hittable = false;
11821
11961
  this.addMany(this.fillArea, this.strokeArea);
11822
11962
  }
11823
11963
  setStyle(style, userStyle) {
@@ -12014,7 +12154,7 @@ var LeaferUI = (function (exports) {
12014
12154
  if (e.multiTouch)
12015
12155
  return;
12016
12156
  if (this.dragging)
12017
- this.originList = null, this.selectArea.visible = false;
12157
+ this.originList = null, this.selectArea.visible = 0;
12018
12158
  }
12019
12159
  onAutoMove(e) {
12020
12160
  if (this.dragging) {
@@ -12162,8 +12302,11 @@ var LeaferUI = (function (exports) {
12162
12302
  scaleY = scaleY < 0 ? -scale : scale;
12163
12303
  }
12164
12304
  }
12165
- scaleX /= changedScaleX;
12166
- scaleY /= changedScaleY;
12305
+ const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
12306
+ if (useScaleX)
12307
+ scaleX /= changedScaleX;
12308
+ if (useScaleY)
12309
+ scaleY /= changedScaleY;
12167
12310
  if (!flipable) {
12168
12311
  const { worldTransform } = element;
12169
12312
  if (scaleX < 0)
@@ -12178,22 +12321,27 @@ var LeaferUI = (function (exports) {
12178
12321
  localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
12179
12322
  if (!BoundsHelper.includes(allowBounds, localBounds)) {
12180
12323
  const realBounds = localBounds.getIntersect(allowBounds);
12181
- scaleX *= realBounds.width / localBounds.width;
12182
- scaleY *= realBounds.height / localBounds.height;
12324
+ const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
12325
+ if (useScaleX)
12326
+ scaleX *= fitScaleX;
12327
+ if (useScaleY)
12328
+ scaleY *= fitScaleY;
12183
12329
  }
12184
12330
  }
12185
- if (widthRange) {
12331
+ if (useScaleX && widthRange) {
12186
12332
  const nowWidth = boxBounds.width * element.scaleX;
12187
12333
  scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
12188
12334
  }
12189
- if (heightRange) {
12335
+ if (useScaleY && heightRange) {
12190
12336
  const nowHeight = boxBounds.height * element.scaleY;
12191
12337
  scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
12192
12338
  }
12193
- if (Math.abs(scaleX * worldBoxBounds.width) < 1)
12339
+ if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
12194
12340
  scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
12195
- if (Math.abs(scaleY * worldBoxBounds.height) < 1)
12341
+ if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1)
12196
12342
  scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
12343
+ if (lockRatio && scaleX !== scaleY)
12344
+ scaleY = scaleX = Math.min(scaleX, scaleY);
12197
12345
  return { origin, scaleX, scaleY, direction, lockRatio, around };
12198
12346
  },
12199
12347
  getRotateData(bounds, direction, current, last, around) {
@@ -12364,7 +12512,7 @@ var LeaferUI = (function (exports) {
12364
12512
  this.view = new exports.Group();
12365
12513
  this.rect = new exports.Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
12366
12514
  this.circle = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 });
12367
- this.buttons = new exports.Group({ around: 'center', hitSelf: false });
12515
+ this.buttons = new exports.Group({ around: 'center', hitSelf: false, visible: 0 });
12368
12516
  this.resizePoints = [];
12369
12517
  this.rotatePoints = [];
12370
12518
  this.resizeLines = [];
@@ -12419,12 +12567,13 @@ var LeaferUI = (function (exports) {
12419
12567
  }
12420
12568
  }
12421
12569
  update(bounds) {
12422
- const { mergeConfig, element, multiple } = this.editor;
12423
- const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig;
12570
+ const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
12571
+ const { mergeConfig, element, multiple, editMask } = editor;
12572
+ const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
12424
12573
  this.visible = !element.locked;
12574
+ editMask.visible = mask ? true : 0;
12425
12575
  if (this.view.worldOpacity) {
12426
12576
  const { width, height } = bounds;
12427
- const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
12428
12577
  const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
12429
12578
  const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
12430
12579
  let point = {}, rotateP, resizeP, resizeL;
@@ -12459,10 +12608,12 @@ var LeaferUI = (function (exports) {
12459
12608
  if (rect.path)
12460
12609
  rect.path = null;
12461
12610
  rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
12462
- buttons.visible = showPoints && buttons.children.length > 0;
12611
+ buttons.visible = showPoints && buttons.children.length > 0 || 0;
12463
12612
  if (buttons.visible)
12464
12613
  this.layoutButtons(mergeConfig);
12465
12614
  }
12615
+ else
12616
+ rect.set(bounds);
12466
12617
  }
12467
12618
  layoutCircle(config) {
12468
12619
  const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
@@ -12525,7 +12676,7 @@ var LeaferUI = (function (exports) {
12525
12676
  }
12526
12677
  onDragStart(e) {
12527
12678
  this.dragging = true;
12528
- const point = this.dragPoint = e.current;
12679
+ const point = this.dragPoint = e.current, { pointType } = point;
12529
12680
  const { editor, dragStartData } = this, { element } = editor;
12530
12681
  if (point.name === 'rect') {
12531
12682
  this.moving = true;
@@ -12536,43 +12687,53 @@ var LeaferUI = (function (exports) {
12536
12687
  dragStartData.point = { x: element.x, y: element.y };
12537
12688
  dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
12538
12689
  dragStartData.rotation = element.rotation;
12690
+ if (pointType && pointType.includes('resize'))
12691
+ ResizeEvent.resizingKeys = editor.leafList.keys;
12539
12692
  }
12540
12693
  onDragEnd(e) {
12541
12694
  this.dragging = false;
12542
12695
  this.dragPoint = null;
12543
12696
  this.moving = false;
12544
- if (e.current.name === 'rect')
12697
+ const { name, pointType } = e.current;
12698
+ if (name === 'rect')
12545
12699
  this.editor.opacity = 1;
12700
+ if (pointType && pointType.includes('resize'))
12701
+ ResizeEvent.resizingKeys = null;
12546
12702
  }
12547
12703
  onDrag(e) {
12548
12704
  const { editor } = this;
12549
12705
  const { pointType } = this.enterPoint = e.current;
12550
- if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable)
12706
+ if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
12551
12707
  editor.onRotate(e);
12552
- if (pointType.includes('resize'))
12708
+ if (pointType === 'resize-rotate')
12709
+ editor.onScale(e);
12710
+ }
12711
+ else if (pointType === 'resize')
12553
12712
  editor.onScale(e);
12554
12713
  if (pointType === 'skew')
12555
12714
  editor.onSkew(e);
12556
12715
  updateCursor(editor, e);
12557
12716
  }
12558
12717
  onArrow(e) {
12559
- if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
12560
- const move = { x: 0, y: 0 };
12718
+ const { editor } = this;
12719
+ if (editor.editing && editor.mergeConfig.keyEvent) {
12720
+ let x = 0, y = 0;
12561
12721
  const distance = e.shiftKey ? 10 : 1;
12562
12722
  switch (e.code) {
12563
12723
  case 'ArrowDown':
12564
- move.y = distance;
12724
+ y = distance;
12565
12725
  break;
12566
12726
  case 'ArrowUp':
12567
- move.y = -distance;
12727
+ y = -distance;
12568
12728
  break;
12569
12729
  case 'ArrowLeft':
12570
- move.x = -distance;
12730
+ x = -distance;
12571
12731
  break;
12572
12732
  case 'ArrowRight':
12573
- move.x = distance;
12733
+ x = distance;
12574
12734
  }
12575
- this.editor.move(move);
12735
+ if (x || y)
12736
+ editor.move(x, y);
12576
12737
  }
12577
12738
  }
12578
12739
  onDoubleTap(e) {
@@ -12638,22 +12799,32 @@ var LeaferUI = (function (exports) {
12638
12799
  }
12639
12800
  }
12640
12801
 
12802
+ const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
12641
12803
  class EditMask extends exports.UI {
12642
12804
  constructor(editor) {
12643
12805
  super();
12644
12806
  this.editor = editor;
12645
12807
  this.hittable = false;
12808
+ this.visible = 0;
12809
+ }
12810
+ __updateWorldBounds() {
12811
+ Object.assign(this.__local, bigBounds);
12812
+ Object.assign(this.__world, bigBounds);
12646
12813
  }
12647
12814
  __draw(canvas, options) {
12648
- const { editor } = this;
12649
- const { mask } = editor.mergeConfig;
12650
- if (mask && editor.list.length) {
12651
- const { rect } = editor.editBox;
12652
- const { width, height } = rect.__;
12653
- canvas.resetTransform();
12815
+ const { editor } = this, { mask } = editor.mergedConfig;
12816
+ if (mask && editor.editing) {
12654
12817
  canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
12655
- canvas.setWorld(rect.__world, options.matrix);
12656
- canvas.clearRect(0, 0, width, height);
12818
+ if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
12819
+ return;
12820
+ canvas.saveBlendMode('destination-out');
12821
+ editor.list.forEach(item => {
12822
+ item.__renderShape(canvas, options);
12823
+ const { __box, parent } = item;
12824
+ if ((item = __box) || ((item = parent) && parent.textBox))
12825
+ item.__renderShape(canvas, options);
12826
+ });
12827
+ canvas.restoreBlendMode();
12657
12828
  }
12658
12829
  }
12659
12830
  destroy() {
@@ -12956,22 +13127,6 @@ ${filterStyle}
12956
13127
  }
12957
13128
 
12958
13129
  class Editor extends exports.Group {
12959
- get mergeConfig() {
12960
- const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
12961
- if (element && element.editConfig)
12962
- Object.assign(mergeConfig, element.editConfig);
12963
- if (dragPoint) {
12964
- if (dragPoint.editConfig)
12965
- Object.assign(mergeConfig, dragPoint.editConfig);
12966
- if (mergeConfig.editSize === 'font-size')
12967
- mergeConfig.lockRatio = true;
12968
- if (dragPoint.pointType === 'resize-rotate') {
12969
- mergeConfig.around || (mergeConfig.around = 'center');
12970
- isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
12971
- }
12972
- }
12973
- return mergeConfig;
12974
- }
12975
13130
  get list() { return this.leafList.list; }
12976
13131
  get dragHoverExclude() { return [this.editBox.rect]; }
12977
13132
  get editing() { return !!this.list.length; }
@@ -12985,7 +13140,6 @@ ${filterStyle}
12985
13140
  get buttons() { return this.editBox.buttons; }
12986
13141
  constructor(userConfig, data) {
12987
13142
  super(data);
12988
- this.config = DataHelper.clone(config);
12989
13143
  this.leafList = new LeafList();
12990
13144
  this.openedGroupList = new LeafList();
12991
13145
  this.simulateTarget = new SimulateElement(this);
@@ -12994,8 +13148,10 @@ ${filterStyle}
12994
13148
  this.selector = new EditSelect(this);
12995
13149
  this.editMask = new EditMask(this);
12996
13150
  this.targetEventIds = [];
13151
+ let mergedConfig = DataHelper.clone(config);
12997
13152
  if (userConfig)
12998
- this.config = DataHelper.default(userConfig, this.config);
13153
+ mergedConfig = DataHelper.default(userConfig, mergedConfig);
13154
+ this.mergedConfig = this.config = mergedConfig;
12999
13155
  this.addMany(this.editMask, this.selector, this.editBox);
13000
13156
  if (!Plugin.has('resize'))
13001
13157
  this.config.editSize = 'scale';
@@ -13335,8 +13491,7 @@ ${filterStyle}
13335
13491
  }
13336
13492
  }
13337
13493
  emitInnerEvent(type) {
13338
- const { innerEditor } = this;
13339
- const { editTarget } = innerEditor;
13494
+ const { innerEditor } = this, { editTarget } = innerEditor;
13340
13495
  const event = new InnerEditorEvent(type, { editTarget, innerEditor });
13341
13496
  this.emitEvent(event);
13342
13497
  editTarget.emitEvent(event);
@@ -13361,25 +13516,40 @@ ${filterStyle}
13361
13516
  this.leafList.update();
13362
13517
  }
13363
13518
  }
13519
+ onAppRenderStart(app) {
13520
+ if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed))
13521
+ this.editBox.forceRender();
13522
+ }
13523
+ onRenderStart() {
13524
+ if (this.targetChanged)
13525
+ this.update();
13526
+ }
13527
+ onKey(e) {
13528
+ updateCursor(this, e);
13529
+ }
13364
13530
  listenTargetEvents() {
13365
13531
  if (!this.targetEventIds.length) {
13366
- const { app, leafer } = this;
13532
+ const { app, leafer, editBox, editMask } = this;
13367
13533
  this.targetEventIds = [
13368
- leafer.on_(RenderEvent.START, this.update, this),
13369
- app.on_(RenderEvent.CHILD_START, this.forceRender, this),
13534
+ leafer.on_(RenderEvent.START, this.onRenderStart, this),
13535
+ app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this),
13370
13536
  app.on_(exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
13371
13537
  app.on_(exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
13372
13538
  app.on_(exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
13373
- app.on_([exports.KeyEvent.HOLD, exports.KeyEvent.UP], (e) => { updateCursor(this, e); }),
13374
- app.on_(exports.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
13539
+ app.on_([exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, this),
13540
+ app.on_(exports.KeyEvent.DOWN, editBox.onArrow, editBox)
13375
13541
  ];
13542
+ if (editMask.visible)
13543
+ editMask.forceRender();
13376
13544
  }
13377
13545
  }
13378
13546
  removeTargetEvents() {
13379
- const { targetEventIds } = this;
13547
+ const { targetEventIds, editMask } = this;
13380
13548
  if (targetEventIds.length) {
13381
13549
  this.off_(targetEventIds);
13382
13550
  targetEventIds.length = 0;
13551
+ if (editMask.visible)
13552
+ editMask.forceRender();
13383
13553
  }
13384
13554
  }
13385
13555
  destroy() {
@@ -13393,6 +13563,9 @@ ${filterStyle}
13393
13563
  }
13394
13564
  }
13395
13565
  }
13566
+ __decorate([
13567
+ mergeConfigAttr()
13568
+ ], Editor.prototype, "mergeConfig", void 0);
13396
13569
  __decorate([
13397
13570
  targetAttr(onHover)
13398
13571
  ], Editor.prototype, "hoverTarget", void 0);
@@ -13457,9 +13630,7 @@ ${filterStyle}
13457
13630
  const { moveX, moveY, editor } = e;
13458
13631
  const { app, list } = editor;
13459
13632
  app.lockLayout();
13460
- list.forEach(target => {
13461
- target.moveWorld(moveX, moveY);
13462
- });
13633
+ list.forEach(target => { target.moveWorld(moveX, moveY); });
13463
13634
  app.unlockLayout();
13464
13635
  }
13465
13636
  onScale(e) {
@@ -13468,12 +13639,10 @@ ${filterStyle}
13468
13639
  app.lockLayout();
13469
13640
  list.forEach(target => {
13470
13641
  const resize = editor.getEditSize(target) !== 'scale';
13471
- if (transform) {
13642
+ if (transform)
13472
13643
  target.transformWorld(transform, resize);
13473
- }
13474
- else {
13644
+ else
13475
13645
  target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
13476
- }
13477
13646
  });
13478
13647
  app.unlockLayout();
13479
13648
  }
@@ -13483,12 +13652,10 @@ ${filterStyle}
13483
13652
  app.lockLayout();
13484
13653
  list.forEach(target => {
13485
13654
  const resize = editor.getEditSize(target) !== 'scale';
13486
- if (transform) {
13655
+ if (transform)
13487
13656
  target.transformWorld(transform, resize);
13488
- }
13489
- else {
13657
+ else
13490
13658
  target.rotateOfWorld(worldOrigin, rotation);
13491
- }
13492
13659
  });
13493
13660
  app.unlockLayout();
13494
13661
  }
@@ -13498,12 +13665,10 @@ ${filterStyle}
13498
13665
  app.lockLayout();
13499
13666
  list.forEach(target => {
13500
13667
  const resize = editor.getEditSize(target) !== 'scale';
13501
- if (transform) {
13668
+ if (transform)
13502
13669
  target.transformWorld(transform, resize);
13503
- }
13504
- else {
13670
+ else
13505
13671
  target.skewOfWorld(worldOrigin, skewX, skewY, resize);
13506
- }
13507
13672
  });
13508
13673
  app.unlockLayout();
13509
13674
  }
@@ -13791,16 +13956,21 @@ ${filterStyle}
13791
13956
  scaleResize(this, scaleX, scaleY);
13792
13957
  };
13793
13958
  leaf.resizeWidth = function (width) {
13794
- const scale = width / this.getBounds('box', 'local').width;
13959
+ const scale = width / this.getBounds('box', 'local').width || 1;
13795
13960
  this.scaleOf(this.__layout.boxBounds, scale, this.__.lockRatio ? scale : 1, true);
13796
13961
  };
13797
13962
  leaf.resizeHeight = function (height) {
13798
- const scale = height / this.getBounds('box', 'local').height;
13963
+ const scale = height / this.getBounds('box', 'local').height || 1;
13799
13964
  this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
13800
13965
  };
13801
13966
  exports.Text.prototype.__scaleResize = function (scaleX, scaleY) {
13802
13967
  const { app, editConfig } = this, editor = app && app.editor, dragPoint = editor && editor.dragPoint;
13803
- if (this.__.resizeFontSize || (editConfig && editConfig.editSize === 'font-size') || (dragPoint && editor.mergeConfig.editSize === 'font-size')) {
13968
+ const { __autoWidth, __autoHeight, textAlign, verticalAlign } = this.__, { boxBounds } = this.__layout;
13969
+ if (__autoWidth && textAlign !== 'left' && scaleX !== 1)
13970
+ this.x += boxBounds.x;
13971
+ if (__autoHeight && verticalAlign !== 'top' && scaleY !== 1)
13972
+ this.y += boxBounds.y;
13973
+ if (this.__.resizeFontSize || (editConfig && editConfig.editSize === 'font-size') || (dragPoint && editor.mergedConfig.editSize === 'font-size')) {
13804
13974
  scaleResizeFontSize(this, scaleX, scaleY, dragPoint && dragPoint.direction);
13805
13975
  }
13806
13976
  else {
@@ -14123,17 +14293,33 @@ ${filterStyle}
14123
14293
  this.transformer.transformEnd();
14124
14294
  };
14125
14295
  interaction.wheel = function (data) {
14126
- const { wheel } = this.config;
14296
+ const { wheel, pointer } = this.config, { posDeltaSpeed, negDeltaSpeed } = wheel;
14127
14297
  if (wheel.disabled)
14128
14298
  return;
14299
+ if (data.deltaX > 0)
14300
+ posDeltaSpeed && (data.deltaX *= posDeltaSpeed);
14301
+ else
14302
+ negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
14303
+ if (data.deltaY > 0)
14304
+ posDeltaSpeed && (data.deltaY *= posDeltaSpeed);
14305
+ else
14306
+ negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
14129
14307
  const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
14130
- scale !== 1 ? this.zoom(getZoomEventData(scale, data)) : this.move(getMoveEventData(wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel), data));
14308
+ if (scale !== 1)
14309
+ this.zoom(getZoomEventData(scale, data));
14310
+ else {
14311
+ const move = wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel);
14312
+ if (pointer.snap)
14313
+ PointHelper.round(move);
14314
+ this.move(getMoveEventData(move, data));
14315
+ }
14131
14316
  };
14132
14317
  interaction.multiTouch = function (data, list) {
14133
14318
  if (this.config.multiTouch.disabled)
14134
14319
  return;
14135
14320
  const { move, rotation, scale, center } = MultiTouchHelper.getData(list);
14136
14321
  Object.assign(data, center);
14322
+ this.pointerWaitCancel();
14137
14323
  this.rotate(getRotateEventData(rotation, data));
14138
14324
  this.zoom(getZoomEventData(scale, data));
14139
14325
  this.move(getMoveEventData(move, data));
@@ -15122,7 +15308,7 @@ ${filterStyle}
15122
15308
  const { editor } = this;
15123
15309
  const { config } = editor.app;
15124
15310
  const text = this.editTarget;
15125
- text.visible = false;
15311
+ text.textEditing = true;
15126
15312
  this.isHTMLText = !(text instanceof exports.Text);
15127
15313
  this._keyEvent = config.keyEvent;
15128
15314
  config.keyEvent = false;
@@ -15239,7 +15425,7 @@ ${filterStyle}
15239
15425
  const { editTarget: text, editor, editDom: dom } = this;
15240
15426
  if (text) {
15241
15427
  this.onInput();
15242
- text.visible = true;
15428
+ text.textEditing = undefined;
15243
15429
  if (editor.app)
15244
15430
  editor.app.config.keyEvent = this._keyEvent;
15245
15431
  editor.off_(this.eventIds);
@@ -15257,6 +15443,7 @@ ${filterStyle}
15257
15443
  ], exports.TextEditor);
15258
15444
 
15259
15445
  Plugin.add('text-editor', 'editor');
15446
+ exports.Text.addAttr('textEditing', false, surfaceType);
15260
15447
 
15261
15448
  class HTMLTextData extends ImageData {
15262
15449
  setText(value) {