@leafer/worker 1.9.7 → 1.9.9

package/dist/worker.module.js

@@ -247,18 +247,34 @@ class LeafData {
     }
 }
 
-const {round: round$6, pow: pow$2, PI: PI$4} = Math;
-
-const MathHelper = {
-    within(value, min, max) {
-        if (isObject(min)) max = min.max, min = min.min;
-        if (!isUndefined(min) && value < min) value = min;
-        if (!isUndefined(max) && value > max) value = max;
-        return value;
+let tempA, tempB, tempTo;
+
+const {max: max$5} = Math, tempFour = [ 0, 0, 0, 0 ];
+
+const FourNumberHelper = {
+    zero: [ ...tempFour ],
+    tempFour: tempFour,
+    set(to, top, right, bottom, left) {
+        if (right === undefined) right = bottom = left = top;
+        to[0] = top;
+        to[1] = right;
+        to[2] = bottom;
+        to[3] = left;
+        return to;
+    },
+    setTemp(top, right, bottom, left) {
+        return set$1(tempFour, top, right, bottom, left);
     },
-    fourNumber(num, maxValue) {
+    toTempAB(a, b, change) {
+        tempTo = change ? isNumber(a) ? b : a : [];
+        if (isNumber(a)) tempA = setTemp(a), tempB = b; else if (isNumber(b)) tempA = a, 
+        tempB = setTemp(b); else tempA = a, tempB = b;
+        if (tempA.length !== 4) tempA = get$5(tempA);
+        if (tempB.length !== 4) tempB = get$5(tempB);
+    },
+    get(num, maxValue) {
         let data;
-        if (isArray(num)) {
+        if (!isNumber(num)) {
             switch (num.length) {
               case 4:
                 data = isUndefined(maxValue) ? num : [ ...num ];
@@ -281,9 +297,39 @@ const MathHelper = {
             }
         }
         if (!data) data = [ num, num, num, num ];
-        if (maxValue) for (let i = 0; i < 4; i++) if (data[i] > maxValue) data[i] = maxValue;
+        if (!isUndefined(maxValue)) for (let i = 0; i < 4; i++) if (data[i] > maxValue) data[i] = maxValue;
         return data;
     },
+    max(t, other, change) {
+        if (isNumber(t) && isNumber(other)) return max$5(t, other);
+        toTempAB(t, other, change);
+        return set$1(tempTo, max$5(tempA[0], tempB[0]), max$5(tempA[1], tempB[1]), max$5(tempA[2], tempB[2]), max$5(tempA[3], tempB[3]));
+    },
+    add(t, other, change) {
+        if (isNumber(t) && isNumber(other)) return t + other;
+        toTempAB(t, other, change);
+        return set$1(tempTo, tempA[0] + tempB[0], tempA[1] + tempB[1], tempA[2] + tempB[2], tempA[3] + tempB[3]);
+    },
+    swapAndScale(t, scaleX, scaleY, change) {
+        if (isNumber(t)) return scaleX === scaleY ? t * scaleX : [ t * scaleY, t * scaleX ];
+        const to = change ? t : [];
+        const [top, right, bottom, left] = t.length === 4 ? t : get$5(t);
+        return set$1(to, bottom * scaleY, left * scaleX, top * scaleY, right * scaleX);
+    }
+};
+
+const {set: set$1, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
+
+const {round: round$6, pow: pow$2, PI: PI$4} = Math;
+
+const MathHelper = {
+    within(value, min, max) {
+        if (isObject(min)) max = min.max, min = min.min;
+        if (!isUndefined(min) && value < min) value = min;
+        if (!isUndefined(max) && value > max) value = max;
+        return value;
+    },
+    fourNumber: FourNumberHelper.get,
     formatRotation(rotation, unsign) {
         rotation %= 360;
         if (unsign) {
@@ -433,13 +479,13 @@ const MatrixHelper = {
         to.f = t.f * pixelRatio;
     },
     scaleOfOuter(t, origin, scaleX, scaleY) {
-        M$a.toInnerPoint(t, origin, tempPoint$4);
-        M$a.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
+        M$b.toInnerPoint(t, origin, tempPoint$4);
+        M$b.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
     },
     scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
-        M$a.translateInner(t, origin.x, origin.y);
-        M$a.scale(t, scaleX, scaleY);
-        M$a.translateInner(t, -origin.x, -origin.y);
+        M$b.translateInner(t, origin.x, origin.y);
+        M$b.scale(t, scaleX, scaleY);
+        M$b.translateInner(t, -origin.x, -origin.y);
     },
     rotate(t, rotation) {
         const {a: a, b: b, c: c, d: d} = t;
@@ -452,13 +498,13 @@ const MatrixHelper = {
         t.d = c * sinR + d * cosR;
     },
     rotateOfOuter(t, origin, rotation) {
-        M$a.toInnerPoint(t, origin, tempPoint$4);
-        M$a.rotateOfInner(t, tempPoint$4, rotation);
+        M$b.toInnerPoint(t, origin, tempPoint$4);
+        M$b.rotateOfInner(t, tempPoint$4, rotation);
     },
     rotateOfInner(t, origin, rotation) {
-        M$a.translateInner(t, origin.x, origin.y);
-        M$a.rotate(t, rotation);
-        M$a.translateInner(t, -origin.x, -origin.y);
+        M$b.translateInner(t, origin.x, origin.y);
+        M$b.rotate(t, rotation);
+        M$b.translateInner(t, -origin.x, -origin.y);
     },
     skew(t, skewX, skewY) {
         const {a: a, b: b, c: c, d: d} = t;
@@ -474,13 +520,13 @@ const MatrixHelper = {
         }
     },
     skewOfOuter(t, origin, skewX, skewY) {
-        M$a.toInnerPoint(t, origin, tempPoint$4);
-        M$a.skewOfInner(t, tempPoint$4, skewX, skewY);
+        M$b.toInnerPoint(t, origin, tempPoint$4);
+        M$b.skewOfInner(t, tempPoint$4, skewX, skewY);
     },
     skewOfInner(t, origin, skewX, skewY = 0) {
-        M$a.translateInner(t, origin.x, origin.y);
-        M$a.skew(t, skewX, skewY);
-        M$a.translateInner(t, -origin.x, -origin.y);
+        M$b.translateInner(t, origin.x, origin.y);
+        M$b.skew(t, skewX, skewY);
+        M$b.translateInner(t, -origin.x, -origin.y);
     },
     multiply(t, child) {
         const {a: a, b: b, c: c, d: d, e: e, f: f} = t;
@@ -519,15 +565,15 @@ const MatrixHelper = {
         to.f = e * parent.b + f * parent.d + parent.f;
     },
     divide(t, child) {
-        M$a.multiply(t, M$a.tempInvert(child));
+        M$b.multiply(t, M$b.tempInvert(child));
     },
     divideParent(t, parent) {
-        M$a.multiplyParent(t, M$a.tempInvert(parent));
+        M$b.multiplyParent(t, M$b.tempInvert(parent));
     },
     tempInvert(t) {
-        const {tempMatrix: tempMatrix} = M$a;
-        M$a.copy(tempMatrix, t);
-        M$a.invert(tempMatrix);
+        const {tempMatrix: tempMatrix} = M$b;
+        M$b.copy(tempMatrix, t);
+        M$b.invert(tempMatrix);
         return tempMatrix;
     },
     invert(t) {
@@ -605,7 +651,7 @@ const MatrixHelper = {
         }
         t.e = x;
         t.f = y;
-        if (origin = origin || around) M$a.translateInner(t, -origin.x, -origin.y, !around);
+        if (origin = origin || around) M$b.translateInner(t, -origin.x, -origin.y, !around);
     },
     getLayout(t, origin, around, firstSkewY) {
         const {a: a, b: b, c: c, d: d, e: e, f: f} = t;
@@ -666,11 +712,11 @@ const MatrixHelper = {
         return world;
     },
     reset(t) {
-        M$a.set(t);
+        M$b.set(t);
     }
 };
 
-const M$a = MatrixHelper;
+const M$b = MatrixHelper;
 
 const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3} = MatrixHelper;
 
@@ -1014,7 +1060,7 @@ class Matrix {
     }
 }
 
-const tempMatrix$1 = new Matrix;
+const tempMatrix$2 = new Matrix;
 
 const TwoPointBoundsHelper = {
     tempPointBounds: {},
@@ -1164,10 +1210,10 @@ const point$2 = {};
 
 const toPoint$5 = {};
 
-const tempBounds$2 = {};
+const tempBounds$3 = {};
 
 const BoundsHelper = {
-    tempBounds: tempBounds$2,
+    tempBounds: tempBounds$3,
     set(t, x = 0, y = 0, width = 0, height = 0) {
         t.x = x;
         t.y = y;
@@ -1218,19 +1264,11 @@ const BoundsHelper = {
         B.move(t, x, y);
         return t;
     },
-    toOffsetOutBounds(t, to, parent) {
-        if (!to) {
-            to = t;
-        } else {
-            copy$c(to, t);
-        }
-        if (parent) {
-            to.offsetX = -(B.maxX(parent) - t.x);
-            to.offsetY = -(B.maxY(parent) - t.y);
-        } else {
-            to.offsetX = t.x + t.width;
-            to.offsetY = t.y + t.height;
-        }
+    toOffsetOutBounds(t, to, offsetBounds) {
+        if (!to) to = t; else copy$c(to, t);
+        if (!offsetBounds) offsetBounds = t;
+        to.offsetX = B.maxX(offsetBounds);
+        to.offsetY = B.maxY(offsetBounds);
         B.move(to, -to.offsetX, -to.offsetY);
     },
     scale(t, scaleX, scaleY = scaleX, onlySize) {
@@ -1244,9 +1282,9 @@ const BoundsHelper = {
         t.height *= scaleY;
     },
     tempToOuterOf(t, matrix) {
-        B.copy(tempBounds$2, t);
-        B.toOuterOf(tempBounds$2, matrix);
-        return tempBounds$2;
+        B.copy(tempBounds$3, t);
+        B.toOuterOf(tempBounds$3, matrix);
+        return tempBounds$3;
     },
     getOuterOf(t, matrix) {
         t = Object.assign({}, t);
@@ -1304,9 +1342,9 @@ const BoundsHelper = {
     put(t, put, align = "center", putScale = 1, changeSize = true, to) {
         to || (to = put);
         if (isString(putScale)) putScale = B.getFitScale(t, put, putScale === "cover");
-        tempBounds$2.width = changeSize ? put.width *= putScale : put.width * putScale;
-        tempBounds$2.height = changeSize ? put.height *= putScale : put.height * putScale;
-        AlignHelper.toPoint(align, tempBounds$2, t, to, true, true);
+        tempBounds$3.width = changeSize ? put.width *= putScale : put.width * putScale;
+        tempBounds$3.height = changeSize ? put.height *= putScale : put.height * putScale;
+        AlignHelper.toPoint(align, tempBounds$3, t, to, true, true);
     },
     getSpread(t, spread, side) {
         const n = {};
@@ -1376,7 +1414,7 @@ const BoundsHelper = {
                     first = false;
                     if (!addMode) copy$c(t, bounds);
                 } else {
-                    add$1(t, bounds);
+                    add$2(t, bounds);
                 }
             }
         }
@@ -1390,7 +1428,7 @@ const BoundsHelper = {
         B.set(t, point.x, point.y);
     },
     addPoint(t, point) {
-        add$1(t, point, true);
+        add$2(t, point, true);
     },
     getPoints(t) {
         const {x: x, y: y, width: width, height: height} = t;
@@ -1461,7 +1499,7 @@ const BoundsHelper = {
 
 const B = BoundsHelper;
 
-const {add: add$1, copy: copy$c} = B;
+const {add: add$2, copy: copy$c} = B;
 
 class Bounds {
     get minX() {
@@ -1606,7 +1644,7 @@ class Bounds {
     }
 }
 
-const tempBounds$1 = new Bounds;
+const tempBounds$2 = new Bounds;
 
 class AutoBounds {
     constructor(top, right, bottom, left, width, height) {
@@ -2261,7 +2299,7 @@ class LeaferCanvasBase extends Canvas$1 {
         const {pixelRatio: pixelRatio, pixelSnap: pixelSnap} = this, w = this.worldTransform;
         if (parentMatrix) multiplyParent$4(matrix, parentMatrix, w);
         pixelScale(matrix, pixelRatio, w);
-        if (pixelSnap) {
+        if (pixelSnap && !matrix.ignorePixelSnap) {
             if (matrix.half && matrix.half * pixelRatio % 2) w.e = round$4(w.e - .5) + .5, w.f = round$4(w.f - .5) + .5; else w.e = round$4(w.e), 
             w.f = round$4(w.f);
         }
@@ -2560,14 +2598,14 @@ const {setPoint: setPoint$4, addPoint: addPoint$2} = TwoPointBoundsHelper;
 
 const {set: set, toNumberPoints: toNumberPoints$1} = PointHelper;
 
-const {M: M$9, L: L$a, C: C$8, Q: Q$7, Z: Z$8} = PathCommandMap;
+const {M: M$a, L: L$a, C: C$8, Q: Q$7, Z: Z$8} = PathCommandMap;
 
 const tempPoint$2 = {};
 
 const BezierHelper = {
     points(data, originPoints, curve, close) {
         let points = toNumberPoints$1(originPoints);
-        data.push(M$9, points[0], points[1]);
+        data.push(M$a, points[0], points[1]);
         if (curve && points.length > 5) {
             let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
             let ba, cb, d, len = points.length;
@@ -2674,7 +2712,7 @@ const BezierHelper = {
         let startX = x = rotationCos * radiusX * startCos - rotationSin * radiusY * startSin;
         let startY = y = rotationSin * radiusX * startCos + rotationCos * radiusY * startSin;
         let fromX = cx + x, fromY = cy + y;
-        if (data) data.push(data.length ? L$a : M$9, fromX, fromY);
+        if (data) data.push(data.length ? L$a : M$a, fromX, fromY);
         if (setPointBounds) setPoint$4(setPointBounds, fromX, fromY);
         if (setStartPoint) set(setStartPoint, fromX, fromY);
         for (let i = 0; i < parts; i++) {
@@ -2804,7 +2842,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$6, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5} = PathCommandMap;
+const {M: M$9, 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;
 
@@ -2896,10 +2934,10 @@ const PathConvert = {
                 old[i + 1] += x;
                 old[i + 2] += y;
 
-              case M$8:
+              case M$9:
                 x = old[i + 1];
                 y = old[i + 2];
-                data.push(M$8, x, y);
+                data.push(M$9, x, y);
                 i += 3;
                 break;
 
@@ -3086,7 +3124,7 @@ const PathConvert = {
         list.forEach(item => {
             switch (item.name) {
               case "M":
-                data.push(M$8, item.x, item.y);
+                data.push(M$9, item.x, item.y);
                 break;
 
               case "L":
@@ -3125,7 +3163,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$5, X: X$4, G: G$4, F: F$5, O: O$5, P: P$4, U: U$4} = PathCommandMap;
+const {M: M$8, 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;
 
@@ -3138,7 +3176,7 @@ const PathCommandDataHelper = {
         data.length = 0;
     },
     moveTo(data, x, y) {
-        data.push(M$7, x, y);
+        data.push(M$8, x, y);
     },
     lineTo(data, x, y) {
         data.push(L$8, x, y);
@@ -3193,12 +3231,12 @@ const PathCommandDataHelper = {
     },
     drawEllipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         BezierHelper.ellipse(null, x, y, radiusX, radiusY, isNull(rotation) ? 0 : rotation, isNull(startAngle) ? 0 : startAngle, isNull(endAngle) ? 360 : endAngle, anticlockwise, null, null, startPoint);
-        data.push(M$7, startPoint.x, startPoint.y);
+        data.push(M$8, startPoint.x, startPoint.y);
         ellipse$3(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
     },
     drawArc(data, x, y, radius, startAngle, endAngle, anticlockwise) {
         BezierHelper.arc(null, x, y, radius, isNull(startAngle) ? 0 : startAngle, isNull(endAngle) ? 360 : endAngle, anticlockwise, null, null, startPoint);
-        data.push(M$7, startPoint.x, startPoint.y);
+        data.push(M$8, startPoint.x, startPoint.y);
         arc$2(data, x, y, radius, startAngle, endAngle, anticlockwise);
     },
     drawPoints(data, points, curve, close) {
@@ -3300,7 +3338,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$4, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3} = PathCommandMap;
+const {M: M$7, 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");
 
@@ -3312,7 +3350,7 @@ const PathDrawer = {
         while (i < len) {
             command = data[i];
             switch (command) {
-              case M$6:
+              case M$7:
                 drawer.moveTo(data[i + 1], data[i + 2]);
                 i += 3;
                 break;
@@ -3385,7 +3423,7 @@ const PathDrawer = {
     }
 };
 
-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 {M: M$6, 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;
 
@@ -3420,7 +3458,7 @@ const PathBounds = {
                 }
             }
             switch (command) {
-              case M$5:
+              case M$6:
               case L$6:
                 x = data[i + 1];
                 y = data[i + 2];
@@ -3520,7 +3558,7 @@ const PathBounds = {
     }
 };
 
-const {M: M$4, L: L$5, Z: Z$3} = PathCommandMap;
+const {M: M$5, L: L$5, Z: Z$3} = PathCommandMap;
 
 const {getCenterX: getCenterX, getCenterY: getCenterY} = PointHelper;
 
@@ -3535,16 +3573,16 @@ const PathCorner = {
         while (i < len) {
             command = data[i];
             switch (command) {
-              case M$4:
+              case M$5:
                 startX = lastX = data[i + 1];
                 startY = lastY = data[i + 2];
                 i += 3;
                 if (data[i] === L$5) {
                     secondX = data[i + 1];
                     secondY = data[i + 2];
-                    smooth.push(M$4, getCenterX(startX, secondX), getCenterY(startY, secondY));
+                    smooth.push(M$5, getCenterX(startX, secondX), getCenterY(startY, secondY));
                 } else {
-                    smooth.push(M$4, startX, startY);
+                    smooth.push(M$5, startX, startY);
                 }
                 break;
 
@@ -3985,7 +4023,7 @@ const I$1 = ImageManager;
 
 const {IMAGE: IMAGE, create: create$1} = IncrementId;
 
-const {floor: floor$2, max: max$2} = Math;
+const {floor: floor$2, max: max$4} = Math;
 
 class LeaferImage {
     get url() {
@@ -4074,7 +4112,7 @@ class LeaferImage {
             }
             if (data) return data;
         }
-        const canvas = Platform.origin.createCanvas(max$2(floor$2(width + (xGap || 0)), 1), max$2(floor$2(height + (yGap || 0)), 1));
+        const canvas = Platform.origin.createCanvas(max$4(floor$2(width + (xGap || 0)), 1), max$4(floor$2(height + (yGap || 0)), 1));
         const ctx = canvas.getContext("2d");
         if (opacity) ctx.globalAlpha = opacity;
         ctx.imageSmoothingEnabled = smooth === false ? false : true;
@@ -4868,7 +4906,7 @@ const WaitHelper = {
 
 const {getRelativeWorld: getRelativeWorld$1, updateBounds: updateBounds$3} = LeafHelper;
 
-const {toOuterOf: toOuterOf$2, getPoints: getPoints, copy: copy$8} = BoundsHelper;
+const {toOuterOf: toOuterOf$3, getPoints: getPoints, copy: copy$8} = BoundsHelper;
 
 const localContent = "_localContentBounds";
 
@@ -4891,7 +4929,7 @@ class LeafLayout {
         this._renderBounds = bounds;
     }
     get localContentBounds() {
-        toOuterOf$2(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {}));
+        toOuterOf$3(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {}));
         return this[localContent];
     }
     get localStrokeBounds() {
@@ -4901,15 +4939,15 @@ class LeafLayout {
         return this._localRenderBounds || this;
     }
     get worldContentBounds() {
-        toOuterOf$2(this.contentBounds, this.leaf.__world, this[worldContent] || (this[worldContent] = {}));
+        toOuterOf$3(this.contentBounds, this.leaf.__world, this[worldContent] || (this[worldContent] = {}));
         return this[worldContent];
     }
     get worldBoxBounds() {
-        toOuterOf$2(this.boxBounds, this.leaf.__world, this[worldBox] || (this[worldBox] = {}));
+        toOuterOf$3(this.boxBounds, this.leaf.__world, this[worldBox] || (this[worldBox] = {}));
         return this[worldBox];
     }
     get worldStrokeBounds() {
-        toOuterOf$2(this.strokeBounds, this.leaf.__world, this[worldStroke] || (this[worldStroke] = {}));
+        toOuterOf$3(this.strokeBounds, this.leaf.__world, this[worldStroke] || (this[worldStroke] = {}));
         return this[worldStroke];
     }
     get a() {
@@ -5761,14 +5799,14 @@ const {updateMatrix: updateMatrix$3, updateAllMatrix: updateAllMatrix$3} = LeafH
 
 const {updateBounds: updateBounds$2} = BranchHelper;
 
-const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$7} = BoundsHelper;
+const {toOuterOf: toOuterOf$2, copyAndSpread: copyAndSpread$3, copy: copy$7} = BoundsHelper;
 
 const {toBounds: toBounds$1} = PathBounds;
 
 const LeafBounds = {
     __updateWorldBounds() {
         const layout = this.__layout;
-        toOuterOf$1(layout.renderBounds, this.__world, this.__world);
+        toOuterOf$2(layout.renderBounds, this.__world, this.__world);
         if (layout.resized) {
             if (layout.resized === "inner") this.__onUpdateSize();
             if (this.__hasLocalEvent) BoundsEvent.emitLocal(this);
@@ -5824,13 +5862,13 @@ const LeafBounds = {
     __updateLocalBoxBounds() {
         if (this.__hasMotionPath) this.__updateMotionPath();
         if (this.__hasAutoLayout) this.__updateAutoLayout();
-        toOuterOf$1(this.__layout.boxBounds, this.__local, this.__local);
+        toOuterOf$2(this.__layout.boxBounds, this.__local, this.__local);
     },
     __updateLocalStrokeBounds() {
-        toOuterOf$1(this.__layout.strokeBounds, this.__localMatrix, this.__layout.localStrokeBounds);
+        toOuterOf$2(this.__layout.strokeBounds, this.__localMatrix, this.__layout.localStrokeBounds);
     },
     __updateLocalRenderBounds() {
-        toOuterOf$1(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
+        toOuterOf$2(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
     },
     __updateBoxBounds(_secondLayout, _bounds) {
         const b = this.__layout.boxBounds;
@@ -5868,11 +5906,11 @@ const LeafBounds = {
     },
     __updateStrokeBounds(_bounds) {
         const layout = this.__layout;
-        copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+        copyAndSpread$3(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds(_bounds) {
-        const layout = this.__layout;
-        layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$7(layout.renderBounds, layout.strokeBounds);
+        const layout = this.__layout, {renderSpread: renderSpread} = layout;
+        isNumber(renderSpread) && renderSpread <= 0 ? copy$7(layout.renderBounds, layout.strokeBounds) : copyAndSpread$3(layout.renderBounds, layout.boxBounds, renderSpread);
     }
 };
 
@@ -5970,11 +6008,13 @@ const tempScaleData$1 = {};
 
 const {LEAF: LEAF, create: create} = IncrementId;
 
+const {stintSet: stintSet$3} = DataHelper;
+
 const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: multiplyParent$1} = MatrixHelper;
 
-const {toOuterOf: toOuterOf} = BoundsHelper;
+const {toOuterOf: toOuterOf$1} = BoundsHelper;
 
-const {copy: copy$6, move: move$6} = PointHelper;
+const {copy: copy$6, move: move$8} = 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;
 
@@ -6250,8 +6290,9 @@ let Leaf = class Leaf {
             if (!this.__cameraWorld) this.__cameraWorld = {};
             const cameraWorld = this.__cameraWorld, world = this.__world;
             multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
-            toOuterOf(this.__layout.renderBounds, cameraWorld, cameraWorld);
-            cameraWorld.half !== world.half && (cameraWorld.half = world.half);
+            toOuterOf$1(this.__layout.renderBounds, cameraWorld, cameraWorld);
+            stintSet$3(cameraWorld, "half", world.half);
+            stintSet$3(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
             return cameraWorld;
         } else {
             return this.__world;
@@ -6285,7 +6326,7 @@ let Leaf = class Leaf {
     getWorldBounds(inner, relative, change) {
         const matrix = relative ? getRelativeWorld(this, relative) : this.worldTransform;
         const to = change ? inner : {};
-        toOuterOf(inner, matrix, to);
+        toOuterOf$1(inner, matrix, to);
         return to;
     }
     worldToLocal(world, to, distance, relative) {
@@ -6318,7 +6359,7 @@ let Leaf = class Leaf {
     }
     getBoxPointByInner(inner, _relative, _distance, change) {
         const point = change ? inner : Object.assign({}, inner), {x: x, y: y} = this.boxBounds;
-        move$6(point, -x, -y);
+        move$8(point, -x, -y);
         return point;
     }
     getInnerPoint(world, relative, distance, change) {
@@ -6328,7 +6369,7 @@ let Leaf = class Leaf {
     }
     getInnerPointByBox(box, _relative, _distance, change) {
         const point = change ? box : Object.assign({}, box), {x: x, y: y} = this.boxBounds;
-        move$6(point, x, y);
+        move$8(point, x, y);
         return point;
     }
     getInnerPointByLocal(local, _relative, distance, change) {
@@ -6774,7 +6815,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.9.7";
+const version = "1.9.9";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() {
@@ -7199,6 +7240,7 @@ class Renderer {
             usePartRender: true,
             maxFPS: 120
         };
+        this.frames = [];
         this.target = target;
         this.canvas = canvas;
         if (userConfig) this.config = DataHelper.default(userConfig, this.config);
@@ -7351,12 +7393,15 @@ class Renderer {
         const target = this.target;
         if (this.requestTime || !target) return;
         if (target.parentApp) return target.parentApp.requestRender(false);
-        const requestTime = this.requestTime = Date.now();
+        this.requestTime = this.frameTime || Date.now();
         const render = () => {
-            const nowFPS = 1e3 / (Date.now() - requestTime);
+            const nowFPS = 1e3 / ((this.frameTime = Date.now()) - this.requestTime);
             const {maxFPS: maxFPS} = this.config;
-            if (maxFPS && nowFPS > maxFPS - .5) return Platform.requestRender(render);
-            this.FPS = Math.min(120, Math.ceil(nowFPS));
+            if (maxFPS && nowFPS > maxFPS) return Platform.requestRender(render);
+            const {frames: frames} = this;
+            if (frames.length > 30) frames.shift();
+            frames.push(nowFPS);
+            this.FPS = Math.round(frames.reduce((a, b) => a + b, 0) / frames.length);
             this.requestTime = 0;
             this.checkRender();
         };
@@ -8012,39 +8057,41 @@ class CanvasData extends RectData {
     }
 }
 
+const {max: max$3, add: add$1} = FourNumberHelper;
+
 const UIBounds = {
     __updateStrokeSpread() {
-        let width = 0, boxWidth = 0;
+        let spread = 0, boxSpread = 0;
         const data = this.__, {strokeAlign: strokeAlign, __maxStrokeWidth: strokeWidth} = data, box = this.__box;
         if ((data.stroke || data.hitStroke === "all") && strokeWidth && strokeAlign !== "inside") {
-            boxWidth = width = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
+            boxSpread = spread = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
             if (!data.__boxStroke) {
-                const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * width;
+                const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * spread;
                 const storkeCapAddWidth = data.strokeCap === "none" ? 0 : strokeWidth;
-                width += Math.max(miterLimitAddWidth, storkeCapAddWidth);
+                spread += Math.max(miterLimitAddWidth, storkeCapAddWidth);
             }
         }
-        if (data.__useArrow) width += strokeWidth * 5;
+        if (data.__useArrow) spread += strokeWidth * 5;
         if (box) {
-            width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
-            boxWidth = box.__layout.strokeBoxSpread;
+            spread = max$3(spread, box.__layout.strokeSpread = box.__updateStrokeSpread());
+            boxSpread = Math.max(boxSpread, box.__layout.strokeBoxSpread);
         }
-        this.__layout.strokeBoxSpread = boxWidth;
-        return width;
+        this.__layout.strokeBoxSpread = boxSpread;
+        return spread;
     },
     __updateRenderSpread() {
-        let width = 0;
-        const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__;
-        if (shadow) width = Effect.getShadowSpread(this, shadow);
-        if (blur) width = Math.max(width, blur);
-        if (filter) width += Filter.getSpread(filter);
-        if (renderSpread) width += renderSpread;
-        let shapeWidth = width = Math.ceil(width);
-        if (innerShadow) innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
-        if (backgroundBlur) shapeWidth = Math.max(shapeWidth, backgroundBlur);
-        this.__layout.renderShapeSpread = shapeWidth;
-        width += this.__layout.strokeSpread || 0;
-        return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
+        let spread = 0;
+        const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__, {strokeSpread: strokeSpread} = this.__layout, box = this.__box;
+        if (shadow) spread = Effect.getShadowRenderSpread(this, shadow);
+        if (blur) spread = max$3(spread, blur);
+        if (filter) spread = add$1(spread, Filter.getSpread(filter));
+        if (renderSpread) spread = add$1(spread, renderSpread);
+        if (strokeSpread) spread = add$1(spread, strokeSpread);
+        let shapeSpread = spread;
+        if (innerShadow) shapeSpread = max$3(shapeSpread, Effect.getInnerShadowSpread(this, innerShadow));
+        if (backgroundBlur) shapeSpread = max$3(shapeSpread, backgroundBlur);
+        this.__layout.renderShapeSpread = shapeSpread;
+        return box ? max$3(box.__updateRenderSpread(), spread) : spread;
     }
 };
 
@@ -9355,7 +9402,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
 
 Canvas = __decorate([ registerUI() ], Canvas);
 
-const {copyAndSpread: copyAndSpread$1, includes: includes, spread: spread, setList: setList} = BoundsHelper;
+const {copyAndSpread: copyAndSpread$2, includes: includes, spread: spread, setList: setList} = BoundsHelper;
 
 let Text = class Text extends UI {
     get __tag() {
@@ -9402,13 +9449,13 @@ let Text = class Text extends UI {
         if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
     }
     __updateRenderSpread() {
-        let width = super.__updateRenderSpread();
-        if (!width) width = this.isOverflow ? 1 : 0;
-        return width;
+        let spread = super.__updateRenderSpread();
+        if (!spread) spread = this.isOverflow ? 1 : 0;
+        return spread;
     }
     __updateRenderBounds() {
         const {renderBounds: renderBounds, renderSpread: renderSpread} = this.__layout;
-        copyAndSpread$1(renderBounds, this.__.__textBoxBounds, renderSpread);
+        copyAndSpread$2(renderBounds, this.__.__textBoxBounds, renderSpread);
         if (this.__box) this.__box.__layout.renderBounds = renderBounds;
     }
     __updateChange() {
@@ -9834,9 +9881,9 @@ let DragEvent = class DragEvent extends PointerEvent {
     static setData(data) {
         this.data = data;
     }
-    static getValidMove(leaf, start, total, checkLimit = true) {
-        const move = leaf.getLocalPoint(total, null, true);
-        PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
+    static getValidMove(leaf, localStart, worldTotal, checkLimit = true) {
+        const move = leaf.getLocalPoint(worldTotal, null, true);
+        PointHelper.move(move, localStart.x - leaf.x, localStart.y - leaf.y);
         if (checkLimit) this.limitMove(leaf, move);
         DragBoundsHelper.axisMove(leaf, move);
         return move;
@@ -10866,8 +10913,8 @@ ui$5.__updateHitCanvas = function() {
     if (isHitPixel) {
         const {renderBounds: renderBounds} = this.__layout;
         const size = Platform.image.hitCanvasSize;
-        const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
-        const {x: x, y: y, width: width, height: height} = tempBounds$1.set(renderBounds).scale(scale);
+        const scale = h.hitScale = tempBounds$2.set(0, 0, size, size).getFitMatrix(renderBounds).a;
+        const {x: x, y: y, width: width, height: height} = tempBounds$2.set(renderBounds).scale(scale);
         h.resize({
             width: width,
             height: height,
@@ -10964,8 +11011,8 @@ canvas$1.hitStroke = function(point, strokeWidth) {
 canvas$1.hitPixel = function(radiusPoint, offset, scale = 1) {
     let {x: x, y: y, radiusX: radiusX, radiusY: radiusY} = radiusPoint;
     if (offset) x -= offset.x, y -= offset.y;
-    tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-    const {data: data} = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+    tempBounds$2.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+    const {data: data} = this.context.getImageData(tempBounds$2.x, tempBounds$2.y, tempBounds$2.width || 1, tempBounds$2.height || 1);
     for (let i = 0, len = data.length; i < len; i += 4) {
         if (data[i + 3] > 0) return true;
     }
@@ -11165,24 +11212,29 @@ function drawOutside(stroke, ui, canvas) {
     }
 }
 
-const {getSpread: getSpread, getOuterOf: getOuterOf, getByMove: getByMove, getIntersectData: getIntersectData} = BoundsHelper;
+const {getSpread: getSpread, copyAndSpread: copyAndSpread$1, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$7, getIntersectData: getIntersectData} = BoundsHelper;
+
+const tempBounds$1 = {};
 
 function shape(ui, current, options) {
     const canvas = current.getSameCanvas();
-    const nowWorld = ui.__nowWorld, currentBounds = current.bounds;
-    let bounds, matrix, fitMatrix, shapeBounds, worldCanvas;
+    const currentBounds = current.bounds, nowWorld = ui.__nowWorld, layout = ui.__layout;
+    const nowWorldShapeBounds = ui.__nowWorldShapeBounds || (ui.__nowWorldShapeBounds = {});
+    toOuterOf(layout.strokeSpread ? (copyAndSpread$1(tempBounds$1, layout.boxBounds, layout.strokeSpread), 
+    tempBounds$1) : layout.boxBounds, nowWorld, nowWorldShapeBounds);
+    let bounds, renderBounds, matrix, fitMatrix, shapeBounds, worldCanvas;
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
-    if (currentBounds.includes(nowWorld)) {
+    if (currentBounds.includes(nowWorldShapeBounds)) {
         worldCanvas = canvas;
-        bounds = shapeBounds = nowWorld;
+        bounds = shapeBounds = nowWorldShapeBounds;
+        renderBounds = nowWorld;
     } else {
-        const {renderShapeSpread: spread} = ui.__layout;
         let worldClipBounds;
         if (Platform.fullImageShadow) {
-            worldClipBounds = nowWorld;
+            worldClipBounds = nowWorldShapeBounds;
         } else {
-            const spreadBounds = spread ? getSpread(currentBounds, scaleX === scaleY ? spread * scaleX : [ spread * scaleY, spread * scaleX ]) : currentBounds;
-            worldClipBounds = getIntersectData(spreadBounds, nowWorld);
+            const spreadBounds = layout.renderShapeSpread ? getSpread(currentBounds, FourNumberHelper.swapAndScale(layout.renderShapeSpread, scaleX, scaleY)) : currentBounds;
+            worldClipBounds = getIntersectData(spreadBounds, nowWorldShapeBounds);
         }
         fitMatrix = currentBounds.getFitMatrix(worldClipBounds);
         let {a: fitScaleX, d: fitScaleY} = fitMatrix;
@@ -11192,8 +11244,10 @@ function shape(ui, current, options) {
             scaleX *= fitScaleX;
             scaleY *= fitScaleY;
         }
-        shapeBounds = getOuterOf(nowWorld, fitMatrix);
+        shapeBounds = getOuterOf(nowWorldShapeBounds, fitMatrix);
         bounds = getByMove(shapeBounds, -fitMatrix.e, -fitMatrix.f);
+        renderBounds = getOuterOf(nowWorld, fitMatrix);
+        move$7(renderBounds, -fitMatrix.e, -fitMatrix.f);
         const userMatrix = options.matrix;
         if (userMatrix) {
             matrix = new Matrix(fitMatrix);
@@ -11212,6 +11266,7 @@ function shape(ui, current, options) {
         matrix: matrix,
         fitMatrix: fitMatrix,
         bounds: bounds,
+        renderBounds: renderBounds,
         worldCanvas: worldCanvas,
         shapeBounds: shapeBounds,
         scaleX: scaleX,
@@ -11315,7 +11370,7 @@ const PaintModule = {
     shape: shape
 };
 
-let origin$1 = {}, tempMatrix = getMatrixData();
+let origin$1 = {}, tempMatrix$1 = getMatrixData();
 
 const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate$2, skew: skewHelper} = MatrixHelper;
 
@@ -11330,12 +11385,12 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     data.transform = transform;
 }
 
-function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY) {
     const transform = get$3();
     layout$3(transform, box, x, y, scaleX, scaleY, rotation, skew);
-    if (clipSize) {
-        tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
-        multiplyParent(transform, tempMatrix);
+    if (clipScaleX) {
+        tempMatrix$1.a = clipScaleX, tempMatrix$1.d = clipScaleY;
+        multiplyParent(transform, tempMatrix$1);
     }
     data.transform = transform;
 }
@@ -11436,7 +11491,12 @@ function getPatternData(paint, box, image) {
 
       case "normal":
       case "clip":
-        if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
+        if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) {
+            let clipScaleX, clipScaleY;
+            if (clipSize) clipScaleX = box.width / clipSize.width, clipScaleY = box.height / clipSize.height;
+            clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
+            if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : scaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
+        }
         break;
 
       case "repeat":
@@ -11594,7 +11654,7 @@ function ignoreRender(ui, value) {
 
 const {get: get$1, scale: scale$2, copy: copy$4} = MatrixHelper;
 
-const {floor: floor$1, ceil: ceil$1, max: max$1, abs: abs$4} = Math;
+const {floor: floor$1, ceil: ceil$1, max: max$2, abs: abs$4} = Math;
 
 function createPattern(ui, paint, pixelRatio) {
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
@@ -11643,8 +11703,8 @@ function createPattern(ui, paint, pixelRatio) {
         if (transform || scaleX !== 1 || scaleY !== 1) {
             const canvasWidth = width + (xGap || 0);
             const canvasHeight = height + (yGap || 0);
-            scaleX /= canvasWidth / max$1(floor$1(canvasWidth), 1);
-            scaleY /= canvasHeight / max$1(floor$1(canvasHeight), 1);
+            scaleX /= canvasWidth / max$2(floor$1(canvasWidth), 1);
+            scaleY /= canvasHeight / max$2(floor$1(canvasHeight), 1);
             if (!imageMatrix) {
                 imageMatrix = get$1();
                 if (transform) copy$4(imageMatrix, transform);
@@ -11670,17 +11730,15 @@ function checkImage(ui, canvas, paint, allowDraw) {
         if (allowDraw) {
             if (data.repeat) {
                 allowDraw = false;
-            } else {
-                if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || Export.running)) {
-                    let {width: width, height: height} = data;
-                    width *= scaleX * pixelRatio;
-                    height *= scaleY * pixelRatio;
-                    if (data.scaleX) {
-                        width *= data.scaleX;
-                        height *= data.scaleY;
-                    }
-                    allowDraw = width * height > Platform.image.maxCacheSize;
+            } else if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || Export.running)) {
+                let {width: width, height: height} = data;
+                width *= scaleX * pixelRatio;
+                height *= scaleY * pixelRatio;
+                if (data.scaleX) {
+                    width *= data.scaleX;
+                    height *= data.scaleY;
                 }
+                allowDraw = width * height > Platform.image.maxCacheSize;
             }
         }
         if (allowDraw) {
@@ -11860,75 +11918,82 @@ const PaintGradientModule = {
     getTransform: getTransform
 };
 
-const {copy: copy$3, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper;
+const {copy: copy$3, move: move$6, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max$1} = Math;
 
-const tempBounds = {};
+const tempBounds = {}, tempMatrix = new Matrix;
 
 const offsetOutBounds$1 = {};
 
 function shadow$1(ui, current, shape) {
-    let copyBounds, spreadScale;
-    const {__nowWorld: nowWorld, __layout: __layout} = ui;
+    let copyBounds, transform;
+    const {__nowWorld: nowWorld} = ui;
     const {shadow: shadow} = ui.__;
-    const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
+    const {worldCanvas: worldCanvas, bounds: bounds, renderBounds: renderBounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
     const other = current.getSameCanvas();
     const end = shadow.length - 1;
-    toOffsetOutBounds$1(bounds, offsetOutBounds$1);
+    toOffsetOutBounds$1(bounds, offsetOutBounds$1, renderBounds);
     shadow.forEach((item, index) => {
         let otherScale = 1;
         if (item.scaleFixed) {
             const sx = Math.abs(nowWorld.scaleX);
             if (sx > 1) otherScale = 1 / sx;
         }
-        other.setWorldShadow(offsetOutBounds$1.offsetX + item.x * scaleX * otherScale, offsetOutBounds$1.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale, ColorConvert.string(item.color));
-        spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
-        drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
-        copyBounds = bounds;
+        other.setWorldShadow(offsetOutBounds$1.offsetX + (item.x || 0) * scaleX * otherScale, offsetOutBounds$1.offsetY + (item.y || 0) * scaleY * otherScale, (item.blur || 0) * scaleX * otherScale, ColorConvert.string(item.color));
+        transform = Effect.getShadowTransform(ui, other, shape, item, offsetOutBounds$1, otherScale);
+        if (transform) other.setTransform(transform);
+        drawWorldShadow(other, offsetOutBounds$1, shape);
+        if (transform) other.resetTransform();
+        copyBounds = renderBounds;
         if (item.box) {
             other.restore();
             other.save();
             if (worldCanvas) {
-                other.copyWorld(other, bounds, nowWorld, "copy");
+                other.copyWorld(other, renderBounds, nowWorld, "copy");
                 copyBounds = nowWorld;
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
         }
-        if (Effect.isTransformShadow(item)) Effect.renderTransformShadow(ui, current, other, copyBounds, item); else LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
+        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end) other.clearWorld(copyBounds);
     });
     other.recycle(copyBounds);
 }
 
-function getShadowSpread(_ui, shadow) {
-    let width = 0;
-    shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
-    return width;
+function getShadowRenderSpread(_ui, shadow) {
+    let top = 0, right = 0, bottom = 0, left = 0, x, y, spread, blur;
+    shadow.forEach(item => {
+        x = item.x || 0, y = item.y || 0, spread = item.spread || 0, blur = (item.blur || 0) * 1.5;
+        top = max$1(top, spread + blur - y);
+        right = max$1(right, spread + blur + x);
+        bottom = max$1(bottom, spread + blur + y);
+        left = max$1(left, spread + blur - x);
+    });
+    return top === right && right === bottom && bottom === left ? top : [ top, right, bottom, left ];
 }
 
-function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
-    const {bounds: bounds, shapeBounds: shapeBounds} = shape;
+function getShadowTransform(ui, canvas, _shape, shadow, outBounds, otherScale, isInnerShaodw) {
+    if (shadow.spread) {
+        const spreadScale = 1 + shadow.spread * 2 / ui.__layout.strokeBounds.width * otherScale * (isInnerShaodw ? -1 : 1);
+        tempMatrix.set().scaleOfOuter({
+            x: (outBounds.x + outBounds.width / 2) * canvas.pixelRatio,
+            y: (outBounds.y + outBounds.height / 2) * canvas.pixelRatio
+        }, spreadScale);
+        return tempMatrix;
+    }
+    return undefined;
+}
+
+function drawWorldShadow(canvas, outBounds, shape) {
+    const {shapeBounds: shapeBounds} = shape;
+    let from, to;
     if (Platform.fullImageShadow) {
         copy$3(tempBounds, canvas.bounds);
-        tempBounds.x += outBounds.x - shapeBounds.x;
-        tempBounds.y += outBounds.y - shapeBounds.y;
-        if (spreadScale) {
-            const {fitMatrix: fitMatrix} = shape;
-            tempBounds.x -= (bounds.x + (fitMatrix ? fitMatrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
-            tempBounds.y -= (bounds.y + (fitMatrix ? fitMatrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
-            tempBounds.width *= spreadScale;
-            tempBounds.height *= spreadScale;
-        }
-        canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
+        move$6(tempBounds, outBounds.x - shapeBounds.x, outBounds.y - shapeBounds.y);
+        from = canvas.bounds, to = tempBounds;
     } else {
-        if (spreadScale) {
-            copy$3(tempBounds, outBounds);
-            tempBounds.x -= outBounds.width / 2 * (spreadScale - 1);
-            tempBounds.y -= outBounds.height / 2 * (spreadScale - 1);
-            tempBounds.width *= spreadScale;
-            tempBounds.height *= spreadScale;
-        }
-        canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds);
+        from = shapeBounds, to = outBounds;
     }
+    canvas.copyWorld(shape.canvas, from, to);
 }
 
 const {toOffsetOutBounds: toOffsetOutBounds} = BoundsHelper;
@@ -11936,13 +12001,13 @@ const {toOffsetOutBounds: toOffsetOutBounds} = BoundsHelper;
 const offsetOutBounds = {};
 
 function innerShadow(ui, current, shape) {
-    let copyBounds, spreadScale;
-    const {__nowWorld: nowWorld, __layout: __layout} = ui;
+    let copyBounds, transform;
+    const {__nowWorld: nowWorld} = ui;
     const {innerShadow: innerShadow} = ui.__;
-    const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
+    const {worldCanvas: worldCanvas, bounds: bounds, renderBounds: renderBounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
     const other = current.getSameCanvas();
     const end = innerShadow.length - 1;
-    toOffsetOutBounds(bounds, offsetOutBounds);
+    toOffsetOutBounds(bounds, offsetOutBounds, renderBounds);
     innerShadow.forEach((item, index) => {
         let otherScale = 1;
         if (item.scaleFixed) {
@@ -11950,17 +12015,18 @@ function innerShadow(ui, current, shape) {
             if (sx > 1) otherScale = 1 / sx;
         }
         other.save();
-        other.setWorldShadow(offsetOutBounds.offsetX + item.x * scaleX * otherScale, offsetOutBounds.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale);
-        spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
-        drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
+        other.setWorldShadow(offsetOutBounds.offsetX + (item.x || 0) * scaleX * otherScale, offsetOutBounds.offsetY + (item.y || 0) * scaleY * otherScale, (item.blur || 0) * scaleX * otherScale);
+        transform = Effect.getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true);
+        if (transform) other.setTransform(transform);
+        drawWorldShadow(other, offsetOutBounds, shape);
         other.restore();
         if (worldCanvas) {
-            other.copyWorld(other, bounds, nowWorld, "copy");
+            other.copyWorld(other, renderBounds, nowWorld, "copy");
             other.copyWorld(worldCanvas, nowWorld, nowWorld, "source-out");
             copyBounds = nowWorld;
         } else {
             other.copyWorld(shape.canvas, shapeBounds, bounds, "source-out");
-            copyBounds = bounds;
+            copyBounds = renderBounds;
         }
         other.fillWorld(copyBounds, ColorConvert.string(item.color), "source-in");
         LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
@@ -11969,6 +12035,8 @@ function innerShadow(ui, current, shape) {
     other.recycle(copyBounds);
 }
 
+const getInnerShadowSpread = getShadowRenderSpread;
+
 function blur(ui, current, origin) {
     const {blur: blur} = ui.__;
     origin.setWorldBlur(blur * ui.__nowWorld.a);
@@ -11983,10 +12051,12 @@ const EffectModule = {
     innerShadow: innerShadow,
     blur: blur,
     backgroundBlur: backgroundBlur,
-    getShadowSpread: getShadowSpread,
+    getShadowRenderSpread: getShadowRenderSpread,
+    getShadowTransform: getShadowTransform,
     isTransformShadow(_shadow) {
         return undefined;
-    }
+    },
+    getInnerShadowSpread: getInnerShadowSpread
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
@@ -12003,6 +12073,7 @@ Group.prototype.__renderMask = function(canvas, options) {
                 maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, true);
                 maskCanvas = contentCanvas = null;
             }
+            if (mask === "clipping" || mask === "clipping-path") excludeRenderBounds(child, options) || child.__render(canvas, options);
             maskOpacity = child.__.opacity;
             usedGrayscaleAlpha = false;
             if (mask === "path" || mask === "clipping-path") {
@@ -12020,7 +12091,6 @@ Group.prototype.__renderMask = function(canvas, options) {
                 if (!contentCanvas) contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (mask === "clipping" || mask === "clipping-path") excludeRenderBounds(child, options) || child.__render(canvas, options);
             continue;
         }
         const childBlendMode = maskOpacity === 1 && child.__.__blendMode;
@@ -12582,6 +12652,7 @@ const TextConvertModule = {
 };
 
 function string(color, opacity) {
+    if (!color) return "#000";
     const doOpacity = isNumber(opacity) && opacity < 1;
     if (isString(color)) {
         if (doOpacity && ColorConvert.object) color = ColorConvert.object(color); else return color;
@@ -12657,10 +12728,6 @@ function targetAttr(fn) {
                     if (t.config) {
                         const isSelect = key === "target";
                         if (isSelect) {
-                            t.setDimOthers(false);
-                            t.setBright(false);
-                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
-                            if (t.single) t.element.syncEventer = null;
                             const {beforeSelect: beforeSelect} = t.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({
@@ -12668,6 +12735,10 @@ function targetAttr(fn) {
                                 });
                                 if (isObject(check)) value = check; else if (check === false) return;
                             }
+                            t.setDimOthers(false);
+                            t.setBright(false);
+                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
+                            if (t.single) t.element.syncEventer = null;
                         }
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                         if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
@@ -12853,11 +12924,12 @@ class EditSelect extends Group {
         return !!this.originList;
     }
     get running() {
-        const {editor: editor} = this;
-        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && this.app.mode === "normal";
+        const {editor: editor, app: app} = this;
+        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && (app && app.mode === "normal");
     }
     get isMoveMode() {
-        return this.app && this.app.interaction.moveMode;
+        const {app: app} = this;
+        return app && app.interaction.moveMode;
     }
     constructor(editor) {
         super();
@@ -12920,12 +12992,12 @@ class EditSelect extends Group {
     onTap(e) {
         if (e.multiTouch) return;
         const {editor: editor} = this;
-        const {select: select} = editor.mergeConfig;
+        const {select: select, selectKeep: selectKeep} = editor.mergeConfig;
         if (select === "tap") this.checkAndSelect(e); else if (this.waitSelect) this.waitSelect();
         if (this.needRemoveItem) {
             editor.removeItem(this.needRemoveItem);
         } else if (this.isMoveMode) {
-            editor.target = null;
+            if (!selectKeep) editor.target = null;
         }
     }
     checkAndSelect(e) {
@@ -12940,7 +13012,7 @@ class EditSelect extends Group {
                     editor.target = find;
                 }
             } else if (this.allow(e.target)) {
-                if (!this.isHoldMultipleSelectKey(e)) editor.target = null;
+                if (!this.isHoldMultipleSelectKey(e) && !this.editor.mergedConfig.selectKeep) editor.target = null;
             }
         }
     }
@@ -13059,91 +13131,95 @@ const {toPoint: toPoint} = AroundHelper;
 const {within: within$3, sign: sign$1} = MathHelper;
 
 const EditDataHelper = {
-    getScaleData(target, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
+    getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
         let align, origin = {}, scaleX = 1, scaleY = 1;
         const {boxBounds: boxBounds, widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldBoxBounds: worldBoxBounds} = target;
         const {width: width, height: height} = startBounds;
-        if (around) {
-            totalMove.x *= 2;
-            totalMove.y *= 2;
-        }
         const originChangedScaleX = target.scaleX / startBounds.scaleX;
         const originChangedScaleY = target.scaleY / startBounds.scaleY;
         const signX = sign$1(originChangedScaleX);
         const signY = sign$1(originChangedScaleY);
         const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
         const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
-        totalMove.x *= scaleMode ? originChangedScaleX : signX;
-        totalMove.y *= scaleMode ? originChangedScaleY : signY;
-        const topScale = (-totalMove.y + height) / height;
-        const rightScale = (totalMove.x + width) / width;
-        const bottomScale = (totalMove.y + height) / height;
-        const leftScale = (-totalMove.x + width) / width;
-        switch (direction) {
-          case top$1:
-            scaleY = topScale;
-            align = "bottom";
-            break;
+        if (isNumber(totalMoveOrScale)) {
+            scaleX = scaleY = Math.sqrt(totalMoveOrScale);
+        } else {
+            if (around) {
+                totalMoveOrScale.x *= 2;
+                totalMoveOrScale.y *= 2;
+            }
+            totalMoveOrScale.x *= scaleMode ? originChangedScaleX : signX;
+            totalMoveOrScale.y *= scaleMode ? originChangedScaleY : signY;
+            const topScale = (-totalMoveOrScale.y + height) / height;
+            const rightScale = (totalMoveOrScale.x + width) / width;
+            const bottomScale = (totalMoveOrScale.y + height) / height;
+            const leftScale = (-totalMoveOrScale.x + width) / width;
+            switch (direction) {
+              case top$1:
+                scaleY = topScale;
+                align = "bottom";
+                break;
 
-          case right$2:
-            scaleX = rightScale;
-            align = "left";
-            break;
+              case right$2:
+                scaleX = rightScale;
+                align = "left";
+                break;
 
-          case bottom$1:
-            scaleY = bottomScale;
-            align = "top";
-            break;
+              case bottom$1:
+                scaleY = bottomScale;
+                align = "top";
+                break;
 
-          case left$2:
-            scaleX = leftScale;
-            align = "right";
-            break;
+              case left$2:
+                scaleX = leftScale;
+                align = "right";
+                break;
 
-          case topLeft$1:
-            scaleY = topScale;
-            scaleX = leftScale;
-            align = "bottom-right";
-            break;
+              case topLeft$1:
+                scaleY = topScale;
+                scaleX = leftScale;
+                align = "bottom-right";
+                break;
 
-          case topRight$1:
-            scaleY = topScale;
-            scaleX = rightScale;
-            align = "bottom-left";
-            break;
+              case topRight$1:
+                scaleY = topScale;
+                scaleX = rightScale;
+                align = "bottom-left";
+                break;
 
-          case bottomRight:
-            scaleY = bottomScale;
-            scaleX = rightScale;
-            align = "top-left";
-            break;
+              case bottomRight:
+                scaleY = bottomScale;
+                scaleX = rightScale;
+                align = "top-left";
+                break;
 
-          case bottomLeft:
-            scaleY = bottomScale;
-            scaleX = leftScale;
-            align = "top-right";
-        }
-        if (lockRatio) {
-            if (lockRatio === "corner" && direction % 2) {
-                lockRatio = false;
-            } else {
-                let scale;
-                switch (direction) {
-                  case top$1:
-                  case bottom$1:
-                    scale = scaleY;
-                    break;
+              case bottomLeft:
+                scaleY = bottomScale;
+                scaleX = leftScale;
+                align = "top-right";
+            }
+            if (lockRatio) {
+                if (lockRatio === "corner" && direction % 2) {
+                    lockRatio = false;
+                } else {
+                    let scale;
+                    switch (direction) {
+                      case top$1:
+                      case bottom$1:
+                        scale = scaleY;
+                        break;
 
-                  case left$2:
-                  case right$2:
-                    scale = scaleX;
-                    break;
+                      case left$2:
+                      case right$2:
+                        scale = scaleX;
+                        break;
 
-                  default:
-                    scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                      default:
+                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                    }
+                    scaleX = scaleX < 0 ? -scale : scale;
+                    scaleY = scaleY < 0 ? -scale : scale;
                 }
-                scaleX = scaleX < 0 ? -scale : scale;
-                scaleY = scaleY < 0 ? -scale : scale;
             }
         }
         const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
@@ -13431,6 +13507,9 @@ class EditBox extends Group {
         const {moveable: moveable, resizeable: resizeable, rotateable: rotateable} = this.mergeConfig;
         return isString(moveable) || isString(resizeable) || isString(rotateable);
     }
+    get canDragLimitAnimate() {
+        return this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds;
+    }
     constructor(editor) {
         super();
         this.view = new Group;
@@ -13664,10 +13743,9 @@ class EditBox extends Group {
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
-        const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
+        const {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = this.mergeConfig;
         if (pointType === "move") {
             moveable && (this.moving = true);
-            editor.opacity = hideOnMove ? 0 : 1;
         } else {
             if (pointType.includes("rotate") || this.isHoldRotateKey(e) || !resizeable) {
                 rotateable && (this.rotating = true);
@@ -13676,23 +13754,7 @@ class EditBox extends Group {
             } else if (pointType === "resize") resizeable && (this.resizing = true);
             if (pointType === "skew") skewable && (this.skewing = true);
         }
-        dragStartData.x = e.x;
-        dragStartData.y = e.y;
-        dragStartData.point = {
-            x: target.x,
-            y: target.y
-        };
-        dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
-        dragStartData.rotation = target.rotation;
-        if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = editor.leafList.keys;
-    }
-    onDragEnd(e) {
-        if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
-        this.dragPoint = null;
-        this.resetDoing();
-        const {pointType: pointType} = e.current;
-        if (pointType === "move") this.editor.opacity = 1;
-        if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = null;
+        this.onTransformStart(e);
     }
     onDrag(e) {
         const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
@@ -13707,37 +13769,59 @@ class EditBox extends Group {
         }
         updatePointCursor(this, e);
     }
-    resetDoing() {
-        if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+    onDragEnd(e) {
+        this.onTransformEnd(e);
+        this.dragPoint = null;
+    }
+    onTransformStart(e) {
+        if (this.canUse) {
+            if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1;
+            if (this.resizing) ResizeEvent.resizingKeys = this.editor.leafList.keys;
+            const {dragStartData: dragStartData, target: target} = this;
+            dragStartData.x = e.x;
+            dragStartData.y = e.y;
+            dragStartData.totalOffset = getPointData();
+            dragStartData.point = {
+                x: target.x,
+                y: target.y
+            };
+            dragStartData.bounds = Object.assign({}, target.getLayoutBounds("box", "local"));
+            dragStartData.rotation = target.rotation;
+        }
+    }
+    onTransformEnd(e) {
+        if (this.canUse) {
+            if (this.canDragLimitAnimate && (e instanceof DragEvent || e instanceof MoveEvent)) this.transformTool.onMove(e);
+            if (this.resizing) ResizeEvent.resizingKeys = null;
+            this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+            this.editor.opacity = 1;
+            this.update();
+        }
     }
     onMove(e) {
         if (this.canGesture && e.moveType !== "drag") {
             e.stop();
-            if (isString(this.mergeConfig.moveable)) {
+            if (isString(this.mergedConfig.moveable)) {
                 this.gesturing = this.moving = true;
-                this.transformTool.onMove(e);
+                e.type === MoveEvent.START ? this.onTransformStart(e) : this.transformTool.onMove(e);
             }
         }
     }
-    onMoveEnd(e) {
-        if (this.moving) this.transformTool.onMove(e);
-        this.resetDoing();
-    }
     onScale(e) {
         if (this.canGesture) {
             e.stop();
-            if (isString(this.mergeConfig.resizeable)) {
+            if (isString(this.mergedConfig.resizeable)) {
                 this.gesturing = this.resizing = true;
-                this.transformTool.onScale(e);
+                e.type === ZoomEvent.START ? this.onTransformStart(e) : this.transformTool.onScale(e);
             }
         }
     }
     onRotate(e) {
         if (this.canGesture) {
             e.stop();
-            if (isString(this.mergeConfig.rotateable)) {
+            if (isString(this.mergedConfig.rotateable)) {
                 this.gesturing = this.rotating = true;
-                this.transformTool.onRotate(e);
+                e.type === RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e);
             }
         }
     }
@@ -13750,8 +13834,7 @@ class EditBox extends Group {
         updatePointCursor(this, e);
     }
     onArrow(e) {
-        const {editor: editor, transformTool: transformTool} = this;
-        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
+        if (this.canUse && this.mergeConfig.keyEvent) {
             let x = 0, y = 0;
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
@@ -13770,7 +13853,7 @@ class EditBox extends Group {
               case "ArrowRight":
                 x = distance;
             }
-            if (x || y) transformTool.move(x, y);
+            if (x || y) this.transformTool.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -13811,7 +13894,7 @@ class EditBox extends Group {
         const {rect: rect, editor: editor, __eventIds: events} = this;
         events.push(rect.on_([ [ 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.onMoveEnd, 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.START, MoveEvent.BEFORE_MOVE ], this.onMove, this, true ], [ [ ZoomEvent.START, ZoomEvent.BEFORE_ZOOM ], this.onScale, this, true ], [ [ RotateEvent.START, RotateEvent.BEFORE_ROTATE ], this.onRotate, this, true ], [ [ MoveEvent.END, ZoomEvent.END, RotateEvent.END ], this.onTransformEnd, this ] ]));
         });
     }
     __removeListenEvents() {
@@ -14209,56 +14292,61 @@ class TransformTool {
         const isMoveEnd = e.type === MoveEvent.END || e.type === DragEvent.END;
         const axisDrag = isString(target.draggable);
         const checkLimitMove = !dragLimitAnimate || isMoveEnd || axisDrag;
+        const total = {
+            x: e.totalX,
+            y: e.totalY
+        };
         if (e instanceof MoveEvent) {
-            move = e.getLocalMove(target);
-            if (checkLimitMove) DragEvent.limitMove(target, move);
-        } else {
-            const total = {
-                x: e.totalX,
-                y: e.totalY
-            };
-            if (e.shiftKey) {
-                if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0; else total.x = 0;
-            }
-            move = DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
+            PointHelper.move(total, target.getWorldPointByLocal(dragStartData.totalOffset, null, true));
+        }
+        if (e.shiftKey) {
+            if (Math.abs(total.x) > Math.abs(total.y)) total.y = 0; else total.x = 0;
         }
+        move = DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove);
         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;
-        let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig;
+        let {around: around, lockRatio: lockRatio, flipable: flipable, editSize: editSize} = mergeConfig, totalMove;
         if (e instanceof ZoomEvent) {
-            this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
+            around = target.getBoxPoint(e);
+            totalMove = e.totalScale;
         } else {
-            const {direction: direction} = e.current;
-            if (e.shiftKey || target.lockRatio) lockRatio = true;
-            const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale");
-            if (this.editTool && this.editTool.onScaleWithDrag) {
-                data.drag = e;
-                this.scaleWithDrag(data);
-            } else {
-                this.scaleOf(data.origin, data.scaleX, data.scaleY);
-            }
+            totalMove = e.getInnerTotal(target);
+        }
+        const {direction: direction} = e.current;
+        if (e.shiftKey || target.lockRatio) lockRatio = true;
+        const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, totalMove, lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === "scale");
+        const targetX = target.x, targetY = target.y;
+        if (e instanceof DragEvent && this.editTool && this.editTool.onScaleWithDrag) {
+            data.drag = e;
+            this.scaleWithDrag(data);
+        } else {
+            this.scaleOf(data.origin, data.scaleX, data.scaleY);
         }
+        PointHelper.move(dragStartData.totalOffset, target.x - targetX, target.y - targetY);
     }
     onRotate(e) {
         const {target: target, mergeConfig: mergeConfig, dragStartData: dragStartData} = this.editBox;
-        const {around: around, rotateAround: rotateAround, rotateGap: rotateGap} = mergeConfig;
+        const {around: around, rotateAround: rotateAround, rotateGap: rotateGap, diagonalRotateKey: diagonalRotateKey} = mergeConfig;
         const {direction: direction} = e.current;
         let origin, rotation;
         if (e instanceof RotateEvent) {
             rotation = e.rotation;
             origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
         } else {
-            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : rotateAround || target.around || target.origin || around || "center");
+            const isDiagonalRotate = diagonalRotateKey ? e.isHoldKeys(diagonalRotateKey) : e.shiftKey;
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, isDiagonalRotate ? null : rotateAround || target.around || target.origin || around || "center");
             rotation = dragStartData.rotation + data.rotation - target.rotation;
             origin = data.origin;
         }
         rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
         if (!rotation) return;
+        const targetX = target.x, targetY = target.y;
         this.rotateOf(origin, rotation);
+        PointHelper.move(dragStartData.totalOffset, target.x - targetX, target.y - targetY);
     }
     onSkew(e) {
         const {target: target, mergeConfig: mergeConfig} = this.editBox;
@@ -15001,7 +15089,7 @@ let LineEditTool = class LineEditTool extends EditTool {
 
 LineEditTool = __decorate([ registerEditTool() ], LineEditTool);
 
-const {M: M$3, L: L$3, C: C$3, Q: Q$2, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$1, O: O$2, P: P$1, U: U$1} = PathCommandMap;
+const {M: M$4, L: L$3, C: C$3, Q: Q$2, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$1, O: O$2, P: P$1, U: U$1} = PathCommandMap;
 
 const PathScaler = {
     scale(data, scaleX, scaleY) {
@@ -15011,7 +15099,7 @@ const PathScaler = {
         while (i < len) {
             command = data[i];
             switch (command) {
-              case M$3:
+              case M$4:
               case L$3:
                 scalePoints(data, scaleX, scaleY, i, 1);
                 i += 3;
@@ -15465,28 +15553,24 @@ let TextEditor = class TextEditor extends InnerEditor {
         const data = text.__;
         if (data.__autoWidth) {
             width += 20;
-            if (data.autoSizeAlign) {
-                switch (data.textAlign) {
-                  case "center":
-                    offsetX = -width / 2;
-                    break;
+            switch (data.textAlign) {
+              case "center":
+                offsetX = data.autoSizeAlign ? -width / 2 : -10;
+                break;
 
-                  case "right":
-                    offsetX = -width;
-                }
+              case "right":
+                offsetX = data.autoSizeAlign ? -width : -20;
             }
         }
         if (data.__autoHeight) {
             height += 20;
-            if (data.autoSizeAlign) {
-                switch (data.verticalAlign) {
-                  case "middle":
-                    offsetY = -height / 2;
-                    break;
+            switch (data.verticalAlign) {
+              case "middle":
+                offsetY = data.autoSizeAlign ? -height / 2 : -10;
+                break;
 
-                  case "bottom":
-                    offsetY = -height;
-                }
+              case "bottom":
+                offsetY = data.autoSizeAlign ? -height : -20;
             }
         }
         const {x: x, y: y} = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
@@ -15605,6 +15689,13 @@ register("design", design);
 register("document", document$1);
 
 const MultiTouchHelper = {
+    state: {
+        type: "none",
+        typeCount: 0,
+        startTime: 0,
+        totalData: null,
+        center: {}
+    },
     getData(list) {
         const a = list[0], b = list[1];
         const lastCenter = PointHelper.getCenter(a.from, b.from);
@@ -15623,9 +15714,53 @@ const MultiTouchHelper = {
             rotation: rotation,
             center: center
         };
+    },
+    getType(data, config) {
+        const moveScore = Math.hypot(data.move.x, data.move.y) / (config.move || 5);
+        const scaleScore = Math.abs(data.scale - 1) / (config.scale || .03);
+        const rotateScore = Math.abs(data.rotation) / (config.rotation || 2);
+        if (moveScore < 1 && scaleScore < 1 && rotateScore < 1) return "none";
+        if (moveScore >= scaleScore && moveScore >= rotateScore) return "move";
+        if (scaleScore >= rotateScore) return "zoom";
+        return "rotate";
+    },
+    detect(data, config) {
+        const {state: state} = M$3;
+        const type = M$3.getType(data, config);
+        if (!state.totalData) {
+            state.startTime = Date.now();
+            state.center = data.center;
+        }
+        M$3.add(data, state.totalData);
+        state.totalData = data;
+        if (type === state.type) {
+            state.typeCount++;
+            if (state.typeCount >= (config.count || 3) && type !== "none") return type;
+        } else {
+            state.type = type;
+            state.typeCount = 1;
+        }
+        if (Date.now() - state.startTime >= (config.time || 160)) return M$3.getType(state.totalData, config);
+        return "none";
+    },
+    add(data, add) {
+        if (!add) return;
+        PointHelper.move(data.move, add.move);
+        data.scale *= add.scale;
+        data.rotation += add.rotation;
+        data.center = add.center;
+    },
+    reset() {
+        const {state: state} = M$3;
+        state.type = "none";
+        state.typeCount = 0;
+        state.startTime = 0;
+        state.totalData = null;
     }
 };
 
+const M$3 = MultiTouchHelper;
+
 const {abs: abs$2, max: max} = Math, {sign: sign, within: within$2} = MathHelper;
 
 const WheelEventHelper = {
@@ -15665,9 +15800,20 @@ const WheelEventHelper = {
     }
 };
 
+let totalX, totalY, totalScale, totalRotation;
+
 class Transformer {
     get transforming() {
-        return !!(this.moveData || this.zoomData || this.rotateData);
+        return this.moving || this.zooming || this.rotating;
+    }
+    get moving() {
+        return !!this.moveData;
+    }
+    get zooming() {
+        return !!this.zoomData;
+    }
+    get rotating() {
+        return !!this.rotateData;
     }
     constructor(interaction) {
         this.interaction = interaction;
@@ -15677,13 +15823,18 @@ class Transformer {
         if (!data.moveType) data.moveType = "move";
         if (!this.moveData) {
             this.setPath(data);
+            totalX = 0, totalY = 0;
             this.moveData = Object.assign(Object.assign({}, data), {
                 moveX: 0,
-                moveY: 0
+                moveY: 0,
+                totalX: totalX,
+                totalY: totalY
             });
             interaction.emit(MoveEvent.START, this.moveData);
         }
         data.path = this.moveData.path;
+        data.totalX = totalX = totalX + data.moveX;
+        data.totalY = totalY = totalY + data.moveY;
         interaction.emit(MoveEvent.BEFORE_MOVE, data);
         interaction.emit(MoveEvent.MOVE, data);
         this.transformEndWait();
@@ -15692,12 +15843,15 @@ class Transformer {
         const {interaction: interaction} = this;
         if (!this.zoomData) {
             this.setPath(data);
+            totalScale = 1;
             this.zoomData = Object.assign(Object.assign({}, data), {
-                scale: 1
+                scale: 1,
+                totalScale: totalScale
             });
             interaction.emit(ZoomEvent.START, this.zoomData);
         }
         data.path = this.zoomData.path;
+        data.totalScale = totalScale = totalScale * data.scale;
         interaction.emit(ZoomEvent.BEFORE_ZOOM, data);
         interaction.emit(ZoomEvent.ZOOM, data);
         this.transformEndWait();
@@ -15706,12 +15860,15 @@ class Transformer {
         const {interaction: interaction} = this;
         if (!this.rotateData) {
             this.setPath(data);
+            totalRotation = 0;
             this.rotateData = Object.assign(Object.assign({}, data), {
-                rotation: 0
+                rotation: 0,
+                totalRotation: totalRotation
             });
             interaction.emit(RotateEvent.START, this.rotateData);
         }
         data.path = this.rotateData.path;
+        data.totalRotation = totalRotation = totalRotation + data.rotation;
         interaction.emit(RotateEvent.BEFORE_ROTATE, data);
         interaction.emit(RotateEvent.ROTATE, data);
         this.transformEndWait();
@@ -15730,9 +15887,16 @@ class Transformer {
     }
     transformEnd() {
         const {interaction: interaction, moveData: moveData, zoomData: zoomData, rotateData: rotateData} = this;
-        if (moveData) interaction.emit(MoveEvent.END, moveData);
-        if (zoomData) interaction.emit(ZoomEvent.END, zoomData);
-        if (rotateData) interaction.emit(RotateEvent.END, rotateData);
+        if (moveData) interaction.emit(MoveEvent.END, Object.assign(Object.assign({}, moveData), {
+            totalX: totalX,
+            totalY: totalY
+        }));
+        if (zoomData) interaction.emit(ZoomEvent.END, Object.assign(Object.assign({}, zoomData), {
+            totalScale: totalScale
+        }));
+        if (rotateData) interaction.emit(RotateEvent.END, Object.assign(Object.assign({}, rotateData), {
+            totalRotation: totalRotation
+        }));
         this.reset();
     }
     reset() {
@@ -15830,14 +15994,39 @@ interaction.wheel = function(data) {
 };
 
 interaction.multiTouch = function(data, list) {
-    if (this.config.multiTouch.disabled) return;
-    const {move: move, rotation: rotation, scale: scale, center: center} = MultiTouchHelper.getData(list);
-    Object.assign(data, center);
-    data.multiTouch = true;
+    const {disabled: disabled, singleGesture: singleGesture} = this.config.multiTouch;
+    if (disabled) return;
     this.pointerWaitCancel();
-    this.rotate(getRotateEventData(rotation, data));
-    this.zoom(getZoomEventData(scale, data));
-    this.move(getMoveEventData(move, data));
+    let gestureData = MultiTouchHelper.getData(list);
+    let {moving: moving, zooming: zooming, rotating: rotating} = this.transformer;
+    if (singleGesture) {
+        if (!this.transformer.transforming) {
+            const type = MultiTouchHelper.detect(gestureData, isObject(singleGesture) ? singleGesture : {});
+            switch (type) {
+              case "move":
+                moving = true;
+                break;
+
+              case "zoom":
+                zooming = true;
+                break;
+
+              case "rotate":
+                rotating = true;
+                break;
+
+              default:
+                return;
+            }
+            MultiTouchHelper.reset();
+        }
+        if (!moving) gestureData.center = MultiTouchHelper.state.center;
+    } else moving = zooming = rotating = true;
+    Object.assign(data, gestureData.center);
+    data.multiTouch = true;
+    if (rotating) this.rotate(getRotateEventData(gestureData.rotation, data));
+    if (zooming) this.zoom(getZoomEventData(gestureData.scale, data));
+    if (moving) this.move(getMoveEventData(gestureData.move, data));
 };
 
 const dragger = Dragger.prototype;
@@ -18855,6 +19044,18 @@ UI.addAttr("placeholderStyle", undefined, stateStyleType);
 
 UI.addAttr("button", false, dataType);
 
+ui$1.set = function(data, transition) {
+    if (data) {
+        if (transition) {
+            if (transition === "temp") {
+                this.lockNormalStyle = true;
+                Object.assign(this, data);
+                this.lockNormalStyle = false;
+            } else this.animate(data, transition);
+        } else Object.assign(this, data);
+    }
+};
+
 ui$1.focus = function(value = true) {
     this.waitLeafer(() => {
         let {focusData: focusData} = this.app.interaction;
@@ -19451,4 +19652,4 @@ Plugin.add("bright");
 
 UI.addAttr("bright", false, dimType);
 
-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, dimType, 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, path, 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 };
+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, FourNumberHelper, 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, dimType, 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, path, 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$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };