@leafer/worker 2.0.0 → 2.0.2

package/dist/worker.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";
@@ -44,8 +80,8 @@ var LeaferUI = function(exports) {
     }
     const DataHelper = {
         default(t, defaultData) {
-            assign$1(defaultData, t);
-            assign$1(t, defaultData);
+            assign$2(defaultData, t);
+            assign$2(t, defaultData);
             return t;
         },
         assign(t, merge, exclude) {
@@ -53,9 +89,9 @@ var LeaferUI = function(exports) {
             Object.keys(merge).forEach(key => {
                 var _a, _b;
                 value = merge[key];
-                if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object) return assign$1(t[key], merge[key], exclude && exclude[key]);
+                if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object) return assign$2(t[key], merge[key], exclude && exclude[key]);
                 if (exclude && key in exclude) {
-                    if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object) assign$1(t[key] = {}, merge[key], exclude[key]);
+                    if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object) assign$2(t[key] = {}, merge[key], exclude[key]);
                     return;
                 }
                 t[key] = merge[key];
@@ -80,7 +116,7 @@ var LeaferUI = function(exports) {
             data[attrName] !== value && (data[attrName] = value);
         }
     };
-    const {assign: assign$1} = DataHelper;
+    const {assign: assign$2} = DataHelper;
     class LeafData {
         get __useNaturalRatio() {
             return true;
@@ -377,7 +413,7 @@ var LeaferUI = function(exports) {
         };
     }
     const {sin: sin$6, cos: cos$6, acos: acos, sqrt: sqrt$5} = Math;
-    const {float: float$5} = MathHelper;
+    const {float: float$6} = MathHelper;
     const tempPoint$5 = {};
     function getWorld() {
         return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), {
@@ -625,12 +661,12 @@ var LeaferUI = function(exports) {
                     const cosR = c / scaleY;
                     rotation = PI_2 - (d > 0 ? acos(-cosR) : -acos(cosR));
                 }
-                const cosR = float$5(cos$6(rotation));
+                const cosR = float$6(cos$6(rotation));
                 const sinR = sin$6(rotation);
-                scaleX = float$5(scaleX), scaleY = float$5(scaleY);
-                skewX = cosR ? float$5((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
-                skewY = cosR ? float$5((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
-                rotation = float$5(rotation / OneRadian);
+                scaleX = float$6(scaleX), scaleY = float$6(scaleY);
+                skewX = cosR ? float$6((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
+                skewY = cosR ? float$6((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
+                rotation = float$6(rotation / OneRadian);
             } else {
                 scaleX = a;
                 scaleY = d;
@@ -672,7 +708,7 @@ var LeaferUI = function(exports) {
         }
     };
     const M$b = MatrixHelper;
-    const {float: float$4} = MathHelper;
+    const {float: float$5} = MathHelper;
     const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3} = MatrixHelper;
     const {sin: sin$5, cos: cos$5, abs: abs$a, sqrt: sqrt$4, atan2: atan2$2, min: min$3, round: round$5} = Math;
     const PointHelper = {
@@ -810,7 +846,7 @@ var LeaferUI = function(exports) {
             return points;
         },
         isSame(t, point) {
-            return float$4(t.x) === float$4(point.x) && float$4(t.y) === float$4(point.y);
+            return float$5(t.x) === float$5(point.x) && float$5(t.y) === float$5(point.y);
         },
         reset(t) {
             P$7.reset(t);
@@ -1144,14 +1180,14 @@ var LeaferUI = function(exports) {
     };
     const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$5, addPoint: addPoint$3, toBounds: toBounds$3} = TwoPointBoundsHelper;
     const {toOuterPoint: toOuterPoint$2} = MatrixHelper;
-    const {float: float$3, fourNumber: fourNumber$1} = MathHelper;
+    const {float: float$4, fourNumber: fourNumber$1} = MathHelper;
     const {floor: floor$2, ceil: ceil$2} = Math;
     let right$4, bottom$3, boundsRight, boundsBottom;
     const point$2 = {};
     const toPoint$5 = {};
-    const tempBounds$3 = {};
+    const tempBounds$4 = {};
     const BoundsHelper = {
-        tempBounds: tempBounds$3,
+        tempBounds: tempBounds$4,
         set(t, x = 0, y = 0, width = 0, height = 0) {
             t.x = x;
             t.y = y;
@@ -1220,9 +1256,9 @@ var LeaferUI = function(exports) {
             t.height *= scaleY;
         },
         tempToOuterOf(t, matrix) {
-            B.copy(tempBounds$3, t);
-            B.toOuterOf(tempBounds$3, matrix);
-            return tempBounds$3;
+            B.copy(tempBounds$4, t);
+            B.toOuterOf(tempBounds$4, matrix);
+            return tempBounds$4;
         },
         getOuterOf(t, matrix) {
             t = Object.assign({}, t);
@@ -1280,9 +1316,9 @@ var LeaferUI = function(exports) {
         put(t, put, align = "center", putScale = 1, changeSize = true, to) {
             to || (to = put);
             if (isString(putScale)) putScale = B.getFitScale(t, put, putScale === "cover");
-            tempBounds$3.width = changeSize ? put.width *= putScale : put.width * putScale;
-            tempBounds$3.height = changeSize ? put.height *= putScale : put.height * putScale;
-            AlignHelper.toPoint(align, tempBounds$3, t, to, true, true);
+            tempBounds$4.width = changeSize ? put.width *= putScale : put.width * putScale;
+            tempBounds$4.height = changeSize ? put.height *= putScale : put.height * putScale;
+            AlignHelper.toPoint(align, tempBounds$4, t, to, true, true);
         },
         getSpread(t, spread, side) {
             const n = {};
@@ -1313,10 +1349,10 @@ var LeaferUI = function(exports) {
             }
         },
         float(t, maxLength) {
-            t.x = float$3(t.x, maxLength);
-            t.y = float$3(t.y, maxLength);
-            t.width = float$3(t.width, maxLength);
-            t.height = float$3(t.height, maxLength);
+            t.x = float$4(t.x, maxLength);
+            t.y = float$4(t.y, maxLength);
+            t.width = float$4(t.width, maxLength);
+            t.height = float$4(t.height, maxLength);
         },
         add(t, bounds, isPoint) {
             right$4 = t.x + t.width;
@@ -1581,7 +1617,7 @@ var LeaferUI = function(exports) {
             BoundsHelper.reset(this);
         }
     }
-    const tempBounds$2 = new Bounds;
+    const tempBounds$3 = new Bounds;
     class AutoBounds {
         constructor(top, right, bottom, left, width, height) {
             isObject(top) ? this.copy(top) : this.set(top, right, bottom, left, width, height);
@@ -1650,7 +1686,7 @@ var LeaferUI = function(exports) {
             resize(view, width, height, xGap, yGap, clip, smooth, opacity, _filters, interlace) {
                 const realWidth = max$5(floor$1(width + (xGap || 0)), 1), realHeight = max$5(floor$1(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$3[tag] = UI;
         },
         get(tag, data, x, y, width, height) {
-            if (!list$3[tag]) debug$h.error("not register " + tag);
+            if (!list$3[tag]) {
+                debug$h.warn("not register " + tag);
+                return undefined;
+            }
             const ui = new list$3[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;
@@ -2739,7 +2742,7 @@ var LeaferUI = function(exports) {
             return [];
         }
     };
-    const {M: M$9, m: m, L: L$9, l: l, H: H, h: h, V: V, v: v, C: C$7, c: c, S: S, s: s, Q: Q$6, q: q, T: T, t: t, A: A, a: a, Z: Z$7, z: z, N: N$5, D: D$6, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5} = PathCommandMap;
+    const {M: M$9, m: m, L: L$9, l: l, H: H, h: h, V: V, v: v, C: C$7, c: c, S: S$1, s: s, Q: Q$6, q: q, T: T, t: t, A: A, a: a, Z: Z$7, z: z, N: N$5, D: D$6, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5} = PathCommandMap;
     const {rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1} = BezierHelper;
     const {ellipticalArc: ellipticalArc} = EllipseHelper;
     const debug$f = Debug.get("PathConvert");
@@ -2867,10 +2870,10 @@ var LeaferUI = function(exports) {
                     old[i + 2] += y;
                     old[i + 3] += x;
                     old[i + 4] += y;
-                    command = S;
+                    command = S$1;
 
-                  case S:
-                    smooth = lastCommand === C$7 || lastCommand === S;
+                  case S$1:
+                    smooth = lastCommand === C$7 || lastCommand === S$1;
                     x1 = smooth ? x * 2 - controlX : old[i + 1];
                     y1 = smooth ? y * 2 - controlY : old[i + 2];
                     controlX = old[i + 1];
@@ -3114,10 +3117,10 @@ var LeaferUI = function(exports) {
                 data.push(O$5, 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$2(radius, min$2(d / 2, d / 2 * abs$8(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+                const r = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / (fullRadius ? 1 : 2);
+                radius = min$2(radius, min$2(r, r * abs$8(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
             }
             data.push(U$4, 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$5) {
                         secondX = data[i + 1];
                         secondY = data[i + 2];
-                        smooth.push(M$5, getCenterX(startX, secondX), getCenterY(startY, secondY));
+                        three ? smooth.push(M$5, startX, startY) : smooth.push(M$5, getCenterX(startX, secondX), getCenterY(startY, secondY));
                     } else {
                         smooth.push(M$5, startX, startY);
                     }
@@ -3466,11 +3469,11 @@ var LeaferUI = function(exports) {
                     i += 3;
                     switch (data[i]) {
                       case L$5:
-                        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$3:
-                        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$3:
                     if (lastCommand !== Z$3) {
-                        arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
+                        arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY, three);
                         smooth.push(Z$3);
                     }
                     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$2 = FileHelper;
+    F$2.mineType = F$2.mimeType;
     F$2.alphaPixelTypes.forEach(type => F$2.upperCaseTypeMap[type] = type.toUpperCase());
     const debug$c = Debug.get("TaskProcessor");
     class TaskItem {
@@ -3796,6 +3800,9 @@ var LeaferUI = function(exports) {
     const debug$b = 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$1 = 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";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() {
             return true;
@@ -6589,7 +6620,6 @@ var LeaferUI = function(exports) {
     }
     canvasPatch(OffscreenCanvasRenderingContext2D.prototype);
     canvasPatch(Path2D.prototype);
-    const {mineType: mineType} = FileHelper;
     Object.assign(Creator, {
         canvas: (options, manager) => new LeaferCanvas(options, manager),
         image: options => new LeaferImage(options)
@@ -6599,7 +6629,7 @@ var LeaferUI = function(exports) {
             createCanvas: (width, height) => new OffscreenCanvas(width, height),
             canvasToDataURL: (canvas, type, quality) => new Promise((resolve, reject) => {
                 canvas.convertToBlob({
-                    type: mineType(type),
+                    type: FileHelper.mimeType(type),
                     quality: quality
                 }).then(blob => {
                     var reader = new FileReader;
@@ -6611,14 +6641,14 @@ var LeaferUI = function(exports) {
                 });
             }),
             canvasToBolb: (canvas, type, quality) => canvas.convertToBlob({
-                type: mineType(type),
+                type: FileHelper.mimeType(type),
                 quality: quality
             }),
             canvasSaveAs: (_canvas, _filename, _quality) => new Promise(resolve => resolve()),
             download(_url, _filename) {
                 return undefined;
             },
-            loadImage(src) {
+            loadImage(src, _crossOrigin, _leaferImage) {
                 return new Promise((resolve, reject) => {
                     let req = new XMLHttpRequest;
                     req.open("GET", Platform.image.getRealURL(src), true);
@@ -6633,6 +6663,13 @@ var LeaferUI = function(exports) {
                     req.onerror = e => reject(e);
                     req.send();
                 });
+            },
+            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]();
+                });
             }
         };
         Platform.canvas = Creator.canvas();
@@ -7111,7 +7148,7 @@ var LeaferUI = function(exports) {
         getCellList() {
             return undefined;
         }
-        addBlock(block) {
+        addBlock(block, _leafList) {
             if (!this.updateBlocks) this.updateBlocks = [];
             this.updateBlocks.push(block);
         }
@@ -7159,7 +7196,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$6.tip(leaf.innerName, ": empty");
@@ -7167,7 +7205,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) {
@@ -7523,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;
@@ -7729,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;
@@ -8151,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) {
@@ -8293,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) {
@@ -9260,7 +9304,7 @@ var LeaferUI = function(exports) {
             EventCreator.changeName(oldName, newName);
         }
     }
-    const {min: min$1, max: max$3, abs: abs$7} = Math, {float: float$2, sign: sign$2} = MathHelper, {minX: minX, maxX: maxX, minY: minY, maxY: maxY} = BoundsHelper;
+    const {min: min$1, max: max$3, abs: abs$7} = Math, {float: float$3, sign: sign$2} = MathHelper, {minX: minX, maxX: maxX, minY: minY, maxY: maxY} = BoundsHelper;
     const tempContent = new Bounds, tempDragBounds = new Bounds;
     const DragBoundsHelper = {
         limitMove(leaf, move) {
@@ -9298,8 +9342,8 @@ var LeaferUI = function(exports) {
             } else {
                 if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
             }
-            move.x = float$2(move.x);
-            move.y = float$2(move.y);
+            move.x = float$3(move.x);
+            move.y = float$3(move.y);
             return move;
         },
         getValidScaleOf(content, dragBounds, dragBoundsType, origin, scale, lockRatio, change) {
@@ -9311,26 +9355,26 @@ var LeaferUI = function(exports) {
             let correctScaleX = 1, correctScaleY = 1, aScale, bScale, aSize, bSize;
             if (D$2.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
                 if (scale.x < 0) tempContent.scaleOf(origin, correctScaleX = 1 / scale.x, 1);
-                aSize = float$2(tempContent.minX - tempDragBounds.minX);
-                bSize = float$2(tempDragBounds.maxX - tempContent.maxX);
+                aSize = float$3(tempContent.minX - tempDragBounds.minX);
+                bSize = float$3(tempDragBounds.maxX - tempContent.maxX);
                 aScale = originLeftScale && aSize > 0 ? 1 + aSize / (originLeftScale * tempContent.width) : 1;
                 bScale = originRightScale && bSize > 0 ? 1 + bSize / (originRightScale * tempContent.width) : 1;
                 correctScaleX *= max$3(aScale, bScale);
             } else {
                 if (scale.x < 0) {
-                    if (float$2(minX(content) - minX(dragBounds)) <= 0 || float$2(maxX(dragBounds) - maxX(content)) <= 0) tempContent.scaleOf(origin, correctScaleX = 1 / scale.x, 1);
+                    if (float$3(minX(content) - minX(dragBounds)) <= 0 || float$3(maxX(dragBounds) - maxX(content)) <= 0) tempContent.scaleOf(origin, correctScaleX = 1 / scale.x, 1);
                     tempContent.unsign();
                 }
-                aSize = float$2(tempDragBounds.minX - tempContent.minX);
-                bSize = float$2(tempContent.maxX - tempDragBounds.maxX);
+                aSize = float$3(tempDragBounds.minX - tempContent.minX);
+                bSize = float$3(tempContent.maxX - tempDragBounds.maxX);
                 aScale = originLeftScale && aSize > 0 ? 1 - aSize / (originLeftScale * tempContent.width) : 1;
                 bScale = originRightScale && bSize > 0 ? 1 - bSize / (originRightScale * tempContent.width) : 1;
                 correctScaleX *= min$1(aScale, bScale);
             }
             if (D$2.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
                 if (scale.y < 0) tempContent.scaleOf(origin, 1, correctScaleY = 1 / scale.y);
-                aSize = float$2(tempContent.minY - tempDragBounds.minY);
-                bSize = float$2(tempDragBounds.maxY - tempContent.maxY);
+                aSize = float$3(tempContent.minY - tempDragBounds.minY);
+                bSize = float$3(tempDragBounds.maxY - tempContent.maxY);
                 aScale = originTopScale && aSize > 0 ? 1 + aSize / (originTopScale * tempContent.height) : 1;
                 bScale = originBottomScale && bSize > 0 ? 1 + bSize / (originBottomScale * tempContent.height) : 1;
                 correctScaleY *= max$3(aScale, bScale);
@@ -9341,11 +9385,11 @@ var LeaferUI = function(exports) {
                 }
             } else {
                 if (scale.y < 0) {
-                    if (float$2(minY(content) - minY(dragBounds)) <= 0 || float$2(maxY(dragBounds) - maxY(content)) <= 0) tempContent.scaleOf(origin, 1, correctScaleY = 1 / scale.y);
+                    if (float$3(minY(content) - minY(dragBounds)) <= 0 || float$3(maxY(dragBounds) - maxY(content)) <= 0) tempContent.scaleOf(origin, 1, correctScaleY = 1 / scale.y);
                     tempContent.unsign();
                 }
-                aSize = float$2(tempDragBounds.minY - tempContent.minY);
-                bSize = float$2(tempContent.maxY - tempDragBounds.maxY);
+                aSize = float$3(tempDragBounds.minY - tempContent.minY);
+                bSize = float$3(tempContent.maxY - tempDragBounds.maxY);
                 aScale = originTopScale && aSize > 0 ? 1 - aSize / (originTopScale * tempContent.height) : 1;
                 bScale = originBottomScale && bSize > 0 ? 1 - bSize / (originBottomScale * tempContent.height) : 1;
                 correctScaleY *= min$1(aScale, bScale);
@@ -9778,7 +9822,7 @@ var LeaferUI = function(exports) {
     function exclude(leaf, excludePath) {
         return excludePath && excludePath.has(leaf);
     }
-    const config$1 = {
+    const config$2 = {
         wheel: {
             zoomSpeed: .5,
             moveSpeed: .5,
@@ -9850,7 +9894,7 @@ var LeaferUI = function(exports) {
             return this.p.hitRadius;
         }
         constructor(target, canvas, selector, userConfig) {
-            this.config = DataHelper.clone(config$1);
+            this.config = DataHelper.clone(config$2);
             this.tapCount = 0;
             this.downKeyMap = {};
             this.target = target;
@@ -9877,6 +9921,7 @@ var LeaferUI = function(exports) {
             this.checkPath(data, useDefaultPath);
             this.downTime = Date.now();
             this.emit(exports.PointerEvent.BEFORE_DOWN, data);
+            if (data.path.needUpdate) this.updateDownData(data);
             this.emit(exports.PointerEvent.DOWN, data);
             if (PointerButton.left(data)) {
                 this.tapWait();
@@ -10353,8 +10398,8 @@ var LeaferUI = function(exports) {
         if (isHitPixel) {
             const {renderBounds: renderBounds} = this.__layout;
             const size = Platform.image.hitCanvasSize;
-            const scale = h.hitScale = tempBounds$2.set(0, 0, size, size).getFitMatrix(renderBounds).a;
-            const {x: x, y: y, width: width, height: height} = tempBounds$2.set(renderBounds).scale(scale);
+            const scale = h.hitScale = tempBounds$3.set(0, 0, size, size).getFitMatrix(renderBounds).a;
+            const {x: x, y: y, width: width, height: height} = tempBounds$3.set(renderBounds).scale(scale);
             h.resize({
                 width: width,
                 height: height,
@@ -10412,11 +10457,11 @@ var LeaferUI = function(exports) {
         }
         return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
     };
-    const ui$4 = exports.UI.prototype, rect = exports.Rect.prototype, box$2 = exports.Box.prototype;
-    rect.__updateHitCanvas = box$2.__updateHitCanvas = function() {
+    const ui$4 = exports.UI.prototype, rect = exports.Rect.prototype, box$3 = exports.Box.prototype;
+    rect.__updateHitCanvas = box$3.__updateHitCanvas = function() {
         if (this.stroke || this.cornerRadius || (this.fill || this.__.__isCanvas) && this.hitFill === "pixel" || this.hitStroke === "all") ui$4.__updateHitCanvas.call(this); else if (this.__hitCanvas) this.__hitCanvas = null;
     };
-    rect.__hitFill = box$2.__hitFill = function(inner) {
+    rect.__hitFill = box$3.__hitFill = function(inner) {
         return this.__hitCanvas ? ui$4.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
     exports.Text.prototype.__drawHitPath = function(canvas) {
@@ -10442,8 +10487,8 @@ var LeaferUI = function(exports) {
     canvas$1.hitPixel = function(radiusPoint, offset, scale = 1) {
         let {x: x, y: y, radiusX: radiusX, radiusY: radiusY} = radiusPoint;
         if (offset) x -= offset.x, y -= offset.y;
-        tempBounds$2.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-        const {data: data} = this.context.getImageData(tempBounds$2.x, tempBounds$2.y, tempBounds$2.width || 1, tempBounds$2.height || 1);
+        tempBounds$3.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+        const {data: data} = this.context.getImageData(tempBounds$3.x, tempBounds$3.y, tempBounds$3.width || 1, tempBounds$3.height || 1);
         for (let i = 0, len = data.length; i < len; i += 4) {
             if (data[i + 3] > 0) return true;
         }
@@ -10630,13 +10675,13 @@ var LeaferUI = function(exports) {
         }
     }
     const {getSpread: getSpread, copyAndSpread: copyAndSpread$1, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$7, getIntersectData: getIntersectData} = BoundsHelper;
-    const tempBounds$1 = {};
+    const tempBounds$2 = {};
     function shape(ui, current, options) {
         const canvas = current.getSameCanvas();
         const currentBounds = current.bounds, nowWorld = ui.__nowWorld, layout = ui.__layout;
         const nowWorldShapeBounds = ui.__nowWorldShapeBounds || (ui.__nowWorldShapeBounds = {});
-        toOuterOf(layout.strokeSpread ? (copyAndSpread$1(tempBounds$1, layout.boxBounds, layout.strokeSpread), 
-        tempBounds$1) : layout.boxBounds, nowWorld, nowWorldShapeBounds);
+        toOuterOf(layout.strokeSpread ? (copyAndSpread$1(tempBounds$2, layout.boxBounds, layout.strokeSpread), 
+        tempBounds$2) : layout.boxBounds, nowWorld, nowWorldShapeBounds);
         let bounds, renderBounds, matrix, fitMatrix, shapeBounds, worldCanvas;
         let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
         if (currentBounds.includes(nowWorldShapeBounds)) {
@@ -10726,11 +10771,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":
@@ -10746,7 +10794,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)
@@ -10782,11 +10830,11 @@ var LeaferUI = function(exports) {
         drawStrokesStyle: drawStrokesStyle,
         shape: shape
     };
-    let cache$1, box$1 = new Bounds;
+    let cache$1, box$2 = new Bounds;
     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$1 && paint === cache$1.paint && isSame(boxBounds, cache$1.boxBounds)) {
             leafPaint = cache$1.leafPaint;
         } else {
@@ -10798,7 +10846,7 @@ var LeaferUI = function(exports) {
             cache$1 = image.use > 1 ? {
                 leafPaint: leafPaint,
                 paint: paint,
-                boxBounds: box$1.set(boxBounds)
+                boxBounds: box$2.set(boxBounds)
             } : null;
         }
         if (firstUse || image.loading) event = {
@@ -10846,8 +10894,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) {
@@ -10859,7 +10907,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) {
@@ -10891,7 +10944,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
@@ -10954,8 +11007,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",
@@ -10981,7 +11032,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$2, 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;
     }
@@ -11062,10 +11113,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;
@@ -11081,7 +11132,7 @@ var LeaferUI = function(exports) {
                     if (transform) copy$4(imageMatrix, transform);
                     scale$1(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;
@@ -11100,15 +11151,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;
                 }
             }
@@ -11125,20 +11176,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) {
@@ -11283,7 +11335,7 @@ var LeaferUI = function(exports) {
         getTransform: getTransform
     };
     const {copy: copy$3, move: move$6, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max$2, abs: abs$5} = Math;
-    const tempBounds = {}, tempMatrix = new Matrix;
+    const tempBounds$1 = {}, tempMatrix = new Matrix;
     const offsetOutBounds$1 = {};
     function shadow$1(ui, current, shape) {
         let copyBounds, transform;
@@ -11345,9 +11397,9 @@ var LeaferUI = function(exports) {
         const {shapeBounds: shapeBounds} = shape;
         let from, to;
         if (Platform.fullImageShadow) {
-            copy$3(tempBounds, canvas.bounds);
-            move$6(tempBounds, outBounds.x - shapeBounds.x, outBounds.y - shapeBounds.y);
-            from = canvas.bounds, to = tempBounds;
+            copy$3(tempBounds$1, canvas.bounds);
+            move$6(tempBounds$1, outBounds.x - shapeBounds.x, outBounds.y - shapeBounds.y);
+            from = canvas.bounds, to = tempBounds$1;
         } else {
             from = shapeBounds, to = outBounds;
         }
@@ -11774,7 +11826,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) {
@@ -11830,10 +11882,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;
@@ -12119,8 +12171,13 @@ var LeaferUI = function(exports) {
                             if (leaf.__.__useArrow) leaf.__drawPath(canvas); else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
                         }
                         data.strokeWidth = strokeWidth / Math.max(aScaleX, aScaleY);
+                        if (data.shadow) {
+                            const shadow = data.shadow[0], {scaleX: scaleX, scaleY: scaleY} = this.getRenderScaleData(true, shadow.scaleFixed);
+                            canvas.save(), canvas.setWorldShadow(shadow.x * scaleX, shadow.y * scaleY, shadow.blur * scaleX, ColorConvert.string(shadow.color));
+                        }
                         if (stroke) isString(stroke) ? Paint.stroke(stroke, this, canvas, options) : Paint.strokes(stroke, this, canvas, options);
                         if (fill) isString(fill) ? Paint.fill(fill, this, canvas, options) : Paint.fills(fill, this, canvas, options);
+                        if (data.shadow) canvas.restore();
                     }
                 }
                 data.strokeWidth = strokeWidth;
@@ -12292,6 +12349,7 @@ var LeaferUI = function(exports) {
                     } else {
                         editor.target = find;
                     }
+                    e.path.needUpdate = true;
                 } else if (this.allow(e.target)) {
                     if (!this.isHoldMultipleSelectKey(e) && !this.editor.mergedConfig.selectKeep) editor.target = null;
                 }
@@ -13259,7 +13317,7 @@ var LeaferUI = function(exports) {
     const resizeSVG = `\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate({{rotation}},12,12)">\n<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>\n<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter id="f" x="-1.6" y="3.9" width="27.2" height="16.9" filterUnits="userSpaceOnUse">\n${filterStyle$1}\n</filter>\n</defs>\n</svg>\n`;
     const rotateSVG = `\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">\n<path d="M20.4 8H21.4L20.8 7.1L17.3 2.6L17 2.1L16.6 2.6L13.1 7.1L12.5 8H13.5H15.4C14.9 11.8 11.8 14.9 8 15.4V13.5V12.5L7.1 13.1L2.6 16.6L2.1 17L2.6 17.3L7.1 20.8L8 21.4V20.4V18.4C13.5 17.9 17.9 13.5 18.4 8H20.4Z" stroke="white"/>\n<path fill-rule="evenodd" d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter id="f" x="-1.6" y="-0.6" width="27.1" height="27.1" filterUnits="userSpaceOnUse">\n${filterStyle$1}\n</filter>\n</defs>\n</svg>\n`;
     const skewSVG = `\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">\n<path d="M21 10.4L21 11.4L23.8 11.4L21.6 9.6L21 10.4ZM17 10.4V11.4L17 11.4L17 10.4ZM15.5 6L16.1 5.2L14.5 3.9V6H15.5ZM15.5 8.4V9.4H16.5V8.4H15.5ZM6 8.4V7.4H5V8.4H6ZM6 10.4H5V11.4H6V10.4ZM7 14.4V13.4L7 13.4L7 14.4ZM3 14.4L3 13.4L0.1 13.4L2.3 15.2L3 14.4ZM8.5 18.9L7.8 19.7L9.5 21.0V18.9H8.5ZM8.5 16.4V15.4H7.5V16.4H8.5ZM19 16.4V17.4H20V16.4H19ZM19 14.4H20V13.4H19V14.4ZM21 9.4L17 9.4L17 11.4L21 11.4L21 9.4ZM14.8 6.7L20.3 11.2L21.6 9.6L16.1 5.2L14.8 6.7ZM16.5 8.4V6H14.5V8.4H16.5ZM6 9.4H15.5V7.4H6V9.4ZM7 10.4V8.4H5V10.4H7ZM15.5 9.4H6V11.4H15.5V9.4ZM17 9.4H15.5V11.4H17V9.4ZM7 15.4H8.5V13.4H7V15.4ZM3 15.4L7 15.4L7 13.4L3 13.4L3 15.4ZM9.1 18.1L3.6 13.6L2.3 15.2L7.8 19.7L9.1 18.1ZM7.5 16.4V18.9H9.5V16.4H7.5ZM19 15.4H8.5V17.4H19V15.4ZM18 14.4V16.4H20V14.4H18ZM8.5 15.4H19V13.4H8.5V15.4Z" fill="white"/>\n<path fill-rule="evenodd" d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter x="-2.8" y="1.9" width="29.6" height="23.1" filterUnits="userSpaceOnUse" >\n${filterStyle$1}\n</filter>\n</defs>\n</svg>\n`;
-    const config = {
+    const config$1 = {
         editSize: "size",
         keyEvent: true,
         stroke: "#836DFF",
@@ -13464,6 +13522,7 @@ var LeaferUI = function(exports) {
             this.checkChange = true;
             this.canChange = true;
             this.visible = this.hittable = false;
+            this.skipJSON = true;
             this.on(PropertyEvent.CHANGE, event => {
                 if (this.checkChange && checkMap[event.attrName]) {
                     const {attrName: attrName, newValue: newValue, oldValue: oldValue} = event;
@@ -13861,7 +13920,7 @@ var LeaferUI = function(exports) {
             this.selector = new EditSelect(this);
             this.editMask = new EditMask(this);
             this.targetEventIds = [];
-            let mergedConfig = DataHelper.clone(config);
+            let mergedConfig = DataHelper.clone(config$1);
             if (userConfig) mergedConfig = DataHelper.default(userConfig, mergedConfig);
             this.mergedConfig = this.config = mergedConfig;
             this.addMany(this.editMask, this.selector, this.editBox);
@@ -14138,7 +14197,10 @@ var LeaferUI = function(exports) {
             return "focus";
         }
         get editBox() {
-            return this.editor.editBox;
+            return this._editBox || this.editor.editBox;
+        }
+        set editBox(value) {
+            this._editBox = value;
         }
         constructor(editor) {
             this.eventIds = [];
@@ -14324,7 +14386,7 @@ var LeaferUI = function(exports) {
         onSkew(_e) {}
         onUpdate() {
             const {editBox: editBox} = this, {rotatePoints: rotatePoints, resizeLines: resizeLines, resizePoints: resizePoints, rect: rect} = editBox;
-            const line = this.editor.element;
+            const line = editBox.target;
             let fromTo, leftOrRight;
             if (line.pathInputed) fromTo = this.getFromToByPath(line.__.path); else if (line.points) fromTo = this.getFromToByPoints(line.__.points);
             if (fromTo) {
@@ -14636,6 +14698,8 @@ var LeaferUI = function(exports) {
                 break;
 
               case "image":
+              case "film":
+              case "video":
                 break;
 
               case "linear":
@@ -14849,9 +14913,14 @@ var LeaferUI = function(exports) {
         }), leafer.on_(exports.MoveEvent.END, e => {
             LeafHelper.animateMove(leafer.zoomLayer, leafer.getValidMove(e.moveX, e.moveY));
         }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, e => {
-            const {zoomLayer: zoomLayer} = leafer;
+            const {zoomLayer: zoomLayer, layouter: layouter} = leafer;
             const changeScale = leafer.getValidScale(e.scale);
-            if (changeScale !== 1) zoomLayer.scaleOfWorld(e, changeScale);
+            if (changeScale !== 1) {
+                layouter.stop();
+                LeafHelper.updateMatrix(leafer);
+                zoomLayer.scaleOfWorld(e, changeScale);
+                layouter.start();
+            }
         }));
     }
     function addViewportConfig(leafer, mergeConfig) {
@@ -16433,7 +16502,7 @@ var LeaferUI = function(exports) {
         }));
     }
     Plugin.add("flow", "resize");
-    const box = exports.Box.prototype, {__updateBoxBounds: __updateBoxBounds} = exports.Group.prototype;
+    const box$1 = exports.Box.prototype, {__updateBoxBounds: __updateBoxBounds} = exports.Group.prototype;
     exports.UI.addAttr("flow", false, autoLayoutType);
     exports.UI.addAttr("gap", 0, boundsType);
     exports.UI.addAttr("flowAlign", "top-left", boundsType);
@@ -16444,7 +16513,7 @@ var LeaferUI = function(exports) {
     exports.UI.addAttr("autoHeight", undefined, autoBoundsType);
     exports.UI.addAttr("autoBox", undefined, boundsType);
     const {copyAndSpread: copyAndSpread} = BoundsHelper;
-    box.__updateFlowLayout = function() {
+    box$1.__updateFlowLayout = function() {
         const {leaferIsCreated: leaferIsCreated, flow: flow} = this;
         if (leaferIsCreated) this.leafer.created = false;
         switch (flow) {
@@ -16467,7 +16536,7 @@ var LeaferUI = function(exports) {
         }
         if (leaferIsCreated) this.leafer.created = true;
     };
-    box.__updateContentBounds = function() {
+    box$1.__updateContentBounds = function() {
         const {padding: padding} = this.__;
         const layout = this.__layout;
         const same = layout.contentBounds === layout.boxBounds;
@@ -16478,7 +16547,7 @@ var LeaferUI = function(exports) {
             if (!same) layout.shrinkContentCancel();
         }
     };
-    box.__updateBoxBounds = function(secondLayout) {
+    box$1.__updateBoxBounds = function(secondLayout) {
         if (this.children.length && !this.pathInputed) {
             const data = this.__, {flow: flow} = data;
             if (data.__autoSide) {
@@ -17232,7 +17301,7 @@ var LeaferUI = function(exports) {
     const rgbaMatch = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d*\.?\d+)/i;
     const hslMatch = /^hsl\((\d+),\s*(\d+)%\s*,\s*(\d+)%/i;
     const hslaMatch = /^hsla\((\d+),\s*(\d+)%\s*,\s*(\d+)%\s*,\s*(\d*\.?\d+)/i;
-    const int = parseInt, float$1 = parseFloat, {round: round$1} = Math;
+    const int = parseInt, float$2 = parseFloat, {round: round$1} = Math;
     let cache = {}, totalCache = 0;
     function colorToRGBA(color, opacity) {
         let RGBA;
@@ -17340,16 +17409,16 @@ var LeaferUI = function(exports) {
             r: int(match[1]),
             g: int(match[2]),
             b: int(match[3]),
-            a: float$1(match[4])
+            a: float$2(match[4])
         };
     }
     function hslToRGBA(color) {
         const match = hslMatch.exec(color);
-        return hsla(float$1(match[1]), float$1(match[2]), float$1(match[3]), 1);
+        return hsla(float$2(match[1]), float$2(match[2]), float$2(match[3]), 1);
     }
     function hslaToRGBA(color) {
         const match = hslaMatch.exec(color);
-        return hsla(float$1(match[1]), float$1(match[2]), float$1(match[3]), float$1(match[4]));
+        return hsla(float$2(match[1]), float$2(match[2]), float$2(match[3]), float$2(match[4]));
     }
     const n1 = 1 / 6, n2 = .5, n3 = 2 / 3, n4 = 1 / 3;
     function hue(p, q, t) {
@@ -17552,7 +17621,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {getDistance: getDistance} = HighBezierHelper;
-    const {M: M, L: L, C: C, Z: Z} = PathCommandMap, {float: float} = MathHelper;
+    const {M: M, L: L, C: C, Z: Z} = PathCommandMap, {float: float$1} = MathHelper;
     const tempPoint = {}, tempFrom = {};
     const HighCurveHelper = {
         transform(data, matrix) {
@@ -17705,7 +17774,7 @@ var LeaferUI = function(exports) {
                         tempFrom.y = y;
                         to.x = toX;
                         to.y = toY;
-                        cutDistance = float(motionDistance - total);
+                        cutDistance = float$1(motionDistance - total);
                         if (cutDistance) {
                             PointHelper.getDistancePoint(tempFrom, to, cutDistance, true);
                             path.push(command, to.x, to.y);
@@ -17724,7 +17793,7 @@ var LeaferUI = function(exports) {
                     toY = data[i + 6];
                     distance = segments[index];
                     if (total + distance > motionDistance) {
-                        cutDistance = float(motionDistance - total);
+                        cutDistance = float$1(motionDistance - total);
                         if (cutDistance) {
                             t = HighBezierHelper.getT(cutDistance, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
                             HighBezierHelper.cut(path, t, x, y, x1, y1, x2, y2, toX, toY);
@@ -17917,21 +17986,21 @@ var LeaferUI = function(exports) {
         const style = {}, button = findParentButton(leaf);
         const state = button ? leaf.state || button.state : leaf.state;
         const stateStyle = state && leaf.states[state];
-        if (stateStyle && State.isState(state, leaf, button)) exist = assign(style, stateStyle);
+        if (stateStyle && State.isState(state, leaf, button)) exist = assign$1(style, stateStyle);
         const selectedStyle = style.selectedStyle || leaf.selectedStyle;
-        if (selectedStyle && State.isSelected(leaf, button)) exist = assign(style, selectedStyle);
+        if (selectedStyle && State.isSelected(leaf, button)) exist = assign$1(style, selectedStyle);
         const placeholderStyle = style.placeholderStyle || leaf.placeholderStyle;
-        if (placeholderStyle && State.isPlacehold(leaf, button)) exist = assign(style, placeholderStyle);
+        if (placeholderStyle && State.isPlacehold(leaf, button)) exist = assign$1(style, placeholderStyle);
         if (State.isDisabled(leaf, button)) {
             const disabledStyle = style.disabledStyle || leaf.disabledStyle;
-            if (disabledStyle) exist = assign(style, disabledStyle);
+            if (disabledStyle) exist = assign$1(style, disabledStyle);
         } else {
             const focusStyle = style.focusStyle || leaf.focusStyle;
-            if (focusStyle && State.isFocus(leaf, button)) exist = assign(style, focusStyle);
+            if (focusStyle && State.isFocus(leaf, button)) exist = assign$1(style, focusStyle);
             const hoverStyle = style.hoverStyle || leaf.hoverStyle;
-            if (hoverStyle && State.isHover(leaf, button)) exist = assign(style, hoverStyle);
+            if (hoverStyle && State.isHover(leaf, button)) exist = assign$1(style, hoverStyle);
             const pressStyle = style.pressStyle || leaf.pressStyle;
-            if (pressStyle && State.isPress(leaf, button)) exist = assign(style, pressStyle);
+            if (pressStyle && State.isPress(leaf, button)) exist = assign$1(style, pressStyle);
         }
         return exist ? style : undefined;
     }
@@ -17957,7 +18026,7 @@ var LeaferUI = function(exports) {
         if (type === "out" && isNull(data[name]) && isNull(style[name])) name = "transition";
         return isNull(style[name]) ? data[name] : style[name];
     }
-    function assign(style, stateStyle) {
+    function assign$1(style, stateStyle) {
         Object.assign(style, stateStyle);
         return true;
     }
@@ -18182,6 +18251,9 @@ var LeaferUI = function(exports) {
         constructor(data) {
             super(data);
         }
+        togglePlay() {
+            this.running ? this.pause() : this.play();
+        }
         play() {
             this.running = true;
         }
@@ -18694,6 +18766,248 @@ var LeaferUI = function(exports) {
     });
     Plugin.add("bright");
     exports.UI.addAttr("bright", false, dimType);
+    const config = {
+        theme: "light",
+        style: {
+            dragBoundsType: "outer",
+            strokeAlign: "center",
+            strokeWidthFixed: "zoom-in",
+            width: 6,
+            height: 6,
+            opacity: .5,
+            cornerRadius: 3,
+            hoverStyle: {
+                opacity: .6
+            },
+            pressStyle: {
+                opacity: .66
+            }
+        },
+        size: 6,
+        endsMargin: 2,
+        sideMargin: 2,
+        minSize: 10,
+        scaleFixed: "zoom-in",
+        scrollType: "both",
+        hideOnActionEnd: "hover"
+    };
+    const tempBounds = new Bounds, {float: float} = MathHelper, {clone: clone, assign: assign} = DataHelper;
+    class Scroller extends exports.Group {
+        get canUse() {
+            return this.target.hasScroller;
+        }
+        constructor(target) {
+            super();
+            this.targetWorldBounds = new Bounds;
+            this.viewportBounds = new Bounds;
+            this.contentBounds = new Bounds;
+            this.scrollXBounds = new Bounds;
+            this.scrollYBounds = new Bounds;
+            this.target = target;
+            this.config = clone(config);
+            this.updateConfig();
+            this.__listenEvents();
+            target.waitLeafer(() => {
+                this.parent = target;
+                this.__bindLeafer(target.leafer);
+            });
+            if (this.mergedConfig.hideOnActionEnd) this.opacity = 0;
+        }
+        static registerTheme(theme, themeConfig) {
+            S.themeMap[theme] = themeConfig;
+        }
+        static getTheme(theme) {
+            return theme && S.themeMap[theme];
+        }
+        static hasTheme(theme) {
+            return theme && !!S.themeMap[theme];
+        }
+        updateConfig() {
+            const {scrollConfig: scrollConfig} = this.target;
+            const themeConfig = S.getTheme(scrollConfig && S.hasTheme(scrollConfig.theme) && scrollConfig.theme || this.config.theme);
+            const mergedConfig = this.mergedConfig = clone(this.config);
+            assign(mergedConfig, themeConfig);
+            if (scrollConfig) assign(mergedConfig, scrollConfig);
+            this.updateStyle(mergedConfig.style);
+        }
+        updateStyle(style) {
+            if (!this.scrollXBar) this.addMany(this.scrollXBar = new exports.Box, this.scrollYBar = new exports.Box);
+            const {scrollXBar: scrollXBar, scrollYBar: scrollYBar} = this;
+            scrollXBar.set(style);
+            scrollYBar.set(style);
+            scrollXBar.draggable = "x";
+            scrollYBar.draggable = "y";
+        }
+        update(check = true) {
+            if (this.dragScrolling) return;
+            const {target: target, targetOverflow: targetOverflow, targetWorldBounds: targetWorldBounds, viewportBounds: viewportBounds, contentBounds: contentBounds} = this, layout = target.__layout, {overflow: overflow} = target.__;
+            const {childrenRenderBounds: childrenRenderBounds} = layout;
+            const {boxBounds: boxBounds, worldBoxBounds: worldBoxBounds} = layout;
+            const isSameWorldBounds = check && targetOverflow === overflow && targetWorldBounds.isSame(worldBoxBounds);
+            const isSameConfig = layout.scrollConfigChanged ? (this.updateConfig(), layout.scrollConfigChanged = false) : true;
+            const nowContentBounds = tempBounds.set(viewportBounds).add(childrenRenderBounds);
+            if (isSameWorldBounds && isSameConfig && contentBounds.isSame(nowContentBounds)) return;
+            this.targetOverflow = overflow;
+            viewportBounds.set(boxBounds);
+            targetWorldBounds.set(worldBoxBounds);
+            contentBounds.set(nowContentBounds);
+            const {scrollXBar: scrollXBar, scrollYBar: scrollYBar} = this, {size: size, endsMargin: endsMargin, minSize: minSize} = this.mergedConfig, {width: width, height: height} = viewportBounds;
+            this.contentRealX = contentBounds.x - target.scrollX;
+            this.contentRealY = contentBounds.y - target.scrollY;
+            this.ratioX = viewportBounds.width / contentBounds.width;
+            this.ratioY = viewportBounds.height / contentBounds.height;
+            const min = size + endsMargin * 2 + minSize;
+            scrollXBar.visible = float(contentBounds.width) > float(width) && overflow !== "y-scroll" && width > min;
+            scrollYBar.visible = float(contentBounds.height) > float(height) && overflow !== "x-scroll" && height > min;
+            this.updateScrollBar();
+        }
+        updateScrollBar() {
+            const {target: target, viewportBounds: viewportBounds, contentBounds: contentBounds, ratioX: ratioX, ratioY: ratioY, scrollXBar: scrollXBar, scrollYBar: scrollYBar, scrollXBounds: scrollXBounds, scrollYBounds: scrollYBounds} = this;
+            let {size: size, cornerRadius: cornerRadius, endsMargin: endsMargin, sideMargin: sideMargin, minSize: minSize, scaleFixed: scaleFixed, scrollType: scrollType} = this.mergedConfig;
+            const scale = scaleFixed ? target.getClampRenderScale() : 1;
+            endsMargin /= scale;
+            sideMargin /= scale;
+            size /= scale;
+            if (isUndefined(cornerRadius)) cornerRadius = size / 2;
+            if (scrollXBar.visible) {
+                scrollXBounds.set(viewportBounds).shrink([ endsMargin, scrollYBar.visible ? size + sideMargin : endsMargin, sideMargin, endsMargin ]);
+                const scrollRatioX = this.scrollRatioX = scrollXBounds.width / contentBounds.width;
+                scrollXBar.set({
+                    x: scrollXBounds.x - contentBounds.x * scrollRatioX,
+                    y: scrollXBounds.maxY - size,
+                    width: Math.max(scrollXBounds.width * ratioX, minSize),
+                    height: size,
+                    cornerRadius: cornerRadius,
+                    dragBounds: scrollXBounds,
+                    hittable: scrollType !== "move"
+                });
+            }
+            if (scrollYBar.visible) {
+                scrollYBounds.set(viewportBounds).shrink([ endsMargin, sideMargin, scrollXBar.visible ? size + sideMargin : endsMargin, endsMargin ]);
+                const scrollRatioY = this.scrollRatioY = scrollYBounds.height / contentBounds.height;
+                scrollYBar.set({
+                    x: scrollYBounds.maxX - size,
+                    y: scrollYBounds.y - contentBounds.y * scrollRatioY,
+                    width: size,
+                    height: Math.max(scrollYBounds.height * ratioY, minSize),
+                    cornerRadius: cornerRadius,
+                    dragBounds: scrollYBounds,
+                    hittable: scrollType !== "move"
+                });
+            }
+            this.x = -this.target.scrollX;
+            this.y = -this.target.scrollY;
+            LeafHelper.updateAllMatrix(this);
+            BranchHelper.updateBounds(this);
+            LeafHelper.updateAllChange(this);
+        }
+        onDrag(e) {
+            if (this.mergedConfig.scrollType === "move") return;
+            this.dragScrolling = true;
+            const {scrollXBar: scrollXBar, scrollYBar: scrollYBar, target: target, scrollXBounds: scrollXBounds, scrollYBounds: scrollYBounds} = this;
+            const scrollX = e.current === scrollXBar;
+            if (scrollX) target.scrollX = -((scrollXBar.x - scrollXBounds.x) / this.scrollRatioX + this.contentRealX); else target.scrollY = -((scrollYBar.y - scrollYBounds.y) / this.scrollRatioY + this.contentRealY);
+        }
+        onDragEnd() {
+            if (this.mergedConfig.scrollType === "move") return;
+            this.dragScrolling = false;
+        }
+        onMove(e) {
+            if (!this.canUse) return;
+            this.onEnter();
+            const {scrollType: scrollType, stopDefault: stopDefault} = this.mergedConfig;
+            if (scrollType === "drag") return;
+            const {viewportBounds: viewportBounds, contentBounds: contentBounds, scrollXBar: scrollXBar, scrollYBar: scrollYBar} = this;
+            if (scrollXBar.visible || scrollYBar.visible) {
+                const move = e.getInnerMove(this.target);
+                DragBoundsHelper.getValidMove(contentBounds, viewportBounds, "inner", move, true);
+                let needStop;
+                if (move.x && scrollXBar.visible) this.target.scrollX += move.x, needStop = true;
+                if (move.y && scrollYBar.visible) this.target.scrollY += move.y, needStop = true;
+                if (needStop || stopDefault) e.stop();
+                if (stopDefault) e.stopDefault();
+            }
+        }
+        onMoveEnd(e) {
+            if (!this.canUse) return;
+            if (!this.target.hit(e)) this.onLeave();
+        }
+        onEnter() {
+            if (!this.canUse) return;
+            clearTimeout(this.hideTimer);
+            this.killAnimate();
+            this.opacity = 1;
+        }
+        onLeave() {
+            if (!this.canUse) return;
+            clearTimeout(this.hideTimer);
+            if (this.mergedConfig.hideOnActionEnd) this.hideTimer = setTimeout(() => {
+                this.set({
+                    opacity: 0
+                }, Plugin.has("animate"));
+            }, 600);
+        }
+        onResize() {
+            if (this.canUse) this.update();
+        }
+        __listenEvents() {
+            const {scrollXBar: scrollXBar, scrollYBar: scrollYBar, target: target} = this;
+            this.__eventIds = [ scrollXBar.on_(exports.DragEvent.DRAG, this.onDrag, this), scrollXBar.on_(exports.DragEvent.END, this.onDragEnd, this), scrollYBar.on_(exports.DragEvent.DRAG, this.onDrag, this), scrollYBar.on_(exports.DragEvent.END, this.onDragEnd, this), target.on_(exports.PointerEvent.ENTER, this.onEnter, this), target.on_(exports.PointerEvent.LEAVE, this.onLeave, this), target.on_(exports.MoveEvent.BEFORE_MOVE, this.onMove, this), target.on_(exports.MoveEvent.END, this.onMoveEnd, this), target.on_(BoundsEvent.WORLD, this.onResize, this), target.on_(ChildEvent.DESTROY, this.destroy, this) ];
+        }
+        __removeListenEvents() {
+            this.off_(this.__eventIds);
+        }
+        destroy() {
+            if (!this.destroyed) {
+                this.__removeListenEvents();
+                const {target: target} = this;
+                target.scroller = target.topChildren = target.hasScroller = undefined;
+                this.target = this.config = null;
+                super.destroy();
+            }
+        }
+    }
+    Scroller.themeMap = {};
+    const S = Scroller;
+    function scrollConfigType(defaultValue) {
+        return decorateLeafAttr(defaultValue, key => attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const layout = this.__layout;
+                    layout.scrollConfigChanged = true;
+                    doBoundsType(this);
+                }
+            }
+        }));
+    }
+    Plugin.add("scroller");
+    const box = exports.Box.prototype;
+    exports.Box.addAttr("scrollConfig", undefined, scrollConfigType);
+    box.__checkScroll = function(isScrollMode) {
+        if (isScrollMode && this.isOverflow) {
+            if (!this.scroller) {
+                this.scroller = new Scroller(this);
+                if (!this.topChildren) this.topChildren = [];
+                this.topChildren.push(this.scroller);
+            }
+            this.hasScroller = true;
+        } else {
+            if (this.hasScroller && !this.scroller.dragScrolling) {
+                this.hasScroller = undefined;
+                this.scroller.update();
+            }
+        }
+    };
+    Scroller.registerTheme("light", {
+        style: {
+            fill: "black"
+        }
+    });
+    Scroller.registerTheme("dark", {
+        style: {
+            fill: "white"
+        }
+    });
     exports.AlignHelper = AlignHelper;
     exports.AnimateEasing = AnimateEasing;
     exports.AnimateEvent = AnimateEvent;
@@ -18773,8 +19087,10 @@ var LeaferUI = function(exports) {
     exports.LeaferCanvasBase = LeaferCanvasBase;
     exports.LeaferData = LeaferData;
     exports.LeaferEvent = LeaferEvent;
+    exports.LeaferFilm = LeaferFilm;
     exports.LeaferImage = LeaferImage;
     exports.LeaferTypeCreator = LeaferTypeCreator;
+    exports.LeaferVideo = LeaferVideo;
     exports.LineData = LineData;
     exports.MathHelper = MathHelper;
     exports.Matrix = Matrix;
@@ -18826,6 +19142,7 @@ var LeaferUI = function(exports) {
     exports.RobotData = RobotData;
     exports.Run = Run;
     exports.ScrollBar = ScrollBar;
+    exports.Scroller = Scroller;
     exports.SelectArea = SelectArea;
     exports.Selector = Selector;
     exports.StarData = StarData;
@@ -18922,7 +19239,7 @@ var LeaferUI = function(exports) {
     exports.stateType = stateType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
-    exports.tempBounds = tempBounds$2;
+    exports.tempBounds = tempBounds$3;
     exports.tempMatrix = tempMatrix$2;
     exports.tempPoint = tempPoint$4;
     exports.tryToNumber = tryToNumber;