leafer-draw 1.12.1 → 1.12.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 +16 -23
- package/dist/web.esm.js +17 -24
- package/dist/web.esm.min.js +1 -1
- package/dist/web.esm.min.js.map +1 -1
- package/dist/web.js +59 -51
- 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 +60 -51
- 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
|
@@ -461,7 +461,7 @@ function getMatrixData() {
|
|
|
461
461
|
|
|
462
462
|
const {sin: sin$5, cos: cos$5, acos: acos, sqrt: sqrt$3} = Math;
|
|
463
463
|
|
|
464
|
-
const {float: float$
|
|
464
|
+
const {float: float$2} = MathHelper;
|
|
465
465
|
|
|
466
466
|
const tempPoint$3 = {};
|
|
467
467
|
|
|
@@ -712,12 +712,12 @@ const MatrixHelper = {
|
|
|
712
712
|
const cosR = c / scaleY;
|
|
713
713
|
rotation = PI_2 - (d > 0 ? acos(-cosR) : -acos(cosR));
|
|
714
714
|
}
|
|
715
|
-
const cosR = float$
|
|
715
|
+
const cosR = float$2(cos$5(rotation));
|
|
716
716
|
const sinR = sin$5(rotation);
|
|
717
|
-
scaleX = float$
|
|
718
|
-
skewX = cosR ? float$
|
|
719
|
-
skewY = cosR ? float$
|
|
720
|
-
rotation = float$
|
|
717
|
+
scaleX = float$2(scaleX), scaleY = float$2(scaleY);
|
|
718
|
+
skewX = cosR ? float$2((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
|
|
719
|
+
skewY = cosR ? float$2((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
|
|
720
|
+
rotation = float$2(rotation / OneRadian);
|
|
721
721
|
} else {
|
|
722
722
|
scaleX = a;
|
|
723
723
|
scaleY = d;
|
|
@@ -761,6 +761,8 @@ const MatrixHelper = {
|
|
|
761
761
|
|
|
762
762
|
const M$6 = MatrixHelper;
|
|
763
763
|
|
|
764
|
+
const {float: float$1} = MathHelper;
|
|
765
|
+
|
|
764
766
|
const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3} = MatrixHelper;
|
|
765
767
|
|
|
766
768
|
const {sin: sin$4, cos: cos$4, abs: abs$4, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2} = Math;
|
|
@@ -828,6 +830,11 @@ const PointHelper = {
|
|
|
828
830
|
P$5.toInnerRadiusPointOf(t, matrix, temp);
|
|
829
831
|
return temp;
|
|
830
832
|
},
|
|
833
|
+
copyRadiusPoint(t, point, x, y) {
|
|
834
|
+
copy$9(t, point);
|
|
835
|
+
setRadius(t, x, y);
|
|
836
|
+
return t;
|
|
837
|
+
},
|
|
831
838
|
toInnerRadiusPointOf(t, matrix, to) {
|
|
832
839
|
to || (to = t);
|
|
833
840
|
toInnerPoint$2(matrix, t, to);
|
|
@@ -895,7 +902,7 @@ const PointHelper = {
|
|
|
895
902
|
return points;
|
|
896
903
|
},
|
|
897
904
|
isSame(t, point) {
|
|
898
|
-
return t.x === point.x && t.y === point.y;
|
|
905
|
+
return float$1(t.x) === float$1(point.x) && float$1(t.y) === float$1(point.y);
|
|
899
906
|
},
|
|
900
907
|
reset(t) {
|
|
901
908
|
P$5.reset(t);
|
|
@@ -904,7 +911,7 @@ const PointHelper = {
|
|
|
904
911
|
|
|
905
912
|
const P$5 = PointHelper;
|
|
906
913
|
|
|
907
|
-
const {getDistanceFrom: getDistanceFrom, copy: copy$9, getAtan2: getAtan2} = P$5;
|
|
914
|
+
const {getDistanceFrom: getDistanceFrom, copy: copy$9, setRadius: setRadius, getAtan2: getAtan2} = P$5;
|
|
908
915
|
|
|
909
916
|
class Point {
|
|
910
917
|
constructor(x, y) {
|
|
@@ -2407,7 +2414,7 @@ class LeaferCanvasBase extends Canvas$1 {
|
|
|
2407
2414
|
const {pixelRatio: pixelRatio} = this;
|
|
2408
2415
|
this.filter = `blur(${blur * pixelRatio}px)`;
|
|
2409
2416
|
}
|
|
2410
|
-
copyWorld(canvas, from, to, blendMode, ceilPixel
|
|
2417
|
+
copyWorld(canvas, from, to, blendMode, ceilPixel) {
|
|
2411
2418
|
if (blendMode) this.blendMode = blendMode;
|
|
2412
2419
|
if (from) {
|
|
2413
2420
|
this.setTempPixelBounds(from, ceilPixel);
|
|
@@ -2418,7 +2425,7 @@ class LeaferCanvasBase extends Canvas$1 {
|
|
|
2418
2425
|
}
|
|
2419
2426
|
if (blendMode) this.blendMode = "source-over";
|
|
2420
2427
|
}
|
|
2421
|
-
copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode, ceilPixel
|
|
2428
|
+
copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode, ceilPixel) {
|
|
2422
2429
|
if (fromWorld.b || fromWorld.c) {
|
|
2423
2430
|
this.save();
|
|
2424
2431
|
this.resetTransform();
|
|
@@ -2431,7 +2438,7 @@ class LeaferCanvasBase extends Canvas$1 {
|
|
|
2431
2438
|
if (blendMode) this.blendMode = "source-over";
|
|
2432
2439
|
}
|
|
2433
2440
|
}
|
|
2434
|
-
copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform, ceilPixel
|
|
2441
|
+
copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform, ceilPixel) {
|
|
2435
2442
|
this.resetTransform();
|
|
2436
2443
|
this.copyWorld(canvas, from, to, blendMode, ceilPixel);
|
|
2437
2444
|
if (!onlyResetTransform) this.useWorldTransform();
|
|
@@ -2658,7 +2665,7 @@ const BezierHelper = {
|
|
|
2658
2665
|
data.push(M$5, points[0], points[1]);
|
|
2659
2666
|
if (curve && points.length > 5) {
|
|
2660
2667
|
let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
|
|
2661
|
-
let ba, cb, d, len = points.length;
|
|
2668
|
+
let baX, baY, ba, cb, d, len = points.length;
|
|
2662
2669
|
const t = curve === true ? .5 : curve;
|
|
2663
2670
|
if (close) {
|
|
2664
2671
|
points = [ points[len - 2], points[len - 1], ...points, points[0], points[1], points[2], points[3] ];
|
|
@@ -2671,7 +2678,9 @@ const BezierHelper = {
|
|
|
2671
2678
|
bY = points[i + 1];
|
|
2672
2679
|
cX = points[i + 2];
|
|
2673
2680
|
cY = points[i + 3];
|
|
2674
|
-
|
|
2681
|
+
baX = bX - aX;
|
|
2682
|
+
baY = bY - aY;
|
|
2683
|
+
ba = sqrt$1(pow(baX, 2) + pow(baY, 2));
|
|
2675
2684
|
cb = sqrt$1(pow(cX - bX, 2) + pow(cY - bY, 2));
|
|
2676
2685
|
if (!ba && !cb) continue;
|
|
2677
2686
|
d = ba + cb;
|
|
@@ -2684,7 +2693,7 @@ const BezierHelper = {
|
|
|
2684
2693
|
if (i === 2) {
|
|
2685
2694
|
if (!close) data.push(Q$4, c1X, c1Y, bX, bY);
|
|
2686
2695
|
} else {
|
|
2687
|
-
data.push(C$4, c2X, c2Y, c1X, c1Y, bX, bY);
|
|
2696
|
+
if (baX || baY) data.push(C$4, c2X, c2Y, c1X, c1Y, bX, bY);
|
|
2688
2697
|
}
|
|
2689
2698
|
c2X = bX + cb * cX;
|
|
2690
2699
|
c2Y = bY + cb * cY;
|
|
@@ -3269,6 +3278,7 @@ const PathCommandDataHelper = {
|
|
|
3269
3278
|
}
|
|
3270
3279
|
},
|
|
3271
3280
|
ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
|
|
3281
|
+
if (radiusX === radiusY) return arc$2(data, x, y, radiusX, startAngle, endAngle, anticlockwise);
|
|
3272
3282
|
if (isNull(rotation)) {
|
|
3273
3283
|
data.push(F$3, x, y, radiusX, radiusY);
|
|
3274
3284
|
} else {
|
|
@@ -3281,6 +3291,7 @@ const PathCommandDataHelper = {
|
|
|
3281
3291
|
if (isNull(startAngle)) {
|
|
3282
3292
|
data.push(P$2, x, y, radius);
|
|
3283
3293
|
} else {
|
|
3294
|
+
if (isNull(startAngle)) startAngle = 0;
|
|
3284
3295
|
if (isNull(endAngle)) endAngle = 360;
|
|
3285
3296
|
data.push(O$2, x, y, radius, startAngle, endAngle, anticlockwise ? 1 : 0);
|
|
3286
3297
|
}
|
|
@@ -3631,6 +3642,7 @@ const PathCorner = {
|
|
|
3631
3642
|
smooth(data, cornerRadius, _cornerSmoothing) {
|
|
3632
3643
|
let command, lastCommand, commandLen;
|
|
3633
3644
|
let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
|
|
3645
|
+
if (isArray(cornerRadius)) cornerRadius = cornerRadius[0] || 0;
|
|
3634
3646
|
const len = data.length;
|
|
3635
3647
|
const smooth = [];
|
|
3636
3648
|
while (i < len) {
|
|
@@ -4046,7 +4058,9 @@ const R = Resource;
|
|
|
4046
4058
|
const ImageManager = {
|
|
4047
4059
|
maxRecycled: 10,
|
|
4048
4060
|
recycledList: [],
|
|
4049
|
-
patternTasker: new TaskProcessor
|
|
4061
|
+
patternTasker: new TaskProcessor({
|
|
4062
|
+
parallel: 1
|
|
4063
|
+
}),
|
|
4050
4064
|
get(config) {
|
|
4051
4065
|
let image = Resource.get(config.url);
|
|
4052
4066
|
if (!image) Resource.set(config.url, image = Creator.image(config));
|
|
@@ -6923,7 +6937,7 @@ class LeafLevelList {
|
|
|
6923
6937
|
}
|
|
6924
6938
|
}
|
|
6925
6939
|
|
|
6926
|
-
const version = "1.12.
|
|
6940
|
+
const version = "1.12.2";
|
|
6927
6941
|
|
|
6928
6942
|
const debug$4 = Debug.get("LeaferCanvas");
|
|
6929
6943
|
|
|
@@ -6955,6 +6969,7 @@ class LeaferCanvas extends LeaferCanvasBase {
|
|
|
6955
6969
|
if (this.parentView) {
|
|
6956
6970
|
const pStyle = this.parentView.style;
|
|
6957
6971
|
pStyle.webkitUserSelect = pStyle.userSelect = "none";
|
|
6972
|
+
this.view.classList.add("leafer-canvas-view");
|
|
6958
6973
|
}
|
|
6959
6974
|
if (Platform.syncDomFont && !this.parentView) {
|
|
6960
6975
|
style.display = "none";
|
|
@@ -7014,19 +7029,9 @@ class LeaferCanvas extends LeaferCanvasBase {
|
|
|
7014
7029
|
updateViewSize() {
|
|
7015
7030
|
const {width: width, height: height, pixelRatio: pixelRatio} = this;
|
|
7016
7031
|
const {style: style} = this.view;
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
if (isUndefined(autoWidthStr)) this.autoWidthStr = style.width || "";
|
|
7021
|
-
style.width = config.width + "px";
|
|
7022
|
-
} else if (!isUndefined(autoWidthStr)) style.width = autoWidthStr;
|
|
7023
|
-
if (config.height) {
|
|
7024
|
-
if (isUndefined(autoHeightStr)) this.autoHeightStr = style.height || "";
|
|
7025
|
-
style.height = config.height + "px";
|
|
7026
|
-
} else if (!isUndefined(autoHeightStr)) style.height = autoHeightStr;
|
|
7027
|
-
} else {
|
|
7028
|
-
style.width = width + "px";
|
|
7029
|
-
style.height = height + "px";
|
|
7032
|
+
style.width = width + "px";
|
|
7033
|
+
style.height = height + "px";
|
|
7034
|
+
if (!this.unreal) {
|
|
7030
7035
|
this.view.width = Math.ceil(width * pixelRatio);
|
|
7031
7036
|
this.view.height = Math.ceil(height * pixelRatio);
|
|
7032
7037
|
}
|
|
@@ -7114,20 +7119,20 @@ class LeaferCanvas extends LeaferCanvasBase {
|
|
|
7114
7119
|
}
|
|
7115
7120
|
unrealCanvas() {
|
|
7116
7121
|
if (!this.unreal && this.parentView) {
|
|
7117
|
-
|
|
7122
|
+
let view = this.view;
|
|
7118
7123
|
if (view) view.remove();
|
|
7119
|
-
this.view =
|
|
7124
|
+
view = this.view = document.createElement("div");
|
|
7125
|
+
this.parentView.appendChild(this.view);
|
|
7126
|
+
view.classList.add("leafer-app-view");
|
|
7120
7127
|
this.unreal = true;
|
|
7121
7128
|
}
|
|
7122
7129
|
}
|
|
7123
7130
|
destroy() {
|
|
7124
|
-
|
|
7131
|
+
const {view: view} = this;
|
|
7132
|
+
if (view) {
|
|
7125
7133
|
this.stopAutoLayout();
|
|
7126
7134
|
this.stopListenPixelRatio();
|
|
7127
|
-
if (
|
|
7128
|
-
const view = this.view;
|
|
7129
|
-
if (view.parentElement) view.remove();
|
|
7130
|
-
}
|
|
7135
|
+
if (view.parentElement) view.remove();
|
|
7131
7136
|
super.destroy();
|
|
7132
7137
|
}
|
|
7133
7138
|
}
|
|
@@ -8293,7 +8298,7 @@ const UIRender = {
|
|
|
8293
8298
|
if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
|
|
8294
8299
|
}
|
|
8295
8300
|
} else {
|
|
8296
|
-
if (data.
|
|
8301
|
+
if (data.__pathForRender) drawFast(this, canvas, options); else this.__drawFast(canvas, options);
|
|
8297
8302
|
}
|
|
8298
8303
|
},
|
|
8299
8304
|
__drawShape(canvas, options) {
|
|
@@ -8417,7 +8422,7 @@ let UI = UI_1 = class UI extends Leaf {
|
|
|
8417
8422
|
getPath(curve, pathForRender) {
|
|
8418
8423
|
this.__layout.update();
|
|
8419
8424
|
let path = pathForRender ? this.__.__pathForRender : this.__.path;
|
|
8420
|
-
if (!path) pen.set(path = []), this.__drawPathByBox(pen);
|
|
8425
|
+
if (!path) pen.set(path = []), this.__drawPathByBox(pen, !pathForRender);
|
|
8421
8426
|
return curve ? PathConvert.toCanvasData(path, true) : path;
|
|
8422
8427
|
}
|
|
8423
8428
|
getPathString(curve, pathForRender, floatLength) {
|
|
@@ -8445,17 +8450,18 @@ let UI = UI_1 = class UI extends Leaf {
|
|
|
8445
8450
|
}
|
|
8446
8451
|
__drawPath(canvas) {
|
|
8447
8452
|
canvas.beginPath();
|
|
8448
|
-
this.__drawPathByData(canvas, this.__.path);
|
|
8453
|
+
this.__drawPathByData(canvas, this.__.path, true);
|
|
8449
8454
|
}
|
|
8450
|
-
__drawPathByData(drawer, data) {
|
|
8451
|
-
data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
|
|
8455
|
+
__drawPathByData(drawer, data, ignoreCornerRadius) {
|
|
8456
|
+
data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer, ignoreCornerRadius);
|
|
8452
8457
|
}
|
|
8453
|
-
__drawPathByBox(drawer) {
|
|
8458
|
+
__drawPathByBox(drawer, ignoreCornerRadius) {
|
|
8454
8459
|
const {x: x, y: y, width: width, height: height} = this.__layout.boxBounds;
|
|
8455
|
-
if (this.__.cornerRadius) {
|
|
8460
|
+
if (this.__.cornerRadius && !ignoreCornerRadius) {
|
|
8456
8461
|
const {cornerRadius: cornerRadius} = this.__;
|
|
8457
8462
|
drawer.roundRect(x, y, width, height, isNumber(cornerRadius) ? [ cornerRadius ] : cornerRadius);
|
|
8458
8463
|
} else drawer.rect(x, y, width, height);
|
|
8464
|
+
drawer.closePath();
|
|
8459
8465
|
}
|
|
8460
8466
|
drawImagePlaceholder(_paint, canvas, renderOptions) {
|
|
8461
8467
|
Paint.fill(this.__.placeholderColor, this, canvas, renderOptions);
|
|
@@ -8724,6 +8730,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
8724
8730
|
get layoutLocked() {
|
|
8725
8731
|
return !this.layouter.running;
|
|
8726
8732
|
}
|
|
8733
|
+
get view() {
|
|
8734
|
+
return this.canvas && this.canvas.view;
|
|
8735
|
+
}
|
|
8727
8736
|
get FPS() {
|
|
8728
8737
|
return this.renderer ? this.renderer.FPS : 60;
|
|
8729
8738
|
}
|
|
@@ -8775,7 +8784,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
8775
8784
|
this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
|
|
8776
8785
|
if (this.isApp) this.__setApp();
|
|
8777
8786
|
this.__checkAutoLayout();
|
|
8778
|
-
this.view = canvas.view;
|
|
8779
8787
|
if (!parentApp) {
|
|
8780
8788
|
this.selector = Creator.selector(this);
|
|
8781
8789
|
this.interaction = Creator.interaction(this, canvas, this.selector, config);
|
|
@@ -9055,7 +9063,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
9055
9063
|
if (this.canvasManager) this.canvasManager.destroy();
|
|
9056
9064
|
}
|
|
9057
9065
|
if (this.canvas) this.canvas.destroy();
|
|
9058
|
-
this.config.view = this.
|
|
9066
|
+
this.config.view = this.parentApp = null;
|
|
9059
9067
|
if (this.userConfig) this.userConfig.view = null;
|
|
9060
9068
|
super.destroy();
|
|
9061
9069
|
setTimeout(() => {
|
|
@@ -9239,7 +9247,6 @@ let Ellipse = class Ellipse extends UI {
|
|
|
9239
9247
|
if (startAngle || endAngle) {
|
|
9240
9248
|
if (innerRadius < 1) ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false);
|
|
9241
9249
|
ellipse(path, rx, ry, rx, ry, 0, endAngle, startAngle, true);
|
|
9242
|
-
if (innerRadius < 1) closePath$2(path);
|
|
9243
9250
|
} else {
|
|
9244
9251
|
if (innerRadius < 1) {
|
|
9245
9252
|
ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
|
|
@@ -9247,16 +9254,16 @@ let Ellipse = class Ellipse extends UI {
|
|
|
9247
9254
|
}
|
|
9248
9255
|
ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
|
|
9249
9256
|
}
|
|
9250
|
-
if (Platform.ellipseToCurve) this.__.path = this.getPath(true);
|
|
9251
9257
|
} else {
|
|
9252
9258
|
if (startAngle || endAngle) {
|
|
9253
9259
|
moveTo$3(path, rx, ry);
|
|
9254
9260
|
ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle, false);
|
|
9255
|
-
closePath$2(path);
|
|
9256
9261
|
} else {
|
|
9257
9262
|
ellipse(path, rx, ry, rx, ry);
|
|
9258
9263
|
}
|
|
9259
9264
|
}
|
|
9265
|
+
closePath$2(path);
|
|
9266
|
+
if (Platform.ellipseToCurve) this.__.path = this.getPath(true);
|
|
9260
9267
|
}
|
|
9261
9268
|
};
|
|
9262
9269
|
|
|
@@ -10357,10 +10364,12 @@ const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$1} = Math;
|
|
|
10357
10364
|
function createPatternTask(paint, ui, canvas, renderOptions) {
|
|
10358
10365
|
if (!paint.patternTask) {
|
|
10359
10366
|
paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
|
|
10360
|
-
paint
|
|
10361
|
-
if (canvas.bounds.hit(ui.__nowWorld)) PaintImage.createPattern(paint, ui, canvas, renderOptions);
|
|
10367
|
+
PaintImage.createPattern(paint, ui, canvas, renderOptions);
|
|
10362
10368
|
ui.forceUpdate("surface");
|
|
10363
|
-
}),
|
|
10369
|
+
}), 0, () => {
|
|
10370
|
+
paint.patternTask = null;
|
|
10371
|
+
return canvas.bounds.hit(ui.__nowWorld);
|
|
10372
|
+
});
|
|
10364
10373
|
}
|
|
10365
10374
|
}
|
|
10366
10375
|
|