leafer-ui 2.1.6 → 2.1.8

package/dist/web.module.js

@@ -292,7 +292,7 @@ const FourNumberHelper = {
         return to;
     },
     setTemp(top, right, bottom, left) {
-        return set$2(tempFour, top, right, bottom, left);
+        return set$3(tempFour, top, right, bottom, left);
     },
     toTempAB(a, b, change) {
         tempTo = change ? isNumber(a) ? b : a : [];
@@ -332,22 +332,22 @@ const FourNumberHelper = {
     max(t, other, change) {
         if (isNumber(t) && isNumber(other)) return max$5(t, other);
         toTempAB(t, other, change);
-        return set$2(tempTo, max$5(tempA[0], tempB[0]), max$5(tempA[1], tempB[1]), max$5(tempA[2], tempB[2]), max$5(tempA[3], tempB[3]));
+        return set$3(tempTo, max$5(tempA[0], tempB[0]), max$5(tempA[1], tempB[1]), max$5(tempA[2], tempB[2]), max$5(tempA[3], tempB[3]));
     },
     add(t, other, change) {
         if (isNumber(t) && isNumber(other)) return t + other;
         toTempAB(t, other, change);
-        return set$2(tempTo, tempA[0] + tempB[0], tempA[1] + tempB[1], tempA[2] + tempB[2], tempA[3] + tempB[3]);
+        return set$3(tempTo, tempA[0] + tempB[0], tempA[1] + tempB[1], tempA[2] + tempB[2], tempA[3] + tempB[3]);
     },
     swapAndScale(t, scaleX, scaleY, change) {
         if (isNumber(t)) return scaleX === scaleY ? t * scaleX : [ t * scaleY, t * scaleX ];
         const to = change ? t : [];
         const [top, right, bottom, left] = t.length === 4 ? t : get$5(t);
-        return set$2(to, bottom * scaleY, left * scaleX, top * scaleY, right * scaleX);
+        return set$3(to, bottom * scaleY, left * scaleX, top * scaleY, right * scaleX);
     }
 };
 
-const {set: set$2, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
+const {set: set$3, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
 
 const {round: round$3, pow: pow$1, max: max$4, floor: floor$2, PI: PI$3} = Math;
 
@@ -472,7 +472,7 @@ const {sin: sin$5, cos: cos$5, acos: acos, sqrt: sqrt$3} = Math;
 
 const {float: float$3} = MathHelper;
 
-const tempPoint$4 = {};
+const tempPoint$5 = {};
 
 function getWorld() {
     return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), {
@@ -531,8 +531,8 @@ const MatrixHelper = {
         to.f = t.f * pixelRatio;
     },
     scaleOfOuter(t, origin, scaleX, scaleY) {
-        M$6.toInnerPoint(t, origin, tempPoint$4);
-        M$6.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
+        M$6.toInnerPoint(t, origin, tempPoint$5);
+        M$6.scaleOfInner(t, tempPoint$5, scaleX, scaleY);
     },
     scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -550,8 +550,8 @@ const MatrixHelper = {
         t.d = c * sinR + d * cosR;
     },
     rotateOfOuter(t, origin, rotation) {
-        M$6.toInnerPoint(t, origin, tempPoint$4);
-        M$6.rotateOfInner(t, tempPoint$4, rotation);
+        M$6.toInnerPoint(t, origin, tempPoint$5);
+        M$6.rotateOfInner(t, tempPoint$5, rotation);
     },
     rotateOfInner(t, origin, rotation) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -572,8 +572,8 @@ const MatrixHelper = {
         }
     },
     skewOfOuter(t, origin, skewX, skewY) {
-        M$6.toInnerPoint(t, origin, tempPoint$4);
-        M$6.skewOfInner(t, tempPoint$4, skewX, skewY);
+        M$6.toInnerPoint(t, origin, tempPoint$5);
+        M$6.skewOfInner(t, tempPoint$5, skewX, skewY);
     },
     skewOfInner(t, origin, skewX, skewY = 0) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -774,7 +774,7 @@ const {float: float$2} = MathHelper;
 
 const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3} = MatrixHelper;
 
-const {sin: sin$4, cos: cos$4, abs: abs$5, sqrt: sqrt$2, atan2: atan2$2, min: min$2, round: round$2} = Math;
+const {sin: sin$4, cos: cos$4, abs: abs$6, sqrt: sqrt$2, atan2: atan2$2, min: min$2, round: round$2} = Math;
 
 const PointHelper = {
     defaultPoint: getPointData(),
@@ -811,15 +811,15 @@ const PointHelper = {
         t.x += (t.x - origin.x) * (scaleX - 1);
         t.y += (t.y - origin.y) * (scaleY - 1);
     },
-    rotate(t, rotation, origin) {
+    rotate(t, rotation, origin, radiusX = 1, radiusY = 1) {
         if (!origin) origin = P$5.defaultPoint;
         rotation *= OneRadian;
         const cosR = cos$4(rotation);
         const sinR = sin$4(rotation);
-        const rx = t.x - origin.x;
-        const ry = t.y - origin.y;
-        t.x = origin.x + rx * cosR - ry * sinR;
-        t.y = origin.y + rx * sinR + ry * cosR;
+        const rx = (t.x - origin.x) / radiusX;
+        const ry = (t.y - origin.y) / radiusY;
+        t.x = origin.x + (rx * cosR - ry * sinR) * radiusX;
+        t.y = origin.y + (rx * sinR + ry * cosR) * radiusY;
     },
     tempToInnerOf(t, matrix) {
         const {tempPoint: temp} = P$5;
@@ -872,15 +872,15 @@ const PointHelper = {
         return getDistanceFrom(t.x, t.y, point.x, point.y);
     },
     getDistanceFrom(x1, y1, x2, y2) {
-        const x = abs$5(x2 - x1);
-        const y = abs$5(y2 - y1);
+        const x = abs$6(x2 - x1);
+        const y = abs$6(y2 - y1);
         return sqrt$2(x * x + y * y);
     },
     getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
         return min$2(getDistanceFrom(x1, y1, x2, y2), getDistanceFrom(x2, y2, x3, y3));
     },
-    getAngle(t, to) {
-        return getAtan2(t, to) / OneRadian;
+    getAngle(t, to, radiusX, radiusY) {
+        return getAtan2(t, to, radiusX, radiusY) / OneRadian;
     },
     getRotation(t, origin, to, toOrigin) {
         if (!toOrigin) toOrigin = origin;
@@ -894,8 +894,8 @@ const PointHelper = {
         const d = toY - toOriginY;
         return Math.atan2(a * d - b * c, a * c + b * d);
     },
-    getAtan2(t, to) {
-        return atan2$2(to.y - t.y, to.x - t.x);
+    getAtan2(t, to, radiusX = 1, radiusY = 1) {
+        return atan2$2((to.y - t.y) / radiusY, (to.x - t.x) / radiusX);
     },
     getDistancePoint(t, to, distance, changeTo, fromTo) {
         const r = getAtan2(t, to);
@@ -952,12 +952,12 @@ class Point {
         PointHelper.scaleOf(this, origin, scaleX, scaleY);
         return this;
     }
-    rotate(rotation, origin) {
-        PointHelper.rotate(this, rotation, origin);
+    rotate(rotation, origin, radiusX, radiusY) {
+        PointHelper.rotate(this, rotation, origin, radiusX, radiusY);
         return this;
     }
-    rotateOf(origin, rotation) {
-        PointHelper.rotate(this, rotation, origin);
+    rotateOf(origin, rotation, radiusX, radiusY) {
+        PointHelper.rotate(this, rotation, origin, radiusX, radiusY);
         return this;
     }
     getRotation(origin, to, toOrigin) {
@@ -980,11 +980,11 @@ class Point {
     getDistancePoint(to, distance, changeTo, fromTo) {
         return new Point(PointHelper.getDistancePoint(this, to, distance, changeTo, fromTo));
     }
-    getAngle(to) {
-        return PointHelper.getAngle(this, to);
+    getAngle(to, radiusX, radiusY) {
+        return PointHelper.getAngle(this, to, radiusX, radiusY);
     }
-    getAtan2(to) {
-        return PointHelper.getAtan2(this, to);
+    getAtan2(to, radiusX, radiusY) {
+        return PointHelper.getAtan2(this, to, radiusX, radiusY);
     }
     isSame(point, quick) {
         return PointHelper.isSame(this, point, quick);
@@ -995,7 +995,7 @@ class Point {
     }
 }
 
-const tempPoint$3 = new Point;
+const tempPoint$4 = new Point;
 
 class Matrix {
     constructor(a, b, c, d, e, f) {
@@ -2702,15 +2702,15 @@ const RectHelper = {
     }
 };
 
-const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil, abs: abs$4, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
+const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil, abs: abs$5, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
 
 const {setPoint: setPoint$1, addPoint: addPoint$1} = TwoPointBoundsHelper;
 
-const {set: set$1, toNumberPoints: toNumberPoints} = PointHelper;
+const {set: set$2, toNumberPoints: toNumberPoints} = PointHelper;
 
 const {M: M$5, L: L$6, C: C$4, Q: Q$4, Z: Z$5} = PathCommandMap;
 
-const tempPoint$2 = {};
+const tempPoint$3 = {};
 
 const BezierHelper = {
     points(data, originPoints, curve, close) {
@@ -2779,14 +2779,14 @@ const BezierHelper = {
         const lenCB = hypot(CBx, CBy);
         let totalRadian = endRadian - startRadian;
         if (totalRadian < 0) totalRadian += PI2;
-        if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$4(totalRadian - PI$2) < 1e-12) {
+        if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$5(totalRadian - PI$2) < 1e-12) {
             if (data) data.push(L$6, x1, y1);
             if (setPointBounds) {
                 setPoint$1(setPointBounds, fromX, fromY);
                 addPoint$1(setPointBounds, x1, y1);
             }
-            if (setStartPoint) set$1(setStartPoint, fromX, fromY);
-            if (setEndPoint) set$1(setEndPoint, x1, y1);
+            if (setStartPoint) set$2(setStartPoint, fromX, fromY);
+            if (setEndPoint) set$2(setEndPoint, x1, y1);
             return;
         }
         const anticlockwise = BAx * CBy - CBx * BAy < 0;
@@ -2812,7 +2812,7 @@ const BezierHelper = {
         let totalRadian = endRadian - startRadian;
         if (totalRadian < 0) totalRadian += PI2; else if (totalRadian > PI2) totalRadian -= PI2;
         if (anticlockwise) totalRadian -= PI2;
-        const parts = ceil(abs$4(totalRadian / PI_2));
+        const parts = ceil(abs$5(totalRadian / PI_2));
         const partRadian = totalRadian / parts;
         const partRadian4Sin = sin$3(partRadian / 4);
         const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -2826,7 +2826,7 @@ const BezierHelper = {
         let fromX = cx + x, fromY = cy + y;
         if (data) data.push(data.length ? L$6 : M$5, fromX, fromY);
         if (setPointBounds) setPoint$1(setPointBounds, fromX, fromY);
-        if (setStartPoint) set$1(setStartPoint, fromX, fromY);
+        if (setStartPoint) set$2(setStartPoint, fromX, fromY);
         for (let i = 0; i < parts; i++) {
             endCos = cos$3(endRadian);
             endSin = sin$3(endRadian);
@@ -2845,7 +2845,7 @@ const BezierHelper = {
             startRadian = endRadian;
             endRadian += partRadian;
         }
-        if (setEndPoint) set$1(setEndPoint, cx + x, cy + y);
+        if (setEndPoint) set$2(setEndPoint, cx + x, cy + y);
     },
     quadraticCurveTo(data, fromX, fromY, x1, y1, toX, toY) {
         data.push(C$4, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY);
@@ -2881,8 +2881,8 @@ const BezierHelper = {
         addMode ? addPoint$1(pointBounds, fromX, fromY) : setPoint$1(pointBounds, fromX, fromY);
         addPoint$1(pointBounds, toX, toY);
         for (let i = 0, len = tList.length; i < len; i++) {
-            getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$2);
-            addPoint$1(pointBounds, tempPoint$2.x, tempPoint$2.y);
+            getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$3);
+            addPoint$1(pointBounds, tempPoint$3.x, tempPoint$3.y);
         }
     },
     getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, setPoint) {
@@ -3321,7 +3321,7 @@ const {M: M$3, L: L$4, C: C$2, Q: Q$2, Z: Z$3, N: N$2, D: D$3, X: X$2, G: G$2, F
 
 const {getMinDistanceFrom: getMinDistanceFrom, getRadianFrom: getRadianFrom} = PointHelper;
 
-const {tan: tan, min: min$1, abs: abs$3} = Math;
+const {tan: tan, min: min$1, abs: abs$4} = Math;
 
 const startPoint = {};
 
@@ -3381,7 +3381,7 @@ const PathCommandDataHelper = {
     arcTo(data, x1, y1, x2, y2, radius, lastX, lastY, fullRadius) {
         if (!isUndefined(lastX)) {
             const r = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / (fullRadius ? 1 : 2);
-            radius = min$1(radius, min$1(r, r * abs$3(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+            radius = min$1(radius, min$1(r, r * abs$4(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
         }
         data.push(U$2, x1, y1, x2, y2, radius);
     },
@@ -4586,7 +4586,9 @@ function sortType(defaultValue) {
         set(value) {
             if (this.__setAttr(key, value)) {
                 this.waitParent(() => {
-                    this.parent.__layout.childrenSortChange();
+                    const {parent: parent} = this;
+                    parent.__layout.childrenSortChange();
+                    if (parent.__.flow) parent.__layout.boxChange();
                 });
             }
         }
@@ -4988,7 +4990,7 @@ const LeafHelper = {
             p = p.parent;
         }
     },
-    animateMove(t, move, speed = .3) {
+    animateMove(t, move, speed = .3, onAnimate) {
         if (!move.x && !move.y) return;
         if (Math.abs(move.x) < 1 && Math.abs(move.y) < 1) {
             t.move(move);
@@ -4996,8 +4998,9 @@ const LeafHelper = {
             const x = move.x * speed, y = move.y * speed;
             move.x -= x, move.y -= y;
             t.move(x, y);
-            Platform.requestRender(() => L.animateMove(t, move, speed));
+            Platform.requestRender(() => L.animateMove(t, move, speed, onAnimate));
         }
+        onAnimate && onAnimate();
     }
 };
 
@@ -6038,7 +6041,7 @@ const LeafDataProxy = {
 
 const {setLayout: setLayout, multiplyParent: multiplyParent$2, translateInner: translateInner, defaultWorld: defaultWorld} = MatrixHelper;
 
-const {toPoint: toPoint$3, tempPoint: tempPoint$1} = AroundHelper;
+const {toPoint: toPoint$3, tempPoint: tempPoint$2} = AroundHelper;
 
 const LeafMatrix = {
     __updateWorldMatrix() {
@@ -6059,8 +6062,8 @@ const LeafMatrix = {
             local.e = data.x + data.offsetX;
             local.f = data.y + data.offsetY;
             if (data.around || data.origin) {
-                toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$1);
-                translateInner(local, -tempPoint$1.x, -tempPoint$1.y, !data.around);
+                toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$2);
+                translateInner(local, -tempPoint$2.x, -tempPoint$2.y, !data.around);
             }
         }
         this.__layout.matrixChanged = undefined;
@@ -6169,6 +6172,7 @@ const LeafBounds = {
         if (this.isBranch) {
             this.__extraUpdate();
             if (this.__.flow) {
+                if (this.__layout.childrenSortChanged) this.__updateSortChildren();
                 if (this.__layout.boxChanged) this.__updateFlowLayout();
                 updateAllMatrix$2(this);
                 updateBounds$1(this, this);
@@ -6240,11 +6244,7 @@ const {excludeRenderBounds: excludeRenderBounds$1} = LeafBoundsHelper, {hasSize:
 
 const BranchRender = {
     __updateChange() {
-        const {__layout: layout} = this;
-        if (layout.childrenSortChanged) {
-            this.__updateSortChildren();
-            layout.childrenSortChanged = false;
-        }
+        if (this.__layout.childrenSortChanged) this.__updateSortChildren();
         this.__.__checkSingle();
     },
     __render(canvas, options) {
@@ -6748,6 +6748,7 @@ let Branch = class Branch extends Leaf {
             children.sort(sort);
             this.__layout.affectChildrenSort = affectSort;
         }
+        this.__layout.childrenSortChanged = false;
     }
     add(child, index) {
         if (child === this || child.destroyed) return debug$6.warn("add self or destroyed");
@@ -6983,7 +6984,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.1.6";
+const version = "2.1.8";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -7834,7 +7835,7 @@ class Renderer {
 
 Renderer.clipSpread = 10;
 
-const tempPoint = {};
+const tempPoint$1 = {};
 
 const {copyRadiusPoint: copyRadiusPoint$1} = PointHelper;
 
@@ -7969,7 +7970,7 @@ class Picker {
         for (let i = len - 1; i > -1; i--) {
             child = children[i], data = child.__;
             if (!data.visible || hitMask && !data.mask) continue;
-            hit = hitRadiusPoint$1(child.__world, data.hitRadius ? copyRadiusPoint$1(tempPoint, point, data.hitRadius) : point);
+            hit = hitRadiusPoint$1(child.__world, data.hitRadius ? copyRadiusPoint$1(tempPoint$1, point, data.hitRadius) : point);
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
                     if (child.isBranchLeaf && data.__clipAfterFill && !child.__hitWorld(point, true)) continue;
@@ -8743,6 +8744,7 @@ let UI = UI_1 = class UI extends Leaf {
         this.set(keyframe);
         return Plugin.need("animate");
     }
+    killAnimate(_type, _nextStyle) {}
     export(_filename, _options) {
         return Plugin.need("export");
     }
@@ -9502,32 +9504,56 @@ __decorate([ affectRenderBoundsType("hide") ], Frame.prototype, "overflow", void
 
 Frame = __decorate([ registerUI() ], Frame);
 
-const {moveTo: moveTo$3, closePath: closePath$2, ellipse: ellipse} = PathCommandDataHelper;
+const {moveTo: moveTo$3, closePath: closePath$2, ellipse: ellipse} = PathCommandDataHelper, {tempPoint: tempPoint, set: set$1, rotate: rotate$2} = PointHelper, {abs: abs$3} = Math, tempCenter = {};
 
 let Ellipse = class Ellipse extends UI {
     get __tag() {
         return "Ellipse";
     }
     __updatePath() {
-        const data = this.__, {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = data;
+        const data = this.__, {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle, closed: closed} = data;
         const rx = width / 2, ry = height / 2;
         const path = data.path = [];
-        let open;
+        let open, hasAngle, closedAngle;
+        if (startAngle || endAngle) hasAngle = true;
+        if (hasAngle) closedAngle = abs$3(endAngle - startAngle) === 360;
         if (innerRadius) {
-            if (startAngle || endAngle) {
-                if (innerRadius < 1) ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false); else open = true;
-                ellipse(path, rx, ry, rx, ry, 0, endAngle, startAngle, true);
+            const drawInnerEllipse = innerRadius < 1 || closed;
+            let outerStartAngle = startAngle, outerEndAngle = endAngle, outerAnticlockwise;
+            if (hasAngle) {
+                if (drawInnerEllipse) {
+                    ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle);
+                    if (closedAngle) {
+                        set$1(tempPoint, width, ry);
+                        set$1(tempCenter, rx, ry);
+                        rotate$2(tempPoint, endAngle, tempCenter, rx, ry);
+                        moveTo$3(path, tempPoint.x, tempPoint.y);
+                    }
+                    outerStartAngle = endAngle;
+                    outerEndAngle = startAngle;
+                    outerAnticlockwise = true;
+                } else {
+                    if (!closedAngle) open = true;
+                }
             } else {
-                if (innerRadius < 1) {
+                if (drawInnerEllipse) {
                     ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
+                    closePath$2(path);
                     moveTo$3(path, width, ry);
+                    outerStartAngle = 360;
+                    outerAnticlockwise = true;
+                } else {
+                    outerEndAngle = 360;
                 }
-                ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
             }
+            ellipse(path, rx, ry, rx, ry, 0, outerStartAngle, outerEndAngle, outerAnticlockwise);
         } else {
-            if (startAngle || endAngle) {
-                moveTo$3(path, rx, ry);
-                ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle, false);
+            if (hasAngle) {
+                if (!closedAngle) {
+                    if (!closed) open = true;
+                    if (!open) moveTo$3(path, rx, ry);
+                }
+                ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle);
             } else {
                 ellipse(path, rx, ry, rx, ry);
             }
@@ -10204,8 +10230,8 @@ const DragBoundsHelper = {
         if (!change) scale = Object.assign({}, scale);
         tempDragBounds.set(dragBounds);
         tempContent.set(content).scaleOf(origin, scale.x, scale.y);
-        const originLeftScale = (origin.x - content.x) / content.width, originRightScale = 1 - originLeftScale;
-        const originTopScale = (origin.y - content.y) / content.height, originBottomScale = 1 - originTopScale;
+        const originLeftScale = float((origin.x - content.x) / content.width), originRightScale = float(1 - originLeftScale);
+        const originTopScale = float((origin.y - content.y) / content.height), originBottomScale = float(1 - originTopScale);
         let correctScaleX = 1, correctScaleY = 1, aScale, bScale, aSize, bSize;
         if (D.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
             if (scale.x < 0) tempContent.scaleOf(origin, correctScaleX = 1 / scale.x, 1);
@@ -10216,7 +10242,13 @@ const DragBoundsHelper = {
             correctScaleX *= max$1(aScale, bScale);
         } else {
             if (scale.x < 0) {
-                if (float(minX(content) - minX(dragBounds)) <= 0 || float(maxX(dragBounds) - maxX(content)) <= 0) tempContent.scaleOf(origin, correctScaleX = 1 / scale.x, 1);
+                if (float(minX(content) - minX(dragBounds), 2) <= 0 || float(maxX(dragBounds) - maxX(content), 2) <= 0) {
+                    tempContent.scaleOf(origin, correctScaleX = 1 / scale.x, 1);
+                    if (tempContent.width > 1) {
+                        correctScaleX *= 1 / tempContent.width;
+                        tempContent.width = 1;
+                    }
+                }
                 tempContent.unsign();
             }
             aSize = float(tempDragBounds.minX - tempContent.minX);
@@ -10239,7 +10271,13 @@ const DragBoundsHelper = {
             }
         } else {
             if (scale.y < 0) {
-                if (float(minY(content) - minY(dragBounds)) <= 0 || float(maxY(dragBounds) - maxY(content)) <= 0) tempContent.scaleOf(origin, 1, correctScaleY = 1 / scale.y);
+                if (float(minY(content) - minY(dragBounds), 2) <= 0 || float(maxY(dragBounds) - maxY(content), 2) <= 0) {
+                    tempContent.scaleOf(origin, 1, correctScaleY = 1 / scale.y);
+                    if (tempContent.height > 1) {
+                        correctScaleY *= 1 / tempContent.height;
+                        tempContent.height = 1;
+                    }
+                }
                 tempContent.unsign();
             }
             aSize = float(tempDragBounds.minY - tempContent.minY);
@@ -10370,6 +10408,8 @@ DragEvent$1.ENTER = "drag.enter";
 
 DragEvent$1.LEAVE = "drag.leave";
 
+DragEvent$1.ANIMATE = "drag.animate";
+
 DragEvent$1 = __decorate([ registerUIEvent() ], DragEvent$1);
 
 const MyDragEvent = DragEvent$1;
@@ -10624,7 +10664,7 @@ class Dragger {
                         x: totalX,
                         y: totalY
                     }, checkLimitMove || axisDrag);
-                    if (dragLimitAnimate && !axisDrag && isDragEnd) LeafHelper.animateMove(leaf, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else leaf.move(move);
+                    if (dragLimitAnimate && !axisDrag && isDragEnd) LeafHelper.animateMove(leaf, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3, () => leaf.emit(DragEvent$1.ANIMATE)); else leaf.move(move);
                 }
             });
         }
@@ -12243,6 +12283,7 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
         if (data.__autoSide) {
             ui.forceUpdate("width");
             LeafHelper.updateBounds(ui);
+            ui.__layout.boundsChanged = true;
             if (ui.__proxyData) {
                 ui.setProxyAttr("width", data.width);
                 ui.setProxyAttr("height", data.height);
@@ -12250,7 +12291,7 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
             needUpdate = false;
         }
     }
-    if (paint.mode === "brush") PaintImage.brush(leafPaint, ui, attrName);
+    if (paint.mode === "brush") PaintImage.brush(ui, attrName, leafPaint);
     if (!leafPaint.data) {
         PaintImage.createData(leafPaint, image, paint, boxBounds);
         const {transform: transform} = leafPaint.data, {opacity: opacity} = paint;
@@ -13522,4 +13563,4 @@ Object.assign(Creator, {
 
 useCanvas();
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, 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, LeaferFilm, LeaferImage, LeaferVideo, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, 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, LeaferFilm, LeaferImage, LeaferVideo, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$4 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };