leafer-ui 2.1.0 → 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 +44 -25
- 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 +44 -25
- 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.1.
|
|
7084
|
+
const version = "2.1.1";
|
|
7083
7085
|
|
|
7084
7086
|
const debug$5 = Debug.get("LeaferCanvas");
|
|
7085
7087
|
|
|
@@ -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;
|
|
@@ -8463,7 +8465,11 @@ class EllipseData extends UIData {
|
|
|
8463
8465
|
}
|
|
8464
8466
|
}
|
|
8465
8467
|
|
|
8466
|
-
class PolygonData extends
|
|
8468
|
+
class PolygonData extends UIData {
|
|
8469
|
+
get __usePathBox() {
|
|
8470
|
+
return this.points || this.__pathInputed;
|
|
8471
|
+
}
|
|
8472
|
+
}
|
|
8467
8473
|
|
|
8468
8474
|
class StarData extends UIData {
|
|
8469
8475
|
get __boxStroke() {
|
|
@@ -8574,7 +8580,7 @@ const UIBounds = {
|
|
|
8574
8580
|
if ((data.stroke || data.hitStroke === "all") && strokeWidth && strokeAlign !== "inside") {
|
|
8575
8581
|
boxSpread = spread = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
|
|
8576
8582
|
if (!data.__boxStroke || data.__useArrow) {
|
|
8577
|
-
const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * spread;
|
|
8583
|
+
const miterLimitAddWidth = data.__isLinePath ? 0 : (data.strokeJoin === "miter" ? 10 : 1) * spread;
|
|
8578
8584
|
const storkeCapAddWidth = data.strokeCap === "none" ? 0 : strokeWidth;
|
|
8579
8585
|
spread += Math.max(miterLimitAddWidth, storkeCapAddWidth);
|
|
8580
8586
|
}
|
|
@@ -9878,7 +9884,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
|
|
|
9878
9884
|
|
|
9879
9885
|
Canvas = __decorate([ registerUI() ], Canvas);
|
|
9880
9886
|
|
|
9881
|
-
const {copyAndSpread: copyAndSpread$1, includes: includes,
|
|
9887
|
+
const {copyAndSpread: copyAndSpread$1, includes: includes, setList: setList} = BoundsHelper, {stintSet: stintSet$1} = DataHelper;
|
|
9882
9888
|
|
|
9883
9889
|
let Text = class Text extends UI {
|
|
9884
9890
|
get __tag() {
|
|
@@ -9906,9 +9912,10 @@ let Text = class Text extends UI {
|
|
|
9906
9912
|
const {fontSize: fontSize, italic: italic, padding: padding, __autoWidth: autoWidth, __autoHeight: autoHeight} = data;
|
|
9907
9913
|
this.__updateTextDrawData();
|
|
9908
9914
|
const {bounds: contentBounds} = data.__textDrawData;
|
|
9915
|
+
console.log(contentBounds);
|
|
9909
9916
|
const b = layout.boxBounds;
|
|
9910
9917
|
layout.contentBounds = contentBounds;
|
|
9911
|
-
if (data.__lineHeight < fontSize)
|
|
9918
|
+
if (data.__lineHeight < fontSize) layout.renderChanged = true;
|
|
9912
9919
|
if (autoWidth || autoHeight) {
|
|
9913
9920
|
b.x = autoWidth ? contentBounds.x : 0;
|
|
9914
9921
|
b.y = autoHeight ? contentBounds.y : 0;
|
|
@@ -9928,6 +9935,8 @@ let Text = class Text extends UI {
|
|
|
9928
9935
|
__updateRenderSpread() {
|
|
9929
9936
|
let spread = super.__updateRenderSpread();
|
|
9930
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);
|
|
9931
9940
|
return spread;
|
|
9932
9941
|
}
|
|
9933
9942
|
__updateRenderBounds() {
|
|
@@ -12234,8 +12243,8 @@ function compute(attrName, ui) {
|
|
|
12234
12243
|
}
|
|
12235
12244
|
}
|
|
12236
12245
|
}
|
|
12237
|
-
data["_" + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
12238
12246
|
if (leafPaints.length) {
|
|
12247
|
+
data["_" + attrName] = leafPaints;
|
|
12239
12248
|
if (leafPaints.every(item => item.isTransparent)) {
|
|
12240
12249
|
if (leafPaints.some(item => item.image)) isAlphaPixel = true;
|
|
12241
12250
|
isTransparent = true;
|
|
@@ -12250,6 +12259,7 @@ function compute(attrName, ui) {
|
|
|
12250
12259
|
}
|
|
12251
12260
|
} else {
|
|
12252
12261
|
data.__removePaint(attrName, false);
|
|
12262
|
+
data["_" + attrName] = "";
|
|
12253
12263
|
}
|
|
12254
12264
|
}
|
|
12255
12265
|
|
|
@@ -12399,11 +12409,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
|
|
|
12399
12409
|
needUpdate = false;
|
|
12400
12410
|
}
|
|
12401
12411
|
}
|
|
12412
|
+
if (paint.mode === "brush") PaintImage.brush(leafPaint);
|
|
12402
12413
|
if (!leafPaint.data) {
|
|
12403
12414
|
PaintImage.createData(leafPaint, image, paint, boxBounds);
|
|
12404
|
-
const {transform: transform} = leafPaint.data, {opacity: opacity
|
|
12405
|
-
const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
|
|
12406
|
-
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;
|
|
12407
12418
|
}
|
|
12408
12419
|
if (paint.filter) PaintImage.applyFilter(leafPaint, image, paint.filter, ui);
|
|
12409
12420
|
return needUpdate;
|
|
@@ -12493,6 +12504,7 @@ function getPatternData(paint, box, image) {
|
|
|
12493
12504
|
break;
|
|
12494
12505
|
|
|
12495
12506
|
case "repeat":
|
|
12507
|
+
case "brush":
|
|
12496
12508
|
if (!sameBox || scaleX || rotation || skew) PaintImage.repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
|
|
12497
12509
|
if (!repeat) data.repeat = "repeat";
|
|
12498
12510
|
const count = isObject(repeat);
|
|
@@ -12633,7 +12645,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
12633
12645
|
let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
|
|
12634
12646
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
12635
12647
|
if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
|
|
12636
|
-
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);
|
|
12637
12649
|
let imageMatrix, xGap, yGap, {width: width, height: height} = image;
|
|
12638
12650
|
if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
|
|
12639
12651
|
width *= scaleX;
|
|
@@ -12641,6 +12653,10 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
12641
12653
|
if (gap) {
|
|
12642
12654
|
xGap = gap.x * scaleX / abs$1(data.scaleX || 1);
|
|
12643
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
|
+
}
|
|
12644
12660
|
}
|
|
12645
12661
|
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
12646
12662
|
scaleX *= getFloorScale(width + (xGap || 0));
|
|
@@ -12650,7 +12666,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
12650
12666
|
scale(imageMatrix, 1 / scaleX, 1 / scaleY);
|
|
12651
12667
|
}
|
|
12652
12668
|
const imageCanvas = image.getCanvas(width, height, opacity, undefined, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
|
|
12653
|
-
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);
|
|
12654
12670
|
paint.style = pattern;
|
|
12655
12671
|
paint.patternId = id;
|
|
12656
12672
|
}
|
|
@@ -12671,9 +12687,9 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
|
|
|
12671
12687
|
|
|
12672
12688
|
function checkImage(paint, drawImage, ui, canvas, renderOptions) {
|
|
12673
12689
|
const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
|
|
12674
|
-
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;
|
|
12675
12691
|
if (!data || paint.patternId === id && !exporting || snapshot) {
|
|
12676
|
-
return false;
|
|
12692
|
+
if (!(brush && paint.style)) return false;
|
|
12677
12693
|
} else {
|
|
12678
12694
|
if (drawImage) {
|
|
12679
12695
|
if (data.repeat) {
|
|
@@ -12687,18 +12703,18 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
|
|
|
12687
12703
|
canvas.fillStyle = paint.style || "#000";
|
|
12688
12704
|
canvas.fill();
|
|
12689
12705
|
}
|
|
12690
|
-
PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
|
|
12691
|
-
return true;
|
|
12692
12706
|
} else {
|
|
12693
12707
|
if (!paint.style || originPaint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
|
|
12694
|
-
return false;
|
|
12708
|
+
if (!(brush && paint.style)) return false;
|
|
12695
12709
|
}
|
|
12696
12710
|
}
|
|
12711
|
+
PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
|
|
12712
|
+
return true;
|
|
12697
12713
|
}
|
|
12698
12714
|
|
|
12699
12715
|
function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
|
|
12700
|
-
const {data: data, image: image, complex: complex} = paint;
|
|
12701
|
-
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;
|
|
12702
12718
|
if (complex) {
|
|
12703
12719
|
const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
|
|
12704
12720
|
canvas.save();
|
|
@@ -12706,16 +12722,17 @@ function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions)
|
|
|
12706
12722
|
blendMode && (canvas.blendMode = blendMode);
|
|
12707
12723
|
opacity && (canvas.opacity *= opacity);
|
|
12708
12724
|
transform && canvas.transform(transform);
|
|
12709
|
-
|
|
12725
|
+
view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
|
|
12710
12726
|
canvas.restore();
|
|
12711
12727
|
} else {
|
|
12712
12728
|
if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
|
|
12713
|
-
|
|
12729
|
+
view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
|
|
12714
12730
|
}
|
|
12715
12731
|
}
|
|
12716
12732
|
|
|
12717
12733
|
function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
|
|
12718
12734
|
const scaleData = ui.getRenderScaleData(true, paint.originPaint.scaleFixed), {data: data} = paint;
|
|
12735
|
+
if (paint.brush) PaintImage.addBrushScale(scaleData, paint, ui);
|
|
12719
12736
|
if (canvas) {
|
|
12720
12737
|
const {pixelRatio: pixelRatio} = canvas;
|
|
12721
12738
|
scaleData.scaleX *= pixelRatio;
|
|
@@ -12732,6 +12749,7 @@ function recycleImage(attrName, data) {
|
|
|
12732
12749
|
const paints = data["_" + attrName];
|
|
12733
12750
|
if (isArray(paints)) {
|
|
12734
12751
|
let paint, image, recycleMap, input, url;
|
|
12752
|
+
const ui = data.__leaf;
|
|
12735
12753
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
12736
12754
|
paint = paints[i];
|
|
12737
12755
|
image = paint.image;
|
|
@@ -12740,7 +12758,8 @@ function recycleImage(attrName, data) {
|
|
|
12740
12758
|
if (!recycleMap) recycleMap = {};
|
|
12741
12759
|
recycleMap[url] = true;
|
|
12742
12760
|
ImageManager.recyclePaint(paint);
|
|
12743
|
-
if (
|
|
12761
|
+
if (paint.brush) PaintImage.recycleBrush(paint, ui);
|
|
12762
|
+
if (data.__willDestroy && image.parent) PaintImage.recycleFilter(image, ui);
|
|
12744
12763
|
if (image.loading) {
|
|
12745
12764
|
if (!input) {
|
|
12746
12765
|
input = data.__input && data.__input[attrName] || [];
|