leafer-ui 1.10.0 → 1.11.0

package/dist/web.cjs

@@ -1400,30 +1400,31 @@ function fill(fill, ui, canvas, renderOptions) {
 }
 
 function fills(fills, ui, canvas, renderOptions) {
-    let item;
+    let item, originPaint, countImage;
     for (let i = 0, len = fills.length; i < len; i++) {
-        item = fills[i];
+        item = fills[i], originPaint = item.originPaint;
         if (item.image) {
+            countImage ? countImage++ : countImage = 1;
             if (draw.PaintImage.checkImage(item, !ui.__.__font, ui, canvas, renderOptions)) continue;
             if (!item.style) {
-                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(item.image, canvas, renderOptions);
+                if (countImage === 1 && item.image.isPlacehold) ui.drawImagePlaceholder(item, canvas, renderOptions);
                 continue;
             }
         }
         canvas.fillStyle = item.style;
-        if (item.transform || item.scaleFixed) {
+        if (item.transform || originPaint.scaleFixed) {
             canvas.save();
             if (item.transform) canvas.transform(item.transform);
-            if (item.scaleFixed) {
+            if (originPaint.scaleFixed) {
                 const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
-                if (item.scaleFixed === true || item.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
+                if (originPaint.scaleFixed === true || originPaint.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
             }
-            if (item.blendMode) canvas.blendMode = item.blendMode;
+            if (originPaint.blendMode) canvas.blendMode = originPaint.blendMode;
             fillPathOrText(ui, canvas, renderOptions);
             canvas.restore();
         } else {
-            if (item.blendMode) {
-                canvas.saveBlendMode(item.blendMode);
+            if (originPaint.blendMode) {
+                canvas.saveBlendMode(originPaint.blendMode);
                 fillPathOrText(ui, canvas, renderOptions);
                 canvas.restoreBlendMode();
             } else fillPathOrText(ui, canvas, renderOptions);
@@ -1576,8 +1577,8 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas, renderO
                 const {strokeStyle: 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);
+            if (item.originPaint.blendMode) {
+                canvas.saveBlendMode(item.originPaint.blendMode);
                 isText ? draw.Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke();
                 canvas.restoreBlendMode();
             } else {
@@ -1674,62 +1675,63 @@ function compute(attrName, ui) {
             if (leafPaints.some(item => item.image)) isAlphaPixel = true;
             isTransparent = true;
         }
-    }
-    if (attrName === "fill") {
-        stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
-        stintSet(data, "__isTransparentFill", isTransparent);
+        if (attrName === "fill") {
+            stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
+            stintSet(data, "__isTransparentFill", isTransparent);
+        } else {
+            stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
+            stintSet(data, "__isTransparentStroke", isTransparent);
+            stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
+        }
     } else {
-        stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
-        stintSet(data, "__isTransparentStroke", isTransparent);
-        stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
+        data.__removePaint(attrName, false);
     }
 }
 
 function getLeafPaint(attrName, paint, ui) {
     if (!core.isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
-    let data;
+    let leafPaint;
     const {boxBounds: boxBounds} = ui.__layout;
     switch (paint.type) {
       case "image":
-        data = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        leafPaint = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
         break;
 
       case "linear":
-        data = draw.PaintGradient.linearGradient(paint, boxBounds);
+        leafPaint = draw.PaintGradient.linearGradient(paint, boxBounds);
         break;
 
       case "radial":
-        data = draw.PaintGradient.radialGradient(paint, boxBounds);
+        leafPaint = draw.PaintGradient.radialGradient(paint, boxBounds);
         break;
 
       case "angular":
-        data = draw.PaintGradient.conicGradient(paint, boxBounds);
+        leafPaint = draw.PaintGradient.conicGradient(paint, boxBounds);
         break;
 
       case "solid":
         const {type: type, color: color, opacity: opacity} = paint;
-        data = {
+        leafPaint = {
             type: type,
             style: draw.ColorConvert.string(color, opacity)
         };
         break;
 
       default:
-        if (!core.isUndefined(paint.r)) data = {
+        if (!core.isUndefined(paint.r)) leafPaint = {
             type: "solid",
             style: draw.ColorConvert.string(paint)
         };
     }
-    if (data) {
-        if (core.isString(data.style) && hasTransparent$1(data.style)) data.isTransparent = true;
+    if (leafPaint) {
+        leafPaint.originPaint = paint;
+        if (core.isString(leafPaint.style) && hasTransparent$1(leafPaint.style)) leafPaint.isTransparent = true;
         if (paint.style) {
             if (paint.style.strokeWidth === 0) return undefined;
-            data.strokeStyle = paint.style;
+            leafPaint.strokeStyle = paint.style;
         }
-        if (paint.editing) data.editing = paint.editing;
-        if (paint.blendMode) data.blendMode = paint.blendMode;
     }
-    return data;
+    return leafPaint;
 }
 
 const PaintModule = {
@@ -1862,10 +1864,6 @@ const tempScaleData = {};
 const tempImage = {};
 
 function createData(leafPaint, image, paint, box) {
-    const {changeful: changeful, sync: sync, scaleFixed: scaleFixed} = paint;
-    if (changeful) leafPaint.changeful = changeful;
-    if (sync) leafPaint.sync = sync;
-    if (scaleFixed) leafPaint.scaleFixed = scaleFixed;
     leafPaint.data = draw.PaintImage.getPatternData(paint, box, image);
 }
 
@@ -2125,14 +2123,14 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
 
 function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     const {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
-    const {image: image, data: data} = paint, {exporting: exporting} = renderOptions;
+    const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting} = renderOptions;
     if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(paint.changeful || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = core.Platform.image.isLarge(image, scaleX, scaleY);
             }
         }
@@ -2144,16 +2142,16 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
             draw.PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
             return true;
         } else {
-            if (!paint.style || paint.sync || exporting) draw.PaintImage.createPattern(paint, ui, canvas, renderOptions); else draw.PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
+            if (!paint.style || originPaint.sync || exporting) draw.PaintImage.createPattern(paint, ui, canvas, renderOptions); else draw.PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
             return false;
         }
     }
 }
 
 function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    const {data: data, image: image, blendMode: blendMode} = paint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
+    const {data: data, image: image} = paint, {blendMode: blendMode} = paint.originPaint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
     let {width: width, height: height} = image, clipUI;
-    if (transform && !transform.onlyScale || (clipUI = u.path || u.cornerRadius) || opacity || blendMode) {
+    if ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
         canvas.save();
         clipUI && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
@@ -2168,7 +2166,7 @@ function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions
 }
 
 function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
-    const scaleData = ui.getRenderScaleData(true, paint.scaleFixed), {data: data} = paint;
+    const scaleData = ui.getRenderScaleData(true, paint.originPaint.scaleFixed), {data: data} = paint;
     if (canvas) {
         const {pixelRatio: pixelRatio} = canvas;
         scaleData.scaleX *= pixelRatio;

package/dist/web.esm.js

@@ -1404,30 +1404,31 @@ function fill(fill, ui, canvas, renderOptions) {
 }
 
 function fills(fills, ui, canvas, renderOptions) {
-    let item;
+    let item, originPaint, countImage;
     for (let i = 0, len = fills.length; i < len; i++) {
-        item = fills[i];
+        item = fills[i], originPaint = item.originPaint;
         if (item.image) {
+            countImage ? countImage++ : countImage = 1;
             if (PaintImage.checkImage(item, !ui.__.__font, ui, canvas, renderOptions)) continue;
             if (!item.style) {
-                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(item.image, canvas, renderOptions);
+                if (countImage === 1 && item.image.isPlacehold) ui.drawImagePlaceholder(item, canvas, renderOptions);
                 continue;
             }
         }
         canvas.fillStyle = item.style;
-        if (item.transform || item.scaleFixed) {
+        if (item.transform || originPaint.scaleFixed) {
             canvas.save();
             if (item.transform) canvas.transform(item.transform);
-            if (item.scaleFixed) {
+            if (originPaint.scaleFixed) {
                 const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
-                if (item.scaleFixed === true || item.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
+                if (originPaint.scaleFixed === true || originPaint.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
             }
-            if (item.blendMode) canvas.blendMode = item.blendMode;
+            if (originPaint.blendMode) canvas.blendMode = originPaint.blendMode;
             fillPathOrText(ui, canvas, renderOptions);
             canvas.restore();
         } else {
-            if (item.blendMode) {
-                canvas.saveBlendMode(item.blendMode);
+            if (originPaint.blendMode) {
+                canvas.saveBlendMode(originPaint.blendMode);
                 fillPathOrText(ui, canvas, renderOptions);
                 canvas.restoreBlendMode();
             } else fillPathOrText(ui, canvas, renderOptions);
@@ -1580,8 +1581,8 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas, renderO
                 const {strokeStyle: 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);
+            if (item.originPaint.blendMode) {
+                canvas.saveBlendMode(item.originPaint.blendMode);
                 isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke();
                 canvas.restoreBlendMode();
             } else {
@@ -1678,62 +1679,63 @@ function compute(attrName, ui) {
             if (leafPaints.some(item => item.image)) isAlphaPixel = true;
             isTransparent = true;
         }
-    }
-    if (attrName === "fill") {
-        stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
-        stintSet(data, "__isTransparentFill", isTransparent);
+        if (attrName === "fill") {
+            stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
+            stintSet(data, "__isTransparentFill", isTransparent);
+        } else {
+            stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
+            stintSet(data, "__isTransparentStroke", isTransparent);
+            stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
+        }
     } else {
-        stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
-        stintSet(data, "__isTransparentStroke", isTransparent);
-        stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
+        data.__removePaint(attrName, false);
     }
 }
 
 function getLeafPaint(attrName, paint, ui) {
     if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
-    let data;
+    let leafPaint;
     const {boxBounds: boxBounds} = ui.__layout;
     switch (paint.type) {
       case "image":
-        data = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        leafPaint = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
         break;
 
       case "linear":
-        data = PaintGradient.linearGradient(paint, boxBounds);
+        leafPaint = PaintGradient.linearGradient(paint, boxBounds);
         break;
 
       case "radial":
-        data = PaintGradient.radialGradient(paint, boxBounds);
+        leafPaint = PaintGradient.radialGradient(paint, boxBounds);
         break;
 
       case "angular":
-        data = PaintGradient.conicGradient(paint, boxBounds);
+        leafPaint = PaintGradient.conicGradient(paint, boxBounds);
         break;
 
       case "solid":
         const {type: type, color: color, opacity: opacity} = paint;
-        data = {
+        leafPaint = {
             type: type,
             style: ColorConvert.string(color, opacity)
         };
         break;
 
       default:
-        if (!isUndefined(paint.r)) data = {
+        if (!isUndefined(paint.r)) leafPaint = {
             type: "solid",
             style: ColorConvert.string(paint)
         };
     }
-    if (data) {
-        if (isString(data.style) && hasTransparent$1(data.style)) data.isTransparent = true;
+    if (leafPaint) {
+        leafPaint.originPaint = paint;
+        if (isString(leafPaint.style) && hasTransparent$1(leafPaint.style)) leafPaint.isTransparent = true;
         if (paint.style) {
             if (paint.style.strokeWidth === 0) return undefined;
-            data.strokeStyle = paint.style;
+            leafPaint.strokeStyle = paint.style;
         }
-        if (paint.editing) data.editing = paint.editing;
-        if (paint.blendMode) data.blendMode = paint.blendMode;
     }
-    return data;
+    return leafPaint;
 }
 
 const PaintModule = {
@@ -1866,10 +1868,6 @@ const tempScaleData = {};
 const tempImage = {};
 
 function createData(leafPaint, image, paint, box) {
-    const {changeful: changeful, sync: sync, scaleFixed: scaleFixed} = paint;
-    if (changeful) leafPaint.changeful = changeful;
-    if (sync) leafPaint.sync = sync;
-    if (scaleFixed) leafPaint.scaleFixed = scaleFixed;
     leafPaint.data = PaintImage.getPatternData(paint, box, image);
 }
 
@@ -2129,14 +2127,14 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
 
 function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
-    const {image: image, data: data} = paint, {exporting: exporting} = renderOptions;
+    const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting} = renderOptions;
     if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = Platform.image.isLarge(image, scaleX, scaleY);
             }
         }
@@ -2148,16 +2146,16 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
             PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
             return true;
         } else {
-            if (!paint.style || paint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
+            if (!paint.style || originPaint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
             return false;
         }
     }
 }
 
 function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    const {data: data, image: image, blendMode: blendMode} = paint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
+    const {data: data, image: image} = paint, {blendMode: blendMode} = paint.originPaint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
     let {width: width, height: height} = image, clipUI;
-    if (transform && !transform.onlyScale || (clipUI = u.path || u.cornerRadius) || opacity || blendMode) {
+    if ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
         canvas.save();
         clipUI && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
@@ -2172,7 +2170,7 @@ function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions
 }
 
 function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
-    const scaleData = ui.getRenderScaleData(true, paint.scaleFixed), {data: data} = paint;
+    const scaleData = ui.getRenderScaleData(true, paint.originPaint.scaleFixed), {data: data} = paint;
     if (canvas) {
         const {pixelRatio: pixelRatio} = canvas;
         scaleData.scaleX *= pixelRatio;