leafer-ui 2.0.9 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -88
- package/dist/web.cjs +26 -16
- package/dist/web.esm.js +26 -16
- package/dist/web.esm.min.js +1 -1
- package/dist/web.esm.min.js.map +1 -1
- package/dist/web.js +51 -28
- package/dist/web.min.cjs +1 -1
- package/dist/web.min.cjs.map +1 -1
- package/dist/web.min.js +1 -1
- package/dist/web.min.js.map +1 -1
- package/dist/web.module.js +51 -28
- package/dist/web.module.min.js +1 -1
- package/dist/web.module.min.js.map +1 -1
- package/package.json +11 -11
- package/README-CN.md +0 -394
package/dist/web.module.js
CHANGED
|
@@ -3082,7 +3082,7 @@ const PathConvert = {
|
|
|
3082
3082
|
case M$4:
|
|
3083
3083
|
x = old[i + 1];
|
|
3084
3084
|
y = old[i + 2];
|
|
3085
|
-
data.push(M$4, x, y);
|
|
3085
|
+
data.push(lastCommand === command ? L$5 : M$4, x, y);
|
|
3086
3086
|
i += 3;
|
|
3087
3087
|
break;
|
|
3088
3088
|
|
|
@@ -6075,12 +6075,13 @@ const LeafBounds = {
|
|
|
6075
6075
|
if (this.__hasWorldEvent) BoundsEvent.emitWorld(this);
|
|
6076
6076
|
},
|
|
6077
6077
|
__updateLocalBounds() {
|
|
6078
|
-
const layout = this.__layout;
|
|
6078
|
+
const layout = this.__layout, data = this.__;
|
|
6079
6079
|
if (layout.boxChanged) {
|
|
6080
|
-
if (!
|
|
6080
|
+
if (!data.__pathInputed) this.__updatePath();
|
|
6081
6081
|
this.__updateRenderPath();
|
|
6082
6082
|
this.__updateBoxBounds();
|
|
6083
6083
|
layout.resized = "inner";
|
|
6084
|
+
if (data.__strokeGeometry) data.__strokeGeometry = undefined;
|
|
6084
6085
|
}
|
|
6085
6086
|
if (layout.localBoxChanged) {
|
|
6086
6087
|
if (this.__local) this.__updateLocalBoxBounds();
|
|
@@ -6103,6 +6104,7 @@ const LeafBounds = {
|
|
|
6103
6104
|
if (layout.renderSpread || layout.strokeSpread !== layout.strokeBoxSpread) layout.renderChanged = true;
|
|
6104
6105
|
if (this.parent) this.parent.__layout.strokeChange();
|
|
6105
6106
|
layout.resized = "inner";
|
|
6107
|
+
if (data.__strokeGeometry) data.__strokeGeometry = undefined;
|
|
6106
6108
|
}
|
|
6107
6109
|
if (layout.renderChanged) {
|
|
6108
6110
|
layout.renderSpread = this.__updateRenderSpread();
|
|
@@ -7079,7 +7081,7 @@ class LeafLevelList {
|
|
|
7079
7081
|
}
|
|
7080
7082
|
}
|
|
7081
7083
|
|
|
7082
|
-
const version = "2.
|
|
7084
|
+
const version = "2.1.1";
|
|
7083
7085
|
|
|
7084
7086
|
const debug$5 = Debug.get("LeaferCanvas");
|
|
7085
7087
|
|
|
@@ -8279,8 +8281,8 @@ class UIData extends LeafData {
|
|
|
8279
8281
|
return this.__getRealStrokeWidth();
|
|
8280
8282
|
}
|
|
8281
8283
|
get __maxStrokeWidth() {
|
|
8282
|
-
const t = this;
|
|
8283
|
-
return t.__hasMultiStrokeStyle ? Math.max(t.__hasMultiStrokeStyle,
|
|
8284
|
+
const t = this, strokeWidth = t.__hasStrokeSides || t.strokeWidth;
|
|
8285
|
+
return t.__hasMultiStrokeStyle ? Math.max(t.__hasMultiStrokeStyle, strokeWidth) : strokeWidth;
|
|
8284
8286
|
}
|
|
8285
8287
|
get __hasMultiPaint() {
|
|
8286
8288
|
const t = this;
|
|
@@ -8348,7 +8350,7 @@ class UIData extends LeafData {
|
|
|
8348
8350
|
const isStr = isString(value);
|
|
8349
8351
|
if (isStr || value && isObject(value[0])) {
|
|
8350
8352
|
this.__setInput("path", value);
|
|
8351
|
-
this._path = isStr ? parse(value) : objectToCanvasData(value);
|
|
8353
|
+
this._path = isStr ? parse(value, this.__useArrow) : objectToCanvasData(value);
|
|
8352
8354
|
} else {
|
|
8353
8355
|
if (this.__input) this.__removeInput("path");
|
|
8354
8356
|
this._path = value;
|
|
@@ -8381,6 +8383,10 @@ class UIData extends LeafData {
|
|
|
8381
8383
|
}
|
|
8382
8384
|
return strokeWidth;
|
|
8383
8385
|
}
|
|
8386
|
+
__checkComplex() {
|
|
8387
|
+
const t = this;
|
|
8388
|
+
stintSet$3(t, "__complex", t.__isFills || t.__isStrokes || t.cornerRadius || t.__useEffect);
|
|
8389
|
+
}
|
|
8384
8390
|
__setPaint(attrName, value) {
|
|
8385
8391
|
this.__setInput(attrName, value);
|
|
8386
8392
|
const layout = this.__leaf.__layout;
|
|
@@ -8459,7 +8465,11 @@ class EllipseData extends UIData {
|
|
|
8459
8465
|
}
|
|
8460
8466
|
}
|
|
8461
8467
|
|
|
8462
|
-
class PolygonData extends
|
|
8468
|
+
class PolygonData extends UIData {
|
|
8469
|
+
get __usePathBox() {
|
|
8470
|
+
return this.points || this.__pathInputed;
|
|
8471
|
+
}
|
|
8472
|
+
}
|
|
8463
8473
|
|
|
8464
8474
|
class StarData extends UIData {
|
|
8465
8475
|
get __boxStroke() {
|
|
@@ -8570,7 +8580,7 @@ const UIBounds = {
|
|
|
8570
8580
|
if ((data.stroke || data.hitStroke === "all") && strokeWidth && strokeAlign !== "inside") {
|
|
8571
8581
|
boxSpread = spread = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
|
|
8572
8582
|
if (!data.__boxStroke || data.__useArrow) {
|
|
8573
|
-
const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * spread;
|
|
8583
|
+
const miterLimitAddWidth = data.__isLinePath ? 0 : (data.strokeJoin === "miter" ? 10 : 1) * spread;
|
|
8574
8584
|
const storkeCapAddWidth = data.strokeCap === "none" ? 0 : strokeWidth;
|
|
8575
8585
|
spread += Math.max(miterLimitAddWidth, storkeCapAddWidth);
|
|
8576
8586
|
}
|
|
@@ -8615,7 +8625,7 @@ const UIRender = {
|
|
|
8615
8625
|
data.__useEffect = !!(shadow || otherEffect);
|
|
8616
8626
|
}
|
|
8617
8627
|
data.__checkSingle();
|
|
8618
|
-
|
|
8628
|
+
data.__checkComplex();
|
|
8619
8629
|
},
|
|
8620
8630
|
__drawFast(canvas, options) {
|
|
8621
8631
|
drawFast(this, canvas, options);
|
|
@@ -9874,7 +9884,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
|
|
|
9874
9884
|
|
|
9875
9885
|
Canvas = __decorate([ registerUI() ], Canvas);
|
|
9876
9886
|
|
|
9877
|
-
const {copyAndSpread: copyAndSpread$1, includes: includes,
|
|
9887
|
+
const {copyAndSpread: copyAndSpread$1, includes: includes, setList: setList} = BoundsHelper, {stintSet: stintSet$1} = DataHelper;
|
|
9878
9888
|
|
|
9879
9889
|
let Text = class Text extends UI {
|
|
9880
9890
|
get __tag() {
|
|
@@ -9902,9 +9912,10 @@ let Text = class Text extends UI {
|
|
|
9902
9912
|
const {fontSize: fontSize, italic: italic, padding: padding, __autoWidth: autoWidth, __autoHeight: autoHeight} = data;
|
|
9903
9913
|
this.__updateTextDrawData();
|
|
9904
9914
|
const {bounds: contentBounds} = data.__textDrawData;
|
|
9915
|
+
console.log(contentBounds);
|
|
9905
9916
|
const b = layout.boxBounds;
|
|
9906
9917
|
layout.contentBounds = contentBounds;
|
|
9907
|
-
if (data.__lineHeight < fontSize)
|
|
9918
|
+
if (data.__lineHeight < fontSize) layout.renderChanged = true;
|
|
9908
9919
|
if (autoWidth || autoHeight) {
|
|
9909
9920
|
b.x = autoWidth ? contentBounds.x : 0;
|
|
9910
9921
|
b.y = autoHeight ? contentBounds.y : 0;
|
|
@@ -9924,6 +9935,8 @@ let Text = class Text extends UI {
|
|
|
9924
9935
|
__updateRenderSpread() {
|
|
9925
9936
|
let spread = super.__updateRenderSpread();
|
|
9926
9937
|
if (!spread) spread = this.isOverflow ? 1 : 0;
|
|
9938
|
+
const {__lineHeight: __lineHeight, fontSize: fontSize} = this.__;
|
|
9939
|
+
if (__lineHeight < fontSize) spread = FourNumberHelper.max(spread, (fontSize - __lineHeight) / 2);
|
|
9927
9940
|
return spread;
|
|
9928
9941
|
}
|
|
9929
9942
|
__updateRenderBounds() {
|
|
@@ -12230,8 +12243,8 @@ function compute(attrName, ui) {
|
|
|
12230
12243
|
}
|
|
12231
12244
|
}
|
|
12232
12245
|
}
|
|
12233
|
-
data["_" + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
12234
12246
|
if (leafPaints.length) {
|
|
12247
|
+
data["_" + attrName] = leafPaints;
|
|
12235
12248
|
if (leafPaints.every(item => item.isTransparent)) {
|
|
12236
12249
|
if (leafPaints.some(item => item.image)) isAlphaPixel = true;
|
|
12237
12250
|
isTransparent = true;
|
|
@@ -12246,6 +12259,7 @@ function compute(attrName, ui) {
|
|
|
12246
12259
|
}
|
|
12247
12260
|
} else {
|
|
12248
12261
|
data.__removePaint(attrName, false);
|
|
12262
|
+
data["_" + attrName] = "";
|
|
12249
12263
|
}
|
|
12250
12264
|
}
|
|
12251
12265
|
|
|
@@ -12395,11 +12409,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
|
|
|
12395
12409
|
needUpdate = false;
|
|
12396
12410
|
}
|
|
12397
12411
|
}
|
|
12412
|
+
if (paint.mode === "brush") PaintImage.brush(leafPaint);
|
|
12398
12413
|
if (!leafPaint.data) {
|
|
12399
12414
|
PaintImage.createData(leafPaint, image, paint, boxBounds);
|
|
12400
|
-
const {transform: transform} = leafPaint.data, {opacity: opacity
|
|
12401
|
-
const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
|
|
12402
|
-
if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
|
|
12415
|
+
const {transform: transform} = leafPaint.data, {opacity: opacity} = paint;
|
|
12416
|
+
const clip = (transform && !transform.onlyScale || data.path || data.cornerRadius) && !leafPaint.brush;
|
|
12417
|
+
if (clip || opacity && opacity < 1 || paint.blendMode) leafPaint.complex = clip ? 2 : true;
|
|
12403
12418
|
}
|
|
12404
12419
|
if (paint.filter) PaintImage.applyFilter(leafPaint, image, paint.filter, ui);
|
|
12405
12420
|
return needUpdate;
|
|
@@ -12489,6 +12504,7 @@ function getPatternData(paint, box, image) {
|
|
|
12489
12504
|
break;
|
|
12490
12505
|
|
|
12491
12506
|
case "repeat":
|
|
12507
|
+
case "brush":
|
|
12492
12508
|
if (!sameBox || scaleX || rotation || skew) PaintImage.repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
|
|
12493
12509
|
if (!repeat) data.repeat = "repeat";
|
|
12494
12510
|
const count = isObject(repeat);
|
|
@@ -12629,7 +12645,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
12629
12645
|
let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
|
|
12630
12646
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
12631
12647
|
if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
|
|
12632
|
-
const {image: image, data: data} = paint, {opacity: opacity} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
|
|
12648
|
+
const {image: image, brush: brush, data: data} = paint, {opacity: opacity} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
|
|
12633
12649
|
let imageMatrix, xGap, yGap, {width: width, height: height} = image;
|
|
12634
12650
|
if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
|
|
12635
12651
|
width *= scaleX;
|
|
@@ -12637,6 +12653,10 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
12637
12653
|
if (gap) {
|
|
12638
12654
|
xGap = gap.x * scaleX / abs$1(data.scaleX || 1);
|
|
12639
12655
|
yGap = gap.y * scaleY / abs$1(data.scaleY || 1);
|
|
12656
|
+
if (brush) {
|
|
12657
|
+
const brushScale = PaintImage.getBrushScale(paint, ui);
|
|
12658
|
+
xGap /= brushScale, yGap /= brushScale;
|
|
12659
|
+
}
|
|
12640
12660
|
}
|
|
12641
12661
|
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
12642
12662
|
scaleX *= getFloorScale(width + (xGap || 0));
|
|
@@ -12646,7 +12666,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
12646
12666
|
scale(imageMatrix, 1 / scaleX, 1 / scaleY);
|
|
12647
12667
|
}
|
|
12648
12668
|
const imageCanvas = image.getCanvas(width, height, opacity, undefined, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
|
|
12649
|
-
const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
|
|
12669
|
+
const pattern = brush ? imageCanvas : image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
|
|
12650
12670
|
paint.style = pattern;
|
|
12651
12671
|
paint.patternId = id;
|
|
12652
12672
|
}
|
|
@@ -12667,9 +12687,9 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
|
|
|
12667
12687
|
|
|
12668
12688
|
function checkImage(paint, drawImage, ui, canvas, renderOptions) {
|
|
12669
12689
|
const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
|
|
12670
|
-
const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
|
|
12690
|
+
const {image: image, brush: brush, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
|
|
12671
12691
|
if (!data || paint.patternId === id && !exporting || snapshot) {
|
|
12672
|
-
return false;
|
|
12692
|
+
if (!(brush && paint.style)) return false;
|
|
12673
12693
|
} else {
|
|
12674
12694
|
if (drawImage) {
|
|
12675
12695
|
if (data.repeat) {
|
|
@@ -12683,18 +12703,18 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
|
|
|
12683
12703
|
canvas.fillStyle = paint.style || "#000";
|
|
12684
12704
|
canvas.fill();
|
|
12685
12705
|
}
|
|
12686
|
-
PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
|
|
12687
|
-
return true;
|
|
12688
12706
|
} else {
|
|
12689
12707
|
if (!paint.style || originPaint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
|
|
12690
|
-
return false;
|
|
12708
|
+
if (!(brush && paint.style)) return false;
|
|
12691
12709
|
}
|
|
12692
12710
|
}
|
|
12711
|
+
PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
|
|
12712
|
+
return true;
|
|
12693
12713
|
}
|
|
12694
12714
|
|
|
12695
12715
|
function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
|
|
12696
|
-
const {data: data, image: image, complex: complex} = paint;
|
|
12697
|
-
let {width: width, height: height} = image;
|
|
12716
|
+
const {data: data, image: image, brush: brush, complex: complex} = paint;
|
|
12717
|
+
let {width: width, height: height} = image, view = brush || image;
|
|
12698
12718
|
if (complex) {
|
|
12699
12719
|
const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
|
|
12700
12720
|
canvas.save();
|
|
@@ -12702,16 +12722,17 @@ function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions)
|
|
|
12702
12722
|
blendMode && (canvas.blendMode = blendMode);
|
|
12703
12723
|
opacity && (canvas.opacity *= opacity);
|
|
12704
12724
|
transform && canvas.transform(transform);
|
|
12705
|
-
|
|
12725
|
+
view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
|
|
12706
12726
|
canvas.restore();
|
|
12707
12727
|
} else {
|
|
12708
12728
|
if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
|
|
12709
|
-
|
|
12729
|
+
view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
|
|
12710
12730
|
}
|
|
12711
12731
|
}
|
|
12712
12732
|
|
|
12713
12733
|
function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
|
|
12714
12734
|
const scaleData = ui.getRenderScaleData(true, paint.originPaint.scaleFixed), {data: data} = paint;
|
|
12735
|
+
if (paint.brush) PaintImage.addBrushScale(scaleData, paint, ui);
|
|
12715
12736
|
if (canvas) {
|
|
12716
12737
|
const {pixelRatio: pixelRatio} = canvas;
|
|
12717
12738
|
scaleData.scaleX *= pixelRatio;
|
|
@@ -12728,6 +12749,7 @@ function recycleImage(attrName, data) {
|
|
|
12728
12749
|
const paints = data["_" + attrName];
|
|
12729
12750
|
if (isArray(paints)) {
|
|
12730
12751
|
let paint, image, recycleMap, input, url;
|
|
12752
|
+
const ui = data.__leaf;
|
|
12731
12753
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
12732
12754
|
paint = paints[i];
|
|
12733
12755
|
image = paint.image;
|
|
@@ -12736,7 +12758,8 @@ function recycleImage(attrName, data) {
|
|
|
12736
12758
|
if (!recycleMap) recycleMap = {};
|
|
12737
12759
|
recycleMap[url] = true;
|
|
12738
12760
|
ImageManager.recyclePaint(paint);
|
|
12739
|
-
if (
|
|
12761
|
+
if (paint.brush) PaintImage.recycleBrush(paint, ui);
|
|
12762
|
+
if (data.__willDestroy && image.parent) PaintImage.recycleFilter(image, ui);
|
|
12740
12763
|
if (image.loading) {
|
|
12741
12764
|
if (!input) {
|
|
12742
12765
|
input = data.__input && data.__input[attrName] || [];
|