leafer-ui 1.6.2 → 1.6.4

package/dist/web.esm.js

@@ -1,9 +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, Plugin, MathHelper, MatrixHelper, 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, Plugin, MathHelper, MatrixHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
 import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from '@leafer-ui/core';
 export * from '@leafer-ui/core';
-import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
+import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from '@leafer-ui/draw';
 
 const debug$2 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -343,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() {
@@ -363,8 +361,7 @@ class Watcher {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.__updatedList = null;
+            this.target = this.__updatedList = null;
         }
     }
 }
@@ -469,7 +466,7 @@ class Layouter {
         this.disabled = true;
     }
     layout() {
-        if (!this.running)
+        if (this.layouting || !this.running)
             return;
         const { target } = this;
         this.times = 0;
@@ -552,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) {
@@ -580,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() {
@@ -815,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() {
@@ -1373,35 +1370,38 @@ function fillPathOrText(ui, canvas) {
 }
 
 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)
+    copyWorld(canvas, out, ui);
+    out.recycle(ui.__nowWorld);
+}
+function copyWorld(canvas, out, ui) {
+    if (ui.__worldFlipped || Platform.fullImageShadow)
         canvas.copyWorldByReset(out, ui.__nowWorld);
     else
         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-    out.recycle(ui.__nowWorld);
 }
 function drawTextStroke(ui, canvas) {
     let row, data = ui.__.__textDrawData;
@@ -1439,90 +1439,56 @@ 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) {
+    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 {
-        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);
+        out.clipUI(data);
+        out.clearWorld(renderBounds);
+        copyWorld(canvas, out, ui);
+        out.recycle(ui.__nowWorld);
     }
 }
 
@@ -1569,41 +1535,66 @@ 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);
     for (let i = 0, len = paints.length, item; i < len; i++) {
-        item = getLeafPaint(attrName, paints[i], ui);
-        if (item)
-            leafPaints.push(item);
+        (item = getLeafPaint(attrName, paints[i], 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, color, opacity } = paint;
+            data = { type, 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 = {
@@ -1669,12 +1660,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)
@@ -1682,38 +1671,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)
@@ -1721,12 +1710,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;
@@ -1734,7 +1723,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) {
@@ -1767,6 +1756,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)
@@ -1791,7 +1782,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');
                 }
@@ -1803,13 +1794,17 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
-        if (ui.placeholderColor)
-            setTimeout(() => {
-                if (!(image.ready || image.isPlacehold)) {
-                    image.isPlacehold = true;
-                    ui.forceUpdate('surface');
-                }
-            }, 100);
+        if (ui.placeholderColor) {
+            if (!ui.placeholderDelay)
+                image.isPlacehold = true;
+            else
+                setTimeout(() => {
+                    if (!image.ready) {
+                        image.isPlacehold = true;
+                        ui.forceUpdate('surface');
+                    }
+                }, ui.placeholderDelay);
+        }
     }
     return leafPaint;
 }
@@ -1996,7 +1991,7 @@ function checkImage(ui, canvas, paint, allowDraw) {
 }
 function drawImage(ui, canvas, paint, data) {
     canvas.save();
-    ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
+    canvas.clipUI(ui);
     if (paint.blendMode)
         canvas.blendMode = paint.blendMode;
     if (data.opacity)
@@ -2047,32 +2042,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;
     }
 }
 
@@ -2082,17 +2078,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) {
@@ -2118,17 +2112,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;
 }
 
@@ -2164,12 +2156,10 @@ function shadow(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
         }
-        if (ui.__worldFlipped) {
+        if (ui.__worldFlipped)
             current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        }
-        else {
+        else
             current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
-        }
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -2228,12 +2218,10 @@ function innerShadow(ui, current, shape) {
             copyBounds = bounds;
         }
         other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
-        if (ui.__worldFlipped) {
+        if (ui.__worldFlipped)
             current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        }
-        else {
+        else
             current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
-        }
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -2461,6 +2449,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') {