leafer-ui 1.0.0-rc.11 → 1.0.0-rc.16

package/dist/web.js

@@ -32,7 +32,7 @@ var LeaferUI = (function (exports) {
     };
     const I$2 = IncrementId;
 
-    const { round: round$1, pow: pow$1, PI: PI$4 } = Math;
+    const { round, pow: pow$1, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
             if (value < min)
@@ -94,7 +94,7 @@ var LeaferUI = (function (exports) {
         },
         float(num, maxLength) {
             const a = maxLength ? pow$1(10, maxLength) : 1000000000000;
-            num = round$1(num * a) / a;
+            num = round(num * a) / a;
             return num === -0 ? 0 : num;
         }
     };
@@ -406,6 +406,10 @@ var LeaferUI = (function (exports) {
             t.x = point.x;
             t.y = point.y;
         },
+        copyFrom(t, x, y) {
+            t.x = x;
+            t.y = y;
+        },
         move(t, x, y) {
             t.x += x;
             t.y += y;
@@ -433,19 +437,19 @@ var LeaferUI = (function (exports) {
         },
         tempToInnerOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            P$5.copy(temp, t);
+            copy$a(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            P$5.copy(temp, t);
+            copy$a(temp, t);
             toOuterPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
             const { tempRadiusPoint: temp } = P$5;
-            P$5.copy(temp, t);
+            copy$a(temp, t);
             P$5.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
@@ -471,7 +475,7 @@ var LeaferUI = (function (exports) {
             return y1 + (y2 - y1) / 2;
         },
         getDistance(t, point) {
-            return P$5.getDistanceFrom(t.x, t.y, point.x, point.y);
+            return getDistanceFrom(t.x, t.y, point.x, point.y);
         },
         getDistanceFrom(x1, y1, x2, y2) {
             const x = abs$4(x2 - x1);
@@ -479,10 +483,10 @@ var LeaferUI = (function (exports) {
             return sqrt$2(x * x + y * y);
         },
         getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
-            return min$1(P$5.getDistanceFrom(x1, y1, x2, y2), P$5.getDistanceFrom(x2, y2, x3, y3));
+            return min$1(getDistanceFrom(x1, y1, x2, y2), getDistanceFrom(x2, y2, x3, y3));
         },
         getAngle(t, to) {
-            return P$5.getAtan2(t, to) / OneRadian;
+            return getAtan2(t, to) / OneRadian;
         },
         getRotation(t, origin, to, toOrigin) {
             if (!toOrigin)
@@ -500,15 +504,19 @@ var LeaferUI = (function (exports) {
         getAtan2(t, to) {
             return atan2$2(to.y - t.y, to.x - t.x);
         },
-        getDistancePoint(t, to, distance) {
-            const r = P$5.getAtan2(t, to);
-            return { x: t.x + cos$4(r) * distance, y: t.y + sin$4(r) * distance };
+        getDistancePoint(t, to, distance, changeTo) {
+            const r = getAtan2(t, to);
+            to = changeTo ? to : {};
+            to.x = t.x + cos$4(r) * distance;
+            to.y = t.y + sin$4(r) * distance;
+            return to;
         },
         reset(t) {
             P$5.reset(t);
         }
     };
     const P$5 = PointHelper;
+    const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
 
     class Point {
         constructor(x, y) {
@@ -562,8 +570,8 @@ var LeaferUI = (function (exports) {
         getDistance(to) {
             return PointHelper.getDistance(this, to);
         }
-        getDistancePoint(to, distance) {
-            return new Point(PointHelper.getDistancePoint(this, to, distance));
+        getDistancePoint(to, distance, changeTo) {
+            return new Point(PointHelper.getDistancePoint(this, to, distance, changeTo));
         }
         getAngle(to) {
             return PointHelper.getAngle(this, to);
@@ -717,7 +725,7 @@ var LeaferUI = (function (exports) {
     const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$3, addPoint: addPoint$3, toBounds: toBounds$4 } = TwoPointBoundsHelper;
     const { toOuterPoint: toOuterPoint$1 } = MatrixHelper;
     const { float } = MathHelper;
-    const { floor, ceil: ceil$1 } = Math;
+    const { floor, ceil: ceil$2 } = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
     const toPoint$1 = {};
@@ -849,8 +857,8 @@ var LeaferUI = (function (exports) {
             const { x, y } = t;
             t.x = floor(t.x);
             t.y = floor(t.y);
-            t.width = x > t.x ? ceil$1(t.width + x - t.x) : ceil$1(t.width);
-            t.height = y > t.y ? ceil$1(t.height + y - t.y) : ceil$1(t.height);
+            t.width = x > t.x ? ceil$2(t.width + x - t.x) : ceil$2(t.width);
+            t.height = y > t.y ? ceil$2(t.height + y - t.y) : ceil$2(t.height);
         },
         unsign(t) {
             if (t.width < 0) {
@@ -1434,6 +1442,8 @@ var LeaferUI = (function (exports) {
                 if (value !== undefined)
                     return value;
             }
+            if (name === 'path' && !this.__pathInputed)
+                return;
             return this['_' + name];
         }
         __removeInput(name) {
@@ -1447,6 +1457,8 @@ var LeaferUI = (function (exports) {
                 if (key[0] !== '_') {
                     value = this['_' + key];
                     if (value !== undefined) {
+                        if (key === 'path' && !this.__pathInputed)
+                            continue;
                         inputValue = __input ? __input[key] : undefined;
                         data[key] = (inputValue === undefined) ? value : inputValue;
                     }
@@ -1476,6 +1488,9 @@ var LeaferUI = (function (exports) {
                 t.__single = true;
             }
         }
+        __removeNaturalSize() {
+            this.__naturalWidth = this.__naturalHeight = undefined;
+        }
         destroy() {
             this.__input = this.__middle = null;
         }
@@ -1963,7 +1978,7 @@ var LeaferUI = (function (exports) {
                 this.setStrokeOptions(options);
         }
         setStrokeOptions(options) {
-            this.strokeCap = options.strokeCap;
+            this.strokeCap = options.strokeCap === 'none' ? 'butt' : options.strokeCap;
             this.strokeJoin = options.strokeJoin;
             this.dashPattern = options.dashPattern;
             this.dashOffset = options.dashOffset;
@@ -2186,7 +2201,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow } = Math;
+    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
     const { set: set$2 } = PointHelper;
     const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
@@ -2300,7 +2315,7 @@ var LeaferUI = (function (exports) {
                 totalRadian -= PI2;
             if (anticlockwise)
                 totalRadian -= PI2;
-            const parts = ceil(abs$3(totalRadian / PI_2));
+            const parts = ceil$1(abs$3(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
             const partRadian4Sin = sin$3(partRadian / 4);
             const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -2786,22 +2801,12 @@ var LeaferUI = (function (exports) {
             }
         },
         drawEllipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
-            if (rotation === undefined)
-                rotation = 0;
-            if (startAngle === undefined)
-                startAngle = 0;
-            if (endAngle === undefined)
-                endAngle = 360;
-            BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise, null, null, startPoint);
+            BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation === undefined ? 0 : rotation, startAngle === undefined ? 0 : startAngle, endAngle === undefined ? 360 : endAngle, anticlockwise, null, null, startPoint);
             data.push(M$3, startPoint.x, startPoint.y);
             ellipse$3(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
         },
         drawArc(data, x, y, radius, startAngle, endAngle, anticlockwise) {
-            if (startAngle === undefined)
-                startAngle = 0;
-            if (endAngle === undefined)
-                endAngle = 360;
-            BezierHelper.arc(null, x, y, radius, startAngle, endAngle, anticlockwise, null, null, startPoint);
+            BezierHelper.arc(null, x, y, radius, startAngle === undefined ? 0 : startAngle, endAngle === undefined ? 360 : endAngle, anticlockwise, null, null, startPoint);
             data.push(M$3, startPoint.x, startPoint.y);
             arc$2(data, x, y, radius, startAngle, endAngle, anticlockwise);
         },
@@ -2813,68 +2818,70 @@ var LeaferUI = (function (exports) {
 
     const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
     class PathCreator {
+        set path(value) { this.__path = value; }
+        get path() { return this.__path; }
         constructor(path) {
             if (path) {
-                this.path = typeof path === 'string' ? PathHelper.parse(path) : path;
+                this.__path = typeof path === 'string' ? PathHelper.parse(path) : path;
             }
             else {
-                this.path = [];
+                this.__path = [];
             }
         }
         beginPath() {
-            beginPath(this.path);
+            beginPath(this.__path);
             return this;
         }
         moveTo(x, y) {
-            moveTo$4(this.path, x, y);
+            moveTo$4(this.__path, x, y);
             return this;
         }
         lineTo(x, y) {
-            lineTo$3(this.path, x, y);
+            lineTo$3(this.__path, x, y);
             return this;
         }
         bezierCurveTo(x1, y1, x2, y2, x, y) {
-            bezierCurveTo(this.path, x1, y1, x2, y2, x, y);
+            bezierCurveTo(this.__path, x1, y1, x2, y2, x, y);
             return this;
         }
         quadraticCurveTo(x1, y1, x, y) {
-            quadraticCurveTo(this.path, x1, y1, x, y);
+            quadraticCurveTo(this.__path, x1, y1, x, y);
             return this;
         }
         closePath() {
-            closePath$3(this.path);
+            closePath$3(this.__path);
             return this;
         }
         rect(x, y, width, height) {
-            rect$1(this.path, x, y, width, height);
+            rect$1(this.__path, x, y, width, height);
             return this;
         }
         roundRect(x, y, width, height, cornerRadius) {
-            roundRect$1(this.path, x, y, width, height, cornerRadius);
+            roundRect$1(this.__path, x, y, width, height, cornerRadius);
             return this;
         }
         ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
-            ellipse$2(this.path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+            ellipse$2(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
             return this;
         }
         arc(x, y, radius, startAngle, endAngle, anticlockwise) {
-            arc$1(this.path, x, y, radius, startAngle, endAngle, anticlockwise);
+            arc$1(this.__path, x, y, radius, startAngle, endAngle, anticlockwise);
             return this;
         }
         arcTo(x1, y1, x2, y2, radius) {
-            arcTo$2(this.path, x1, y1, x2, y2, radius);
+            arcTo$2(this.__path, x1, y1, x2, y2, radius);
             return this;
         }
         drawEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
-            drawEllipse(this.path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+            drawEllipse(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
             return this;
         }
         drawArc(x, y, radius, startAngle, endAngle, anticlockwise) {
-            drawArc(this.path, x, y, radius, startAngle, endAngle, anticlockwise);
+            drawArc(this.__path, x, y, radius, startAngle, endAngle, anticlockwise);
             return this;
         }
         drawPoints(points, curve, close) {
-            drawPoints$2(this.path, points, curve, close);
+            drawPoints$2(this.__path, points, curve, close);
             return this;
         }
     }
@@ -3623,9 +3630,35 @@ var LeaferUI = (function (exports) {
             defineLeafAttr(target, key, defaultValue, {
                 set(value) {
                     this.__setAttr(key, value);
-                    this.__layout.boxChanged || this.__layout.boxChange();
-                    if (this.__hasAutoLayout)
-                        this.__layout.matrixChanged || this.__layout.matrixChange();
+                    doBoundsType(this);
+                }
+            });
+        };
+    }
+    function naturalBoundsType(defaultValue) {
+        return (target, key) => {
+            defineLeafAttr(target, key, defaultValue, {
+                set(value) {
+                    this.__setAttr(key, value);
+                    doBoundsType(this);
+                    this.__.__removeNaturalSize();
+                }
+            });
+        };
+    }
+    function doBoundsType(leaf) {
+        leaf.__layout.boxChanged || leaf.__layout.boxChange();
+        if (leaf.__hasAutoLayout)
+            leaf.__layout.matrixChanged || leaf.__layout.matrixChange();
+    }
+    function pathInputType(defaultValue) {
+        return (target, key) => {
+            defineLeafAttr(target, key, defaultValue, {
+                set(value) {
+                    if (this.__.__pathInputed !== 2)
+                        this.__.__pathInputed = value ? 1 : 0;
+                    this.__setAttr(key, value);
+                    doBoundsType(this);
                 }
             });
         };
@@ -3636,11 +3669,14 @@ var LeaferUI = (function (exports) {
             defineLeafAttr(target, key, defaultValue, {
                 set(value) {
                     this.__setAttr(key, value);
-                    this.__layout.strokeChanged || this.__layout.strokeChange();
+                    doStrokeType(this);
                 }
             });
         };
     }
+    function doStrokeType(leaf) {
+        leaf.__layout.strokeChanged || leaf.__layout.strokeChange();
+    }
     const strokeType = affectStrokeBoundsType;
     function affectRenderBoundsType(defaultValue) {
         return (target, key) => {
@@ -4260,6 +4296,7 @@ var LeaferUI = (function (exports) {
     }
     ChildEvent.ADD = 'child.add';
     ChildEvent.REMOVE = 'child.remove';
+    ChildEvent.DESTROY = 'child.destroy';
 
     class PropertyEvent extends Event {
         constructor(type, target, attrName, oldValue, newValue) {
@@ -4707,6 +4744,7 @@ var LeaferUI = (function (exports) {
     const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2, hasParentAutoLayout } = LeafHelper;
     const { updateBounds: updateBounds$1 } = BranchHelper;
     const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
+    const { toBounds: toBounds$2 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
             toOuterOf$1(this.__layout.renderBounds, this.__world, this.__world);
@@ -4718,7 +4756,8 @@ var LeaferUI = (function (exports) {
         __updateLocalBounds() {
             const layout = this.__layout;
             if (layout.boxChanged) {
-                this.__updatePath();
+                if (!this.__.__pathInputed)
+                    this.__updatePath();
                 this.__updateRenderPath();
                 this.__updateBoxBounds();
                 layout.boxChanged = false;
@@ -4785,11 +4824,16 @@ var LeaferUI = (function (exports) {
         },
         __updateBoxBounds() {
             const b = this.__layout.boxBounds;
-            const { width, height } = this.__;
-            b.x = 0;
-            b.y = 0;
-            b.width = width;
-            b.height = height;
+            const data = this.__;
+            if (data.__pathInputed) {
+                toBounds$2(data.__pathForRender, b);
+            }
+            else {
+                b.x = 0;
+                b.y = 0;
+                b.width = data.width;
+                b.height = data.height;
+            }
         },
         __updateAutoLayout() {
             this.__layout.matrixChanged = true;
@@ -4918,6 +4962,9 @@ var LeaferUI = (function (exports) {
         get innerName() { return this.__.name || this.tag + this.innerId; }
         get __DataProcessor() { return LeafData; }
         get __LayoutProcessor() { return LeafLayout; }
+        get isLeafer() { return false; }
+        get isBranch() { return false; }
+        get isBranchLeaf() { return false; }
         get __localMatrix() { return this.__local || this.__layout; }
         get __localBoxBounds() { return this.__local || this.__layout; }
         get worldTransform() { return this.__layout.getTransform('world'); }
@@ -4931,6 +4978,7 @@ var LeaferUI = (function (exports) {
         get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
         get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
+        get pathInputed() { return !!this.__.__pathInputed; }
         constructor(data) {
             this.innerId = create(LEAF);
             this.reset(data);
@@ -4982,7 +5030,7 @@ var LeaferUI = (function (exports) {
             }
         }
         set(_data) { }
-        get() { return undefined; }
+        get(_name) { return undefined; }
         toJSON() {
             return this.__.__getInputData();
         }
@@ -5199,10 +5247,13 @@ var LeaferUI = (function (exports) {
         }
         destroy() {
             if (!this.destroyed) {
-                if (this.parent)
+                const { parent } = this;
+                if (parent)
                     this.remove();
                 if (this.children)
                     this.removeAll(true);
+                if (this.hasEvent(ChildEvent.DESTROY))
+                    this.emitEvent(new ChildEvent(ChildEvent.DESTROY, this, parent));
                 this.__.destroy();
                 this.__layout.destroy();
                 this.__captureMap = this.__bubbleMap = this.__parentWait = this.__leaferWait = null;
@@ -5222,11 +5273,6 @@ var LeaferUI = (function (exports) {
     const { sort } = BranchHelper;
     const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
     exports.Branch = class Branch extends exports.Leaf {
-        constructor() {
-            super();
-            this.isBranch = true;
-            this.children = [];
-        }
         __updateStrokeSpread() {
             const { children } = this;
             for (let i = 0, len = children.length; i < len; i++) {
@@ -5266,6 +5312,8 @@ var LeaferUI = (function (exports) {
             }
         }
         add(child, index) {
+            if (child === this)
+                return;
             if (child.parent)
                 child.parent.remove(child);
             child.parent = this;
@@ -6018,9 +6066,11 @@ var LeaferUI = (function (exports) {
             updateAllChange(target);
         }
         addExtra(leaf) {
-            const block = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
-            block.updatedList.add(leaf);
-            block.beforeBounds.add(leaf.__world);
+            if (!this.__updatedList.has(leaf)) {
+                const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+                updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world);
+                updatedList.add(leaf);
+            }
         }
         createBlock(data) {
             return new LayoutBlockData(data);
@@ -6536,6 +6586,18 @@ var LeaferUI = (function (exports) {
     });
     Platform.layout = Layouter.fullLayout;
 
+    function arrowType(defaultValue) {
+        return (target, key) => {
+            defineLeafAttr(target, key, defaultValue, {
+                set(value) {
+                    this.__setAttr(key, value);
+                    doStrokeType(this);
+                    const data = this.__;
+                    data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                }
+            });
+        };
+    }
     function effectType(defaultValue) {
         return (target, key) => {
             defineLeafAttr(target, key, defaultValue, {
@@ -6562,12 +6624,14 @@ var LeaferUI = (function (exports) {
 
     const TextConvert = {};
     const ColorConvert = {};
+    const PathArrow = {};
     const Paint = {};
     const PaintImage = {};
     const PaintGradient = {};
     const Effect = {};
     const Export = {};
 
+    const { parse } = PathConvert;
     const emptyPaint = {};
     const debug$3 = Debug.get('UIData');
     class UIData extends LeafData {
@@ -6585,7 +6649,8 @@ var LeaferUI = (function (exports) {
         }
         get __autoWidth() { return !this._width; }
         get __autoHeight() { return !this._height; }
-        get __autoBounds() { return !this._width && !this._height; }
+        get __autoSide() { return !this._width || !this._height; }
+        get __autoSize() { return !this._width && !this._height; }
         setVisible(value) {
             if (this.__leaf.leafer)
                 this.__leaf.leafer.watcher.hasVisible = true;
@@ -6613,7 +6678,7 @@ var LeaferUI = (function (exports) {
         }
         setFill(value) {
             if (this.__naturalWidth)
-                this.__naturalWidth = this.__naturalHeight = undefined;
+                this.__removeNaturalSize();
             if (typeof value === 'string' || !value) {
                 if (this.__isFills) {
                     this.__removeInput('fill');
@@ -6649,6 +6714,17 @@ var LeaferUI = (function (exports) {
                 this._stroke || (this._stroke = emptyPaint);
             }
         }
+        setPath(value) {
+            if (typeof value === 'string') {
+                this.__setInput('path', value);
+                this._path = parse(value);
+            }
+            else {
+                if (this.__input)
+                    this.__removeInput('path');
+                this._path = value;
+            }
+        }
         setShadow(value) {
             this.__setInput('shadow', value);
             if (value instanceof Array) {
@@ -6710,9 +6786,6 @@ var LeaferUI = (function (exports) {
     class LineData extends UIData {
     }
 
-    class ArrowData extends LineData {
-    }
-
     class RectData extends UIData {
         get __boxStroke() { return true; }
     }
@@ -6727,19 +6800,7 @@ var LeaferUI = (function (exports) {
     class StarData extends UIData {
     }
 
-    const { parse } = PathConvert;
     class PathData extends UIData {
-        setPath(value) {
-            if (typeof value === 'string') {
-                this.__setInput('path', value);
-                this._path = parse(value);
-            }
-            else {
-                if (this.__input)
-                    this.__removeInput('path');
-                this._path = value;
-            }
-        }
     }
 
     class PenData extends GroupData {
@@ -6809,6 +6870,8 @@ var LeaferUI = (function (exports) {
                 }
             }
             this.__layout.strokeBoxSpread = boxWidth;
+            if (this.__.__useArrow)
+                width += strokeWidth * 5;
             return width;
         },
         __updateRenderSpread() {
@@ -6942,6 +7005,7 @@ var LeaferUI = (function (exports) {
     var UI_1;
     exports.UI = UI_1 = class UI extends exports.Leaf {
         get app() { return this.leafer && this.leafer.app; }
+        get isFrame() { return false; }
         set scale(value) {
             if (typeof value === 'number') {
                 this.scaleX = this.scaleY = value;
@@ -6962,8 +7026,8 @@ var LeaferUI = (function (exports) {
         set(data) {
             Object.assign(this, data);
         }
-        get() {
-            return this.__.__getInputData();
+        get(name) {
+            return name ? this.__.__getInput(name) : this.__.__getInputData();
         }
         createProxyData() { return undefined; }
         find(_condition, _options) { return undefined; }
@@ -6995,6 +7059,8 @@ var LeaferUI = (function (exports) {
             if (this.__.path) {
                 const data = this.__;
                 data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
+                if (data.__useArrow)
+                    PathArrow.addArrows(this, !data.cornerRadius);
             }
         }
         __drawRenderPath(canvas) {
@@ -7005,7 +7071,14 @@ var LeaferUI = (function (exports) {
             canvas.beginPath();
             this.__drawPathByData(canvas, this.__.path);
         }
-        __drawPathByData(_drawer, _data) { }
+        __drawPathByData(drawer, data) {
+            if (data) {
+                PathDrawer.drawPathByData(drawer, data);
+            }
+            else {
+                this.__drawPathByBox(drawer);
+            }
+        }
         __drawPathByBox(drawer) {
             const { x, y, width, height } = this.__layout.boxBounds;
             if (this.__.cornerRadius) {
@@ -7024,6 +7097,12 @@ var LeaferUI = (function (exports) {
         static one(data, x, y, width, height) {
             return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
         }
+        static registerUI() {
+            registerUI()(this);
+        }
+        static registerData(data) {
+            dataProcessor(data)(this.prototype);
+        }
         destroy() {
             this.fill = this.stroke = null;
             super.destroy();
@@ -7162,10 +7241,19 @@ var LeaferUI = (function (exports) {
         dataType(false)
     ], exports.UI.prototype, "lazy", void 0);
     __decorate([
-        strokeType('none')
+        naturalBoundsType(1)
+    ], exports.UI.prototype, "pixelRatio", void 0);
+    __decorate([
+        pathInputType()
+    ], exports.UI.prototype, "path", void 0);
+    __decorate([
+        pathType()
+    ], exports.UI.prototype, "windingRule", void 0);
+    __decorate([
+        arrowType('none')
     ], exports.UI.prototype, "startArrow", void 0);
     __decorate([
-        strokeType('none')
+        arrowType('none')
     ], exports.UI.prototype, "endArrow", void 0);
     __decorate([
         pathType(0)
@@ -7191,9 +7279,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
-    __decorate([
-        rewrite(PathDrawer.drawPathByData)
-    ], exports.UI.prototype, "__drawPathByData", null);
     exports.UI = UI_1 = __decorate([
         useModule(UIBounds),
         useModule(UIRender),
@@ -7202,12 +7287,15 @@ var LeaferUI = (function (exports) {
 
     exports.Group = class Group extends exports.UI {
         get __tag() { return 'Group'; }
+        get isBranch() { return true; }
         constructor(data) {
             super(data);
+        }
+        reset(data) {
             this.__setBranch();
+            super.reset(data);
         }
         __setBranch() {
-            this.isBranch = true;
             if (!this.children)
                 this.children = [];
         }
@@ -7219,7 +7307,7 @@ var LeaferUI = (function (exports) {
                     this.__setBranch();
                 }
                 else {
-                    this.removeAll(true);
+                    this.clear();
                 }
                 super.set(data);
                 let child;
@@ -7267,6 +7355,7 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
         get app() { return this.parent || this; }
+        get isLeafer() { return true; }
         get imageReady() { return this.viewReady && ImageManager.isComplete; }
         get layoutLocked() { return !this.layouter.running; }
         get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
@@ -7383,7 +7472,7 @@ var LeaferUI = (function (exports) {
             this.forceRender();
         }
         forceRender(bounds) {
-            this.renderer.addBlock(new Bounds(bounds) || this.canvas.bounds);
+            this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds);
             if (this.viewReady)
                 this.renderer.update();
         }
@@ -7414,7 +7503,6 @@ var LeaferUI = (function (exports) {
         }
         __setLeafer(leafer) {
             this.leafer = leafer;
-            this.isLeafer = !!leafer;
             this.__level = 1;
         }
         setZoomLayer(zoomLayer) {
@@ -7601,14 +7689,10 @@ var LeaferUI = (function (exports) {
         constructor(data) {
             super(data);
         }
-        __drawPathByData(_drawer, _data) { }
     };
     __decorate([
         dataProcessor(RectData)
     ], exports.Rect.prototype, "__", void 0);
-    __decorate([
-        rewrite(exports.UI.prototype.__drawPathByBox)
-    ], exports.Rect.prototype, "__drawPathByData", null);
     exports.Rect = __decorate([
         useModule(RectRender),
         rewriteAble(),
@@ -7621,9 +7705,9 @@ var LeaferUI = (function (exports) {
     const { copy: copy$3, add } = BoundsHelper;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
+        get isBranchLeaf() { return true; }
         constructor(data) {
             super(data);
-            this.isBranchLeaf = true;
             this.__layout.renderChanged || this.__layout.renderChange();
         }
         __updateStrokeSpread() { return 0; }
@@ -7637,8 +7721,18 @@ var LeaferUI = (function (exports) {
         }
         __updateRectBoxBounds() { }
         __updateBoxBounds() {
-            if (this.__.__autoBounds && this.children.length) {
+            const data = this.__;
+            if (data.__autoSide && this.children.length) {
+                if (this.leafer)
+                    this.leafer.layouter.addExtra(this);
                 super.__updateBoxBounds();
+                if (!data.__autoSize) {
+                    const b = this.__layout.boxBounds;
+                    if (!data.__autoWidth)
+                        b.x = 0, b.width = data.width;
+                    if (!data.__autoHeight)
+                        b.y = 0, b.height = data.height;
+                }
             }
             else {
                 this.__updateRectBoxBounds();
@@ -7660,7 +7754,6 @@ var LeaferUI = (function (exports) {
             super.__updateChange();
             this.__updateRectChange();
         }
-        __drawPathByData(_drawer, _data) { }
         __renderRect(_canvas, _options) { }
         __renderGroup(_canvas, _options) { }
         __render(canvas, options) {
@@ -7705,9 +7798,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         rewrite(rect.__updateChange)
     ], exports.Box.prototype, "__updateRectChange", null);
-    __decorate([
-        rewrite(rect.__drawPathByData)
-    ], exports.Box.prototype, "__drawPathByData", null);
     __decorate([
         rewrite(rect.__render)
     ], exports.Box.prototype, "__renderRect", null);
@@ -7721,9 +7811,9 @@ var LeaferUI = (function (exports) {
 
     exports.Frame = class Frame extends exports.Box {
         get __tag() { return 'Frame'; }
+        get isFrame() { return true; }
         constructor(data) {
             super(data);
-            this.isFrame = true;
         }
     };
     __decorate([
@@ -7797,7 +7887,7 @@ var LeaferUI = (function (exports) {
 
     const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = PathCommandDataHelper;
     const { rotate: rotate$1, getAngle: getAngle$2, getDistance: getDistance$2, defaultPoint } = PointHelper;
-    const { toBounds: toBounds$2 } = PathBounds;
+    const { toBounds: toBounds$1 } = PathBounds;
     exports.Line = class Line extends exports.UI {
         get __tag() { return 'Line'; }
         get toPoint() {
@@ -7829,8 +7919,11 @@ var LeaferUI = (function (exports) {
             }
         }
         __updateRenderPath() {
-            if (this.__.points && this.__.curve) {
-                drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line');
+            const data = this.__;
+            if (!this.pathInputed && data.points && data.curve) {
+                drawPoints$1(data.__pathForRender = [], data.points, data.curve, this.pathClosed);
+                if (data.__useArrow)
+                    PathArrow.addArrows(this, false);
             }
             else {
                 super.__updateRenderPath();
@@ -7838,7 +7931,7 @@ var LeaferUI = (function (exports) {
         }
         __updateBoxBounds() {
             if (this.points) {
-                toBounds$2(this.__.__pathForRender, this.__layout.boxBounds);
+                toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
             }
             else {
                 super.__updateBoxBounds();
@@ -7871,6 +7964,7 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Polygon'; }
         constructor(data) {
             super(data);
+            this.pathClosed = true;
         }
         __updatePath() {
             const path = this.__.path = [];
@@ -8026,7 +8120,7 @@ var LeaferUI = (function (exports) {
         }
     };
     __decorate([
-        dataProcessor(ImageData)
+        dataProcessor(CanvasData)
     ], exports.Canvas.prototype, "__", void 0);
     __decorate([
         resizeType(100)
@@ -8089,7 +8183,7 @@ var LeaferUI = (function (exports) {
             data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
             data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
             data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
-            data.__clipText = textOverflow !== 'show' && !data.__autoBounds;
+            data.__clipText = textOverflow !== 'show' && !data.__autoSize;
             this.__updateTextDrawData();
             const { bounds } = data.__textDrawData;
             const b = layout.boxBounds;
@@ -8206,25 +8300,16 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Text);
 
-    const { toBounds: toBounds$1 } = PathBounds;
     exports.Path = class Path extends exports.UI {
         get __tag() { return 'Path'; }
         constructor(data) {
             super(data);
-        }
-        __updateBoxBounds() {
-            toBounds$1(this.__.path, this.__layout.boxBounds);
+            this.__.__pathInputed = 2;
         }
     };
     __decorate([
         dataProcessor(PathData)
     ], exports.Path.prototype, "__", void 0);
-    __decorate([
-        pathType()
-    ], exports.Path.prototype, "path", void 0);
-    __decorate([
-        pathType()
-    ], exports.Path.prototype, "windingRule", void 0);
     __decorate([
         affectStrokeBoundsType('center')
     ], exports.Path.prototype, "strokeAlign", void 0);
@@ -8240,12 +8325,12 @@ var LeaferUI = (function (exports) {
         setStyle(data) {
             const path = this.pathElement = new exports.Path(data);
             this.pathStyle = data;
-            this.path = path.path || (path.path = []);
+            this.__path = path.path || (path.path = []);
             this.add(path);
             return this;
         }
         beginPath() {
-            this.path.length = 0;
+            this.__path.length = 0;
             this.paint();
             return this;
         }
@@ -8269,10 +8354,20 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataProcessor(PenData)
     ], exports.Pen.prototype, "__", void 0);
+    __decorate([
+        penPathType()
+    ], exports.Pen.prototype, "path", void 0);
     exports.Pen = __decorate([
-        useModule(PathCreator, ['beginPath']),
+        useModule(PathCreator, ['beginPath', 'path']),
         registerUI()
     ], exports.Pen);
+    function penPathType() {
+        return (target, key) => {
+            defineKey(target, key, {
+                get() { return this.__path; }
+            });
+        };
+    }
 
     exports.App = class App extends exports.Leafer {
         get __tag() { return 'App'; }
@@ -10373,9 +10468,9 @@ var LeaferUI = (function (exports) {
     function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
         if (attrName === 'fill' && !ui.__.__naturalWidth) {
             const data = ui.__;
-            data.__naturalWidth = image.width;
-            data.__naturalHeight = image.height;
-            if (data.__autoWidth || data.__autoHeight) {
+            data.__naturalWidth = image.width / data.pixelRatio;
+            data.__naturalHeight = image.height / data.pixelRatio;
+            if (data.__autoSide) {
                 ui.forceUpdate('width');
                 if (ui.__proxyData) {
                     ui.setProxyAttr('width', data.width);
@@ -10405,7 +10500,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
-    const { round, abs: abs$1 } = Math;
+    const { ceil, abs: abs$1 } = Math;
     function createPattern(ui, paint, pixelRatio) {
         let { scaleX, scaleY } = ui.__world;
         const id = scaleX + '-' + scaleY;
@@ -10456,7 +10551,7 @@ var LeaferUI = (function (exports) {
                 }
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const canvas = image.getCanvas(width < 1 ? 1 : round(width), height < 1 ? 1 : round(height), opacity);
+            const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, opacity);
             const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -11367,37 +11462,55 @@ var LeaferUI = (function (exports) {
                 const { leafer } = leaf;
                 if (leafer) {
                     leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
-                        let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                         options = FileHelper.getExportOptions(options);
-                        const { scale, slice, trim } = options;
+                        let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                        const { worldTransform, isLeafer, isFrame } = leaf;
+                        const { slice, trim, onCanvas } = options;
+                        const scale = options.scale || 1;
                         const pixelRatio = options.pixelRatio || 1;
                         const screenshot = options.screenshot || leaf.isApp;
-                        const fill = options.fill === undefined ? ((leaf.isLeafer && screenshot) ? leaf.fill : '') : options.fill;
+                        const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : undefined) : options.fill;
                         const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
                         if (screenshot) {
-                            renderBounds = screenshot === true ? (leaf.isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                            renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
                         }
                         else {
-                            const { localTransform, __world: world } = leaf;
-                            matrix.set(world).divide(localTransform).invert();
-                            scaleX = 1 / (world.scaleX / leaf.scaleX);
-                            scaleY = 1 / (world.scaleY / leaf.scaleY);
-                            renderBounds = leaf.getBounds('render', 'local');
-                        }
-                        let { x, y, width, height } = renderBounds;
-                        if (scale) {
-                            matrix.scale(scale);
-                            width *= scale, height *= scale;
-                            scaleX *= scale, scaleY *= scale;
+                            const location = options.location || ((isLeafer || isFrame) ? 'inner' : 'local');
+                            scaleX = worldTransform.scaleX;
+                            scaleY = worldTransform.scaleY;
+                            switch (location) {
+                                case 'inner':
+                                    matrix.set(worldTransform).invert();
+                                    break;
+                                case 'local':
+                                    matrix.set(worldTransform).divide(leaf.localTransform).invert();
+                                    scaleX /= leaf.scaleX;
+                                    scaleY /= leaf.scaleY;
+                                    break;
+                                case 'world':
+                                    scaleX = 1;
+                                    scaleY = 1;
+                                    break;
+                            }
+                            renderBounds = leaf.getBounds('render', location);
                         }
-                        let canvas = Creator.canvas({ width: Math.ceil(width), height: Math.ceil(width), pixelRatio });
-                        const renderOptions = { matrix: matrix.translate(-x, -y).withScale(scaleX, scaleY) };
+                        const { x, y, width, height } = new Bounds(renderBounds).scale(scale).ceil();
+                        let canvas = Creator.canvas({ width, height, pixelRatio });
+                        const renderOptions = { matrix: matrix.scale(scale).translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
                         if (slice) {
                             leaf = leafer;
                             renderOptions.bounds = canvas.bounds;
                         }
                         canvas.save();
-                        leaf.__render(canvas, renderOptions);
+                        if (isFrame && fill !== undefined) {
+                            const oldFill = leaf.get('fill');
+                            leaf.fill = '';
+                            leaf.__render(canvas, renderOptions);
+                            leaf.fill = oldFill;
+                        }
+                        else {
+                            leaf.__render(canvas, renderOptions);
+                        }
                         canvas.restore();
                         if (trim) {
                             trimBounds = getTrimBounds(canvas);
@@ -11408,6 +11521,8 @@ var LeaferUI = (function (exports) {
                         }
                         if (needFill)
                             canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
+                        if (onCanvas)
+                            onCanvas(canvas);
                         const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
                         over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
                     }));
@@ -11444,7 +11559,6 @@ var LeaferUI = (function (exports) {
 
     exports.AnimateEvent = AnimateEvent;
     exports.AroundHelper = AroundHelper;
-    exports.ArrowData = ArrowData;
     exports.AutoBounds = AutoBounds;
     exports.BezierHelper = BezierHelper;
     exports.Bounds = Bounds;
@@ -11509,6 +11623,7 @@ var LeaferUI = (function (exports) {
     exports.Paint = Paint;
     exports.PaintGradient = PaintGradient;
     exports.PaintImage = PaintImage;
+    exports.PathArrow = PathArrow;
     exports.PathBounds = PathBounds;
     exports.PathCommandDataHelper = PathCommandDataHelper;
     exports.PathCommandMap = PathCommandMap;
@@ -11553,6 +11668,7 @@ var LeaferUI = (function (exports) {
     exports.Watcher = Watcher;
     exports.affectRenderBoundsType = affectRenderBoundsType;
     exports.affectStrokeBoundsType = affectStrokeBoundsType;
+    exports.arrowType = arrowType;
     exports.autoLayoutType = autoLayoutType;
     exports.boundsType = boundsType;
     exports.canvasPatch = canvasPatch;
@@ -11563,6 +11679,8 @@ var LeaferUI = (function (exports) {
     exports.defineDataProcessor = defineDataProcessor;
     exports.defineKey = defineKey;
     exports.defineLeafAttr = defineLeafAttr;
+    exports.doBoundsType = doBoundsType;
+    exports.doStrokeType = doStrokeType;
     exports.effectType = effectType;
     exports.eraserType = eraserType;
     exports.getBoundsData = getBoundsData;
@@ -11572,7 +11690,9 @@ var LeaferUI = (function (exports) {
     exports.hitType = hitType;
     exports.layoutProcessor = layoutProcessor;
     exports.maskType = maskType;
+    exports.naturalBoundsType = naturalBoundsType;
     exports.opacityType = opacityType;
+    exports.pathInputType = pathInputType;
     exports.pathType = pathType;
     exports.positionType = positionType;
     exports.registerUI = registerUI;