leafer-ui 1.6.7 → 1.7.0

package/dist/web.js

@@ -46,7 +46,7 @@ var LeaferUI = (function (exports) {
     };
     const I$2 = 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')
@@ -142,9 +142,9 @@ var LeaferUI = (function (exports) {
     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 }; }
@@ -439,7 +439,7 @@ var LeaferUI = (function (exports) {
     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: {},
@@ -552,10 +552,11 @@ var LeaferUI = (function (exports) {
         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);
@@ -3342,7 +3343,7 @@ var LeaferUI = (function (exports) {
     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 = [];
@@ -3380,8 +3381,10 @@ var LeaferUI = (function (exports) {
                         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:
@@ -3390,6 +3393,7 @@ var LeaferUI = (function (exports) {
                             smooth.push(data[i + j]);
                         i += commandLen;
                 }
+                lastCommand = command;
             }
             if (command !== Z) {
                 smooth[1] = startX;
@@ -3886,12 +3890,12 @@ var LeaferUI = (function (exports) {
             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() {
@@ -3996,10 +4000,14 @@ var LeaferUI = (function (exports) {
         }));
     }
     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;
+                }
             }
         }));
     }
@@ -5425,6 +5433,8 @@ var LeaferUI = (function (exports) {
 
     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));
@@ -5434,12 +5444,10 @@ var LeaferUI = (function (exports) {
                         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 {
@@ -5449,6 +5457,12 @@ var LeaferUI = (function (exports) {
                     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));
@@ -5868,7 +5882,8 @@ var LeaferUI = (function (exports) {
         __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) { }
@@ -6236,7 +6251,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.6.7";
+    const version = "1.7.0";
 
     const debug$5 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -7334,13 +7349,9 @@ var LeaferUI = (function (exports) {
             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); }
@@ -7631,15 +7642,18 @@ var LeaferUI = (function (exports) {
     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);
@@ -7697,18 +7711,15 @@ var LeaferUI = (function (exports) {
                     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) {
@@ -7833,12 +7844,14 @@ var LeaferUI = (function (exports) {
             }
         }
         __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();
@@ -8049,13 +8062,13 @@ var LeaferUI = (function (exports) {
         surfaceType()
     ], exports.UI.prototype, "fill", void 0);
     __decorate([
-        strokeType()
+        strokeType(undefined, true)
     ], exports.UI.prototype, "stroke", void 0);
     __decorate([
         strokeType('inside')
     ], exports.UI.prototype, "strokeAlign", void 0);
     __decorate([
-        strokeType(1)
+        strokeType(1, true)
     ], exports.UI.prototype, "strokeWidth", void 0);
     __decorate([
         strokeType(false)
@@ -8482,7 +8495,7 @@ var LeaferUI = (function (exports) {
                 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 }; }
@@ -8527,7 +8540,7 @@ var LeaferUI = (function (exports) {
                     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;
@@ -8655,7 +8668,7 @@ var LeaferUI = (function (exports) {
         }
         __drawContent(canvas, options) {
             this.__renderGroup(canvas, options);
-            if (this.__.__hasStroke) {
+            if (this.__.__useStroke) {
                 canvas.setWorld(this.__nowWorld);
                 this.__drawRenderPath(canvas);
             }
@@ -8875,8 +8888,8 @@ var LeaferUI = (function (exports) {
                 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() { }
@@ -9114,6 +9127,11 @@ var LeaferUI = (function (exports) {
                 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;
@@ -9935,6 +9953,7 @@ var LeaferUI = (function (exports) {
             delta: { x: 80 / 4, y: 8.0 },
         },
         pointer: {
+            type: 'pointer',
             snap: true,
             hitRadius: 5,
             tapTime: 120,
@@ -10478,7 +10497,7 @@ var LeaferUI = (function (exports) {
             h.resize({ width, height, pixelRatio: 1 });
             h.clear();
             ImageManager.patternLocked = true;
-            this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+            this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y), ignoreFill: !isHitPixelFill, ignoreStroke: !isHitPixelStroke });
             ImageManager.patternLocked = false;
             h.resetTransform();
             data.__isHitPixel = true;
@@ -10615,6 +10634,9 @@ var LeaferUI = (function (exports) {
 
     const { pathCanDrag } = InteractionHelper;
     class Interaction extends InteractionBase {
+        get notPointer() { const { p } = this; return p.type !== 'pointer' || p.touch || this.useMultiTouch; }
+        get notTouch() { const { p } = this; return p.type === 'mouse' || this.usePointer; }
+        get notMouse() { return this.usePointer || this.useTouch; }
         __listenEvents() {
             super.__listenEvents();
             const view = this.view = this.canvas.view;
@@ -10700,13 +10722,13 @@ var LeaferUI = (function (exports) {
         }
         onPointerDown(e) {
             this.preventDefaultPointer(e);
-            if (this.config.pointer.touch || this.useMultiTouch)
+            if (this.notPointer)
                 return;
             this.usePointer || (this.usePointer = true);
             this.pointerDown(PointerEventHelper.convert(e, this.getLocal(e)));
         }
         onPointerMove(e, isLeave) {
-            if (this.config.pointer.touch || this.useMultiTouch || this.preventWindowPointer(e))
+            if (this.notPointer || this.preventWindowPointer(e))
                 return;
             this.usePointer || (this.usePointer = true);
             const data = PointerEventHelper.convert(e, this.getLocal(e, true));
@@ -10718,7 +10740,7 @@ var LeaferUI = (function (exports) {
         onPointerUp(e) {
             if (this.downData)
                 this.preventDefaultPointer(e);
-            if (this.config.pointer.touch || this.useMultiTouch || this.preventWindowPointer(e))
+            if (this.notPointer || this.preventWindowPointer(e))
                 return;
             this.pointerUp(PointerEventHelper.convert(e, this.getLocal(e)));
         }
@@ -10729,24 +10751,24 @@ var LeaferUI = (function (exports) {
         }
         onMouseDown(e) {
             this.preventDefaultPointer(e);
-            if (this.useTouch || this.usePointer)
+            if (this.notMouse)
                 return;
             this.pointerDown(PointerEventHelper.convertMouse(e, this.getLocal(e)));
         }
         onMouseMove(e) {
-            if (this.useTouch || this.usePointer || this.preventWindowPointer(e))
+            if (this.notMouse || this.preventWindowPointer(e))
                 return;
             this.pointerMove(PointerEventHelper.convertMouse(e, this.getLocal(e, true)));
         }
         onMouseUp(e) {
             if (this.downData)
                 this.preventDefaultPointer(e);
-            if (this.useTouch || this.usePointer || this.preventWindowPointer(e))
+            if (this.notMouse || this.preventWindowPointer(e))
                 return;
             this.pointerUp(PointerEventHelper.convertMouse(e, this.getLocal(e)));
         }
         onMouseCancel() {
-            if (this.useTouch || this.usePointer)
+            if (this.notMouse)
                 return;
             this.pointerCancel();
         }
@@ -10757,7 +10779,7 @@ var LeaferUI = (function (exports) {
             if (preventDefault === true || (preventDefault === 'auto' && pathCanDrag(this.findPath(local))))
                 e.preventDefault();
             this.multiTouchStart(e);
-            if (this.usePointer)
+            if (this.notTouch)
                 return;
             if (this.touchTimer) {
                 window.clearTimeout(this.touchTimer);
@@ -10768,14 +10790,14 @@ var LeaferUI = (function (exports) {
         }
         onTouchMove(e) {
             this.multiTouchMove(e);
-            if (this.usePointer || this.preventWindowPointer(e))
+            if (this.notTouch || this.preventWindowPointer(e))
                 return;
             const touch = PointerEventHelper.getTouch(e);
             this.pointerMove(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
         }
         onTouchEnd(e) {
             this.multiTouchEnd();
-            if (this.usePointer || this.preventWindowPointer(e))
+            if (this.notTouch || this.preventWindowPointer(e))
                 return;
             if (this.touchTimer)
                 clearTimeout(this.touchTimer);
@@ -10786,7 +10808,7 @@ var LeaferUI = (function (exports) {
             this.pointerUp(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
         }
         onTouchCancel() {
-            if (this.usePointer)
+            if (this.notTouch)
                 return;
             this.pointerCancel();
         }
@@ -11191,7 +11213,7 @@ var LeaferUI = (function (exports) {
     };
 
     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);
@@ -11200,13 +11222,15 @@ var LeaferUI = (function (exports) {
             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) {
@@ -11243,11 +11267,13 @@ var LeaferUI = (function (exports) {
     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) {
@@ -11256,7 +11282,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -11290,8 +11316,8 @@ var LeaferUI = (function (exports) {
                 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)
@@ -11368,11 +11394,11 @@ var LeaferUI = (function (exports) {
                     }
                     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)
@@ -11438,6 +11464,8 @@ var LeaferUI = (function (exports) {
             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);