@leafer-ui/draw 1.9.4 → 1.9.6

package/lib/draw.cjs

@@ -304,7 +304,11 @@ class LeaferData extends GroupData {
 
 class FrameData extends BoxData {}
 
-class LineData extends UIData {}
+class LineData extends UIData {
+    get __usePathBox() {
+        return this.points || this.__pathInputed;
+    }
+}
 
 class RectData extends UIData {
     get __boxStroke() {
@@ -318,7 +322,7 @@ class EllipseData extends UIData {
     }
 }
 
-class PolygonData extends UIData {}
+class PolygonData extends LineData {}
 
 class StarData extends UIData {}
 
@@ -362,8 +366,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();
@@ -433,7 +435,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;
@@ -446,36 +448,69 @@ const UIBounds = {
     }
 };
 
+const {float: float} = core.MathHelper;
+
+const tempContent = new core.Bounds, tempMerge = new core.Bounds, tempIntersect = new core.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 = core.MathHelper.float(move.x);
-        move.y = core.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;
     }
 };
 
@@ -493,7 +528,7 @@ const UIRender = {
         }
         if (data.__useEffect) {
             const {shadow: shadow, fill: fill, stroke: stroke} = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-            stintSet(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && fill && !data.__isTransparentFill && !(core.isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
+            stintSet(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(core.isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
             data.__useEffect = !!(shadow || otherEffect);
         }
         data.__checkSingle();
@@ -628,20 +663,9 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         if (!path) this.__drawPathByBox(core.pen);
         return core.pen;
     }
-    constructor(data) {
-        super(data);
-    }
     reset(_data) {}
-    set(data, transition) {
-        if (data) {
-            if (transition) {
-                if (transition === "temp") {
-                    this.lockNormalStyle = true;
-                    Object.assign(this, data);
-                    this.lockNormalStyle = false;
-                } else this.animate(data, transition);
-            } else Object.assign(this, data);
-        }
+    set(data, _transition) {
+        if (data) Object.assign(this, data);
     }
     get(name) {
         return core.isString(name) ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -687,7 +711,7 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         const data = this.__;
         if (data.path) {
             data.__pathForRender = data.cornerRadius ? core.PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
-            if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius);
+            if (data.__useArrow) PathArrow.addArrows(this);
         } else data.__pathForRender && (data.__pathForRender = undefined);
     }
     __drawRenderPath(canvas) {
@@ -711,7 +735,8 @@ exports.UI = UI_1 = class UI extends core.Leaf {
     drawImagePlaceholder(canvas, _image) {
         Paint.fill(this.__.placeholderColor, this, canvas);
     }
-    animate(_keyframe, _options, _type, _isTemp) {
+    animate(keyframe, _options, _type, _isTemp) {
+        this.set(keyframe);
         return core.Plugin.need("animate");
     }
     killAnimate(_type, _nextStyle) {}
@@ -900,9 +925,6 @@ exports.Group = class Group extends exports.UI {
     get isBranch() {
         return true;
     }
-    constructor(data) {
-        super(data);
-    }
     reset(data) {
         this.__setBranch();
         super.reset(data);
@@ -1027,7 +1049,7 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         const canvas = this.canvas = core.Creator.canvas(config);
         this.__controllers.push(this.renderer = core.Creator.renderer(this, canvas, config), this.watcher = core.Creator.watcher(this, config), this.layouter = core.Creator.layouter(this, config));
         if (this.isApp) this.__setApp();
-        this.__checkAutoLayout(config, parentApp);
+        this.__checkAutoLayout();
         this.view = canvas.view;
         if (!parentApp) {
             this.selector = core.Creator.selector(this);
@@ -1126,7 +1148,8 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         this.leafer = leafer;
         this.__level = 1;
     }
-    __checkAutoLayout(config, parentApp) {
+    __checkAutoLayout() {
+        const {config: config, parentApp: parentApp} = this;
         if (!parentApp) {
             if (!config.width || !config.height) this.autoLayout = new core.AutoBounds(config);
             this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
@@ -1143,7 +1166,9 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
             } else if (attrName === "zIndex") {
                 this.canvas.zIndex = newValue;
                 setTimeout(() => this.parent && this.parent.__updateSortChildren());
-            }
+            } else if (attrName === "mode") this.emit(core.LeaferEvent.UPDATE_MODE, {
+                mode: newValue
+            });
         }
         return super.__setAttr(attrName, newValue);
     }
@@ -1152,9 +1177,10 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         return super.__getAttr(attrName);
     }
     __changeCanvasSize(attrName, newValue) {
-        const data = core.DataHelper.copyAttrs({}, this.canvas, core.canvasSizeAttrs);
-        data[attrName] = this.config[attrName] = newValue;
-        if (newValue) this.canvas.stopAutoLayout();
+        const {config: config, canvas: canvas} = this;
+        const data = core.DataHelper.copyAttrs({}, canvas, core.canvasSizeAttrs);
+        data[attrName] = config[attrName] = newValue;
+        config.width && config.height ? canvas.stopAutoLayout() : this.__checkAutoLayout();
         this.__doResize(data);
     }
     __changeFill(newValue) {
@@ -1301,9 +1327,9 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
                     if (!this.parent) {
                         if (this.selector) this.selector.destroy();
                         if (this.hitCanvasManager) this.hitCanvasManager.destroy();
-                        this.canvasManager.destroy();
+                        if (this.canvasManager) this.canvasManager.destroy();
                     }
-                    this.canvas.destroy();
+                    if (this.canvas) this.canvas.destroy();
                     this.config.view = this.view = this.parentApp = null;
                     if (this.userConfig) this.userConfig.view = null;
                     super.destroy();
@@ -1325,15 +1351,14 @@ __decorate([ core.dataProcessor(LeaferData) ], exports.Leafer.prototype, "__", v
 
 __decorate([ core.boundsType() ], exports.Leafer.prototype, "pixelRatio", void 0);
 
+__decorate([ core.dataType("normal") ], exports.Leafer.prototype, "mode", void 0);
+
 exports.Leafer = Leafer_1 = __decorate([ core.registerUI() ], exports.Leafer);
 
 exports.Rect = class Rect extends exports.UI {
     get __tag() {
         return "Rect";
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(RectData) ], exports.Rect.prototype, "__", void 0);
@@ -1465,9 +1490,6 @@ exports.Frame = class Frame extends exports.Box {
     get isFrame() {
         return true;
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(FrameData) ], exports.Frame.prototype, "__", void 0);
@@ -1484,9 +1506,6 @@ exports.Ellipse = class Ellipse extends exports.UI {
     get __tag() {
         return "Ellipse";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = this.__;
         const rx = width / 2, ry = height / 2;
@@ -1526,98 +1545,29 @@ __decorate([ core.pathType(0) ], exports.Ellipse.prototype, "endAngle", void 0);
 
 exports.Ellipse = __decorate([ core.registerUI() ], exports.Ellipse);
 
-const {moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1} = core.PathCommandDataHelper;
-
-const {rotate: rotate, getAngle: getAngle, getDistance: getDistance, defaultPoint: defaultPoint} = core.PointHelper;
-
-const {toBounds: toBounds} = core.PathBounds;
-
-exports.Line = class Line extends exports.UI {
-    get __tag() {
-        return "Line";
-    }
-    get toPoint() {
-        const {width: width, rotation: rotation} = this.__;
-        const to = core.getPointData();
-        if (width) to.x = width;
-        if (rotation) rotate(to, rotation);
-        return to;
-    }
-    set toPoint(value) {
-        this.width = getDistance(defaultPoint, value);
-        this.rotation = getAngle(defaultPoint, value);
-        if (this.height) this.height = 0;
-    }
-    constructor(data) {
-        super(data);
-    }
-    __updatePath() {
-        const data = this.__;
-        const path = data.path = [];
-        if (data.points) {
-            drawPoints$1(path, data.points, false, data.closed);
-        } else {
-            moveTo$2(path, 0, 0);
-            lineTo$2(path, this.width, 0);
-        }
-    }
-    __updateRenderPath() {
-        const data = this.__;
-        if (!this.pathInputed && data.points && data.curve) {
-            drawPoints$1(data.__pathForRender = [], data.points, data.curve, data.closed);
-            if (data.__useArrow) PathArrow.addArrows(this, false);
-        } else super.__updateRenderPath();
-    }
-    __updateBoxBounds() {
-        if (this.points) {
-            toBounds(this.__.__pathForRender, this.__layout.boxBounds);
-        } else super.__updateBoxBounds();
-    }
-};
-
-__decorate([ core.dataProcessor(LineData) ], exports.Line.prototype, "__", void 0);
-
-__decorate([ core.affectStrokeBoundsType("center") ], exports.Line.prototype, "strokeAlign", void 0);
-
-__decorate([ core.boundsType(0) ], exports.Line.prototype, "height", void 0);
-
-__decorate([ core.pathType() ], exports.Line.prototype, "points", void 0);
-
-__decorate([ core.pathType(0) ], exports.Line.prototype, "curve", void 0);
-
-__decorate([ core.pathType(false) ], exports.Line.prototype, "closed", void 0);
-
-exports.Line = __decorate([ core.registerUI() ], exports.Line);
-
 const {sin: sin$1, cos: cos$1, PI: PI$1} = Math;
 
-const {moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath$1, drawPoints: drawPoints} = core.PathCommandDataHelper;
-
-const line = exports.Line.prototype;
+const {moveTo: moveTo$2, lineTo: lineTo$2, closePath: closePath$1, drawPoints: drawPoints$1} = core.PathCommandDataHelper;
 
 exports.Polygon = class Polygon extends exports.UI {
     get __tag() {
         return "Polygon";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints(path, this.__.points, false, true);
+        const data = this.__;
+        const path = data.path = [];
+        if (data.points) {
+            drawPoints$1(path, data.points, data.curve, true);
         } else {
-            const {width: width, height: height, sides: sides} = this.__;
+            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([ core.dataProcessor(PolygonData) ], exports.Polygon.prototype, "__", void 0);
@@ -1628,30 +1578,23 @@ __decorate([ core.pathType() ], exports.Polygon.prototype, "points", void 0);
 
 __decorate([ core.pathType(0) ], exports.Polygon.prototype, "curve", void 0);
 
-__decorate([ core.rewrite(line.__updateRenderPath) ], exports.Polygon.prototype, "__updateRenderPath", null);
-
-__decorate([ core.rewrite(line.__updateBoxBounds) ], exports.Polygon.prototype, "__updateBoxBounds", null);
-
 exports.Polygon = __decorate([ core.rewriteAble(), core.registerUI() ], exports.Polygon);
 
 const {sin: sin, cos: cos, PI: PI} = Math;
 
-const {moveTo: moveTo, lineTo: lineTo, closePath: closePath} = core.PathCommandDataHelper;
+const {moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath} = core.PathCommandDataHelper;
 
 exports.Star = class Star extends exports.UI {
     get __tag() {
         return "Star";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         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);
     }
@@ -1665,6 +1608,52 @@ __decorate([ core.pathType(.382) ], exports.Star.prototype, "innerRadius", void
 
 exports.Star = __decorate([ core.registerUI() ], exports.Star);
 
+const {moveTo: moveTo, lineTo: lineTo, drawPoints: drawPoints} = core.PathCommandDataHelper;
+
+const {rotate: rotate, getAngle: getAngle, getDistance: getDistance, defaultPoint: defaultPoint} = core.PointHelper;
+
+exports.Line = class Line extends exports.UI {
+    get __tag() {
+        return "Line";
+    }
+    get toPoint() {
+        const {width: width, rotation: rotation} = this.__;
+        const to = core.getPointData();
+        if (width) to.x = width;
+        if (rotation) rotate(to, rotation);
+        return to;
+    }
+    set toPoint(value) {
+        this.width = getDistance(defaultPoint, value);
+        this.rotation = getAngle(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([ core.dataProcessor(LineData) ], exports.Line.prototype, "__", void 0);
+
+__decorate([ core.affectStrokeBoundsType("center") ], exports.Line.prototype, "strokeAlign", void 0);
+
+__decorate([ core.boundsType(0) ], exports.Line.prototype, "height", void 0);
+
+__decorate([ core.pathType() ], exports.Line.prototype, "points", void 0);
+
+__decorate([ core.pathType(0) ], exports.Line.prototype, "curve", void 0);
+
+__decorate([ core.pathType(false) ], exports.Line.prototype, "closed", void 0);
+
+exports.Line = __decorate([ core.registerUI() ], exports.Line);
+
 exports.Image = class Image extends exports.Rect {
     get __tag() {
         return "Image";
@@ -1677,9 +1666,6 @@ exports.Image = class Image extends exports.Rect {
         const {fill: fill} = this.__;
         return core.isArray(fill) && fill[0].image;
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(ImageData) ], exports.Image.prototype, "__", void 0);
@@ -1779,9 +1765,6 @@ exports.Text = class Text extends exports.UI {
         this.updateLayout();
         return this.__.__textDrawData;
     }
-    constructor(data) {
-        super(data);
-    }
     __updateTextDrawData() {
         const data = this.__;
         const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding} = data;
@@ -1818,10 +1801,6 @@ exports.Text = class Text extends exports.UI {
         core.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;
@@ -1832,6 +1811,11 @@ exports.Text = class Text extends exports.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;
     }
@@ -1914,9 +1898,6 @@ exports.Path = class Path extends exports.UI {
     get __tag() {
         return "Path";
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(PathData) ], exports.Path.prototype, "__", void 0);
@@ -1929,9 +1910,6 @@ exports.Pen = class Pen extends exports.Group {
     get __tag() {
         return "Pen";
     }
-    constructor(data) {
-        super(data);
-    }
     setStyle(data) {
         const path = this.pathElement = new exports.Path(data);
         this.pathStyle = data;