leafer-ui 1.9.5 → 1.9.6

package/dist/web.module.js

@@ -372,7 +372,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 = {};
 
@@ -614,12 +614,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;
@@ -1141,7 +1141,7 @@ const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPo
 
 const {toOuterPoint: toOuterPoint$2} = MatrixHelper;
 
-const {float: float, fourNumber: fourNumber} = MathHelper;
+const {float: float$1, fourNumber: fourNumber} = MathHelper;
 
 const {floor: floor$2, ceil: ceil$2} = Math;
 
@@ -1324,10 +1324,10 @@ const BoundsHelper = {
         }
     },
     float(t, maxLength) {
-        t.x = float(t.x, maxLength);
-        t.y = float(t.y, maxLength);
-        t.width = float(t.width, maxLength);
-        t.height = float(t.height, maxLength);
+        t.x = float$1(t.x, maxLength);
+        t.y = float$1(t.y, maxLength);
+        t.width = float$1(t.width, maxLength);
+        t.height = float$1(t.height, maxLength);
     },
     add(t, bounds, isPoint) {
         right$1 = t.x + t.width;
@@ -5463,6 +5463,8 @@ LeaferEvent.RESTART = "leafer.restart";
 
 LeaferEvent.END = "leafer.end";
 
+LeaferEvent.UPDATE_MODE = "leafer.update_mode";
+
 LeaferEvent.TRANSFORM = "leafer.transform";
 
 LeaferEvent.MOVE = "leafer.move";
@@ -6749,7 +6751,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.9.5";
+const version = "1.9.6";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -7681,7 +7683,7 @@ class Picker {
             item = path.list[i];
             if (!item.__.hittable) break;
             hittablePath.addAt(item, 0);
-            if (!item.__.hitChildren) break;
+            if (!item.__.hitChildren || item.isLeafer && item.mode === "draw") break;
         }
         return hittablePath;
     }
@@ -8138,8 +8140,6 @@ class TextData extends UIData {
             if (!boxStyle) box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
             box.set(value);
             if (boxLayout.strokeChanged) layout.strokeChange();
-            if (boxLayout.renderChanged) layout.renderChange();
-            box.__updateChange();
         } else if (box) {
             t.__box = box.parent = null;
             box.destroy();
@@ -8209,7 +8209,7 @@ const UIBounds = {
     __updateRenderSpread() {
         let width = 0;
         const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__;
-        if (shadow) shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
+        if (shadow) width = Effect.getShadowSpread(this, shadow);
         if (blur) width = Math.max(width, blur);
         if (filter) width += Filter.getSpread(filter);
         if (renderSpread) width += renderSpread;
@@ -8222,36 +8222,69 @@ const UIBounds = {
     }
 };
 
+const {float: float} = MathHelper;
+
+const tempContent = new Bounds, tempMerge = new Bounds, tempIntersect = new Bounds;
+
 const DragBoundsHelper = {
+    limitMove(leaf, move) {
+        const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
+        if (dragBounds) D.getValidMove(leaf.__localBoxBounds, D.getDragBounds(leaf), dragBoundsType, move, true);
+        D.axisMove(leaf, move);
+    },
+    limitScaleOf(leaf, origin, scale) {
+        const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
+        if (dragBounds) D.getValidScaleOf(leaf.__localBoxBounds, D.getDragBounds(leaf), dragBoundsType, leaf.getLocalPointByInner(leaf.getInnerPointByBox(origin)), scale, true);
+    },
+    axisMove(leaf, move) {
+        const {draggable: draggable} = leaf;
+        if (draggable === "x") move.y = 0;
+        if (draggable === "y") move.x = 0;
+    },
+    getDragBounds(leaf) {
+        const {dragBounds: dragBounds} = leaf;
+        return dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds;
+    },
+    isInnerMode(content, dragBounds, dragBoundsType, sideType) {
+        return dragBoundsType === "inner" || dragBoundsType === "auto" && content[sideType] > dragBounds[sideType];
+    },
     getValidMove(content, dragBounds, dragBoundsType, move, change) {
         const x = content.x + move.x, y = content.y + move.y, right = x + content.width, bottom = y + content.height;
         const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
         if (!change) move = Object.assign({}, move);
-        const isBiggerWidth = content.width > dragBounds.width;
-        const isBiggerHeight = content.height > dragBounds.height;
-        if (isBiggerWidth && dragBoundsType !== "outer") {
+        if (D.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
             if (x > dragBounds.x) move.x += dragBounds.x - x; else if (right < boundsRight) move.x += boundsRight - right;
         } else {
             if (x < dragBounds.x) move.x += dragBounds.x - x; else if (right > boundsRight) move.x += boundsRight - right;
         }
-        if (isBiggerHeight && dragBoundsType !== "outer") {
+        if (D.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
             if (y > dragBounds.y) move.y += dragBounds.y - y; else if (bottom < boundsBottom) move.y += boundsBottom - bottom;
         } else {
             if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
         }
-        move.x = MathHelper.float(move.x);
-        move.y = MathHelper.float(move.y);
+        move.x = float(move.x);
+        move.y = float(move.y);
         return move;
     },
-    axisMove(leaf, move) {
-        const {draggable: draggable} = leaf;
-        if (draggable === "x") move.y = 0;
-        if (draggable === "y") move.x = 0;
-    },
-    limitMove(leaf, move) {
-        const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
-        if (dragBounds) D.getValidMove(leaf.__localBoxBounds, dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds, dragBoundsType, move, true);
-        D.axisMove(leaf, move);
+    getValidScaleOf(content, dragBounds, dragBoundsType, origin, scale, change) {
+        if (!change) scale = Object.assign({}, scale);
+        let fitScaleX, fitScaleY;
+        tempContent.set(content).scaleOf(origin, scale.x, scale.y).unsign();
+        tempMerge.set(tempContent).add(dragBounds);
+        tempIntersect.set(tempContent).intersect(dragBounds);
+        if (D.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
+            fitScaleX = tempMerge.width / tempContent.width;
+        } else {
+            fitScaleX = tempIntersect.width / tempContent.width;
+        }
+        if (D.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
+            fitScaleY = tempMerge.height / tempContent.height;
+        } else {
+            fitScaleY = tempIntersect.height / tempContent.height;
+        }
+        scale.x = float(tempIntersect.width) ? scale.x * fitScaleX : 1;
+        scale.y = float(tempIntersect.height) ? scale.y * fitScaleY : 1;
+        return scale;
     }
 };
 
@@ -8269,7 +8302,7 @@ const UIRender = {
         }
         if (data.__useEffect) {
             const {shadow: shadow, fill: fill, stroke: stroke} = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-            stintSet$1(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
+            stintSet$1(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
             data.__useEffect = !!(shadow || otherEffect);
         }
         data.__checkSingle();
@@ -8907,7 +8940,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             } else if (attrName === "zIndex") {
                 this.canvas.zIndex = newValue;
                 setTimeout(() => this.parent && this.parent.__updateSortChildren());
-            }
+            } else if (attrName === "mode") this.emit(LeaferEvent.UPDATE_MODE, {
+                mode: newValue
+            });
         }
         return super.__setAttr(attrName, newValue);
     }
@@ -9090,6 +9125,8 @@ __decorate([ dataProcessor(LeaferData) ], Leafer.prototype, "__", void 0);
 
 __decorate([ boundsType() ], Leafer.prototype, "pixelRatio", void 0);
 
+__decorate([ dataType("normal") ], Leafer.prototype, "mode", void 0);
+
 Leafer = Leafer_1 = __decorate([ registerUI() ], Leafer);
 
 let Rect = class Rect extends UI {
@@ -9282,57 +9319,9 @@ __decorate([ pathType(0) ], Ellipse.prototype, "endAngle", void 0);
 
 Ellipse = __decorate([ registerUI() ], Ellipse);
 
-const {moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1} = PathCommandDataHelper;
-
-const {rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$2, defaultPoint: defaultPoint} = PointHelper;
-
-let Line = class Line extends UI {
-    get __tag() {
-        return "Line";
-    }
-    get toPoint() {
-        const {width: width, rotation: rotation} = this.__;
-        const to = getPointData();
-        if (width) to.x = width;
-        if (rotation) rotate$1(to, rotation);
-        return to;
-    }
-    set toPoint(value) {
-        this.width = getDistance$2(defaultPoint, value);
-        this.rotation = getAngle$1(defaultPoint, value);
-        if (this.height) this.height = 0;
-    }
-    __updatePath() {
-        const data = this.__;
-        const path = data.path = [];
-        if (data.points) {
-            drawPoints$1(path, data.points, data.curve, data.closed);
-        } else {
-            moveTo$2(path, 0, 0);
-            lineTo$2(path, this.width, 0);
-        }
-    }
-};
-
-__decorate([ dataProcessor(LineData) ], Line.prototype, "__", void 0);
-
-__decorate([ affectStrokeBoundsType("center") ], Line.prototype, "strokeAlign", void 0);
-
-__decorate([ boundsType(0) ], Line.prototype, "height", void 0);
-
-__decorate([ pathType() ], Line.prototype, "points", void 0);
-
-__decorate([ pathType(0) ], Line.prototype, "curve", void 0);
-
-__decorate([ pathType(false) ], Line.prototype, "closed", void 0);
-
-Line = __decorate([ registerUI() ], Line);
-
 const {sin: sin$1, cos: cos$1, PI: PI$1} = Math;
 
-const {moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath$1, drawPoints: drawPoints} = PathCommandDataHelper;
-
-const line = Line.prototype;
+const {moveTo: moveTo$2, lineTo: lineTo$2, closePath: closePath$1, drawPoints: drawPoints$1} = PathCommandDataHelper;
 
 let Polygon = class Polygon extends UI {
     get __tag() {
@@ -9342,19 +9331,17 @@ let Polygon = class Polygon extends UI {
         const data = this.__;
         const path = data.path = [];
         if (data.points) {
-            drawPoints(path, data.points, data.curve, true);
+            drawPoints$1(path, data.points, data.curve, true);
         } else {
             const {width: width, height: height, sides: sides} = data;
             const rx = width / 2, ry = height / 2;
-            moveTo$1(path, rx, 0);
+            moveTo$2(path, rx, 0);
             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));
+                lineTo$2(path, rx + rx * sin$1(i * 2 * PI$1 / sides), ry - ry * cos$1(i * 2 * PI$1 / sides));
             }
             closePath$1(path);
         }
     }
-    __updateRenderPath() {}
-    __updateBoxBounds() {}
 };
 
 __decorate([ dataProcessor(PolygonData) ], Polygon.prototype, "__", void 0);
@@ -9365,15 +9352,11 @@ __decorate([ pathType() ], Polygon.prototype, "points", void 0);
 
 __decorate([ pathType(0) ], Polygon.prototype, "curve", void 0);
 
-__decorate([ rewrite(line.__updateRenderPath) ], Polygon.prototype, "__updateRenderPath", null);
-
-__decorate([ rewrite(line.__updateBoxBounds) ], Polygon.prototype, "__updateBoxBounds", null);
-
 Polygon = __decorate([ rewriteAble(), registerUI() ], Polygon);
 
 const {sin: sin, cos: cos, PI: PI} = Math;
 
-const {moveTo: moveTo, lineTo: lineTo, closePath: closePath} = PathCommandDataHelper;
+const {moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath} = PathCommandDataHelper;
 
 let Star = class Star extends UI {
     get __tag() {
@@ -9383,9 +9366,9 @@ let Star = class Star extends UI {
         const {width: width, height: height, corners: corners, innerRadius: innerRadius} = this.__;
         const rx = width / 2, ry = height / 2;
         const path = this.__.path = [];
-        moveTo(path, rx, 0);
+        moveTo$1(path, rx, 0);
         for (let i = 1; i < corners * 2; i++) {
-            lineTo(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin(i * PI / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos(i * PI / corners));
+            lineTo$1(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin(i * PI / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos(i * PI / corners));
         }
         closePath(path);
     }
@@ -9399,6 +9382,52 @@ __decorate([ pathType(.382) ], Star.prototype, "innerRadius", void 0);
 
 Star = __decorate([ registerUI() ], Star);
 
+const {moveTo: moveTo, lineTo: lineTo, drawPoints: drawPoints} = PathCommandDataHelper;
+
+const {rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$2, defaultPoint: defaultPoint} = PointHelper;
+
+let Line = class Line extends UI {
+    get __tag() {
+        return "Line";
+    }
+    get toPoint() {
+        const {width: width, rotation: rotation} = this.__;
+        const to = getPointData();
+        if (width) to.x = width;
+        if (rotation) rotate$1(to, rotation);
+        return to;
+    }
+    set toPoint(value) {
+        this.width = getDistance$2(defaultPoint, value);
+        this.rotation = getAngle$1(defaultPoint, value);
+        if (this.height) this.height = 0;
+    }
+    __updatePath() {
+        const data = this.__;
+        const path = data.path = [];
+        if (data.points) {
+            drawPoints(path, data.points, data.curve, data.closed);
+        } else {
+            moveTo(path, 0, 0);
+            lineTo(path, this.width, 0);
+        }
+    }
+};
+
+__decorate([ dataProcessor(LineData) ], Line.prototype, "__", void 0);
+
+__decorate([ affectStrokeBoundsType("center") ], Line.prototype, "strokeAlign", void 0);
+
+__decorate([ boundsType(0) ], Line.prototype, "height", void 0);
+
+__decorate([ pathType() ], Line.prototype, "points", void 0);
+
+__decorate([ pathType(0) ], Line.prototype, "curve", void 0);
+
+__decorate([ pathType(false) ], Line.prototype, "closed", void 0);
+
+Line = __decorate([ registerUI() ], Line);
+
 let Image$1 = class Image extends Rect {
     get __tag() {
         return "Image";
@@ -9546,10 +9575,6 @@ let Text = class Text extends UI {
         DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds));
         if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
     }
-    __onUpdateSize() {
-        if (this.__box) this.__box.__onUpdateSize();
-        super.__onUpdateSize();
-    }
     __updateRenderSpread() {
         let width = super.__updateRenderSpread();
         if (!width) width = this.isOverflow ? 1 : 0;
@@ -9560,6 +9585,11 @@ let Text = class Text extends UI {
         copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
         if (this.__box) this.__box.__layout.renderBounds = renderBounds;
     }
+    __updateChange() {
+        super.__updateChange();
+        const box = this.__box;
+        if (box) box.__onUpdateSize(), box.__updateChange();
+    }
     __drawRenderPath(canvas) {
         canvas.font = this.__.__font;
     }
@@ -11118,10 +11148,10 @@ canvas.hitPixel = function(radiusPoint, offset, scale = 1) {
 
 const PointerEventHelper = {
     convert(e, local) {
-        const base = InteractionHelper.getBase(e);
+        const base = InteractionHelper.getBase(e), {x: x, y: y} = local;
         const data = Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: e.width,
             height: e.height,
             pointerType: e.pointerType,
@@ -11136,10 +11166,10 @@ const PointerEventHelper = {
         return data;
     },
     convertMouse(e, local) {
-        const base = InteractionHelper.getBase(e);
+        const base = InteractionHelper.getBase(e), {x: x, y: y} = local;
         return Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: 1,
             height: 1,
             pointerType: "mouse",
@@ -11148,10 +11178,10 @@ const PointerEventHelper = {
     },
     convertTouch(e, local) {
         const touch = PointerEventHelper.getTouch(e);
-        const base = InteractionHelper.getBase(e);
+        const base = InteractionHelper.getBase(e), {x: x, y: y} = local;
         return Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: 1,
             height: 1,
             pointerType: "touch",
@@ -12365,12 +12395,18 @@ function shadow(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
         }
-        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
+        if (Effect.isTransformShadow(item)) Effect.renderTransformShadow(ui, current, other, copyBounds, item); else LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end) other.clearWorld(copyBounds);
     });
     other.recycle(copyBounds);
 }
 
+function getShadowSpread(_ui, shadow) {
+    let width = 0;
+    shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
+    return width;
+}
+
 function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
     const {bounds: bounds, shapeBounds: shapeBounds} = shape;
     if (Platform.fullImageShadow) {
@@ -12448,7 +12484,11 @@ const EffectModule = {
     shadow: shadow,
     innerShadow: innerShadow,
     blur: blur,
-    backgroundBlur: backgroundBlur
+    backgroundBlur: backgroundBlur,
+    getShadowSpread: getShadowSpread,
+    isTransformShadow(_shadow) {
+        return undefined;
+    }
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
@@ -12956,16 +12996,17 @@ function toTextChar(row) {
 }
 
 function decorationText(drawData, style) {
-    let type;
+    let type, offset = 0;
     const {fontSize: fontSize, textDecoration: textDecoration} = style;
     drawData.decorationHeight = fontSize / 11;
     if (isObject(textDecoration)) {
         type = textDecoration.type;
         if (textDecoration.color) drawData.decorationColor = ColorConvert.string(textDecoration.color);
+        if (textDecoration.offset) offset = Math.min(fontSize * .3, Math.max(textDecoration.offset, -fontSize * .15));
     } else type = textDecoration;
     switch (type) {
       case "under":
-        drawData.decorationY = [ fontSize * .15 ];
+        drawData.decorationY = [ fontSize * .15 + offset ];
         break;
 
       case "delete":
@@ -12973,7 +13014,7 @@ function decorationText(drawData, style) {
         break;
 
       case "under-delete":
-        drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
+        drawData.decorationY = [ fontSize * .15 + offset, -fontSize * .35 ];
     }
 }