leafer-draw 1.9.11 → 1.10.0

package/dist/web.js

@@ -1,42 +1,5 @@
 var LeaferUI = function(exports) {
     "use strict";
-    const Platform = {
-        toURL(text, fileType) {
-            let url = encodeURIComponent(text);
-            if (fileType === "text") url = "data:text/plain;charset=utf-8," + url; else if (fileType === "svg") url = "data:image/svg+xml," + url;
-            return url;
-        },
-        image: {
-            hitCanvasSize: 100,
-            maxCacheSize: 2560 * 1600,
-            maxPatternSize: 4096 * 2160,
-            crossOrigin: "anonymous",
-            getRealURL(url) {
-                const {prefix: prefix, suffix: suffix} = Platform.image;
-                if (suffix && !url.startsWith("data:") && !url.startsWith("blob:")) url += (url.includes("?") ? "&" : "?") + suffix;
-                if (prefix && url[0] === "/") url = prefix + url;
-                return url;
-            }
-        }
-    };
-    const IncrementId = {
-        RUNTIME: "runtime",
-        LEAF: "leaf",
-        TASK: "task",
-        CNAVAS: "canvas",
-        IMAGE: "image",
-        types: {},
-        create(typeName) {
-            const {types: types} = I$1;
-            if (types[typeName]) {
-                return types[typeName]++;
-            } else {
-                types[typeName] = 1;
-                return 0;
-            }
-        }
-    };
-    const I$1 = IncrementId;
     exports.Answer = void 0;
     (function(Answer) {
         Answer[Answer["No"] = 0] = "No";
@@ -229,8 +192,74 @@ var LeaferUI = function(exports) {
             this.__input = this.__middle = null;
         }
     }
+    const {floor: floor$2, max: max$4} = Math;
+    const Platform = {
+        toURL(text, fileType) {
+            let url = encodeURIComponent(text);
+            if (fileType === "text") url = "data:text/plain;charset=utf-8," + url; else if (fileType === "svg") url = "data:image/svg+xml," + url;
+            return url;
+        },
+        image: {
+            hitCanvasSize: 100,
+            maxCacheSize: 2560 * 1600,
+            maxPatternSize: 4096 * 2160,
+            crossOrigin: "anonymous",
+            isLarge(size, scaleX, scaleY, largeSize) {
+                return size.width * size.height * (scaleX ? scaleX * scaleY : 1) > (largeSize || image$1.maxCacheSize);
+            },
+            isSuperLarge(size, scaleX, scaleY) {
+                return image$1.isLarge(size, scaleX, scaleY, image$1.maxPatternSize);
+            },
+            getRealURL(url) {
+                const {prefix: prefix, suffix: suffix} = Platform.image;
+                if (suffix && !url.startsWith("data:") && !url.startsWith("blob:")) url += (url.includes("?") ? "&" : "?") + suffix;
+                if (prefix && url[0] === "/") url = prefix + url;
+                return url;
+            },
+            resize(image, width, height, xGap, yGap, clip, smooth, opacity, _filters) {
+                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;
+                if (clip) {
+                    const scaleX = width / clip.width, scaleY = height / clip.height;
+                    ctx.setTransform(scaleX, 0, 0, scaleY, -clip.x * scaleX, -clip.y * scaleY);
+                    ctx.drawImage(image, 0, 0, image.width, image.height);
+                } else ctx.drawImage(image, 0, 0, width, height);
+                return canvas;
+            },
+            setPatternTransform(pattern, transform, paint) {
+                try {
+                    if (transform && pattern.setTransform) {
+                        pattern.setTransform(transform);
+                        transform = undefined;
+                    }
+                } catch (_a) {}
+                if (paint) DataHelper.stintSet(paint, "transform", transform);
+            }
+        }
+    };
+    const {image: image$1} = Platform;
+    const IncrementId = {
+        RUNTIME: "runtime",
+        LEAF: "leaf",
+        TASK: "task",
+        CNAVAS: "canvas",
+        IMAGE: "image",
+        types: {},
+        create(typeName) {
+            const {types: types} = I$1;
+            if (types[typeName]) {
+                return types[typeName]++;
+            } else {
+                types[typeName] = 1;
+                return 0;
+            }
+        }
+    };
+    const I$1 = IncrementId;
     let tempA, tempB, tempTo;
-    const {max: max$4} = Math, tempFour = [ 0, 0, 0, 0 ];
+    const {max: max$3} = Math, tempFour = [ 0, 0, 0, 0 ];
     const FourNumberHelper = {
         zero: [ ...tempFour ],
         tempFour: tempFour,
@@ -281,9 +310,9 @@ var LeaferUI = function(exports) {
             return data;
         },
         max(t, other, change) {
-            if (isNumber(t) && isNumber(other)) return max$4(t, other);
+            if (isNumber(t) && isNumber(other)) return max$3(t, other);
             toTempAB(t, other, change);
-            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]));
+            return set$2(tempTo, max$3(tempA[0], tempB[0]), max$3(tempA[1], tempB[1]), max$3(tempA[2], tempB[2]), max$3(tempA[3], tempB[3]));
         },
         add(t, other, change) {
             if (isNumber(t) && isNumber(other)) return t + other;
@@ -298,7 +327,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {set: set$2, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
-    const {round: round$3, pow: pow$1, PI: PI$3} = Math;
+    const {round: round$3, pow: pow$1, max: max$2, floor: floor$1, PI: PI$3} = Math;
     const MathHelper = {
         within(value, min, max) {
             if (isObject(min)) max = min.max, min = min.min;
@@ -350,6 +379,9 @@ var LeaferUI = function(exports) {
                 scaleData.scaleY = scale.y;
             }
         },
+        getFloorScale(num, min = 1) {
+            return max$2(floor$1(num), min) / num;
+        },
         randInt: randInt,
         randColor(opacity) {
             return `rgba(${randInt(255)},${randInt(255)},${randInt(255)},${opacity || 1})`;
@@ -1141,7 +1173,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, fourNumber: fourNumber} = MathHelper;
-    const {floor: floor$2, ceil: ceil$2} = Math;
+    const {floor: floor, ceil: ceil$1} = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
     const toPoint$4 = {};
@@ -1228,20 +1260,20 @@ var LeaferUI = function(exports) {
         toOuterOf(t, matrix, to) {
             to || (to = t);
             if (matrix.b === 0 && matrix.c === 0) {
-                const {a: a, d: d} = matrix;
+                const {a: a, d: d, e: e, f: f} = matrix;
                 if (a > 0) {
                     to.width = t.width * a;
-                    to.x = matrix.e + t.x * a;
+                    to.x = e + t.x * a;
                 } else {
                     to.width = t.width * -a;
-                    to.x = matrix.e + t.x * a - to.width;
+                    to.x = e + t.x * a - to.width;
                 }
                 if (d > 0) {
                     to.height = t.height * d;
-                    to.y = matrix.f + t.y * d;
+                    to.y = f + t.y * d;
                 } else {
                     to.height = t.height * -d;
-                    to.y = matrix.f + t.y * d - to.height;
+                    to.y = f + t.y * d - to.height;
                 }
             } else {
                 point.x = t.x;
@@ -1293,10 +1325,10 @@ var LeaferUI = function(exports) {
         },
         ceil(t) {
             const {x: x, y: y} = t;
-            t.x = floor$2(t.x);
-            t.y = floor$2(t.y);
-            t.width = x > t.x ? ceil$2(t.width + x - t.x) : ceil$2(t.width);
-            t.height = y > t.y ? ceil$2(t.height + y - t.y) : ceil$2(t.height);
+            t.x = floor(t.x);
+            t.y = floor(t.y);
+            t.width = x > t.x ? ceil$1(t.width + x - t.x) : ceil$1(t.width);
+            t.height = y > t.y ? ceil$1(t.height + y - t.y) : ceil$1(t.height);
         },
         unsign(t) {
             if (t.width < 0) {
@@ -2417,7 +2449,7 @@ 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$3, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
+    const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
     const {setPoint: setPoint$1, addPoint: addPoint$1} = TwoPointBoundsHelper;
     const {set: set$1, toNumberPoints: toNumberPoints} = PointHelper;
     const {M: M$5, L: L$6, C: C$4, Q: Q$4, Z: Z$5} = PathCommandMap;
@@ -2520,7 +2552,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$3(totalRadian / PI_2));
+            const parts = ceil(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);
@@ -3480,7 +3512,9 @@ var LeaferUI = function(exports) {
         run() {
             return __awaiter(this, void 0, void 0, function*() {
                 try {
-                    if (this.task && !this.isComplete && this.parent.running) yield this.task();
+                    if (this.isComplete) return;
+                    if (this.canUse && !this.canUse()) return this.cancel();
+                    if (this.task && this.parent.running) yield this.task();
                 } catch (error) {
                     debug$9.error(error);
                 }
@@ -3488,8 +3522,7 @@ var LeaferUI = function(exports) {
         }
         complete() {
             this.isComplete = true;
-            this.parent = null;
-            this.task = null;
+            this.parent = this.task = this.canUse = null;
         }
         cancel() {
             this.isCancel = true;
@@ -3531,7 +3564,7 @@ var LeaferUI = function(exports) {
             if (config) DataHelper.assign(this.config, config);
             this.empty();
         }
-        add(taskCallback, options) {
+        add(taskCallback, options, canUse) {
             let start, parallel, time, delay;
             const task = new TaskItem(taskCallback);
             task.parent = this;
@@ -3542,9 +3575,11 @@ var LeaferUI = function(exports) {
                 start = options.start;
                 time = options.time;
                 delay = options.delay;
+                if (!canUse) canUse = options.canUse;
             }
             if (time) task.time = time;
             if (parallel === false) task.parallel = false;
+            if (canUse) task.canUse = canUse;
             if (isUndefined(delay)) {
                 this.push(task, start);
             } else {
@@ -3614,15 +3649,10 @@ var LeaferUI = function(exports) {
                 this.timer = setTimeout(() => this.nextTask());
                 return;
             }
-            if (task.isCancel) {
-                this.index++;
-                this.runTask();
-                return;
-            }
             task.run().then(() => {
                 this.onTask(task);
                 this.index++;
-                this.nextTask();
+                task.isCancel ? this.runTask() : this.nextTask();
             }).catch(error => {
                 this.onError(error);
             });
@@ -3791,7 +3821,6 @@ var LeaferUI = function(exports) {
     };
     const I = ImageManager;
     const {IMAGE: IMAGE, create: create$1} = IncrementId;
-    const {floor: floor$1, max: max$3} = Math;
     class LeaferImage {
         get url() {
             return this.config.url;
@@ -3816,10 +3845,9 @@ var LeaferUI = function(exports) {
         load(onSuccess, onError) {
             if (!this.loading) {
                 this.loading = true;
-                let {loadImage: loadImage, loadImageWithProgress: loadImageWithProgress} = Platform.origin, onProgress = this.config.showProgress && loadImageWithProgress && this.onProgress.bind(this);
-                if (onProgress) loadImage = loadImageWithProgress;
+                const {crossOrigin: crossOrigin} = this.config;
                 Resource.tasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                    return yield loadImage(this.url, onProgress).then(img => this.setView(img)).catch(e => {
+                    return yield Platform.origin.loadImage(this.url, isUndefined(crossOrigin) ? Platform.image.crossOrigin : crossOrigin, this).then(img => this.setView(img)).catch(e => {
                         this.error = e;
                         this.onComplete(false);
                     });
@@ -3845,9 +3873,6 @@ var LeaferUI = function(exports) {
             this.view = img;
             this.onComplete(true);
         }
-        onProgress(progress) {
-            this.progress = progress;
-        }
         onComplete(isSuccess) {
             let odd;
             this.waitComplete.forEach((item, index) => {
@@ -3866,7 +3891,7 @@ var LeaferUI = function(exports) {
         getFull(_filters) {
             return this.view;
         }
-        getCanvas(width, height, opacity, _filters, xGap, yGap, smooth) {
+        getCanvas(width, height, opacity, filters, xGap, yGap, smooth) {
             width || (width = this.width);
             height || (height = this.height);
             if (this.cache) {
@@ -3879,11 +3904,7 @@ var LeaferUI = function(exports) {
                 }
                 if (data) return data;
             }
-            const canvas = Platform.origin.createCanvas(max$3(floor$1(width + (xGap || 0)), 1), max$3(floor$1(height + (yGap || 0)), 1));
-            const ctx = canvas.getContext("2d");
-            if (opacity) ctx.globalAlpha = opacity;
-            ctx.imageSmoothingEnabled = smooth === false ? false : true;
-            ctx.drawImage(this.view, 0, 0, width, height);
+            const canvas = Platform.image.resize(this.view, width, height, xGap, yGap, undefined, smooth, opacity, filters);
             this.cache = this.use > 1 ? {
                 data: canvas,
                 params: arguments
@@ -3892,13 +3913,7 @@ var LeaferUI = function(exports) {
         }
         getPattern(canvas, repeat, transform, paint) {
             const pattern = Platform.canvas.createPattern(canvas, repeat);
-            try {
-                if (transform && pattern.setTransform) {
-                    pattern.setTransform(transform);
-                    transform = undefined;
-                }
-            } catch (_a) {}
-            if (paint) DataHelper.stintSet(paint, "transform", transform);
+            Platform.image.setPatternTransform(pattern, transform, paint);
             return pattern;
         }
         destroy() {
@@ -5424,12 +5439,12 @@ var LeaferUI = function(exports) {
     const {toBounds: toBounds} = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
-            const layout = this.__layout;
-            toOuterOf$2(layout.renderBounds, this.__world, this.__world);
-            if (layout.resized) {
-                if (layout.resized === "inner") this.__onUpdateSize();
+            const {__layout: __layout, __world: __world} = this;
+            toOuterOf$2(__layout.renderBounds, __world, __world);
+            if (__layout.resized) {
+                if (__layout.resized === "inner") this.__onUpdateSize();
                 if (this.__hasLocalEvent) BoundsEvent.emitLocal(this);
-                layout.resized = undefined;
+                __layout.resized = undefined;
             }
             if (this.__hasWorldEvent) BoundsEvent.emitWorld(this);
         },
@@ -5621,7 +5636,7 @@ var LeaferUI = function(exports) {
     };
     const tempScaleData$1 = {};
     const {LEAF: LEAF, create: create} = IncrementId;
-    const {stintSet: stintSet$3} = DataHelper;
+    const {stintSet: stintSet$4} = DataHelper;
     const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: multiplyParent$1} = MatrixHelper;
     const {toOuterOf: toOuterOf$1} = BoundsHelper;
     const {copy: copy$2, move: move$2} = PointHelper;
@@ -5899,8 +5914,8 @@ var LeaferUI = function(exports) {
                 const cameraWorld = this.__cameraWorld, world = this.__world;
                 multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
                 toOuterOf$1(this.__layout.renderBounds, cameraWorld, cameraWorld);
-                stintSet$3(cameraWorld, "half", world.half);
-                stintSet$3(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
+                stintSet$4(cameraWorld, "half", world.half);
+                stintSet$4(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
                 return cameraWorld;
             } else {
                 return this.__world;
@@ -6413,7 +6428,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.11";
+    const version = "1.10.0";
     const debug$4 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -7341,7 +7356,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {parse: parse, objectToCanvasData: objectToCanvasData} = PathConvert;
-    const {stintSet: stintSet$2} = DataHelper, {hasTransparent: hasTransparent$2} = ColorConvert;
+    const {stintSet: stintSet$3} = DataHelper, {hasTransparent: hasTransparent$2} = ColorConvert;
     const emptyPaint = {};
     const debug$1 = Debug.get("UIData");
     class UIData extends LeafData {
@@ -7405,7 +7420,7 @@ var LeaferUI = function(exports) {
         setFill(value) {
             if (this.__naturalWidth) this.__removeNaturalSize();
             if (isString(value) || !value) {
-                stintSet$2(this, "__isTransparentFill", hasTransparent$2(value));
+                stintSet$3(this, "__isTransparentFill", hasTransparent$2(value));
                 this.__isFills && this.__removePaint("fill", true);
                 this._fill = value;
             } else if (isObject(value)) {
@@ -7414,7 +7429,7 @@ var LeaferUI = function(exports) {
         }
         setStroke(value) {
             if (isString(value) || !value) {
-                stintSet$2(this, "__isTransparentStroke", hasTransparent$2(value));
+                stintSet$3(this, "__isTransparentStroke", hasTransparent$2(value));
                 this.__isStrokes && this.__removePaint("stroke", true);
                 this._stroke = value;
             } else if (isObject(value)) {
@@ -7472,11 +7487,11 @@ var LeaferUI = function(exports) {
             if (removeInput) this.__removeInput(attrName);
             PaintImage.recycleImage(attrName, this);
             if (attrName === "fill") {
-                stintSet$2(this, "__isAlphaPixelFill", undefined);
+                stintSet$3(this, "__isAlphaPixelFill", undefined);
                 this._fill = this.__isFills = undefined;
             } else {
-                stintSet$2(this, "__isAlphaPixelStroke", undefined);
-                stintSet$2(this, "__hasMultiStrokeStyle", undefined);
+                stintSet$3(this, "__isAlphaPixelStroke", undefined);
+                stintSet$3(this, "__hasMultiStrokeStyle", undefined);
                 this._stroke = this.__isStrokes = undefined;
             }
         }
@@ -7608,7 +7623,7 @@ var LeaferUI = function(exports) {
             return data;
         }
     }
-    const {max: max$2, add: add$1} = FourNumberHelper;
+    const {max: max$1, add: add$1} = FourNumberHelper;
     const UIBounds = {
         __updateStrokeSpread() {
             let spread = 0, boxSpread = 0;
@@ -7623,7 +7638,7 @@ var LeaferUI = function(exports) {
             }
             if (data.__useArrow) spread += strokeWidth * 5;
             if (box) {
-                spread = max$2(spread, box.__layout.strokeSpread = box.__updateStrokeSpread());
+                spread = max$1(spread, box.__layout.strokeSpread = box.__updateStrokeSpread());
                 boxSpread = Math.max(boxSpread, box.__layout.strokeBoxSpread);
             }
             this.__layout.strokeBoxSpread = boxSpread;
@@ -7633,33 +7648,33 @@ var LeaferUI = function(exports) {
             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$2(spread, blur);
+            if (blur) spread = max$1(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$2(shapeSpread, Effect.getInnerShadowSpread(this, innerShadow));
-            if (backgroundBlur) shapeSpread = max$2(shapeSpread, backgroundBlur);
+            if (innerShadow) shapeSpread = max$1(shapeSpread, Effect.getInnerShadowSpread(this, innerShadow));
+            if (backgroundBlur) shapeSpread = max$1(shapeSpread, backgroundBlur);
             this.__layout.renderShapeSpread = shapeSpread;
-            return box ? max$2(box.__updateRenderSpread(), spread) : spread;
+            return box ? max$1(box.__updateRenderSpread(), spread) : spread;
         }
     };
-    const {stintSet: stintSet$1} = DataHelper;
+    const {stintSet: stintSet$2} = DataHelper;
     const UIRender = {
         __updateChange() {
             const data = this.__;
             if (data.__useStroke) {
                 const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
-                stintSet$1(this.__world, "half", useStroke && data.strokeAlign === "center" && data.strokeWidth % 2);
-                stintSet$1(data, "__fillAfterStroke", useStroke && data.strokeAlign === "outside" && data.fill && !data.__isTransparentFill);
+                stintSet$2(this.__world, "half", useStroke && data.strokeAlign === "center" && data.strokeWidth % 2);
+                stintSet$2(data, "__fillAfterStroke", useStroke && data.strokeAlign === "outside" && data.fill && !data.__isTransparentFill);
             }
             if (data.__useEffect) {
                 const {shadow: shadow, fill: fill, stroke: stroke} = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-                stintSet$1(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
+                stintSet$2(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
                 data.__useEffect = !!(shadow || otherEffect);
             }
             data.__checkSingle();
-            stintSet$1(data, "__complex", data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+            stintSet$2(data, "__complex", data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
         },
         __drawFast(canvas, options) {
             drawFast(this, canvas, options);
@@ -7675,24 +7690,24 @@ var LeaferUI = function(exports) {
                     this.__nowWorld = this.__getNowWorld(options);
                     const {shadow: shadow, innerShadow: innerShadow, filter: filter} = data;
                     if (shadow) Effect.shadow(this, canvas, shape);
-                    if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
-                    if (fill) data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                    if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
+                    if (fill) data.__isFills ? Paint.fills(fill, this, canvas, options) : Paint.fill(fill, this, canvas, options);
                     if (__drawAfterFill) this.__drawAfterFill(canvas, options);
                     if (innerShadow) Effect.innerShadow(this, canvas, shape);
-                    if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                    if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                     if (filter) Filter.apply(filter, this, this.__nowWorld, canvas, originCanvas, shape);
                     if (shape.worldCanvas) shape.worldCanvas.recycle();
                     shape.canvas.recycle();
                 } else {
-                    if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                    if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                     if (__isFastShadow) {
                         const shadow = data.shadow[0], {scaleX: scaleX, scaleY: scaleY} = this.getRenderScaleData(true, shadow.scaleFixed);
                         canvas.save(), canvas.setWorldShadow(shadow.x * scaleX, shadow.y * scaleY, shadow.blur * scaleX, ColorConvert.string(shadow.color));
                     }
-                    if (fill) data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                    if (fill) data.__isFills ? Paint.fills(fill, this, canvas, options) : Paint.fill(fill, this, canvas, options);
                     if (__isFastShadow) canvas.restore();
                     if (__drawAfterFill) this.__drawAfterFill(canvas, options);
-                    if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                    if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                 }
             } else {
                 if (data.__pathInputed) drawFast(this, canvas, options); else this.__drawFast(canvas, options);
@@ -7701,9 +7716,9 @@ var LeaferUI = function(exports) {
         __drawShape(canvas, options) {
             this.__drawRenderPath(canvas);
             const data = this.__, {fill: fill, stroke: stroke} = data;
-            if (fill && !options.ignoreFill) data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill("#000000", this, canvas);
+            if (fill && !options.ignoreFill) data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas, options) : Paint.fill("#000000", this, canvas, options);
             if (data.__isCanvas) this.__drawAfterFill(canvas, options);
-            if (stroke && !options.ignoreStroke) data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke("#000000", this, canvas);
+            if (stroke && !options.ignoreStroke) data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke("#000000", this, canvas, options);
         },
         __drawAfterFill(canvas, options) {
             if (this.__.__clipAfterFill) {
@@ -7717,10 +7732,10 @@ var LeaferUI = function(exports) {
     function drawFast(ui, canvas, options) {
         const {fill: fill, stroke: stroke, __drawAfterFill: __drawAfterFill, __fillAfterStroke: __fillAfterStroke} = ui.__;
         ui.__drawRenderPath(canvas);
-        if (__fillAfterStroke) Paint.stroke(stroke, ui, canvas);
-        if (fill) Paint.fill(fill, ui, canvas);
+        if (__fillAfterStroke) Paint.stroke(stroke, ui, canvas, options);
+        if (fill) Paint.fill(fill, ui, canvas, options);
         if (__drawAfterFill) ui.__drawAfterFill(canvas, options);
-        if (stroke && !__fillAfterStroke) Paint.stroke(stroke, ui, canvas);
+        if (stroke && !__fillAfterStroke) Paint.stroke(stroke, ui, canvas, options);
     }
     const RectRender = {
         __drawFast(canvas, options) {
@@ -7855,8 +7870,8 @@ var LeaferUI = function(exports) {
                 drawer.roundRect(x, y, width, height, isNumber(cornerRadius) ? [ cornerRadius ] : cornerRadius);
             } else drawer.rect(x, y, width, height);
         }
-        drawImagePlaceholder(canvas, _image) {
-            Paint.fill(this.__.placeholderColor, this, canvas);
+        drawImagePlaceholder(_image, canvas, renderOptions) {
+            Paint.fill(this.__.placeholderColor, this, canvas, renderOptions);
         }
         animate(keyframe, _options, _type, _isTemp) {
             this.set(keyframe);
@@ -8719,7 +8734,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$1, includes: includes, spread: spread, setList: setList} = BoundsHelper, {stintSet: stintSet$1} = DataHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() {
             return "Text";
@@ -8730,13 +8745,14 @@ var LeaferUI = function(exports) {
         }
         __updateTextDrawData() {
             const data = this.__;
-            const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding} = data;
+            const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding, width: width, height: height} = data;
             data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
             data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
-            data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
             data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * .7) / 2;
             data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
-            data.__clipText = textOverflow !== "show" && !data.__autoSize;
+            stintSet$1(data, "__padding", padding && MathHelper.fourNumber(padding));
+            stintSet$1(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
+            stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
             data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
         }
         __updateBoxBounds() {
@@ -8908,34 +8924,18 @@ var LeaferUI = function(exports) {
             });
         };
     }
-    function fillText(ui, canvas) {
-        const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
-        if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
-        let row;
-        for (let i = 0, len = rows.length; i < len; i++) {
-            row = rows[i];
-            if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
-                canvas.fillText(charData.char, charData.x, row.y);
-            });
-        }
-        if (decorationY) {
-            const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
-            if (decorationColor) canvas.fillStyle = decorationColor;
-            rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
-        }
-    }
-    function fill(fill, ui, canvas) {
+    function fill(fill, ui, canvas, renderOptions) {
         canvas.fillStyle = fill;
-        fillPathOrText(ui, canvas);
+        fillPathOrText(ui, canvas, renderOptions);
     }
-    function fills(fills, ui, canvas) {
+    function fills(fills, ui, canvas, renderOptions) {
         let item;
         for (let i = 0, len = fills.length; i < len; i++) {
             item = fills[i];
             if (item.image) {
-                if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font)) continue;
+                if (PaintImage.checkImage(item, !ui.__.__font, ui, canvas, renderOptions)) continue;
                 if (!item.style) {
-                    if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas, item.image);
+                    if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(item.image, canvas, renderOptions);
                     continue;
                 }
             }
@@ -8948,55 +8948,126 @@ var LeaferUI = function(exports) {
                     if (item.scaleFixed === true || item.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
                 }
                 if (item.blendMode) canvas.blendMode = item.blendMode;
-                fillPathOrText(ui, canvas);
+                fillPathOrText(ui, canvas, renderOptions);
                 canvas.restore();
             } else {
                 if (item.blendMode) {
                     canvas.saveBlendMode(item.blendMode);
-                    fillPathOrText(ui, canvas);
+                    fillPathOrText(ui, canvas, renderOptions);
                     canvas.restoreBlendMode();
-                } else fillPathOrText(ui, canvas);
+                } else fillPathOrText(ui, canvas, renderOptions);
+            }
+        }
+    }
+    function fillPathOrText(ui, canvas, renderOptions) {
+        ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
+    }
+    function fillText(ui, canvas, _renderOptions) {
+        const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
+        if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
+        let row;
+        for (let i = 0, len = rows.length; i < len; i++) {
+            row = rows[i];
+            if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
+                canvas.fillText(charData.char, charData.x, row.y);
+            });
+        }
+        if (decorationY) {
+            const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
+            if (decorationColor) canvas.fillStyle = decorationColor;
+            rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
+        }
+    }
+    function stroke(stroke, ui, canvas, renderOptions) {
+        const data = ui.__;
+        if (!data.__strokeWidth) return;
+        if (data.__font) {
+            Paint.strokeText(stroke, ui, canvas, renderOptions);
+        } else {
+            switch (data.strokeAlign) {
+              case "center":
+                drawCenter$1(stroke, 1, ui, canvas, renderOptions);
+                break;
+
+              case "inside":
+                drawInside(stroke, ui, canvas, renderOptions);
+                break;
+
+              case "outside":
+                drawOutside(stroke, ui, canvas, renderOptions);
+                break;
             }
         }
     }
-    function fillPathOrText(ui, canvas) {
-        ui.__.__font ? fillText(ui, canvas) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
+    function strokes(strokes, ui, canvas, renderOptions) {
+        Paint.stroke(strokes, ui, canvas, renderOptions);
+    }
+    function drawCenter$1(stroke, strokeWidthScale, ui, canvas, renderOptions) {
+        const data = ui.__;
+        if (isObject(stroke)) {
+            Paint.drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas, renderOptions);
+        } else {
+            canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+            canvas.stroke();
+        }
+        if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas, renderOptions);
+    }
+    function drawInside(stroke, ui, canvas, renderOptions) {
+        canvas.save();
+        canvas.clipUI(ui);
+        drawCenter$1(stroke, 2, ui, canvas, renderOptions);
+        canvas.restore();
     }
-    function strokeText(stroke, ui, canvas) {
+    function drawOutside(stroke, ui, canvas, renderOptions) {
+        const data = ui.__;
+        if (data.__fillAfterStroke) {
+            drawCenter$1(stroke, 2, ui, canvas, renderOptions);
+        } else {
+            const {renderBounds: renderBounds} = ui.__layout;
+            const out = canvas.getSameCanvas(true, true);
+            ui.__drawRenderPath(out);
+            drawCenter$1(stroke, 2, ui, out, renderOptions);
+            out.clipUI(data);
+            out.clearWorld(renderBounds);
+            LeafHelper.copyCanvasByWorld(ui, canvas, out);
+            out.recycle(ui.__nowWorld);
+        }
+    }
+    function strokeText(stroke, ui, canvas, renderOptions) {
         switch (ui.__.strokeAlign) {
           case "center":
-            drawCenter$1(stroke, 1, ui, canvas);
+            drawCenter(stroke, 1, ui, canvas, renderOptions);
             break;
 
           case "inside":
-            drawAlign(stroke, "inside", ui, canvas);
+            drawAlign(stroke, "inside", ui, canvas, renderOptions);
             break;
 
           case "outside":
-            ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, "outside", ui, canvas);
+            ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas, renderOptions) : drawAlign(stroke, "outside", ui, canvas, renderOptions);
             break;
         }
     }
-    function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
+    function drawCenter(stroke, strokeWidthScale, ui, canvas, renderOptions) {
         const data = ui.__;
         if (isObject(stroke)) {
-            drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
+            Paint.drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas, renderOptions);
         } else {
             canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
-            drawTextStroke(ui, canvas);
+            Paint.drawTextStroke(ui, canvas, renderOptions);
         }
     }
-    function drawAlign(stroke, align, ui, canvas) {
+    function drawAlign(stroke, align, ui, canvas, renderOptions) {
         const out = canvas.getSameCanvas(true, true);
         out.font = ui.__.__font;
-        drawCenter$1(stroke, 2, ui, out);
+        drawCenter(stroke, 2, ui, out, renderOptions);
         out.blendMode = align === "outside" ? "destination-out" : "destination-in";
-        fillText(ui, out);
+        Paint.fillText(ui, out, renderOptions);
         out.blendMode = "normal";
         LeafHelper.copyCanvasByWorld(ui, canvas, out);
         out.recycle(ui.__nowWorld);
     }
-    function drawTextStroke(ui, canvas) {
+    function drawTextStroke(ui, canvas, _renderOptions) {
         let row, data = ui.__.__textDrawData;
         const {rows: rows, decorationY: decorationY} = data;
         for (let i = 0, len = rows.length; i < len; i++) {
@@ -9010,13 +9081,13 @@ var LeaferUI = function(exports) {
             rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
         }
     }
-    function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
+    function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas, renderOptions) {
         let item;
         const data = ui.__, {__hasMultiStrokeStyle: __hasMultiStrokeStyle} = data;
         __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
         for (let i = 0, len = strokes.length; i < len; i++) {
             item = strokes[i];
-            if (item.image && PaintImage.checkImage(ui, canvas, item, false)) continue;
+            if (item.image && PaintImage.checkImage(item, false, ui, canvas, renderOptions)) continue;
             if (item.style) {
                 if (__hasMultiStrokeStyle) {
                     const {strokeStyle: strokeStyle} = item;
@@ -9024,69 +9095,14 @@ var LeaferUI = function(exports) {
                 } else canvas.strokeStyle = item.style;
                 if (item.blendMode) {
                     canvas.saveBlendMode(item.blendMode);
-                    isText ? drawTextStroke(ui, canvas) : canvas.stroke();
+                    isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke();
                     canvas.restoreBlendMode();
                 } else {
-                    isText ? drawTextStroke(ui, canvas) : canvas.stroke();
+                    isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke();
                 }
             }
         }
     }
-    function stroke(stroke, ui, canvas) {
-        const data = ui.__;
-        if (!data.__strokeWidth) return;
-        if (data.__font) {
-            strokeText(stroke, ui, canvas);
-        } else {
-            switch (data.strokeAlign) {
-              case "center":
-                drawCenter(stroke, 1, ui, canvas);
-                break;
-
-              case "inside":
-                drawInside(stroke, ui, canvas);
-                break;
-
-              case "outside":
-                drawOutside(stroke, ui, canvas);
-                break;
-            }
-        }
-    }
-    function strokes(strokes, ui, canvas) {
-        stroke(strokes, ui, canvas);
-    }
-    function drawCenter(stroke, strokeWidthScale, ui, canvas) {
-        const data = ui.__;
-        if (isObject(stroke)) {
-            drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
-        } else {
-            canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
-            canvas.stroke();
-        }
-        if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas);
-    }
-    function drawInside(stroke, ui, canvas) {
-        canvas.save();
-        canvas.clipUI(ui);
-        drawCenter(stroke, 2, ui, canvas);
-        canvas.restore();
-    }
-    function drawOutside(stroke, ui, canvas) {
-        const data = ui.__;
-        if (data.__fillAfterStroke) {
-            drawCenter(stroke, 2, ui, canvas);
-        } else {
-            const {renderBounds: renderBounds} = ui.__layout;
-            const out = canvas.getSameCanvas(true, true);
-            ui.__drawRenderPath(out);
-            drawCenter(stroke, 2, ui, out);
-            out.clipUI(data);
-            out.clearWorld(renderBounds);
-            LeafHelper.copyCanvasByWorld(ui, canvas, out);
-            out.recycle(ui.__nowWorld);
-        }
-    }
     const {getSpread: getSpread, copyAndSpread: copyAndSpread, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$1, getIntersectData: getIntersectData} = BoundsHelper;
     const tempBounds$1 = {};
     function shape(ui, current, options) {
@@ -9235,80 +9251,108 @@ var LeaferUI = function(exports) {
         strokes: strokes,
         strokeText: strokeText,
         drawTextStroke: drawTextStroke,
+        drawStrokesStyle: drawStrokesStyle,
         shape: shape
     };
-    let origin = {}, tempMatrix$1 = getMatrixData();
-    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);
-        scaleHelper(transform, scaleX, scaleY);
-        if (rotation) rotateOfOuter$1(transform, {
-            x: box.x + box.width / 2,
-            y: box.y + box.height / 2
-        }, rotation);
-        data.transform = transform;
-    }
-    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY) {
-        const transform = get$3();
-        layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
-        if (clipScaleX) {
-            if (rotation || skew) {
-                set(tempMatrix$1);
-                scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
-                multiplyParent(transform, tempMatrix$1);
-            } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
+    let cache, box = new Bounds;
+    const {isSame: isSame} = BoundsHelper;
+    function image(ui, attrName, paint, boxBounds, firstUse) {
+        let leafPaint, event;
+        const image = ImageManager.get(paint);
+        if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
+            leafPaint = cache.leafPaint;
+        } else {
+            leafPaint = {
+                type: paint.type,
+                image: image
+            };
+            if (image.hasAlphaPixel) leafPaint.isTransparent = true;
+            cache = image.use > 1 ? {
+                leafPaint: leafPaint,
+                paint: paint,
+                boxBounds: box.set(boxBounds)
+            } : null;
         }
-        data.transform = transform;
-    }
-    function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, skew, align, freeTransform) {
-        const transform = get$3();
-        if (freeTransform) {
-            layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
+        if (firstUse || image.loading) event = {
+            image: image,
+            attrName: attrName,
+            attrValue: paint
+        };
+        if (image.ready) {
+            checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
+            if (firstUse) {
+                onLoad(ui, event);
+                onLoadSuccess(ui, event);
+            }
+        } else if (image.error) {
+            if (firstUse) onLoadError(ui, event, image.error);
         } else {
-            if (rotation) {
-                if (align === "center") {
-                    rotateOfOuter$1(transform, {
-                        x: width / 2,
-                        y: height / 2
-                    }, rotation);
-                } else {
-                    rotate(transform, rotation);
-                    switch (rotation) {
-                      case 90:
-                        translate$1(transform, height, 0);
-                        break;
-
-                      case 180:
-                        translate$1(transform, width, height);
-                        break;
-
-                      case 270:
-                        translate$1(transform, 0, width);
-                        break;
+            if (firstUse) {
+                ignoreRender(ui, true);
+                onLoad(ui, event);
+            }
+            leafPaint.loadId = image.load(() => {
+                ignoreRender(ui, false);
+                if (!ui.destroyed) {
+                    if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
+                        if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true;
+                        ui.forceUpdate("surface");
                     }
+                    onLoadSuccess(ui, event);
                 }
+                leafPaint.loadId = undefined;
+            }, error => {
+                ignoreRender(ui, false);
+                onLoadError(ui, event, error);
+                leafPaint.loadId = undefined;
+            });
+            if (ui.placeholderColor) {
+                if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
+                    if (!image.ready) {
+                        image.isPlacehold = true;
+                        ui.forceUpdate("surface");
+                    }
+                }, ui.placeholderDelay);
             }
-            origin.x = box.x + x;
-            origin.y = box.y + y;
-            translate$1(transform, origin.x, origin.y);
-            if (scaleX) scaleOfOuter$1(transform, origin, scaleX, scaleY);
         }
-        data.transform = transform;
+        return leafPaint;
     }
-    function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
-        if (rotation) rotate(transform, rotation);
-        if (skew) skewHelper(transform, skew.x, skew.y);
-        if (scaleX) scaleHelper(transform, scaleX, scaleY);
-        translate$1(transform, box.x + x, box.y + y);
+    function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
+        if (attrName === "fill" && !ui.__.__naturalWidth) {
+            const data = ui.__;
+            data.__naturalWidth = image.width / data.pixelRatio;
+            data.__naturalHeight = image.height / data.pixelRatio;
+            if (data.__autoSide) {
+                ui.forceUpdate("width");
+                if (ui.__proxyData) {
+                    ui.setProxyAttr("width", data.width);
+                    ui.setProxyAttr("height", data.height);
+                }
+                return false;
+            }
+        }
+        if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds);
+        return true;
+    }
+    function onLoad(ui, event) {
+        emit(ui, ImageEvent.LOAD, event);
+    }
+    function onLoadSuccess(ui, event) {
+        emit(ui, ImageEvent.LOADED, event);
+    }
+    function onLoadError(ui, event, error) {
+        event.error = error;
+        ui.forceUpdate("surface");
+        emit(ui, ImageEvent.ERROR, event);
+    }
+    function emit(ui, type, data) {
+        if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data));
+    }
+    function ignoreRender(ui, value) {
+        const {leafer: leafer} = ui;
+        if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
     }
-    const {get: get$2, translate: translate} = MatrixHelper;
+    const {get: get$3, translate: translate$1} = MatrixHelper;
     const tempBox = new Bounds;
     const tempScaleData = {};
     const tempImage = {};
@@ -9317,12 +9361,12 @@ var LeaferUI = function(exports) {
         if (changeful) leafPaint.changeful = changeful;
         if (sync) leafPaint.sync = sync;
         if (scaleFixed) leafPaint.scaleFixed = scaleFixed;
-        leafPaint.data = getPatternData(paint, box, image);
+        leafPaint.data = PaintImage.getPatternData(paint, box, image);
     }
     function getPatternData(paint, box, image) {
         if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
         if (paint.mode === "strench") paint.mode = "stretch";
-        let {width: width, height: height} = image;
+        const {width: width, height: height} = image;
         const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters} = paint;
         const sameBox = box.width === width && box.height === height;
         const data = {
@@ -9353,8 +9397,8 @@ var LeaferUI = function(exports) {
           case "stretch":
             if (!sameBox) {
                 scaleX = box.width / width, scaleY = box.height / height;
-                stretchMode(data, box, scaleX, scaleY);
-            }
+                PaintImage.stretchMode(data, box, scaleX, scaleY);
+            } else if (scaleX) scaleX = scaleY = undefined;
             break;
 
           case "normal":
@@ -9362,13 +9406,13 @@ var LeaferUI = function(exports) {
             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);
+                PaintImage.clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
                 if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
             }
             break;
 
           case "repeat":
-            if (!sameBox || scaleX || rotation || skew) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
+            if (!sameBox || scaleX || rotation || skew) PaintImage.repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
             if (!repeat) data.repeat = "repeat";
             const count = isObject(repeat);
             if (gap || count) data.gap = getGapData(gap, count && repeat, tempImage.width, tempImage.height, box);
@@ -9377,18 +9421,16 @@ var LeaferUI = function(exports) {
           case "fit":
           case "cover":
           default:
-            if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+            if (scaleX) PaintImage.fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
         }
         if (!data.transform) {
-            if (box.x || box.y) translate(data.transform = get$2(), box.x, box.y);
+            if (box.x || box.y) translate$1(data.transform = get$3(), box.x, box.y);
         }
-        data.width = width;
-        data.height = height;
         if (scaleX) {
             data.scaleX = scaleX;
             data.scaleY = scaleY;
         }
-        if (opacity) data.opacity = opacity;
+        if (opacity && opacity < 1) data.opacity = opacity;
         if (filters) data.filters = filters;
         if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
         return data;
@@ -9407,221 +9449,180 @@ var LeaferUI = function(exports) {
         const value = auto ? remain / ((rows || Math.floor(totalSize / size)) - 1) : gap;
         return gap === "auto" ? value < 0 ? 0 : value : value;
     }
-    let cache, box = new Bounds;
-    const {isSame: isSame} = BoundsHelper;
-    function image(ui, attrName, paint, boxBounds, firstUse) {
-        let leafPaint, event;
-        const image = ImageManager.get(paint);
-        if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
-            leafPaint = cache.leafPaint;
-        } else {
-            leafPaint = {
-                type: paint.type,
-                image: image
-            };
-            if (image.hasAlphaPixel) leafPaint.isTransparent = true;
-            cache = image.use > 1 ? {
-                leafPaint: leafPaint,
-                paint: paint,
-                boxBounds: box.set(boxBounds)
-            } : null;
+    let origin = {}, tempMatrix$1 = getMatrixData();
+    const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
+    function stretchMode(data, box, scaleX, scaleY) {
+        const transform = get$2(), {x: x, y: y} = box;
+        if (x || y) translate(transform, x, y); else transform.onlyScale = true;
+        scaleHelper(transform, scaleX, scaleY);
+        data.transform = transform;
+    }
+    function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
+        const transform = get$2();
+        translate(transform, box.x + x, box.y + y);
+        scaleHelper(transform, scaleX, scaleY);
+        if (rotation) rotateOfOuter$1(transform, {
+            x: box.x + box.width / 2,
+            y: box.y + box.height / 2
+        }, rotation);
+        data.transform = transform;
+    }
+    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY) {
+        const transform = get$2();
+        layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
+        if (clipScaleX) {
+            if (rotation || skew) {
+                set(tempMatrix$1);
+                scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
+                multiplyParent(transform, tempMatrix$1);
+            } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
         }
-        if (firstUse || image.loading) event = {
-            image: image,
-            attrName: attrName,
-            attrValue: paint
-        };
-        if (image.ready) {
-            checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
-            if (firstUse) {
-                onLoad(ui, event);
-                onLoadSuccess(ui, event);
-            }
-        } else if (image.error) {
-            if (firstUse) onLoadError(ui, event, image.error);
+        data.transform = transform;
+    }
+    function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, skew, align, freeTransform) {
+        const transform = get$2();
+        if (freeTransform) {
+            layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
         } else {
-            if (firstUse) {
-                ignoreRender(ui, true);
-                onLoad(ui, event);
-            }
-            leafPaint.loadId = image.load(() => {
-                ignoreRender(ui, false);
-                if (!ui.destroyed) {
-                    if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
-                        if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true;
-                        ui.forceUpdate("surface");
-                    }
-                    onLoadSuccess(ui, event);
-                }
-                leafPaint.loadId = undefined;
-            }, error => {
-                ignoreRender(ui, false);
-                onLoadError(ui, event, error);
-                leafPaint.loadId = undefined;
-            });
-            if (ui.placeholderColor) {
-                if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
-                    if (!image.ready) {
-                        image.isPlacehold = true;
-                        ui.forceUpdate("surface");
+            if (rotation) {
+                if (align === "center") {
+                    rotateOfOuter$1(transform, {
+                        x: width / 2,
+                        y: height / 2
+                    }, rotation);
+                } else {
+                    rotate(transform, rotation);
+                    switch (rotation) {
+                      case 90:
+                        translate(transform, height, 0);
+                        break;
+
+                      case 180:
+                        translate(transform, width, height);
+                        break;
+
+                      case 270:
+                        translate(transform, 0, width);
+                        break;
                     }
-                }, ui.placeholderDelay);
-            }
-        }
-        return leafPaint;
-    }
-    function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-        if (attrName === "fill" && !ui.__.__naturalWidth) {
-            const data = ui.__;
-            data.__naturalWidth = image.width / data.pixelRatio;
-            data.__naturalHeight = image.height / data.pixelRatio;
-            if (data.__autoSide) {
-                ui.forceUpdate("width");
-                if (ui.__proxyData) {
-                    ui.setProxyAttr("width", data.width);
-                    ui.setProxyAttr("height", data.height);
                 }
-                return false;
             }
+            origin.x = box.x + x;
+            origin.y = box.y + y;
+            translate(transform, origin.x, origin.y);
+            if (scaleX) scaleOfOuter$1(transform, origin, scaleX, scaleY);
         }
-        if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds);
-        return true;
-    }
-    function onLoad(ui, event) {
-        emit(ui, ImageEvent.LOAD, event);
-    }
-    function onLoadSuccess(ui, event) {
-        emit(ui, ImageEvent.LOADED, event);
-    }
-    function onLoadError(ui, event, error) {
-        event.error = error;
-        ui.forceUpdate("surface");
-        emit(ui, ImageEvent.ERROR, event);
-    }
-    function emit(ui, type, data) {
-        if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data));
+        data.transform = transform;
     }
-    function ignoreRender(ui, value) {
-        const {leafer: leafer} = ui;
-        if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
+    function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
+        if (rotation) rotate(transform, rotation);
+        if (skew) skewHelper(transform, skew.x, skew.y);
+        if (scaleX) scaleHelper(transform, scaleX, scaleY);
+        translate(transform, box.x + x, box.y + y);
     }
     const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
-    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;
+    const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$1} = Math;
+    function createPatternTask(paint, ui, canvas, renderOptions) {
+        if (!paint.patternTask) {
+            paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
+                paint.patternTask = null;
+                if (canvas.bounds.hit(ui.__nowWorld)) PaintImage.createPattern(paint, ui, canvas, renderOptions);
+                ui.forceUpdate("surface");
+            }), 300);
+        }
+    }
+    function createPattern(paint, ui, canvas, renderOptions) {
+        let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
         if (paint.patternId !== id && !ui.destroyed) {
-            const {image: image, data: data} = paint;
-            let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
-            scaleX *= pixelRatio;
-            scaleY *= pixelRatio;
-            if (sx) {
-                sx = abs$1(sx);
-                sy = abs$1(sy);
-                imageMatrix = get$1();
-                copy$1(imageMatrix, transform);
-                scale(imageMatrix, 1 / sx, 1 / sy);
-                scaleX *= sx;
-                scaleY *= sy;
-            }
-            width *= scaleX;
-            height *= scaleY;
-            const size = width * height;
-            if (!repeat) {
-                if (size > Platform.image.maxCacheSize) return false;
-            }
-            let maxSize = Platform.image.maxPatternSize;
-            if (image.isSVG) {
-                const ws = width / image.width;
-                if (ws > 1) imageScale = ws / ceil(ws);
-            } else {
-                const imageSize = image.width * image.height;
-                if (maxSize > imageSize) maxSize = imageSize;
-            }
-            if (size > maxSize) imageScale = Math.sqrt(size / maxSize);
-            if (imageScale) {
-                scaleX /= imageScale;
-                scaleY /= imageScale;
-                width /= imageScale;
-                height /= imageScale;
-            }
-            if (sx) {
-                scaleX /= sx;
-                scaleY /= sy;
-            }
-            const xGap = gap && gap.x * scaleX;
-            const yGap = gap && gap.y * scaleY;
-            if (transform || scaleX !== 1 || scaleY !== 1) {
-                const canvasWidth = width + (xGap || 0);
-                const canvasHeight = height + (yGap || 0);
-                scaleX /= canvasWidth / max$1(floor(canvasWidth), 1);
-                scaleY /= canvasHeight / max$1(floor(canvasHeight), 1);
-                if (!imageMatrix) {
+            if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
+                const {image: image, data: data} = paint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+                let imageMatrix, xGap, yGap, {width: width, height: height} = image;
+                if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
+                width *= scaleX;
+                height *= scaleY;
+                if (gap) {
+                    xGap = gap.x * scaleX / abs$1(data.scaleX || 1);
+                    yGap = gap.y * scaleY / abs$1(data.scaleY || 1);
+                }
+                if (transform || scaleX !== 1 || scaleY !== 1) {
+                    scaleX *= getFloorScale(width + (xGap || 0));
+                    scaleY *= getFloorScale(height + (yGap || 0));
                     imageMatrix = get$1();
                     if (transform) copy$1(imageMatrix, transform);
+                    scale(imageMatrix, 1 / scaleX, 1 / scaleY);
                 }
-                scale(imageMatrix, 1 / scaleX, 1 / scaleY);
+                const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
+                const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
+                paint.style = pattern;
+                paint.patternId = id;
             }
-            const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
-            const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
-            paint.style = pattern;
-            paint.patternId = id;
-            return true;
+        }
+    }
+    function getPatternFixScale(paint, imageScaleX, imageScaleY) {
+        const {image: image} = paint;
+        let fixScale, maxSize = Platform.image.maxPatternSize, imageSize = image.width * image.height;
+        if (image.isSVG) {
+            if (imageScaleX > 1) fixScale = Math.ceil(imageScaleX) / imageScaleX;
         } else {
-            return false;
+            if (maxSize > imageSize) maxSize = imageSize;
         }
+        if ((imageSize *= imageScaleX * imageScaleY) > maxSize) fixScale = Math.sqrt(maxSize / imageSize);
+        return fixScale;
     }
-    function checkImage(ui, canvas, paint, allowDraw) {
-        const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
-        const {pixelRatio: pixelRatio} = canvas, {data: data} = paint;
-        if (!data || paint.patternId === scaleX + "-" + scaleY + "-" + pixelRatio && !Export.running) {
+    function checkImage(paint, drawImage, ui, canvas, renderOptions) {
+        const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+        const {image: image, data: data} = paint, {exporting: exporting} = renderOptions;
+        if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting) {
             return false;
         } else {
-            if (allowDraw) {
+            if (drawImage) {
                 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;
+                    drawImage = false;
+                } else if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+                    drawImage = Platform.image.isLarge(image, scaleX, scaleY);
                 }
             }
-            if (allowDraw) {
+            if (drawImage) {
                 if (ui.__.__isFastShadow) {
                     canvas.fillStyle = paint.style || "#000";
                     canvas.fill();
                 }
-                drawImage(ui, canvas, paint, data);
+                PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
                 return true;
             } else {
-                if (!paint.style || paint.sync || Export.running) {
-                    createPattern(ui, paint, pixelRatio);
-                } else {
-                    if (!paint.patternTask) {
-                        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                            paint.patternTask = null;
-                            if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, pixelRatio);
-                            ui.forceUpdate("surface");
-                        }), 300);
-                    }
-                }
+                if (!paint.style || paint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
                 return false;
             }
         }
     }
-    function drawImage(ui, canvas, paint, data) {
-        canvas.save();
-        canvas.clipUI(ui);
-        if (paint.blendMode) canvas.blendMode = paint.blendMode;
-        if (data.opacity) canvas.opacity *= data.opacity;
-        if (data.transform) canvas.transform(data.transform);
-        canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
-        canvas.restore();
+    function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
+        const {data: data, image: image, blendMode: blendMode} = paint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
+        let {width: width, height: height} = image, clipUI;
+        if (transform && !transform.onlyScale || (clipUI = u.path || u.cornerRadius) || opacity || blendMode) {
+            canvas.save();
+            clipUI && canvas.clipUI(ui);
+            blendMode && (canvas.blendMode = blendMode);
+            opacity && (canvas.opacity *= opacity);
+            transform && canvas.transform(transform);
+            canvas.drawImage(view, 0, 0, width, height);
+            canvas.restore();
+        } else {
+            if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
+            canvas.drawImage(view, 0, 0, width, height);
+        }
+    }
+    function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
+        const scaleData = ui.getRenderScaleData(true, paint.scaleFixed), {data: data} = paint;
+        if (canvas) {
+            const {pixelRatio: pixelRatio} = canvas;
+            scaleData.scaleX *= pixelRatio;
+            scaleData.scaleY *= pixelRatio;
+        }
+        if (data && data.scaleX) {
+            scaleData.scaleX *= Math.abs(data.scaleX);
+            scaleData.scaleY *= Math.abs(data.scaleY);
+        }
+        return scaleData;
     }
     function recycleImage(attrName, data) {
         const paints = data["_" + attrName];
@@ -9651,8 +9652,12 @@ var LeaferUI = function(exports) {
     const PaintImageModule = {
         image: image,
         checkImage: checkImage,
-        createPattern: createPattern,
+        drawImage: drawImage,
+        getImageRenderScaleData: getImageRenderScaleData,
         recycleImage: recycleImage,
+        createPatternTask: createPatternTask,
+        createPattern: createPattern,
+        getPatternFixScale: getPatternFixScale,
         createData: createData,
         getPatternData: getPatternData,
         stretchMode: stretchMode,
@@ -10039,10 +10044,8 @@ var LeaferUI = function(exports) {
         bounds = drawData.bounds;
         findMaxWidth = !bounds.width && !style.autoSizeAlign;
         const {__letterSpacing: __letterSpacing, paraIndent: paraIndent, textCase: textCase} = style;
-        const {canvas: canvas} = Platform;
-        const {width: width, height: height} = bounds;
-        const charMode = width || height || __letterSpacing || textCase !== "none";
-        if (charMode) {
+        const {canvas: canvas} = Platform, {width: width} = bounds;
+        if (style.__isCharMode) {
             const wrap = style.textWrap !== "none";
             const breakAll = style.textWrap === "break";
             paraStart = true;
@@ -10163,12 +10166,19 @@ var LeaferUI = function(exports) {
     function layoutChar(drawData, style, width, _height) {
         const {rows: rows} = drawData;
         const {textAlign: textAlign, paraIndent: paraIndent, letterSpacing: letterSpacing} = style;
-        let charX, addWordWidth, indentWidth, mode, wordChar, wordsLength;
+        const justifyLast = width && textAlign.includes("both");
+        const justify = justifyLast || width && textAlign.includes("justify");
+        const justifyLetter = justify && textAlign.includes("letter");
+        let charX, remainingWidth, addWordWidth, addLetterWidth, indentWidth, mode, wordChar, wordsLength, isLastWord, canJustify;
         rows.forEach(row => {
             if (row.words) {
                 indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length;
-                addWordWidth = width && (textAlign === "justify" || textAlign === "both") && wordsLength > 1 ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
-                mode = letterSpacing || row.isOverflow ? CharMode : addWordWidth > .01 ? WordMode : TextMode;
+                if (justify) {
+                    canJustify = !row.paraEnd || justifyLast;
+                    remainingWidth = width - row.width - indentWidth;
+                    if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1); else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0;
+                }
+                mode = letterSpacing || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
                 if (row.isOverflow && !letterSpacing) row.textMode = true;
                 if (mode === TextMode) {
                     row.x += indentWidth;
@@ -10186,11 +10196,15 @@ var LeaferUI = function(exports) {
                             charX = toWordChar(word.data, charX, wordChar);
                             if (row.isOverflow || wordChar.char !== " ") row.data.push(wordChar);
                         } else {
-                            charX = toChar(word.data, charX, row.data, row.isOverflow);
+                            charX = toChar(word.data, charX, row.data, row.isOverflow, canJustify && addLetterWidth);
                         }
-                        if (addWordWidth && (!row.paraEnd || textAlign === "both") && index !== wordsLength - 1) {
-                            charX += addWordWidth;
-                            row.width += addWordWidth;
+                        if (canJustify) {
+                            isLastWord = index === wordsLength - 1;
+                            if (addWordWidth) {
+                                if (!isLastWord) charX += addWordWidth, row.width += addWordWidth;
+                            } else if (addLetterWidth) {
+                                row.width += addLetterWidth * (word.data.length - (isLastWord ? 1 : 0));
+                            }
                         }
                     });
                 }
@@ -10213,13 +10227,14 @@ var LeaferUI = function(exports) {
         });
         return charX;
     }
-    function toChar(data, charX, rowData, isOverflow) {
+    function toChar(data, charX, rowData, isOverflow, addLetterWidth) {
         data.forEach(char => {
             if (isOverflow || char.char !== " ") {
                 char.x = charX;
                 rowData.push(char);
             }
             charX += char.width;
+            addLetterWidth && (charX += addLetterWidth);
         });
         return charX;
     }
@@ -10355,10 +10370,10 @@ var LeaferUI = function(exports) {
         let x = 0, y = 0;
         let width = style.__getInput("width") || 0;
         let height = style.__getInput("height") || 0;
-        const {textDecoration: textDecoration, __font: __font, __padding: padding} = style;
+        const {__padding: padding} = style;
         if (padding) {
-            if (width) x = padding[left], width -= padding[right] + padding[left]; else if (!style.autoSizeAlign) x = padding[left];
-            if (height) y = padding[top], height -= padding[top] + padding[bottom]; else if (!style.autoSizeAlign) y = padding[top];
+            if (width) x = padding[left], width -= padding[right] + padding[left], !width && (width = .01); else if (!style.autoSizeAlign) x = padding[left];
+            if (height) y = padding[top], height -= padding[top] + padding[bottom], !height && (height = .01); else if (!style.autoSizeAlign) y = padding[top];
         }
         const drawData = {
             bounds: {
@@ -10369,14 +10384,14 @@ var LeaferUI = function(exports) {
             },
             rows: [],
             paraNumber: 0,
-            font: Platform.canvas.font = __font
+            font: Platform.canvas.font = style.__font
         };
         createRows(drawData, content, style);
         if (padding) padAutoText(padding, drawData, style, width, height);
         layoutText(drawData, style);
-        layoutChar(drawData, style, width);
+        if (style.__isCharMode) layoutChar(drawData, style, width);
         if (drawData.overflow) clipText(drawData, style, x, width);
-        if (textDecoration !== "none") decorationText(drawData, style);
+        if (style.textDecoration !== "none") decorationText(drawData, style);
         return drawData;
     }
     function padAutoText(padding, drawData, style, width, height) {