@leafer/worker 1.9.6 → 1.9.8

package/dist/worker.js

@@ -229,17 +229,32 @@ var LeaferUI = function(exports) {
             this.__input = this.__middle = null;
         }
     }
-    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);
+        },
+        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);
         },
-        fourNumber(num, maxValue) {
+        get(num, maxValue) {
             let data;
-            if (isArray(num)) {
+            if (!isNumber(num)) {
                 switch (num.length) {
                   case 4:
                     data = isUndefined(maxValue) ? num : [ ...num ];
@@ -262,9 +277,36 @@ var LeaferUI = function(exports) {
                 }
             }
             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) {
@@ -392,14 +434,23 @@ var LeaferUI = function(exports) {
             t.c *= scaleY;
             t.d *= scaleY;
         },
+        pixelScale(t, pixelRatio, to) {
+            to || (to = t);
+            to.a = t.a * pixelRatio;
+            to.b = t.b * pixelRatio;
+            to.c = t.c * pixelRatio;
+            to.d = t.d * pixelRatio;
+            to.e = t.e * pixelRatio;
+            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;
@@ -412,13 +463,13 @@ var LeaferUI = function(exports) {
             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;
@@ -434,13 +485,13 @@ var LeaferUI = function(exports) {
             }
         },
         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;
@@ -479,15 +530,15 @@ var LeaferUI = function(exports) {
             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) {
@@ -565,7 +616,7 @@ var LeaferUI = function(exports) {
             }
             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;
@@ -626,10 +677,10 @@ var LeaferUI = function(exports) {
             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;
     const {sin: sin$5, cos: cos$5, abs: abs$7, sqrt: sqrt$4, atan2: atan2$2, min: min$1, round: round$5} = Math;
     const PointHelper = {
@@ -882,6 +933,10 @@ var LeaferUI = function(exports) {
             this.scaleY *= y || x;
             return this;
         }
+        pixelScale(pixelRatio) {
+            MatrixHelper.pixelScale(this, pixelRatio);
+            return this;
+        }
         scaleOfOuter(origin, x, y) {
             MatrixHelper.scaleOfOuter(this, origin, x, y);
             return this;
@@ -960,7 +1015,7 @@ var LeaferUI = function(exports) {
             MatrixHelper.reset(this);
         }
     }
-    const tempMatrix$1 = new Matrix;
+    const tempMatrix$2 = new Matrix;
     const TwoPointBoundsHelper = {
         tempPointBounds: {},
         setPoint(t, minX, minY) {
@@ -1090,9 +1145,9 @@ var LeaferUI = function(exports) {
     let right$4, bottom$3, boundsRight, boundsBottom;
     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;
@@ -1143,19 +1198,11 @@ var LeaferUI = function(exports) {
             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) {
@@ -1169,9 +1216,9 @@ var LeaferUI = function(exports) {
             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);
@@ -1229,9 +1276,9 @@ var LeaferUI = function(exports) {
         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 = {};
@@ -1301,7 +1348,7 @@ var LeaferUI = function(exports) {
                         first = false;
                         if (!addMode) copy$c(t, bounds);
                     } else {
-                        add$1(t, bounds);
+                        add$2(t, bounds);
                     }
                 }
             }
@@ -1315,7 +1362,7 @@ var LeaferUI = function(exports) {
             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;
@@ -1384,7 +1431,7 @@ var LeaferUI = function(exports) {
         }
     };
     const B = BoundsHelper;
-    const {add: add$1, copy: copy$c} = B;
+    const {add: add$2, copy: copy$c} = B;
     class Bounds {
         get minX() {
             return BoundsHelper.minX(this);
@@ -1527,7 +1574,7 @@ var LeaferUI = function(exports) {
             BoundsHelper.reset(this);
         }
     }
-    const tempBounds$1 = new Bounds;
+    const tempBounds$2 = new Bounds;
     class AutoBounds {
         constructor(top, right, bottom, left, width, height) {
             isObject(top) ? this.copy(top) : this.set(top, right, bottom, left, width, height);
@@ -1991,7 +2038,7 @@ var LeaferUI = function(exports) {
     __decorate([ contextMethod() ], Canvas.prototype, "fillText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "measureText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "strokeText", null);
-    const {copy: copy$b, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$4} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
+    const {copy: copy$b, multiplyParent: multiplyParent$4, pixelScale: pixelScale} = MatrixHelper, {round: round$4} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
     const minSize = {
         width: 1,
         height: 1,
@@ -2089,13 +2136,8 @@ var LeaferUI = function(exports) {
         setWorld(matrix, parentMatrix) {
             const {pixelRatio: pixelRatio, pixelSnap: pixelSnap} = this, w = this.worldTransform;
             if (parentMatrix) multiplyParent$4(matrix, parentMatrix, w);
-            w.a = matrix.a * pixelRatio;
-            w.b = matrix.b * pixelRatio;
-            w.c = matrix.c * pixelRatio;
-            w.d = matrix.d * pixelRatio;
-            w.e = matrix.e * pixelRatio;
-            w.f = matrix.f * pixelRatio;
-            if (pixelSnap) {
+            pixelScale(matrix, pixelRatio, w);
+            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);
             }
@@ -2378,12 +2420,12 @@ var LeaferUI = function(exports) {
     const {sin: sin$4, cos: cos$4, hypot: hypot, atan2: atan2$1, ceil: ceil$2, abs: abs$6, PI: PI$3, sqrt: sqrt$3, pow: pow$1} = Math;
     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;
@@ -2490,7 +2532,7 @@ var LeaferUI = function(exports) {
             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++) {
@@ -2615,7 +2657,7 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    const {M: M$8, m: m, L: L$9, l: l, H: H, h: h, V: V, v: v, C: C$7, c: c, S: S, s: s, Q: Q$6, q: q, T: T, t: t, A: A, a: a, Z: Z$7, z: z, N: N$5, D: D$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;
     const {ellipticalArc: ellipticalArc} = EllipseHelper;
     const debug$f = Debug.get("PathConvert");
@@ -2702,10 +2744,10 @@ var LeaferUI = function(exports) {
                     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;
 
@@ -2892,7 +2934,7 @@ var LeaferUI = function(exports) {
             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":
@@ -2929,7 +2971,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {current: current, pushData: pushData, copyData: copyData} = PathConvert;
-    const {M: M$7, L: L$8, C: C$6, Q: Q$5, Z: Z$6, N: N$4, D: D$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;
     const {tan: tan, min: min, abs: abs$5} = Math;
     const startPoint = {};
@@ -2938,7 +2980,7 @@ var LeaferUI = function(exports) {
             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);
@@ -2993,12 +3035,12 @@ var LeaferUI = function(exports) {
         },
         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) {
@@ -3096,7 +3138,7 @@ var LeaferUI = function(exports) {
         }
         paint() {}
     }
-    const {M: M$6, L: L$7, C: C$5, Q: Q$4, Z: Z$5, N: N$3, D: D$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");
     const PathDrawer = {
         drawPathByData(drawer, data) {
@@ -3106,7 +3148,7 @@ var LeaferUI = function(exports) {
             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;
@@ -3178,7 +3220,7 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    const {M: M$5, L: L$6, C: C$4, Q: Q$3, Z: Z$4, N: N$2, D: D$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;
     const {addPointBounds: addPointBounds, copy: copy$a, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
     const debug$d = Debug.get("PathBounds");
@@ -3205,7 +3247,7 @@ var LeaferUI = function(exports) {
                     }
                 }
                 switch (command) {
-                  case M$5:
+                  case M$6:
                   case L$6:
                     x = data[i + 1];
                     y = data[i + 2];
@@ -3304,7 +3346,7 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    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;
     const {arcTo: arcTo} = PathCommandDataHelper;
     const PathCorner = {
@@ -3316,16 +3358,16 @@ var LeaferUI = function(exports) {
             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;
 
@@ -3745,7 +3787,7 @@ var LeaferUI = function(exports) {
     };
     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() {
             return this.config.url;
@@ -3833,7 +3875,7 @@ var LeaferUI = function(exports) {
                 }
                 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;
@@ -4008,6 +4050,17 @@ var LeaferUI = function(exports) {
             }
         }));
     }
+    function dimType(defaultValue) {
+        return decorateLeafAttr(defaultValue, key => attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const data = this.__;
+                    DataHelper.stintSet(data, "__useDim", data.dim || data.bright || data.dimskip);
+                    this.__layout.surfaceChange();
+                }
+            }
+        }));
+    }
     function opacityType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -4048,7 +4101,7 @@ var LeaferUI = function(exports) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
-                    this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                    this.__layout.surfaceChange();
                     this.waitParent(() => {
                         this.parent.__layout.childrenSortChange();
                     });
@@ -4082,7 +4135,7 @@ var LeaferUI = function(exports) {
             set(value) {
                 if (this.__setAttr(key, value)) {
                     this.__layout.hitCanvasChanged = true;
-                    if (Debug.showBounds === "hit") this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                    if (Debug.showBounds === "hit") this.__layout.surfaceChange();
                     if (this.leafer) this.leafer.updateCursor();
                 }
             }
@@ -4554,7 +4607,7 @@ var LeaferUI = function(exports) {
         }
     };
     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";
     const worldContent = "_worldContentBounds", worldBox = "_worldBoxBounds", worldStroke = "_worldStrokeBounds";
     class LeafLayout {
@@ -4574,7 +4627,7 @@ var LeaferUI = function(exports) {
             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() {
@@ -4584,15 +4637,15 @@ var LeaferUI = function(exports) {
             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() {
@@ -5363,12 +5416,12 @@ var LeaferUI = function(exports) {
     };
     const {updateMatrix: updateMatrix$3, updateAllMatrix: updateAllMatrix$3} = LeafHelper;
     const {updateBounds: updateBounds$2} = BranchHelper;
-    const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$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);
@@ -5424,13 +5477,13 @@ var LeaferUI = function(exports) {
         __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;
@@ -5468,11 +5521,11 @@ var LeaferUI = function(exports) {
         },
         __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);
         }
     };
     const LeafRender = {
@@ -5480,6 +5533,7 @@ var LeaferUI = function(exports) {
             if (options.shape) return this.__renderShape(canvas, options);
             if (this.__worldOpacity) {
                 const data = this.__;
+                if (data.bright && !options.topRendering) return options.topList.add(this);
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 canvas.opacity = options.dimOpacity && !data.dimskip ? data.opacity * options.dimOpacity : data.opacity;
                 if (this.__.__single) {
@@ -5526,7 +5580,9 @@ var LeaferUI = function(exports) {
             this.__nowWorld = this.__getNowWorld(options);
             if (this.__worldOpacity) {
                 const data = this.__;
-                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                if (data.__useDim) {
+                    if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.bright && !options.topRendering) return options.topList.add(this); else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                }
                 if (data.__single && !this.isBranchLeaf) {
                     if (data.eraser === "path") return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(false, true);
@@ -5561,9 +5617,10 @@ var LeaferUI = function(exports) {
     };
     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 {copy: copy$6, move: move$6} = PointHelper;
+    const {toOuterOf: toOuterOf$1} = BoundsHelper;
+    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;
     exports.Leaf = class Leaf {
         get tag() {
@@ -5837,8 +5894,9 @@ var LeaferUI = function(exports) {
                 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;
@@ -5872,7 +5930,7 @@ var LeaferUI = function(exports) {
         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) {
@@ -5905,7 +5963,7 @@ var LeaferUI = function(exports) {
         }
         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) {
@@ -5915,7 +5973,7 @@ var LeaferUI = function(exports) {
         }
         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) {
@@ -6351,7 +6409,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.6";
+    const version = "1.9.8";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() {
             return true;
@@ -6749,6 +6807,7 @@ var LeaferUI = function(exports) {
                 usePartRender: true,
                 maxFPS: 120
             };
+            this.frames = [];
             this.target = target;
             this.canvas = canvas;
             if (userConfig) this.config = DataHelper.default(userConfig, this.config);
@@ -6878,7 +6937,7 @@ var LeaferUI = function(exports) {
             };
             if (this.needFill) canvas.fillWorld(bounds, this.config.fill);
             if (Debug.showRepaint) Debug.drawRepaint(canvas, bounds);
-            this.target.__render(canvas, options);
+            Platform.render(this.target, canvas, options);
             this.renderBounds = realBounds = realBounds || bounds;
             this.renderOptions = options;
             this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
@@ -6901,12 +6960,15 @@ var LeaferUI = function(exports) {
             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();
             };
@@ -7147,6 +7209,14 @@ var LeaferUI = function(exports) {
         selector: (target, options) => new Selector(target, options)
     });
     Platform.layout = Layouter.fullLayout;
+    Platform.render = function(target, canvas, options) {
+        const topOptions = Object.assign(Object.assign({}, options), {
+            topRendering: true
+        });
+        options.topList = new LeafList;
+        target.__render(canvas, options);
+        if (options.topList.length) options.topList.forEach(item => item.__render(canvas, topOptions));
+    };
     function effectType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -7508,39 +7578,40 @@ var LeaferUI = function(exports) {
             return data;
         }
     }
+    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;
         }
     };
     const {float: float$1} = MathHelper;
@@ -7864,8 +7935,8 @@ var LeaferUI = function(exports) {
     __decorate([ opacityType(1) ], exports.UI.prototype, "opacity", void 0);
     __decorate([ visibleType(true) ], exports.UI.prototype, "visible", void 0);
     __decorate([ surfaceType(false) ], exports.UI.prototype, "locked", void 0);
-    __decorate([ surfaceType(false) ], exports.UI.prototype, "dim", void 0);
-    __decorate([ surfaceType(false) ], exports.UI.prototype, "dimskip", void 0);
+    __decorate([ dimType(false) ], exports.UI.prototype, "dim", void 0);
+    __decorate([ dimType(false) ], exports.UI.prototype, "dimskip", void 0);
     __decorate([ sortType(0) ], exports.UI.prototype, "zIndex", void 0);
     __decorate([ maskType(false) ], exports.UI.prototype, "mask", void 0);
     __decorate([ eraserType(false) ], exports.UI.prototype, "eraser", void 0);
@@ -8682,7 +8753,7 @@ var LeaferUI = function(exports) {
     __decorate([ dataType(false) ], exports.Canvas.prototype, "safeResize", void 0);
     __decorate([ resizeType() ], exports.Canvas.prototype, "contextSettings", void 0);
     exports.Canvas = __decorate([ registerUI() ], exports.Canvas);
-    const {copyAndSpread: copyAndSpread$1, includes: includes, spread: spread, setList: setList} = BoundsHelper;
+    const {copyAndSpread: copyAndSpread$2, includes: includes, spread: spread, setList: setList} = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() {
             return "Text";
@@ -8728,13 +8799,13 @@ var LeaferUI = function(exports) {
             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() {
@@ -9093,9 +9164,9 @@ var LeaferUI = function(exports) {
         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;
@@ -10049,8 +10120,8 @@ var LeaferUI = function(exports) {
         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,
@@ -10137,8 +10208,8 @@ var LeaferUI = function(exports) {
     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;
         }
@@ -10323,23 +10394,27 @@ var LeaferUI = function(exports) {
             out.recycle(ui.__nowWorld);
         }
     }
-    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;
@@ -10349,8 +10424,10 @@ var LeaferUI = function(exports) {
                 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);
@@ -10369,6 +10446,7 @@ var LeaferUI = function(exports) {
             matrix: matrix,
             fitMatrix: fitMatrix,
             bounds: bounds,
+            renderBounds: renderBounds,
             worldCanvas: worldCanvas,
             shapeBounds: shapeBounds,
             scaleX: scaleX,
@@ -10466,7 +10544,7 @@ var LeaferUI = function(exports) {
         drawTextStroke: drawTextStroke,
         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;
     function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$3();
@@ -10478,12 +10556,12 @@ var LeaferUI = function(exports) {
         }, 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;
     }
@@ -10576,7 +10654,12 @@ var LeaferUI = function(exports) {
 
           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":
@@ -10721,7 +10804,7 @@ var LeaferUI = function(exports) {
         if (leafer && leafer.viewReady) leafer.renderer.ignore = 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);
         const id = scaleX + "-" + scaleY + "-" + pixelRatio;
@@ -10769,8 +10852,8 @@ var LeaferUI = function(exports) {
             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);
@@ -10795,17 +10878,15 @@ var LeaferUI = function(exports) {
             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) {
@@ -10963,17 +11044,17 @@ var LeaferUI = function(exports) {
         conicGradient: conicGradient,
         getTransform: getTransform
     };
-    const {copy: copy$3, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper;
-    const tempBounds = {};
+    const {copy: copy$3, move: move$6, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max$1} = Math;
+    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) {
@@ -10981,63 +11062,69 @@ var LeaferUI = function(exports) {
                 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;
+            transform = 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 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, spreadScale, shape) {
-        const {bounds: bounds, shapeBounds: shapeBounds} = shape;
+    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;
     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) {
@@ -11046,16 +11133,17 @@ var LeaferUI = function(exports) {
             }
             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);
+            transform = 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);
@@ -11063,6 +11151,7 @@ var LeaferUI = function(exports) {
         });
         other.recycle(copyBounds);
     }
+    const getInnerShadowSpread = getShadowRenderSpread;
     function blur(ui, current, origin) {
         const {blur: blur} = ui.__;
         origin.setWorldBlur(blur * ui.__nowWorld.a);
@@ -11075,10 +11164,12 @@ var LeaferUI = function(exports) {
         innerShadow: innerShadow,
         blur: blur,
         backgroundBlur: backgroundBlur,
-        getShadowSpread: getShadowSpread,
+        getShadowRenderSpread: getShadowRenderSpread,
+        getShadowTransform: getShadowTransform,
         isTransformShadow(_shadow) {
             return undefined;
-        }
+        },
+        getInnerShadowSpread: getInnerShadowSpread
     };
     const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
     let usedGrayscaleAlpha;
@@ -11092,6 +11183,7 @@ var LeaferUI = function(exports) {
                     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") {
@@ -11109,7 +11201,6 @@ var LeaferUI = function(exports) {
                     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;
@@ -11670,22 +11761,25 @@ var LeaferUI = function(exports) {
                 set(value) {
                     const old = this[privateKey];
                     if (old !== value) {
-                        if (this.config) {
+                        const t = this;
+                        if (t.config) {
                             const isSelect = key === "target";
                             if (isSelect) {
-                                if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
-                                if (this.single) this.element.syncEventer = null;
-                                const {beforeSelect: beforeSelect} = this.config;
+                                const {beforeSelect: beforeSelect} = t.config;
                                 if (beforeSelect) {
                                     const check = beforeSelect({
                                         target: value
                                     });
                                     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, {
-                                editor: this,
+                                editor: t,
                                 value: value,
                                 oldValue: old
                             }));
@@ -11852,11 +11946,12 @@ var LeaferUI = function(exports) {
             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();
@@ -11919,12 +12014,12 @@ var LeaferUI = function(exports) {
         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) {
@@ -11939,7 +12034,7 @@ var LeaferUI = function(exports) {
                         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;
                 }
             }
         }
@@ -12054,91 +12149,95 @@ var LeaferUI = function(exports) {
     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;
@@ -12335,13 +12434,18 @@ var LeaferUI = function(exports) {
     function updatePointCursor(editBox, e) {
         const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
         if (!point || !editBox.editor.editing || !editBox.canUse) return;
+        if (point.name === "rect") return updateMoveCursor(editBox);
         if (point.name === "circle") return;
-        if (point.pointType === "button") {
+        let {rotation: rotation} = editBox;
+        const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
+        if (pointType === "move") {
+            point.cursor = moveCursor;
+            if (!moveable) point.visible = false;
+            return;
+        } else if (pointType === "button") {
             if (!point.cursor) point.cursor = "pointer";
             return;
         }
-        let {rotation: rotation} = editBox;
-        const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
         let showResize = pointType.includes("resize");
         if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
         const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
@@ -12414,10 +12518,13 @@ var LeaferUI = function(exports) {
             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 exports.Group;
-            this.rect = new exports.Box({
+            this.rect = new EditPoint({
                 name: "rect",
                 hitFill: "all",
                 hitStroke: "none",
@@ -12479,12 +12586,13 @@ var LeaferUI = function(exports) {
                 this.listenPointEvents(resizePoint, "resize", i);
             }
             this.listenPointEvents(circle, "rotate", 2);
+            this.listenPointEvents(rect, "move", 8);
             view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
             this.add(view);
         }
         load() {
-            const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
-            const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
+            const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
+            const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
             this.visible = !target.locked;
@@ -12493,6 +12601,10 @@ var LeaferUI = function(exports) {
                 resizeP = resizePoints[i];
                 resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
                 resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
+                if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
+                    pointType: "resize",
+                    rotation: (i - 1) / 2 * 90
+                }, resizeLine || {}));
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
             rect.set(Object.assign({
@@ -12537,10 +12649,12 @@ var LeaferUI = function(exports) {
             if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
         }
         updateBounds(bounds) {
-            const {editMask: editMask} = this.editor;
-            const {mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
-            const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
+            const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+            const {editMask: editMask} = editor;
+            const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
             editMask.visible = mask ? true : 0;
+            editor.setDimOthers(dimOthers);
+            editor.setBright(!!dimOthers || bright);
             if (spread) BoundsHelper.spread(bounds, spread);
             if (this.view.worldOpacity) {
                 const {width: width, height: height} = bounds;
@@ -12561,10 +12675,10 @@ var LeaferUI = function(exports) {
                         resizeL.visible = resizeP.visible && !hideResizeLines;
                         resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                         if ((i + 1) / 2 % 2) {
-                            resizeL.width = width;
+                            resizeL.width = width + resizeL.height;
                             if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
                         } else {
-                            resizeL.height = height;
+                            resizeL.width = height + resizeL.height;
                             if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
                         }
                     }
@@ -12640,10 +12754,9 @@ var LeaferUI = function(exports) {
         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;
-            if (point.name === "rect") {
+            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);
@@ -12652,69 +12765,74 @@ var LeaferUI = function(exports) {
                 } 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 {name: name, pointType: pointType} = e.current;
-            if (name === "rect") 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;
             if (moving) {
                 transformTool.onMove(e);
-                updateMoveCursor(this);
             } else if (resizing || rotating || skewing) {
                 const point = e.current;
                 if (point.pointType) this.enterPoint = point;
                 if (rotating) transformTool.onRotate(e);
                 if (resizing) transformTool.onScale(e);
                 if (skewing) transformTool.onSkew(e);
-                updatePointCursor(this, e);
             }
+            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 exports.DragEvent || e instanceof exports.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 === exports.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 === exports.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 === exports.RotateEvent.START ? this.onTransformStart(e) : this.transformTool.onRotate(e);
                 }
             }
         }
@@ -12727,8 +12845,7 @@ var LeaferUI = function(exports) {
             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) {
@@ -12747,7 +12864,7 @@ var LeaferUI = function(exports) {
                   case "ArrowRight":
                     x = distance;
                 }
-                if (x || y) transformTool.move(x, y);
+                if (x || y) this.transformTool.move(x, y);
             }
         }
         onDoubleTap(e) {
@@ -12778,19 +12895,17 @@ var LeaferUI = function(exports) {
         listenPointEvents(point, type, direction) {
             point.direction = direction;
             point.pointType = type;
-            const events = [ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.LEAVE, () => {
-                this.enterPoint = null;
-            } ] ];
-            if (point.name !== "circle") events.push([ exports.PointerEvent.ENTER, e => {
+            this.__eventIds.push(point.on_([ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.ENTER, e => {
                 this.enterPoint = point, updatePointCursor(this, e);
-            } ]);
-            this.__eventIds.push(point.on_(events));
+            } ], [ exports.PointerEvent.LEAVE, () => {
+                this.enterPoint = null;
+            } ] ]));
         }
         __listenEvents() {
             const {rect: rect, editor: editor, __eventIds: events} = this;
-            events.push(rect.on_([ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.ENTER, () => updateMoveCursor(this) ], [ exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ exports.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
+            events.push(rect.on_([ [ exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ exports.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
             this.waitLeafer(() => {
-                events.push(editor.app.on_([ [ [ exports.KeyEvent.HOLD, exports.KeyEvent.UP ], this.onKey, this ], [ exports.KeyEvent.DOWN, this.onArrow, this ], [ exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ exports.MoveEvent.END, this.onMoveEnd, this ], [ exports.ZoomEvent.END, this.resetDoing, this ], [ exports.RotateEvent.END, this.resetDoing, this ] ]));
+                events.push(editor.app.on_([ [ [ exports.KeyEvent.HOLD, exports.KeyEvent.UP ], this.onKey, this ], [ exports.KeyEvent.DOWN, this.onArrow, this ], [ [ exports.MoveEvent.START, exports.MoveEvent.BEFORE_MOVE ], this.onMove, this, true ], [ [ exports.ZoomEvent.START, exports.ZoomEvent.BEFORE_ZOOM ], this.onScale, this, true ], [ [ exports.RotateEvent.START, exports.RotateEvent.BEFORE_ROTATE ], this.onRotate, this, true ], [ [ exports.MoveEvent.END, exports.ZoomEvent.END, exports.RotateEvent.END ], this.onTransformEnd, this ] ]));
             });
         }
         __removeListenEvents() {
@@ -13139,56 +13254,61 @@ var LeaferUI = function(exports) {
             const isMoveEnd = e.type === exports.MoveEvent.END || e.type === exports.DragEvent.END;
             const axisDrag = isString(target.draggable);
             const checkLimitMove = !dragLimitAnimate || isMoveEnd || axisDrag;
+            const total = {
+                x: e.totalX,
+                y: e.totalY
+            };
             if (e instanceof exports.MoveEvent) {
-                move = e.getLocalMove(target);
-                if (checkLimitMove) exports.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 = exports.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 = exports.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 exports.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 exports.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 exports.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;
@@ -13466,6 +13586,16 @@ var LeaferUI = function(exports) {
         shiftItem(item) {
             this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
         }
+        setDimOthers(value, attrName = "dim", list) {
+            if (!list) {
+                const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
+                list = dimTarget ? isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
+            }
+            if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value));
+        }
+        setBright(value) {
+            this.setDimOthers(value, "bright", this.list);
+        }
         update() {
             if (this.editing) {
                 if (!this.element.parent) return this.cancel();
@@ -13686,8 +13816,8 @@ var LeaferUI = function(exports) {
         }
     };
     __decorate([ mergeConfigAttr() ], exports.Editor.prototype, "mergeConfig", void 0);
-    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
     __decorate([ targetAttr(onTarget) ], exports.Editor.prototype, "target", void 0);
+    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
     exports.Editor = __decorate([ useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
     class InnerEditor {
         static registerInnerEditor() {
@@ -13908,7 +14038,7 @@ var LeaferUI = function(exports) {
         }
     };
     exports.LineEditTool = __decorate([ registerEditTool() ], exports.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) {
             if (!data) return;
@@ -13917,7 +14047,7 @@ var LeaferUI = function(exports) {
             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;
@@ -14334,28 +14464,24 @@ var LeaferUI = function(exports) {
             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;
@@ -14459,6 +14585,13 @@ var LeaferUI = function(exports) {
     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);
@@ -14477,8 +14610,51 @@ var LeaferUI = function(exports) {
                 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 = {
         getMove(event, config) {
@@ -14516,9 +14692,19 @@ var LeaferUI = function(exports) {
             return scale;
         }
     };
+    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;
@@ -14528,13 +14714,18 @@ var LeaferUI = function(exports) {
             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(exports.MoveEvent.START, this.moveData);
             }
             data.path = this.moveData.path;
+            data.totalX = totalX = totalX + data.moveX;
+            data.totalY = totalY = totalY + data.moveY;
             interaction.emit(exports.MoveEvent.BEFORE_MOVE, data);
             interaction.emit(exports.MoveEvent.MOVE, data);
             this.transformEndWait();
@@ -14543,12 +14734,15 @@ var LeaferUI = function(exports) {
             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(exports.ZoomEvent.START, this.zoomData);
             }
             data.path = this.zoomData.path;
+            data.totalScale = totalScale = totalScale * data.scale;
             interaction.emit(exports.ZoomEvent.BEFORE_ZOOM, data);
             interaction.emit(exports.ZoomEvent.ZOOM, data);
             this.transformEndWait();
@@ -14557,12 +14751,15 @@ var LeaferUI = function(exports) {
             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(exports.RotateEvent.START, this.rotateData);
             }
             data.path = this.rotateData.path;
+            data.totalRotation = totalRotation = totalRotation + data.rotation;
             interaction.emit(exports.RotateEvent.BEFORE_ROTATE, data);
             interaction.emit(exports.RotateEvent.ROTATE, data);
             this.transformEndWait();
@@ -14581,9 +14778,16 @@ var LeaferUI = function(exports) {
         }
         transformEnd() {
             const {interaction: interaction, moveData: moveData, zoomData: zoomData, rotateData: rotateData} = this;
-            if (moveData) interaction.emit(exports.MoveEvent.END, moveData);
-            if (zoomData) interaction.emit(exports.ZoomEvent.END, zoomData);
-            if (rotateData) interaction.emit(exports.RotateEvent.END, rotateData);
+            if (moveData) interaction.emit(exports.MoveEvent.END, Object.assign(Object.assign({}, moveData), {
+                totalX: totalX,
+                totalY: totalY
+            }));
+            if (zoomData) interaction.emit(exports.ZoomEvent.END, Object.assign(Object.assign({}, zoomData), {
+                totalScale: totalScale
+            }));
+            if (rotateData) interaction.emit(exports.RotateEvent.END, Object.assign(Object.assign({}, rotateData), {
+                totalRotation: totalRotation
+            }));
             this.reset();
         }
         reset() {
@@ -14665,14 +14869,39 @@ var LeaferUI = function(exports) {
         }
     };
     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;
     const {abs: abs$1} = Math;
@@ -17408,6 +17637,17 @@ var LeaferUI = function(exports) {
     exports.UI.addAttr("disabledStyle", undefined, stateStyleType);
     exports.UI.addAttr("placeholderStyle", undefined, stateStyleType);
     exports.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;
@@ -17809,14 +18049,10 @@ var LeaferUI = function(exports) {
                         renderOptions.bounds = canvas.bounds;
                     }
                     canvas.save();
-                    if (isFrame && !isUndefined(fill)) {
-                        const oldFill = leaf.get("fill");
-                        leaf.fill = "";
-                        leaf.__render(canvas, renderOptions);
-                        leaf.fill = oldFill;
-                    } else {
-                        leaf.__render(canvas, renderOptions);
-                    }
+                    const igroneFill = isFrame && !isUndefined(fill), oldFill = leaf.get("fill");
+                    if (igroneFill) leaf.fill = "";
+                    Platform.render(leaf, canvas, renderOptions);
+                    if (igroneFill) leaf.fill = oldFill;
                     canvas.restore();
                     if (sliceLeaf) sliceLeaf.__updateWorldOpacity();
                     if (trim) {
@@ -17962,6 +18198,8 @@ var LeaferUI = function(exports) {
             return width;
         }
     });
+    Plugin.add("bright");
+    exports.UI.addAttr("bright", false, dimType);
     exports.AlignHelper = AlignHelper;
     exports.AnimateEasing = AnimateEasing;
     exports.AnimateEvent = AnimateEvent;
@@ -18008,6 +18246,7 @@ var LeaferUI = function(exports) {
     exports.FileHelper = FileHelper;
     exports.Filter = Filter;
     exports.Finder = Finder;
+    exports.FourNumberHelper = FourNumberHelper;
     exports.FrameData = FrameData;
     exports.GroupData = GroupData;
     exports.HTMLTextData = HTMLTextData;
@@ -18134,6 +18373,7 @@ var LeaferUI = function(exports) {
     exports.defineDataProcessor = defineDataProcessor;
     exports.defineKey = defineKey;
     exports.defineLeafAttr = defineLeafAttr;
+    exports.dimType = dimType;
     exports.doBoundsType = doBoundsType;
     exports.doStrokeType = doStrokeType;
     exports.effectType = effectType;
@@ -18185,8 +18425,8 @@ var LeaferUI = function(exports) {
     exports.stateType = stateType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
-    exports.tempBounds = tempBounds$1;
-    exports.tempMatrix = tempMatrix$1;
+    exports.tempBounds = tempBounds$2;
+    exports.tempMatrix = tempMatrix$2;
     exports.tempPoint = tempPoint$3;
     exports.tryToNumber = tryToNumber;
     exports.useCanvas = useCanvas;