@leafer-draw/node 1.6.1 → 1.6.3

package/dist/node.esm.js

@@ -1,9 +1,10 @@
-import { LeaferCanvasBase, Platform, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, ResizeEvent, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4 } from '@leafer/core';
+import { LeaferCanvasBase, Platform, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, ResizeEvent, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
 import { writeFileSync } from 'fs';
-import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect, TwoPointBoundsHelper, Bounds as Bounds$1, FileHelper as FileHelper$1, Platform as Platform$1, Matrix, MathHelper as MathHelper$1, Creator as Creator$1, TaskProcessor, Resource, LeaferCanvasBase as LeaferCanvasBase$1, Debug as Debug$1, Plugin, UI } from '@leafer-ui/draw';
+import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint as Paint$1, Effect, TwoPointBoundsHelper, Bounds as Bounds$1, FileHelper as FileHelper$1, Platform as Platform$2, Matrix, MathHelper as MathHelper$1, Creator as Creator$1, TaskProcessor, Resource, LeaferCanvasBase as LeaferCanvasBase$1, Debug as Debug$1, Plugin, UI } from '@leafer-ui/draw';
 export * from '@leafer-ui/draw';
+import { Platform as Platform$1 } from '@leafer-ui/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -174,17 +175,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() {
@@ -194,13 +193,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;
@@ -243,15 +241,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;
@@ -308,7 +298,7 @@ class Layouter {
         this.disabled = true;
     }
     layout() {
-        if (!this.running)
+        if (this.layouting || !this.running)
             return;
         const { target } = this;
         this.times = 0;
@@ -391,12 +381,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) {
@@ -419,11 +407,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() {
@@ -654,12 +643,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() {
@@ -685,8 +675,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)
@@ -695,7 +687,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)));
@@ -704,65 +696,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);
@@ -804,90 +804,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);
     }
 }
 
@@ -934,9 +904,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);
@@ -946,35 +917,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,
@@ -1033,12 +1031,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)
@@ -1046,38 +1042,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)
@@ -1085,12 +1081,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;
@@ -1098,7 +1094,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) {
@@ -1131,6 +1127,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)
@@ -1155,7 +1153,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');
                 }
@@ -1167,6 +1165,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;
 }
@@ -1372,32 +1381,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;
     }
 }
 
@@ -1407,17 +1417,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) {
@@ -1443,17 +1451,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;
 }
 
@@ -1786,6 +1792,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') {
@@ -2192,7 +2200,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);
@@ -2222,8 +2230,8 @@ const ExportModule = {
         const fileType = FileHelper$1.fileType(filename);
         const isDownload = filename.includes('.');
         options = FileHelper$1.getExportOptions(options);
-        const { toURL } = Platform$1;
-        const { download } = Platform$1.origin;
+        const { toURL } = Platform$2;
+        const { download } = Platform$2.origin;
         if (fileType === 'json') {
             isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
             result = { data: isDownload ? true : leaf.toJSON(options.json) };
@@ -2235,10 +2243,9 @@ const ExportModule = {
         else {
             let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
             const { worldTransform, isLeafer, leafer, isFrame } = leaf;
-            const { slice, trim, padding, onCanvas } = options;
+            const { slice, clip, trim, screenshot, padding, onCanvas } = options;
             const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
             const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
-            const screenshot = options.screenshot || leaf.isApp;
             const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
             const needFill = FileHelper$1.isOpaqueImage(filename) || fill, matrix = new Matrix();
             if (screenshot) {
@@ -2274,12 +2281,9 @@ const ExportModule = {
             const scaleData = { scaleX: 1, scaleY: 1 };
             MathHelper$1.getScaleData(options.scale, options.size, renderBounds, scaleData);
             let pixelRatio = options.pixelRatio || 1;
-            if (leaf.isApp) {
-                scaleData.scaleX *= pixelRatio;
-                scaleData.scaleY *= pixelRatio;
-                pixelRatio = leaf.app.pixelRatio;
-            }
-            const { x, y, width, height } = new Bounds$1(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            let { x, y, width, height } = new Bounds$1(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            if (clip)
+                x += clip.x, y += clip.y, width = clip.width, height = clip.height;
             const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
             let canvas = Creator$1.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
             let sliceLeaf;
@@ -2330,7 +2334,7 @@ const ExportModule = {
         return addTask((success) => new Promise((resolve) => {
             const getResult = () => __awaiter(this, void 0, void 0, function* () {
                 if (!Resource.isComplete)
-                    return Platform$1.requestRender(getResult);
+                    return Platform$2.requestRender(getResult);
                 const result = ExportModule.syncExport(leaf, filename, options);
                 if (result.data instanceof Promise)
                     result.data = yield result.data;
@@ -2375,7 +2379,7 @@ canvas.export = function (filename, options) {
 };
 canvas.toBlob = function (type, quality) {
     return new Promise((resolve) => {
-        Platform$1.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+        Platform$2.origin.canvasToBolb(this.view, type, quality).then((blob) => {
             resolve(blob);
         }).catch((e) => {
             debug.error(e);
@@ -2384,11 +2388,11 @@ canvas.toBlob = function (type, quality) {
     });
 };
 canvas.toDataURL = function (type, quality) {
-    return Platform$1.origin.canvasToDataURL(this.view, type, quality);
+    return Platform$2.origin.canvasToDataURL(this.view, type, quality);
 };
 canvas.saveAs = function (filename, quality) {
     return new Promise((resolve) => {
-        Platform$1.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+        Platform$2.origin.canvasSaveAs(this.view, filename, quality).then(() => {
             resolve(true);
         }).catch((e) => {
             debug.error(e);
@@ -2407,4 +2411,3 @@ UI.prototype.syncExport = function (filename, options) {
 };
 
 export { Layouter, LeaferCanvas, Renderer, Watcher, useCanvas };
-//# sourceMappingURL=node.esm.js.map