leafer-ui 2.0.0 → 2.0.2

package/dist/web.module.js

@@ -7,6 +7,45 @@ var PathNodeHandleType;
     PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
 })(PathNodeHandleType || (PathNodeHandleType = {}));
 
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+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;
+};
+
 var Answer;
 
 (function(Answer) {
@@ -1727,7 +1766,7 @@ const Platform = {
         resize(view, width, height, xGap, yGap, clip, smooth, opacity, _filters, interlace) {
             const realWidth = max$3(floor(width + (xGap || 0)), 1), realHeight = max$3(floor(height + (yGap || 0)), 1);
             let interlaceX, interlaceY, interlaceOffset;
-            if (interlace && (interlaceOffset = UnitConvertHelper.number(interlace.offset, (interlaceX = interlace.type === "x") ? width : height))) interlaceX || (interlaceY = true);
+            if (interlace && (interlaceOffset = UnitConvertHelper.number(interlace.offset, interlace.type === "x" ? width : height))) interlace.type === "x" ? interlaceX = true : interlaceY = true;
             const canvas = Platform.origin.createCanvas(interlaceY ? realWidth * 2 : realWidth, interlaceX ? realHeight * 2 : realHeight);
             const ctx = canvas.getContext("2d");
             if (opacity) ctx.globalAlpha = opacity;
@@ -1897,7 +1936,10 @@ const UICreator = {
         list$1[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
-        if (!list$1[tag]) debug$f.error("not register " + tag);
+        if (!list$1[tag]) {
+            debug$f.warn("not register " + tag);
+            return undefined;
+        }
         const ui = new list$1[tag](data);
         if (!isUndefined(x)) {
             ui.x = x;
@@ -1988,45 +2030,6 @@ class CanvasManager {
     }
 }
 
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-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;
-};
-
 function contextAttr(realName) {
     return (target, key) => {
         if (!realName) realName = key;
@@ -3317,10 +3320,10 @@ const PathCommandDataHelper = {
             data.push(O$2, x, y, radius, startAngle, endAngle, anticlockwise ? 1 : 0);
         }
     },
-    arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
+    arcTo(data, x1, y1, x2, y2, radius, lastX, lastY, fullRadius) {
         if (!isUndefined(lastX)) {
-            const d = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2);
-            radius = min$1(radius, min$1(d / 2, d / 2 * abs$3(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+            const r = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / (fullRadius ? 1 : 2);
+            radius = min$1(radius, min$1(r, r * abs$3(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
         }
         data.push(U$2, x1, y1, x2, y2, radius);
     },
@@ -3664,7 +3667,7 @@ const PathCorner = {
         let command, lastCommand, commandLen;
         let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
         if (isArray(cornerRadius)) cornerRadius = cornerRadius[0] || 0;
-        const len = data.length;
+        const len = data.length, three = len === 9;
         const smooth = [];
         while (i < len) {
             command = data[i];
@@ -3676,7 +3679,7 @@ const PathCorner = {
                 if (data[i] === L$1) {
                     secondX = data[i + 1];
                     secondY = data[i + 2];
-                    smooth.push(M, getCenterX(startX, secondX), getCenterY(startY, secondY));
+                    three ? smooth.push(M, startX, startY) : smooth.push(M, getCenterX(startX, secondX), getCenterY(startY, secondY));
                 } else {
                     smooth.push(M, startX, startY);
                 }
@@ -3688,11 +3691,11 @@ const PathCorner = {
                 i += 3;
                 switch (data[i]) {
                   case L$1:
-                    arcTo(smooth, x, y, data[i + 1], data[i + 2], cornerRadius, lastX, lastY);
+                    arcTo(smooth, x, y, data[i + 1], data[i + 2], cornerRadius, lastX, lastY, three);
                     break;
 
                   case Z:
-                    arcTo(smooth, x, y, startX, startY, cornerRadius, lastX, lastY);
+                    arcTo(smooth, x, y, startX, startY, cornerRadius, lastX, lastY, three);
                     break;
 
                   default:
@@ -3704,7 +3707,7 @@ const PathCorner = {
 
               case Z:
                 if (lastCommand !== Z) {
-                    arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
+                    arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY, three);
                     smooth.push(Z);
                 }
                 i += 1;
@@ -3754,10 +3757,10 @@ function canvasPatch(drawer) {
 const FileHelper = {
     alphaPixelTypes: [ "png", "webp", "svg" ],
     upperCaseTypeMap: {},
-    mineType(type) {
-        if (!type || type.startsWith("image")) return type;
+    mimeType(type, base = "image") {
+        if (!type || type.startsWith(base)) return type;
         if (type === "jpg") type = "jpeg";
-        return "image/" + type;
+        return base + "/" + type;
     },
     fileType(filename) {
         const l = filename.split(".");
@@ -3790,6 +3793,8 @@ const FileHelper = {
 
 const F = FileHelper;
 
+F.mineType = F.mimeType;
+
 F.alphaPixelTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
 
 const debug$a = Debug.get("TaskProcessor");
@@ -4034,6 +4039,9 @@ const debug$9 = Debug.get("Resource");
 
 const Resource = {
     tasker: new TaskProcessor,
+    queue: new TaskProcessor({
+        parallel: 1
+    }),
     map: {},
     get isComplete() {
         return R.tasker.isComplete;
@@ -4070,6 +4078,12 @@ const Resource = {
         R.set(key, value);
         return value;
     },
+    loadFilm(_key, _format) {
+        return undefined;
+    },
+    loadVideo(_key, _format) {
+        return undefined;
+    },
     destroy() {
         R.map = {};
     }
@@ -4080,12 +4094,10 @@ const R = Resource;
 const ImageManager = {
     maxRecycled: 10,
     recycledList: [],
-    patternTasker: new TaskProcessor({
-        parallel: 1
-    }),
-    get(config) {
+    patternTasker: Resource.queue,
+    get(config, type) {
         let image = Resource.get(config.url);
-        if (!image) Resource.set(config.url, image = Creator.image(config));
+        if (!image) Resource.set(config.url, image = type === "film" ? Creator.film(config) : Creator.image(config));
         image.use++;
         return image;
     },
@@ -4120,7 +4132,7 @@ const ImageManager = {
         if (config.format) return config.format === format;
         const {url: url} = config;
         if (url.startsWith("data:")) {
-            if (url.startsWith("data:" + FileHelper.mineType(format))) return true;
+            if (url.startsWith("data:" + FileHelper.mimeType(format))) return true;
         } else {
             if (url.includes("." + format) || url.includes("." + FileHelper.upperCaseTypeMap[format])) return true; else if (format === "png" && !url.includes(".")) return true;
         }
@@ -4136,6 +4148,9 @@ const I$1 = ImageManager;
 const {IMAGE: IMAGE, create: create$1} = IncrementId;
 
 class LeaferImage {
+    get tag() {
+        return "Image";
+    }
     get url() {
         return this.config.url;
     }
@@ -4164,7 +4179,7 @@ class LeaferImage {
         if (!this.loading) {
             this.loading = true;
             Resource.tasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                return yield Platform.origin.loadImage(this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
+                return yield Platform.origin["load" + this.tag](this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
                     if (thumbSize) this.setThumbView(img);
                     this.setView(img);
                 }).catch(e => {
@@ -4238,6 +4253,9 @@ class LeaferImage {
         Platform.image.setPatternTransform(pattern, transform, paint);
         return pattern;
     }
+    render(canvas, x, y, width, height, _leaf, _paint, _imageScaleX, _imageScaleY) {
+        canvas.drawImage(this.view, x, y, width, height);
+    }
     getLoadUrl(_thumbSize) {
         return this.url;
     }
@@ -4264,6 +4282,18 @@ class LeaferImage {
     }
 }
 
+class LeaferFilm extends LeaferImage {
+    get tag() {
+        return "Film";
+    }
+}
+
+class LeaferVideo extends LeaferImage {
+    get tag() {
+        return "Video";
+    }
+}
+
 function defineKey(target, key, descriptor, noConfigurable) {
     if (!noConfigurable) descriptor.configurable = descriptor.enumerable = true;
     Object.defineProperty(target, key, descriptor);
@@ -6152,9 +6182,11 @@ const BranchRender = {
         if (this.__hasMask) {
             this.__renderMask(canvas, options);
         } else {
+            let child;
             const {children: children} = this;
             for (let i = 0, len = children.length; i < len; i++) {
-                excludeRenderBounds$1(children[i], options) || children[i].__render(canvas, options);
+                child = children[i];
+                excludeRenderBounds$1(child, options) || (child.__.complex ? child.__renderComplex(canvas, options) : child.__render(canvas, options));
             }
         }
     },
@@ -6635,6 +6667,7 @@ let Leaf = class Leaf {
     __drawHitPath(_canvas) {}
     __updateHitCanvas() {}
     __render(_canvas, _options) {}
+    __renderComplex(_canvas, _options) {}
     __drawFast(_canvas, _options) {}
     __draw(_canvas, _options, _originCanvas) {}
     __clip(_canvas, _options) {}
@@ -6754,6 +6787,7 @@ let Branch = class Branch extends Leaf {
                 this.add(item, index);
                 noIndex || index++;
             }); else child = UICreator.get(child.tag, child);
+            if (!child) return;
         }
         if (child.parent) child.parent.remove(child);
         child.parent = this;
@@ -6979,7 +7013,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.0.0";
+const version = "2.0.2";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -7184,8 +7218,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)
@@ -7200,29 +7232,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;
@@ -7236,6 +7266,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
@@ -7747,7 +7784,7 @@ class Renderer {
     getCellList() {
         return undefined;
     }
-    addBlock(block) {
+    addBlock(block, _leafList) {
         if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
@@ -7795,7 +7832,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$3.tip(leaf.innerName, ": empty");
@@ -7803,7 +7841,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) {
@@ -8190,16 +8228,16 @@ class UIData extends LeafData {
         return t.fill || t.stroke;
     }
     get __autoWidth() {
-        return !this._width;
+        return this._width == null;
     }
     get __autoHeight() {
-        return !this._height;
+        return this._height == null;
     }
     get __autoSide() {
-        return !this._width || !this._height;
+        return this._width == null || this._height == null;
     }
     get __autoSize() {
-        return !this._width && !this._height;
+        return this._width == null && this._height == null;
     }
     setVisible(value) {
         this._visible = value;
@@ -8411,13 +8449,16 @@ class TextData extends UIData {
 }
 
 class ImageData extends RectData {
+    get __urlType() {
+        return "image";
+    }
     setUrl(value) {
         this.__setImageFill(value);
         this._url = value;
     }
     __setImageFill(value) {
         this.fill = value ? {
-            type: "image",
+            type: this.__urlType,
             mode: "stretch",
             url: value
         } : undefined;
@@ -8917,7 +8958,10 @@ let Group = class Group extends UI {
     }
     toJSON(options) {
         const data = super.toJSON(options);
-        if (!this.childlessJSON) data.children = this.children.map(child => child.toJSON(options));
+        if (!this.childlessJSON) {
+            const children = data.children = [];
+            this.children.forEach(child => child.skipJSON || children.push(child.toJSON(options)));
+        }
         return data;
     }
     pick(_hitPoint, _options) {
@@ -9066,12 +9110,12 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             this.emitLeafer(LeaferEvent.STOP);
         }
     }
-    unlockLayout() {
+    unlockLayout(updateLayout = true) {
         this.layouter.start();
-        this.updateLayout();
+        if (updateLayout) this.updateLayout();
     }
-    lockLayout() {
-        this.updateLayout();
+    lockLayout(updateLayout = true) {
+        if (updateLayout) this.updateLayout();
         this.layouter.stop();
     }
     resize(size) {
@@ -10864,6 +10908,7 @@ class InteractionBase {
         this.checkPath(data, useDefaultPath);
         this.downTime = Date.now();
         this.emit(PointerEvent$1.BEFORE_DOWN, data);
+        if (data.path.needUpdate) this.updateDownData(data);
         this.emit(PointerEvent$1.DOWN, data);
         if (PointerButton.left(data)) {
             this.tapWait();
@@ -12089,11 +12134,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":
@@ -12109,7 +12157,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)
@@ -12153,7 +12201,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 {
@@ -12214,8 +12262,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) {
@@ -12227,7 +12275,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;
 }
 
@@ -12270,7 +12323,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
@@ -12333,8 +12386,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",
@@ -12365,7 +12416,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;
 }
@@ -12454,10 +12505,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;
@@ -12473,7 +12524,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;
@@ -12494,15 +12545,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;
             }
         }
@@ -12520,20 +12571,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);
     }
 }
 
@@ -13253,7 +13305,7 @@ function layoutText(drawData, style) {
     let {x: x, y: y, width: width, height: height} = bounds, realHeight = __lineHeight * countRows + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
     if (__clipText && realHeight > height) {
-        realHeight = Math.max(height, __lineHeight);
+        realHeight = Math.max(style.__autoHeight ? realHeight : height, __lineHeight);
         if (countRows > 1) drawData.overflow = countRows;
     } else if (height || autoSizeAlign) {
         switch (verticalAlign) {
@@ -13310,10 +13362,10 @@ function layoutText(drawData, style) {
 }
 
 function clipText(drawData, style, x, width) {
-    if (!width) return;
     const {rows: rows, overflow: overflow} = drawData;
     let {textOverflow: textOverflow} = style;
-    rows.splice(overflow);
+    if (overflow) rows.splice(overflow);
+    if (!width) return;
     if (textOverflow && textOverflow !== "show") {
         if (textOverflow === "hide") textOverflow = ""; else if (textOverflow === "ellipsis") textOverflow = "...";
         let char, charRight;
@@ -13478,4 +13530,4 @@ Object.assign(Creator, {
 
 useCanvas();
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferVideo, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };