leafer-draw 1.9.9 → 1.9.11

package/dist/web.js

@@ -243,7 +243,7 @@ var LeaferUI = function(exports) {
             return to;
         },
         setTemp(top, right, bottom, left) {
-            return set$1(tempFour, top, right, bottom, left);
+            return set$2(tempFour, top, right, bottom, left);
         },
         toTempAB(a, b, change) {
             tempTo = change ? isNumber(a) ? b : a : [];
@@ -283,21 +283,21 @@ var LeaferUI = function(exports) {
         max(t, other, change) {
             if (isNumber(t) && isNumber(other)) return max$4(t, other);
             toTempAB(t, other, change);
-            return set$1(tempTo, max$4(tempA[0], tempB[0]), max$4(tempA[1], tempB[1]), max$4(tempA[2], tempB[2]), max$4(tempA[3], tempB[3]));
+            return set$2(tempTo, max$4(tempA[0], tempB[0]), max$4(tempA[1], tempB[1]), max$4(tempA[2], tempB[2]), max$4(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]);
+            return set$2(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);
+            return set$2(to, bottom * scaleY, left * scaleX, top * scaleY, right * scaleX);
         }
     };
-    const {set: set$1, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
+    const {set: set$2, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
     const {round: round$3, pow: pow$1, PI: PI$3} = Math;
     const MathHelper = {
         within(value, min, max) {
@@ -386,7 +386,7 @@ var LeaferUI = function(exports) {
         };
     }
     const {sin: sin$5, cos: cos$5, acos: acos, sqrt: sqrt$3} = Math;
-    const {float: float$2} = MathHelper;
+    const {float: float$1} = MathHelper;
     const tempPoint$3 = {};
     function getWorld() {
         return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), {
@@ -634,12 +634,12 @@ var LeaferUI = function(exports) {
                     const cosR = c / scaleY;
                     rotation = PI_2 - (d > 0 ? acos(-cosR) : -acos(cosR));
                 }
-                const cosR = float$2(cos$5(rotation));
+                const cosR = float$1(cos$5(rotation));
                 const sinR = sin$5(rotation);
-                scaleX = float$2(scaleX), scaleY = float$2(scaleY);
-                skewX = cosR ? float$2((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
-                skewY = cosR ? float$2((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
-                rotation = float$2(rotation / OneRadian);
+                scaleX = float$1(scaleX), scaleY = float$1(scaleY);
+                skewX = cosR ? float$1((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
+                skewY = cosR ? float$1((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
+                rotation = float$1(rotation / OneRadian);
             } else {
                 scaleX = a;
                 scaleY = d;
@@ -682,7 +682,7 @@ var LeaferUI = function(exports) {
     };
     const M$6 = MatrixHelper;
     const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3} = MatrixHelper;
-    const {sin: sin$4, cos: cos$4, abs: abs$3, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2} = Math;
+    const {sin: sin$4, cos: cos$4, abs: abs$4, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2} = Math;
     const PointHelper = {
         defaultPoint: getPointData(),
         tempPoint: {},
@@ -774,8 +774,8 @@ var LeaferUI = function(exports) {
             return getDistanceFrom(t.x, t.y, point.x, point.y);
         },
         getDistanceFrom(x1, y1, x2, y2) {
-            const x = abs$3(x2 - x1);
-            const y = abs$3(y2 - y1);
+            const x = abs$4(x2 - x1);
+            const y = abs$4(y2 - y1);
             return sqrt$2(x * x + y * y);
         },
         getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
@@ -1140,7 +1140,7 @@ var LeaferUI = function(exports) {
     };
     const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$2} = TwoPointBoundsHelper;
     const {toOuterPoint: toOuterPoint$2} = MatrixHelper;
-    const {float: float$1, fourNumber: fourNumber} = MathHelper;
+    const {float: float, fourNumber: fourNumber} = MathHelper;
     const {floor: floor$2, ceil: ceil$2} = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
@@ -1309,10 +1309,10 @@ var LeaferUI = function(exports) {
             }
         },
         float(t, maxLength) {
-            t.x = float$1(t.x, maxLength);
-            t.y = float$1(t.y, maxLength);
-            t.width = float$1(t.width, maxLength);
-            t.height = float$1(t.height, maxLength);
+            t.x = float(t.x, maxLength);
+            t.y = float(t.y, maxLength);
+            t.width = float(t.width, maxLength);
+            t.height = float(t.height, maxLength);
         },
         add(t, bounds, isPoint) {
             right$1 = t.x + t.width;
@@ -1640,17 +1640,17 @@ var LeaferUI = function(exports) {
             showHit ? canvas.stroke() : canvas.strokeWorld(w, color);
         }
         log(...messages) {
-            if (D$5.enable) {
-                if (D$5.filterList.length && D$5.filterList.every(name => name !== this.name)) return;
-                if (D$5.excludeList.length && D$5.excludeList.some(name => name === this.name)) return;
+            if (D$4.enable) {
+                if (D$4.filterList.length && D$4.filterList.every(name => name !== this.name)) return;
+                if (D$4.excludeList.length && D$4.excludeList.some(name => name === this.name)) return;
                 console.log("%c" + this.name, "color:#21ae62", ...messages);
             }
         }
         tip(...messages) {
-            if (D$5.enable) this.warn(...messages);
+            if (D$4.enable) this.warn(...messages);
         }
         warn(...messages) {
-            if (D$5.showWarn) console.warn(this.name, ...messages);
+            if (D$4.showWarn) console.warn(this.name, ...messages);
         }
         repeat(name, ...messages) {
             if (!this.repeatMap[name]) {
@@ -1673,7 +1673,7 @@ var LeaferUI = function(exports) {
         if (!name) name = []; else if (isString(name)) name = [ name ];
         return name;
     }
-    const D$5 = Debug;
+    const D$4 = Debug;
     const debug$f = Debug.get("RunTime");
     const Run = {
         currentId: 0,
@@ -2417,9 +2417,9 @@ var LeaferUI = function(exports) {
             data[0] ? drawer.arcTo(x, y, right, y, data[0]) : drawer.lineTo(x, y);
         }
     };
-    const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil$1, abs: abs$2, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
+    const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
     const {setPoint: setPoint$1, addPoint: addPoint$1} = TwoPointBoundsHelper;
-    const {set: set, toNumberPoints: toNumberPoints} = PointHelper;
+    const {set: set$1, toNumberPoints: toNumberPoints} = PointHelper;
     const {M: M$5, L: L$6, C: C$4, Q: Q$4, Z: Z$5} = PathCommandMap;
     const tempPoint$1 = {};
     const BezierHelper = {
@@ -2487,14 +2487,14 @@ var LeaferUI = function(exports) {
             const lenCB = hypot(CBx, CBy);
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0) totalRadian += PI2;
-            if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$2(totalRadian - PI$2) < 1e-12) {
+            if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$3(totalRadian - PI$2) < 1e-12) {
                 if (data) data.push(L$6, x1, y1);
                 if (setPointBounds) {
                     setPoint$1(setPointBounds, fromX, fromY);
                     addPoint$1(setPointBounds, x1, y1);
                 }
-                if (setStartPoint) set(setStartPoint, fromX, fromY);
-                if (setEndPoint) set(setEndPoint, x1, y1);
+                if (setStartPoint) set$1(setStartPoint, fromX, fromY);
+                if (setEndPoint) set$1(setEndPoint, x1, y1);
                 return;
             }
             const anticlockwise = BAx * CBy - CBx * BAy < 0;
@@ -2520,7 +2520,7 @@ var LeaferUI = function(exports) {
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0) totalRadian += PI2; else if (totalRadian > PI2) totalRadian -= PI2;
             if (anticlockwise) totalRadian -= PI2;
-            const parts = ceil$1(abs$2(totalRadian / PI_2));
+            const parts = ceil$1(abs$3(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
             const partRadian4Sin = sin$3(partRadian / 4);
             const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -2534,7 +2534,7 @@ var LeaferUI = function(exports) {
             let fromX = cx + x, fromY = cy + y;
             if (data) data.push(data.length ? L$6 : M$5, fromX, fromY);
             if (setPointBounds) setPoint$1(setPointBounds, fromX, fromY);
-            if (setStartPoint) set(setStartPoint, fromX, fromY);
+            if (setStartPoint) set$1(setStartPoint, fromX, fromY);
             for (let i = 0; i < parts; i++) {
                 endCos = cos$3(endRadian);
                 endSin = sin$3(endRadian);
@@ -2553,7 +2553,7 @@ var LeaferUI = function(exports) {
                 startRadian = endRadian;
                 endRadian += partRadian;
             }
-            if (setEndPoint) set(setEndPoint, cx + x, cy + y);
+            if (setEndPoint) set$1(setEndPoint, cx + x, cy + y);
         },
         quadraticCurveTo(data, fromX, fromY, x1, y1, toX, toY) {
             data.push(C$4, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY);
@@ -2657,7 +2657,7 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    const {M: M$4, m: m, L: L$5, l: l, H: H, h: h, V: V, v: v, C: C$3, c: c, S: S, s: s, Q: Q$3, q: q, T: T, t: t, A: A, a: a, Z: Z$4, z: z, N: N$3, D: D$4, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3} = PathCommandMap;
+    const {M: M$4, m: m, L: L$5, l: l, H: H, h: h, V: V, v: v, C: C$3, c: c, S: S, s: s, Q: Q$3, q: q, T: T, t: t, A: A, a: a, Z: Z$4, z: z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3} = PathCommandMap;
     const {rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1} = BezierHelper;
     const {ellipticalArc: ellipticalArc} = EllipseHelper;
     const debug$c = Debug.get("PathConvert");
@@ -2872,7 +2872,7 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$4:
+                  case D$3:
                     x = old[i + 1];
                     y = old[i + 2];
                     curveMode ? roundRect$2(data, x, y, old[i + 3], old[i + 4], [ old[i + 5], old[i + 6], old[i + 7], old[i + 8] ]) : copyData(data, old, i, 9);
@@ -2971,9 +2971,9 @@ var LeaferUI = function(exports) {
         }
     };
     const {current: current, pushData: pushData, copyData: copyData} = PathConvert;
-    const {M: M$3, L: L$4, C: C$2, Q: Q$2, Z: Z$3, N: N$2, D: D$3, X: X$2, G: G$2, F: F$3, O: O$2, P: P$2, U: U$2} = PathCommandMap;
+    const {M: M$3, L: L$4, C: C$2, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$2, P: P$2, U: U$2} = PathCommandMap;
     const {getMinDistanceFrom: getMinDistanceFrom, getRadianFrom: getRadianFrom} = PointHelper;
-    const {tan: tan, min: min, abs: abs$1} = Math;
+    const {tan: tan, min: min, abs: abs$2} = Math;
     const startPoint = {};
     const PathCommandDataHelper = {
         beginPath(data) {
@@ -3003,7 +3003,7 @@ var LeaferUI = function(exports) {
             } else {
                 const fourCorners = MathHelper.fourNumber(cornerRadius);
                 if (fourCorners) {
-                    data.push(D$3, x, y, width, height, ...fourCorners);
+                    data.push(D$2, x, y, width, height, ...fourCorners);
                 } else {
                     data.push(N$2, x, y, width, height);
                 }
@@ -3029,7 +3029,7 @@ var LeaferUI = function(exports) {
         arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
             if (!isUndefined(lastX)) {
                 const d = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2);
-                radius = min(radius, min(d / 2, d / 2 * abs$1(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+                radius = min(radius, min(d / 2, d / 2 * abs$2(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
             }
             data.push(U$2, x1, y1, x2, y2, radius);
         },
@@ -3138,7 +3138,7 @@ var LeaferUI = function(exports) {
         }
         paint() {}
     }
-    const {M: M$2, L: L$3, C: C$1, Q: Q$1, Z: Z$2, N: N$1, D: D$2, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1} = PathCommandMap;
+    const {M: M$2, L: L$3, C: C$1, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1} = PathCommandMap;
     const debug$b = Debug.get("PathDrawer");
     const PathDrawer = {
         drawPathByData(drawer, data) {
@@ -3178,7 +3178,7 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$2:
+                  case D$1:
                     drawer.roundRect(data[i + 1], data[i + 2], data[i + 3], data[i + 4], [ data[i + 5], data[i + 6], data[i + 7], data[i + 8] ]);
                     i += 9;
                     break;
@@ -3220,7 +3220,7 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    const {M: M$1, L: L$2, C: C, Q: Q, Z: Z$1, N: N, D: D$1, X: X, G: G, F: F$1, O: O, P: P, U: U} = PathCommandMap;
+    const {M: M$1, L: L$2, C: C, Q: Q, Z: Z$1, N: N, D: D, X: X, G: G, F: F$1, O: O, P: P, U: U} = PathCommandMap;
     const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$1} = BezierHelper;
     const {addPointBounds: addPointBounds, copy: copy$6, addPoint: addPoint, setPoint: setPoint, addBounds: addBounds, toBounds: toBounds$1} = TwoPointBoundsHelper;
     const debug$a = Debug.get("PathBounds");
@@ -3288,12 +3288,12 @@ var LeaferUI = function(exports) {
                     i += 5;
                     break;
 
-                  case D$1:
+                  case D:
                   case X:
                     x = data[i + 1];
                     y = data[i + 2];
                     addBounds(setPointBounds, x, y, data[i + 3], data[i + 4]);
-                    i += command === D$1 ? 9 : 6;
+                    i += command === D ? 9 : 6;
                     break;
 
                   case G:
@@ -3611,7 +3611,12 @@ var LeaferUI = function(exports) {
         runTask() {
             const task = this.list[this.index];
             if (!task) {
-                this.nextTask();
+                this.timer = setTimeout(() => this.nextTask());
+                return;
+            }
+            if (task.isCancel) {
+                this.index++;
+                this.runTask();
                 return;
             }
             task.run().then(() => {
@@ -3642,16 +3647,15 @@ var LeaferUI = function(exports) {
         }
         setParallelList() {
             let task;
+            const {config: config, list: list, index: index} = this;
             this.parallelList = [];
             this.parallelSuccessNumber = 0;
-            let end = this.index + this.config.parallel;
-            if (end > this.list.length) end = this.list.length;
-            for (let i = this.index; i < end; i++) {
-                task = this.list[i];
-                if (task.parallel) {
-                    this.parallelList.push(task);
-                } else {
-                    break;
+            let end = index + config.parallel;
+            if (end > list.length) end = list.length;
+            if (config.parallel > 1) {
+                for (let i = index; i < end; i++) {
+                    task = list[i];
+                    if (task.parallel) this.parallelList.push(task); else break;
                 }
             }
         }
@@ -6409,7 +6413,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.9";
+    const version = "1.9.11";
     const debug$4 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -7582,12 +7586,12 @@ var LeaferUI = function(exports) {
         }
         __getData() {
             const data = super.__getData();
-            delete data.fill;
+            if (data.url) delete data.fill;
             return data;
         }
         __getInputData(names, options) {
             const data = super.__getInputData(names, options);
-            delete data.fill;
+            if (data.url) delete data.fill;
             return data;
         }
     }
@@ -7640,70 +7644,6 @@ var LeaferUI = function(exports) {
             return box ? max$2(box.__updateRenderSpread(), spread) : spread;
         }
     };
-    const {float: float} = MathHelper;
-    const tempContent = new Bounds, tempMerge = new Bounds, tempIntersect = new Bounds;
-    const DragBoundsHelper = {
-        limitMove(leaf, move) {
-            const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
-            if (dragBounds) D.getValidMove(leaf.__localBoxBounds, D.getDragBounds(leaf), dragBoundsType, move, true);
-            D.axisMove(leaf, move);
-        },
-        limitScaleOf(leaf, origin, scale) {
-            const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
-            if (dragBounds) D.getValidScaleOf(leaf.__localBoxBounds, D.getDragBounds(leaf), dragBoundsType, leaf.getLocalPointByInner(leaf.getInnerPointByBox(origin)), scale, true);
-        },
-        axisMove(leaf, move) {
-            const {draggable: draggable} = leaf;
-            if (draggable === "x") move.y = 0;
-            if (draggable === "y") move.x = 0;
-        },
-        getDragBounds(leaf) {
-            const {dragBounds: dragBounds} = leaf;
-            return dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds;
-        },
-        isInnerMode(content, dragBounds, dragBoundsType, sideType) {
-            return dragBoundsType === "inner" || dragBoundsType === "auto" && content[sideType] > dragBounds[sideType];
-        },
-        getValidMove(content, dragBounds, dragBoundsType, move, change) {
-            const x = content.x + move.x, y = content.y + move.y, right = x + content.width, bottom = y + content.height;
-            const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
-            if (!change) move = Object.assign({}, move);
-            if (D.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
-                if (x > dragBounds.x) move.x += dragBounds.x - x; else if (right < boundsRight) move.x += boundsRight - right;
-            } else {
-                if (x < dragBounds.x) move.x += dragBounds.x - x; else if (right > boundsRight) move.x += boundsRight - right;
-            }
-            if (D.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
-                if (y > dragBounds.y) move.y += dragBounds.y - y; else if (bottom < boundsBottom) move.y += boundsBottom - bottom;
-            } else {
-                if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
-            }
-            move.x = float(move.x);
-            move.y = float(move.y);
-            return move;
-        },
-        getValidScaleOf(content, dragBounds, dragBoundsType, origin, scale, change) {
-            if (!change) scale = Object.assign({}, scale);
-            let fitScaleX, fitScaleY;
-            tempContent.set(content).scaleOf(origin, scale.x, scale.y).unsign();
-            tempMerge.set(tempContent).add(dragBounds);
-            tempIntersect.set(tempContent).intersect(dragBounds);
-            if (D.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
-                fitScaleX = tempMerge.width / tempContent.width;
-            } else {
-                fitScaleX = tempIntersect.width / tempContent.width;
-            }
-            if (D.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
-                fitScaleY = tempMerge.height / tempContent.height;
-            } else {
-                fitScaleY = tempIntersect.height / tempContent.height;
-            }
-            scale.x = float(tempIntersect.width) ? scale.x * fitScaleX : 1;
-            scale.y = float(tempIntersect.height) ? scale.y * fitScaleY : 1;
-            return scale;
-        }
-    };
-    const D = DragBoundsHelper;
     const {stintSet: stintSet$1} = DataHelper;
     const UIRender = {
         __updateChange() {
@@ -9298,7 +9238,13 @@ var LeaferUI = function(exports) {
         shape: shape
     };
     let origin = {}, tempMatrix$1 = getMatrixData();
-    const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
+    const {get: get$3, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
+    function stretchMode(data, box, scaleX, scaleY) {
+        const transform = get$3();
+        translate$1(transform, box.x, box.y);
+        if (scaleX) scaleHelper(transform, scaleX, scaleY);
+        data.transform = transform;
+    }
     function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$3();
         translate$1(transform, box.x + x, box.y + y);
@@ -9313,8 +9259,11 @@ var LeaferUI = function(exports) {
         const transform = get$3();
         layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
         if (clipScaleX) {
-            tempMatrix$1.a = clipScaleX, tempMatrix$1.d = clipScaleY;
-            multiplyParent(transform, tempMatrix$1);
+            if (rotation || skew) {
+                set(tempMatrix$1);
+                scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
+                multiplyParent(transform, tempMatrix$1);
+            } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
         }
         data.transform = transform;
     }
@@ -9402,7 +9351,10 @@ var LeaferUI = function(exports) {
         if (offset) PointHelper.move(tempImage, offset);
         switch (mode) {
           case "stretch":
-            if (!sameBox) width = box.width, height = box.height;
+            if (!sameBox) {
+                scaleX = box.width / width, scaleY = box.height / height;
+                stretchMode(data, box, scaleX, scaleY);
+            }
             break;
 
           case "normal":
@@ -9411,7 +9363,7 @@ var LeaferUI = function(exports) {
                 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;
+                if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
             }
             break;
 
@@ -9428,17 +9380,14 @@ var LeaferUI = function(exports) {
             if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
         }
         if (!data.transform) {
-            if (box.x || box.y) {
-                data.transform = get$2();
-                translate(data.transform, box.x, box.y);
-            }
+            if (box.x || box.y) translate(data.transform = get$2(), box.x, box.y);
         }
-        if (scaleX && mode !== "stretch") {
+        data.width = width;
+        data.height = height;
+        if (scaleX) {
             data.scaleX = scaleX;
             data.scaleY = scaleY;
         }
-        data.width = width;
-        data.height = height;
         if (opacity) data.opacity = opacity;
         if (filters) data.filters = filters;
         if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
@@ -9557,7 +9506,7 @@ var LeaferUI = function(exports) {
         if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
     }
     const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
-    const {floor: floor, ceil: ceil, max: max$1, abs: abs} = Math;
+    const {floor: floor, ceil: ceil, max: max$1, abs: abs$1} = Math;
     function createPattern(ui, paint, pixelRatio) {
         let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
         const id = scaleX + "-" + scaleY + "-" + pixelRatio;
@@ -9567,8 +9516,8 @@ var LeaferUI = function(exports) {
             scaleX *= pixelRatio;
             scaleY *= pixelRatio;
             if (sx) {
-                sx = abs(sx);
-                sy = abs(sy);
+                sx = abs$1(sx);
+                sy = abs$1(sy);
                 imageMatrix = get$1();
                 copy$1(imageMatrix, transform);
                 scale(imageMatrix, 1 / sx, 1 / sy);
@@ -9706,6 +9655,7 @@ var LeaferUI = function(exports) {
         recycleImage: recycleImage,
         createData: createData,
         getPatternData: getPatternData,
+        stretchMode: stretchMode,
         fillOrFitMode: fillOrFitMode,
         clipMode: clipMode,
         repeatMode: repeatMode
@@ -9797,7 +9747,7 @@ var LeaferUI = function(exports) {
         conicGradient: conicGradient,
         getTransform: getTransform
     };
-    const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max} = Math;
+    const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max, abs: abs} = Math;
     const tempBounds = {}, tempMatrix = new Matrix;
     const offsetOutBounds$1 = {};
     function shadow(ui, current, shape) {
@@ -9837,7 +9787,7 @@ var LeaferUI = function(exports) {
     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;
+            x = item.x || 0, y = item.y || 0, blur = (item.blur || 0) * 1.5, spread = abs(item.spread || 0);
             top = max(top, spread + blur - y);
             right = max(right, spread + blur + x);
             bottom = max(bottom, spread + blur + y);
@@ -9847,11 +9797,11 @@ var LeaferUI = function(exports) {
     }
     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);
+            const spread = shadow.spread * 2 * otherScale * (isInnerShaodw ? -1 : 1), {width: width, height: height} = ui.__layout.strokeBounds;
             tempMatrix.set().scaleOfOuter({
                 x: (outBounds.x + outBounds.width / 2) * canvas.pixelRatio,
                 y: (outBounds.y + outBounds.height / 2) * canvas.pixelRatio
-            }, spreadScale);
+            }, 1 + spread / width, 1 + spread / height);
             return tempMatrix;
         }
         return undefined;
@@ -10497,7 +10447,6 @@ var LeaferUI = function(exports) {
     exports.Creator = Creator;
     exports.DataHelper = DataHelper;
     exports.Debug = Debug;
-    exports.DragBoundsHelper = DragBoundsHelper;
     exports.Effect = Effect;
     exports.EllipseData = EllipseData;
     exports.EllipseHelper = EllipseHelper;