leafer-ui 1.9.12 → 1.10.0

package/dist/web.esm.js

@@ -1,4 +1,4 @@
-import { Debug, LeaferCanvasBase, Platform, isString, isUndefined, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, Plugin, MathHelper, isObject, FourNumberHelper, Matrix, getMatrixData, MatrixHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4, isNumber } from "@leafer/core";
+import { Debug, LeaferCanvasBase, Platform, isString, isUndefined, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, Plugin, MathHelper, isObject, FourNumberHelper, Matrix, ImageEvent, MatrixHelper, AlignHelper, PointHelper, getMatrixData, AroundHelper, Direction4, isNumber } from "@leafer/core";
 
 export * from "@leafer/core";
 
@@ -8,7 +8,7 @@ import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from "@l
 
 export * from "@leafer-ui/core";
 
-import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Effect, Group, TextConvert } from "@leafer-ui/draw";
+import { Paint, PaintImage, ColorConvert, PaintGradient, Effect, Group, TextConvert } from "@leafer-ui/draw";
 
 const debug$2 = Debug.get("LeaferCanvas");
 
@@ -989,6 +989,7 @@ class Picker {
             hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point);
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
+                    if (child.isBranchLeaf && child.__.__clipAfterFill && !child.__hitWorld(point)) continue;
                     if (child.topChildren) this.eachFind(child.topChildren, false);
                     this.eachFind(child.children, child.__onlyHitMask);
                     if (child.isBranchLeaf) this.hitChild(child, point);
@@ -1397,36 +1398,19 @@ class Interaction extends InteractionBase {
     }
 }
 
-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;
             }
         }
@@ -1439,60 +1423,137 @@ function fills(fills, ui, canvas) {
                 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++) {
@@ -1507,13 +1568,13 @@ function drawTextStroke(ui, canvas) {
     }
 }
 
-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;
@@ -1521,75 +1582,15 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
             } 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 = {};
@@ -1745,88 +1746,118 @@ const PaintModule = {
     strokes: strokes,
     strokeText: strokeText,
     drawTextStroke: drawTextStroke,
+    drawStrokesStyle: drawStrokesStyle,
     shape: shape
 };
 
-let origin = {}, tempMatrix$1 = getMatrixData();
+let cache, box = new Bounds;
 
-const {get: get$3, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
+const {isSame: isSame} = BoundsHelper;
 
-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 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;
+    }
+    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 (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);
+        }
+    }
+    return leafPaint;
 }
 
-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 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 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);
-    }
-    data.transform = transform;
+function onLoad(ui, event) {
+    emit(ui, ImageEvent.LOAD, event);
 }
 
-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);
-    } 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;
+function onLoadSuccess(ui, event) {
+    emit(ui, ImageEvent.LOADED, event);
+}
 
-                  case 180:
-                    translate$1(transform, width, height);
-                    break;
+function onLoadError(ui, event, error) {
+    event.error = error;
+    ui.forceUpdate("surface");
+    emit(ui, ImageEvent.ERROR, event);
+}
 
-                  case 270:
-                    translate$1(transform, 0, width);
-                    break;
-                }
-            }
-        }
-        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;
+function emit(ui, type, data) {
+    if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data));
 }
 
-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 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;
 
@@ -1839,13 +1870,13 @@ function createData(leafPaint, image, paint, box) {
     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 = {
@@ -1876,8 +1907,8 @@ function getPatternData(paint, box, image) {
       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":
@@ -1885,13 +1916,13 @@ function getPatternData(paint, box, image) {
         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);
@@ -1900,18 +1931,16 @@ function getPatternData(paint, box, image) {
       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;
@@ -1933,180 +1962,82 @@ function getGapValue(gap, size, totalSize, rows) {
     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;
-    }
-    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 (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);
-        }
-    }
-    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;
-        }
-    }
-    if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds);
-    return true;
-}
-
-function onLoad(ui, event) {
-    emit(ui, ImageEvent.LOAD, event);
-}
+let origin = {}, tempMatrix$1 = getMatrixData();
 
-function onLoadSuccess(ui, event) {
-    emit(ui, ImageEvent.LOADED, event);
-}
+const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
 
-function onLoadError(ui, event, error) {
-    event.error = error;
-    ui.forceUpdate("surface");
-    emit(ui, ImageEvent.ERROR, event);
+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 emit(ui, type, data) {
-    if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data));
+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 ignoreRender(ui, value) {
-    const {leafer: leafer} = ui;
-    if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
+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);
+    }
+    data.transform = transform;
 }
 
-const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
+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 (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;
 
-const {floor: floor, ceil: ceil, max: max$1, abs: abs$1} = Math;
+                  case 180:
+                    translate(transform, width, height);
+                    break;
 
-function createPattern(ui, paint, pixelRatio) {
-    let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
-    const id = scaleX + "-" + scaleY + "-" + pixelRatio;
-    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) {
-                imageMatrix = get$1();
-                if (transform) copy$1(imageMatrix, transform);
+                  case 270:
+                    translate(transform, 0, width);
+                    break;
+                }
             }
-            scale(imageMatrix, 1 / scaleX, 1 / scaleY);
         }
-        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;
-    } else {
-        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);
     }
+    data.transform = transform;
+}
+
+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);
 }
 
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -2142,58 +2073,116 @@ typeof SuppressedError === "function" ? SuppressedError : function(error, suppre
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-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) {
+const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
+
+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) {
+        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);
+            }
+            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;
+        }
+    }
+}
+
+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 {
+        if (maxSize > imageSize) maxSize = imageSize;
+    }
+    if ((imageSize *= imageScaleX * imageScaleY) > maxSize) fixScale = Math.sqrt(maxSize / imageSize);
+    return fixScale;
+}
+
+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) {
@@ -2225,8 +2214,12 @@ function recycleImage(attrName, data) {
 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,
@@ -2682,10 +2675,8 @@ function createRows(drawData, content, style) {
     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;
@@ -2814,12 +2805,19 @@ const TextMode = 2;
 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;
@@ -2837,11 +2835,15 @@ function layoutChar(drawData, style, width, _height) {
                         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));
+                        }
                     }
                 });
             }
@@ -2867,13 +2869,14 @@ function toWordChar(data, charX, wordChar) {
     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;
 }
@@ -3015,10 +3018,10 @@ function getDrawData(content, style) {
     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: {
@@ -3029,14 +3032,14 @@ function getDrawData(content, style) {
         },
         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;
 }