leafer-draw 2.1.0 → 2.1.2
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/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 +47 -26
- 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 +47 -26
- package/dist/web.module.min.js +1 -1
- package/dist/web.module.min.js.map +1 -1
- package/package.json +3 -3
package/dist/web.module.js
CHANGED
|
@@ -3070,7 +3070,7 @@ const PathConvert = {
|
|
|
3070
3070
|
return needConvert ? PathConvert.toCanvasData(data, curveMode) : data;
|
|
3071
3071
|
},
|
|
3072
3072
|
toCanvasData(old, curveMode) {
|
|
3073
|
-
let x = 0, y = 0, x1 = 0, y1 = 0, i = 0, len = old.length, controlX, controlY, command, lastCommand, smooth;
|
|
3073
|
+
let x = 0, y = 0, x1 = 0, y1 = 0, startX = 0, startY = 0, i = 0, len = old.length, controlX, controlY, command, lastCommand, smooth;
|
|
3074
3074
|
const data = [];
|
|
3075
3075
|
while (i < len) {
|
|
3076
3076
|
command = old[i];
|
|
@@ -3082,7 +3082,8 @@ 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
|
+
if (lastCommand === command) data.push(L$5, x, y); else data.push(M$4, x, y), startX = x,
|
|
3086
|
+
startY = y;
|
|
3086
3087
|
i += 3;
|
|
3087
3088
|
break;
|
|
3088
3089
|
|
|
@@ -3197,6 +3198,8 @@ const PathConvert = {
|
|
|
3197
3198
|
case z:
|
|
3198
3199
|
case Z$4:
|
|
3199
3200
|
data.push(Z$4);
|
|
3201
|
+
x = startX;
|
|
3202
|
+
y = startY;
|
|
3200
3203
|
i++;
|
|
3201
3204
|
break;
|
|
3202
3205
|
|
|
@@ -6075,12 +6078,13 @@ const LeafBounds = {
|
|
|
6075
6078
|
if (this.__hasWorldEvent) BoundsEvent.emitWorld(this);
|
|
6076
6079
|
},
|
|
6077
6080
|
__updateLocalBounds() {
|
|
6078
|
-
const layout = this.__layout;
|
|
6081
|
+
const layout = this.__layout, data = this.__;
|
|
6079
6082
|
if (layout.boxChanged) {
|
|
6080
|
-
if (!
|
|
6083
|
+
if (!data.__pathInputed) this.__updatePath();
|
|
6081
6084
|
this.__updateRenderPath();
|
|
6082
6085
|
this.__updateBoxBounds();
|
|
6083
6086
|
layout.resized = "inner";
|
|
6087
|
+
if (data.__strokeGeometry) data.__strokeGeometry = undefined;
|
|
6084
6088
|
}
|
|
6085
6089
|
if (layout.localBoxChanged) {
|
|
6086
6090
|
if (this.__local) this.__updateLocalBoxBounds();
|
|
@@ -6103,6 +6107,7 @@ const LeafBounds = {
|
|
|
6103
6107
|
if (layout.renderSpread || layout.strokeSpread !== layout.strokeBoxSpread) layout.renderChanged = true;
|
|
6104
6108
|
if (this.parent) this.parent.__layout.strokeChange();
|
|
6105
6109
|
layout.resized = "inner";
|
|
6110
|
+
if (data.__strokeGeometry) data.__strokeGeometry = undefined;
|
|
6106
6111
|
}
|
|
6107
6112
|
if (layout.renderChanged) {
|
|
6108
6113
|
layout.renderSpread = this.__updateRenderSpread();
|
|
@@ -7079,7 +7084,7 @@ class LeafLevelList {
|
|
|
7079
7084
|
}
|
|
7080
7085
|
}
|
|
7081
7086
|
|
|
7082
|
-
const version = "2.1.
|
|
7087
|
+
const version = "2.1.2";
|
|
7083
7088
|
|
|
7084
7089
|
const debug$4 = Debug.get("LeaferCanvas");
|
|
7085
7090
|
|
|
@@ -8148,7 +8153,7 @@ class UIData extends LeafData {
|
|
|
8148
8153
|
const isStr = isString(value);
|
|
8149
8154
|
if (isStr || value && isObject(value[0])) {
|
|
8150
8155
|
this.__setInput("path", value);
|
|
8151
|
-
this._path = isStr ? parse(value) : objectToCanvasData(value);
|
|
8156
|
+
this._path = isStr ? parse(value, this.__useArrow) : objectToCanvasData(value);
|
|
8152
8157
|
} else {
|
|
8153
8158
|
if (this.__input) this.__removeInput("path");
|
|
8154
8159
|
this._path = value;
|
|
@@ -8263,7 +8268,11 @@ class EllipseData extends UIData {
|
|
|
8263
8268
|
}
|
|
8264
8269
|
}
|
|
8265
8270
|
|
|
8266
|
-
class PolygonData extends
|
|
8271
|
+
class PolygonData extends UIData {
|
|
8272
|
+
get __usePathBox() {
|
|
8273
|
+
return this.points || this.__pathInputed;
|
|
8274
|
+
}
|
|
8275
|
+
}
|
|
8267
8276
|
|
|
8268
8277
|
class StarData extends UIData {
|
|
8269
8278
|
get __boxStroke() {
|
|
@@ -8374,7 +8383,7 @@ const UIBounds = {
|
|
|
8374
8383
|
if ((data.stroke || data.hitStroke === "all") && strokeWidth && strokeAlign !== "inside") {
|
|
8375
8384
|
boxSpread = spread = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
|
|
8376
8385
|
if (!data.__boxStroke || data.__useArrow) {
|
|
8377
|
-
const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * spread;
|
|
8386
|
+
const miterLimitAddWidth = data.__isLinePath ? 0 : (data.strokeJoin === "miter" ? 10 : 1) * spread;
|
|
8378
8387
|
const storkeCapAddWidth = data.strokeCap === "none" ? 0 : strokeWidth;
|
|
8379
8388
|
spread += Math.max(miterLimitAddWidth, storkeCapAddWidth);
|
|
8380
8389
|
}
|
|
@@ -9678,7 +9687,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
|
|
|
9678
9687
|
|
|
9679
9688
|
Canvas = __decorate([ registerUI() ], Canvas);
|
|
9680
9689
|
|
|
9681
|
-
const {copyAndSpread: copyAndSpread$1, includes: includes,
|
|
9690
|
+
const {copyAndSpread: copyAndSpread$1, includes: includes, setList: setList} = BoundsHelper, {stintSet: stintSet$1} = DataHelper;
|
|
9682
9691
|
|
|
9683
9692
|
let Text = class Text extends UI {
|
|
9684
9693
|
get __tag() {
|
|
@@ -9708,7 +9717,7 @@ let Text = class Text extends UI {
|
|
|
9708
9717
|
const {bounds: contentBounds} = data.__textDrawData;
|
|
9709
9718
|
const b = layout.boxBounds;
|
|
9710
9719
|
layout.contentBounds = contentBounds;
|
|
9711
|
-
if (data.__lineHeight < fontSize)
|
|
9720
|
+
if (data.__lineHeight < fontSize) layout.renderChanged = true;
|
|
9712
9721
|
if (autoWidth || autoHeight) {
|
|
9713
9722
|
b.x = autoWidth ? contentBounds.x : 0;
|
|
9714
9723
|
b.y = autoHeight ? contentBounds.y : 0;
|
|
@@ -9728,6 +9737,8 @@ let Text = class Text extends UI {
|
|
|
9728
9737
|
__updateRenderSpread() {
|
|
9729
9738
|
let spread = super.__updateRenderSpread();
|
|
9730
9739
|
if (!spread) spread = this.isOverflow ? 1 : 0;
|
|
9740
|
+
const {__lineHeight: __lineHeight, fontSize: fontSize} = this.__;
|
|
9741
|
+
if (__lineHeight < fontSize) spread = FourNumberHelper.max(spread, (fontSize - __lineHeight) / 2);
|
|
9731
9742
|
return spread;
|
|
9732
9743
|
}
|
|
9733
9744
|
__updateRenderBounds() {
|
|
@@ -10185,8 +10196,8 @@ function compute(attrName, ui) {
|
|
|
10185
10196
|
}
|
|
10186
10197
|
}
|
|
10187
10198
|
}
|
|
10188
|
-
data["_" + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
10189
10199
|
if (leafPaints.length) {
|
|
10200
|
+
data["_" + attrName] = leafPaints;
|
|
10190
10201
|
if (leafPaints.every(item => item.isTransparent)) {
|
|
10191
10202
|
if (leafPaints.some(item => item.image)) isAlphaPixel = true;
|
|
10192
10203
|
isTransparent = true;
|
|
@@ -10201,6 +10212,7 @@ function compute(attrName, ui) {
|
|
|
10201
10212
|
}
|
|
10202
10213
|
} else {
|
|
10203
10214
|
data.__removePaint(attrName, false);
|
|
10215
|
+
data["_" + attrName] = "";
|
|
10204
10216
|
}
|
|
10205
10217
|
}
|
|
10206
10218
|
|
|
@@ -10350,11 +10362,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
|
|
|
10350
10362
|
needUpdate = false;
|
|
10351
10363
|
}
|
|
10352
10364
|
}
|
|
10365
|
+
if (paint.mode === "brush") PaintImage.brush(leafPaint);
|
|
10353
10366
|
if (!leafPaint.data) {
|
|
10354
10367
|
PaintImage.createData(leafPaint, image, paint, boxBounds);
|
|
10355
|
-
const {transform: transform} = leafPaint.data, {opacity: opacity
|
|
10356
|
-
const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
|
|
10357
|
-
if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
|
|
10368
|
+
const {transform: transform} = leafPaint.data, {opacity: opacity} = paint;
|
|
10369
|
+
const clip = (transform && !transform.onlyScale || data.path || data.cornerRadius) && !leafPaint.brush;
|
|
10370
|
+
if (clip || opacity && opacity < 1 || paint.blendMode) leafPaint.complex = clip ? 2 : true;
|
|
10358
10371
|
}
|
|
10359
10372
|
if (paint.filter) PaintImage.applyFilter(leafPaint, image, paint.filter, ui);
|
|
10360
10373
|
return needUpdate;
|
|
@@ -10444,6 +10457,7 @@ function getPatternData(paint, box, image) {
|
|
|
10444
10457
|
break;
|
|
10445
10458
|
|
|
10446
10459
|
case "repeat":
|
|
10460
|
+
case "brush":
|
|
10447
10461
|
if (!sameBox || scaleX || rotation || skew) PaintImage.repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
|
|
10448
10462
|
if (!repeat) data.repeat = "repeat";
|
|
10449
10463
|
const count = isObject(repeat);
|
|
@@ -10584,7 +10598,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
10584
10598
|
let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
|
|
10585
10599
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
10586
10600
|
if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
|
|
10587
|
-
const {image: image, data: data} = paint, {opacity: opacity} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
|
|
10601
|
+
const {image: image, brush: brush, data: data} = paint, {opacity: opacity} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
|
|
10588
10602
|
let imageMatrix, xGap, yGap, {width: width, height: height} = image;
|
|
10589
10603
|
if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
|
|
10590
10604
|
width *= scaleX;
|
|
@@ -10592,6 +10606,10 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
10592
10606
|
if (gap) {
|
|
10593
10607
|
xGap = gap.x * scaleX / abs$1(data.scaleX || 1);
|
|
10594
10608
|
yGap = gap.y * scaleY / abs$1(data.scaleY || 1);
|
|
10609
|
+
if (brush) {
|
|
10610
|
+
const brushScale = PaintImage.getBrushScale(paint, ui);
|
|
10611
|
+
xGap /= brushScale, yGap /= brushScale;
|
|
10612
|
+
}
|
|
10595
10613
|
}
|
|
10596
10614
|
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
10597
10615
|
scaleX *= getFloorScale(width + (xGap || 0));
|
|
@@ -10601,7 +10619,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
|
|
|
10601
10619
|
scale(imageMatrix, 1 / scaleX, 1 / scaleY);
|
|
10602
10620
|
}
|
|
10603
10621
|
const imageCanvas = image.getCanvas(width, height, opacity, undefined, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
|
|
10604
|
-
const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
|
|
10622
|
+
const pattern = brush ? imageCanvas : image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
|
|
10605
10623
|
paint.style = pattern;
|
|
10606
10624
|
paint.patternId = id;
|
|
10607
10625
|
}
|
|
@@ -10622,9 +10640,9 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
|
|
|
10622
10640
|
|
|
10623
10641
|
function checkImage(paint, drawImage, ui, canvas, renderOptions) {
|
|
10624
10642
|
const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
|
|
10625
|
-
const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
|
|
10643
|
+
const {image: image, brush: brush, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
|
|
10626
10644
|
if (!data || paint.patternId === id && !exporting || snapshot) {
|
|
10627
|
-
return false;
|
|
10645
|
+
if (!(brush && paint.style)) return false;
|
|
10628
10646
|
} else {
|
|
10629
10647
|
if (drawImage) {
|
|
10630
10648
|
if (data.repeat) {
|
|
@@ -10638,18 +10656,18 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
|
|
|
10638
10656
|
canvas.fillStyle = paint.style || "#000";
|
|
10639
10657
|
canvas.fill();
|
|
10640
10658
|
}
|
|
10641
|
-
PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
|
|
10642
|
-
return true;
|
|
10643
10659
|
} else {
|
|
10644
10660
|
if (!paint.style || originPaint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
|
|
10645
|
-
return false;
|
|
10661
|
+
if (!(brush && paint.style)) return false;
|
|
10646
10662
|
}
|
|
10647
10663
|
}
|
|
10664
|
+
PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
|
|
10665
|
+
return true;
|
|
10648
10666
|
}
|
|
10649
10667
|
|
|
10650
10668
|
function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
|
|
10651
|
-
const {data: data, image: image, complex: complex} = paint;
|
|
10652
|
-
let {width: width, height: height} = image;
|
|
10669
|
+
const {data: data, image: image, brush: brush, complex: complex} = paint;
|
|
10670
|
+
let {width: width, height: height} = image, view = brush || image;
|
|
10653
10671
|
if (complex) {
|
|
10654
10672
|
const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
|
|
10655
10673
|
canvas.save();
|
|
@@ -10657,16 +10675,17 @@ function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions)
|
|
|
10657
10675
|
blendMode && (canvas.blendMode = blendMode);
|
|
10658
10676
|
opacity && (canvas.opacity *= opacity);
|
|
10659
10677
|
transform && canvas.transform(transform);
|
|
10660
|
-
|
|
10678
|
+
view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
|
|
10661
10679
|
canvas.restore();
|
|
10662
10680
|
} else {
|
|
10663
10681
|
if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
|
|
10664
|
-
|
|
10682
|
+
view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
|
|
10665
10683
|
}
|
|
10666
10684
|
}
|
|
10667
10685
|
|
|
10668
10686
|
function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
|
|
10669
10687
|
const scaleData = ui.getRenderScaleData(true, paint.originPaint.scaleFixed), {data: data} = paint;
|
|
10688
|
+
if (paint.brush) PaintImage.addBrushScale(scaleData, paint, ui);
|
|
10670
10689
|
if (canvas) {
|
|
10671
10690
|
const {pixelRatio: pixelRatio} = canvas;
|
|
10672
10691
|
scaleData.scaleX *= pixelRatio;
|
|
@@ -10683,6 +10702,7 @@ function recycleImage(attrName, data) {
|
|
|
10683
10702
|
const paints = data["_" + attrName];
|
|
10684
10703
|
if (isArray(paints)) {
|
|
10685
10704
|
let paint, image, recycleMap, input, url;
|
|
10705
|
+
const ui = data.__leaf;
|
|
10686
10706
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
10687
10707
|
paint = paints[i];
|
|
10688
10708
|
image = paint.image;
|
|
@@ -10691,7 +10711,8 @@ function recycleImage(attrName, data) {
|
|
|
10691
10711
|
if (!recycleMap) recycleMap = {};
|
|
10692
10712
|
recycleMap[url] = true;
|
|
10693
10713
|
ImageManager.recyclePaint(paint);
|
|
10694
|
-
if (
|
|
10714
|
+
if (paint.brush) PaintImage.recycleBrush(paint, ui);
|
|
10715
|
+
if (data.__willDestroy && image.parent) PaintImage.recycleFilter(image, ui);
|
|
10695
10716
|
if (image.loading) {
|
|
10696
10717
|
if (!input) {
|
|
10697
10718
|
input = data.__input && data.__input[attrName] || [];
|