@leafer-draw/miniapp 1.0.4 → 1.0.6

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.
@@ -552,6 +552,12 @@ const PointHelper = {
552
552
  to.y = t.y + sin$4(r) * distance;
553
553
  return to;
554
554
  },
555
+ toNumberPoints(originPoints) {
556
+ let points = originPoints;
557
+ if (typeof originPoints[0] === 'object')
558
+ points = [], originPoints.forEach(p => points.push(p.x, p.y));
559
+ return points;
560
+ },
555
561
  reset(t) {
556
562
  P$5.reset(t);
557
563
  }
@@ -1542,7 +1548,10 @@ const { assign } = DataHelper;
1542
1548
 
1543
1549
  class LeafData {
1544
1550
  get __useNaturalRatio() { return true; }
1545
- get __isLinePath() { return this.path && this.path.length === 6; }
1551
+ get __isLinePath() {
1552
+ const { path } = this;
1553
+ return path && path.length === 6 && path[0] === 1;
1554
+ }
1546
1555
  get __blendMode() {
1547
1556
  if (this.eraser && this.eraser !== 'path')
1548
1557
  return 'destination-out';
@@ -2305,11 +2314,12 @@ const RectHelper = {
2305
2314
 
2306
2315
  const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow } = Math;
2307
2316
  const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
2308
- const { set } = PointHelper;
2317
+ const { set, toNumberPoints } = PointHelper;
2309
2318
  const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
2310
2319
  const tempPoint$2 = {};
2311
2320
  const BezierHelper = {
2312
- points(data, points, curve, close) {
2321
+ points(data, originPoints, curve, close) {
2322
+ let points = toNumberPoints(originPoints);
2313
2323
  data.push(M$5, points[0], points[1]);
2314
2324
  if (curve && points.length > 5) {
2315
2325
  let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
@@ -2818,6 +2828,27 @@ const PathConvert = {
2818
2828
  }
2819
2829
  return data;
2820
2830
  },
2831
+ objectToCanvasData(list) {
2832
+ const data = [];
2833
+ list.forEach(item => {
2834
+ switch (item.name) {
2835
+ case 'M':
2836
+ data.push(M$4, item.x, item.y);
2837
+ break;
2838
+ case 'L':
2839
+ data.push(L$5, item.x, item.y);
2840
+ break;
2841
+ case 'C':
2842
+ data.push(C$4, item.x1, item.y1, item.x2, item.y2, item.x, item.y);
2843
+ break;
2844
+ case 'Q':
2845
+ data.push(Q$3, item.x1, item.y1, item.x, item.y);
2846
+ break;
2847
+ case 'Z': data.push(Z$4);
2848
+ }
2849
+ });
2850
+ return data;
2851
+ },
2821
2852
  copyData(data, old, index, count) {
2822
2853
  for (let i = index, end = index + count; i < end; i++) {
2823
2854
  data.push(old[i]);
@@ -4755,6 +4786,7 @@ class RenderEvent extends Event {
4755
4786
  }
4756
4787
  }
4757
4788
  RenderEvent.REQUEST = 'render.request';
4789
+ RenderEvent.CHILD_START = 'render.child_start';
4758
4790
  RenderEvent.START = 'render.start';
4759
4791
  RenderEvent.BEFORE = 'render.before';
4760
4792
  RenderEvent.RENDER = 'render';
@@ -4930,7 +4962,7 @@ const { isFinite } = Number;
4930
4962
  const debug$5 = Debug.get('setAttr');
4931
4963
  const LeafDataProxy = {
4932
4964
  __setAttr(name, newValue, checkFiniteNumber) {
4933
- if (this.leafer && this.leafer.created) {
4965
+ if (this.leaferIsCreated) {
4934
4966
  const oldValue = this.__.__getInput(name);
4935
4967
  if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
4936
4968
  debug$5.warn(this.innerName, name, newValue);
@@ -5002,7 +5034,7 @@ const LeafMatrix = {
5002
5034
 
5003
5035
  const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
5004
5036
  const { updateBounds: updateBounds$1 } = BranchHelper;
5005
- const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$4 } = BoundsHelper;
5037
+ const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
5006
5038
  const { toBounds: toBounds$2 } = PathBounds;
5007
5039
  const LeafBounds = {
5008
5040
  __updateWorldBounds() {
@@ -5085,7 +5117,7 @@ const LeafBounds = {
5085
5117
  const b = this.__layout.boxBounds;
5086
5118
  const data = this.__;
5087
5119
  if (data.__pathInputed) {
5088
- toBounds$2(data.__pathForRender, b);
5120
+ toBounds$2(data.path, b);
5089
5121
  }
5090
5122
  else {
5091
5123
  b.x = 0;
@@ -5097,7 +5129,7 @@ const LeafBounds = {
5097
5129
  __updateAutoLayout() {
5098
5130
  this.__layout.matrixChanged = true;
5099
5131
  if (this.isBranch) {
5100
- if (this.leafer && this.leafer.ready)
5132
+ if (this.leaferIsReady)
5101
5133
  this.leafer.layouter.addExtra(this);
5102
5134
  if (this.__.flow) {
5103
5135
  if (this.__layout.boxChanged)
@@ -5123,11 +5155,11 @@ const LeafBounds = {
5123
5155
  },
5124
5156
  __updateStrokeBounds() {
5125
5157
  const layout = this.__layout;
5126
- copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
5158
+ copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
5127
5159
  },
5128
5160
  __updateRenderBounds() {
5129
5161
  const layout = this.__layout;
5130
- layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
5162
+ layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
5131
5163
  }
5132
5164
  };
5133
5165
 
@@ -5158,7 +5190,7 @@ const LeafRender = {
5158
5190
  if (this.__worldOpacity) {
5159
5191
  canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
5160
5192
  this.__drawRenderPath(canvas);
5161
- this.__.windingRule ? canvas.clip(this.__.windingRule) : canvas.clip();
5193
+ this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
5162
5194
  }
5163
5195
  },
5164
5196
  __updateWorldOpacity() {
@@ -5232,6 +5264,8 @@ let Leaf = class Leaf {
5232
5264
  get innerName() { return this.__.name || this.tag + this.innerId; }
5233
5265
  get __DataProcessor() { return LeafData; }
5234
5266
  get __LayoutProcessor() { return LeafLayout; }
5267
+ get leaferIsCreated() { return this.leafer && this.leafer.created; }
5268
+ get leaferIsReady() { return this.leafer && this.leafer.ready; }
5235
5269
  get isLeafer() { return false; }
5236
5270
  get isBranch() { return false; }
5237
5271
  get isBranchLeaf() { return false; }
@@ -5673,10 +5707,17 @@ let Branch = class Branch extends Leaf {
5673
5707
  add(child, index) {
5674
5708
  if (child === this)
5675
5709
  return;
5710
+ const noIndex = index === undefined;
5711
+ if (!child.__) {
5712
+ if (child instanceof Array)
5713
+ return child.forEach(item => { this.add(item, index); noIndex || index++; });
5714
+ else
5715
+ child = UICreator.get(child.tag, child);
5716
+ }
5676
5717
  if (child.parent)
5677
5718
  child.parent.remove(child);
5678
5719
  child.parent = this;
5679
- index === undefined ? this.children.push(child) : this.children.splice(index, 0, child);
5720
+ noIndex ? this.children.push(child) : this.children.splice(index, 0, child);
5680
5721
  if (child.isBranch)
5681
5722
  this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
5682
5723
  child.__layout.boxChanged || child.__layout.boxChange();
@@ -5690,15 +5731,17 @@ let Branch = class Branch extends Leaf {
5690
5731
  }
5691
5732
  this.__layout.affectChildrenSort && this.__layout.childrenSortChange();
5692
5733
  }
5693
- addMany(...children) {
5694
- children.forEach(child => this.add(child));
5695
- }
5734
+ addMany(...children) { this.add(children); }
5696
5735
  remove(child, destroy) {
5697
5736
  if (child) {
5698
- if (child.animationOut)
5699
- child.__runAnimation('out', () => this.__remove(child, destroy));
5737
+ if (child.__) {
5738
+ if (child.animationOut)
5739
+ child.__runAnimation('out', () => this.__remove(child, destroy));
5740
+ else
5741
+ this.__remove(child, destroy);
5742
+ }
5700
5743
  else
5701
- this.__remove(child, destroy);
5744
+ this.find(child).forEach(item => this.remove(item, destroy));
5702
5745
  }
5703
5746
  else if (child === undefined) {
5704
5747
  super.remove(null, destroy);
@@ -5916,7 +5959,7 @@ class LeafLevelList {
5916
5959
  }
5917
5960
  }
5918
5961
 
5919
- const version = "1.0.4";
5962
+ const version = "1.0.6";
5920
5963
 
5921
5964
  class LeaferCanvas extends LeaferCanvasBase {
5922
5965
  get allowBackgroundColor() { return false; }
@@ -6522,6 +6565,7 @@ class Renderer {
6522
6565
  this.totalBounds = new Bounds();
6523
6566
  debug$3.log(target.innerName, '--->');
6524
6567
  try {
6568
+ target.app.emit(RenderEvent.CHILD_START, target);
6525
6569
  this.emitRender(RenderEvent.START);
6526
6570
  this.renderOnce(callback);
6527
6571
  this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6761,6 +6805,13 @@ function zoomLayerType() {
6761
6805
 
6762
6806
  const TextConvert = {};
6763
6807
  const ColorConvert = {};
6808
+ const UnitConvert = {
6809
+ number(value, percentRefer) {
6810
+ if (typeof value === 'object')
6811
+ return value.type === 'percent' ? value.value * percentRefer : value.value;
6812
+ return value;
6813
+ }
6814
+ };
6764
6815
  const PathArrow = {};
6765
6816
  const Paint = {};
6766
6817
  const PaintImage = {};
@@ -6781,7 +6832,7 @@ const Transition = {
6781
6832
  }
6782
6833
  };
6783
6834
 
6784
- const { parse } = PathConvert;
6835
+ const { parse, objectToCanvasData } = PathConvert;
6785
6836
  const emptyPaint = {};
6786
6837
  const debug$2 = Debug.get('UIData');
6787
6838
  class UIData extends LeafData {
@@ -6795,10 +6846,11 @@ class UIData extends LeafData {
6795
6846
  scaleX = -scaleX;
6796
6847
  return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
6797
6848
  }
6798
- else {
6849
+ else
6799
6850
  return strokeWidth;
6800
- }
6801
6851
  }
6852
+ get __hasStroke() { return this.stroke && this.strokeWidth; }
6853
+ get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
6802
6854
  get __autoWidth() { return !this._width; }
6803
6855
  get __autoHeight() { return !this._height; }
6804
6856
  get __autoSide() { return !this._width || !this._height; }
@@ -6815,9 +6867,8 @@ class UIData extends LeafData {
6815
6867
  this.__leaf.scaleX *= -1;
6816
6868
  debug$2.warn('width < 0, instead -scaleX ', this);
6817
6869
  }
6818
- else {
6870
+ else
6819
6871
  this._width = value;
6820
- }
6821
6872
  }
6822
6873
  setHeight(value) {
6823
6874
  if (value < 0) {
@@ -6825,9 +6876,8 @@ class UIData extends LeafData {
6825
6876
  this.__leaf.scaleY *= -1;
6826
6877
  debug$2.warn('height < 0, instead -scaleY', this);
6827
6878
  }
6828
- else {
6879
+ else
6829
6880
  this._height = value;
6830
- }
6831
6881
  }
6832
6882
  setFill(value) {
6833
6883
  if (this.__naturalWidth)
@@ -6868,9 +6918,10 @@ class UIData extends LeafData {
6868
6918
  }
6869
6919
  }
6870
6920
  setPath(value) {
6871
- if (typeof value === 'string') {
6921
+ const isString = typeof value === 'string';
6922
+ if (isString || (value && typeof value[0] === 'object')) {
6872
6923
  this.__setInput('path', value);
6873
- this._path = parse(value);
6924
+ this._path = isString ? parse(value) : objectToCanvasData(value);
6874
6925
  }
6875
6926
  else {
6876
6927
  if (this.__input)
@@ -6885,12 +6936,8 @@ class UIData extends LeafData {
6885
6936
  value = value.filter((item) => item.visible !== false);
6886
6937
  this._shadow = value.length ? value : null;
6887
6938
  }
6888
- else if (value) {
6889
- this._shadow = value.visible === false ? null : [value];
6890
- }
6891
- else {
6892
- this._shadow = null;
6893
- }
6939
+ else
6940
+ this._shadow = value && value.visible !== false ? [value] : null;
6894
6941
  }
6895
6942
  setInnerShadow(value) {
6896
6943
  this.__setInput('innerShadow', value);
@@ -6899,12 +6946,8 @@ class UIData extends LeafData {
6899
6946
  value = value.filter((item) => item.visible !== false);
6900
6947
  this._innerShadow = value.length ? value : null;
6901
6948
  }
6902
- else if (value) {
6903
- this._innerShadow = value.visible === false ? null : [value];
6904
- }
6905
- else {
6906
- this._innerShadow = null;
6907
- }
6949
+ else
6950
+ this._innerShadow = value && value.visible !== false ? [value] : null;
6908
6951
  }
6909
6952
  __computePaint() {
6910
6953
  const { fill, stroke } = this.__input;
@@ -6915,24 +6958,19 @@ class UIData extends LeafData {
6915
6958
  this.__needComputePaint = false;
6916
6959
  }
6917
6960
  }
6918
- const UnitConvert = {
6919
- number(value, percentRefer) {
6920
- if (typeof value === 'object')
6921
- return value.type === 'percent' ? value.value * percentRefer : value.value;
6922
- return value;
6923
- }
6924
- };
6925
6961
 
6926
6962
  class GroupData extends UIData {
6927
6963
  }
6928
6964
 
6929
6965
  class BoxData extends GroupData {
6930
6966
  get __boxStroke() { return !this.__pathInputed; }
6967
+ get __drawAfterFill() { return this.overflow === 'hide' && this.__clipAfterFill && this.__leaf.children.length; }
6968
+ get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
6931
6969
  }
6932
6970
 
6933
6971
  class LeaferData extends GroupData {
6934
- __getInputData() {
6935
- const data = super.__getInputData();
6972
+ __getInputData(names, options) {
6973
+ const data = super.__getInputData(names, options);
6936
6974
  canvasSizeAttrs.forEach(key => delete data[key]);
6937
6975
  return data;
6938
6976
  }
@@ -6959,6 +6997,7 @@ class StarData extends UIData {
6959
6997
  }
6960
6998
 
6961
6999
  class PathData extends UIData {
7000
+ get __pathInputed() { return 2; }
6962
7001
  }
6963
7002
 
6964
7003
  class PenData extends GroupData {
@@ -7005,16 +7044,18 @@ class ImageData extends RectData {
7005
7044
  delete data.fill;
7006
7045
  return data;
7007
7046
  }
7008
- __getInputData() {
7009
- const data = super.__getInputData();
7047
+ __getInputData(names, options) {
7048
+ const data = super.__getInputData(names, options);
7010
7049
  delete data.fill;
7011
7050
  return data;
7012
7051
  }
7013
7052
  }
7014
7053
 
7015
7054
  class CanvasData extends RectData {
7016
- __getInputData() {
7017
- const data = super.__getInputData();
7055
+ get __isCanvas() { return true; }
7056
+ get __drawAfterFill() { return true; }
7057
+ __getInputData(names, options) {
7058
+ const data = super.__getInputData(names, options);
7018
7059
  data.url = this.__leaf.canvas.toDataURL('image/png');
7019
7060
  return data;
7020
7061
  }
@@ -7041,16 +7082,12 @@ const UIBounds = {
7041
7082
  let width = 0;
7042
7083
  const { shadow, innerShadow, blur, backgroundBlur } = this.__;
7043
7084
  if (shadow)
7044
- shadow.forEach(item => {
7045
- width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5);
7046
- });
7085
+ shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
7047
7086
  if (blur)
7048
7087
  width = Math.max(width, blur);
7049
7088
  let shapeWidth = width = Math.ceil(width);
7050
7089
  if (innerShadow)
7051
- innerShadow.forEach(item => {
7052
- shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5);
7053
- });
7090
+ innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
7054
7091
  if (backgroundBlur)
7055
7092
  shapeWidth = Math.max(shapeWidth, backgroundBlur);
7056
7093
  this.__layout.renderShapeSpread = shapeWidth;
@@ -7132,6 +7169,16 @@ const UIRender = {
7132
7169
  if (stroke && !ignoreStroke)
7133
7170
  this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
7134
7171
  }
7172
+ },
7173
+ __drawAfterFill(canvas, options) {
7174
+ if (this.__.__clipAfterFill) {
7175
+ canvas.save();
7176
+ this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
7177
+ this.__drawContent(canvas, options);
7178
+ canvas.restore();
7179
+ }
7180
+ else
7181
+ this.__drawContent(canvas, options);
7135
7182
  }
7136
7183
  };
7137
7184
  function drawFast(ui, canvas, options) {
@@ -7198,8 +7245,8 @@ let UI = UI_1 = class UI extends Leaf {
7198
7245
  return pen;
7199
7246
  }
7200
7247
  get editConfig() { return undefined; }
7201
- get editOuter() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
7202
- get editInner() { return 'PathEditor'; }
7248
+ get editOuter() { return ''; }
7249
+ get editInner() { return ''; }
7203
7250
  constructor(data) {
7204
7251
  super(data);
7205
7252
  }
@@ -7210,9 +7257,8 @@ let UI = UI_1 = class UI extends Leaf {
7210
7257
  Object.assign(this, data);
7211
7258
  this.lockNormalStyle = false;
7212
7259
  }
7213
- else {
7260
+ else
7214
7261
  Object.assign(this, data);
7215
- }
7216
7262
  }
7217
7263
  get(name) {
7218
7264
  return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -7258,12 +7304,7 @@ let UI = UI_1 = class UI extends Leaf {
7258
7304
  this.__drawPathByData(canvas, this.__.path);
7259
7305
  }
7260
7306
  __drawPathByData(drawer, data) {
7261
- if (data) {
7262
- PathDrawer.drawPathByData(drawer, data);
7263
- }
7264
- else {
7265
- this.__drawPathByBox(drawer);
7266
- }
7307
+ data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
7267
7308
  }
7268
7309
  __drawPathByBox(drawer) {
7269
7310
  const { x, y, width, height } = this.__layout.boxBounds;
@@ -7271,9 +7312,8 @@ let UI = UI_1 = class UI extends Leaf {
7271
7312
  const { cornerRadius } = this.__;
7272
7313
  drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
7273
7314
  }
7274
- else {
7315
+ else
7275
7316
  drawer.rect(x, y, width, height);
7276
- }
7277
7317
  }
7278
7318
  animate(_keyframe, _options, _type, _isTemp) {
7279
7319
  return needPlugin('animate');
@@ -7520,23 +7560,13 @@ let Group = class Group extends UI {
7520
7560
  if (data.children) {
7521
7561
  const { children } = data;
7522
7562
  delete data.children;
7523
- if (!this.children) {
7524
- this.__setBranch();
7525
- }
7526
- else {
7527
- this.clear();
7528
- }
7563
+ this.children ? this.clear() : this.__setBranch();
7529
7564
  super.set(data, isTemp);
7530
- let child;
7531
- children.forEach(childData => {
7532
- child = childData.__ ? childData : UICreator.get(childData.tag, childData);
7533
- this.add(child);
7534
- });
7565
+ children.forEach(child => this.add(child));
7535
7566
  data.children = children;
7536
7567
  }
7537
- else {
7568
+ else
7538
7569
  super.set(data, isTemp);
7539
- }
7540
7570
  }
7541
7571
  toJSON(options) {
7542
7572
  const data = super.toJSON(options);
@@ -7956,10 +7986,9 @@ Rect = __decorate([
7956
7986
  registerUI()
7957
7987
  ], Rect);
7958
7988
 
7959
- const rect = Rect.prototype;
7960
- const group = Group.prototype;
7989
+ const { copy: copy$2, add, includes: includes$1 } = BoundsHelper;
7990
+ const rect = Rect.prototype, group = Group.prototype;
7961
7991
  const childrenRenderBounds = {};
7962
- const { copy: copy$2, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
7963
7992
  let Box = class Box extends Group {
7964
7993
  get __tag() { return 'Box'; }
7965
7994
  get isBranchLeaf() { return true; }
@@ -7969,37 +7998,31 @@ let Box = class Box extends Group {
7969
7998
  }
7970
7999
  __updateStrokeSpread() { return 0; }
7971
8000
  __updateRectRenderSpread() { return 0; }
7972
- __updateRenderSpread() {
7973
- return this.__updateRectRenderSpread() || -1;
7974
- }
8001
+ __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
7975
8002
  __updateRectBoxBounds() { }
7976
- __updateBoxBounds(secondLayout) {
8003
+ __updateBoxBounds(_secondLayout) {
7977
8004
  const data = this.__;
7978
8005
  if (this.children.length) {
7979
8006
  if (data.__autoSide) {
7980
- if (this.leafer && this.leafer.ready)
7981
- this.leafer.layouter.addExtra(this);
7982
8007
  super.__updateBoxBounds();
7983
8008
  const { boxBounds } = this.__layout;
7984
8009
  if (!data.__autoSize) {
7985
- if (data.__autoWidth)
7986
- boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0;
7987
- else
7988
- boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0;
8010
+ if (data.__autoWidth) {
8011
+ boxBounds.width += boxBounds.x, boxBounds.x = 0;
8012
+ boxBounds.height = data.height, boxBounds.y = 0;
8013
+ }
8014
+ else {
8015
+ boxBounds.height += boxBounds.y, boxBounds.y = 0;
8016
+ boxBounds.width = data.width, boxBounds.x = 0;
8017
+ }
7989
8018
  }
7990
- if (secondLayout && data.flow && data.padding)
7991
- copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
7992
8019
  this.__updateNaturalSize();
7993
8020
  }
7994
- else {
8021
+ else
7995
8022
  this.__updateRectBoxBounds();
7996
- }
7997
- if (data.flow)
7998
- this.__updateContentBounds();
7999
8023
  }
8000
- else {
8024
+ else
8001
8025
  this.__updateRectBoxBounds();
8002
- }
8003
8026
  }
8004
8027
  __updateStrokeBounds() { }
8005
8028
  __updateRenderBounds() {
@@ -8009,14 +8032,13 @@ let Box = class Box extends Group {
8009
8032
  super.__updateRenderBounds();
8010
8033
  copy$2(childrenRenderBounds, renderBounds);
8011
8034
  this.__updateRectRenderBounds();
8012
- isOverflow = !includes$1(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius;
8035
+ isOverflow = !includes$1(renderBounds, childrenRenderBounds);
8036
+ if (isOverflow && this.__.overflow !== 'hide')
8037
+ add(renderBounds, childrenRenderBounds);
8013
8038
  }
8014
- else {
8039
+ else
8015
8040
  this.__updateRectRenderBounds();
8016
- }
8017
- this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
8018
- if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow)
8019
- add(renderBounds, childrenRenderBounds);
8041
+ !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
8020
8042
  }
8021
8043
  __updateRectRenderBounds() { }
8022
8044
  __updateRectChange() { }
@@ -8036,20 +8058,9 @@ let Box = class Box extends Group {
8036
8058
  this.__renderGroup(canvas, options);
8037
8059
  }
8038
8060
  }
8039
- __drawAfterFill(canvas, options) {
8040
- const { length } = this.children;
8041
- if (this.isOverflow) {
8042
- canvas.save();
8043
- canvas.clip();
8044
- if (length)
8045
- this.__renderGroup(canvas, options);
8046
- canvas.restore();
8047
- }
8048
- else {
8049
- if (length)
8050
- this.__renderGroup(canvas, options);
8051
- }
8052
- if (this.__.stroke && length) {
8061
+ __drawContent(canvas, options) {
8062
+ this.__renderGroup(canvas, options);
8063
+ if (this.__.__hasStroke) {
8053
8064
  canvas.setWorld(this.__nowWorld);
8054
8065
  this.__drawRenderPath(canvas);
8055
8066
  }
@@ -8061,6 +8072,9 @@ __decorate([
8061
8072
  __decorate([
8062
8073
  dataType(false)
8063
8074
  ], Box.prototype, "resizeChildren", void 0);
8075
+ __decorate([
8076
+ dataType(false)
8077
+ ], Box.prototype, "textBox", void 0);
8064
8078
  __decorate([
8065
8079
  affectRenderBoundsType('show')
8066
8080
  ], Box.prototype, "overflow", void 0);
@@ -8210,17 +8224,15 @@ let Line = class Line extends UI {
8210
8224
  if (data.__useArrow)
8211
8225
  PathArrow.addArrows(this, false);
8212
8226
  }
8213
- else {
8227
+ else
8214
8228
  super.__updateRenderPath();
8215
- }
8216
8229
  }
8217
8230
  __updateBoxBounds() {
8218
8231
  if (this.points) {
8219
8232
  toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
8220
8233
  }
8221
- else {
8234
+ else
8222
8235
  super.__updateBoxBounds();
8223
- }
8224
8236
  }
8225
8237
  };
8226
8238
  __decorate([
@@ -8358,7 +8370,6 @@ let Canvas = class Canvas extends Rect {
8358
8370
  super(data);
8359
8371
  this.canvas = Creator.canvas(this.__);
8360
8372
  this.context = this.canvas.context;
8361
- this.__.__isCanvas = this.__.__drawAfterFill = true;
8362
8373
  if (data && data.url)
8363
8374
  this.drawImage(data.url);
8364
8375
  }
@@ -8371,8 +8382,7 @@ let Canvas = class Canvas extends Rect {
8371
8382
  });
8372
8383
  }
8373
8384
  draw(ui, offset, scale, rotation) {
8374
- ui.__layout.update();
8375
- const matrix = new Matrix(ui.__world).invert();
8385
+ const matrix = new Matrix(ui.worldTransform).invert();
8376
8386
  const m = new Matrix();
8377
8387
  if (offset)
8378
8388
  m.translate(offset.x, offset.y);
@@ -8387,17 +8397,9 @@ let Canvas = class Canvas extends Rect {
8387
8397
  paint() {
8388
8398
  this.forceRender();
8389
8399
  }
8390
- __drawAfterFill(canvas, _options) {
8391
- const { width, height, cornerRadius } = this.__, { view } = this.canvas;
8392
- if (cornerRadius || this.pathInputed) {
8393
- canvas.save();
8394
- canvas.clip();
8395
- canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
8396
- canvas.restore();
8397
- }
8398
- else {
8399
- canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
8400
- }
8400
+ __drawContent(canvas, _options) {
8401
+ const { width, height } = this.__, { view } = this.canvas;
8402
+ canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
8401
8403
  }
8402
8404
  __updateSize() {
8403
8405
  const { canvas } = this;
@@ -8441,7 +8443,6 @@ Canvas = __decorate([
8441
8443
  const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
8442
8444
  let Text = class Text extends UI {
8443
8445
  get __tag() { return 'Text'; }
8444
- get editInner() { return 'TextEditor'; }
8445
8446
  get textDrawData() {
8446
8447
  this.__layout.update();
8447
8448
  return this.__.__textDrawData;
@@ -8590,6 +8591,9 @@ __decorate([
8590
8591
  __decorate([
8591
8592
  boundsType('top')
8592
8593
  ], Text.prototype, "verticalAlign", void 0);
8594
+ __decorate([
8595
+ boundsType(true)
8596
+ ], Text.prototype, "autoSizeAlign", void 0);
8593
8597
  __decorate([
8594
8598
  boundsType('normal')
8595
8599
  ], Text.prototype, "textWrap", void 0);
@@ -8604,7 +8608,6 @@ let Path = class Path extends UI {
8604
8608
  get __tag() { return 'Path'; }
8605
8609
  constructor(data) {
8606
8610
  super(data);
8607
- this.__.__pathInputed = 2;
8608
8611
  }
8609
8612
  };
8610
8613
  __decorate([
@@ -9131,9 +9134,10 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
9131
9134
  onLoadError(ui, event, image.error);
9132
9135
  }
9133
9136
  else {
9134
- ignoreRender(ui, true);
9135
- if (firstUse)
9137
+ if (firstUse) {
9138
+ ignoreRender(ui, true);
9136
9139
  onLoad(ui, event);
9140
+ }
9137
9141
  leafPaint.loadId = image.load(() => {
9138
9142
  ignoreRender(ui, false);
9139
9143
  if (!ui.destroyed) {
@@ -9281,7 +9285,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
9281
9285
  }
9282
9286
  if (allowPaint) {
9283
9287
  canvas.save();
9284
- canvas.clip();
9288
+ ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
9285
9289
  if (paint.blendMode)
9286
9290
  canvas.blendMode = paint.blendMode;
9287
9291
  if (data.opacity)
@@ -9745,11 +9749,12 @@ const { trimRight } = TextRowHelper;
9745
9749
  const { Letter, Single, Before, After, Symbol, Break } = CharType;
9746
9750
  let word, row, wordWidth, rowWidth, realWidth;
9747
9751
  let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
9748
- let textDrawData, rows = [], bounds;
9752
+ let textDrawData, rows = [], bounds, findMaxWidth;
9749
9753
  function createRows(drawData, content, style) {
9750
9754
  textDrawData = drawData;
9751
9755
  rows = drawData.rows;
9752
9756
  bounds = drawData.bounds;
9757
+ findMaxWidth = !bounds.width && !style.autoSizeAlign;
9753
9758
  const { __letterSpacing, paraIndent, textCase } = style;
9754
9759
  const { canvas } = Platform;
9755
9760
  const { width, height } = bounds;
@@ -9834,7 +9839,10 @@ function createRows(drawData, content, style) {
9834
9839
  else {
9835
9840
  content.split('\n').forEach(content => {
9836
9841
  textDrawData.paraNumber++;
9837
- rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
9842
+ rowWidth = canvas.measureText(content).width;
9843
+ rows.push({ x: paraIndent || 0, text: content, width: rowWidth, paraStart: true });
9844
+ if (findMaxWidth)
9845
+ setMaxWidth();
9838
9846
  });
9839
9847
  }
9840
9848
  }
@@ -9865,10 +9873,16 @@ function addRow() {
9865
9873
  row.width = rowWidth;
9866
9874
  if (bounds.width)
9867
9875
  trimRight(row);
9876
+ else if (findMaxWidth)
9877
+ setMaxWidth();
9868
9878
  rows.push(row);
9869
9879
  row = { words: [] };
9870
9880
  rowWidth = 0;
9871
9881
  }
9882
+ function setMaxWidth() {
9883
+ if (rowWidth > (textDrawData.maxWidth || 0))
9884
+ textDrawData.maxWidth = rowWidth;
9885
+ }
9872
9886
 
9873
9887
  const CharMode = 0;
9874
9888
  const WordMode = 1;
@@ -9940,34 +9954,32 @@ function toChar(data, charX, rowData, isOverflow) {
9940
9954
 
9941
9955
  function layoutText(drawData, style) {
9942
9956
  const { rows, bounds } = drawData;
9943
- const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
9957
+ const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
9944
9958
  let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
9945
9959
  let starY = __baseLine;
9946
9960
  if (__clipText && realHeight > height) {
9947
9961
  realHeight = Math.max(height, __lineHeight);
9948
9962
  drawData.overflow = rows.length;
9949
9963
  }
9950
- else {
9964
+ else if (height || autoSizeAlign) {
9951
9965
  switch (verticalAlign) {
9952
9966
  case 'middle':
9953
9967
  y += (height - realHeight) / 2;
9954
9968
  break;
9955
- case 'bottom':
9956
- y += (height - realHeight);
9969
+ case 'bottom': y += (height - realHeight);
9957
9970
  }
9958
9971
  }
9959
9972
  starY += y;
9960
- let row, rowX, rowWidth;
9973
+ let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
9961
9974
  for (let i = 0, len = rows.length; i < len; i++) {
9962
9975
  row = rows[i];
9963
9976
  row.x = x;
9964
9977
  if (row.width < width || (row.width > width && !__clipText)) {
9965
9978
  switch (textAlign) {
9966
9979
  case 'center':
9967
- row.x += (width - row.width) / 2;
9980
+ row.x += (layoutWidth - row.width) / 2;
9968
9981
  break;
9969
- case 'right':
9970
- row.x += width - row.width;
9982
+ case 'right': row.x += layoutWidth - row.width;
9971
9983
  }
9972
9984
  }
9973
9985
  if (row.paraStart && paraSpacing && i > 0)
@@ -10072,14 +10084,14 @@ function getDrawData(content, style) {
10072
10084
  let height = style.__getInput('height') || 0;
10073
10085
  const { textDecoration, __font, __padding: padding } = style;
10074
10086
  if (padding) {
10075
- if (width) {
10087
+ if (width)
10088
+ x = padding[left], width -= (padding[right] + padding[left]);
10089
+ else if (!style.autoSizeAlign)
10076
10090
  x = padding[left];
10077
- width -= (padding[right] + padding[left]);
10078
- }
10079
- if (height) {
10091
+ if (height)
10092
+ y = padding[top], height -= (padding[top] + padding[bottom]);
10093
+ else if (!style.autoSizeAlign)
10080
10094
  y = padding[top];
10081
- height -= (padding[top] + padding[bottom]);
10082
- }
10083
10095
  }
10084
10096
  const drawData = {
10085
10097
  bounds: { x, y, width, height },
@@ -10099,22 +10111,20 @@ function getDrawData(content, style) {
10099
10111
  return drawData;
10100
10112
  }
10101
10113
  function padAutoText(padding, drawData, style, width, height) {
10102
- if (!width) {
10114
+ if (!width && style.autoSizeAlign) {
10103
10115
  switch (style.textAlign) {
10104
10116
  case 'left':
10105
10117
  offsetText(drawData, 'x', padding[left]);
10106
10118
  break;
10107
- case 'right':
10108
- offsetText(drawData, 'x', -padding[right]);
10119
+ case 'right': offsetText(drawData, 'x', -padding[right]);
10109
10120
  }
10110
10121
  }
10111
- if (!height) {
10122
+ if (!height && style.autoSizeAlign) {
10112
10123
  switch (style.verticalAlign) {
10113
10124
  case 'top':
10114
10125
  offsetText(drawData, 'y', padding[top]);
10115
10126
  break;
10116
- case 'bottom':
10117
- offsetText(drawData, 'y', -padding[bottom]);
10127
+ case 'bottom': offsetText(drawData, 'y', -padding[bottom]);
10118
10128
  }
10119
10129
  }
10120
10130
  }