@leafer/worker 1.9.1 → 1.9.3

package/dist/worker.module.js

@@ -476,9 +476,8 @@ const MatrixHelper = {
         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) {
@@ -709,19 +708,19 @@ const PointHelper = {
     },
     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;
     },
@@ -797,7 +796,7 @@ const PointHelper = {
 
 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) {
@@ -1191,6 +1190,10 @@ const BoundsHelper = {
         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);
@@ -1200,7 +1203,7 @@ const BoundsHelper = {
         if (!to) {
             to = t;
         } else {
-            copy$d(to, t);
+            copy$c(to, t);
         }
         if (parent) {
             to.offsetX = -(B.maxX(parent) - t.x);
@@ -1352,7 +1355,7 @@ const BoundsHelper = {
             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);
                 }
@@ -1439,7 +1442,7 @@ const BoundsHelper = {
 
 const B = BoundsHelper;
 
-const {add: add$1, copy: copy$d} = B;
+const {add: add$1, copy: copy$c} = B;
 
 class Bounds {
     get minX() {
@@ -1654,17 +1657,17 @@ class Debug {
         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]) {
@@ -1692,7 +1695,7 @@ function getNameList(name) {
     return name;
 }
 
-const D$6 = Debug;
+const D$7 = Debug;
 
 const debug$i = Debug.get("RunTime");
 
@@ -2137,7 +2140,7 @@ __decorate([ contextMethod() ], Canvas$1.prototype, "measureText", null);
 
 __decorate([ contextMethod() ], Canvas$1.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,
@@ -2302,44 +2305,44 @@ class LeaferCanvasBase extends Canvas$1 {
         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");
@@ -2347,42 +2350,48 @@ class LeaferCanvasBase extends Canvas$1 {
     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);
@@ -2390,7 +2399,7 @@ class LeaferCanvasBase extends Canvas$1 {
     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;
@@ -2398,7 +2407,7 @@ class LeaferCanvasBase extends Canvas$1 {
     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();
         }
     }
@@ -2779,7 +2788,7 @@ const EllipseHelper = {
     }
 };
 
-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;
 
@@ -2999,7 +3008,7 @@ const PathConvert = {
                 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);
@@ -3100,7 +3109,7 @@ const PathConvert = {
 
 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;
 
@@ -3136,7 +3145,7 @@ const PathCommandDataHelper = {
         } 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);
             }
@@ -3279,7 +3288,7 @@ class PathCreator {
     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");
 
@@ -3321,7 +3330,7 @@ const PathDrawer = {
                 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;
@@ -3364,11 +3373,11 @@ const PathDrawer = {
     }
 };
 
-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");
 
@@ -3440,17 +3449,17 @@ const PathBounds = {
                 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;
@@ -3468,7 +3477,7 @@ const PathBounds = {
 
               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;
@@ -3485,7 +3494,7 @@ const PathBounds = {
 
               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;
@@ -4138,6 +4147,17 @@ function positionType(defaultValue, checkFiniteNumber) {
     }));
 }
 
+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) {
@@ -4476,7 +4496,7 @@ function registerUIEvent() {
     };
 }
 
-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;
 
@@ -4552,7 +4572,7 @@ const LeafHelper = {
             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) {
@@ -4574,9 +4594,9 @@ const LeafHelper = {
             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;
@@ -4593,9 +4613,9 @@ const LeafHelper = {
     },
     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)
@@ -4605,24 +4625,28 @@ const LeafHelper = {
         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;
@@ -4650,14 +4674,20 @@ const LeafHelper = {
         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) {
@@ -4683,8 +4713,7 @@ 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 = {
@@ -4809,7 +4838,7 @@ const WaitHelper = {
 
 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";
 
@@ -5048,7 +5077,7 @@ class LeafLayout {
             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;
@@ -5236,6 +5265,8 @@ ChildEvent.UNMOUNTED = "unmounted";
 
 ChildEvent.DESTROY = "destroy";
 
+const SCROLL = "property.scroll";
+
 class PropertyEvent extends Event {
     constructor(type, target, attrName, oldValue, newValue) {
         super(type, target);
@@ -5249,6 +5280,13 @@ 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);
@@ -5524,7 +5562,9 @@ class Eventer {
         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;
     }
@@ -5618,8 +5658,6 @@ const LeafDataProxy = {
             }
             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];
@@ -5627,10 +5665,10 @@ const LeafDataProxy = {
                         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;
@@ -5640,6 +5678,11 @@ const LeafDataProxy = {
             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;
@@ -5658,8 +5701,9 @@ 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) {
@@ -5685,7 +5729,7 @@ const {updateMatrix: updateMatrix$3, updateAllMatrix: updateAllMatrix$3} = LeafH
 
 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;
 
@@ -5756,7 +5800,7 @@ const LeafBounds = {
     __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) {
@@ -5790,13 +5834,13 @@ const LeafBounds = {
         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);
     }
 };
 
@@ -5895,7 +5939,7 @@ const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: m
 
 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;
 
@@ -5943,6 +5987,10 @@ let Leaf = class Leaf {
     get localTransform() {
         return this.__layout.getTransform("local");
     }
+    get scrollWorldTransform() {
+        this.updateLayout();
+        return this.__scrollWorld || this.__world;
+    }
     get boxBounds() {
         return this.getBounds("box", "inner");
     }
@@ -5959,7 +6007,7 @@ let Leaf = class Leaf {
         return this.getBounds("render");
     }
     get worldOpacity() {
-        this.__layout.update();
+        this.updateLayout();
         return this.__worldOpacity;
     }
     get __worldFlipped() {
@@ -6134,10 +6182,10 @@ let Leaf = class Leaf {
     __updateLocalBoxBounds() {}
     __updateLocalStrokeBounds() {}
     __updateLocalRenderBounds() {}
-    __updateBoxBounds() {}
+    __updateBoxBounds(_secondLayout, _bounds) {}
     __updateContentBounds() {}
-    __updateStrokeBounds() {}
-    __updateRenderBounds() {}
+    __updateStrokeBounds(_bounds) {}
+    __updateRenderBounds(_bounds) {}
     __updateAutoLayout() {}
     __updateFlowLayout() {}
     __updateNaturalSize() {}
@@ -6209,14 +6257,14 @@ let Leaf = class Leaf {
         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) {
@@ -6235,7 +6283,7 @@ let Leaf = class Leaf {
     }
     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) {
@@ -6245,7 +6293,7 @@ let Leaf = class Leaf {
     }
     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) {
@@ -6437,14 +6485,14 @@ let Branch = class Branch extends Leaf {
         }
         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;
@@ -6691,7 +6739,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.9.1";
+const version = "1.9.3";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() {
@@ -7221,8 +7269,8 @@ class Renderer {
         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);
@@ -7445,6 +7493,7 @@ class Picker {
             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);
                 }
@@ -7792,7 +7841,7 @@ class BoxData extends GroupData {
     }
     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);
     }
 }
 
@@ -7948,6 +7997,41 @@ const UIBounds = {
     }
 };
 
+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 = {
@@ -8262,9 +8346,9 @@ __decorate([ positionType(0, true) ], UI.prototype, "offsetX", void 0);
 
 __decorate([ positionType(0, true) ], UI.prototype, "offsetY", void 0);
 
-__decorate([ positionType(0, true) ], UI.prototype, "scrollX", void 0);
+__decorate([ scrollType(0, true) ], UI.prototype, "scrollX", void 0);
 
-__decorate([ positionType(0, true) ], UI.prototype, "scrollY", void 0);
+__decorate([ scrollType(0, true) ], UI.prototype, "scrollY", void 0);
 
 __decorate([ autoLayoutType() ], UI.prototype, "origin", void 0);
 
@@ -8294,6 +8378,8 @@ __decorate([ dataType(false) ], UI.prototype, "draggable", void 0);
 
 __decorate([ dataType() ], UI.prototype, "dragBounds", void 0);
 
+__decorate([ dataType("auto") ], UI.prototype, "dragBoundsType", void 0);
+
 __decorate([ dataType(false) ], UI.prototype, "editable", void 0);
 
 __decorate([ hitType(true) ], UI.prototype, "hittable", void 0);
@@ -8716,7 +8802,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     zoom(_zoomType, _optionsOrPadding, _scroll, _transition) {
         return Plugin.need("view");
     }
-    getValidMove(moveX, moveY) {
+    getValidMove(moveX, moveY, _checkLimit) {
         return {
             x: moveX,
             y: moveY
@@ -8805,12 +8891,10 @@ __decorate([ dataProcessor(RectData) ], Rect.prototype, "__", void 0);
 
 Rect = __decorate([ useModule(RectRender), rewriteAble(), registerUI() ], Rect);
 
-const {copy: copy$6, add: add, includes: includes$1} = BoundsHelper;
+const {add: add, includes: includes$1, scroll: scroll} = BoundsHelper;
 
 const rect$1 = Rect.prototype, group = Group.prototype;
 
-const childrenRenderBounds = {};
-
 let Box = class Box extends Group {
     get __tag() {
         return "Box";
@@ -8856,22 +8940,27 @@ let Box = class Box extends Group {
     __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();
@@ -8886,7 +8975,7 @@ let Box = class Box extends Group {
             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);
@@ -9559,7 +9648,7 @@ let App = class App extends Leafer {
         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));
@@ -9727,26 +9816,11 @@ let DragEvent = class DragEvent extends PointerEvent {
         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);
@@ -10031,11 +10105,12 @@ class Dragger {
             const checkLimitMove = !dragLimitAnimate || !!isDragEnd;
             list.forEach(leaf => {
                 if (leaf.draggable) {
+                    const axisDrag = isString(leaf.draggable);
                     const move = 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);
                 }
             });
         }
@@ -11794,7 +11869,7 @@ function shadow$1(ui, current, shape) {
             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);
 }
@@ -11858,7 +11933,7 @@ function innerShadow(ui, current, shape) {
         }
         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);
 }
@@ -11957,7 +12032,7 @@ function copyContent(leaf, canvas, content, maskOpacity, blendMode, recycle) {
     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 = "¥￥＄€£￡¢￠";
@@ -13564,7 +13639,7 @@ class EditBox extends Group {
         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;
@@ -13597,6 +13672,10 @@ class EditBox extends Group {
             }
         }
     }
+    onMoveEnd(e) {
+        if (this.moving) this.transformTool.onMove(e);
+        this.resetDoing();
+    }
     onScale(e) {
         if (this.canGesture) {
             e.stop();
@@ -13687,7 +13766,7 @@ class EditBox extends Group {
         const {rect: rect, editor: editor, __eventIds: events} = this;
         events.push(rect.on_([ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.ENTER, () => updateMoveCursor(this) ], [ PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
         this.waitLeafer(() => {
-            events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, this ], [ KeyEvent.DOWN, this.onArrow, this ], [ MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ MoveEvent.END, this.resetDoing, this ], [ ZoomEvent.END, this.resetDoing, this ], [ RotateEvent.END, this.resetDoing, this ] ]));
+            events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, this ], [ KeyEvent.DOWN, this.onArrow, this ], [ MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ MoveEvent.END, this.onMoveEnd, this ], [ ZoomEvent.END, this.resetDoing, this ], [ RotateEvent.END, this.resetDoing, this ] ]));
         });
     }
     __removeListenEvents() {
@@ -13860,7 +13939,7 @@ const EditorHelper = {
         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;
@@ -14083,8 +14162,9 @@ class TransformTool {
         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 === DragEvent.END || e.type === DragEvent.END;
-        const checkLimitMove = !dragLimitAnimate || isMoveEnd;
+        const isMoveEnd = e.type === MoveEvent.END || e.type === DragEvent.END;
+        const axisDrag = isString(target.draggable);
+        const checkLimitMove = !dragLimitAnimate || isMoveEnd || axisDrag;
         if (e instanceof MoveEvent) {
             move = e.getLocalMove(target);
             if (checkLimitMove) DragEvent.limitMove(target, move);
@@ -14098,7 +14178,9 @@ class TransformTool {
             }
             move = 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;
@@ -14373,6 +14455,10 @@ let Editor = class Editor extends Group {
     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;
@@ -14422,11 +14508,22 @@ let Editor = class Editor extends Group {
     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() {
@@ -14519,17 +14616,24 @@ let Editor = class Editor extends Group {
         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");
             }
         }
     }
@@ -14578,10 +14682,13 @@ let Editor = class Editor extends Group {
     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();
         }
     }
@@ -14730,7 +14837,7 @@ EditTool = __decorate([ registerEditTool() ], EditTool);
 
 const {left: left$1, right: right$1} = Direction9;
 
-const {move: move$4, copy: copy$1, toNumberPoints: toNumberPoints} = PointHelper;
+const {move: move$5, copy: copy$1, toNumberPoints: toNumberPoints} = PointHelper;
 
 let LineEditTool = class LineEditTool extends EditTool {
     constructor() {
@@ -14804,11 +14911,11 @@ let LineEditTool = class LineEditTool extends EditTool {
     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) {}
@@ -15363,7 +15470,9 @@ function addViewport(leafer, mergeConfig, custom) {
     addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
     if (leafer.isApp || custom) return;
     leafer.__eventIds.push(leafer.on_(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_(MoveEvent.END, e => {
+        LeafHelper.animateMove(leafer.zoomLayer, leafer.getValidMove(e.moveX, e.moveY));
     }), leafer.on_(ZoomEvent.BEFORE_ZOOM, e => {
         const {zoomLayer: zoomLayer} = leafer;
         const changeScale = leafer.getValidScale(e.scale);
@@ -15578,32 +15687,27 @@ class Transformer {
 
 const leafer = 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
     };
 };
 
@@ -19249,4 +19353,4 @@ Object.assign(Filter, {
     }
 });
 
-export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix$1 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, scrollType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix$1 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };