@leafer/worker 1.9.1 → 1.9.3

package/dist/worker.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$7;
-            copy$e(temp, t);
+            copy$d(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
             const {tempPoint: temp} = P$7;
-            copy$e(temp, t);
+            copy$d(temp, t);
             toOuterPoint$3(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
             const {tempRadiusPoint: temp} = P$7;
-            copy$e(temp, t);
+            copy$d(temp, t);
             P$7.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
@@ -760,7 +759,7 @@ var LeaferUI = function(exports) {
         }
     };
     const P$7 = PointHelper;
-    const {getDistanceFrom: getDistanceFrom, copy: copy$e, getAtan2: getAtan2} = P$7;
+    const {getDistanceFrom: getDistanceFrom, copy: copy$d, getAtan2: getAtan2} = P$7;
     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$d(to, t);
+                copy$c(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$d(t, bounds);
+                        if (!addMode) copy$c(t, bounds);
                     } else {
                         add$1(t, bounds);
                     }
@@ -1375,7 +1378,7 @@ var LeaferUI = function(exports) {
         }
     };
     const B = BoundsHelper;
-    const {add: add$1, copy: copy$d} = B;
+    const {add: add$1, copy: copy$c} = 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$6.enable) {
-                if (D$6.filterList.length && D$6.filterList.every(name => name !== this.name)) return;
-                if (D$6.excludeList.length && D$6.excludeList.some(name => name === this.name)) return;
+            if (D$7.enable) {
+                if (D$7.filterList.length && D$7.filterList.every(name => name !== this.name)) return;
+                if (D$7.excludeList.length && D$7.excludeList.some(name => name === this.name)) return;
                 console.log("%c" + this.name, "color:#21ae62", ...messages);
             }
         }
         tip(...messages) {
-            if (D$6.enable) this.warn(...messages);
+            if (D$7.enable) this.warn(...messages);
         }
         warn(...messages) {
-            if (D$6.showWarn) console.warn(this.name, ...messages);
+            if (D$7.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$6 = Debug;
+    const D$7 = Debug;
     const debug$i = 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$c, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$4} = Math;
+    const {copy: copy$b, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$4} = 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$c(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+            if (useSameWorldTransform) copy$b(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$8, m: m, L: L$9, l: l, H: H, h: h, V: V, v: v, C: C$7, c: c, S: S, s: s, Q: Q$6, q: q, T: T, t: t, A: A, a: a, Z: Z$7, z: z, N: N$5, D: D$5, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5} = PathCommandMap;
+    const {M: M$8, m: m, L: L$9, l: l, H: H, h: h, V: V, v: v, C: C$7, c: c, S: S, s: s, Q: Q$6, q: q, T: T, t: t, A: A, a: a, Z: Z$7, z: z, N: N$5, D: D$6, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5} = 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$f = Debug.get("PathConvert");
@@ -2813,7 +2822,7 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$5:
+                  case D$6:
                     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$7, L: L$8, C: C$6, Q: Q$5, Z: Z$6, N: N$4, D: D$4, X: X$4, G: G$4, F: F$5, O: O$5, P: P$4, U: U$4} = PathCommandMap;
+    const {M: M$7, L: L$8, C: C$6, Q: Q$5, Z: Z$6, N: N$4, D: D$5, X: X$4, G: G$4, F: F$5, O: O$5, P: P$4, U: U$4} = PathCommandMap;
     const {getMinDistanceFrom: getMinDistanceFrom, getRadianFrom: getRadianFrom} = PointHelper;
     const {tan: tan, min: min, abs: abs$4} = Math;
     const startPoint = {};
@@ -2944,7 +2953,7 @@ var LeaferUI = function(exports) {
             } else {
                 const fourCorners = MathHelper.fourNumber(cornerRadius);
                 if (fourCorners) {
-                    data.push(D$4, x, y, width, height, ...fourCorners);
+                    data.push(D$5, x, y, width, height, ...fourCorners);
                 } else {
                     data.push(N$4, x, y, width, height);
                 }
@@ -3083,7 +3092,7 @@ var LeaferUI = function(exports) {
         }
         paint() {}
     }
-    const {M: M$6, L: L$7, C: C$5, Q: Q$4, Z: Z$5, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3} = PathCommandMap;
+    const {M: M$6, L: L$7, C: C$5, Q: Q$4, Z: Z$5, N: N$3, D: D$4, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3} = PathCommandMap;
     const debug$e = Debug.get("PathDrawer");
     const PathDrawer = {
         drawPathByData(drawer, data) {
@@ -3123,7 +3132,7 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$3:
+                  case D$4:
                     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$5, L: L$6, C: C$4, Q: Q$3, Z: Z$4, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$3, P: P$2, U: U$2} = PathCommandMap;
+    const {M: M$5, L: L$6, C: C$4, Q: Q$3, Z: Z$4, N: N$2, D: D$3, X: X$2, G: G$2, F: F$3, O: O$3, P: P$2, U: U$2} = PathCommandMap;
     const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$1} = BezierHelper;
-    const {addPointBounds: addPointBounds, copy: copy$b, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$3} = TwoPointBoundsHelper;
+    const {addPointBounds: addPointBounds, copy: copy$a, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$3} = TwoPointBoundsHelper;
     const debug$d = Debug.get("PathBounds");
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
@@ -3233,17 +3242,17 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$2:
+                  case D$3:
                   case X$2:
                     x = data[i + 1];
                     y = data[i + 2];
                     addBounds(setPointBounds, x, y, data[i + 3], data[i + 4]);
-                    i += command === D$2 ? 9 : 6;
+                    i += command === D$3 ? 9 : 6;
                     break;
 
                   case G$2:
                     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$b(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$a(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 9;
@@ -3261,7 +3270,7 @@ var LeaferUI = function(exports) {
 
                   case O$3:
                     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$b(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$a(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 7;
@@ -3278,7 +3287,7 @@ var LeaferUI = function(exports) {
 
                   case U$2:
                     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$b(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$a(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$a, 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$9, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter: skewOfOuter, multiplyParent: multiplyParent$3, divideParent: divideParent, getLayout: getLayout} = MatrixHelper;
     const matrix$3 = {}, {round: round$3} = 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$4.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$a(matrix$3, o);
+            copy$9(matrix$3, o);
             scaleOfOuter$2(matrix$3, origin, scaleX, scaleY);
-            if (t.origin || t.around) {
+            if (L$4.hasHighPosition(t)) {
                 L$4.setTransform(t, matrix$3, resize, transition);
             } else {
                 const x = t.x + matrix$3.e - o.e, y = t.y + matrix$3.f - o.f;
@@ -4313,9 +4332,9 @@ var LeaferUI = function(exports) {
         },
         rotateOfLocal(t, origin, angle, transition) {
             const o = t.__localMatrix;
-            copy$a(matrix$3, o);
+            copy$9(matrix$3, o);
             rotateOfOuter$2(matrix$3, origin, angle);
-            if (t.origin || t.around) L$4.setTransform(t, matrix$3, false, transition); else t.set({
+            if (L$4.hasHighPosition(t)) L$4.setTransform(t, matrix$3, false, transition); else t.set({
                 x: t.x + matrix$3.e - o.e,
                 y: t.y + matrix$3.f - o.f,
                 rotation: MathHelper.formatRotation(t.rotation + angle)
@@ -4325,24 +4344,28 @@ var LeaferUI = function(exports) {
             L$4.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
         },
         skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
-            copy$a(matrix$3, t.__localMatrix);
+            copy$9(matrix$3, t.__localMatrix);
             skewOfOuter(matrix$3, origin, skewX, skewY);
             L$4.setTransform(t, matrix$3, resize, transition);
         },
         transformWorld(t, transform, resize, transition) {
-            copy$a(matrix$3, t.worldTransform);
+            copy$9(matrix$3, t.worldTransform);
             multiplyParent$3(matrix$3, transform);
-            if (t.parent) divideParent(matrix$3, t.parent.worldTransform);
+            if (t.parent) divideParent(matrix$3, t.parent.scrollWorldTransform);
             L$4.setTransform(t, matrix$3, resize, transition);
         },
         transform(t, transform, resize, transition) {
-            copy$a(matrix$3, t.localTransform);
+            copy$9(matrix$3, t.localTransform);
             multiplyParent$3(matrix$3, transform);
             L$4.setTransform(t, matrix$3, resize, transition);
         },
         setTransform(t, transform, resize, transition) {
             const data = t.__, originPoint = data.origin && L$4.getInnerOrigin(t, data.origin);
             const layout = getLayout(transform, originPoint, data.around && L$4.getInnerOrigin(t, data.around));
+            if (L$4.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$a(matrix$3, t.worldTransform);
-            divideParent(matrix$3, relative.worldTransform);
+            copy$9(matrix$3, t.worldTransform);
+            divideParent(matrix$3, relative.scrollWorldTransform);
             return temp ? matrix$3 : Object.assign({}, matrix$3);
         },
         drop(t, parent, index, resize) {
             t.setTransform(L$4.getRelativeWorld(t, parent, true), resize);
             parent.add(t, index);
         },
+        hasHighPosition(t) {
+            return t.origin || t.around || L$4.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$4 = LeafHelper;
     const {updateAllMatrix: updateAllMatrix$4, updateMatrix: updateMatrix$4, updateAllWorldOpacity: updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1} = L$4;
     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$3} = LeafHelper;
-    const {toOuterOf: toOuterOf$2, getPoints: getPoints, copy: copy$9} = BoundsHelper;
+    const {toOuterOf: toOuterOf$2, getPoints: getPoints, copy: copy$8} = 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$9(layoutBounds, bounds);
+            copy$8(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$4, tempPoint: tempPoint$1} = 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$3, updateAllMatrix: updateAllMatrix$3} = LeafHelper;
     const {updateBounds: updateBounds$2} = BranchHelper;
-    const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$8} = BoundsHelper;
+    const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$7} = BoundsHelper;
     const {toBounds: toBounds$2} = 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$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
         },
-        __updateRenderBounds() {
+        __updateRenderBounds(_bounds) {
             const layout = this.__layout;
-            layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$8(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$7(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$7, move: move$5} = PointHelper;
+    const {copy: copy$6, move: move$6} = 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$7(to, world);
+                if (to) copy$6(to, world);
             }
         }
         localToWorld(local, to, distance, relative) {
             if (this.parent) {
                 this.parent.innerToWorld(local, to, distance, relative);
             } else {
-                if (to) copy$7(to, local);
+                if (to) copy$6(to, local);
             }
         }
         worldToInner(world, to, distance, relative) {
@@ -5851,7 +5895,7 @@ var LeaferUI = function(exports) {
         }
         getBoxPointByInner(inner, _relative, _distance, change) {
             const point = change ? inner : Object.assign({}, inner), {x: x, y: y} = this.boxBounds;
-            move$5(point, -x, -y);
+            move$6(point, -x, -y);
             return point;
         }
         getInnerPoint(world, relative, distance, change) {
@@ -5861,7 +5905,7 @@ var LeaferUI = function(exports) {
         }
         getInnerPointByBox(box, _relative, _distance, change) {
             const point = change ? box : Object.assign({}, box), {x: x, y: y} = this.boxBounds;
-            move$5(point, x, y);
+            move$6(point, x, y);
             return point;
         }
         getInnerPointByLocal(local, _relative, distance, change) {
@@ -6047,14 +6091,14 @@ var LeaferUI = function(exports) {
             }
             return 0;
         }
-        __updateBoxBounds() {
-            setListWithFn$1(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
+        __updateBoxBounds(_secondLayout, bounds) {
+            setListWithFn$1(bounds || this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
         }
-        __updateStrokeBounds() {
-            setListWithFn$1(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
+        __updateStrokeBounds(bounds) {
+            setListWithFn$1(bounds || this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
         }
-        __updateRenderBounds() {
-            setListWithFn$1(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
+        __updateRenderBounds(bounds) {
+            setListWithFn$1(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";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() {
             return true;
@@ -6800,8 +6844,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);
@@ -7021,6 +7065,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);
                     }
@@ -7340,7 +7385,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 {
@@ -7481,6 +7526,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$2.getValidMove(leaf.__localBoxBounds, dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds, dragBoundsType, move, true);
+            D$2.axisMove(leaf, move);
+        }
+    };
+    const D$2 = DragBoundsHelper;
     const {stintSet: stintSet$1} = DataHelper;
     const UIRender = {
         __updateChange() {
@@ -7764,8 +7842,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);
@@ -7780,6 +7858,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);
@@ -8163,7 +8242,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
@@ -8244,9 +8323,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$6, 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";
@@ -8292,22 +8370,27 @@ var LeaferUI = function(exports) {
         __updateRenderBounds() {
             let isOverflow;
             if (this.children.length) {
-                const data = this.__, {renderBounds: renderBounds, boxBounds: boxBounds} = this.__layout;
-                super.__updateRenderBounds();
-                copy$6(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();
@@ -8322,7 +8405,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);
@@ -8886,7 +8969,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));
@@ -9025,26 +9108,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);
@@ -9279,11 +9347,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);
                     }
                 });
             }
@@ -10933,7 +11002,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);
     }
@@ -10993,7 +11062,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);
     }
@@ -11082,7 +11151,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";
@@ -12595,7 +12664,7 @@ var LeaferUI = function(exports) {
             if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = editor.leafList.keys;
         }
         onDragEnd(e) {
-            if (this.mergeConfig.dragLimitAnimate && this.moving) this.transformTool.onMove(e);
+            if (this.moving) this.transformTool.onMove(e);
             this.dragPoint = null;
             this.resetDoing();
             const {name: name, pointType: pointType} = e.current;
@@ -12628,6 +12697,10 @@ var LeaferUI = function(exports) {
                 }
             }
         }
+        onMoveEnd(e) {
+            if (this.moving) this.transformTool.onMove(e);
+            this.resetDoing();
+        }
         onScale(e) {
             if (this.canGesture) {
                 e.stop();
@@ -12718,7 +12791,7 @@ var LeaferUI = function(exports) {
             const {rect: rect, editor: editor, __eventIds: events} = this;
             events.push(rect.on_([ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.ENTER, () => updateMoveCursor(this) ], [ exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ exports.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
             this.waitLeafer(() => {
-                events.push(editor.app.on_([ [ [ exports.KeyEvent.HOLD, exports.KeyEvent.UP ], this.onKey, this ], [ exports.KeyEvent.DOWN, this.onArrow, this ], [ exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ exports.MoveEvent.END, this.resetDoing, this ], [ exports.ZoomEvent.END, this.resetDoing, this ], [ exports.RotateEvent.END, this.resetDoing, this ] ]));
+                events.push(editor.app.on_([ [ [ exports.KeyEvent.HOLD, exports.KeyEvent.UP ], this.onKey, this ], [ exports.KeyEvent.DOWN, this.onArrow, this ], [ exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ exports.MoveEvent.END, this.onMoveEnd, this ], [ exports.ZoomEvent.END, this.resetDoing, this ], [ exports.RotateEvent.END, this.resetDoing, this ] ]));
             });
         }
         __removeListenEvents() {
@@ -12877,7 +12950,7 @@ var LeaferUI = function(exports) {
             parent.addAt(group, parent.children.indexOf(list[0]));
             list.sort(order);
             const matrx = new Matrix(element.worldTransform);
-            matrx.divideParent(parent.worldTransform);
+            matrx.divideParent(parent.scrollWorldTransform);
             group.setTransform(matrx);
             group.editable = true;
             group.hitChildren = false;
@@ -13065,8 +13138,9 @@ var LeaferUI = function(exports) {
             const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData, app: app} = this.editBox;
             let move, {dragLimitAnimate: dragLimitAnimate} = mergeConfig;
             if (isUndefined(dragLimitAnimate)) dragLimitAnimate = app && app.config.pointer.dragLimitAnimate;
-            const isMoveEnd = e.type === exports.DragEvent.END || e.type === exports.DragEvent.END;
-            const checkLimitMove = !dragLimitAnimate || isMoveEnd;
+            const isMoveEnd = e.type === exports.MoveEvent.END || e.type === exports.DragEvent.END;
+            const axisDrag = isString(target.draggable);
+            const checkLimitMove = !dragLimitAnimate || isMoveEnd || axisDrag;
             if (e instanceof exports.MoveEvent) {
                 move = e.getLocalMove(target);
                 if (checkLimitMove) exports.DragEvent.limitMove(target, move);
@@ -13080,7 +13154,9 @@ var LeaferUI = function(exports) {
                 }
                 move = exports.DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
             }
-            if (dragLimitAnimate && isMoveEnd) LeafHelper.animateMove(this, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else this.move(move);
+            if (move.x || move.y) {
+                if (dragLimitAnimate && !axisDrag && isMoveEnd) LeafHelper.animateMove(this, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else this.move(move);
+            }
         }
         onScale(e) {
             const {target: target, mergeConfig: mergeConfig, single: single, dragStartData: dragStartData} = this.editBox;
@@ -13354,6 +13430,10 @@ var LeaferUI = function(exports) {
         get buttons() {
             return this.editBox.buttons;
         }
+        get targetLeafer() {
+            const first = this.list[0];
+            return first && first.leafer;
+        }
         constructor(userConfig, data) {
             super(data);
             this.leafList = new LeafList;
@@ -13403,11 +13483,22 @@ var LeaferUI = function(exports) {
         updateEditTool() {
             this.unloadEditTool();
             if (this.editing) {
-                const name = this.element.editOuter || "EditTool";
-                const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
-                this.editBox.load();
-                tool.load();
-                this.update();
+                const target = this.element;
+                let name = target.editOuter || "EditTool";
+                const {beforeEditOuter: beforeEditOuter} = this.mergeConfig;
+                if (beforeEditOuter) {
+                    const check = beforeEditOuter({
+                        target: target,
+                        name: name
+                    });
+                    if (isString(check)) name = check; else if (check === false) return;
+                }
+                if (EditToolCreator.list[name]) {
+                    const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+                    this.editBox.load();
+                    tool.load();
+                    this.update();
+                }
             }
         }
         unloadEditTool() {
@@ -13500,17 +13591,24 @@ var LeaferUI = function(exports) {
             if (isString(nameOrSelect)) name = nameOrSelect; else if (!select) select = nameOrSelect;
             if (target && select) this.target = target;
             if (this.single) {
-                const editTarget = target || this.element;
-                name || (name = editTarget.editInner);
-                if (name && EditToolCreator.list[name]) {
+                if (!target) target = this.element;
+                if (!name) name = target.editInner;
+                const {beforeEditInner: beforeEditInner} = this.mergeConfig;
+                if (beforeEditInner) {
+                    const check = beforeEditInner({
+                        target: target,
+                        name: name
+                    });
+                    if (isString(check)) name = check; else if (check === false) return;
+                }
+                if (EditToolCreator.list[name]) {
                     this.editTool.unload();
                     this.innerEditing = true;
                     this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
-                    this.innerEditor.editTarget = editTarget;
+                    this.innerEditor.editTarget = target;
                     this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                     this.innerEditor.load();
                     this.emitInnerEvent(InnerEditorEvent.OPEN);
-                    console.log("hello");
                 }
             }
         }
@@ -13559,10 +13657,13 @@ var LeaferUI = function(exports) {
         onRenderStart() {
             if (this.targetChanged) this.update();
         }
+        onChildScroll() {
+            if (this.multiple) this.updateEditBox();
+        }
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
-                const {app: app, leafer: leafer, editMask: editMask} = this;
-                this.targetEventIds = [ leafer.on_(RenderEvent.START, this.onRenderStart, this), app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this) ];
+                const {app: app, leafer: leafer, targetLeafer: targetLeafer, editMask: editMask} = this;
+                this.targetEventIds = [ leafer.on_(RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this) ];
                 if (editMask.visible) editMask.forceRender();
             }
         }
@@ -13702,7 +13803,7 @@ var LeaferUI = function(exports) {
     };
     exports.EditTool = __decorate([ registerEditTool() ], exports.EditTool);
     const {left: left$1, right: right$1} = exports.Direction9;
-    const {move: move$4, copy: copy$1, toNumberPoints: toNumberPoints} = PointHelper;
+    const {move: move$5, copy: copy$1, toNumberPoints: toNumberPoints} = PointHelper;
     exports.LineEditTool = class LineEditTool extends exports.EditTool {
         constructor() {
             super(...arguments);
@@ -13775,11 +13876,11 @@ var LeaferUI = function(exports) {
         dragPoint(fromPoint, toPoint, isDragFrom, around, movePoint) {
             const {x: x, y: y} = movePoint;
             if (isDragFrom) {
-                move$4(fromPoint, x, y);
-                if (around) move$4(toPoint, -x, -y);
+                move$5(fromPoint, x, y);
+                if (around) move$5(toPoint, -x, -y);
             } else {
-                if (around) move$4(fromPoint, -x, -y);
-                move$4(toPoint, x, y);
+                if (around) move$5(fromPoint, -x, -y);
+                move$5(toPoint, x, y);
             }
         }
         onSkew(_e) {}
@@ -14291,7 +14392,9 @@ var LeaferUI = function(exports) {
         addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
         if (leafer.isApp || custom) return;
         leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, e => {
-            leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
+            leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY, false));
+        }), leafer.on_(exports.MoveEvent.END, e => {
+            LeafHelper.animateMove(leafer.zoomLayer, leafer.getValidMove(e.moveX, e.moveY));
         }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, e => {
             const {zoomLayer: zoomLayer} = leafer;
             const changeScale = leafer.getValidScale(e.scale);
@@ -14490,30 +14593,25 @@ var LeaferUI = function(exports) {
         }
     }
     const leafer = exports.Leafer.prototype;
-    const bounds = new Bounds;
+    const bounds = new Bounds, move$4 = new Point;
     leafer.initType = function(type) {
         LeaferTypeCreator.run(type, this);
     };
-    leafer.getValidMove = function(moveX, moveY) {
+    leafer.getValidMove = function(moveX, moveY, checkLimit = true) {
         const {scroll: scroll, disabled: disabled} = this.app.config.move;
+        move$4.set(moveX, moveY);
         if (scroll) {
             const type = scroll === true ? "" : scroll;
-            if (type.includes("x")) moveX = moveX || moveY, moveY = 0; else if (type.includes("y")) moveY = moveY || moveX, 
-            moveX = 0; else Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
-            if (type.includes("limit")) {
-                const {x: x, y: y, width: width, height: height} = bounds.set(this.__world).addPoint(this.zoomLayer);
-                const right = x + width - this.width, bottom = y + height - this.height;
-                if (x >= 0 && right <= 0) moveX = 0; else if (moveX > 0) {
-                    if (x + moveX > 0) moveX = -x;
-                } else if (moveX < 0 && right + moveX < 0) moveX = -right;
-                if (y >= 0 && bottom <= 0) moveY = 0; else if (moveY > 0) {
-                    if (y + moveY > 0) moveY = -y;
-                } else if (moveY < 0 && bottom + moveY < 0) moveY = -bottom;
+            if (type.includes("x")) move$4.y = 0; else if (type.includes("y")) move$4.x = 0; else Math.abs(move$4.x) > Math.abs(move$4.y) ? move$4.y = 0 : move$4.x = 0;
+            if (checkLimit && type.includes("limit")) {
+                bounds.set(this.__world).addPoint(this.zoomLayer);
+                DragBoundsHelper.getValidMove(bounds, this.canvas.bounds, "inner", move$4, true);
+                if (type.includes("x")) move$4.y = 0; else if (type.includes("y")) move$4.x = 0;
             }
         }
         return {
-            x: disabled ? 0 : moveX,
-            y: disabled ? 0 : moveY
+            x: disabled ? 0 : move$4.x,
+            y: disabled ? 0 : move$4.y
         };
     };
     leafer.getValidScale = function(changeScale) {
@@ -17845,6 +17943,7 @@ var LeaferUI = function(exports) {
     exports.Cursor = Cursor;
     exports.DataHelper = DataHelper;
     exports.Debug = Debug;
+    exports.DragBoundsHelper = DragBoundsHelper;
     exports.Dragger = Dragger;
     exports.EditBox = EditBox;
     exports.EditDataHelper = EditDataHelper;
@@ -18000,6 +18099,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;
@@ -18038,6 +18138,7 @@ var LeaferUI = function(exports) {
     exports.scaleResizePath = scaleResizePath;
     exports.scaleResizePoints = scaleResizePoints;
     exports.scaleType = scaleType;
+    exports.scrollType = scrollType;
     exports.sortType = sortType;
     exports.stateStyleType = stateStyleType;
     exports.stateType = stateType;