leafer-draw 1.6.1 → 1.6.3

package/dist/web.esm.js

@@ -1,8 +1,9 @@
-import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4 } from '@leafer/core';
+import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
-import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
+import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint as Paint$1, Effect } from '@leafer-ui/draw';
 export * from '@leafer-ui/draw';
+import { Platform as Platform$1 } from '@leafer-ui/core';
 
 const debug$2 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -342,17 +343,15 @@ class Watcher {
         this.target.emitEvent(new WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }));
         this.__updatedList = new LeafList();
         this.totalTimes++;
-        this.changed = false;
-        this.hasVisible = false;
-        this.hasRemove = false;
-        this.hasAdd = false;
+        this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false;
     }
     __listenEvents() {
-        const { target } = this;
         this.__eventIds = [
-            target.on_(PropertyEvent.CHANGE, this.__onAttrChange, this),
-            target.on_([ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this),
-            target.on_(WatchEvent.REQUEST, this.__onRquestData, this)
+            this.target.on_([
+                [PropertyEvent.CHANGE, this.__onAttrChange, this],
+                [[ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this],
+                [WatchEvent.REQUEST, this.__onRquestData, this]
+            ])
         ];
     }
     __removeListenEvents() {
@@ -362,13 +361,12 @@ class Watcher {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.__updatedList = null;
+            this.target = this.__updatedList = null;
         }
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
@@ -411,15 +409,7 @@ function updateBounds(boundsList) {
     });
 }
 function updateChange(updateList) {
-    let layout;
-    updateList.list.forEach(leaf => {
-        layout = leaf.__layout;
-        if (layout.opacityChanged)
-            updateAllWorldOpacity(leaf);
-        if (layout.stateStyleChanged)
-            setTimeout(() => layout.stateStyleChanged && leaf.updateState());
-        leaf.__updateChange();
-    });
+    updateList.list.forEach(updateOneChange);
 }
 
 const { worldBounds } = LeafBoundsHelper;
@@ -476,7 +466,7 @@ class Layouter {
         this.disabled = true;
     }
     layout() {
-        if (!this.running)
+        if (this.layouting || !this.running)
             return;
         const { target } = this;
         this.times = 0;
@@ -559,12 +549,10 @@ class Layouter {
     }
     static fullLayout(target) {
         updateAllMatrix(target, true);
-        if (target.isBranch) {
+        if (target.isBranch)
             BranchHelper.updateBounds(target);
-        }
-        else {
+        else
             LeafHelper.updateBounds(target);
-        }
         updateAllChange(target);
     }
     addExtra(leaf) {
@@ -587,11 +575,12 @@ class Layouter {
         this.__updatedList = event.data.updatedList;
     }
     __listenEvents() {
-        const { target } = this;
         this.__eventIds = [
-            target.on_(LayoutEvent.REQUEST, this.layout, this),
-            target.on_(LayoutEvent.AGAIN, this.layoutAgain, this),
-            target.on_(WatchEvent.DATA, this.__onReceiveWatchData, this)
+            this.target.on_([
+                [LayoutEvent.REQUEST, this.layout, this],
+                [LayoutEvent.AGAIN, this.layoutAgain, this],
+                [WatchEvent.DATA, this.__onReceiveWatchData, this]
+            ])
         ];
     }
     __removeListenEvents() {
@@ -822,12 +811,13 @@ class Renderer {
         this.target.emitEvent(new RenderEvent(type, this.times, bounds, options));
     }
     __listenEvents() {
-        const { target } = this;
         this.__eventIds = [
-            target.on_(RenderEvent.REQUEST, this.update, this),
-            target.on_(LayoutEvent.END, this.__onLayoutEnd, this),
-            target.on_(RenderEvent.AGAIN, this.renderAgain, this),
-            target.on_(ResizeEvent.RESIZE, this.__onResize, this)
+            this.target.on_([
+                [RenderEvent.REQUEST, this.update, this],
+                [LayoutEvent.END, this.__onLayoutEnd, this],
+                [RenderEvent.AGAIN, this.renderAgain, this],
+                [ResizeEvent.RESIZE, this.__onResize, this]
+            ])
         ];
     }
     __removeListenEvents() {
@@ -853,8 +843,10 @@ Object.assign(Creator, {
 Platform.layout = Layouter.fullLayout;
 
 function fillText(ui, canvas) {
-    let row, data = ui.__.__textDrawData;
-    const { rows, decorationY } = data;
+    const data = ui.__, { rows, 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)
@@ -863,7 +855,7 @@ function fillText(ui, canvas) {
             row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
     }
     if (decorationY) {
-        const { decorationColor, decorationHeight } = data;
+        const { decorationColor, decorationHeight } = data.__textDrawData;
         if (decorationColor)
             canvas.fillStyle = decorationColor;
         rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
@@ -872,65 +864,73 @@ function fillText(ui, canvas) {
 
 function fill(fill, ui, canvas) {
     canvas.fillStyle = fill;
-    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    fillPathOrText(ui, canvas);
 }
 function fills(fills, ui, canvas) {
     let item;
-    const { windingRule, __font } = ui.__;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
-        if (item.image && PaintImage.checkImage(ui, canvas, item, !__font))
-            continue;
-        if (item.style) {
-            canvas.fillStyle = item.style;
-            if (item.transform) {
-                canvas.save();
-                canvas.transform(item.transform);
-                if (item.blendMode)
-                    canvas.blendMode = item.blendMode;
-                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                canvas.restore();
+        if (item.image) {
+            if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
+                continue;
+            if (!item.style) {
+                if (!i && item.image.isPlacehold)
+                    ui.drawImagePlaceholder(canvas, item.image);
+                continue;
             }
-            else {
-                if (item.blendMode) {
-                    canvas.saveBlendMode(item.blendMode);
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    canvas.restoreBlendMode();
-                }
-                else {
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                }
+        }
+        canvas.fillStyle = item.style;
+        if (item.transform) {
+            canvas.save();
+            canvas.transform(item.transform);
+            if (item.blendMode)
+                canvas.blendMode = item.blendMode;
+            fillPathOrText(ui, canvas);
+            canvas.restore();
+        }
+        else {
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode);
+                fillPathOrText(ui, canvas);
+                canvas.restoreBlendMode();
             }
+            else
+                fillPathOrText(ui, canvas);
         }
     }
 }
+function fillPathOrText(ui, canvas) {
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+}
+
+const Paint = {};
 
 function strokeText(stroke, ui, canvas) {
-    const { strokeAlign } = ui.__;
-    const isStrokes = typeof stroke !== 'string';
-    switch (strokeAlign) {
+    switch (ui.__.strokeAlign) {
         case 'center':
-            canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
-            isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+            drawCenter$1(stroke, 1, ui, canvas);
             break;
         case 'inside':
-            drawAlignStroke('inside', stroke, isStrokes, ui, canvas);
+            drawAlign(stroke, 'inside', ui, canvas);
             break;
         case 'outside':
-            drawAlignStroke('outside', stroke, isStrokes, ui, canvas);
+            ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas);
             break;
     }
 }
-function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
-    const { __strokeWidth, __font } = ui.__;
+function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
+    const data = ui.__;
+    canvas.setStroke(!data.__isStrokes && stroke, data.strokeWidth * strokeWidthScale, data);
+    data.__isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+}
+function drawAlign(stroke, align, ui, canvas) {
     const out = canvas.getSameCanvas(true, true);
-    out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__);
-    out.font = __font;
-    isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
+    out.font = ui.__.__font;
+    drawCenter$1(stroke, 2, ui, out);
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    if (ui.__worldFlipped)
+    if (ui.__worldFlipped || Platform$1.fullImageShadow)
         canvas.copyWorldByReset(out, ui.__nowWorld);
     else
         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
@@ -972,90 +972,60 @@ function drawStrokesStyle(strokes, isText, ui, canvas) {
 }
 
 function stroke(stroke, ui, canvas) {
-    const options = ui.__;
-    const { __strokeWidth, strokeAlign, __font } = options;
-    if (!__strokeWidth)
+    const data = ui.__;
+    if (!data.__strokeWidth)
         return;
-    if (__font) {
+    if (data.__font) {
         strokeText(stroke, ui, canvas);
     }
     else {
-        switch (strokeAlign) {
+        switch (data.strokeAlign) {
             case 'center':
-                canvas.setStroke(stroke, __strokeWidth, options);
-                canvas.stroke();
-                if (options.__useArrow)
-                    strokeArrow(ui, canvas);
+                drawCenter(stroke, 1, ui, canvas);
                 break;
             case 'inside':
-                canvas.save();
-                canvas.setStroke(stroke, __strokeWidth * 2, options);
-                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                canvas.stroke();
-                canvas.restore();
+                drawInside(stroke, ui, canvas);
                 break;
             case 'outside':
-                const out = canvas.getSameCanvas(true, true);
-                out.setStroke(stroke, __strokeWidth * 2, options);
-                ui.__drawRenderPath(out);
-                out.stroke();
-                options.windingRule ? out.clip(options.windingRule) : out.clip();
-                out.clearWorld(ui.__layout.renderBounds);
-                if (ui.__worldFlipped)
-                    canvas.copyWorldByReset(out, ui.__nowWorld);
-                else
-                    canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-                out.recycle(ui.__nowWorld);
+                drawOutside(stroke, ui, canvas);
                 break;
         }
     }
 }
 function strokes(strokes, ui, canvas) {
-    const options = ui.__;
-    const { __strokeWidth, strokeAlign, __font } = options;
-    if (!__strokeWidth)
-        return;
-    if (__font) {
-        strokeText(strokes, ui, canvas);
+    stroke(strokes, ui, canvas);
+}
+function drawCenter(stroke, strokeWidthScale, ui, canvas) {
+    const data = ui.__;
+    canvas.setStroke(!data.__isStrokes && stroke, data.__strokeWidth * strokeWidthScale, data);
+    data.__isStrokes ? drawStrokesStyle(stroke, false, ui, canvas) : canvas.stroke();
+    if (data.__useArrow)
+        Paint.strokeArrow(stroke, ui, canvas);
+}
+function drawInside(stroke, ui, canvas) {
+    const data = ui.__;
+    canvas.save();
+    data.windingRule ? canvas.clip(data.windingRule) : canvas.clip();
+    drawCenter(stroke, 2, ui, canvas);
+    canvas.restore();
+}
+function drawOutside(stroke, ui, canvas) {
+    const data = ui.__;
+    if (data.__fillAfterStroke) {
+        drawCenter(stroke, 2, ui, canvas);
     }
     else {
-        switch (strokeAlign) {
-            case 'center':
-                canvas.setStroke(undefined, __strokeWidth, options);
-                drawStrokesStyle(strokes, false, ui, canvas);
-                if (options.__useArrow)
-                    strokeArrow(ui, canvas);
-                break;
-            case 'inside':
-                canvas.save();
-                canvas.setStroke(undefined, __strokeWidth * 2, options);
-                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                drawStrokesStyle(strokes, false, ui, canvas);
-                canvas.restore();
-                break;
-            case 'outside':
-                const { renderBounds } = ui.__layout;
-                const out = canvas.getSameCanvas(true, true);
-                ui.__drawRenderPath(out);
-                out.setStroke(undefined, __strokeWidth * 2, options);
-                drawStrokesStyle(strokes, false, ui, out);
-                options.windingRule ? out.clip(options.windingRule) : out.clip();
-                out.clearWorld(renderBounds);
-                if (ui.__worldFlipped)
-                    canvas.copyWorldByReset(out, ui.__nowWorld);
-                else
-                    canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
-                out.recycle(ui.__nowWorld);
-                break;
-        }
-    }
-}
-function strokeArrow(ui, canvas) {
-    if (ui.__.dashPattern) {
-        canvas.beginPath();
-        ui.__drawPathByData(canvas, ui.__.__pathForArrow);
-        canvas.dashPattern = null;
-        canvas.stroke();
+        const { renderBounds } = ui.__layout;
+        const out = canvas.getSameCanvas(true, true);
+        ui.__drawRenderPath(out);
+        drawCenter(stroke, 2, ui, out);
+        data.windingRule ? out.clip(data.windingRule) : out.clip();
+        out.clearWorld(renderBounds);
+        if (ui.__worldFlipped || Platform$1.fullImageShadow)
+            canvas.copyWorldByReset(out, ui.__nowWorld);
+        else
+            canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
+        out.recycle(ui.__nowWorld);
     }
 }
 
@@ -1102,9 +1072,10 @@ function shape(ui, current, options) {
 }
 
 let recycleMap;
+const { stintSet } = DataHelper, { hasTransparent: hasTransparent$1 } = ColorConvert;
 function compute(attrName, ui) {
     const data = ui.__, leafPaints = [];
-    let paints = data.__input[attrName], hasOpacityPixel;
+    let paints = data.__input[attrName], isAlphaPixel, isTransparent;
     if (!(paints instanceof Array))
         paints = [paints];
     recycleMap = PaintImage.recycleImage(attrName, data);
@@ -1114,35 +1085,62 @@ function compute(attrName, ui) {
             leafPaints.push(item);
     }
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
-    if (leafPaints.length && leafPaints[0].image)
-        hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
-    attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
+    if (leafPaints.length) {
+        if (leafPaints.every(item => item.isTransparent)) {
+            if (leafPaints.some(item => item.image))
+                isAlphaPixel = true;
+            isTransparent = true;
+        }
+    }
+    if (attrName === 'fill') {
+        stintSet(data, '__isAlphaPixelFill', isAlphaPixel);
+        stintSet(data, '__isTransparentFill', isTransparent);
+    }
+    else {
+        stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
+        stintSet(data, '__isTransparentStroke', isTransparent);
+    }
 }
 function getLeafPaint(attrName, paint, ui) {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
         return undefined;
+    let data;
     const { boxBounds } = ui.__layout;
     switch (paint.type) {
-        case 'solid':
-            let { type, blendMode, color, opacity } = paint;
-            return { type, blendMode, style: ColorConvert.string(color, opacity) };
         case 'image':
-            return PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+            data = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+            break;
         case 'linear':
-            return PaintGradient.linearGradient(paint, boxBounds);
+            data = PaintGradient.linearGradient(paint, boxBounds);
+            break;
         case 'radial':
-            return PaintGradient.radialGradient(paint, boxBounds);
+            data = PaintGradient.radialGradient(paint, boxBounds);
+            break;
         case 'angular':
-            return PaintGradient.conicGradient(paint, boxBounds);
+            data = PaintGradient.conicGradient(paint, boxBounds);
+            break;
+        case 'solid':
+            const { type, blendMode, color, opacity } = paint;
+            data = { type, blendMode, style: ColorConvert.string(color, opacity) };
+            break;
         default:
-            return paint.r !== undefined ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
+            if (paint.r !== undefined)
+                data = { type: 'solid', style: ColorConvert.string(paint) };
+    }
+    if (data) {
+        if (typeof data.style === 'string' && hasTransparent$1(data.style))
+            data.isTransparent = true;
+        if (paint.blendMode)
+            data.blendMode = paint.blendMode;
     }
+    return data;
 }
 
 const PaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,
@@ -1201,12 +1199,10 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
 
 const { get: get$2, translate } = MatrixHelper;
 const tempBox = new Bounds();
-const tempPoint = {};
 const tempScaleData = {};
+const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode, changeful, sync } = paint;
-    if (blendMode)
-        leafPaint.blendMode = blendMode;
+    const { changeful, sync } = paint;
     if (changeful)
         leafPaint.changeful = changeful;
     if (sync)
@@ -1214,38 +1210,38 @@ function createData(leafPaint, image, paint, box) {
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
-    let { width, height } = image;
     if (paint.padding)
         box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === 'strench')
         paint.mode = 'stretch';
+    let { width, height } = image;
     const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
     const sameBox = box.width === width && box.height === height;
     const data = { mode };
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
-    const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
-    let x = 0, y = 0, scaleX, scaleY;
+    BoundsHelper.set(tempImage, 0, 0, swapSize ? height : width, swapSize ? width : height);
+    let scaleX, scaleY;
     if (!mode || mode === 'cover' || mode === 'fit') {
         if (!sameBox || rotation) {
-            const sw = box.width / swapWidth, sh = box.height / swapHeight;
-            scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
-            x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
+            scaleX = scaleY = BoundsHelper.getFitScale(box, tempImage, mode !== 'fit');
+            BoundsHelper.put(box, image, align, scaleX, false, tempImage);
+            BoundsHelper.scale(tempImage, scaleX, scaleY, true);
         }
     }
-    else if (scale || size) {
-        MathHelper.getScaleData(scale, size, image, tempScaleData);
-        scaleX = tempScaleData.scaleX;
-        scaleY = tempScaleData.scaleY;
-    }
-    if (align) {
-        const imageBounds = { x, y, width: swapWidth, height: swapHeight };
-        if (scaleX)
-            imageBounds.width *= scaleX, imageBounds.height *= scaleY;
-        AlignHelper.toPoint(align, imageBounds, box, tempPoint, true);
-        x += tempPoint.x, y += tempPoint.y;
+    else {
+        if (scale || size) {
+            MathHelper.getScaleData(scale, size, image, tempScaleData);
+            scaleX = tempScaleData.scaleX;
+            scaleY = tempScaleData.scaleY;
+        }
+        if (align) {
+            if (scaleX)
+                BoundsHelper.scale(tempImage, scaleX, scaleY, true);
+            AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
+        }
     }
     if (offset)
-        x += offset.x, y += offset.y;
+        PointHelper.move(tempImage, offset);
     switch (mode) {
         case 'stretch':
             if (!sameBox)
@@ -1253,12 +1249,12 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (x || y || scaleX || rotation)
-                clipMode(data, box, x, y, scaleX, scaleY, rotation);
+            if (tempImage.x || tempImage.y || scaleX || rotation)
+                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
-                repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align);
+                repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, align);
             if (!repeat)
                 data.repeat = 'repeat';
             break;
@@ -1266,7 +1262,7 @@ function getPatternData(paint, box, image) {
         case 'cover':
         default:
             if (scaleX)
-                fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
+                fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
     }
     if (!data.transform) {
         if (box.x || box.y) {
@@ -1299,6 +1295,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
     }
     else {
         leafPaint = { type: paint.type, image };
+        if (image.hasAlphaPixel)
+            leafPaint.isTransparent = true;
         cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
     }
     if (firstUse || image.loading)
@@ -1323,7 +1321,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             ignoreRender(ui, false);
             if (!ui.destroyed) {
                 if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
-                    if (image.hasOpacityPixel)
+                    if (image.hasAlphaPixel)
                         ui.__layout.hitCanvasChanged = true;
                     ui.forceUpdate('surface');
                 }
@@ -1335,6 +1333,17 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
+        if (ui.placeholderColor) {
+            if (!ui.placeholderDelay)
+                image.isPlacehold = true;
+            else
+                setTimeout(() => {
+                    if (!image.ready) {
+                        image.isPlacehold = true;
+                        ui.forceUpdate('surface');
+                    }
+                }, ui.placeholderDelay);
+        }
     }
     return leafPaint;
 }
@@ -1572,32 +1581,33 @@ const PaintImageModule = {
     repeatMode
 };
 
-const { toPoint: toPoint$2 } = AroundHelper;
+const { toPoint: toPoint$2 } = AroundHelper, { hasTransparent } = ColorConvert;
 const realFrom$2 = {};
 const realTo$2 = {};
 function linearGradient(paint, box) {
-    let { from, to, type, blendMode, opacity } = paint;
+    let { from, to, type, opacity } = paint;
     toPoint$2(from || 'top', box, realFrom$2);
     toPoint$2(to || 'bottom', box, realTo$2);
     const style = Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
-    applyStops(style, paint.stops, opacity);
     const data = { type, style };
-    if (blendMode)
-        data.blendMode = blendMode;
+    applyStops(data, style, paint.stops, opacity);
     return data;
 }
-function applyStops(gradient, stops, opacity) {
+function applyStops(data, gradient, stops, opacity) {
     if (stops) {
-        let stop;
+        let stop, color, offset, isTransparent;
         for (let i = 0, len = stops.length; i < len; i++) {
             stop = stops[i];
-            if (typeof stop === 'string') {
-                gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
-            }
-            else {
-                gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
-            }
+            if (typeof stop === 'string')
+                offset = i / (len - 1), color = ColorConvert.string(stop, opacity);
+            else
+                offset = stop.offset, color = ColorConvert.string(stop.color, opacity);
+            gradient.addColorStop(offset, color);
+            if (!isTransparent && hasTransparent(color))
+                isTransparent = true;
         }
+        if (isTransparent)
+            data.isTransparent = true;
     }
 }
 
@@ -1607,17 +1617,15 @@ const { toPoint: toPoint$1 } = AroundHelper;
 const realFrom$1 = {};
 const realTo$1 = {};
 function radialGradient(paint, box) {
-    let { from, to, type, opacity, blendMode, stretch } = paint;
+    let { from, to, type, opacity, stretch } = paint;
     toPoint$1(from || 'center', box, realFrom$1);
     toPoint$1(to || 'bottom', box, realTo$1);
     const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
-    applyStops(style, paint.stops, opacity);
     const data = { type, style };
+    applyStops(data, style, paint.stops, opacity);
     const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
     if (transform)
         data.transform = transform;
-    if (blendMode)
-        data.blendMode = blendMode;
     return data;
 }
 function getTransform(box, from, to, stretch, rotate90) {
@@ -1643,17 +1651,15 @@ const { toPoint } = AroundHelper;
 const realFrom = {};
 const realTo = {};
 function conicGradient(paint, box) {
-    let { from, to, type, opacity, blendMode, stretch } = paint;
+    let { from, to, type, opacity, stretch } = paint;
     toPoint(from || 'center', box, realFrom);
     toPoint(to || 'bottom', box, realTo);
     const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
-    applyStops(style, paint.stops, opacity);
     const data = { type, style };
+    applyStops(data, style, paint.stops, opacity);
     const transform = getTransform(box, realFrom, realTo, stretch || 1, Platform.conicGradientRotate90);
     if (transform)
         data.transform = transform;
-    if (blendMode)
-        data.blendMode = blendMode;
     return data;
 }
 
@@ -1986,6 +1992,8 @@ function createRows(drawData, content, style) {
         lastCharType = null;
         startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
         word = { data: [] }, row = { words: [] };
+        if (__letterSpacing)
+            content = [...content];
         for (let i = 0, len = content.length; i < len; i++) {
             char = content[i];
             if (char === '\n') {
@@ -2392,7 +2400,7 @@ const ColorConvertModule = {
 
 Object.assign(TextConvert, TextConvertModule);
 Object.assign(ColorConvert, ColorConvertModule);
-Object.assign(Paint, PaintModule);
+Object.assign(Paint$1, PaintModule);
 Object.assign(PaintImage, PaintImageModule);
 Object.assign(PaintGradient, PaintGradientModule);
 Object.assign(Effect, EffectModule);
@@ -2400,4 +2408,3 @@ Object.assign(Effect, EffectModule);
 useCanvas();
 
 export { Layouter, LeaferCanvas, Renderer, Watcher, useCanvas };
-//# sourceMappingURL=web.esm.js.map