leafer-ui 1.7.0 → 1.8.0

package/README.md

@@ -113,7 +113,10 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
 
 <p><h3 align="center">金牌赞助商</h3></p>
 <p style="display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;">
-  <a target="_blank" href="https://github.com/dromara/yft-design">
+  <a target="_blank" href="https://xpai.design">
+        <img width="180" title="迅排设计" src="https://www.leaferjs.com/image/sponsor/gold/xp.jpg" loading="lazy" />
+    </a>
+    <a target="_blank" href="https://github.com/dromara/yft-design">
         <img width="180" title="yft-design" src="https://www.leaferjs.com/image/sponsor/gold/yft.jpg" loading="lazy" />
     </a>
     <a target="_blank" href="https://www.finclip.com/landing/miniappgame?from=leafer">
@@ -143,12 +146,15 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
     </p>
 <p><h3 align="center">银牌赞助</h3></p>
 <p style="display: flex;flex-wrap: wrap;justify-content: center;gap: 5px;">
-    <a target="_blank" href="https://www.u-tools.cn/plugins/detail/%E6%88%AA%E5%9B%BE%E5%B7%A5%E5%85%B7%20Plus/index.html">
-        <img width="40" title="截图工具 Plus" src="https://www.leaferjs.com/image/sponsor/user/135.png" loading="lazy" />
+<a target="_blank" href="">
+        <img width="40" title="goosen" src="https://www.leaferjs.com/image/sponsor/user/122.jpeg" loading="lazy" />
     </a>
     <a target="_blank" href="">
         <img width="40" title="dev_chen" src="https://www.leaferjs.com/image/sponsor/user/137.jpg" loading="lazy" />
     </a>
+    <a target="_blank" href="https://www.u-tools.cn/plugins/detail/%E6%88%AA%E5%9B%BE%E5%B7%A5%E5%85%B7%20Plus/index.html">
+        <img width="40" title="截图工具 Plus" src="https://www.leaferjs.com/image/sponsor/user/135.png" loading="lazy" />
+    </a>
     <a target="_blank" href="https://frameelf.com/">
         <img width="40" title="边框水印精灵" src="https://www.leaferjs.com/image/sponsor/user/134.jpg" loading="lazy" />
     </a>
@@ -296,7 +302,7 @@ LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标
     </p>
 <p><h3 align="center">铜牌赞助</h3></p>
 <p style="display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;">
-Lauginwing &nbsp;&nbsp;江万江 &nbsp;&nbsp;在路上 &nbsp;&nbsp;张余🌈 &nbsp;&nbsp;Jerry &nbsp;&nbsp;李狗嗨。💢 &nbsp;&nbsp;李维亮 &nbsp;&nbsp;朝夕 &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;zhk &nbsp;&nbsp;格子 &nbsp;&nbsp;等等 &nbsp;&nbsp;goosen &nbsp;&nbsp;建伟F4nniu &nbsp;&nbsp;梁福斌 &nbsp;&nbsp;江万江 &nbsp;&nbsp;杨超 &nbsp;&nbsp;ToB Dev &nbsp;&nbsp;前端之虎陈随易 &nbsp;&nbsp;A☀️云☀️A &nbsp;&nbsp;ʚ LMT ɞ &nbsp;&nbsp;爱发电用户_c9c82 &nbsp;&nbsp;轻简历 &nbsp;&nbsp;爱发电用户_0fac0 &nbsp;&nbsp;wangyesheji.cn &nbsp;&nbsp;风间 &nbsp;&nbsp;爱发电用户_Tqsm &nbsp;&nbsp;爱发电用户_6KpE &nbsp;&nbsp;dongdong &nbsp;&nbsp;zwm &nbsp;&nbsp;爱发电用户_3725c &nbsp;&nbsp;Noth1ng &nbsp;&nbsp;纳西妲の√ &nbsp;&nbsp;爱发电用户_Ahb9 &nbsp;&nbsp;爱发电用户_7617d &nbsp;&nbsp;冷漠 &nbsp;&nbsp;爱发电用户_9RXB &nbsp;&nbsp;今日值得读 &nbsp;&nbsp;爱发电用户_49sT &nbsp;&nbsp;爱发电用户_NFCS &nbsp;&nbsp;爱发电用户_43ad8 &nbsp;&nbsp;爱发电用户_30455 &nbsp;&nbsp;xiaozhang &nbsp;&nbsp;砖吐筷筷 &nbsp;&nbsp;爱发电用户_b47b3 &nbsp;&nbsp;longbow1998 &nbsp;&nbsp;爱发电用户_5d755 &nbsp;&nbsp;爱发电用户_b76b8 &nbsp;&nbsp;爱发电用户_e70c2 &nbsp;&nbsp;爱发电用户_039dc &nbsp;&nbsp;花祁 &nbsp;&nbsp;爱发电用户_99f39 &nbsp;&nbsp;坤坤 &nbsp;&nbsp;爱发电用户_X6hp &nbsp;&nbsp;爱发电用户_s5u9 &nbsp;&nbsp;曹吉美爸爸 &nbsp;&nbsp;啸沧海 &nbsp;&nbsp;Ronny &nbsp;&nbsp;Biu &nbsp;&nbsp;王志强 &nbsp;&nbsp;PD.新城คิดถึง &nbsp;&nbsp;糖颂缘冥倾 &nbsp;&nbsp;ALBERT. &nbsp;&nbsp;爱发电用户_UXEV &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;爱发电用户_76f9d &nbsp;&nbsp;Leafer &nbsp;&nbsp;爱发电用户_Pbm7 &nbsp;&nbsp;</p>
+黑色摩天仑 &nbsp;&nbsp;Charm &nbsp;&nbsp;Lauginwing &nbsp;&nbsp;在路上 &nbsp;&nbsp;张余🌈 &nbsp;&nbsp;Jerry &nbsp;&nbsp;李狗嗨。💢 &nbsp;&nbsp;李维亮 &nbsp;&nbsp;朝夕 &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;zhk &nbsp;&nbsp;格子 &nbsp;&nbsp;等等 &nbsp;&nbsp;goosen &nbsp;&nbsp;建伟F4nniu &nbsp;&nbsp;梁福斌 &nbsp;&nbsp;江万江 &nbsp;&nbsp;杨超 &nbsp;&nbsp;ToB Dev &nbsp;&nbsp;前端之虎陈随易 &nbsp;&nbsp;A☀️云☀️A &nbsp;&nbsp;ʚ LMT ɞ &nbsp;&nbsp;爱发电用户_c9c82 &nbsp;&nbsp;轻简历 &nbsp;&nbsp;爱发电用户_0fac0 &nbsp;&nbsp;wangyesheji.cn &nbsp;&nbsp;风间 &nbsp;&nbsp;爱发电用户_Tqsm &nbsp;&nbsp;爱发电用户_6KpE &nbsp;&nbsp;dongdong &nbsp;&nbsp;zwm &nbsp;&nbsp;爱发电用户_3725c &nbsp;&nbsp;Noth1ng &nbsp;&nbsp;纳西妲の√ &nbsp;&nbsp;爱发电用户_Ahb9 &nbsp;&nbsp;爱发电用户_7617d &nbsp;&nbsp;冷漠 &nbsp;&nbsp;爱发电用户_9RXB &nbsp;&nbsp;今日值得读 &nbsp;&nbsp;爱发电用户_49sT &nbsp;&nbsp;爱发电用户_NFCS &nbsp;&nbsp;爱发电用户_43ad8 &nbsp;&nbsp;爱发电用户_30455 &nbsp;&nbsp;xiaozhang &nbsp;&nbsp;砖吐筷筷 &nbsp;&nbsp;爱发电用户_b47b3 &nbsp;&nbsp;longbow1998 &nbsp;&nbsp;爱发电用户_5d755 &nbsp;&nbsp;爱发电用户_b76b8 &nbsp;&nbsp;爱发电用户_e70c2 &nbsp;&nbsp;爱发电用户_039dc &nbsp;&nbsp;花祁 &nbsp;&nbsp;爱发电用户_99f39 &nbsp;&nbsp;坤坤 &nbsp;&nbsp;爱发电用户_X6hp &nbsp;&nbsp;爱发电用户_s5u9 &nbsp;&nbsp;曹吉美爸爸 &nbsp;&nbsp;啸沧海 &nbsp;&nbsp;Ronny &nbsp;&nbsp;Biu &nbsp;&nbsp;王志强 &nbsp;&nbsp;PD.新城คิดถึง &nbsp;&nbsp;糖颂缘冥倾 &nbsp;&nbsp;ALBERT. &nbsp;&nbsp;爱发电用户_UXEV &nbsp;&nbsp;SaltedFish &nbsp;&nbsp;爱发电用户_76f9d &nbsp;&nbsp;Leafer &nbsp;&nbsp;爱发电用户_Pbm7 &nbsp;&nbsp;</p>
 
 ## License
 

package/dist/web.cjs

@@ -1348,9 +1348,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);
@@ -1386,8 +1391,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);
@@ -1396,15 +1406,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;
@@ -1420,14 +1424,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();
@@ -1466,8 +1477,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);
 }
@@ -1489,7 +1505,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);
     }
 }
@@ -1544,8 +1560,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) {
@@ -1562,6 +1586,7 @@ function compute(attrName, ui) {
     else {
         stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
         stintSet(data, '__isTransparentStroke', isTransparent);
+        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
     }
 }
 function getLeafPaint(attrName, paint, ui) {
@@ -1593,6 +1618,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;
     }
@@ -1612,8 +1642,8 @@ const PaintModule = {
     shape
 };
 
-let origin = {};
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate, skew: skewHelper } = 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);
@@ -1622,7 +1652,7 @@ 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, skew) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
     const transform = get$3();
     if (rotation)
         rotate(transform, rotation);
@@ -1631,6 +1661,10 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
     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) {
@@ -1667,13 +1701,15 @@ const tempBox = new core.Bounds();
 const tempScaleData = {};
 const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync, editing } = 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) {
@@ -1682,7 +1718,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, skew, 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;
@@ -1716,8 +1752,8 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation || skew)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
+            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)
@@ -1854,18 +1890,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$1(sx);
-            sy = abs$1(sy);
+            sx = abs(sx);
+            sy = abs(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
@@ -1950,9 +1984,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;
@@ -1965,8 +1998,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;
@@ -1976,6 +2009,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;
         }
@@ -2164,10 +2201,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);
     });
@@ -2226,10 +2260,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);
     });
@@ -2285,12 +2316,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, Plugin, MathHelper, MatrixHelper, 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, Plugin, MathHelper, getMatrixData, 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';
@@ -1349,9 +1349,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);
@@ -1387,8 +1392,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);
@@ -1397,15 +1407,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;
@@ -1421,14 +1425,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();
@@ -1467,8 +1478,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);
 }
@@ -1490,7 +1506,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);
     }
 }
@@ -1545,8 +1561,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) {
@@ -1563,6 +1587,7 @@ function compute(attrName, ui) {
     else {
         stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
         stintSet(data, '__isTransparentStroke', isTransparent);
+        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
     }
 }
 function getLeafPaint(attrName, paint, ui) {
@@ -1594,6 +1619,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;
     }
@@ -1613,8 +1643,8 @@ const PaintModule = {
     shape
 };
 
-let origin = {};
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate, skew: skewHelper } = 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);
@@ -1623,7 +1653,7 @@ 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, skew) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
     const transform = get$3();
     if (rotation)
         rotate(transform, rotation);
@@ -1632,6 +1662,10 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
     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) {
@@ -1668,13 +1702,15 @@ const tempBox = new Bounds();
 const tempScaleData = {};
 const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync, editing } = 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) {
@@ -1683,7 +1719,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, skew, 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;
@@ -1717,8 +1753,8 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation || skew)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
+            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)
@@ -1855,18 +1891,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$1(sx);
-            sy = abs$1(sy);
+            sx = abs(sx);
+            sy = abs(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
@@ -1951,9 +1985,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;
@@ -1966,8 +1999,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;
@@ -1977,6 +2010,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;
         }
@@ -2165,10 +2202,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);
     });
@@ -2227,10 +2261,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);
     });
@@ -2286,12 +2317,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);
 };