@leafer-editor/worker 1.5.2 → 1.6.0

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 +480 -290
  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 +480 -290
  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.2";
6131
+ const version = "1.6.0";
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,13 @@ var LeaferUI = (function (exports) {
6536
6583
  requestLayout() {
6537
6584
  this.target.emit(LayoutEvent.REQUEST);
6538
6585
  }
6586
+ checkRender() {
6587
+ if (this.running) {
6588
+ if (this.changed && this.canvas.view)
6589
+ this.render();
6590
+ this.target.emit(RenderEvent.NEXT);
6591
+ }
6592
+ }
6539
6593
  render(callback) {
6540
6594
  if (!(this.running && this.canvas.view))
6541
6595
  return this.update();
@@ -6544,8 +6598,6 @@ var LeaferUI = (function (exports) {
6544
6598
  this.totalBounds = new Bounds();
6545
6599
  debug$6.log(target.innerName, '--->');
6546
6600
  try {
6547
- if (!target.isApp)
6548
- target.app.emit(RenderEvent.CHILD_START, target);
6549
6601
  this.emitRender(RenderEvent.START);
6550
6602
  this.renderOnce(callback);
6551
6603
  this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6613,20 +6665,12 @@ var LeaferUI = (function (exports) {
6613
6665
  }
6614
6666
  clipRender(block) {
6615
6667
  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);
6668
+ const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
6620
6669
  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);
6670
+ bounds.spread(Renderer.clipSpread).ceil();
6671
+ canvas.clearWorld(bounds, true);
6672
+ canvas.clipWorld(bounds, true);
6673
+ this.__render(bounds, block.includes(this.target.__world), realBounds);
6630
6674
  canvas.restore();
6631
6675
  Run.end(t);
6632
6676
  }
@@ -6640,23 +6684,17 @@ var LeaferUI = (function (exports) {
6640
6684
  Run.end(t);
6641
6685
  }
6642
6686
  __render(bounds, includes, realBounds) {
6643
- const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
6687
+ const { canvas } = this, options = includes ? { includes } : { bounds, includes };
6644
6688
  if (this.needFill)
6645
- this.canvas.fillWorld(bounds, this.config.fill);
6689
+ canvas.fillWorld(bounds, this.config.fill);
6646
6690
  if (Debug.showRepaint)
6647
- this.canvas.strokeWorld(bounds, 'red');
6648
- this.target.__render(this.canvas, options);
6691
+ Debug.drawRepaint(canvas, bounds);
6692
+ this.target.__render(canvas, options);
6649
6693
  this.renderBounds = realBounds = realBounds || bounds;
6650
6694
  this.renderOptions = options;
6651
6695
  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) { }
6696
+ canvas.updateRender(realBounds);
6697
+ }
6660
6698
  addBlock(block) {
6661
6699
  if (!this.updateBlocks)
6662
6700
  this.updateBlocks = [];
@@ -6672,17 +6710,24 @@ var LeaferUI = (function (exports) {
6672
6710
  }
6673
6711
  }
6674
6712
  __requestRender() {
6713
+ const target = this.target;
6714
+ if (target.parentApp)
6715
+ return target.parentApp.renderer.update(false);
6675
6716
  if (this.requestTime)
6676
6717
  return;
6677
6718
  const requestTime = this.requestTime = Date.now();
6678
6719
  Platform.requestRender(() => {
6679
6720
  this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
6680
6721
  this.requestTime = 0;
6681
- if (this.running) {
6682
- if (this.changed && this.canvas.view)
6683
- this.render();
6684
- this.target.emit(RenderEvent.NEXT);
6722
+ if (target.isApp) {
6723
+ target.emit(RenderEvent.CHILD_START, target);
6724
+ target.children.forEach(leafer => {
6725
+ leafer.renderer.FPS = this.FPS;
6726
+ leafer.renderer.checkRender();
6727
+ });
6728
+ target.emit(RenderEvent.CHILD_END, target);
6685
6729
  }
6730
+ this.checkRender();
6686
6731
  });
6687
6732
  }
6688
6733
  __onResize(e) {
@@ -6740,6 +6785,7 @@ var LeaferUI = (function (exports) {
6740
6785
  }
6741
6786
  }
6742
6787
  }
6788
+ Renderer.clipSpread = 10;
6743
6789
 
6744
6790
  const { hitRadiusPoint } = BoundsHelper;
6745
6791
  class Picker {
@@ -6985,6 +7031,7 @@ var LeaferUI = (function (exports) {
6985
7031
  return strokeWidth;
6986
7032
  }
6987
7033
  get __hasStroke() { return this.stroke && this.strokeWidth; }
7034
+ get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
6988
7035
  get __hasMultiPaint() {
6989
7036
  const t = this;
6990
7037
  if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
@@ -7029,14 +7076,14 @@ var LeaferUI = (function (exports) {
7029
7076
  this.__removeInput('fill');
7030
7077
  PaintImage.recycleImage('fill', this);
7031
7078
  this.__isFills = false;
7032
- if (this.__pixelFill)
7033
- this.__pixelFill = false;
7079
+ this.__pixelFill && (this.__pixelFill = false);
7034
7080
  }
7035
7081
  this._fill = value;
7036
7082
  }
7037
7083
  else if (typeof value === 'object') {
7038
7084
  this.__setInput('fill', value);
7039
- this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
7085
+ const layout = this.__leaf.__layout;
7086
+ layout.boxChanged || layout.boxChange();
7040
7087
  this.__isFills = true;
7041
7088
  this._fill || (this._fill = emptyPaint);
7042
7089
  }
@@ -7047,14 +7094,14 @@ var LeaferUI = (function (exports) {
7047
7094
  this.__removeInput('stroke');
7048
7095
  PaintImage.recycleImage('stroke', this);
7049
7096
  this.__isStrokes = false;
7050
- if (this.__pixelStroke)
7051
- this.__pixelStroke = false;
7097
+ this.__pixelStroke && (this.__pixelStroke = false);
7052
7098
  }
7053
7099
  this._stroke = value;
7054
7100
  }
7055
7101
  else if (typeof value === 'object') {
7056
7102
  this.__setInput('stroke', value);
7057
- this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
7103
+ const layout = this.__leaf.__layout;
7104
+ layout.boxChanged || layout.boxChange();
7058
7105
  this.__isStrokes = true;
7059
7106
  this._stroke || (this._stroke = emptyPaint);
7060
7107
  }
@@ -7169,6 +7216,31 @@ var LeaferUI = (function (exports) {
7169
7216
  this._fontWeight = value;
7170
7217
  }
7171
7218
  }
7219
+ setBoxStyle(value) {
7220
+ let t = this.__leaf, box = t.__box;
7221
+ if (value) {
7222
+ const { boxStyle } = this;
7223
+ if (box)
7224
+ for (let key in boxStyle)
7225
+ box[key] = undefined;
7226
+ else
7227
+ box = t.__box = UICreator.get('Rect', 0);
7228
+ const layout = t.__layout, boxLayout = box.__layout;
7229
+ if (!boxStyle)
7230
+ box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
7231
+ box.set(value);
7232
+ if (boxLayout.strokeChanged)
7233
+ layout.strokeChange();
7234
+ if (boxLayout.renderChanged)
7235
+ layout.renderChange();
7236
+ box.__updateChange();
7237
+ }
7238
+ else if (box) {
7239
+ t.__box = box.parent = null;
7240
+ box.destroy();
7241
+ }
7242
+ this._boxStyle = value;
7243
+ }
7172
7244
  }
7173
7245
 
7174
7246
  class ImageData extends RectData {
@@ -7206,7 +7278,7 @@ var LeaferUI = (function (exports) {
7206
7278
  const UIBounds = {
7207
7279
  __updateStrokeSpread() {
7208
7280
  let width = 0, boxWidth = 0;
7209
- const data = this.__, { strokeAlign, strokeWidth } = data;
7281
+ const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
7210
7282
  if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
7211
7283
  boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
7212
7284
  if (!data.__boxStroke) {
@@ -7217,6 +7289,10 @@ var LeaferUI = (function (exports) {
7217
7289
  }
7218
7290
  if (data.__useArrow)
7219
7291
  width += strokeWidth * 5;
7292
+ if (box) {
7293
+ width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
7294
+ boxWidth = box.__layout.strokeBoxSpread;
7295
+ }
7220
7296
  this.__layout.strokeBoxSpread = boxWidth;
7221
7297
  return width;
7222
7298
  },
@@ -7235,25 +7311,26 @@ var LeaferUI = (function (exports) {
7235
7311
  if (backgroundBlur)
7236
7312
  shapeWidth = Math.max(shapeWidth, backgroundBlur);
7237
7313
  this.__layout.renderShapeSpread = shapeWidth;
7238
- return width + (this.__layout.strokeSpread || 0);
7314
+ width += this.__layout.strokeSpread || 0;
7315
+ return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
7239
7316
  }
7240
7317
  };
7241
7318
 
7242
7319
  const UIRender = {
7243
7320
  __updateChange() {
7244
- const data = this.__;
7321
+ const data = this.__, w = this.__world;
7245
7322
  if (data.__useEffect) {
7246
7323
  const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
7247
7324
  data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
7248
7325
  }
7326
+ const half = data.__hasHalf;
7327
+ w.half !== half && (w.half = half);
7249
7328
  data.__checkSingle();
7250
7329
  const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
7251
- if (complex) {
7330
+ if (complex)
7252
7331
  data.__complex = true;
7253
- }
7254
- else {
7332
+ else
7255
7333
  data.__complex && (data.__complex = false);
7256
- }
7257
7334
  },
7258
7335
  __drawFast(canvas, options) {
7259
7336
  drawFast(this, canvas, options);
@@ -7340,10 +7417,11 @@ var LeaferUI = (function (exports) {
7340
7417
 
7341
7418
  const RectRender = {
7342
7419
  __drawFast(canvas, options) {
7343
- let { width, height, fill, stroke, __drawAfterFill } = this.__;
7420
+ let { x, y, width, height } = this.__layout.boxBounds;
7421
+ const { fill, stroke, __drawAfterFill } = this.__;
7344
7422
  if (fill) {
7345
7423
  canvas.fillStyle = fill;
7346
- canvas.fillRect(0, 0, width, height);
7424
+ canvas.fillRect(x, y, width, height);
7347
7425
  }
7348
7426
  if (__drawAfterFill)
7349
7427
  this.__drawAfterFill(canvas, options);
@@ -7362,14 +7440,14 @@ var LeaferUI = (function (exports) {
7362
7440
  if (width < 0 || height < 0) {
7363
7441
  canvas.save();
7364
7442
  this.__clip(canvas, options);
7365
- canvas.strokeRect(half, half, width, height);
7443
+ canvas.strokeRect(x + half, y + half, width, height);
7366
7444
  canvas.restore();
7367
7445
  }
7368
7446
  else
7369
- canvas.strokeRect(half, half, width, height);
7447
+ canvas.strokeRect(x + half, y + half, width, height);
7370
7448
  break;
7371
7449
  case 'outside':
7372
- canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
7450
+ canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
7373
7451
  break;
7374
7452
  }
7375
7453
  }
@@ -7525,6 +7603,12 @@ var LeaferUI = (function (exports) {
7525
7603
  __decorate([
7526
7604
  surfaceType(false)
7527
7605
  ], exports.UI.prototype, "locked", void 0);
7606
+ __decorate([
7607
+ surfaceType(false)
7608
+ ], exports.UI.prototype, "dim", void 0);
7609
+ __decorate([
7610
+ surfaceType(false)
7611
+ ], exports.UI.prototype, "dimskip", void 0);
7528
7612
  __decorate([
7529
7613
  sortType(0)
7530
7614
  ], exports.UI.prototype, "zIndex", void 0);
@@ -7786,7 +7870,7 @@ var LeaferUI = (function (exports) {
7786
7870
  start: true,
7787
7871
  hittable: true,
7788
7872
  smooth: true,
7789
- lazySpeard: 100
7873
+ lazySpeard: 100,
7790
7874
  };
7791
7875
  this.leafs = 0;
7792
7876
  this.__eventIds = [];
@@ -8210,13 +8294,13 @@ var LeaferUI = (function (exports) {
8210
8294
  super.__updateRenderBounds();
8211
8295
  copy$6(childrenRenderBounds, renderBounds);
8212
8296
  this.__updateRectRenderBounds();
8213
- isOverflow = !includes$1(renderBounds, childrenRenderBounds);
8297
+ isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
8214
8298
  if (isOverflow && this.__.overflow !== 'hide')
8215
8299
  add(renderBounds, childrenRenderBounds);
8216
8300
  }
8217
8301
  else
8218
8302
  this.__updateRectRenderBounds();
8219
- !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
8303
+ this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
8220
8304
  }
8221
8305
  __updateRectRenderBounds() { }
8222
8306
  __updateRectChange() { }
@@ -8624,33 +8708,13 @@ var LeaferUI = (function (exports) {
8624
8708
  registerUI()
8625
8709
  ], exports.Canvas);
8626
8710
 
8627
- const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
8711
+ const { copyAndSpread, includes, spread, setList } = BoundsHelper;
8628
8712
  exports.Text = class Text extends exports.UI {
8629
8713
  get __tag() { return 'Text'; }
8630
- get textDrawData() {
8631
- this.__layout.update();
8632
- return this.__.__textDrawData;
8633
- }
8714
+ get textDrawData() { this.updateLayout(); return this.__.__textDrawData; }
8634
8715
  constructor(data) {
8635
8716
  super(data);
8636
8717
  }
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
8718
  __updateTextDrawData() {
8655
8719
  const data = this.__;
8656
8720
  const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
@@ -8667,15 +8731,16 @@ var LeaferUI = (function (exports) {
8667
8731
  const layout = this.__layout;
8668
8732
  const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
8669
8733
  this.__updateTextDrawData();
8670
- const { bounds } = data.__textDrawData;
8734
+ const { bounds: contentBounds } = data.__textDrawData;
8671
8735
  const b = layout.boxBounds;
8736
+ layout.contentBounds = contentBounds;
8672
8737
  if (data.__lineHeight < fontSize)
8673
- spread(bounds, fontSize / 2);
8738
+ spread(contentBounds, fontSize / 2);
8674
8739
  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;
8740
+ b.x = autoWidth ? contentBounds.x : 0;
8741
+ b.y = autoHeight ? contentBounds.y : 0;
8742
+ b.width = autoWidth ? contentBounds.width : data.width;
8743
+ b.height = autoHeight ? contentBounds.height : data.height;
8679
8744
  if (padding) {
8680
8745
  const [top, right, bottom, left] = data.__padding;
8681
8746
  if (autoWidth)
@@ -8689,23 +8754,45 @@ var LeaferUI = (function (exports) {
8689
8754
  super.__updateBoxBounds();
8690
8755
  if (italic)
8691
8756
  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
- }
8757
+ const isOverflow = !includes(b, contentBounds) || undefined;
8758
+ if (isOverflow)
8759
+ setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
8698
8760
  else
8699
- data.__textBoxBounds = contentBounds;
8761
+ data.__textBoxBounds = b;
8762
+ this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
8763
+ }
8764
+ __onUpdateSize() {
8765
+ if (this.__box)
8766
+ this.__box.__onUpdateSize();
8767
+ super.__onUpdateSize();
8700
8768
  }
8701
8769
  __updateRenderSpread() {
8702
8770
  let width = super.__updateRenderSpread();
8703
8771
  if (!width)
8704
- width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1;
8772
+ width = this.isOverflow ? 1 : 0;
8705
8773
  return width;
8706
8774
  }
8707
8775
  __updateRenderBounds() {
8708
- copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
8776
+ const { renderBounds, renderSpread } = this.__layout;
8777
+ copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
8778
+ if (this.__box)
8779
+ this.__box.__layout.renderBounds = renderBounds;
8780
+ }
8781
+ __drawRenderPath(canvas) {
8782
+ canvas.font = this.__.__font;
8783
+ }
8784
+ __draw(canvas, options, originCanvas) {
8785
+ const box = this.__box;
8786
+ if (box)
8787
+ box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
8788
+ if (this.textEditing && !Export.running)
8789
+ return;
8790
+ super.__draw(canvas, options, originCanvas);
8791
+ }
8792
+ destroy() {
8793
+ if (this.boxStyle)
8794
+ this.boxStyle = null;
8795
+ super.destroy();
8709
8796
  }
8710
8797
  };
8711
8798
  __decorate([
@@ -8717,6 +8804,9 @@ var LeaferUI = (function (exports) {
8717
8804
  __decorate([
8718
8805
  boundsType(0)
8719
8806
  ], exports.Text.prototype, "height", void 0);
8807
+ __decorate([
8808
+ surfaceType()
8809
+ ], exports.Text.prototype, "boxStyle", void 0);
8720
8810
  __decorate([
8721
8811
  dataType(false)
8722
8812
  ], exports.Text.prototype, "resizeFontSize", void 0);
@@ -8880,26 +8970,25 @@ var LeaferUI = (function (exports) {
8880
8970
  this.leafer = this;
8881
8971
  this.watcher.disable();
8882
8972
  this.layouter.disable();
8883
- this.__eventIds.push(this.on_(PropertyEvent.CHANGE, this.__onPropertyChange, this));
8884
8973
  }
8885
8974
  start() {
8886
8975
  super.start();
8887
- this.children.forEach(leafer => leafer.start());
8976
+ this.forEach(leafer => leafer.start());
8888
8977
  }
8889
8978
  stop() {
8890
- this.children.forEach(leafer => leafer.stop());
8979
+ this.forEach(leafer => leafer.stop());
8891
8980
  super.stop();
8892
8981
  }
8893
8982
  unlockLayout() {
8894
8983
  super.unlockLayout();
8895
- this.children.forEach(leafer => leafer.unlockLayout());
8984
+ this.forEach(leafer => leafer.unlockLayout());
8896
8985
  }
8897
8986
  lockLayout() {
8898
8987
  super.lockLayout();
8899
- this.children.forEach(leafer => leafer.lockLayout());
8988
+ this.forEach(leafer => leafer.lockLayout());
8900
8989
  }
8901
8990
  forceRender(bounds, sync) {
8902
- this.children.forEach(leafer => leafer.forceRender(bounds, sync));
8991
+ this.forEach(leafer => leafer.forceRender(bounds, sync));
8903
8992
  }
8904
8993
  addLeafer(merge) {
8905
8994
  const leafer = new exports.Leafer(merge);
@@ -8919,9 +9008,8 @@ var LeaferUI = (function (exports) {
8919
9008
  leafer.canvas.childIndex = index;
8920
9009
  this.__listenChildEvents(leafer);
8921
9010
  }
8922
- __onPropertyChange() {
8923
- if (Debug.showHitView)
8924
- this.children.forEach(leafer => leafer.forceUpdate('surface'));
9011
+ forEach(fn) {
9012
+ this.children.forEach(fn);
8925
9013
  }
8926
9014
  __onCreated() {
8927
9015
  this.created = this.children.every(child => child.created);
@@ -8944,18 +9032,18 @@ var LeaferUI = (function (exports) {
8944
9032
  const m = options.matrix;
8945
9033
  if (m)
8946
9034
  canvas.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
8947
- this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
9035
+ this.forEach(leafer => canvas.copyWorld(leafer.canvas));
8948
9036
  }
8949
9037
  }
8950
9038
  __onResize(event) {
8951
- this.children.forEach(leafer => leafer.resize(event));
9039
+ this.forEach(leafer => leafer.resize(event));
8952
9040
  super.__onResize(event);
8953
9041
  }
8954
9042
  updateLayout() {
8955
- this.children.forEach(leafer => leafer.updateLayout());
9043
+ this.forEach(leafer => leafer.updateLayout());
8956
9044
  }
8957
9045
  __getChildConfig(userConfig) {
8958
- let config = Object.assign({}, this.config);
9046
+ const config = Object.assign({}, this.config);
8959
9047
  config.hittable = config.realCanvas = undefined;
8960
9048
  if (userConfig)
8961
9049
  DataHelper.assign(config, userConfig);
@@ -9514,6 +9602,7 @@ var LeaferUI = (function (exports) {
9514
9602
  delta: { x: 80 / 4, y: 8.0 },
9515
9603
  },
9516
9604
  pointer: {
9605
+ snap: true,
9517
9606
  hitRadius: 5,
9518
9607
  tapTime: 120,
9519
9608
  longPressTime: 800,
@@ -9608,7 +9697,7 @@ var LeaferUI = (function (exports) {
9608
9697
  if (this.downData) {
9609
9698
  const canDrag = PointHelper.getDistance(this.downData, data) > this.p.dragDistance;
9610
9699
  if (canDrag) {
9611
- if (this.waitTap)
9700
+ if (this.waitTap || this.longPressTimer)
9612
9701
  this.pointerWaitCancel();
9613
9702
  this.waitRightTap = false;
9614
9703
  }
@@ -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);
@@ -10001,25 +10093,26 @@ var LeaferUI = (function (exports) {
10001
10093
  const inner = {};
10002
10094
  const leaf$1 = exports.Leaf.prototype;
10003
10095
  leaf$1.__hitWorld = function (point) {
10004
- if (!this.__.hitSelf)
10096
+ const data = this.__;
10097
+ if (!data.hitSelf)
10005
10098
  return false;
10006
- if (this.__.hitRadius) {
10099
+ const world = this.__world, layout = this.__layout;
10100
+ const isSmall = world.width < 10 && world.height < 10;
10101
+ if (data.hitRadius) {
10007
10102
  copy$5(inner, point), point = inner;
10008
- setRadius(point, this.__.hitRadius);
10103
+ setRadius(point, data.hitRadius);
10009
10104
  }
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))
10105
+ toInnerRadiusPointOf(point, world, inner);
10106
+ if (data.hitBox || isSmall) {
10107
+ if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
10015
10108
  return true;
10016
10109
  if (isSmall)
10017
10110
  return false;
10018
10111
  }
10019
- if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
10112
+ if (layout.hitCanvasChanged || !this.__hitCanvas) {
10020
10113
  this.__updateHitCanvas();
10021
- if (!this.__layout.boundsChanged)
10022
- this.__layout.hitCanvasChanged = false;
10114
+ if (!layout.boundsChanged)
10115
+ layout.hitCanvasChanged = false;
10023
10116
  }
10024
10117
  return this.__hit(inner);
10025
10118
  };
@@ -10032,7 +10125,9 @@ var LeaferUI = (function (exports) {
10032
10125
  const matrix$2 = new Matrix();
10033
10126
  const ui$2 = exports.UI.prototype;
10034
10127
  ui$2.__updateHitCanvas = function () {
10035
- const data = this.__, { hitCanvasManager } = this.leafer;
10128
+ if (this.__box)
10129
+ this.__box.__updateHitCanvas();
10130
+ const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
10036
10131
  const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
10037
10132
  const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
10038
10133
  const isHitPixel = isHitPixelFill || isHitPixelStroke;
@@ -10059,6 +10154,8 @@ var LeaferUI = (function (exports) {
10059
10154
  h.setStrokeOptions(data);
10060
10155
  };
10061
10156
  ui$2.__hit = function (inner) {
10157
+ if (this.__box && this.__box.__hit(inner))
10158
+ return true;
10062
10159
  const data = this.__;
10063
10160
  if (data.__isHitPixel && this.__hitPixel(inner))
10064
10161
  return true;
@@ -10107,6 +10204,15 @@ var LeaferUI = (function (exports) {
10107
10204
  return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
10108
10205
  };
10109
10206
 
10207
+ exports.Text.prototype.__drawHitPath = function (canvas) {
10208
+ const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
10209
+ canvas.beginPath();
10210
+ if (__letterSpacing < 0)
10211
+ this.__drawPathByBox(canvas);
10212
+ else
10213
+ data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
10214
+ };
10215
+
10110
10216
  function getSelector$1(ui) {
10111
10217
  return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
10112
10218
  }
@@ -10489,9 +10595,11 @@ var LeaferUI = (function (exports) {
10489
10595
  const tempPoint = {};
10490
10596
  const tempScaleData = {};
10491
10597
  function createData(leafPaint, image, paint, box) {
10492
- const { blendMode, sync } = paint;
10598
+ const { blendMode, changeful, sync } = paint;
10493
10599
  if (blendMode)
10494
10600
  leafPaint.blendMode = blendMode;
10601
+ if (changeful)
10602
+ leafPaint.changeful = changeful;
10495
10603
  if (sync)
10496
10604
  leafPaint.sync = sync;
10497
10605
  leafPaint.data = getPatternData(paint, box, image);
@@ -10724,40 +10832,32 @@ var LeaferUI = (function (exports) {
10724
10832
  }
10725
10833
 
10726
10834
  const { abs: abs$2 } = Math;
10727
- function checkImage(ui, canvas, paint, allowPaint) {
10835
+ function checkImage(ui, canvas, paint, allowDraw) {
10728
10836
  const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
10729
- const { pixelRatio } = canvas;
10730
- if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
10837
+ const { pixelRatio } = canvas, { data } = paint;
10838
+ if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
10731
10839
  return false;
10732
10840
  }
10733
10841
  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;
10842
+ if (allowDraw) {
10843
+ if (data.repeat) {
10844
+ allowDraw = false;
10745
10845
  }
10746
10846
  else {
10747
- allowPaint = false;
10847
+ if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
10848
+ let { width, height } = data;
10849
+ width *= abs$2(scaleX) * pixelRatio;
10850
+ height *= abs$2(scaleY) * pixelRatio;
10851
+ if (data.scaleX) {
10852
+ width *= data.scaleX;
10853
+ height *= data.scaleY;
10854
+ }
10855
+ allowDraw = (width * height > Platform.image.maxCacheSize);
10856
+ }
10748
10857
  }
10749
10858
  }
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();
10859
+ if (allowDraw) {
10860
+ drawImage(ui, canvas, paint, data);
10761
10861
  return true;
10762
10862
  }
10763
10863
  else {
@@ -10778,13 +10878,26 @@ var LeaferUI = (function (exports) {
10778
10878
  }
10779
10879
  }
10780
10880
  }
10881
+ function drawImage(ui, canvas, paint, data) {
10882
+ canvas.save();
10883
+ ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
10884
+ if (paint.blendMode)
10885
+ canvas.blendMode = paint.blendMode;
10886
+ if (data.opacity)
10887
+ canvas.opacity *= data.opacity;
10888
+ if (data.transform)
10889
+ canvas.transform(data.transform);
10890
+ canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
10891
+ canvas.restore();
10892
+ }
10781
10893
 
10782
10894
  function recycleImage(attrName, data) {
10783
10895
  const paints = data['_' + attrName];
10784
10896
  if (paints instanceof Array) {
10785
- let image, recycleMap, input, url;
10897
+ let paint, image, recycleMap, input, url;
10786
10898
  for (let i = 0, len = paints.length; i < len; i++) {
10787
- image = paints[i].image;
10899
+ paint = paints[i];
10900
+ image = paint.image;
10788
10901
  url = image && image.url;
10789
10902
  if (url) {
10790
10903
  if (!recycleMap)
@@ -10799,8 +10912,6 @@ var LeaferUI = (function (exports) {
10799
10912
  }
10800
10913
  image.unload(paints[i].loadId, !input.some((item) => item.url === url));
10801
10914
  }
10802
- else
10803
- paints[i].style = null;
10804
10915
  }
10805
10916
  }
10806
10917
  return recycleMap;
@@ -10979,7 +11090,7 @@ var LeaferUI = (function (exports) {
10979
11090
  const offsetOutBounds = {};
10980
11091
  function innerShadow(ui, current, shape) {
10981
11092
  let copyBounds, spreadScale;
10982
- const { __nowWorld: nowWorld, __layout: __layout } = ui;
11093
+ const { __nowWorld: nowWorld, __layout } = ui;
10983
11094
  const { innerShadow } = ui.__;
10984
11095
  const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
10985
11096
  const other = current.getSameCanvas();
@@ -11709,15 +11820,52 @@ var LeaferUI = (function (exports) {
11709
11820
  set(value) {
11710
11821
  const old = this[privateKey];
11711
11822
  if (old !== value) {
11712
- const type = key === 'target' ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
11713
- if (this.hasEvent(type))
11714
- this.emitEvent(new EditorEvent(type, { editor: this, value: value, oldValue: old }));
11823
+ if (this.config) {
11824
+ const isSelect = key === 'target';
11825
+ if (isSelect) {
11826
+ if (value instanceof Array && value.length > 1 && value[0].locked)
11827
+ value.splice(0, 1);
11828
+ const { beforeSelect } = this.config;
11829
+ if (beforeSelect) {
11830
+ const check = beforeSelect({ target: value });
11831
+ if (typeof check === 'object')
11832
+ value = check;
11833
+ else if (check === false)
11834
+ return;
11835
+ }
11836
+ }
11837
+ const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
11838
+ if (this.hasEvent(type))
11839
+ this.emitEvent(new EditorEvent(type, { editor: this, value: value, oldValue: old }));
11840
+ }
11715
11841
  this[privateKey] = value, fn(this, old);
11716
11842
  }
11717
11843
  }
11718
11844
  });
11719
11845
  };
11720
11846
  }
11847
+ function mergeConfigAttr() {
11848
+ return (target, key) => {
11849
+ defineKey(target, key, {
11850
+ get() {
11851
+ const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
11852
+ if (element && element.editConfig)
11853
+ Object.assign(mergeConfig, element.editConfig);
11854
+ if (dragPoint) {
11855
+ if (dragPoint.editConfig)
11856
+ Object.assign(mergeConfig, dragPoint.editConfig);
11857
+ if (mergeConfig.editSize === 'font-size')
11858
+ mergeConfig.lockRatio = true;
11859
+ if (dragPoint.pointType === 'resize-rotate') {
11860
+ mergeConfig.around || (mergeConfig.around = 'center');
11861
+ isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
11862
+ }
11863
+ }
11864
+ return this.mergedConfig = mergeConfig;
11865
+ }
11866
+ });
11867
+ };
11868
+ }
11721
11869
 
11722
11870
  const { abs: abs$1 } = Math;
11723
11871
  const { copy: copy$2, scale: scale$1 } = MatrixHelper;
@@ -11729,6 +11877,7 @@ var LeaferUI = (function (exports) {
11729
11877
  constructor() {
11730
11878
  super();
11731
11879
  this.list = [];
11880
+ this.visible = 0;
11732
11881
  this.hittable = false;
11733
11882
  this.strokeAlign = 'center';
11734
11883
  }
@@ -11742,10 +11891,10 @@ var LeaferUI = (function (exports) {
11742
11891
  if (list.length) {
11743
11892
  setListWithFn(bounds$2, list, worldBounds);
11744
11893
  this.set(bounds$2);
11894
+ this.visible = true;
11745
11895
  }
11746
- else {
11747
- this.width = this.height = 1;
11748
- }
11896
+ else
11897
+ this.visible = 0;
11749
11898
  }
11750
11899
  __draw(canvas, options) {
11751
11900
  const { list } = this;
@@ -11757,8 +11906,9 @@ var LeaferUI = (function (exports) {
11757
11906
  const { worldTransform, worldRenderBounds } = leaf;
11758
11907
  if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
11759
11908
  const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
11909
+ copy$2(matrix$1, worldTransform);
11910
+ matrix$1.half = strokeWidth % 2;
11760
11911
  if (aScaleX !== aScaleY) {
11761
- copy$2(matrix$1, worldTransform);
11762
11912
  scale$1(matrix$1, 1 / aScaleX, 1 / aScaleY);
11763
11913
  canvas.setWorld(matrix$1, options.matrix);
11764
11914
  canvas.beginPath();
@@ -11767,7 +11917,7 @@ var LeaferUI = (function (exports) {
11767
11917
  canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
11768
11918
  }
11769
11919
  else {
11770
- canvas.setWorld(worldTransform, options.matrix);
11920
+ canvas.setWorld(matrix$1, options.matrix);
11771
11921
  canvas.beginPath();
11772
11922
  if (leaf.__.__useArrow)
11773
11923
  leaf.__drawPath(canvas);
@@ -11802,7 +11952,8 @@ var LeaferUI = (function (exports) {
11802
11952
  super(data);
11803
11953
  this.strokeArea = new exports.Rect({ strokeAlign: 'center' });
11804
11954
  this.fillArea = new exports.Rect();
11805
- this.visible = this.hittable = false;
11955
+ this.visible = 0;
11956
+ this.hittable = false;
11806
11957
  this.addMany(this.fillArea, this.strokeArea);
11807
11958
  }
11808
11959
  setStyle(style, userStyle) {
@@ -11999,7 +12150,7 @@ var LeaferUI = (function (exports) {
11999
12150
  if (e.multiTouch)
12000
12151
  return;
12001
12152
  if (this.dragging)
12002
- this.originList = null, this.selectArea.visible = false;
12153
+ this.originList = null, this.selectArea.visible = 0;
12003
12154
  }
12004
12155
  onAutoMove(e) {
12005
12156
  if (this.dragging) {
@@ -12147,8 +12298,11 @@ var LeaferUI = (function (exports) {
12147
12298
  scaleY = scaleY < 0 ? -scale : scale;
12148
12299
  }
12149
12300
  }
12150
- scaleX /= changedScaleX;
12151
- scaleY /= changedScaleY;
12301
+ const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
12302
+ if (useScaleX)
12303
+ scaleX /= changedScaleX;
12304
+ if (useScaleY)
12305
+ scaleY /= changedScaleY;
12152
12306
  if (!flipable) {
12153
12307
  const { worldTransform } = element;
12154
12308
  if (scaleX < 0)
@@ -12163,22 +12317,27 @@ var LeaferUI = (function (exports) {
12163
12317
  localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
12164
12318
  if (!BoundsHelper.includes(allowBounds, localBounds)) {
12165
12319
  const realBounds = localBounds.getIntersect(allowBounds);
12166
- scaleX *= realBounds.width / localBounds.width;
12167
- scaleY *= realBounds.height / localBounds.height;
12320
+ const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
12321
+ if (useScaleX)
12322
+ scaleX *= fitScaleX;
12323
+ if (useScaleY)
12324
+ scaleY *= fitScaleY;
12168
12325
  }
12169
12326
  }
12170
- if (widthRange) {
12327
+ if (useScaleX && widthRange) {
12171
12328
  const nowWidth = boxBounds.width * element.scaleX;
12172
12329
  scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
12173
12330
  }
12174
- if (heightRange) {
12331
+ if (useScaleY && heightRange) {
12175
12332
  const nowHeight = boxBounds.height * element.scaleY;
12176
12333
  scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
12177
12334
  }
12178
- if (Math.abs(scaleX * worldBoxBounds.width) < 1)
12335
+ if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
12179
12336
  scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
12180
- if (Math.abs(scaleY * worldBoxBounds.height) < 1)
12337
+ if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1)
12181
12338
  scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
12339
+ if (lockRatio && scaleX !== scaleY)
12340
+ scaleY = scaleX = Math.min(scaleX, scaleY);
12182
12341
  return { origin, scaleX, scaleY, direction, lockRatio, around };
12183
12342
  },
12184
12343
  getRotateData(bounds, direction, current, last, around) {
@@ -12349,7 +12508,7 @@ var LeaferUI = (function (exports) {
12349
12508
  this.view = new exports.Group();
12350
12509
  this.rect = new exports.Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
12351
12510
  this.circle = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 });
12352
- this.buttons = new exports.Group({ around: 'center', hitSelf: false });
12511
+ this.buttons = new exports.Group({ around: 'center', hitSelf: false, visible: 0 });
12353
12512
  this.resizePoints = [];
12354
12513
  this.rotatePoints = [];
12355
12514
  this.resizeLines = [];
@@ -12404,12 +12563,13 @@ var LeaferUI = (function (exports) {
12404
12563
  }
12405
12564
  }
12406
12565
  update(bounds) {
12407
- const { mergeConfig, element, multiple } = this.editor;
12408
- const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig;
12566
+ const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
12567
+ const { mergeConfig, element, multiple, editMask } = editor;
12568
+ const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
12409
12569
  this.visible = !element.locked;
12570
+ editMask.visible = mask ? true : 0;
12410
12571
  if (this.view.worldOpacity) {
12411
12572
  const { width, height } = bounds;
12412
- const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
12413
12573
  const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
12414
12574
  const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
12415
12575
  let point = {}, rotateP, resizeP, resizeL;
@@ -12444,10 +12604,12 @@ var LeaferUI = (function (exports) {
12444
12604
  if (rect.path)
12445
12605
  rect.path = null;
12446
12606
  rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
12447
- buttons.visible = showPoints && buttons.children.length > 0;
12607
+ buttons.visible = showPoints && buttons.children.length > 0 || 0;
12448
12608
  if (buttons.visible)
12449
12609
  this.layoutButtons(mergeConfig);
12450
12610
  }
12611
+ else
12612
+ rect.set(bounds);
12451
12613
  }
12452
12614
  layoutCircle(config) {
12453
12615
  const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
@@ -12510,7 +12672,7 @@ var LeaferUI = (function (exports) {
12510
12672
  }
12511
12673
  onDragStart(e) {
12512
12674
  this.dragging = true;
12513
- const point = this.dragPoint = e.current;
12675
+ const point = this.dragPoint = e.current, { pointType } = point;
12514
12676
  const { editor, dragStartData } = this, { element } = editor;
12515
12677
  if (point.name === 'rect') {
12516
12678
  this.moving = true;
@@ -12521,43 +12683,53 @@ var LeaferUI = (function (exports) {
12521
12683
  dragStartData.point = { x: element.x, y: element.y };
12522
12684
  dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
12523
12685
  dragStartData.rotation = element.rotation;
12686
+ if (pointType && pointType.includes('resize'))
12687
+ ResizeEvent.resizingKeys = editor.leafList.keys;
12524
12688
  }
12525
12689
  onDragEnd(e) {
12526
12690
  this.dragging = false;
12527
12691
  this.dragPoint = null;
12528
12692
  this.moving = false;
12529
- if (e.current.name === 'rect')
12693
+ const { name, pointType } = e.current;
12694
+ if (name === 'rect')
12530
12695
  this.editor.opacity = 1;
12696
+ if (pointType && pointType.includes('resize'))
12697
+ ResizeEvent.resizingKeys = null;
12531
12698
  }
12532
12699
  onDrag(e) {
12533
12700
  const { editor } = this;
12534
12701
  const { pointType } = this.enterPoint = e.current;
12535
- if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable)
12702
+ if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
12536
12703
  editor.onRotate(e);
12537
- if (pointType.includes('resize'))
12704
+ if (pointType === 'resize-rotate')
12705
+ editor.onScale(e);
12706
+ }
12707
+ else if (pointType === 'resize')
12538
12708
  editor.onScale(e);
12539
12709
  if (pointType === 'skew')
12540
12710
  editor.onSkew(e);
12541
12711
  updateCursor(editor, e);
12542
12712
  }
12543
12713
  onArrow(e) {
12544
- if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
12545
- const move = { x: 0, y: 0 };
12714
+ const { editor } = this;
12715
+ if (editor.editing && editor.mergeConfig.keyEvent) {
12716
+ let x = 0, y = 0;
12546
12717
  const distance = e.shiftKey ? 10 : 1;
12547
12718
  switch (e.code) {
12548
12719
  case 'ArrowDown':
12549
- move.y = distance;
12720
+ y = distance;
12550
12721
  break;
12551
12722
  case 'ArrowUp':
12552
- move.y = -distance;
12723
+ y = -distance;
12553
12724
  break;
12554
12725
  case 'ArrowLeft':
12555
- move.x = -distance;
12726
+ x = -distance;
12556
12727
  break;
12557
12728
  case 'ArrowRight':
12558
- move.x = distance;
12729
+ x = distance;
12559
12730
  }
12560
- this.editor.move(move);
12731
+ if (x || y)
12732
+ editor.move(x, y);
12561
12733
  }
12562
12734
  }
12563
12735
  onDoubleTap(e) {
@@ -12623,22 +12795,32 @@ var LeaferUI = (function (exports) {
12623
12795
  }
12624
12796
  }
12625
12797
 
12798
+ const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
12626
12799
  class EditMask extends exports.UI {
12627
12800
  constructor(editor) {
12628
12801
  super();
12629
12802
  this.editor = editor;
12630
12803
  this.hittable = false;
12804
+ this.visible = 0;
12805
+ }
12806
+ __updateWorldBounds() {
12807
+ Object.assign(this.__local, bigBounds);
12808
+ Object.assign(this.__world, bigBounds);
12631
12809
  }
12632
12810
  __draw(canvas, options) {
12633
- const { editor } = this;
12634
- const { mask } = editor.mergeConfig;
12635
- if (mask && editor.list.length) {
12636
- const { rect } = editor.editBox;
12637
- const { width, height } = rect.__;
12638
- canvas.resetTransform();
12811
+ const { editor } = this, { mask } = editor.mergedConfig;
12812
+ if (mask && editor.editing) {
12639
12813
  canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
12640
- canvas.setWorld(rect.__world, options.matrix);
12641
- canvas.clearRect(0, 0, width, height);
12814
+ if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
12815
+ return;
12816
+ canvas.saveBlendMode('destination-out');
12817
+ editor.list.forEach(item => {
12818
+ item.__renderShape(canvas, options);
12819
+ const { __box, parent } = item;
12820
+ if ((item = __box) || ((item = parent) && parent.textBox))
12821
+ item.__renderShape(canvas, options);
12822
+ });
12823
+ canvas.restoreBlendMode();
12642
12824
  }
12643
12825
  }
12644
12826
  destroy() {
@@ -12746,11 +12928,7 @@ ${filterStyle}
12746
12928
  function onTarget(editor, oldValue) {
12747
12929
  const { target } = editor;
12748
12930
  if (target) {
12749
- const { list } = editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
12750
- if (!list.every(checkEditable)) {
12751
- editor.target = list.filter(checkEditable);
12752
- return;
12753
- }
12931
+ editor.leafList = target instanceof LeafList ? target : new LeafList(target);
12754
12932
  if (editor.multiple)
12755
12933
  simulate(editor);
12756
12934
  }
@@ -12777,9 +12955,6 @@ ${filterStyle}
12777
12955
  function onHover(editor, oldValue) {
12778
12956
  editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
12779
12957
  }
12780
- function checkEditable(item) {
12781
- return item.editable && !item.locked;
12782
- }
12783
12958
 
12784
12959
  const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
12785
12960
  const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
@@ -12948,22 +13123,6 @@ ${filterStyle}
12948
13123
  }
12949
13124
 
12950
13125
  class Editor extends exports.Group {
12951
- get mergeConfig() {
12952
- const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
12953
- if (element && element.editConfig)
12954
- Object.assign(mergeConfig, element.editConfig);
12955
- if (dragPoint) {
12956
- if (dragPoint.editConfig)
12957
- Object.assign(mergeConfig, dragPoint.editConfig);
12958
- if (mergeConfig.editSize === 'font-size')
12959
- mergeConfig.lockRatio = true;
12960
- if (dragPoint.pointType === 'resize-rotate') {
12961
- mergeConfig.around || (mergeConfig.around = 'center');
12962
- isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
12963
- }
12964
- }
12965
- return mergeConfig;
12966
- }
12967
13126
  get list() { return this.leafList.list; }
12968
13127
  get dragHoverExclude() { return [this.editBox.rect]; }
12969
13128
  get editing() { return !!this.list.length; }
@@ -12977,7 +13136,6 @@ ${filterStyle}
12977
13136
  get buttons() { return this.editBox.buttons; }
12978
13137
  constructor(userConfig, data) {
12979
13138
  super(data);
12980
- this.config = DataHelper.clone(config);
12981
13139
  this.leafList = new LeafList();
12982
13140
  this.openedGroupList = new LeafList();
12983
13141
  this.simulateTarget = new SimulateElement(this);
@@ -12986,8 +13144,10 @@ ${filterStyle}
12986
13144
  this.selector = new EditSelect(this);
12987
13145
  this.editMask = new EditMask(this);
12988
13146
  this.targetEventIds = [];
13147
+ let mergedConfig = DataHelper.clone(config);
12989
13148
  if (userConfig)
12990
- this.config = DataHelper.default(userConfig, this.config);
13149
+ mergedConfig = DataHelper.default(userConfig, mergedConfig);
13150
+ this.mergedConfig = this.config = mergedConfig;
12991
13151
  this.addMany(this.editMask, this.selector, this.editBox);
12992
13152
  if (!Plugin.has('resize'))
12993
13153
  this.config.editSize = 'scale';
@@ -13327,8 +13487,7 @@ ${filterStyle}
13327
13487
  }
13328
13488
  }
13329
13489
  emitInnerEvent(type) {
13330
- const { innerEditor } = this;
13331
- const { editTarget } = innerEditor;
13490
+ const { innerEditor } = this, { editTarget } = innerEditor;
13332
13491
  const event = new InnerEditorEvent(type, { editTarget, innerEditor });
13333
13492
  this.emitEvent(event);
13334
13493
  editTarget.emitEvent(event);
@@ -13353,25 +13512,40 @@ ${filterStyle}
13353
13512
  this.leafList.update();
13354
13513
  }
13355
13514
  }
13515
+ onAppRenderStart(app) {
13516
+ if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed))
13517
+ this.editBox.forceRender();
13518
+ }
13519
+ onRenderStart() {
13520
+ if (this.targetChanged)
13521
+ this.update();
13522
+ }
13523
+ onKey(e) {
13524
+ updateCursor(this, e);
13525
+ }
13356
13526
  listenTargetEvents() {
13357
13527
  if (!this.targetEventIds.length) {
13358
- const { app, leafer } = this;
13528
+ const { app, leafer, editBox, editMask } = this;
13359
13529
  this.targetEventIds = [
13360
- leafer.on_(RenderEvent.START, this.update, this),
13361
- app.on_(RenderEvent.CHILD_START, this.forceRender, this),
13530
+ leafer.on_(RenderEvent.START, this.onRenderStart, this),
13531
+ app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this),
13362
13532
  app.on_(exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
13363
13533
  app.on_(exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
13364
13534
  app.on_(exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
13365
- app.on_([exports.KeyEvent.HOLD, exports.KeyEvent.UP], (e) => { updateCursor(this, e); }),
13366
- app.on_(exports.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
13535
+ app.on_([exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, this),
13536
+ app.on_(exports.KeyEvent.DOWN, editBox.onArrow, editBox)
13367
13537
  ];
13538
+ if (editMask.visible)
13539
+ editMask.forceRender();
13368
13540
  }
13369
13541
  }
13370
13542
  removeTargetEvents() {
13371
- const { targetEventIds } = this;
13543
+ const { targetEventIds, editMask } = this;
13372
13544
  if (targetEventIds.length) {
13373
13545
  this.off_(targetEventIds);
13374
13546
  targetEventIds.length = 0;
13547
+ if (editMask.visible)
13548
+ editMask.forceRender();
13375
13549
  }
13376
13550
  }
13377
13551
  destroy() {
@@ -13385,6 +13559,9 @@ ${filterStyle}
13385
13559
  }
13386
13560
  }
13387
13561
  }
13562
+ __decorate([
13563
+ mergeConfigAttr()
13564
+ ], Editor.prototype, "mergeConfig", void 0);
13388
13565
  __decorate([
13389
13566
  targetAttr(onHover)
13390
13567
  ], Editor.prototype, "hoverTarget", void 0);
@@ -13449,9 +13626,7 @@ ${filterStyle}
13449
13626
  const { moveX, moveY, editor } = e;
13450
13627
  const { app, list } = editor;
13451
13628
  app.lockLayout();
13452
- list.forEach(target => {
13453
- target.moveWorld(moveX, moveY);
13454
- });
13629
+ list.forEach(target => { target.moveWorld(moveX, moveY); });
13455
13630
  app.unlockLayout();
13456
13631
  }
13457
13632
  onScale(e) {
@@ -13460,12 +13635,10 @@ ${filterStyle}
13460
13635
  app.lockLayout();
13461
13636
  list.forEach(target => {
13462
13637
  const resize = editor.getEditSize(target) !== 'scale';
13463
- if (transform) {
13638
+ if (transform)
13464
13639
  target.transformWorld(transform, resize);
13465
- }
13466
- else {
13640
+ else
13467
13641
  target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
13468
- }
13469
13642
  });
13470
13643
  app.unlockLayout();
13471
13644
  }
@@ -13475,12 +13648,10 @@ ${filterStyle}
13475
13648
  app.lockLayout();
13476
13649
  list.forEach(target => {
13477
13650
  const resize = editor.getEditSize(target) !== 'scale';
13478
- if (transform) {
13651
+ if (transform)
13479
13652
  target.transformWorld(transform, resize);
13480
- }
13481
- else {
13653
+ else
13482
13654
  target.rotateOfWorld(worldOrigin, rotation);
13483
- }
13484
13655
  });
13485
13656
  app.unlockLayout();
13486
13657
  }
@@ -13490,12 +13661,10 @@ ${filterStyle}
13490
13661
  app.lockLayout();
13491
13662
  list.forEach(target => {
13492
13663
  const resize = editor.getEditSize(target) !== 'scale';
13493
- if (transform) {
13664
+ if (transform)
13494
13665
  target.transformWorld(transform, resize);
13495
- }
13496
- else {
13666
+ else
13497
13667
  target.skewOfWorld(worldOrigin, skewX, skewY, resize);
13498
- }
13499
13668
  });
13500
13669
  app.unlockLayout();
13501
13670
  }
@@ -13783,16 +13952,21 @@ ${filterStyle}
13783
13952
  scaleResize(this, scaleX, scaleY);
13784
13953
  };
13785
13954
  leaf.resizeWidth = function (width) {
13786
- const scale = width / this.getBounds('box', 'local').width;
13955
+ const scale = width / this.getBounds('box', 'local').width || 1;
13787
13956
  this.scaleOf(this.__layout.boxBounds, scale, this.__.lockRatio ? scale : 1, true);
13788
13957
  };
13789
13958
  leaf.resizeHeight = function (height) {
13790
- const scale = height / this.getBounds('box', 'local').height;
13959
+ const scale = height / this.getBounds('box', 'local').height || 1;
13791
13960
  this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
13792
13961
  };
13793
13962
  exports.Text.prototype.__scaleResize = function (scaleX, scaleY) {
13794
13963
  const { app, editConfig } = this, editor = app && app.editor, dragPoint = editor && editor.dragPoint;
13795
- if (this.__.resizeFontSize || (editConfig && editConfig.editSize === 'font-size') || (dragPoint && editor.mergeConfig.editSize === 'font-size')) {
13964
+ const { __autoWidth, __autoHeight, textAlign, verticalAlign } = this.__, { boxBounds } = this.__layout;
13965
+ if (__autoWidth && textAlign !== 'left' && scaleX !== 1)
13966
+ this.x += boxBounds.x;
13967
+ if (__autoHeight && verticalAlign !== 'top' && scaleY !== 1)
13968
+ this.y += boxBounds.y;
13969
+ if (this.__.resizeFontSize || (editConfig && editConfig.editSize === 'font-size') || (dragPoint && editor.mergedConfig.editSize === 'font-size')) {
13796
13970
  scaleResizeFontSize(this, scaleX, scaleY, dragPoint && dragPoint.direction);
13797
13971
  }
13798
13972
  else {
@@ -14115,11 +14289,26 @@ ${filterStyle}
14115
14289
  this.transformer.transformEnd();
14116
14290
  };
14117
14291
  interaction.wheel = function (data) {
14118
- const { wheel } = this.config;
14292
+ const { wheel, pointer } = this.config, { posDeltaSpeed, negDeltaSpeed } = wheel;
14119
14293
  if (wheel.disabled)
14120
14294
  return;
14295
+ if (data.deltaX > 0)
14296
+ posDeltaSpeed && (data.deltaX *= posDeltaSpeed);
14297
+ else
14298
+ negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
14299
+ if (data.deltaY > 0)
14300
+ posDeltaSpeed && (data.deltaY *= posDeltaSpeed);
14301
+ else
14302
+ negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
14121
14303
  const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
14122
- scale !== 1 ? this.zoom(getZoomEventData(scale, data)) : this.move(getMoveEventData(wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel), data));
14304
+ if (scale !== 1)
14305
+ this.zoom(getZoomEventData(scale, data));
14306
+ else {
14307
+ const move = wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel);
14308
+ if (pointer.snap)
14309
+ PointHelper.round(move);
14310
+ this.move(getMoveEventData(move, data));
14311
+ }
14123
14312
  };
14124
14313
  interaction.multiTouch = function (data, list) {
14125
14314
  if (this.config.multiTouch.disabled)
@@ -15114,7 +15303,7 @@ ${filterStyle}
15114
15303
  const { editor } = this;
15115
15304
  const { config } = editor.app;
15116
15305
  const text = this.editTarget;
15117
- text.visible = false;
15306
+ text.textEditing = true;
15118
15307
  this.isHTMLText = !(text instanceof exports.Text);
15119
15308
  this._keyEvent = config.keyEvent;
15120
15309
  config.keyEvent = false;
@@ -15231,7 +15420,7 @@ ${filterStyle}
15231
15420
  const { editTarget: text, editor, editDom: dom } = this;
15232
15421
  if (text) {
15233
15422
  this.onInput();
15234
- text.visible = true;
15423
+ text.textEditing = undefined;
15235
15424
  if (editor.app)
15236
15425
  editor.app.config.keyEvent = this._keyEvent;
15237
15426
  editor.off_(this.eventIds);
@@ -15249,6 +15438,7 @@ ${filterStyle}
15249
15438
  ], exports.TextEditor);
15250
15439
 
15251
15440
  Plugin.add('text-editor', 'editor');
15441
+ exports.Text.addAttr('textEditing', false, surfaceType);
15252
15442
 
15253
15443
  class HTMLTextData extends ImageData {
15254
15444
  setText(value) {