leafer-draw 1.6.7 → 1.8.0

package/dist/web.cjs

@@ -878,9 +878,14 @@ function fills(fills, ui, canvas) {
             }
         }
         canvas.fillStyle = item.style;
-        if (item.transform) {
+        if (item.transform || item.scaleFixed) {
             canvas.save();
-            canvas.transform(item.transform);
+            if (item.transform)
+                canvas.transform(item.transform);
+            if (item.scaleFixed) {
+                const { scaleX, scaleY } = ui.getRenderScaleData(true);
+                canvas.scale(1 / scaleX, 1 / scaleY);
+            }
             if (item.blendMode)
                 canvas.blendMode = item.blendMode;
             fillPathOrText(ui, canvas);
@@ -916,8 +921,13 @@ function strokeText(stroke, ui, canvas) {
 }
 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);
+    if (typeof stroke === 'object') {
+        drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
+    }
+    else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        drawTextStroke(ui, canvas);
+    }
 }
 function drawAlign(stroke, align, ui, canvas) {
     const out = canvas.getSameCanvas(true, true);
@@ -926,15 +936,9 @@ function drawAlign(stroke, align, ui, canvas) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    copyWorld(canvas, out, ui);
+    core.LeafHelper.copyCanvasByWorld(ui, canvas, out);
     out.recycle(ui.__nowWorld);
 }
-function copyWorld(canvas, out, ui) {
-    if (ui.__worldFlipped || core.Platform.fullImageShadow)
-        canvas.copyWorldByReset(out, ui.__nowWorld);
-    else
-        canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-}
 function drawTextStroke(ui, canvas) {
     let row, data = ui.__.__textDrawData;
     const { rows, decorationY } = data;
@@ -950,14 +954,21 @@ function drawTextStroke(ui, canvas) {
         rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
     }
 }
-function drawStrokesStyle(strokes, isText, ui, canvas) {
+function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
     let item;
+    const data = ui.__, { __hasMultiStrokeStyle } = data;
+    __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i];
         if (item.image && draw.PaintImage.checkImage(ui, canvas, item, false))
             continue;
         if (item.style) {
-            canvas.strokeStyle = item.style;
+            if (__hasMultiStrokeStyle) {
+                const { strokeStyle } = item;
+                strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
+            }
+            else
+                canvas.strokeStyle = item.style;
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
                 isText ? drawTextStroke(ui, canvas) : canvas.stroke();
@@ -996,8 +1007,13 @@ function strokes(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 (typeof stroke === 'object') {
+        drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
+    }
+    else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        canvas.stroke();
+    }
     if (data.__useArrow)
         draw.Paint.strokeArrow(stroke, ui, canvas);
 }
@@ -1019,7 +1035,7 @@ function drawOutside(stroke, ui, canvas) {
         drawCenter(stroke, 2, ui, out);
         out.clipUI(data);
         out.clearWorld(renderBounds);
-        copyWorld(canvas, out, ui);
+        core.LeafHelper.copyCanvasByWorld(ui, canvas, out);
         out.recycle(ui.__nowWorld);
     }
 }
@@ -1074,8 +1090,16 @@ function compute(attrName, ui) {
     if (!(paints instanceof Array))
         paints = [paints];
     recycleMap = draw.PaintImage.recycleImage(attrName, data);
+    let maxChildStrokeWidth;
     for (let i = 0, len = paints.length, item; i < len; i++) {
-        (item = getLeafPaint(attrName, paints[i], ui)) && leafPaints.push(item);
+        if (item = getLeafPaint(attrName, paints[i], ui)) {
+            leafPaints.push(item);
+            if (item.strokeStyle) {
+                maxChildStrokeWidth || (maxChildStrokeWidth = 1);
+                if (item.strokeStyle.strokeWidth)
+                    maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
+            }
+        }
     }
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length) {
@@ -1092,6 +1116,7 @@ function compute(attrName, ui) {
     else {
         stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
         stintSet(data, '__isTransparentStroke', isTransparent);
+        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
     }
 }
 function getLeafPaint(attrName, paint, ui) {
@@ -1123,6 +1148,11 @@ function getLeafPaint(attrName, paint, ui) {
     if (data) {
         if (typeof data.style === 'string' && hasTransparent$1(data.style))
             data.isTransparent = true;
+        if (paint.style) {
+            if (paint.style.strokeWidth === 0)
+                return undefined;
+            data.strokeStyle = paint.style;
+        }
         if (paint.blendMode)
             data.blendMode = paint.blendMode;
     }
@@ -1142,8 +1172,8 @@ const PaintModule = {
     shape
 };
 
-let origin = {};
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate } = core.MatrixHelper;
+let origin = {}, tempMatrix = core.getMatrixData();
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = core.MatrixHelper;
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
     translate$1(transform, box.x + x, box.y + y);
@@ -1152,13 +1182,19 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.transform = transform;
 }
-function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
     const transform = get$3();
-    translate$1(transform, box.x + x, box.y + y);
-    if (scaleX)
-        scaleHelper(transform, scaleX, scaleY);
     if (rotation)
         rotate(transform, rotation);
+    if (skew)
+        skewHelper(transform, skew.x, skew.y);
+    if (scaleX)
+        scaleHelper(transform, scaleX, scaleY);
+    translate$1(transform, box.x + x, box.y + y);
+    if (clipSize) {
+        tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
+        multiplyParent(transform, tempMatrix);
+    }
     data.transform = transform;
 }
 function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
@@ -1195,11 +1231,15 @@ const tempBox = new core.Bounds();
 const tempScaleData = {};
 const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync } = paint;
+    const { changeful, sync, editing, scaleFixed } = paint;
     if (changeful)
         leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
+    if (editing)
+        leafPaint.editing = editing;
+    if (scaleFixed)
+        leafPaint.scaleFixed = scaleFixed;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
@@ -1208,7 +1248,7 @@ function getPatternData(paint, box, image) {
     if (paint.mode === 'strench')
         paint.mode = 'stretch';
     let { width, height } = image;
-    const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
+    const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
     const sameBox = box.width === width && box.height === height;
     const data = { mode };
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -1242,8 +1282,8 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+            if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
+                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
@@ -1320,11 +1360,11 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
                 }
                 onLoadSuccess(ui, event);
             }
-            leafPaint.loadId = null;
+            leafPaint.loadId = undefined;
         }, (error) => {
             ignoreRender(ui, false);
             onLoadError(ui, event, error);
-            leafPaint.loadId = null;
+            leafPaint.loadId = undefined;
         });
         if (ui.placeholderColor) {
             if (!ui.placeholderDelay)
@@ -1380,16 +1420,16 @@ function ignoreRender(ui, value) {
 }
 
 const { get: get$1, scale, copy: copy$1 } = core.MatrixHelper;
-const { ceil, abs: abs$1 } = Math;
+const { ceil, abs } = Math;
 function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
     const id = scaleX + '-' + scaleY + '-' + pixelRatio;
     if (paint.patternId !== id && !ui.destroyed) {
-        scaleX = abs$1(scaleX);
-        scaleY = abs$1(scaleY);
         const { image, data } = paint;
         let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
         if (sx) {
+            sx = abs(sx);
+            sy = abs(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
@@ -1474,9 +1514,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const { abs } = Math;
 function checkImage(ui, canvas, paint, allowDraw) {
-    const { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
     const { pixelRatio } = canvas, { data } = paint;
     if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
         return false;
@@ -1489,8 +1528,8 @@ function checkImage(ui, canvas, paint, allowDraw) {
             else {
                 if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
                     let { width, height } = data;
-                    width *= abs(scaleX) * pixelRatio;
-                    height *= abs(scaleY) * pixelRatio;
+                    width *= scaleX * pixelRatio;
+                    height *= scaleY * pixelRatio;
                     if (data.scaleX) {
                         width *= data.scaleX;
                         height *= data.scaleY;
@@ -1500,6 +1539,10 @@ function checkImage(ui, canvas, paint, allowDraw) {
             }
         }
         if (allowDraw) {
+            if (ui.__.__isFastShadow) {
+                canvas.fillStyle = paint.style || '#000';
+                canvas.fill();
+            }
             drawImage(ui, canvas, paint, data);
             return true;
         }
@@ -1688,10 +1731,7 @@ function shadow(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
         }
-        if (ui.__worldFlipped)
-            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        else
-            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -1750,10 +1790,7 @@ function innerShadow(ui, current, shape) {
             copyBounds = bounds;
         }
         other.fillWorld(copyBounds, draw.ColorConvert.string(item.color), 'source-in');
-        if (ui.__worldFlipped)
-            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        else
-            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -1809,12 +1846,11 @@ draw.Group.prototype.__renderMask = function (canvas, options) {
                     contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (!(mask === 'clipping' || mask === 'clipping-path'))
-                continue;
-        }
-        if (excludeRenderBounds(child, options))
+            if (mask === 'clipping' || mask === 'clipping-path')
+                excludeRenderBounds(child, options) || child.__render(canvas, options);
             continue;
-        child.__render(contentCanvas || canvas, options);
+        }
+        excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
     }
     maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
 };

package/dist/web.esm.js

@@ -1,4 +1,4 @@
-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';
+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, getMatrixData, MatrixHelper, MathHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
 import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from '@leafer-ui/draw';
@@ -879,9 +879,14 @@ function fills(fills, ui, canvas) {
             }
         }
         canvas.fillStyle = item.style;
-        if (item.transform) {
+        if (item.transform || item.scaleFixed) {
             canvas.save();
-            canvas.transform(item.transform);
+            if (item.transform)
+                canvas.transform(item.transform);
+            if (item.scaleFixed) {
+                const { scaleX, scaleY } = ui.getRenderScaleData(true);
+                canvas.scale(1 / scaleX, 1 / scaleY);
+            }
             if (item.blendMode)
                 canvas.blendMode = item.blendMode;
             fillPathOrText(ui, canvas);
@@ -917,8 +922,13 @@ function strokeText(stroke, ui, canvas) {
 }
 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);
+    if (typeof stroke === 'object') {
+        drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
+    }
+    else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        drawTextStroke(ui, canvas);
+    }
 }
 function drawAlign(stroke, align, ui, canvas) {
     const out = canvas.getSameCanvas(true, true);
@@ -927,15 +937,9 @@ function drawAlign(stroke, align, ui, canvas) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    copyWorld(canvas, out, ui);
+    LeafHelper.copyCanvasByWorld(ui, canvas, out);
     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);
-}
 function drawTextStroke(ui, canvas) {
     let row, data = ui.__.__textDrawData;
     const { rows, decorationY } = data;
@@ -951,14 +955,21 @@ function drawTextStroke(ui, canvas) {
         rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
     }
 }
-function drawStrokesStyle(strokes, isText, ui, canvas) {
+function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
     let item;
+    const data = ui.__, { __hasMultiStrokeStyle } = data;
+    __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i];
         if (item.image && PaintImage.checkImage(ui, canvas, item, false))
             continue;
         if (item.style) {
-            canvas.strokeStyle = item.style;
+            if (__hasMultiStrokeStyle) {
+                const { strokeStyle } = item;
+                strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
+            }
+            else
+                canvas.strokeStyle = item.style;
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
                 isText ? drawTextStroke(ui, canvas) : canvas.stroke();
@@ -997,8 +1008,13 @@ function strokes(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 (typeof stroke === 'object') {
+        drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
+    }
+    else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        canvas.stroke();
+    }
     if (data.__useArrow)
         Paint.strokeArrow(stroke, ui, canvas);
 }
@@ -1020,7 +1036,7 @@ function drawOutside(stroke, ui, canvas) {
         drawCenter(stroke, 2, ui, out);
         out.clipUI(data);
         out.clearWorld(renderBounds);
-        copyWorld(canvas, out, ui);
+        LeafHelper.copyCanvasByWorld(ui, canvas, out);
         out.recycle(ui.__nowWorld);
     }
 }
@@ -1075,8 +1091,16 @@ function compute(attrName, ui) {
     if (!(paints instanceof Array))
         paints = [paints];
     recycleMap = PaintImage.recycleImage(attrName, data);
+    let maxChildStrokeWidth;
     for (let i = 0, len = paints.length, item; i < len; i++) {
-        (item = getLeafPaint(attrName, paints[i], ui)) && leafPaints.push(item);
+        if (item = getLeafPaint(attrName, paints[i], ui)) {
+            leafPaints.push(item);
+            if (item.strokeStyle) {
+                maxChildStrokeWidth || (maxChildStrokeWidth = 1);
+                if (item.strokeStyle.strokeWidth)
+                    maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
+            }
+        }
     }
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length) {
@@ -1093,6 +1117,7 @@ function compute(attrName, ui) {
     else {
         stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
         stintSet(data, '__isTransparentStroke', isTransparent);
+        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
     }
 }
 function getLeafPaint(attrName, paint, ui) {
@@ -1124,6 +1149,11 @@ function getLeafPaint(attrName, paint, ui) {
     if (data) {
         if (typeof data.style === 'string' && hasTransparent$1(data.style))
             data.isTransparent = true;
+        if (paint.style) {
+            if (paint.style.strokeWidth === 0)
+                return undefined;
+            data.strokeStyle = paint.style;
+        }
         if (paint.blendMode)
             data.blendMode = paint.blendMode;
     }
@@ -1143,8 +1173,8 @@ const PaintModule = {
     shape
 };
 
-let origin = {};
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate } = MatrixHelper;
+let origin = {}, tempMatrix = getMatrixData();
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
     translate$1(transform, box.x + x, box.y + y);
@@ -1153,13 +1183,19 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.transform = transform;
 }
-function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
     const transform = get$3();
-    translate$1(transform, box.x + x, box.y + y);
-    if (scaleX)
-        scaleHelper(transform, scaleX, scaleY);
     if (rotation)
         rotate(transform, rotation);
+    if (skew)
+        skewHelper(transform, skew.x, skew.y);
+    if (scaleX)
+        scaleHelper(transform, scaleX, scaleY);
+    translate$1(transform, box.x + x, box.y + y);
+    if (clipSize) {
+        tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
+        multiplyParent(transform, tempMatrix);
+    }
     data.transform = transform;
 }
 function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
@@ -1196,11 +1232,15 @@ const tempBox = new Bounds();
 const tempScaleData = {};
 const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync } = paint;
+    const { changeful, sync, editing, scaleFixed } = paint;
     if (changeful)
         leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
+    if (editing)
+        leafPaint.editing = editing;
+    if (scaleFixed)
+        leafPaint.scaleFixed = scaleFixed;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
@@ -1209,7 +1249,7 @@ function getPatternData(paint, box, image) {
     if (paint.mode === 'strench')
         paint.mode = 'stretch';
     let { width, height } = image;
-    const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
+    const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
     const sameBox = box.width === width && box.height === height;
     const data = { mode };
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -1243,8 +1283,8 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+            if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
+                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
@@ -1321,11 +1361,11 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
                 }
                 onLoadSuccess(ui, event);
             }
-            leafPaint.loadId = null;
+            leafPaint.loadId = undefined;
         }, (error) => {
             ignoreRender(ui, false);
             onLoadError(ui, event, error);
-            leafPaint.loadId = null;
+            leafPaint.loadId = undefined;
         });
         if (ui.placeholderColor) {
             if (!ui.placeholderDelay)
@@ -1381,16 +1421,16 @@ function ignoreRender(ui, value) {
 }
 
 const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
-const { ceil, abs: abs$1 } = Math;
+const { ceil, abs } = Math;
 function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
     const id = scaleX + '-' + scaleY + '-' + pixelRatio;
     if (paint.patternId !== id && !ui.destroyed) {
-        scaleX = abs$1(scaleX);
-        scaleY = abs$1(scaleY);
         const { image, data } = paint;
         let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
         if (sx) {
+            sx = abs(sx);
+            sy = abs(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
@@ -1475,9 +1515,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const { abs } = Math;
 function checkImage(ui, canvas, paint, allowDraw) {
-    const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
     const { pixelRatio } = canvas, { data } = paint;
     if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
         return false;
@@ -1490,8 +1529,8 @@ function checkImage(ui, canvas, paint, allowDraw) {
             else {
                 if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
                     let { width, height } = data;
-                    width *= abs(scaleX) * pixelRatio;
-                    height *= abs(scaleY) * pixelRatio;
+                    width *= scaleX * pixelRatio;
+                    height *= scaleY * pixelRatio;
                     if (data.scaleX) {
                         width *= data.scaleX;
                         height *= data.scaleY;
@@ -1501,6 +1540,10 @@ function checkImage(ui, canvas, paint, allowDraw) {
             }
         }
         if (allowDraw) {
+            if (ui.__.__isFastShadow) {
+                canvas.fillStyle = paint.style || '#000';
+                canvas.fill();
+            }
             drawImage(ui, canvas, paint, data);
             return true;
         }
@@ -1689,10 +1732,7 @@ function shadow(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
         }
-        if (ui.__worldFlipped)
-            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        else
-            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -1751,10 +1791,7 @@ function innerShadow(ui, current, shape) {
             copyBounds = bounds;
         }
         other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
-        if (ui.__worldFlipped)
-            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        else
-            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -1810,12 +1847,11 @@ Group.prototype.__renderMask = function (canvas, options) {
                     contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (!(mask === 'clipping' || mask === 'clipping-path'))
-                continue;
-        }
-        if (excludeRenderBounds(child, options))
+            if (mask === 'clipping' || mask === 'clipping-path')
+                excludeRenderBounds(child, options) || child.__render(canvas, options);
             continue;
-        child.__render(contentCanvas || canvas, options);
+        }
+        excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
     }
     maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
 };