leafer-draw 1.12.1 → 1.12.3

package/dist/web.module.js

@@ -461,7 +461,7 @@ function getMatrixData() {
 
 const {sin: sin$5, cos: cos$5, acos: acos, sqrt: sqrt$3} = Math;
 
-const {float: float$1} = MathHelper;
+const {float: float$2} = MathHelper;
 
 const tempPoint$3 = {};
 
@@ -712,12 +712,12 @@ const MatrixHelper = {
                 const cosR = c / scaleY;
                 rotation = PI_2 - (d > 0 ? acos(-cosR) : -acos(cosR));
             }
-            const cosR = float$1(cos$5(rotation));
+            const cosR = float$2(cos$5(rotation));
             const sinR = sin$5(rotation);
-            scaleX = float$1(scaleX), scaleY = float$1(scaleY);
-            skewX = cosR ? float$1((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
-            skewY = cosR ? float$1((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
-            rotation = float$1(rotation / OneRadian);
+            scaleX = float$2(scaleX), scaleY = float$2(scaleY);
+            skewX = cosR ? float$2((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
+            skewY = cosR ? float$2((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
+            rotation = float$2(rotation / OneRadian);
         } else {
             scaleX = a;
             scaleY = d;
@@ -761,6 +761,8 @@ const MatrixHelper = {
 
 const M$6 = MatrixHelper;
 
+const {float: float$1} = MathHelper;
+
 const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3} = MatrixHelper;
 
 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 = {
         P$5.toInnerRadiusPointOf(t, matrix, temp);
         return temp;
     },
+    copyRadiusPoint(t, point, x, y) {
+        copy$9(t, point);
+        setRadius(t, x, y);
+        return t;
+    },
     toInnerRadiusPointOf(t, matrix, to) {
         to || (to = t);
         toInnerPoint$2(matrix, t, to);
@@ -895,7 +902,7 @@ const PointHelper = {
         return points;
     },
     isSame(t, point) {
-        return t.x === point.x && t.y === point.y;
+        return float$1(t.x) === float$1(point.x) && float$1(t.y) === float$1(point.y);
     },
     reset(t) {
         P$5.reset(t);
@@ -904,7 +911,7 @@ const PointHelper = {
 
 const P$5 = PointHelper;
 
-const {getDistanceFrom: getDistanceFrom, copy: copy$9, getAtan2: getAtan2} = P$5;
+const {getDistanceFrom: getDistanceFrom, copy: copy$9, setRadius: setRadius, getAtan2: getAtan2} = P$5;
 
 class Point {
     constructor(x, y) {
@@ -2407,7 +2414,7 @@ class LeaferCanvasBase extends Canvas$1 {
         const {pixelRatio: pixelRatio} = this;
         this.filter = `blur(${blur * pixelRatio}px)`;
     }
-    copyWorld(canvas, from, to, blendMode, ceilPixel = true) {
+    copyWorld(canvas, from, to, blendMode, ceilPixel) {
         if (blendMode) this.blendMode = blendMode;
         if (from) {
             this.setTempPixelBounds(from, ceilPixel);
@@ -2418,7 +2425,7 @@ class LeaferCanvasBase extends Canvas$1 {
         }
         if (blendMode) this.blendMode = "source-over";
     }
-    copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode, ceilPixel = true) {
+    copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode, ceilPixel) {
         if (fromWorld.b || fromWorld.c) {
             this.save();
             this.resetTransform();
@@ -2431,7 +2438,7 @@ class LeaferCanvasBase extends Canvas$1 {
             if (blendMode) this.blendMode = "source-over";
         }
     }
-    copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform, ceilPixel = true) {
+    copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform, ceilPixel) {
         this.resetTransform();
         this.copyWorld(canvas, from, to, blendMode, ceilPixel);
         if (!onlyResetTransform) this.useWorldTransform();
@@ -2658,7 +2665,7 @@ const BezierHelper = {
         data.push(M$5, points[0], points[1]);
         if (curve && points.length > 5) {
             let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
-            let ba, cb, d, len = points.length;
+            let baX, baY, ba, cb, d, len = points.length;
             const t = curve === true ? .5 : curve;
             if (close) {
                 points = [ points[len - 2], points[len - 1], ...points, points[0], points[1], points[2], points[3] ];
@@ -2671,7 +2678,9 @@ const BezierHelper = {
                 bY = points[i + 1];
                 cX = points[i + 2];
                 cY = points[i + 3];
-                ba = sqrt$1(pow(bX - aX, 2) + pow(bY - aY, 2));
+                baX = bX - aX;
+                baY = bY - aY;
+                ba = sqrt$1(pow(baX, 2) + pow(baY, 2));
                 cb = sqrt$1(pow(cX - bX, 2) + pow(cY - bY, 2));
                 if (!ba && !cb) continue;
                 d = ba + cb;
@@ -2684,7 +2693,7 @@ const BezierHelper = {
                 if (i === 2) {
                     if (!close) data.push(Q$4, c1X, c1Y, bX, bY);
                 } else {
-                    data.push(C$4, c2X, c2Y, c1X, c1Y, bX, bY);
+                    if (baX || baY) data.push(C$4, c2X, c2Y, c1X, c1Y, bX, bY);
                 }
                 c2X = bX + cb * cX;
                 c2Y = bY + cb * cY;
@@ -3269,6 +3278,7 @@ const PathCommandDataHelper = {
         }
     },
     ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
+        if (radiusX === radiusY) return arc$2(data, x, y, radiusX, startAngle, endAngle, anticlockwise);
         if (isNull(rotation)) {
             data.push(F$3, x, y, radiusX, radiusY);
         } else {
@@ -3281,6 +3291,7 @@ const PathCommandDataHelper = {
         if (isNull(startAngle)) {
             data.push(P$2, x, y, radius);
         } else {
+            if (isNull(startAngle)) startAngle = 0;
             if (isNull(endAngle)) endAngle = 360;
             data.push(O$2, x, y, radius, startAngle, endAngle, anticlockwise ? 1 : 0);
         }
@@ -3631,6 +3642,7 @@ const PathCorner = {
     smooth(data, cornerRadius, _cornerSmoothing) {
         let command, lastCommand, commandLen;
         let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
+        if (isArray(cornerRadius)) cornerRadius = cornerRadius[0] || 0;
         const len = data.length;
         const smooth = [];
         while (i < len) {
@@ -4046,7 +4058,9 @@ const R = Resource;
 const ImageManager = {
     maxRecycled: 10,
     recycledList: [],
-    patternTasker: new TaskProcessor,
+    patternTasker: new TaskProcessor({
+        parallel: 1
+    }),
     get(config) {
         let image = Resource.get(config.url);
         if (!image) Resource.set(config.url, image = Creator.image(config));
@@ -4103,6 +4117,10 @@ class LeaferImage {
     get url() {
         return this.config.url;
     }
+    get crossOrigin() {
+        const {crossOrigin: crossOrigin} = this.config;
+        return isUndefined(crossOrigin) ? Platform.image.crossOrigin : crossOrigin;
+    }
     get completed() {
         return this.ready || !!this.error;
     }
@@ -4120,12 +4138,14 @@ class LeaferImage {
         ImageManager.isFormat("svg", config) && (this.isSVG = true);
         ImageManager.hasAlphaPixel(config) && (this.hasAlphaPixel = true);
     }
-    load(onSuccess, onError) {
+    load(onSuccess, onError, thumbSize) {
         if (!this.loading) {
             this.loading = true;
-            const {crossOrigin: crossOrigin} = this.config;
             Resource.tasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                return yield Platform.origin.loadImage(this.url, isUndefined(crossOrigin) ? Platform.image.crossOrigin : crossOrigin, this).then(img => this.setView(img)).catch(e => {
+                return yield Platform.origin.loadImage(this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
+                    if (thumbSize) this.setThumbView(img);
+                    this.setView(img);
+                }).catch(e => {
                     this.error = e;
                     this.onComplete(false);
                 });
@@ -4146,9 +4166,11 @@ class LeaferImage {
     }
     setView(img) {
         this.ready = true;
-        this.width = img.naturalWidth || img.width;
-        this.height = img.naturalHeight || img.height;
-        this.view = img;
+        if (!this.width) {
+            this.width = img.width;
+            this.height = img.height;
+            this.view = img;
+        }
         this.onComplete(true);
     }
     onComplete(isSuccess) {
@@ -4194,6 +4216,19 @@ class LeaferImage {
         Platform.image.setPatternTransform(pattern, transform, paint);
         return pattern;
     }
+    getLoadUrl(_thumbSize) {
+        return this.url;
+    }
+    setThumbView(_view) {}
+    getThumbSize() {
+        return undefined;
+    }
+    getMinLevel() {
+        return undefined;
+    }
+    getLevelData(_level) {
+        return undefined;
+    }
     clearLevels(_checkUse) {}
     destroy() {
         this.clearLevels();
@@ -6923,7 +6958,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.12.1";
+const version = "1.12.3";
 
 const debug$4 = Debug.get("LeaferCanvas");
 
@@ -6955,6 +6990,7 @@ class LeaferCanvas extends LeaferCanvasBase {
         if (this.parentView) {
             const pStyle = this.parentView.style;
             pStyle.webkitUserSelect = pStyle.userSelect = "none";
+            this.view.classList.add("leafer-canvas-view");
         }
         if (Platform.syncDomFont && !this.parentView) {
             style.display = "none";
@@ -7014,19 +7050,9 @@ class LeaferCanvas extends LeaferCanvasBase {
     updateViewSize() {
         const {width: width, height: height, pixelRatio: pixelRatio} = this;
         const {style: style} = this.view;
-        if (this.unreal) {
-            const {config: config, autoWidthStr: autoWidthStr, autoHeightStr: autoHeightStr} = this;
-            if (config.width) {
-                if (isUndefined(autoWidthStr)) this.autoWidthStr = style.width || "";
-                style.width = config.width + "px";
-            } else if (!isUndefined(autoWidthStr)) style.width = autoWidthStr;
-            if (config.height) {
-                if (isUndefined(autoHeightStr)) this.autoHeightStr = style.height || "";
-                style.height = config.height + "px";
-            } else if (!isUndefined(autoHeightStr)) style.height = autoHeightStr;
-        } else {
-            style.width = width + "px";
-            style.height = height + "px";
+        style.width = width + "px";
+        style.height = height + "px";
+        if (!this.unreal) {
             this.view.width = Math.ceil(width * pixelRatio);
             this.view.height = Math.ceil(height * pixelRatio);
         }
@@ -7114,20 +7140,20 @@ class LeaferCanvas extends LeaferCanvasBase {
     }
     unrealCanvas() {
         if (!this.unreal && this.parentView) {
-            const view = this.view;
+            let view = this.view;
             if (view) view.remove();
-            this.view = this.parentView;
+            view = this.view = document.createElement("div");
+            this.parentView.appendChild(this.view);
+            view.classList.add("leafer-app-view");
             this.unreal = true;
         }
     }
     destroy() {
-        if (this.view) {
+        const {view: view} = this;
+        if (view) {
             this.stopAutoLayout();
             this.stopListenPixelRatio();
-            if (!this.unreal) {
-                const view = this.view;
-                if (view.parentElement) view.remove();
-            }
+            if (view.parentElement) view.remove();
             super.destroy();
         }
     }
@@ -8293,7 +8319,7 @@ const UIRender = {
                 if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
             }
         } else {
-            if (data.__pathInputed) drawFast(this, canvas, options); else this.__drawFast(canvas, options);
+            if (data.__pathForRender) drawFast(this, canvas, options); else this.__drawFast(canvas, options);
         }
     },
     __drawShape(canvas, options) {
@@ -8417,7 +8443,7 @@ let UI = UI_1 = class UI extends Leaf {
     getPath(curve, pathForRender) {
         this.__layout.update();
         let path = pathForRender ? this.__.__pathForRender : this.__.path;
-        if (!path) pen.set(path = []), this.__drawPathByBox(pen);
+        if (!path) pen.set(path = []), this.__drawPathByBox(pen, !pathForRender);
         return curve ? PathConvert.toCanvasData(path, true) : path;
     }
     getPathString(curve, pathForRender, floatLength) {
@@ -8445,17 +8471,18 @@ let UI = UI_1 = class UI extends Leaf {
     }
     __drawPath(canvas) {
         canvas.beginPath();
-        this.__drawPathByData(canvas, this.__.path);
+        this.__drawPathByData(canvas, this.__.path, true);
     }
-    __drawPathByData(drawer, data) {
-        data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
+    __drawPathByData(drawer, data, ignoreCornerRadius) {
+        data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer, ignoreCornerRadius);
     }
-    __drawPathByBox(drawer) {
+    __drawPathByBox(drawer, ignoreCornerRadius) {
         const {x: x, y: y, width: width, height: height} = this.__layout.boxBounds;
-        if (this.__.cornerRadius) {
+        if (this.__.cornerRadius && !ignoreCornerRadius) {
             const {cornerRadius: cornerRadius} = this.__;
             drawer.roundRect(x, y, width, height, isNumber(cornerRadius) ? [ cornerRadius ] : cornerRadius);
         } else drawer.rect(x, y, width, height);
+        drawer.closePath();
     }
     drawImagePlaceholder(_paint, canvas, renderOptions) {
         Paint.fill(this.__.placeholderColor, this, canvas, renderOptions);
@@ -8724,6 +8751,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     get layoutLocked() {
         return !this.layouter.running;
     }
+    get view() {
+        return this.canvas && this.canvas.view;
+    }
     get FPS() {
         return this.renderer ? this.renderer.FPS : 60;
     }
@@ -8775,7 +8805,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
         if (this.isApp) this.__setApp();
         this.__checkAutoLayout();
-        this.view = canvas.view;
         if (!parentApp) {
             this.selector = Creator.selector(this);
             this.interaction = Creator.interaction(this, canvas, this.selector, config);
@@ -9055,7 +9084,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                         if (this.canvasManager) this.canvasManager.destroy();
                     }
                     if (this.canvas) this.canvas.destroy();
-                    this.config.view = this.view = this.parentApp = null;
+                    this.config.view = this.parentApp = null;
                     if (this.userConfig) this.userConfig.view = null;
                     super.destroy();
                     setTimeout(() => {
@@ -9239,7 +9268,6 @@ let Ellipse = class Ellipse extends UI {
             if (startAngle || endAngle) {
                 if (innerRadius < 1) ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false);
                 ellipse(path, rx, ry, rx, ry, 0, endAngle, startAngle, true);
-                if (innerRadius < 1) closePath$2(path);
             } else {
                 if (innerRadius < 1) {
                     ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
@@ -9247,16 +9275,16 @@ let Ellipse = class Ellipse extends UI {
                 }
                 ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
             }
-            if (Platform.ellipseToCurve) this.__.path = this.getPath(true);
         } else {
             if (startAngle || endAngle) {
                 moveTo$3(path, rx, ry);
                 ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle, false);
-                closePath$2(path);
             } else {
                 ellipse(path, rx, ry, rx, ry);
             }
         }
+        closePath$2(path);
+        if (Platform.ellipseToCurve) this.__.path = this.getPath(true);
     }
 };
 
@@ -10117,7 +10145,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             ignoreRender(ui, false);
             onLoadError(ui, event, error);
             leafPaint.loadId = undefined;
-        });
+        }, paint.lod && image.getThumbSize());
         if (ui.placeholderColor) {
             if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
                 if (!image.ready) {
@@ -10357,10 +10385,12 @@ const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$1} = Math;
 function createPatternTask(paint, ui, canvas, renderOptions) {
     if (!paint.patternTask) {
         paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
-            paint.patternTask = null;
-            if (canvas.bounds.hit(ui.__nowWorld)) PaintImage.createPattern(paint, ui, canvas, renderOptions);
+            PaintImage.createPattern(paint, ui, canvas, renderOptions);
             ui.forceUpdate("surface");
-        }), 300);
+        }), 0, () => {
+            paint.patternTask = null;
+            return canvas.bounds.hit(ui.__nowWorld);
+        });
     }
 }