leafer-draw 2.0.0 → 2.0.2

package/dist/web.js

@@ -7,6 +7,42 @@ var LeaferUI = function(exports) {
         PathNodeHandleType[PathNodeHandleType["mirrorAngle"] = 3] = "mirrorAngle";
         PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
     })(exports.PathNodeHandleType || (exports.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;
+    };
     exports.Answer = void 0;
     (function(Answer) {
         Answer[Answer["No"] = 0] = "No";
@@ -1650,7 +1686,7 @@ var LeaferUI = function(exports) {
             resize(view, width, height, xGap, yGap, clip, smooth, opacity, _filters, interlace) {
                 const realWidth = max$2(floor(width + (xGap || 0)), 1), realHeight = max$2(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;
@@ -1803,7 +1839,10 @@ var LeaferUI = function(exports) {
             list$1[tag] = UI;
         },
         get(tag, data, x, y, width, height) {
-            if (!list$1[tag]) debug$e.error("not register " + tag);
+            if (!list$1[tag]) {
+                debug$e.warn("not register " + tag);
+                return undefined;
+            }
             const ui = new list$1[tag](data);
             if (!isUndefined(x)) {
                 ui.x = x;
@@ -1888,42 +1927,6 @@ var LeaferUI = function(exports) {
             this.clear();
         }
     }
-    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;
@@ -3114,10 +3117,10 @@ var LeaferUI = function(exports) {
                 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(radius, min(d / 2, d / 2 * abs$2(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+                const r = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / (fullRadius ? 1 : 2);
+                radius = min(radius, min(r, r * abs$2(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
             }
             data.push(U$2, x1, y1, x2, y2, radius);
         },
@@ -3442,7 +3445,7 @@ var LeaferUI = function(exports) {
             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];
@@ -3454,7 +3457,7 @@ var LeaferUI = function(exports) {
                     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);
                     }
@@ -3466,11 +3469,11 @@ var LeaferUI = function(exports) {
                     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:
@@ -3482,7 +3485,7 @@ var LeaferUI = function(exports) {
 
                   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;
@@ -3523,10 +3526,10 @@ var LeaferUI = function(exports) {
     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(".");
@@ -3557,6 +3560,7 @@ var LeaferUI = function(exports) {
         }
     };
     const F = FileHelper;
+    F.mineType = F.mimeType;
     F.alphaPixelTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
     const debug$9 = Debug.get("TaskProcessor");
     class TaskItem {
@@ -3796,6 +3800,9 @@ var LeaferUI = function(exports) {
     const debug$8 = Debug.get("Resource");
     const Resource = {
         tasker: new TaskProcessor,
+        queue: new TaskProcessor({
+            parallel: 1
+        }),
         map: {},
         get isComplete() {
             return R.tasker.isComplete;
@@ -3832,6 +3839,12 @@ var LeaferUI = function(exports) {
             R.set(key, value);
             return value;
         },
+        loadFilm(_key, _format) {
+            return undefined;
+        },
+        loadVideo(_key, _format) {
+            return undefined;
+        },
         destroy() {
             R.map = {};
         }
@@ -3840,12 +3853,10 @@ var LeaferUI = function(exports) {
     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;
         },
@@ -3880,7 +3891,7 @@ var LeaferUI = function(exports) {
             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;
             }
@@ -3893,6 +3904,9 @@ var LeaferUI = function(exports) {
     const I = ImageManager;
     const {IMAGE: IMAGE, create: create$1} = IncrementId;
     class LeaferImage {
+        get tag() {
+            return "Image";
+        }
         get url() {
             return this.config.url;
         }
@@ -3921,7 +3935,7 @@ var LeaferUI = function(exports) {
             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 => {
@@ -3995,6 +4009,9 @@ var LeaferUI = function(exports) {
             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;
         }
@@ -4020,6 +4037,16 @@ var LeaferUI = function(exports) {
             this.waitComplete.length = 0;
         }
     }
+    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);
@@ -5758,9 +5785,11 @@ var LeaferUI = function(exports) {
             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));
                 }
             }
         },
@@ -6233,6 +6262,7 @@ var LeaferUI = function(exports) {
         __drawHitPath(_canvas) {}
         __updateHitCanvas() {}
         __render(_canvas, _options) {}
+        __renderComplex(_canvas, _options) {}
         __drawFast(_canvas, _options) {}
         __draw(_canvas, _options, _originCanvas) {}
         __clip(_canvas, _options) {}
@@ -6346,6 +6376,7 @@ var LeaferUI = function(exports) {
                     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;
@@ -6567,7 +6598,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "2.0.0";
+    const version = "2.0.2";
     const debug$4 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -6767,7 +6798,6 @@ var LeaferUI = function(exports) {
     }
     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)
@@ -6781,29 +6811,27 @@ var LeaferUI = function(exports) {
                 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;
@@ -6817,6 +6845,13 @@ var LeaferUI = function(exports) {
                     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
@@ -7308,7 +7343,7 @@ var LeaferUI = function(exports) {
         getCellList() {
             return undefined;
         }
-        addBlock(block) {
+        addBlock(block, _leafList) {
             if (!this.updateBlocks) this.updateBlocks = [];
             this.updateBlocks.push(block);
         }
@@ -7356,7 +7391,8 @@ var LeaferUI = function(exports) {
         __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$2.tip(leaf.innerName, ": empty");
@@ -7364,7 +7400,7 @@ var LeaferUI = function(exports) {
                     }
                     return empty;
                 });
-                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
             });
         }
         emitRender(type, bounds, options) {
@@ -7525,16 +7561,16 @@ var LeaferUI = function(exports) {
             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;
@@ -7731,13 +7767,16 @@ var LeaferUI = function(exports) {
         }
     }
     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;
@@ -8153,7 +8192,10 @@ var LeaferUI = function(exports) {
         }
         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) {
@@ -8295,12 +8337,12 @@ var LeaferUI = function(exports) {
                 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) {
@@ -9347,11 +9389,14 @@ var LeaferUI = function(exports) {
     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":
@@ -9367,7 +9412,7 @@ var LeaferUI = function(exports) {
             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)
@@ -9407,7 +9452,7 @@ var LeaferUI = function(exports) {
     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 {
@@ -9467,8 +9512,8 @@ var LeaferUI = function(exports) {
         return leafPaint;
     }
     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) {
@@ -9480,7 +9525,12 @@ var LeaferUI = function(exports) {
                 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;
     }
     function onLoad(ui, event) {
@@ -9512,7 +9562,7 @@ var LeaferUI = function(exports) {
         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
@@ -9575,8 +9625,6 @@ var LeaferUI = function(exports) {
             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",
@@ -9602,7 +9650,7 @@ var LeaferUI = function(exports) {
     const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
     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;
     }
@@ -9683,10 +9731,10 @@ var LeaferUI = function(exports) {
         }
     }
     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;
@@ -9702,7 +9750,7 @@ var LeaferUI = function(exports) {
                     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;
@@ -9721,15 +9769,15 @@ var LeaferUI = function(exports) {
         return fixScale;
     }
     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;
                 }
             }
@@ -9746,20 +9794,21 @@ var LeaferUI = function(exports) {
             }
         }
     }
-    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);
         }
     }
     function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
@@ -10395,7 +10444,7 @@ var LeaferUI = function(exports) {
         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) {
@@ -10451,10 +10500,10 @@ var LeaferUI = function(exports) {
         bounds.height = realHeight;
     }
     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;
@@ -10646,7 +10695,9 @@ var LeaferUI = function(exports) {
     exports.LeaferCanvasBase = LeaferCanvasBase;
     exports.LeaferData = LeaferData;
     exports.LeaferEvent = LeaferEvent;
+    exports.LeaferFilm = LeaferFilm;
     exports.LeaferImage = LeaferImage;
+    exports.LeaferVideo = LeaferVideo;
     exports.LineData = LineData;
     exports.MathHelper = MathHelper;
     exports.Matrix = Matrix;