leafer-draw 1.6.6 → 1.7.0

package/dist/web.module.js

@@ -43,7 +43,7 @@ const IncrementId = {
 };
 const I$1 = IncrementId;
 
-const { round: round$3, pow: pow$1, PI: PI$4 } = Math;
+const { round: round$3, pow: pow$1, PI: PI$3 } = Math;
 const MathHelper = {
     within(value, min, max) {
         if (typeof min === 'object')
@@ -139,9 +139,9 @@ const MathHelper = {
 function randInt(num) {
     return Math.round(Math.random() * num);
 }
-const OneRadian = PI$4 / 180;
-const PI2 = PI$4 * 2;
-const PI_2 = PI$4 / 2;
+const OneRadian = PI$3 / 180;
+const PI2 = PI$3 * 2;
+const PI_2 = PI$3 / 2;
 function getPointData() { return { x: 0, y: 0 }; }
 function getBoundsData() { return { x: 0, y: 0, width: 0, height: 0 }; }
 function getMatrixData() { return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }; }
@@ -436,7 +436,7 @@ const MatrixHelper = {
 const M$6 = MatrixHelper;
 
 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, PI: PI$3 } = Math;
+const { sin: sin$4, cos: cos$4, abs: abs$4, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2 } = Math;
 const PointHelper = {
     defaultPoint: getPointData(),
     tempPoint: {},
@@ -549,10 +549,11 @@ const PointHelper = {
     getRadianFrom(fromX, fromY, originX, originY, toX, toY, toOriginX, toOriginY) {
         if (toOriginX === undefined)
             toOriginX = originX, toOriginY = originY;
-        let fromAngle = atan2$2(fromY - originY, fromX - originX);
-        let toAngle = atan2$2(toY - toOriginY, toX - toOriginX);
-        const radian = toAngle - fromAngle;
-        return radian < -PI$3 ? radian + PI2 : radian;
+        const a = fromX - originX;
+        const b = fromY - originY;
+        const c = toX - toOriginX;
+        const d = toY - toOriginY;
+        return Math.atan2(a * d - b * c, a * c + b * d);
     },
     getAtan2(t, to) {
         return atan2$2(to.y - t.y, to.x - t.x);
@@ -3339,7 +3340,7 @@ const { getCenterX, getCenterY } = PointHelper;
 const { arcTo } = PathCommandDataHelper;
 const PathCorner = {
     smooth(data, cornerRadius, _cornerSmoothing) {
-        let command, commandLen;
+        let command, lastCommand, commandLen;
         let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
         const len = data.length;
         const smooth = [];
@@ -3377,8 +3378,10 @@ const PathCorner = {
                     lastY = y;
                     break;
                 case Z:
-                    arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
-                    smooth.push(Z);
+                    if (lastCommand !== Z) {
+                        arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
+                        smooth.push(Z);
+                    }
                     i += 1;
                     break;
                 default:
@@ -3387,6 +3390,7 @@ const PathCorner = {
                         smooth.push(data[i + j]);
                     i += commandLen;
             }
+            lastCommand = command;
         }
         if (command !== Z) {
             smooth[1] = startX;
@@ -3883,12 +3887,12 @@ class LeaferImage {
         try {
             if (transform && pattern.setTransform) {
                 pattern.setTransform(transform);
-                transform = null;
+                transform = undefined;
             }
         }
         catch (_a) { }
         if (paint)
-            paint.transform = transform;
+            DataHelper.stintSet(paint, 'transform', transform);
         return pattern;
     }
     destroy() {
@@ -3993,10 +3997,14 @@ function pathInputType(defaultValue) {
     }));
 }
 const pathType = boundsType;
-function affectStrokeBoundsType(defaultValue) {
+function affectStrokeBoundsType(defaultValue, useStroke) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value) && doStrokeType(this);
+            if (this.__setAttr(key, value)) {
+                doStrokeType(this);
+                if (useStroke)
+                    this.__.__useStroke = true;
+            }
         }
     }));
 }
@@ -5422,6 +5430,8 @@ const LeafBounds = {
 
 const LeafRender = {
     __render(canvas, options) {
+        if (options.shape)
+            return this.__renderShape(canvas, options);
         if (this.__worldOpacity) {
             const data = this.__;
             canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
@@ -5431,12 +5441,10 @@ const LeafRender = {
                     return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(true, true);
                 this.__draw(tempCanvas, options, canvas);
-                if (this.__worldFlipped) {
+                if (this.__worldFlipped)
                     canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, data.__blendMode, true);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, data.__blendMode);
-                }
                 tempCanvas.recycle(this.__nowWorld);
             }
             else {
@@ -5446,6 +5454,12 @@ const LeafRender = {
                 Debug.drawBounds(this, canvas, options);
         }
     },
+    __renderShape(canvas, options) {
+        if (this.__worldOpacity) {
+            canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
+            this.__drawShape(canvas, options);
+        }
+    },
     __clip(canvas, options) {
         if (this.__worldOpacity) {
             canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
@@ -5865,7 +5879,8 @@ let Leaf = class Leaf {
     __drawFast(_canvas, _options) { }
     __draw(_canvas, _options, _originCanvas) { }
     __clip(_canvas, _options) { }
-    __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
+    __renderShape(_canvas, _options) { }
+    __drawShape(_canvas, _options) { }
     __updateWorldOpacity() { }
     __updateChange() { }
     __drawPath(_canvas) { }
@@ -6233,7 +6248,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.6.6";
+const version = "1.7.0";
 
 const debug$4 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -7174,13 +7189,9 @@ class UIData extends LeafData {
         else
             return strokeWidth;
     }
-    get __hasStroke() { return this.stroke && this.strokeWidth; }
-    get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
     get __hasMultiPaint() {
         const t = this;
-        if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
-            return true;
-        return t.fill && this.__hasStroke;
+        return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect;
     }
     get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
     get __hasSurface() { const t = this; return (t.fill || t.stroke); }
@@ -7471,15 +7482,18 @@ const { stintSet: stintSet$1 } = DataHelper;
 const UIRender = {
     __updateChange() {
         const data = this.__;
+        if (data.__useStroke) {
+            const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
+            stintSet$1(this.__world, 'half', useStroke && data.strokeAlign === 'center' && data.strokeWidth % 2);
+            stintSet$1(data, '__fillAfterStroke', useStroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
+        }
         if (data.__useEffect) {
             const { shadow, fill, stroke } = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
             stintSet$1(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !(shadow[0].box && data.__isTransparentFill) && fill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
             data.__useEffect = !!(shadow || otherEffect);
         }
-        stintSet$1(this.__world, 'half', data.__hasHalf);
-        stintSet$1(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
         data.__checkSingle();
-        stintSet$1(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+        stintSet$1(data, '__complex', (data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect));
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -7537,18 +7551,15 @@ const UIRender = {
                 this.__drawFast(canvas, options);
         }
     },
-    __renderShape(canvas, options, ignoreFill, ignoreStroke) {
-        if (this.__worldOpacity) {
-            canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
-            const { fill, stroke } = this.__;
-            this.__drawRenderPath(canvas);
-            if (fill && !ignoreFill)
-                this.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-            if (this.__.__isCanvas)
-                this.__drawAfterFill(canvas, options);
-            if (stroke && !ignoreStroke)
-                this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
-        }
+    __drawShape(canvas, options) {
+        this.__drawRenderPath(canvas);
+        const data = this.__, { fill, stroke } = data;
+        if (fill && !options.ignoreFill)
+            data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+        if (data.__isCanvas)
+            this.__drawAfterFill(canvas, options);
+        if (stroke && !options.ignoreStroke)
+            data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
     },
     __drawAfterFill(canvas, options) {
         if (this.__.__clipAfterFill) {
@@ -7673,12 +7684,14 @@ let UI = UI_1 = class UI extends Leaf {
         }
     }
     __updateRenderPath() {
-        if (this.__.path) {
-            const data = this.__;
+        const data = this.__;
+        if (data.path) {
             data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
             if (data.__useArrow)
                 PathArrow.addArrows(this, !data.cornerRadius);
         }
+        else
+            data.__pathForRender && (data.__pathForRender = undefined);
     }
     __drawRenderPath(canvas) {
         canvas.beginPath();
@@ -7889,13 +7902,13 @@ __decorate([
     surfaceType()
 ], UI.prototype, "fill", void 0);
 __decorate([
-    strokeType()
+    strokeType(undefined, true)
 ], UI.prototype, "stroke", void 0);
 __decorate([
     strokeType('inside')
 ], UI.prototype, "strokeAlign", void 0);
 __decorate([
-    strokeType(1)
+    strokeType(1, true)
 ], UI.prototype, "strokeWidth", void 0);
 __decorate([
     strokeType(false)
@@ -8322,7 +8335,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             list.push(item);
         this.requestRender();
     }
-    zoom(_zoomType, _padding, _fixedScale, _transition) {
+    zoom(_zoomType, _optionsOrPadding, _scroll, _transition) {
         return Plugin.need('view');
     }
     getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
@@ -8367,7 +8380,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                 Leafer_1.list.remove(this);
                 try {
                     this.stop();
-                    this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
+                    this.emitLeafer(LeaferEvent.END);
                     this.__removeListenEvents();
                     this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
                     this.__controllers.length = 0;
@@ -8495,7 +8508,7 @@ let Box = class Box extends Group {
     }
     __drawContent(canvas, options) {
         this.__renderGroup(canvas, options);
-        if (this.__.__hasStroke) {
+        if (this.__.__useStroke) {
             canvas.setWorld(this.__nowWorld);
             this.__drawRenderPath(canvas);
         }
@@ -8715,8 +8728,8 @@ let Polygon = class Polygon extends UI {
             for (let i = 1; i < sides; i++) {
                 lineTo$1(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
             }
+            closePath$1(path);
         }
-        closePath$1(path);
     }
     __updateRenderPath() { }
     __updateBoxBounds() { }
@@ -8950,10 +8963,15 @@ let Text = class Text extends UI {
         const box = this.__box;
         if (box)
             box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
-        if (this.textEditing && !Export.running)
+        if (this.textEditing && !options.exporting)
             return;
         super.__draw(canvas, options, originCanvas);
     }
+    __drawShape(canvas, options) {
+        if (options.shape)
+            this.__box && this.__box.__drawShape(canvas, options);
+        super.__drawShape(canvas, options);
+    }
     destroy() {
         if (this.boxStyle)
             this.boxStyle = null;
@@ -9414,7 +9432,7 @@ const PaintModule = {
 };
 
 let origin = {};
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate } = MatrixHelper;
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
     translate$1(transform, box.x + x, box.y + y);
@@ -9423,13 +9441,15 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.transform = transform;
 }
-function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
     const transform = get$3();
-    translate$1(transform, box.x + x, box.y + y);
-    if (scaleX)
-        scaleHelper(transform, scaleX, scaleY);
     if (rotation)
         rotate(transform, rotation);
+    if (skew)
+        skewHelper(transform, skew.x, skew.y);
+    if (scaleX)
+        scaleHelper(transform, scaleX, scaleY);
+    translate$1(transform, box.x + x, box.y + y);
     data.transform = transform;
 }
 function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
@@ -9466,11 +9486,13 @@ const tempBox = new Bounds();
 const tempScaleData = {};
 const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync } = paint;
+    const { changeful, sync, editing } = paint;
     if (changeful)
         leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
+    if (editing)
+        leafPaint.editing = editing;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
@@ -9479,7 +9501,7 @@ function getPatternData(paint, box, image) {
     if (paint.mode === 'strench')
         paint.mode = 'stretch';
     let { width, height } = image;
-    const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
+    const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint;
     const sameBox = box.width === width && box.height === height;
     const data = { mode };
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -9513,8 +9535,8 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+            if (tempImage.x || tempImage.y || scaleX || rotation || skew)
+                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
@@ -9591,11 +9613,11 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
                 }
                 onLoadSuccess(ui, event);
             }
-            leafPaint.loadId = null;
+            leafPaint.loadId = undefined;
         }, (error) => {
             ignoreRender(ui, false);
             onLoadError(ui, event, error);
-            leafPaint.loadId = null;
+            leafPaint.loadId = undefined;
         });
         if (ui.placeholderColor) {
             if (!ui.placeholderDelay)
@@ -9661,6 +9683,8 @@ function createPattern(ui, paint, pixelRatio) {
         const { image, data } = paint;
         let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
         if (sx) {
+            sx = abs$1(sx);
+            sy = abs$1(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);