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

package/dist/web.module.js

@@ -29,7 +29,7 @@ const IncrementId = {
 };
 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)
@@ -91,7 +91,7 @@ const MathHelper = {
     },
     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;
     }
 };
@@ -403,6 +403,10 @@ const PointHelper = {
         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;
@@ -430,19 +434,19 @@ const PointHelper = {
     },
     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;
     },
@@ -468,7 +472,7 @@ const PointHelper = {
         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);
@@ -476,10 +480,10 @@ const PointHelper = {
         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)
@@ -497,15 +501,19 @@ const PointHelper = {
     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) {
@@ -559,8 +567,8 @@ class Point {
     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);
@@ -714,7 +722,7 @@ const { addPoint: addPoint$4 } = TwoPointBoundsHelper;
 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 = {};
@@ -846,8 +854,8 @@ const BoundsHelper = {
         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) {
@@ -1431,6 +1439,8 @@ class LeafData {
             if (value !== undefined)
                 return value;
         }
+        if (name === 'path' && !this.__pathInputed)
+            return;
         return this['_' + name];
     }
     __removeInput(name) {
@@ -1444,6 +1454,8 @@ class LeafData {
             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;
                 }
@@ -1473,6 +1485,9 @@ class LeafData {
             t.__single = true;
         }
     }
+    __removeNaturalSize() {
+        this.__naturalWidth = this.__naturalHeight = undefined;
+    }
     destroy() {
         this.__input = this.__middle = null;
     }
@@ -1960,7 +1975,7 @@ class LeaferCanvasBase extends Canvas$1 {
             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;
@@ -2183,7 +2198,7 @@ const RectHelper = {
     }
 };
 
-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;
@@ -2297,7 +2312,7 @@ const BezierHelper = {
             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);
@@ -2783,22 +2798,12 @@ const PathCommandDataHelper = {
         }
     },
     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);
     },
@@ -2810,68 +2815,70 @@ const { ellipse: ellipse$3, arc: arc$2 } = PathCommandDataHelper;
 
 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;
     }
 }
@@ -3620,9 +3627,35 @@ function boundsType(defaultValue) {
         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);
             }
         });
     };
@@ -3633,11 +3666,14 @@ function affectStrokeBoundsType(defaultValue) {
         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) => {
@@ -4257,6 +4293,7 @@ class ChildEvent extends Event {
 }
 ChildEvent.ADD = 'child.add';
 ChildEvent.REMOVE = 'child.remove';
+ChildEvent.DESTROY = 'child.destroy';
 
 class PropertyEvent extends Event {
     constructor(type, target, attrName, oldValue, newValue) {
@@ -4704,6 +4741,7 @@ const WaitHelper = {
 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);
@@ -4715,7 +4753,8 @@ const LeafBounds = {
     __updateLocalBounds() {
         const layout = this.__layout;
         if (layout.boxChanged) {
-            this.__updatePath();
+            if (!this.__.__pathInputed)
+                this.__updatePath();
             this.__updateRenderPath();
             this.__updateBoxBounds();
             layout.boxChanged = false;
@@ -4782,11 +4821,16 @@ const LeafBounds = {
     },
     __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;
@@ -4915,6 +4959,9 @@ let Leaf = class Leaf {
     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'); }
@@ -4928,6 +4975,7 @@ let Leaf = class Leaf {
     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);
@@ -4979,7 +5027,7 @@ let Leaf = class Leaf {
         }
     }
     set(_data) { }
-    get() { return undefined; }
+    get(_name) { return undefined; }
     toJSON() {
         return this.__.__getInputData();
     }
@@ -5196,10 +5244,13 @@ let Leaf = class Leaf {
     }
     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;
@@ -5219,11 +5270,6 @@ const { setListWithFn } = BoundsHelper;
 const { sort } = BranchHelper;
 const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
 let Branch = class Branch extends Leaf {
-    constructor() {
-        super();
-        this.isBranch = true;
-        this.children = [];
-    }
     __updateStrokeSpread() {
         const { children } = this;
         for (let i = 0, len = children.length; i < len; i++) {
@@ -5263,6 +5309,8 @@ let Branch = class Branch extends Leaf {
         }
     }
     add(child, index) {
+        if (child === this)
+            return;
         if (child.parent)
             child.parent.remove(child);
         child.parent = this;
@@ -6015,9 +6063,11 @@ class Layouter {
         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);
@@ -6533,6 +6583,18 @@ Object.assign(Creator, {
 });
 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, {
@@ -6559,12 +6621,14 @@ function resizeType(defaultValue) {
 
 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 {
@@ -6582,7 +6646,8 @@ class UIData extends LeafData {
     }
     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;
@@ -6610,7 +6675,7 @@ class UIData extends LeafData {
     }
     setFill(value) {
         if (this.__naturalWidth)
-            this.__naturalWidth = this.__naturalHeight = undefined;
+            this.__removeNaturalSize();
         if (typeof value === 'string' || !value) {
             if (this.__isFills) {
                 this.__removeInput('fill');
@@ -6646,6 +6711,17 @@ class UIData extends LeafData {
             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) {
@@ -6707,9 +6783,6 @@ class FrameData extends BoxData {
 class LineData extends UIData {
 }
 
-class ArrowData extends LineData {
-}
-
 class RectData extends UIData {
     get __boxStroke() { return true; }
 }
@@ -6724,19 +6797,7 @@ class PolygonData extends UIData {
 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 {
@@ -6806,6 +6867,8 @@ const UIBounds = {
             }
         }
         this.__layout.strokeBoxSpread = boxWidth;
+        if (this.__.__useArrow)
+            width += strokeWidth * 5;
         return width;
     },
     __updateRenderSpread() {
@@ -6939,6 +7002,7 @@ const RectRender = {
 var UI_1;
 let UI = UI_1 = class UI extends 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;
@@ -6959,8 +7023,8 @@ let UI = UI_1 = class UI extends Leaf {
     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; }
@@ -6992,6 +7056,8 @@ let UI = UI_1 = class UI extends Leaf {
         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) {
@@ -7002,7 +7068,14 @@ let UI = UI_1 = class UI extends Leaf {
         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) {
@@ -7021,6 +7094,12 @@ let UI = UI_1 = class UI extends Leaf {
     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();
@@ -7159,10 +7238,19 @@ __decorate([
     dataType(false)
 ], UI.prototype, "lazy", void 0);
 __decorate([
-    strokeType('none')
+    naturalBoundsType(1)
+], UI.prototype, "pixelRatio", void 0);
+__decorate([
+    pathInputType()
+], UI.prototype, "path", void 0);
+__decorate([
+    pathType()
+], UI.prototype, "windingRule", void 0);
+__decorate([
+    arrowType('none')
 ], UI.prototype, "startArrow", void 0);
 __decorate([
-    strokeType('none')
+    arrowType('none')
 ], UI.prototype, "endArrow", void 0);
 __decorate([
     pathType(0)
@@ -7188,9 +7276,6 @@ __decorate([
 __decorate([
     rewrite(Leaf.prototype.reset)
 ], UI.prototype, "reset", null);
-__decorate([
-    rewrite(PathDrawer.drawPathByData)
-], UI.prototype, "__drawPathByData", null);
 UI = UI_1 = __decorate([
     useModule(UIBounds),
     useModule(UIRender),
@@ -7199,12 +7284,15 @@ UI = UI_1 = __decorate([
 
 let Group = class Group extends 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 = [];
     }
@@ -7216,7 +7304,7 @@ let Group = class Group extends UI {
                 this.__setBranch();
             }
             else {
-                this.removeAll(true);
+                this.clear();
             }
             super.set(data);
             let child;
@@ -7264,6 +7352,7 @@ let Leafer = class Leafer extends Group {
     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 }; }
@@ -7380,7 +7469,7 @@ let Leafer = class Leafer extends Group {
         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();
     }
@@ -7411,7 +7500,6 @@ let Leafer = class Leafer extends Group {
     }
     __setLeafer(leafer) {
         this.leafer = leafer;
-        this.isLeafer = !!leafer;
         this.__level = 1;
     }
     setZoomLayer(zoomLayer) {
@@ -7598,14 +7686,10 @@ let Rect = class Rect extends UI {
     constructor(data) {
         super(data);
     }
-    __drawPathByData(_drawer, _data) { }
 };
 __decorate([
     dataProcessor(RectData)
 ], Rect.prototype, "__", void 0);
-__decorate([
-    rewrite(UI.prototype.__drawPathByBox)
-], Rect.prototype, "__drawPathByData", null);
 Rect = __decorate([
     useModule(RectRender),
     rewriteAble(),
@@ -7618,9 +7702,9 @@ const bounds$1 = {};
 const { copy: copy$3, add } = BoundsHelper;
 let Box = class Box extends 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; }
@@ -7634,8 +7718,18 @@ let Box = class Box extends Group {
     }
     __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();
@@ -7657,7 +7751,6 @@ let Box = class Box extends Group {
         super.__updateChange();
         this.__updateRectChange();
     }
-    __drawPathByData(_drawer, _data) { }
     __renderRect(_canvas, _options) { }
     __renderGroup(_canvas, _options) { }
     __render(canvas, options) {
@@ -7702,9 +7795,6 @@ __decorate([
 __decorate([
     rewrite(rect.__updateChange)
 ], Box.prototype, "__updateRectChange", null);
-__decorate([
-    rewrite(rect.__drawPathByData)
-], Box.prototype, "__drawPathByData", null);
 __decorate([
     rewrite(rect.__render)
 ], Box.prototype, "__renderRect", null);
@@ -7718,9 +7808,9 @@ Box = __decorate([
 
 let Frame = class Frame extends Box {
     get __tag() { return 'Frame'; }
+    get isFrame() { return true; }
     constructor(data) {
         super(data);
-        this.isFrame = true;
     }
 };
 __decorate([
@@ -7794,7 +7884,7 @@ Ellipse = __decorate([
 
 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;
 let Line = class Line extends UI {
     get __tag() { return 'Line'; }
     get toPoint() {
@@ -7826,8 +7916,11 @@ let Line = class Line extends UI {
         }
     }
     __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();
@@ -7835,7 +7928,7 @@ let Line = class Line extends UI {
     }
     __updateBoxBounds() {
         if (this.points) {
-            toBounds$2(this.__.__pathForRender, this.__layout.boxBounds);
+            toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
         }
         else {
             super.__updateBoxBounds();
@@ -7868,6 +7961,7 @@ let Polygon = class Polygon extends UI {
     get __tag() { return 'Polygon'; }
     constructor(data) {
         super(data);
+        this.pathClosed = true;
     }
     __updatePath() {
         const path = this.__.path = [];
@@ -8023,7 +8117,7 @@ let Canvas = class Canvas extends Rect {
     }
 };
 __decorate([
-    dataProcessor(ImageData)
+    dataProcessor(CanvasData)
 ], Canvas.prototype, "__", void 0);
 __decorate([
     resizeType(100)
@@ -8086,7 +8180,7 @@ let Text = class Text extends UI {
         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;
@@ -8203,25 +8297,16 @@ Text = __decorate([
     registerUI()
 ], Text);
 
-const { toBounds: toBounds$1 } = PathBounds;
 let Path = class Path extends UI {
     get __tag() { return 'Path'; }
     constructor(data) {
         super(data);
-    }
-    __updateBoxBounds() {
-        toBounds$1(this.__.path, this.__layout.boxBounds);
+        this.__.__pathInputed = 2;
     }
 };
 __decorate([
     dataProcessor(PathData)
 ], Path.prototype, "__", void 0);
-__decorate([
-    pathType()
-], Path.prototype, "path", void 0);
-__decorate([
-    pathType()
-], Path.prototype, "windingRule", void 0);
 __decorate([
     affectStrokeBoundsType('center')
 ], Path.prototype, "strokeAlign", void 0);
@@ -8237,12 +8322,12 @@ let Pen = class Pen extends Group {
     setStyle(data) {
         const path = this.pathElement = new 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;
     }
@@ -8266,10 +8351,20 @@ let Pen = class Pen extends Group {
 __decorate([
     dataProcessor(PenData)
 ], Pen.prototype, "__", void 0);
+__decorate([
+    penPathType()
+], Pen.prototype, "path", void 0);
 Pen = __decorate([
-    useModule(PathCreator, ['beginPath']),
+    useModule(PathCreator, ['beginPath', 'path']),
     registerUI()
 ], Pen);
+function penPathType() {
+    return (target, key) => {
+        defineKey(target, key, {
+            get() { return this.__path; }
+        });
+    };
+}
 
 let App = class App extends Leafer {
     get __tag() { return 'App'; }
@@ -10370,9 +10465,9 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 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);
@@ -10402,7 +10497,7 @@ function emit(ui, type, data) {
 }
 
 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;
@@ -10453,7 +10548,7 @@ function createPattern(ui, paint, pixelRatio) {
             }
             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;
@@ -11364,37 +11459,55 @@ const ExportModule = {
             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(height), 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);
@@ -11405,6 +11518,8 @@ const ExportModule = {
                     }
                     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 });
                 }));
@@ -11439,4 +11554,4 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-export { AnimateEvent, Answer, App, AroundHelper, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, effectType, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, layoutProcessor, maskType, opacityType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, useCanvas, useModule };
+export { AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, arrowType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, useCanvas, useModule };