leafer-ui 1.9.1 → 1.9.3

package/dist/web.js

@@ -445,9 +445,8 @@ var LeaferUI = function(exports) {
             t.e = child.e * a + child.f * c + e;
             t.f = child.e * b + child.f * d + f;
         },
-        multiplyParent(t, parent, to, abcdChanged, childScaleData, scrollData) {
-            let {e: e, f: f} = t;
-            if (scrollData) e += scrollData.scrollX, f += scrollData.scrollY;
+        multiplyParent(t, parent, to, abcdChanged, childScaleData) {
+            const {e: e, f: f} = t;
             to || (to = t);
             if (isUndefined(abcdChanged)) abcdChanged = t.a !== 1 || t.b || t.c || t.d !== 1;
             if (abcdChanged) {
@@ -674,19 +673,19 @@ var LeaferUI = function(exports) {
         },
         tempToInnerOf(t, matrix) {
             const {tempPoint: temp} = P$5;
-            copy$b(temp, t);
+            copy$a(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
             const {tempPoint: temp} = P$5;
-            copy$b(temp, t);
+            copy$a(temp, t);
             toOuterPoint$3(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
             const {tempRadiusPoint: temp} = P$5;
-            copy$b(temp, t);
+            copy$a(temp, t);
             P$5.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
@@ -760,7 +759,7 @@ var LeaferUI = function(exports) {
         }
     };
     const P$5 = PointHelper;
-    const {getDistanceFrom: getDistanceFrom, copy: copy$b, getAtan2: getAtan2} = P$5;
+    const {getDistanceFrom: getDistanceFrom, copy: copy$a, getAtan2: getAtan2} = P$5;
     class Point {
         constructor(x, y) {
             this.set(x, y);
@@ -1129,6 +1128,10 @@ var LeaferUI = function(exports) {
             t.x += x;
             t.y += y;
         },
+        scroll(t, data) {
+            t.x += data.scrollX;
+            t.y += data.scrollY;
+        },
         getByMove(t, x, y) {
             t = Object.assign({}, t);
             B.move(t, x, y);
@@ -1138,7 +1141,7 @@ var LeaferUI = function(exports) {
             if (!to) {
                 to = t;
             } else {
-                copy$a(to, t);
+                copy$9(to, t);
             }
             if (parent) {
                 to.offsetX = -(B.maxX(parent) - t.x);
@@ -1290,7 +1293,7 @@ var LeaferUI = function(exports) {
                 if (bounds && (bounds.width || bounds.height)) {
                     if (first) {
                         first = false;
-                        if (!addMode) copy$a(t, bounds);
+                        if (!addMode) copy$9(t, bounds);
                     } else {
                         add$1(t, bounds);
                     }
@@ -1375,7 +1378,7 @@ var LeaferUI = function(exports) {
         }
     };
     const B = BoundsHelper;
-    const {add: add$1, copy: copy$a} = B;
+    const {add: add$1, copy: copy$9} = B;
     class Bounds {
         get minX() {
             return BoundsHelper.minX(this);
@@ -1584,17 +1587,17 @@ var LeaferUI = function(exports) {
             showHit ? canvas.stroke() : canvas.strokeWorld(w, color);
         }
         log(...messages) {
-            if (D$4.enable) {
-                if (D$4.filterList.length && D$4.filterList.every(name => name !== this.name)) return;
-                if (D$4.excludeList.length && D$4.excludeList.some(name => name === this.name)) return;
+            if (D$5.enable) {
+                if (D$5.filterList.length && D$5.filterList.every(name => name !== this.name)) return;
+                if (D$5.excludeList.length && D$5.excludeList.some(name => name === this.name)) return;
                 console.log("%c" + this.name, "color:#21ae62", ...messages);
             }
         }
         tip(...messages) {
-            if (D$4.enable) this.warn(...messages);
+            if (D$5.enable) this.warn(...messages);
         }
         warn(...messages) {
-            if (D$4.showWarn) console.warn(this.name, ...messages);
+            if (D$5.showWarn) console.warn(this.name, ...messages);
         }
         repeat(name, ...messages) {
             if (!this.repeatMap[name]) {
@@ -1617,7 +1620,7 @@ var LeaferUI = function(exports) {
         if (!name) name = []; else if (isString(name)) name = [ name ];
         return name;
     }
-    const D$4 = Debug;
+    const D$5 = Debug;
     const debug$g = Debug.get("RunTime");
     const Run = {
         currentId: 0,
@@ -1982,7 +1985,7 @@ var LeaferUI = function(exports) {
     __decorate([ contextMethod() ], Canvas.prototype, "fillText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "measureText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "strokeText", null);
-    const {copy: copy$9, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$1} = Math;
+    const {copy: copy$8, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$1} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
     const minSize = {
         width: 1,
         height: 1,
@@ -2144,44 +2147,44 @@ var LeaferUI = function(exports) {
             const {pixelRatio: pixelRatio} = this;
             this.filter = `blur(${blur * pixelRatio}px)`;
         }
-        copyWorld(canvas, from, to, blendMode) {
+        copyWorld(canvas, from, to, blendMode, ceilPixel = true) {
             if (blendMode) this.blendMode = blendMode;
             if (from) {
-                const {pixelRatio: pixelRatio} = this;
-                if (!to) to = from;
-                this.drawImage(canvas.view, from.x * pixelRatio, from.y * pixelRatio, from.width * pixelRatio, from.height * pixelRatio, to.x * pixelRatio, to.y * pixelRatio, to.width * pixelRatio, to.height * pixelRatio);
+                this.setTempPixelBounds(from, ceilPixel);
+                if (!to) to = tempPixelBounds; else this.setTempPixelBounds2(to, ceilPixel), to = tempPixelBounds2;
+                this.drawImage(canvas.view, tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height, to.x, to.y, to.width, to.height);
             } else {
                 this.drawImage(canvas.view, 0, 0);
             }
             if (blendMode) this.blendMode = "source-over";
         }
-        copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode) {
-            if (blendMode) this.blendMode = blendMode;
+        copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode, ceilPixel = true) {
             if (fromWorld.b || fromWorld.c) {
                 this.save();
                 this.resetTransform();
-                this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, fromWorld));
+                this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, fromWorld), blendMode, ceilPixel);
                 this.restore();
             } else {
-                const {pixelRatio: pixelRatio} = this;
-                this.drawImage(canvas.view, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height);
+                if (blendMode) this.blendMode = blendMode;
+                this.setTempPixelBounds(fromWorld, ceilPixel);
+                this.drawImage(canvas.view, tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height);
+                if (blendMode) this.blendMode = "source-over";
             }
-            if (blendMode) this.blendMode = "source-over";
         }
-        copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform) {
+        copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform, ceilPixel = true) {
             this.resetTransform();
-            this.copyWorld(canvas, from, to, blendMode);
+            this.copyWorld(canvas, from, to, blendMode, ceilPixel);
             if (!onlyResetTransform) this.useWorldTransform();
         }
         useGrayscaleAlpha(bounds) {
-            this.setTempBounds(bounds, true, true);
+            this.setTempPixelBounds(bounds, true, true);
             let alpha, pixel;
-            const {context: context} = this, imageData = context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height), {data: data} = imageData;
+            const {context: context} = this, imageData = context.getImageData(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height), {data: data} = imageData;
             for (let i = 0, len = data.length; i < len; i += 4) {
                 pixel = data[i] * .299 + data[i + 1] * .587 + data[i + 2] * .114;
                 if (alpha = data[i + 3]) data[i + 3] = alpha === 255 ? pixel : alpha * (pixel / 255);
             }
-            context.putImageData(imageData, tempBounds$1.x, tempBounds$1.y);
+            context.putImageData(imageData, tempPixelBounds.x, tempPixelBounds.y);
         }
         useMask(maskCanvas, fromBounds, toBounds) {
             this.copyWorld(maskCanvas, fromBounds, toBounds, "destination-in");
@@ -2189,42 +2192,48 @@ var LeaferUI = function(exports) {
         useEraser(eraserCanvas, fromBounds, toBounds) {
             this.copyWorld(eraserCanvas, fromBounds, toBounds, "destination-out");
         }
-        fillWorld(bounds, color, blendMode) {
+        fillWorld(bounds, color, blendMode, ceilPixel) {
             if (blendMode) this.blendMode = blendMode;
             this.fillStyle = color;
-            this.setTempBounds(bounds);
-            this.fillRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
+            this.setTempPixelBounds(bounds, ceilPixel);
+            this.fillRect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
             if (blendMode) this.blendMode = "source-over";
         }
-        strokeWorld(bounds, color, blendMode) {
+        strokeWorld(bounds, color, blendMode, ceilPixel) {
             if (blendMode) this.blendMode = blendMode;
             this.strokeStyle = color;
-            this.setTempBounds(bounds);
-            this.strokeRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
+            this.setTempPixelBounds(bounds, ceilPixel);
+            this.strokeRect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
             if (blendMode) this.blendMode = "source-over";
         }
-        clipWorld(bounds, ceilPixel) {
+        clipWorld(bounds, ceilPixel = true) {
             this.beginPath();
-            this.setTempBounds(bounds, ceilPixel);
-            this.rect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
+            this.setTempPixelBounds(bounds, ceilPixel);
+            this.rect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
             this.clip();
         }
         clipUI(ruleData) {
             ruleData.windingRule ? this.clip(ruleData.windingRule) : this.clip();
         }
-        clearWorld(bounds, ceilPixel) {
-            this.setTempBounds(bounds, ceilPixel);
-            this.clearRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
+        clearWorld(bounds, ceilPixel = true) {
+            this.setTempPixelBounds(bounds, ceilPixel);
+            this.clearRect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
         }
         clear() {
             const {pixelRatio: pixelRatio} = this;
             this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
         }
-        setTempBounds(bounds, ceil, intersect) {
-            tempBounds$1.set(bounds);
-            if (intersect) tempBounds$1.intersect(this.bounds);
-            tempBounds$1.scale(this.pixelRatio);
-            if (ceil) tempBounds$1.ceil();
+        setTempPixelBounds(bounds, ceil, intersect) {
+            this.copyToPixelBounds(tempPixelBounds, bounds, ceil, intersect);
+        }
+        setTempPixelBounds2(bounds, ceil, intersect) {
+            this.copyToPixelBounds(tempPixelBounds2, bounds, ceil, intersect);
+        }
+        copyToPixelBounds(pixelBounds, bounds, ceil, intersect) {
+            pixelBounds.set(bounds);
+            if (intersect) pixelBounds.intersect(this.bounds);
+            pixelBounds.scale(this.pixelRatio);
+            if (ceil) pixelBounds.ceil();
         }
         isSameSize(size) {
             return this.width === size.width && this.height === size.height && (!size.pixelRatio || this.pixelRatio === size.pixelRatio);
@@ -2232,7 +2241,7 @@ var LeaferUI = function(exports) {
         getSameCanvas(useSameWorldTransform, useSameSmooth) {
             const {size: size, pixelSnap: pixelSnap} = this, canvas = this.manager ? this.manager.get(size) : Creator.canvas(Object.assign({}, size));
             canvas.save();
-            if (useSameWorldTransform) copy$9(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+            if (useSameWorldTransform) copy$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
             if (useSameSmooth) canvas.smooth = this.smooth;
             canvas.pixelSnap !== pixelSnap && (canvas.pixelSnap = pixelSnap);
             return canvas;
@@ -2240,7 +2249,7 @@ var LeaferUI = function(exports) {
         recycle(clearBounds) {
             if (!this.recycled) {
                 this.restore();
-                clearBounds ? this.clearWorld(clearBounds, true) : this.clear();
+                clearBounds ? this.clearWorld(clearBounds) : this.clear();
                 this.manager ? this.manager.recycle(this) : this.destroy();
             }
         }
@@ -2598,7 +2607,7 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    const {M: M$4, m: m, L: L$5, l: l, H: H, h: h, V: V, v: v, C: C$3, c: c, S: S, s: s, Q: Q$3, q: q, T: T, t: t, A: A, a: a, Z: Z$4, z: z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3} = PathCommandMap;
+    const {M: M$4, m: m, L: L$5, l: l, H: H, h: h, V: V, v: v, C: C$3, c: c, S: S, s: s, Q: Q$3, q: q, T: T, t: t, A: A, a: a, Z: Z$4, z: z, N: N$3, D: D$4, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3} = PathCommandMap;
     const {rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1} = BezierHelper;
     const {ellipticalArc: ellipticalArc} = EllipseHelper;
     const debug$d = Debug.get("PathConvert");
@@ -2813,7 +2822,7 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$3:
+                  case D$4:
                     x = old[i + 1];
                     y = old[i + 2];
                     curveMode ? roundRect$2(data, x, y, old[i + 3], old[i + 4], [ old[i + 5], old[i + 6], old[i + 7], old[i + 8] ]) : copyData(data, old, i, 9);
@@ -2912,7 +2921,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {current: current, pushData: pushData, copyData: copyData} = PathConvert;
-    const {M: M$3, L: L$4, C: C$2, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$2, P: P$2, U: U$2} = PathCommandMap;
+    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: F$3, O: O$2, P: P$2, U: U$2} = PathCommandMap;
     const {getMinDistanceFrom: getMinDistanceFrom, getRadianFrom: getRadianFrom} = PointHelper;
     const {tan: tan, min: min, abs: abs$1} = Math;
     const startPoint = {};
@@ -2944,7 +2953,7 @@ var LeaferUI = function(exports) {
             } else {
                 const fourCorners = MathHelper.fourNumber(cornerRadius);
                 if (fourCorners) {
-                    data.push(D$2, x, y, width, height, ...fourCorners);
+                    data.push(D$3, x, y, width, height, ...fourCorners);
                 } else {
                     data.push(N$2, x, y, width, height);
                 }
@@ -3083,7 +3092,7 @@ var LeaferUI = function(exports) {
         }
         paint() {}
     }
-    const {M: M$2, L: L$3, C: C$1, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1} = PathCommandMap;
+    const {M: M$2, L: L$3, C: C$1, Q: Q$1, Z: Z$2, N: N$1, D: D$2, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1} = PathCommandMap;
     const debug$c = Debug.get("PathDrawer");
     const PathDrawer = {
         drawPathByData(drawer, data) {
@@ -3123,7 +3132,7 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$1:
+                  case D$2:
                     drawer.roundRect(data[i + 1], data[i + 2], data[i + 3], data[i + 4], [ data[i + 5], data[i + 6], data[i + 7], data[i + 8] ]);
                     i += 9;
                     break;
@@ -3165,9 +3174,9 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    const {M: M$1, L: L$2, C: C, Q: Q, Z: Z$1, N: N, D: D, X: X, G: G, F: F$1, O: O, P: P, U: U} = PathCommandMap;
+    const {M: M$1, L: L$2, C: C, Q: Q, Z: Z$1, N: N, D: D$1, X: X, G: G, F: F$1, O: O, P: P, U: U} = PathCommandMap;
     const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$1} = BezierHelper;
-    const {addPointBounds: addPointBounds, copy: copy$8, addPoint: addPoint, setPoint: setPoint, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
+    const {addPointBounds: addPointBounds, copy: copy$7, addPoint: addPoint, setPoint: setPoint, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
     const debug$b = Debug.get("PathBounds");
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
@@ -3233,17 +3242,17 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D:
+                  case D$1:
                   case X:
                     x = data[i + 1];
                     y = data[i + 2];
                     addBounds(setPointBounds, x, y, data[i + 3], data[i + 4]);
-                    i += command === D ? 9 : 6;
+                    i += command === D$1 ? 9 : 6;
                     break;
 
                   case G:
                     ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 9;
@@ -3261,7 +3270,7 @@ var LeaferUI = function(exports) {
 
                   case O:
                     arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 7;
@@ -3278,7 +3287,7 @@ var LeaferUI = function(exports) {
 
                   case U:
                     arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 6;
@@ -3896,6 +3905,16 @@ var LeaferUI = function(exports) {
             }
         }));
     }
+    function scrollType(defaultValue, checkFiniteNumber) {
+        return decorateLeafAttr(defaultValue, key => attr({
+            set(value) {
+                if (this.__setAttr(key, value, checkFiniteNumber)) {
+                    this.__layout.matrixChanged || this.__layout.matrixChange();
+                    this.__scrollWorld || (this.__scrollWorld = {});
+                }
+            }
+        }));
+    }
     function autoLayoutType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -4198,7 +4217,7 @@ var LeaferUI = function(exports) {
             EventCreator.register(target);
         };
     }
-    const {copy: copy$7, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter: skewOfOuter, multiplyParent: multiplyParent$3, divideParent: divideParent, getLayout: getLayout} = MatrixHelper;
+    const {copy: copy$6, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter: skewOfOuter, multiplyParent: multiplyParent$3, divideParent: divideParent, getLayout: getLayout} = MatrixHelper;
     const matrix$1 = {}, {round: round} = Math;
     const LeafHelper = {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4272,7 +4291,7 @@ var LeaferUI = function(exports) {
                 x: x,
                 y: y
             };
-            isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true);
+            isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : t.parent && toInnerPoint$1(t.parent.scrollWorldTransform, local, local, true);
             L.moveLocal(t, local.x, local.y, transition);
         },
         moveLocal(t, x, y = 0, transition) {
@@ -4294,9 +4313,9 @@ var LeaferUI = function(exports) {
                 if (scaleY) transition = scaleY;
                 scaleY = scaleX;
             }
-            copy$7(matrix$1, o);
+            copy$6(matrix$1, o);
             scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
-            if (t.origin || t.around) {
+            if (L.hasHighPosition(t)) {
                 L.setTransform(t, matrix$1, resize, transition);
             } else {
                 const x = t.x + matrix$1.e - o.e, y = t.y + matrix$1.f - o.f;
@@ -4313,9 +4332,9 @@ var LeaferUI = function(exports) {
         },
         rotateOfLocal(t, origin, angle, transition) {
             const o = t.__localMatrix;
-            copy$7(matrix$1, o);
+            copy$6(matrix$1, o);
             rotateOfOuter$2(matrix$1, origin, angle);
-            if (t.origin || t.around) L.setTransform(t, matrix$1, false, transition); else t.set({
+            if (L.hasHighPosition(t)) L.setTransform(t, matrix$1, false, transition); else t.set({
                 x: t.x + matrix$1.e - o.e,
                 y: t.y + matrix$1.f - o.f,
                 rotation: MathHelper.formatRotation(t.rotation + angle)
@@ -4325,24 +4344,28 @@ var LeaferUI = function(exports) {
             L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
         },
         skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
-            copy$7(matrix$1, t.__localMatrix);
+            copy$6(matrix$1, t.__localMatrix);
             skewOfOuter(matrix$1, origin, skewX, skewY);
             L.setTransform(t, matrix$1, resize, transition);
         },
         transformWorld(t, transform, resize, transition) {
-            copy$7(matrix$1, t.worldTransform);
+            copy$6(matrix$1, t.worldTransform);
             multiplyParent$3(matrix$1, transform);
-            if (t.parent) divideParent(matrix$1, t.parent.worldTransform);
+            if (t.parent) divideParent(matrix$1, t.parent.scrollWorldTransform);
             L.setTransform(t, matrix$1, resize, transition);
         },
         transform(t, transform, resize, transition) {
-            copy$7(matrix$1, t.localTransform);
+            copy$6(matrix$1, t.localTransform);
             multiplyParent$3(matrix$1, transform);
             L.setTransform(t, matrix$1, resize, transition);
         },
         setTransform(t, transform, resize, transition) {
             const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
             const layout = getLayout(transform, originPoint, data.around && L.getInnerOrigin(t, data.around));
+            if (L.hasOffset(t)) {
+                layout.x -= data.offsetX;
+                layout.y -= data.offsetY;
+            }
             if (resize) {
                 const scaleX = layout.scaleX / t.scaleX, scaleY = layout.scaleY / t.scaleY;
                 delete layout.scaleX, delete layout.scaleY;
@@ -4370,14 +4393,20 @@ var LeaferUI = function(exports) {
             return innerOrigin;
         },
         getRelativeWorld(t, relative, temp) {
-            copy$7(matrix$1, t.worldTransform);
-            divideParent(matrix$1, relative.worldTransform);
+            copy$6(matrix$1, t.worldTransform);
+            divideParent(matrix$1, relative.scrollWorldTransform);
             return temp ? matrix$1 : Object.assign({}, matrix$1);
         },
         drop(t, parent, index, resize) {
             t.setTransform(L.getRelativeWorld(t, parent, true), resize);
             parent.add(t, index);
         },
+        hasHighPosition(t) {
+            return t.origin || t.around || L.hasOffset(t);
+        },
+        hasOffset(t) {
+            return t.offsetX || t.offsetY;
+        },
         hasParent(p, parent) {
             if (!parent) return false;
             while (p) {
@@ -4400,8 +4429,7 @@ var LeaferUI = function(exports) {
     const L = LeafHelper;
     const {updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1} = L;
     function getTempLocal(t, world) {
-        t.__layout.update();
-        return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
+        return t.parent ? PointHelper.tempToInnerOf(world, t.parent.scrollWorldTransform) : world;
     }
     const LeafBoundsHelper = {
         worldBounds(target) {
@@ -4517,7 +4545,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {getRelativeWorld: getRelativeWorld$1, updateBounds: updateBounds$2} = LeafHelper;
-    const {toOuterOf: toOuterOf$2, getPoints: getPoints, copy: copy$6} = BoundsHelper;
+    const {toOuterOf: toOuterOf$2, getPoints: getPoints, copy: copy$5} = BoundsHelper;
     const localContent = "_localContentBounds";
     const worldContent = "_worldContentBounds", worldBox = "_worldBoxBounds", worldStroke = "_worldStrokeBounds";
     class LeafLayout {
@@ -4753,7 +4781,7 @@ var LeaferUI = function(exports) {
                 matrix = getRelativeWorld$1(leaf, relative, true);
             }
             if (!layoutBounds) layoutBounds = MatrixHelper.getLayout(matrix);
-            copy$6(layoutBounds, bounds);
+            copy$5(layoutBounds, bounds);
             PointHelper.copy(layoutBounds, point);
             if (unscale) {
                 const {scaleX: scaleX, scaleY: scaleY} = layoutBounds;
@@ -4932,6 +4960,7 @@ var LeaferUI = function(exports) {
     ChildEvent.MOUNTED = "mounted";
     ChildEvent.UNMOUNTED = "unmounted";
     ChildEvent.DESTROY = "destroy";
+    const SCROLL = "property.scroll";
     class PropertyEvent extends Event {
         constructor(type, target, attrName, oldValue, newValue) {
             super(type, target);
@@ -4942,6 +4971,11 @@ var LeaferUI = function(exports) {
     }
     PropertyEvent.CHANGE = "property.change";
     PropertyEvent.LEAFER_CHANGE = "property.leafer_change";
+    PropertyEvent.SCROLL = SCROLL;
+    const extraPropertyEventMap = {
+        scrollX: SCROLL,
+        scrollY: SCROLL
+    };
     class ImageEvent extends Event {
         constructor(type, data) {
             super(type);
@@ -5163,7 +5197,9 @@ var LeaferUI = function(exports) {
             if (!id) return;
             const list = isArray(id) ? id : [ id ];
             list.forEach(item => {
-                if (!item.listener) isArray(item.type) && item.type.forEach(v => item.current.off(v[0], v[1], v[3])); else item.current.off(item.type, item.listener, item.options);
+                if (item) {
+                    if (!item.listener) isArray(item.type) && item.type.forEach(v => item.current.off(v[0], v[1], v[3])); else item.current.off(item.type, item.listener, item.options);
+                }
             });
             list.length = 0;
         }
@@ -5252,8 +5288,6 @@ var LeaferUI = function(exports) {
                 }
                 if (isObject(newValue) || oldValue !== newValue) {
                     this.__realSetAttr(name, newValue);
-                    const {CHANGE: CHANGE} = PropertyEvent;
-                    const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
                     if (this.isLeafer) {
                         this.emitEvent(new PropertyEvent(PropertyEvent.LEAFER_CHANGE, this, name, oldValue, newValue));
                         const transformEventName = leaferTransformAttrMap[name];
@@ -5261,10 +5295,10 @@ var LeaferUI = function(exports) {
                             this.emitEvent(new LeaferEvent(transformEventName, this));
                             this.emitEvent(new LeaferEvent(LeaferEvent.TRANSFORM, this));
                         }
-                    } else {
-                        if (this.hasEvent(CHANGE)) this.emitEvent(event);
                     }
-                    this.leafer.emitEvent(event);
+                    this.emitPropertyEvent(PropertyEvent.CHANGE, name, oldValue, newValue);
+                    const extraPropertyEvent = extraPropertyEventMap[name];
+                    if (extraPropertyEvent) this.emitPropertyEvent(extraPropertyEvent, name, oldValue, newValue);
                     return true;
                 } else {
                     return false;
@@ -5274,6 +5308,11 @@ var LeaferUI = function(exports) {
                 return true;
             }
         },
+        emitPropertyEvent(type, name, oldValue, newValue) {
+            const event = new PropertyEvent(type, this, name, oldValue, newValue);
+            this.isLeafer || this.hasEvent(type) && this.emitEvent(event);
+            this.leafer.emitEvent(event);
+        },
         __realSetAttr(name, newValue) {
             const data = this.__;
             data[name] = newValue;
@@ -5289,8 +5328,9 @@ var LeaferUI = function(exports) {
     const {toPoint: toPoint$3, tempPoint: tempPoint} = AroundHelper;
     const LeafMatrix = {
         __updateWorldMatrix() {
-            const {parent: parent, __layout: __layout} = this;
-            multiplyParent$2(this.__local || __layout, parent ? parent.__world : defaultWorld, this.__world, !!__layout.affectScaleOrRotation, this.__, parent && (parent.scrollY || parent.scrollX) && parent.__);
+            const {parent: parent, __layout: __layout, __world: __world, __scrollWorld: __scrollWorld, __: __} = this;
+            multiplyParent$2(this.__local || __layout, parent ? parent.__scrollWorld || parent.__world : defaultWorld, __world, !!__layout.affectScaleOrRotation, __);
+            if (__scrollWorld) translateInner(Object.assign(__scrollWorld, __world), __.scrollX, __.scrollY);
         },
         __updateLocalMatrix() {
             if (this.__local) {
@@ -5313,7 +5353,7 @@ var LeaferUI = function(exports) {
     };
     const {updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2} = LeafHelper;
     const {updateBounds: updateBounds$1} = BranchHelper;
-    const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5} = BoundsHelper;
+    const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4} = BoundsHelper;
     const {toBounds: toBounds$1} = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
@@ -5382,7 +5422,7 @@ var LeaferUI = function(exports) {
         __updateLocalRenderBounds() {
             toOuterOf$1(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
         },
-        __updateBoxBounds() {
+        __updateBoxBounds(_secondLayout, _bounds) {
             const b = this.__layout.boxBounds;
             const data = this.__;
             if (data.__pathInputed) {
@@ -5416,13 +5456,13 @@ var LeaferUI = function(exports) {
             data.__naturalWidth = layout.boxBounds.width;
             data.__naturalHeight = layout.boxBounds.height;
         },
-        __updateStrokeBounds() {
+        __updateStrokeBounds(_bounds) {
             const layout = this.__layout;
             copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
         },
-        __updateRenderBounds() {
+        __updateRenderBounds(_bounds) {
             const layout = this.__layout;
-            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
         }
     };
     const LeafRender = {
@@ -5513,7 +5553,7 @@ var LeaferUI = function(exports) {
     const {LEAF: LEAF, create: create} = IncrementId;
     const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: multiplyParent$1} = MatrixHelper;
     const {toOuterOf: toOuterOf} = BoundsHelper;
-    const {copy: copy$4, move: move} = PointHelper;
+    const {copy: copy$3, move: move} = PointHelper;
     const {moveLocal: moveLocal, zoomOfLocal: zoomOfLocal, rotateOfLocal: rotateOfLocal, skewOfLocal: skewOfLocal, moveWorld: moveWorld, zoomOfWorld: zoomOfWorld, rotateOfWorld: rotateOfWorld, skewOfWorld: skewOfWorld, transform: transform, transformWorld: transformWorld, setTransform: setTransform, getFlipTransform: getFlipTransform, getLocalOrigin: getLocalOrigin, getRelativeWorld: getRelativeWorld, drop: drop} = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() {
@@ -5559,6 +5599,10 @@ var LeaferUI = function(exports) {
         get localTransform() {
             return this.__layout.getTransform("local");
         }
+        get scrollWorldTransform() {
+            this.updateLayout();
+            return this.__scrollWorld || this.__world;
+        }
         get boxBounds() {
             return this.getBounds("box", "inner");
         }
@@ -5575,7 +5619,7 @@ var LeaferUI = function(exports) {
             return this.getBounds("render");
         }
         get worldOpacity() {
-            this.__layout.update();
+            this.updateLayout();
             return this.__worldOpacity;
         }
         get __worldFlipped() {
@@ -5750,10 +5794,10 @@ var LeaferUI = function(exports) {
         __updateLocalBoxBounds() {}
         __updateLocalStrokeBounds() {}
         __updateLocalRenderBounds() {}
-        __updateBoxBounds() {}
+        __updateBoxBounds(_secondLayout, _bounds) {}
         __updateContentBounds() {}
-        __updateStrokeBounds() {}
-        __updateRenderBounds() {}
+        __updateStrokeBounds(_bounds) {}
+        __updateRenderBounds(_bounds) {}
         __updateAutoLayout() {}
         __updateFlowLayout() {}
         __updateNaturalSize() {}
@@ -5825,14 +5869,14 @@ var LeaferUI = function(exports) {
             if (this.parent) {
                 this.parent.worldToInner(world, to, distance, relative);
             } else {
-                if (to) copy$4(to, world);
+                if (to) copy$3(to, world);
             }
         }
         localToWorld(local, to, distance, relative) {
             if (this.parent) {
                 this.parent.innerToWorld(local, to, distance, relative);
             } else {
-                if (to) copy$4(to, local);
+                if (to) copy$3(to, local);
             }
         }
         worldToInner(world, to, distance, relative) {
@@ -6047,14 +6091,14 @@ var LeaferUI = function(exports) {
             }
             return 0;
         }
-        __updateBoxBounds() {
-            setListWithFn(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
+        __updateBoxBounds(_secondLayout, bounds) {
+            setListWithFn(bounds || this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
         }
-        __updateStrokeBounds() {
-            setListWithFn(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
+        __updateStrokeBounds(bounds) {
+            setListWithFn(bounds || this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
         }
-        __updateRenderBounds() {
-            setListWithFn(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
+        __updateRenderBounds(bounds) {
+            setListWithFn(bounds || this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
         }
         __updateSortChildren() {
             let affectSort;
@@ -6297,7 +6341,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.1";
+    const version = "1.9.3";
     const debug$5 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -6985,8 +7029,8 @@ var LeaferUI = function(exports) {
             const {canvas: canvas} = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
             canvas.save();
             bounds.spread(Renderer.clipSpread).ceil();
-            canvas.clearWorld(bounds, true);
-            canvas.clipWorld(bounds, true);
+            canvas.clearWorld(bounds);
+            canvas.clipWorld(bounds);
             this.__render(bounds, realBounds);
             canvas.restore();
             Run.end(t);
@@ -7206,6 +7250,7 @@ var LeaferUI = function(exports) {
                 hit = child.__.hitRadius ? true : hitRadiusPoint$1(child.__world, point);
                 if (child.isBranch) {
                     if (hit || child.__ignoreHitWorld) {
+                        if (child.topChildren) this.eachFind(child.topChildren, false);
                         this.eachFind(child.children, child.__onlyHitMask);
                         if (child.isBranchLeaf) this.hitChild(child, point);
                     }
@@ -7525,7 +7570,7 @@ var LeaferUI = function(exports) {
         }
         get __clipAfterFill() {
             const t = this;
-            return t.overflow === "hide" && t.__leaf.children.length && (t.__leaf.isOverflow || super.__clipAfterFill);
+            return t.overflow !== "show" && t.__leaf.children.length && (t.__leaf.isOverflow || super.__clipAfterFill);
         }
     }
     class LeaferData extends GroupData {
@@ -7666,6 +7711,39 @@ var LeaferUI = function(exports) {
             return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
         }
     };
+    const DragBoundsHelper = {
+        getValidMove(content, dragBounds, dragBoundsType, move, change) {
+            const x = content.x + move.x, y = content.y + move.y, right = x + content.width, bottom = y + content.height;
+            const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
+            if (!change) move = Object.assign({}, move);
+            const isBiggerWidth = content.width > dragBounds.width;
+            const isBiggerHeight = content.height > dragBounds.height;
+            if (isBiggerWidth && dragBoundsType !== "outer") {
+                if (x > dragBounds.x) move.x += dragBounds.x - x; else if (right < boundsRight) move.x += boundsRight - right;
+            } else {
+                if (x < dragBounds.x) move.x += dragBounds.x - x; else if (right > boundsRight) move.x += boundsRight - right;
+            }
+            if (isBiggerHeight && dragBoundsType !== "outer") {
+                if (y > dragBounds.y) move.y += dragBounds.y - y; else if (bottom < boundsBottom) move.y += boundsBottom - bottom;
+            } else {
+                if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
+            }
+            move.x = MathHelper.float(move.x);
+            move.y = MathHelper.float(move.y);
+            return move;
+        },
+        axisMove(leaf, move) {
+            const {draggable: draggable} = leaf;
+            if (draggable === "x") move.y = 0;
+            if (draggable === "y") move.x = 0;
+        },
+        limitMove(leaf, move) {
+            const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
+            if (dragBounds) D.getValidMove(leaf.__localBoxBounds, dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds, dragBoundsType, move, true);
+            D.axisMove(leaf, move);
+        }
+    };
+    const D = DragBoundsHelper;
     const {stintSet: stintSet$1} = DataHelper;
     const UIRender = {
         __updateChange() {
@@ -7949,8 +8027,8 @@ var LeaferUI = function(exports) {
     __decorate([ rotationType(0, true) ], exports.UI.prototype, "skewY", void 0);
     __decorate([ positionType(0, true) ], exports.UI.prototype, "offsetX", void 0);
     __decorate([ positionType(0, true) ], exports.UI.prototype, "offsetY", void 0);
-    __decorate([ positionType(0, true) ], exports.UI.prototype, "scrollX", void 0);
-    __decorate([ positionType(0, true) ], exports.UI.prototype, "scrollY", void 0);
+    __decorate([ scrollType(0, true) ], exports.UI.prototype, "scrollX", void 0);
+    __decorate([ scrollType(0, true) ], exports.UI.prototype, "scrollY", void 0);
     __decorate([ autoLayoutType() ], exports.UI.prototype, "origin", void 0);
     __decorate([ autoLayoutType() ], exports.UI.prototype, "around", void 0);
     __decorate([ dataType(false) ], exports.UI.prototype, "lazy", void 0);
@@ -7965,6 +8043,7 @@ var LeaferUI = function(exports) {
     __decorate([ boundsType() ], exports.UI.prototype, "heightRange", void 0);
     __decorate([ dataType(false) ], exports.UI.prototype, "draggable", void 0);
     __decorate([ dataType() ], exports.UI.prototype, "dragBounds", void 0);
+    __decorate([ dataType("auto") ], exports.UI.prototype, "dragBoundsType", void 0);
     __decorate([ dataType(false) ], exports.UI.prototype, "editable", void 0);
     __decorate([ hitType(true) ], exports.UI.prototype, "hittable", void 0);
     __decorate([ hitType("path") ], exports.UI.prototype, "hitFill", void 0);
@@ -8348,7 +8427,7 @@ var LeaferUI = function(exports) {
         zoom(_zoomType, _optionsOrPadding, _scroll, _transition) {
             return Plugin.need("view");
         }
-        getValidMove(moveX, moveY) {
+        getValidMove(moveX, moveY, _checkLimit) {
             return {
                 x: moveX,
                 y: moveY
@@ -8429,9 +8508,8 @@ var LeaferUI = function(exports) {
     };
     __decorate([ dataProcessor(RectData) ], exports.Rect.prototype, "__", void 0);
     exports.Rect = __decorate([ useModule(RectRender), rewriteAble(), registerUI() ], exports.Rect);
-    const {copy: copy$3, add: add, includes: includes$1} = BoundsHelper;
+    const {add: add, includes: includes$1, scroll: scroll} = BoundsHelper;
     const rect$1 = exports.Rect.prototype, group = exports.Group.prototype;
-    const childrenRenderBounds = {};
     exports.Box = class Box extends exports.Group {
         get __tag() {
             return "Box";
@@ -8477,22 +8555,27 @@ var LeaferUI = function(exports) {
         __updateRenderBounds() {
             let isOverflow;
             if (this.children.length) {
-                const data = this.__, {renderBounds: renderBounds, boxBounds: boxBounds} = this.__layout;
-                super.__updateRenderBounds();
-                copy$3(childrenRenderBounds, renderBounds);
-                this.__updateRectRenderBounds();
-                if (data.scrollY || data.scrollX) {
-                    childrenRenderBounds.x += data.scrollX;
-                    childrenRenderBounds.y += data.scrollY;
+                const data = this.__, layout = this.__layout, {renderBounds: renderBounds, boxBounds: boxBounds} = layout;
+                const childrenRenderBounds = layout.childrenRenderBounds || (layout.childrenRenderBounds = getBoundsData());
+                super.__updateRenderBounds(childrenRenderBounds);
+                if (data.overflow.includes("scroll")) {
+                    add(childrenRenderBounds, boxBounds);
+                    scroll(childrenRenderBounds, data);
                 }
+                this.__updateRectRenderBounds();
                 isOverflow = !includes$1(boxBounds, childrenRenderBounds);
-                if (isOverflow && data.overflow !== "hide") add(renderBounds, childrenRenderBounds);
+                if (isOverflow && data.overflow === "show") add(renderBounds, childrenRenderBounds);
             } else this.__updateRectRenderBounds();
             DataHelper.stintSet(this, "isOverflow", isOverflow);
-            this.__updateScrollBar();
+            this.__checkScroll();
         }
         __updateRectRenderBounds() {}
-        __updateScrollBar() {}
+        __updateWorldBounds() {
+            if (this.hasScroller) this.__updateScroll();
+            super.__updateWorldBounds();
+        }
+        __checkScroll() {}
+        __updateScroll() {}
         __updateRectChange() {}
         __updateChange() {
             super.__updateChange();
@@ -8507,7 +8590,7 @@ var LeaferUI = function(exports) {
                 this.__renderRect(canvas, options);
                 if (this.children.length) this.__renderGroup(canvas, options);
             }
-            if (this.scrollBar) this.scrollBar.__render(canvas, options);
+            if (this.hasScroller) this.scroller.__render(canvas, options);
         }
         __drawContent(canvas, options) {
             this.__renderGroup(canvas, options);
@@ -9071,7 +9154,7 @@ var LeaferUI = function(exports) {
             if (this.viewReady) this.renderer.update();
         }
         __render(canvas, options) {
-            if (canvas.context) this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options && options.bounds));
+            if (canvas.context) this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options.bounds));
         }
         __onResize(event) {
             this.forEach(leafer => leafer.resize(event));
@@ -9210,26 +9293,11 @@ var LeaferUI = function(exports) {
             const move = leaf.getLocalPoint(total, null, true);
             PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
             if (checkLimit) this.limitMove(leaf, move);
+            DragBoundsHelper.axisMove(leaf, move);
             return move;
         }
         static limitMove(leaf, move) {
-            const {draggable: draggable, dragBounds: dragBounds} = leaf;
-            if (dragBounds) this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds, move, true);
-            if (draggable === "x") move.y = 0;
-            if (draggable === "y") move.x = 0;
-        }
-        static getMoveInDragBounds(childBox, dragBounds, move, change) {
-            const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
-            const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
-            if (!change) move = Object.assign({}, move);
-            if (BoundsHelper.includes(childBox, dragBounds)) {
-                if (x > dragBounds.x) move.x += dragBounds.x - x; else if (right < boundsRight) move.x += boundsRight - right;
-                if (y > dragBounds.y) move.y += dragBounds.y - y; else if (bottom < boundsBottom) move.y += boundsBottom - bottom;
-            } else {
-                if (x < dragBounds.x) move.x += dragBounds.x - x; else if (right > boundsRight) move.x += boundsRight - right;
-                if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
-            }
-            return move;
+            DragBoundsHelper.limitMove(leaf, move);
         }
         getPageMove(total) {
             this.assignMove(total);
@@ -9464,11 +9532,12 @@ var LeaferUI = function(exports) {
                 const checkLimitMove = !dragLimitAnimate || !!isDragEnd;
                 list.forEach(leaf => {
                     if (leaf.draggable) {
+                        const axisDrag = isString(leaf.draggable);
                         const move = exports.DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], {
                             x: totalX,
                             y: totalY
-                        }, checkLimitMove);
-                        if (dragLimitAnimate && isDragEnd) LeafHelper.animateMove(leaf, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else leaf.move(move);
+                        }, checkLimitMove || axisDrag);
+                        if (dragLimitAnimate && !axisDrag && isDragEnd) LeafHelper.animateMove(leaf, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else leaf.move(move);
                     }
                 });
             }
@@ -11442,7 +11511,7 @@ var LeaferUI = function(exports) {
                 worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
             }
             LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
-            if (end && index < end) other.clearWorld(copyBounds, true);
+            if (end && index < end) other.clearWorld(copyBounds);
         });
         other.recycle(copyBounds);
     }
@@ -11502,7 +11571,7 @@ var LeaferUI = function(exports) {
             }
             other.fillWorld(copyBounds, ColorConvert.string(item.color), "source-in");
             LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
-            if (end && index < end) other.clearWorld(copyBounds, true);
+            if (end && index < end) other.clearWorld(copyBounds);
         });
         other.recycle(copyBounds);
     }
@@ -11591,7 +11660,7 @@ var LeaferUI = function(exports) {
         canvas.resetTransform();
         canvas.opacity = maskOpacity;
         canvas.copyWorld(content, realBounds, undefined, blendMode);
-        recycle ? content.recycle(realBounds) : content.clearWorld(realBounds, true);
+        recycle ? content.recycle(realBounds) : content.clearWorld(realBounds);
     }
     const money = "¥￥＄€£￡¢￠";
     const letter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
@@ -12096,6 +12165,7 @@ var LeaferUI = function(exports) {
     exports.Cursor = Cursor;
     exports.DataHelper = DataHelper;
     exports.Debug = Debug;
+    exports.DragBoundsHelper = DragBoundsHelper;
     exports.Dragger = Dragger;
     exports.Effect = Effect;
     exports.EllipseData = EllipseData;
@@ -12218,6 +12288,7 @@ var LeaferUI = function(exports) {
     exports.effectType = effectType;
     exports.emptyData = emptyData;
     exports.eraserType = eraserType;
+    exports.extraPropertyEventMap = extraPropertyEventMap;
     exports.getBoundsData = getBoundsData;
     exports.getDescriptor = getDescriptor;
     exports.getMatrixData = getMatrixData;
@@ -12248,6 +12319,7 @@ var LeaferUI = function(exports) {
     exports.rewriteAble = rewriteAble;
     exports.rotationType = rotationType;
     exports.scaleType = scaleType;
+    exports.scrollType = scrollType;
     exports.sortType = sortType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;