leafer-ui 2.0.1 → 2.0.2

package/dist/web.cjs

@@ -15,6 +15,39 @@ exports.PathNodeHandleType = void 0;
     PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
 })(exports.PathNodeHandleType || (exports.PathNodeHandleType = {}));
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const debug$2 = core.Debug.get("LeaferCanvas");
 
 class LeaferCanvas extends core.LeaferCanvasBase {
@@ -218,8 +251,6 @@ core.canvasPatch(CanvasRenderingContext2D.prototype);
 
 core.canvasPatch(Path2D.prototype);
 
-const {mineType: mineType, fileType: fileType} = core.FileHelper;
-
 Object.assign(core.Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
     image: options => new core.LeaferImage(options)
@@ -234,29 +265,27 @@ function useCanvas(_canvasType, _power) {
             return canvas;
         },
         canvasToDataURL: (canvas, type, quality) => {
-            const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
+            const imageType = core.FileHelper.mimeType(type), url = canvas.toDataURL(imageType, quality);
             return imageType === "image/bmp" ? url.replace("image/png;", "image/bmp;") : url;
         },
-        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, core.FileHelper.mimeType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
-            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            const url = canvas.toDataURL(core.FileHelper.mimeType(core.FileHelper.fileType(filename)), quality);
             return core.Platform.origin.download(url, filename);
         },
         download(url, filename) {
-            return new Promise(resolve => {
+            return __awaiter(this, void 0, void 0, function*() {
                 let el = document.createElement("a");
                 el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
                 el.click();
                 document.body.removeChild(el);
-                resolve();
             });
         },
-        loadImage(src) {
+        loadImage(src, crossOrigin, _leaferImage) {
             return new Promise((resolve, reject) => {
                 const img = new core.Platform.origin.Image;
-                const {crossOrigin: crossOrigin} = core.Platform.image;
                 if (crossOrigin) {
                     img.setAttribute("crossOrigin", crossOrigin);
                     img.crossOrigin = crossOrigin;
@@ -270,6 +299,13 @@ function useCanvas(_canvasType, _power) {
                 img.src = core.Platform.image.getRealURL(src);
             });
         },
+        loadContent(url_1) {
+            return __awaiter(this, arguments, void 0, function*(url, responseType = "text") {
+                const response = yield fetch(url);
+                if (!response.ok) throw new Error(`${response.status}`);
+                return yield response[responseType]();
+            });
+        },
         Image: Image,
         PointerEvent: PointerEvent,
         DragEvent: DragEvent
@@ -781,7 +817,7 @@ class Renderer {
     getCellList() {
         return undefined;
     }
-    addBlock(block) {
+    addBlock(block, _leafList) {
         if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
@@ -829,7 +865,8 @@ class Renderer {
     __onLayoutEnd(event) {
         if (event.data) event.data.map(item => {
             let empty;
-            if (item.updatedList) item.updatedList.list.some(leaf => {
+            const {updatedList: updatedList} = item;
+            if (updatedList) updatedList.list.some(leaf => {
                 empty = !leaf.__world.width || !leaf.__world.height;
                 if (empty) {
                     if (!leaf.isLeafer) debug.tip(leaf.innerName, ": empty");
@@ -837,7 +874,7 @@ class Renderer {
                 }
                 return empty;
             });
-            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
         });
     }
     emitRender(type, bounds, options) {
@@ -1705,11 +1742,14 @@ function compute(attrName, ui) {
 function getLeafPaint(attrName, paint, ui) {
     if (!core.isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
     let leafPaint;
-    const {boxBounds: boxBounds} = ui.__layout;
-    switch (paint.type) {
+    const {boxBounds: boxBounds} = ui.__layout, {type: type} = paint;
+    switch (type) {
       case "image":
+      case "film":
+      case "video":
         if (!paint.url) return undefined;
         leafPaint = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        if (type !== "image") draw.PaintImage[type](leafPaint);
         break;
 
       case "linear":
@@ -1725,7 +1765,7 @@ function getLeafPaint(attrName, paint, ui) {
         break;
 
       case "solid":
-        const {type: type, color: color, opacity: opacity} = paint;
+        const {color: color, opacity: opacity} = paint;
         leafPaint = {
             type: type,
             style: draw.ColorConvert.string(color, opacity)
@@ -1769,7 +1809,7 @@ const {isSame: isSame} = core.BoundsHelper;
 
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
-    const image = core.ImageManager.get(paint);
+    const image = core.ImageManager.get(paint, paint.type);
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint;
     } else {
@@ -1830,8 +1870,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 }
 
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === "fill" && !ui.__.__naturalWidth) {
-        const data = ui.__;
+    const data = ui.__;
+    if (attrName === "fill" && !data.__naturalWidth) {
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
@@ -1843,7 +1883,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
             return false;
         }
     }
-    if (!leafPaint.data) draw.PaintImage.createData(leafPaint, image, paint, boxBounds);
+    if (!leafPaint.data) {
+        draw.PaintImage.createData(leafPaint, image, paint, boxBounds);
+        const {transform: transform} = leafPaint.data, {opacity: opacity, blendMode: blendMode} = paint;
+        const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
+        if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
+    }
     return true;
 }
 
@@ -1886,7 +1931,7 @@ function getPatternData(paint, box, image) {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === "strench") paint.mode = "stretch";
     const {width: width, height: height} = image;
-    const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters, interlace: interlace} = paint;
+    const {mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, interlace: interlace} = paint;
     const sameBox = box.width === width && box.height === height;
     const data = {
         mode: mode
@@ -1949,8 +1994,6 @@ function getPatternData(paint, box, image) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    if (opacity && opacity < 1) data.opacity = opacity;
-    if (filters) data.filters = filters;
     if (repeat) data.repeat = core.isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     if (interlace) data.interlace = core.isNumber(interlace) || interlace.type === "percent" ? {
         type: "x",
@@ -1981,7 +2024,7 @@ const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translat
 
 function stretchMode(data, box, scaleX, scaleY) {
     const transform = get$2(), {x: x, y: y} = box;
-    if (x || y) translate(transform, x, y); else transform.onlyScale = true;
+    if (x || y) translate(transform, x, y); else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true;
     scaleHelper(transform, scaleX, scaleY);
     data.transform = transform;
 }
@@ -2053,39 +2096,6 @@ function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
     translate(transform, box.x + x, box.y + y);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-        return value instanceof P ? value : new P(function(resolve) {
-            resolve(value);
-        });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) {
-            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const {get: get$1, scale: scale, copy: copy$1} = core.MatrixHelper;
 
 const {getFloorScale: getFloorScale} = core.MathHelper, {abs: abs$1} = Math;
@@ -2103,10 +2113,10 @@ function createPatternTask(paint, ui, canvas, renderOptions) {
 }
 
 function createPattern(paint, ui, canvas, renderOptions) {
-    let {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
+    let {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(core.Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
-            const {image: image, data: data} = paint, {transform: transform, gap: gap} = data, fixScale = draw.PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+            const {image: image, data: data} = paint, {opacity: opacity, filters: filters} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = draw.PaintImage.getPatternFixScale(paint, scaleX, scaleY);
             let imageMatrix, xGap, yGap, {width: width, height: height} = image;
             if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
             width *= scaleX;
@@ -2122,7 +2132,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
                 if (transform) copy$1(imageMatrix, transform);
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
+            const imageCanvas = image.getCanvas(width, height, opacity, filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
             const pattern = image.getPattern(imageCanvas, data.repeat || (core.Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -2143,15 +2153,15 @@ 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 {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
-    if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting || snapshot) {
+    if (!data || paint.patternId === id && !exporting || snapshot) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(originPaint.changeful || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || paint.film || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = core.Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
             }
         }
@@ -2169,20 +2179,21 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     }
 }
 
-function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    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 ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
+function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
+    const {data: data, image: image, complex: complex} = paint;
+    let {width: width, height: height} = image;
+    if (complex) {
+        const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
         canvas.save();
-        clipUI && canvas.clipUI(ui);
+        complex === 2 && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
         opacity && (canvas.opacity *= opacity);
         transform && canvas.transform(transform);
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
         canvas.restore();
     } else {
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
     }
 }
 
@@ -3127,6 +3138,13 @@ Object.assign(core.Creator, {
 
 useCanvas();
 
+Object.defineProperty(exports, "LeaferFilm", {
+    enumerable: true,
+    get: function() {
+        return core.LeaferFilm;
+    }
+});
+
 Object.defineProperty(exports, "LeaferImage", {
     enumerable: true,
     get: function() {
@@ -3134,6 +3152,13 @@ Object.defineProperty(exports, "LeaferImage", {
     }
 });
 
+Object.defineProperty(exports, "LeaferVideo", {
+    enumerable: true,
+    get: function() {
+        return core.LeaferVideo;
+    }
+});
+
 exports.Interaction = Interaction;
 
 exports.Layouter = Layouter;

package/dist/web.esm.js

@@ -1,8 +1,8 @@
-import { Debug, LeaferCanvasBase, Platform, isString, DataHelper, canvasSizeAttrs, isUndefined, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, PointHelper, BoundsHelper, Plugin, MathHelper, isObject, FourNumberHelper, Matrix, ImageEvent, MatrixHelper, AlignHelper, isNumber, getMatrixData, AroundHelper, Direction4 } from "@leafer/core";
+import { Debug, LeaferCanvasBase, Platform, isString, DataHelper, canvasSizeAttrs, isUndefined, ResizeEvent, canvasPatch, Creator, LeaferImage, defineKey, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, PointHelper, BoundsHelper, Plugin, MathHelper, isObject, FourNumberHelper, Matrix, ImageEvent, MatrixHelper, AlignHelper, isNumber, getMatrixData, AroundHelper, Direction4 } from "@leafer/core";
 
 export * from "@leafer/core";
 
-export { LeaferImage } from "@leafer/core";
+export { LeaferFilm, LeaferImage, LeaferVideo } from "@leafer/core";
 
 import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from "@leafer-ui/core";
 
@@ -19,6 +19,39 @@ var PathNodeHandleType;
     PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
 })(PathNodeHandleType || (PathNodeHandleType = {}));
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const debug$2 = Debug.get("LeaferCanvas");
 
 class LeaferCanvas extends LeaferCanvasBase {
@@ -222,8 +255,6 @@ canvasPatch(CanvasRenderingContext2D.prototype);
 
 canvasPatch(Path2D.prototype);
 
-const {mineType: mineType, fileType: fileType} = FileHelper;
-
 Object.assign(Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
     image: options => new LeaferImage(options)
@@ -238,29 +269,27 @@ function useCanvas(_canvasType, _power) {
             return canvas;
         },
         canvasToDataURL: (canvas, type, quality) => {
-            const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
+            const imageType = FileHelper.mimeType(type), url = canvas.toDataURL(imageType, quality);
             return imageType === "image/bmp" ? url.replace("image/png;", "image/bmp;") : url;
         },
-        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, FileHelper.mimeType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
-            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            const url = canvas.toDataURL(FileHelper.mimeType(FileHelper.fileType(filename)), quality);
             return Platform.origin.download(url, filename);
         },
         download(url, filename) {
-            return new Promise(resolve => {
+            return __awaiter(this, void 0, void 0, function*() {
                 let el = document.createElement("a");
                 el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
                 el.click();
                 document.body.removeChild(el);
-                resolve();
             });
         },
-        loadImage(src) {
+        loadImage(src, crossOrigin, _leaferImage) {
             return new Promise((resolve, reject) => {
                 const img = new Platform.origin.Image;
-                const {crossOrigin: crossOrigin} = Platform.image;
                 if (crossOrigin) {
                     img.setAttribute("crossOrigin", crossOrigin);
                     img.crossOrigin = crossOrigin;
@@ -274,6 +303,13 @@ function useCanvas(_canvasType, _power) {
                 img.src = Platform.image.getRealURL(src);
             });
         },
+        loadContent(url_1) {
+            return __awaiter(this, arguments, void 0, function*(url, responseType = "text") {
+                const response = yield fetch(url);
+                if (!response.ok) throw new Error(`${response.status}`);
+                return yield response[responseType]();
+            });
+        },
         Image: Image,
         PointerEvent: PointerEvent,
         DragEvent: DragEvent
@@ -785,7 +821,7 @@ class Renderer {
     getCellList() {
         return undefined;
     }
-    addBlock(block) {
+    addBlock(block, _leafList) {
         if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
@@ -833,7 +869,8 @@ class Renderer {
     __onLayoutEnd(event) {
         if (event.data) event.data.map(item => {
             let empty;
-            if (item.updatedList) item.updatedList.list.some(leaf => {
+            const {updatedList: updatedList} = item;
+            if (updatedList) updatedList.list.some(leaf => {
                 empty = !leaf.__world.width || !leaf.__world.height;
                 if (empty) {
                     if (!leaf.isLeafer) debug.tip(leaf.innerName, ": empty");
@@ -841,7 +878,7 @@ class Renderer {
                 }
                 return empty;
             });
-            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
         });
     }
     emitRender(type, bounds, options) {
@@ -1709,11 +1746,14 @@ function compute(attrName, ui) {
 function getLeafPaint(attrName, paint, ui) {
     if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
     let leafPaint;
-    const {boxBounds: boxBounds} = ui.__layout;
-    switch (paint.type) {
+    const {boxBounds: boxBounds} = ui.__layout, {type: type} = paint;
+    switch (type) {
       case "image":
+      case "film":
+      case "video":
         if (!paint.url) return undefined;
         leafPaint = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        if (type !== "image") PaintImage[type](leafPaint);
         break;
 
       case "linear":
@@ -1729,7 +1769,7 @@ function getLeafPaint(attrName, paint, ui) {
         break;
 
       case "solid":
-        const {type: type, color: color, opacity: opacity} = paint;
+        const {color: color, opacity: opacity} = paint;
         leafPaint = {
             type: type,
             style: ColorConvert.string(color, opacity)
@@ -1773,7 +1813,7 @@ const {isSame: isSame} = BoundsHelper;
 
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
-    const image = ImageManager.get(paint);
+    const image = ImageManager.get(paint, paint.type);
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint;
     } else {
@@ -1834,8 +1874,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 }
 
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === "fill" && !ui.__.__naturalWidth) {
-        const data = ui.__;
+    const data = ui.__;
+    if (attrName === "fill" && !data.__naturalWidth) {
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
@@ -1847,7 +1887,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
             return false;
         }
     }
-    if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds);
+    if (!leafPaint.data) {
+        PaintImage.createData(leafPaint, image, paint, boxBounds);
+        const {transform: transform} = leafPaint.data, {opacity: opacity, blendMode: blendMode} = paint;
+        const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
+        if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
+    }
     return true;
 }
 
@@ -1890,7 +1935,7 @@ function getPatternData(paint, box, image) {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === "strench") paint.mode = "stretch";
     const {width: width, height: height} = image;
-    const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters, interlace: interlace} = paint;
+    const {mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, interlace: interlace} = paint;
     const sameBox = box.width === width && box.height === height;
     const data = {
         mode: mode
@@ -1953,8 +1998,6 @@ function getPatternData(paint, box, image) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    if (opacity && opacity < 1) data.opacity = opacity;
-    if (filters) data.filters = filters;
     if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     if (interlace) data.interlace = isNumber(interlace) || interlace.type === "percent" ? {
         type: "x",
@@ -1985,7 +2028,7 @@ const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translat
 
 function stretchMode(data, box, scaleX, scaleY) {
     const transform = get$2(), {x: x, y: y} = box;
-    if (x || y) translate(transform, x, y); else transform.onlyScale = true;
+    if (x || y) translate(transform, x, y); else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true;
     scaleHelper(transform, scaleX, scaleY);
     data.transform = transform;
 }
@@ -2057,39 +2100,6 @@ function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
     translate(transform, box.x + x, box.y + y);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-        return value instanceof P ? value : new P(function(resolve) {
-            resolve(value);
-        });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) {
-            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
 
 const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$1} = Math;
@@ -2107,10 +2117,10 @@ function createPatternTask(paint, ui, canvas, renderOptions) {
 }
 
 function createPattern(paint, ui, canvas, renderOptions) {
-    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
+    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
-            const {image: image, data: data} = paint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+            const {image: image, data: data} = paint, {opacity: opacity, filters: filters} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
             let imageMatrix, xGap, yGap, {width: width, height: height} = image;
             if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
             width *= scaleX;
@@ -2126,7 +2136,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
                 if (transform) copy$1(imageMatrix, transform);
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
+            const imageCanvas = image.getCanvas(width, height, opacity, filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
             const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -2147,15 +2157,15 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
 }
 
 function checkImage(paint, drawImage, ui, canvas, renderOptions) {
-    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
-    if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting || snapshot) {
+    if (!data || paint.patternId === id && !exporting || snapshot) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(originPaint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || paint.film || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
             }
         }
@@ -2173,20 +2183,21 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     }
 }
 
-function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    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 ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
+function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
+    const {data: data, image: image, complex: complex} = paint;
+    let {width: width, height: height} = image;
+    if (complex) {
+        const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
         canvas.save();
-        clipUI && canvas.clipUI(ui);
+        complex === 2 && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
         opacity && (canvas.opacity *= opacity);
         transform && canvas.transform(transform);
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
         canvas.restore();
     } else {
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
     }
 }