@leafer-editor/worker 2.0.1 → 2.0.2

package/dist/worker.module.js

@@ -7,6 +7,45 @@ var PathNodeHandleType;
     PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
 })(PathNodeHandleType || (PathNodeHandleType = {}));
 
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var Answer;
 
 (function(Answer) {
@@ -1897,7 +1936,10 @@ const UICreator = {
         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;
@@ -1988,45 +2030,6 @@ class CanvasManager {
     }
 }
 
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-        return value instanceof P ? value : new P(function(resolve) {
-            resolve(value);
-        });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) {
-            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 function contextAttr(realName) {
     return (target, key) => {
         if (!realName) realName = key;
@@ -3754,10 +3757,10 @@ function canvasPatch(drawer) {
 const FileHelper = {
     alphaPixelTypes: [ "png", "webp", "svg" ],
     upperCaseTypeMap: {},
-    mineType(type) {
-        if (!type || type.startsWith("image")) return type;
+    mimeType(type, base = "image") {
+        if (!type || type.startsWith(base)) return type;
         if (type === "jpg") type = "jpeg";
-        return "image/" + type;
+        return base + "/" + type;
     },
     fileType(filename) {
         const l = filename.split(".");
@@ -3790,6 +3793,8 @@ const FileHelper = {
 
 const F$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");
@@ -4034,6 +4039,9 @@ const debug$b = Debug.get("Resource");
 
 const Resource = {
     tasker: new TaskProcessor,
+    queue: new TaskProcessor({
+        parallel: 1
+    }),
     map: {},
     get isComplete() {
         return R.tasker.isComplete;
@@ -4070,6 +4078,12 @@ const Resource = {
         R.set(key, value);
         return value;
     },
+    loadFilm(_key, _format) {
+        return undefined;
+    },
+    loadVideo(_key, _format) {
+        return undefined;
+    },
     destroy() {
         R.map = {};
     }
@@ -4080,12 +4094,10 @@ const R = Resource;
 const ImageManager = {
     maxRecycled: 10,
     recycledList: [],
-    patternTasker: new TaskProcessor({
-        parallel: 1
-    }),
-    get(config) {
+    patternTasker: Resource.queue,
+    get(config, type) {
         let image = Resource.get(config.url);
-        if (!image) Resource.set(config.url, image = Creator.image(config));
+        if (!image) Resource.set(config.url, image = type === "film" ? Creator.film(config) : Creator.image(config));
         image.use++;
         return image;
     },
@@ -4120,7 +4132,7 @@ const ImageManager = {
         if (config.format) return config.format === format;
         const {url: url} = config;
         if (url.startsWith("data:")) {
-            if (url.startsWith("data:" + FileHelper.mineType(format))) return true;
+            if (url.startsWith("data:" + FileHelper.mimeType(format))) return true;
         } else {
             if (url.includes("." + format) || url.includes("." + FileHelper.upperCaseTypeMap[format])) return true; else if (format === "png" && !url.includes(".")) return true;
         }
@@ -4136,6 +4148,9 @@ const I$1 = ImageManager;
 const {IMAGE: IMAGE, create: create$1} = IncrementId;
 
 class LeaferImage {
+    get tag() {
+        return "Image";
+    }
     get url() {
         return this.config.url;
     }
@@ -4164,7 +4179,7 @@ class LeaferImage {
         if (!this.loading) {
             this.loading = true;
             Resource.tasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                return yield Platform.origin.loadImage(this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
+                return yield Platform.origin["load" + this.tag](this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
                     if (thumbSize) this.setThumbView(img);
                     this.setView(img);
                 }).catch(e => {
@@ -4238,6 +4253,9 @@ class LeaferImage {
         Platform.image.setPatternTransform(pattern, transform, paint);
         return pattern;
     }
+    render(canvas, x, y, width, height, _leaf, _paint, _imageScaleX, _imageScaleY) {
+        canvas.drawImage(this.view, x, y, width, height);
+    }
     getLoadUrl(_thumbSize) {
         return this.url;
     }
@@ -4264,6 +4282,18 @@ class LeaferImage {
     }
 }
 
+class LeaferFilm extends LeaferImage {
+    get tag() {
+        return "Film";
+    }
+}
+
+class LeaferVideo extends LeaferImage {
+    get tag() {
+        return "Video";
+    }
+}
+
 function defineKey(target, key, descriptor, noConfigurable) {
     if (!noConfigurable) descriptor.configurable = descriptor.enumerable = true;
     Object.defineProperty(target, key, descriptor);
@@ -6152,9 +6182,11 @@ const BranchRender = {
         if (this.__hasMask) {
             this.__renderMask(canvas, options);
         } else {
+            let child;
             const {children: children} = this;
             for (let i = 0, len = children.length; i < len; i++) {
-                excludeRenderBounds$1(children[i], options) || children[i].__render(canvas, options);
+                child = children[i];
+                excludeRenderBounds$1(child, options) || (child.__.complex ? child.__renderComplex(canvas, options) : child.__render(canvas, options));
             }
         }
     },
@@ -6635,6 +6667,7 @@ let Leaf = class Leaf {
     __drawHitPath(_canvas) {}
     __updateHitCanvas() {}
     __render(_canvas, _options) {}
+    __renderComplex(_canvas, _options) {}
     __drawFast(_canvas, _options) {}
     __draw(_canvas, _options, _originCanvas) {}
     __clip(_canvas, _options) {}
@@ -6754,6 +6787,7 @@ let Branch = class Branch extends Leaf {
                 this.add(item, index);
                 noIndex || index++;
             }); else child = UICreator.get(child.tag, child);
+            if (!child) return;
         }
         if (child.parent) child.parent.remove(child);
         child.parent = this;
@@ -6979,7 +7013,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.0.1";
+const version = "2.0.2";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() {
@@ -7005,8 +7039,6 @@ 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)
@@ -7017,7 +7049,7 @@ function useCanvas(_canvasType, _power) {
         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;
@@ -7029,14 +7061,14 @@ function useCanvas(_canvasType, _power) {
             });
         }),
         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);
@@ -7051,6 +7083,13 @@ function useCanvas(_canvasType, _power) {
                 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();
@@ -7550,7 +7589,7 @@ class Renderer {
     getCellList() {
         return undefined;
     }
-    addBlock(block) {
+    addBlock(block, _leafList) {
         if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
@@ -7598,7 +7637,8 @@ class Renderer {
     __onLayoutEnd(event) {
         if (event.data) event.data.map(item => {
             let empty;
-            if (item.updatedList) item.updatedList.list.some(leaf => {
+            const {updatedList: updatedList} = item;
+            if (updatedList) updatedList.list.some(leaf => {
                 empty = !leaf.__world.width || !leaf.__world.height;
                 if (empty) {
                     if (!leaf.isLeafer) debug$6.tip(leaf.innerName, ": empty");
@@ -7606,7 +7646,7 @@ class Renderer {
                 }
                 return empty;
             });
-            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
         });
     }
     emitRender(type, bounds, options) {
@@ -8214,13 +8254,16 @@ class TextData extends UIData {
 }
 
 class ImageData extends RectData {
+    get __urlType() {
+        return "image";
+    }
     setUrl(value) {
         this.__setImageFill(value);
         this._url = value;
     }
     __setImageFill(value) {
         this.fill = value ? {
-            type: "image",
+            type: this.__urlType,
             mode: "stretch",
             url: value
         } : undefined;
@@ -8720,7 +8763,10 @@ let Group = class Group extends UI {
     }
     toJSON(options) {
         const data = super.toJSON(options);
-        if (!this.childlessJSON) data.children = this.children.map(child => child.toJSON(options));
+        if (!this.childlessJSON) {
+            const children = data.children = [];
+            this.children.forEach(child => child.skipJSON || children.push(child.toJSON(options)));
+        }
         return data;
     }
     pick(_hitPoint, _options) {
@@ -8869,12 +8915,12 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             this.emitLeafer(LeaferEvent.STOP);
         }
     }
-    unlockLayout() {
+    unlockLayout(updateLayout = true) {
         this.layouter.start();
-        this.updateLayout();
+        if (updateLayout) this.updateLayout();
     }
-    lockLayout() {
-        this.updateLayout();
+    lockLayout(updateLayout = true) {
+        if (updateLayout) this.updateLayout();
         this.layouter.stop();
     }
     resize(size) {
@@ -10667,6 +10713,7 @@ class InteractionBase {
         this.checkPath(data, useDefaultPath);
         this.downTime = Date.now();
         this.emit(PointerEvent.BEFORE_DOWN, data);
+        if (data.path.needUpdate) this.updateDownData(data);
         this.emit(PointerEvent.DOWN, data);
         if (PointerButton.left(data)) {
             this.tapWait();
@@ -11564,11 +11611,14 @@ function compute(attrName, ui) {
 function getLeafPaint(attrName, paint, ui) {
     if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
     let leafPaint;
-    const {boxBounds: boxBounds} = ui.__layout;
-    switch (paint.type) {
+    const {boxBounds: boxBounds} = ui.__layout, {type: type} = paint;
+    switch (type) {
       case "image":
+      case "film":
+      case "video":
         if (!paint.url) return undefined;
         leafPaint = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        if (type !== "image") PaintImage[type](leafPaint);
         break;
 
       case "linear":
@@ -11584,7 +11634,7 @@ function getLeafPaint(attrName, paint, ui) {
         break;
 
       case "solid":
-        const {type: type, color: color, opacity: opacity} = paint;
+        const {color: color, opacity: opacity} = paint;
         leafPaint = {
             type: type,
             style: ColorConvert.string(color, opacity)
@@ -11628,7 +11678,7 @@ const {isSame: isSame} = BoundsHelper;
 
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
-    const image = ImageManager.get(paint);
+    const image = ImageManager.get(paint, paint.type);
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint;
     } else {
@@ -11689,8 +11739,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 }
 
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === "fill" && !ui.__.__naturalWidth) {
-        const data = ui.__;
+    const data = ui.__;
+    if (attrName === "fill" && !data.__naturalWidth) {
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
@@ -11702,7 +11752,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
             return false;
         }
     }
-    if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds);
+    if (!leafPaint.data) {
+        PaintImage.createData(leafPaint, image, paint, boxBounds);
+        const {transform: transform} = leafPaint.data, {opacity: opacity, blendMode: blendMode} = paint;
+        const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
+        if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
+    }
     return true;
 }
 
@@ -11745,7 +11800,7 @@ function getPatternData(paint, box, image) {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === "strench") paint.mode = "stretch";
     const {width: width, height: height} = image;
-    const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters, interlace: interlace} = paint;
+    const {mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, interlace: interlace} = paint;
     const sameBox = box.width === width && box.height === height;
     const data = {
         mode: mode
@@ -11808,8 +11863,6 @@ function getPatternData(paint, box, image) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    if (opacity && opacity < 1) data.opacity = opacity;
-    if (filters) data.filters = filters;
     if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     if (interlace) data.interlace = isNumber(interlace) || interlace.type === "percent" ? {
         type: "x",
@@ -11840,7 +11893,7 @@ const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translat
 
 function stretchMode(data, box, scaleX, scaleY) {
     const transform = get$2(), {x: x, y: y} = box;
-    if (x || y) translate(transform, x, y); else transform.onlyScale = true;
+    if (x || y) translate(transform, x, y); else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true;
     scaleHelper(transform, scaleX, scaleY);
     data.transform = transform;
 }
@@ -11929,10 +11982,10 @@ function createPatternTask(paint, ui, canvas, renderOptions) {
 }
 
 function createPattern(paint, ui, canvas, renderOptions) {
-    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
+    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
-            const {image: image, data: data} = paint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+            const {image: image, data: data} = paint, {opacity: opacity, filters: filters} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
             let imageMatrix, xGap, yGap, {width: width, height: height} = image;
             if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
             width *= scaleX;
@@ -11948,7 +12001,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
                 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;
@@ -11969,15 +12022,15 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
 }
 
 function checkImage(paint, drawImage, ui, canvas, renderOptions) {
-    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
-    if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting || snapshot) {
+    if (!data || paint.patternId === id && !exporting || snapshot) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(originPaint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || paint.film || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
             }
         }
@@ -11995,20 +12048,21 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     }
 }
 
-function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    const {data: data, image: image} = paint, {blendMode: blendMode} = paint.originPaint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
-    let {width: width, height: height} = image, clipUI;
-    if ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
+function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
+    const {data: data, image: image, complex: complex} = paint;
+    let {width: width, height: height} = image;
+    if (complex) {
+        const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
         canvas.save();
-        clipUI && canvas.clipUI(ui);
+        complex === 2 && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
         opacity && (canvas.opacity *= opacity);
         transform && canvas.transform(transform);
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
         canvas.restore();
     } else {
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
     }
 }
 
@@ -13293,6 +13347,7 @@ class EditSelect extends Group {
                 } 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;
             }
@@ -14511,6 +14566,7 @@ class SimulateElement extends Rect {
         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;
@@ -15713,9 +15769,14 @@ function addViewport(leafer, mergeConfig, custom) {
     }), leafer.on_(MoveEvent.END, e => {
         LeafHelper.animateMove(leafer.zoomLayer, leafer.getValidMove(e.moveX, e.moveY));
     }), leafer.on_(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();
+        }
     }));
 }
 
@@ -17328,6 +17389,8 @@ function setFill(style, fill) {
             break;
 
           case "image":
+          case "film":
+          case "video":
             break;
 
           case "linear":
@@ -17660,4 +17723,4 @@ HTMLText = __decorate([ registerUI() ], HTMLText);
 
 Plugin.add("html");
 
-export { AlignHelper, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, FourNumberHelper, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, TouchEvent, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite$1 as isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, FourNumberHelper, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferTypeCreator, LeaferVideo, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, TouchEvent, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite$1 as isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$3 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };