leafer-ui 1.6.7 → 1.7.0

package/dist/web.module.js

@@ -43,7 +43,7 @@ const IncrementId = {
 };
 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')
@@ -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.7";
+const version = "1.7.0";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -7331,13 +7346,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); }
@@ -7628,15 +7639,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);
@@ -7694,18 +7708,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) {
@@ -7830,12 +7841,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();
@@ -8046,13 +8059,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)
@@ -8479,7 +8492,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 }; }
@@ -8524,7 +8537,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;
@@ -8652,7 +8665,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);
         }
@@ -8872,8 +8885,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() { }
@@ -9111,6 +9124,11 @@ let Text = class Text extends UI {
             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;
@@ -9932,6 +9950,7 @@ const config = {
         delta: { x: 80 / 4, y: 8.0 },
     },
     pointer: {
+        type: 'pointer',
         snap: true,
         hitRadius: 5,
         tapTime: 120,
@@ -10475,7 +10494,7 @@ ui$1.__updateHitCanvas = function () {
         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;
@@ -10612,6 +10631,9 @@ const KeyEventHelper = {
 
 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;
@@ -10697,13 +10719,13 @@ class Interaction extends InteractionBase {
     }
     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));
@@ -10715,7 +10737,7 @@ class Interaction extends InteractionBase {
     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)));
     }
@@ -10726,24 +10748,24 @@ class Interaction extends InteractionBase {
     }
     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();
     }
@@ -10754,7 +10776,7 @@ class Interaction extends InteractionBase {
         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);
@@ -10765,14 +10787,14 @@ class Interaction extends InteractionBase {
     }
     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);
@@ -10783,7 +10805,7 @@ class Interaction extends InteractionBase {
         this.pointerUp(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
     }
     onTouchCancel() {
-        if (this.usePointer)
+        if (this.notTouch)
             return;
         this.pointerCancel();
     }
@@ -11188,7 +11210,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);
@@ -11197,13 +11219,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) {
@@ -11240,11 +11264,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) {
@@ -11253,7 +11279,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;
@@ -11287,8 +11313,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)
@@ -11365,11 +11391,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)
@@ -11435,6 +11461,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);