@leafer-ui/node 1.8.0 → 1.9.0

package/dist/node.cjs

@@ -1,44 +1,50 @@
-'use strict';
-
-var core = require('@leafer/core');
-var fs = require('fs');
-var core$1 = require('@leafer-ui/core');
-var draw = require('@leafer-ui/draw');
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-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;
+"use strict";
+
+var core = require("@leafer/core");
+
+var fs = require("fs");
+
+var core$1 = require("@leafer-ui/core");
+
+var draw = require("@leafer-ui/draw");
+
+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;
 };
 
 class LeaferCanvas extends core.LeaferCanvasBase {
-    get allowBackgroundColor() { return true; }
+    get allowBackgroundColor() {
+        return true;
+    }
     init() {
         this.__createView();
         this.__createContext();
@@ -52,84 +58,114 @@ class LeaferCanvas extends core.LeaferCanvasBase {
         this.view = core.Platform.origin.createCanvas(1, 1);
     }
     updateViewSize() {
-        const { width, height, pixelRatio } = this;
+        const {width: width, height: height, pixelRatio: pixelRatio} = this;
         this.view.width = Math.ceil(width * pixelRatio);
         this.view.height = Math.ceil(height * pixelRatio);
         this.clientBounds = this.bounds;
     }
 }
 
-const { mineType, fileType } = core.FileHelper;
+const {mineType: mineType, fileType: fileType} = core.FileHelper;
+
 Object.assign(core.Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
-    image: (options) => new core.LeaferImage(options)
+    image: options => new core.LeaferImage(options)
 });
+
 function useCanvas(canvasType, power) {
     core.Platform.canvasType = canvasType;
     if (!core.Platform.origin) {
-        if (canvasType === 'skia') {
-            const { Canvas, loadImage } = power;
+        if (canvasType === "skia") {
+            const {Canvas: Canvas, loadImage: loadImage} = power;
             core.Platform.origin = {
                 createCanvas: (width, height, format) => new Canvas(width, height, format),
-                canvasToDataURL: (canvas, type, quality) => canvas.toDataURLSync(type, { quality }),
-                canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
-                canvasSaveAs: (canvas, filename, quality) => canvas.saveAs(filename, { quality }),
-                download(_url, _filename) { return undefined; },
-                loadImage(src) { return loadImage(core.Platform.image.getRealURL(src)); }
+                canvasToDataURL: (canvas, type, quality) => canvas.toDataURLSync(type, {
+                    quality: quality
+                }),
+                canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, {
+                    quality: quality
+                }),
+                canvasSaveAs: (canvas, filename, quality) => canvas.saveAs(filename, {
+                    quality: quality
+                }),
+                download(_url, _filename) {
+                    return undefined;
+                },
+                loadImage(src) {
+                    return loadImage(core.Platform.image.getRealURL(src));
+                }
             };
             core.Platform.roundRectPatch = true;
-        }
-        else if (canvasType === 'napi') {
-            const { Canvas, loadImage } = power;
+        } else if (canvasType === "napi") {
+            const {Canvas: Canvas, loadImage: loadImage} = power;
             core.Platform.origin = {
                 createCanvas: (width, height, format) => new Canvas(width, height, format),
                 canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
-                canvasToBolb: (canvas, type, quality) => __awaiter(this, void 0, void 0, function* () { return canvas.toBuffer(mineType(type), quality); }),
-                canvasSaveAs: (canvas, filename, quality) => __awaiter(this, void 0, void 0, function* () { return fs.writeFileSync(filename, canvas.toBuffer(mineType(fileType(filename)), quality)); }),
-                download(_url, _filename) { return undefined; },
-                loadImage(src) { return loadImage(core.Platform.image.getRealURL(src)); }
+                canvasToBolb: (canvas, type, quality) => __awaiter(this, void 0, void 0, function*() {
+                    return canvas.toBuffer(mineType(type), quality);
+                }),
+                canvasSaveAs: (canvas, filename, quality) => __awaiter(this, void 0, void 0, function*() {
+                    return fs.writeFileSync(filename, canvas.toBuffer(mineType(fileType(filename)), quality));
+                }),
+                download(_url, _filename) {
+                    return undefined;
+                },
+                loadImage(src) {
+                    return loadImage(core.Platform.image.getRealURL(src));
+                }
             };
         }
         core.Platform.ellipseToCurve = true;
         core.Platform.event = {
-            stopDefault(_origin) { },
-            stopNow(_origin) { },
-            stop(_origin) { }
+            stopDefault(_origin) {},
+            stopNow(_origin) {},
+            stop(_origin) {}
         };
         core.Platform.canvas = core.Creator.canvas();
     }
 }
-core.Platform.name = 'node';
+
+core.Platform.name = "node";
+
 core.Platform.backgrounder = true;
-core.Platform.requestRender = function (render) { setTimeout(render, 16); };
-core.defineKey(core.Platform, 'devicePixelRatio', { get() { return 1; } });
+
+core.Platform.requestRender = function(render) {
+    setTimeout(render, 16);
+};
+
+core.defineKey(core.Platform, "devicePixelRatio", {
+    get() {
+        return 1;
+    }
+});
+
 core.Platform.conicGradientSupport = true;
 
 class Watcher {
-    get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
+    get childrenChanged() {
+        return this.hasAdd || this.hasRemove || this.hasVisible;
+    }
     get updatedList() {
         if (this.hasRemove) {
-            const updatedList = new core.LeafList();
-            this.__updatedList.list.forEach(item => { if (item.leafer)
-                updatedList.add(item); });
+            const updatedList = new core.LeafList;
+            this.__updatedList.list.forEach(item => {
+                if (item.leafer) updatedList.add(item);
+            });
             return updatedList;
-        }
-        else {
+        } else {
             return this.__updatedList;
         }
     }
     constructor(target, userConfig) {
         this.totalTimes = 0;
         this.config = {};
-        this.__updatedList = new core.LeafList();
+        this.__updatedList = new core.LeafList;
         this.target = target;
-        if (userConfig)
-            this.config = core.DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
-        if (this.disabled)
-            return;
+        if (this.disabled) return;
         this.running = true;
     }
     stop() {
@@ -142,8 +178,7 @@ class Watcher {
     }
     update() {
         this.changed = true;
-        if (this.running)
-            this.target.emit(core.RenderEvent.REQUEST);
+        if (this.running) this.target.emit(core.RenderEvent.REQUEST);
     }
     __onAttrChange(event) {
         this.__updatedList.add(event.target);
@@ -153,8 +188,7 @@ class Watcher {
         if (event.type === core.ChildEvent.ADD) {
             this.hasAdd = true;
             this.__pushChild(event.child);
-        }
-        else {
+        } else {
             this.hasRemove = true;
             this.__updatedList.add(event.parent);
         }
@@ -162,28 +196,22 @@ class Watcher {
     }
     __pushChild(child) {
         this.__updatedList.add(child);
-        if (child.isBranch)
-            this.__loopChildren(child);
+        if (child.isBranch) this.__loopChildren(child);
     }
     __loopChildren(parent) {
-        const { children } = parent;
-        for (let i = 0, len = children.length; i < len; i++)
-            this.__pushChild(children[i]);
+        const {children: children} = parent;
+        for (let i = 0, len = children.length; i < len; i++) this.__pushChild(children[i]);
     }
     __onRquestData() {
-        this.target.emitEvent(new core.WatchEvent(core.WatchEvent.DATA, { updatedList: this.updatedList }));
-        this.__updatedList = new core.LeafList();
+        this.target.emitEvent(new core.WatchEvent(core.WatchEvent.DATA, {
+            updatedList: this.updatedList
+        }));
+        this.__updatedList = new core.LeafList;
         this.totalTimes++;
         this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false;
     }
     __listenEvents() {
-        this.__eventIds = [
-            this.target.on_([
-                [core.PropertyEvent.CHANGE, this.__onAttrChange, this],
-                [[core.ChildEvent.ADD, core.ChildEvent.REMOVE], this.__onChildEvent, this],
-                [core.WatchEvent.REQUEST, this.__onRquestData, this]
-            ])
-        ];
+        this.__eventIds = [ this.target.on_([ [ core.PropertyEvent.CHANGE, this.__onAttrChange, this ], [ [ core.ChildEvent.ADD, core.ChildEvent.REMOVE ], this.__onChildEvent, this ], [ core.WatchEvent.REQUEST, this.__onRquestData, this ] ]) ];
     }
     __removeListenEvents() {
         this.target.off_(this.__eventIds);
@@ -197,8 +225,10 @@ class Watcher {
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = core.LeafHelper;
-const { pushAllChildBranch, pushAllParent } = core.BranchHelper;
+const {updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange} = core.LeafHelper;
+
+const {pushAllChildBranch: pushAllChildBranch, pushAllParent: pushAllParent} = core.BranchHelper;
+
 function updateMatrix(updateList, levelList) {
     let layout;
     updateList.list.forEach(leaf => {
@@ -207,19 +237,17 @@ function updateMatrix(updateList, levelList) {
             if (layout.matrixChanged) {
                 updateAllMatrix$1(leaf, true);
                 levelList.add(leaf);
-                if (leaf.isBranch)
-                    pushAllChildBranch(leaf, levelList);
+                if (leaf.isBranch) pushAllChildBranch(leaf, levelList);
                 pushAllParent(leaf, levelList);
-            }
-            else if (layout.boundsChanged) {
+            } else if (layout.boundsChanged) {
                 levelList.add(leaf);
-                if (leaf.isBranch)
-                    leaf.__tempNumber = 0;
+                if (leaf.isBranch) leaf.__tempNumber = 0;
                 pushAllParent(leaf, levelList);
             }
         }
     });
 }
+
 function updateBounds(boundsList) {
     let list, branch, children;
     boundsList.sort(true);
@@ -239,18 +267,19 @@ function updateBounds(boundsList) {
         }
     });
 }
+
 function updateChange(updateList) {
     updateList.list.forEach(updateOneChange);
 }
 
-const { worldBounds } = core.LeafBoundsHelper;
+const {worldBounds: worldBounds} = core.LeafBoundsHelper;
+
 class LayoutBlockData {
     constructor(list) {
-        this.updatedBounds = new core.Bounds();
-        this.beforeBounds = new core.Bounds();
-        this.afterBounds = new core.Bounds();
-        if (list instanceof Array)
-            list = new core.LeafList(list);
+        this.updatedBounds = new core.Bounds;
+        this.beforeBounds = new core.Bounds;
+        this.afterBounds = new core.Bounds;
+        if (core.isArray(list)) list = new core.LeafList(list);
         this.updatedList = list;
     }
     setBefore() {
@@ -258,7 +287,7 @@ class LayoutBlockData {
     }
     setAfter() {
         this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
-        this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
+        this.updatedBounds.setList([ this.beforeBounds, this.afterBounds ]);
     }
     merge(data) {
         this.updatedList.addList(data.updatedList.list);
@@ -271,21 +300,21 @@ class LayoutBlockData {
     }
 }
 
-const { updateAllMatrix, updateAllChange } = core.LeafHelper;
-const debug$2 = core.Debug.get('Layouter');
+const {updateAllMatrix: updateAllMatrix, updateAllChange: updateAllChange} = core.LeafHelper;
+
+const debug$2 = core.Debug.get("Layouter");
+
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
         this.config = {};
-        this.__levelList = new core.LeafLevelList();
+        this.__levelList = new core.LeafLevelList;
         this.target = target;
-        if (userConfig)
-            this.config = core.DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
-        if (this.disabled)
-            return;
+        if (this.disabled) return;
         this.running = true;
     }
     stop() {
@@ -297,16 +326,14 @@ class Layouter {
         this.disabled = true;
     }
     layout() {
-        if (this.layouting || !this.running)
-            return;
-        const { target } = this;
+        if (this.layouting || !this.running) return;
+        const {target: target} = this;
         this.times = 0;
         try {
             target.emit(core.LayoutEvent.START);
             this.layoutOnce();
             target.emitEvent(new core.LayoutEvent(core.LayoutEvent.END, this.layoutedBlocks, this.times));
-        }
-        catch (e) {
+        } catch (e) {
             debug$2.error(e);
         }
         this.layoutedBlocks = null;
@@ -314,24 +341,20 @@ class Layouter {
     layoutAgain() {
         if (this.layouting) {
             this.waitAgain = true;
-        }
-        else {
+        } else {
             this.layoutOnce();
         }
     }
     layoutOnce() {
-        if (this.layouting)
-            return debug$2.warn('layouting');
-        if (this.times > 3)
-            return debug$2.warn('layout max times');
+        if (this.layouting) return debug$2.warn("layouting");
+        if (this.times > 3) return debug$2.warn("layout max times");
         this.times++;
         this.totalTimes++;
         this.layouting = true;
         this.target.emit(core.WatchEvent.REQUEST);
         if (this.totalTimes > 1) {
             this.partLayout();
-        }
-        else {
+        } else {
             this.fullLayout();
         }
         this.layouting = false;
@@ -342,11 +365,10 @@ class Layouter {
     }
     partLayout() {
         var _a;
-        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        const t = core.Run.start('PartLayout');
-        const { target, __updatedList: updateList } = this;
-        const { BEFORE, LAYOUT, AFTER } = core.LayoutEvent;
+        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length)) return;
+        const t = core.Run.start("PartLayout");
+        const {target: target, __updatedList: updateList} = this;
+        const {BEFORE: BEFORE, LAYOUT: LAYOUT, AFTER: AFTER} = core.LayoutEvent;
         const blocks = this.getBlocks(updateList);
         blocks.forEach(item => item.setBefore());
         target.emitEvent(new core.LayoutEvent(BEFORE, blocks, this.times));
@@ -355,8 +377,7 @@ class Layouter {
         updateMatrix(updateList, this.__levelList);
         updateBounds(this.__levelList);
         updateChange(updateList);
-        if (this.extraBlock)
-            blocks.push(this.extraBlock);
+        if (this.extraBlock) blocks.push(this.extraBlock);
         blocks.forEach(item => item.setAfter());
         target.emitEvent(new core.LayoutEvent(LAYOUT, blocks, this.times));
         target.emitEvent(new core.LayoutEvent(AFTER, blocks, this.times));
@@ -366,13 +387,15 @@ class Layouter {
         core.Run.end(t);
     }
     fullLayout() {
-        const t = core.Run.start('FullLayout');
-        const { target } = this;
-        const { BEFORE, LAYOUT, AFTER } = core.LayoutEvent;
+        const t = core.Run.start("FullLayout");
+        const {target: target} = this;
+        const {BEFORE: BEFORE, LAYOUT: LAYOUT, AFTER: AFTER} = core.LayoutEvent;
         const blocks = this.getBlocks(new core.LeafList(target));
         target.emitEvent(new core.LayoutEvent(BEFORE, blocks, this.times));
         Layouter.fullLayout(target);
-        blocks.forEach(item => { item.setAfter(); });
+        blocks.forEach(item => {
+            item.setAfter();
+        });
         target.emitEvent(new core.LayoutEvent(LAYOUT, blocks, this.times));
         target.emitEvent(new core.LayoutEvent(AFTER, blocks, this.times));
         this.addBlocks(blocks);
@@ -380,15 +403,12 @@ class Layouter {
     }
     static fullLayout(target) {
         updateAllMatrix(target, true);
-        if (target.isBranch)
-            core.BranchHelper.updateBounds(target);
-        else
-            core.LeafHelper.updateBounds(target);
+        if (target.isBranch) core.BranchHelper.updateBounds(target); else core.LeafHelper.updateBounds(target);
         updateAllChange(target);
     }
     addExtra(leaf) {
         if (!this.__updatedList.has(leaf)) {
-            const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+            const {updatedList: updatedList, beforeBounds: beforeBounds} = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
             updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world);
             updatedList.add(leaf);
         }
@@ -397,7 +417,7 @@ class Layouter {
         return new LayoutBlockData(data);
     }
     getBlocks(list) {
-        return [this.createBlock(list)];
+        return [ this.createBlock(list) ];
     }
     addBlocks(current) {
         this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current;
@@ -406,13 +426,7 @@ class Layouter {
         this.__updatedList = event.data.updatedList;
     }
     __listenEvents() {
-        this.__eventIds = [
-            this.target.on_([
-                [core.LayoutEvent.REQUEST, this.layout, this],
-                [core.LayoutEvent.AGAIN, this.layoutAgain, this],
-                [core.WatchEvent.DATA, this.__onReceiveWatchData, this]
-            ])
-        ];
+        this.__eventIds = [ this.target.on_([ [ core.LayoutEvent.REQUEST, this.layout, this ], [ core.LayoutEvent.AGAIN, this.layoutAgain, this ], [ core.WatchEvent.DATA, this.__onReceiveWatchData, this ] ]) ];
     }
     __removeListenEvents() {
         this.target.off_(this.__eventIds);
@@ -426,9 +440,12 @@ class Layouter {
     }
 }
 
-const debug$1 = core.Debug.get('Renderer');
+const debug$1 = core.Debug.get("Renderer");
+
 class Renderer {
-    get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
+    get needFill() {
+        return !!(!this.canvas.allowBackgroundColor && this.config.fill);
+    }
     constructor(target, canvas, userConfig) {
         this.FPS = 60;
         this.totalTimes = 0;
@@ -439,8 +456,7 @@ class Renderer {
         };
         this.target = target;
         this.canvas = canvas;
-        if (userConfig)
-            this.config = core.DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
@@ -451,8 +467,7 @@ class Renderer {
         this.running = false;
     }
     update(change = true) {
-        if (!this.changed)
-            this.changed = change;
+        if (!this.changed) this.changed = change;
         this.__requestRender();
     }
     requestLayout() {
@@ -460,7 +475,7 @@ class Renderer {
     }
     checkRender() {
         if (this.running) {
-            const { target } = this;
+            const {target: target} = this;
             if (target.isApp) {
                 target.emit(core.RenderEvent.CHILD_START, target);
                 target.children.forEach(leafer => {
@@ -469,54 +484,47 @@ class Renderer {
                 });
                 target.emit(core.RenderEvent.CHILD_END, target);
             }
-            if (this.changed && this.canvas.view)
-                this.render();
+            if (this.changed && this.canvas.view) this.render();
             this.target.emit(core.RenderEvent.NEXT);
         }
     }
     render(callback) {
-        if (!(this.running && this.canvas.view))
-            return this.update();
-        const { target } = this;
+        if (!(this.running && this.canvas.view)) return this.update();
+        const {target: target} = this;
         this.times = 0;
-        this.totalBounds = new core.Bounds();
-        debug$1.log(target.innerName, '--->');
+        this.totalBounds = new core.Bounds;
+        debug$1.log(target.innerName, "---\x3e");
         try {
             this.emitRender(core.RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(core.RenderEvent.END, this.totalBounds);
             core.ImageManager.clearRecycled();
-        }
-        catch (e) {
+        } catch (e) {
             this.rendering = false;
             debug$1.error(e);
         }
-        debug$1.log('-------------|');
+        debug$1.log("-------------|");
     }
     renderAgain() {
         if (this.rendering) {
             this.waitAgain = true;
-        }
-        else {
+        } else {
             this.renderOnce();
         }
     }
     renderOnce(callback) {
-        if (this.rendering)
-            return debug$1.warn('rendering');
-        if (this.times > 3)
-            return debug$1.warn('render max times');
+        if (this.rendering) return debug$1.warn("rendering");
+        if (this.times > 3) return debug$1.warn("render max times");
         this.times++;
         this.totalTimes++;
         this.rendering = true;
         this.changed = false;
-        this.renderBounds = new core.Bounds();
+        this.renderBounds = new core.Bounds;
         this.renderOptions = {};
         if (callback) {
             this.emitRender(core.RenderEvent.BEFORE);
             callback();
-        }
-        else {
+        } else {
             this.requestLayout();
             if (this.ignore) {
                 this.ignore = this.rendering = false;
@@ -525,8 +533,7 @@ class Renderer {
             this.emitRender(core.RenderEvent.BEFORE);
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender();
-            }
-            else {
+            } else {
                 this.fullRender();
             }
         }
@@ -540,16 +547,16 @@ class Renderer {
         }
     }
     partRender() {
-        const { canvas, updateBlocks: list } = this;
-        if (!list)
-            return;
+        const {canvas: canvas, updateBlocks: list} = this;
+        if (!list) return;
         this.mergeBlocks();
-        list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
-            this.clipRender(block); });
+        list.forEach(block => {
+            if (canvas.bounds.hit(block) && !block.isEmpty()) this.clipRender(block);
+        });
     }
     clipRender(block) {
-        const t = core.Run.start('PartRender');
-        const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
+        const t = core.Run.start("PartRender");
+        const {canvas: canvas} = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
         canvas.save();
         bounds.spread(Renderer.clipSpread).ceil();
         canvas.clearWorld(bounds, true);
@@ -559,8 +566,8 @@ class Renderer {
         core.Run.end(t);
     }
     fullRender() {
-        const t = core.Run.start('FullRender');
-        const { canvas } = this;
+        const t = core.Run.start("FullRender");
+        const {canvas: canvas} = this;
         canvas.save();
         canvas.clear();
         this.__render(canvas.bounds);
@@ -568,11 +575,14 @@ class Renderer {
         core.Run.end(t);
     }
     __render(bounds, realBounds) {
-        const { canvas } = this, includes = bounds.includes(this.target.__world), options = includes ? { includes } : { bounds, includes };
-        if (this.needFill)
-            canvas.fillWorld(bounds, this.config.fill);
-        if (core.Debug.showRepaint)
-            core.Debug.drawRepaint(canvas, bounds);
+        const {canvas: canvas} = this, includes = bounds.includes(this.target.__world), options = includes ? {
+            includes: includes
+        } : {
+            bounds: bounds,
+            includes: includes
+        };
+        if (this.needFill) canvas.fillWorld(bounds, this.config.fill);
+        if (core.Debug.showRepaint) core.Debug.drawRepaint(canvas, bounds);
         this.target.__render(canvas, options);
         this.renderBounds = realBounds = realBounds || bounds;
         this.renderOptions = options;
@@ -580,14 +590,13 @@ class Renderer {
         canvas.updateRender(realBounds);
     }
     addBlock(block) {
-        if (!this.updateBlocks)
-            this.updateBlocks = [];
+        if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
     mergeBlocks() {
-        const { updateBlocks: list } = this;
+        const {updateBlocks: list} = this;
         if (list) {
-            const bounds = new core.Bounds();
+            const bounds = new core.Bounds;
             bounds.setList(list);
             list.length = 0;
             list.push(bounds);
@@ -595,26 +604,23 @@ class Renderer {
     }
     __requestRender() {
         const target = this.target;
-        if (this.requestTime || !target)
-            return;
-        if (target.parentApp)
-            return target.parentApp.requestRender(false);
+        if (this.requestTime || !target) return;
+        if (target.parentApp) return target.parentApp.requestRender(false);
         const requestTime = this.requestTime = Date.now();
         core.Platform.requestRender(() => {
-            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
+            this.FPS = Math.min(60, Math.ceil(1e3 / (Date.now() - requestTime)));
             this.requestTime = 0;
             this.checkRender();
         });
     }
     __onResize(e) {
-        if (this.canvas.unreal)
-            return;
+        if (this.canvas.unreal) return;
         if (e.bigger || !e.samePixelRatio) {
-            const { width, height } = e.old;
+            const {width: width, height: height} = e.old;
             const bounds = new core.Bounds(0, 0, width, height);
             if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
                 this.addBlock(this.canvas.bounds);
-                this.target.forceUpdate('surface');
+                this.target.forceUpdate("surface");
                 return;
             }
         }
@@ -622,34 +628,24 @@ class Renderer {
         this.update();
     }
     __onLayoutEnd(event) {
-        if (event.data)
-            event.data.map(item => {
-                let empty;
-                if (item.updatedList)
-                    item.updatedList.list.some(leaf => {
-                        empty = (!leaf.__world.width || !leaf.__world.height);
-                        if (empty) {
-                            if (!leaf.isLeafer)
-                                debug$1.tip(leaf.innerName, ': empty');
-                            empty = (!leaf.isBranch || leaf.isBranchLeaf);
-                        }
-                        return empty;
-                    });
-                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+        if (event.data) event.data.map(item => {
+            let empty;
+            if (item.updatedList) item.updatedList.list.some(leaf => {
+                empty = !leaf.__world.width || !leaf.__world.height;
+                if (empty) {
+                    if (!leaf.isLeafer) debug$1.tip(leaf.innerName, ": empty");
+                    empty = !leaf.isBranch || leaf.isBranchLeaf;
+                }
+                return empty;
             });
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+        });
     }
     emitRender(type, bounds, options) {
         this.target.emitEvent(new core.RenderEvent(type, this.times, bounds, options));
     }
     __listenEvents() {
-        this.__eventIds = [
-            this.target.on_([
-                [core.RenderEvent.REQUEST, this.update, this],
-                [core.LayoutEvent.END, this.__onLayoutEnd, this],
-                [core.RenderEvent.AGAIN, this.renderAgain, this],
-                [core.ResizeEvent.RESIZE, this.__onResize, this]
-            ])
-        ];
+        this.__eventIds = [ this.target.on_([ [ core.RenderEvent.REQUEST, this.update, this ], [ core.LayoutEvent.END, this.__onLayoutEnd, this ], [ core.RenderEvent.AGAIN, this.renderAgain, this ], [ core.ResizeEvent.RESIZE, this.__onResize, this ] ]) ];
     }
     __removeListenEvents() {
         this.target.off_(this.__eventIds);
@@ -662,82 +658,104 @@ class Renderer {
         }
     }
 }
+
 Renderer.clipSpread = 10;
 
-const { hitRadiusPoint } = core.BoundsHelper;
+const {hitRadiusPoint: hitRadiusPoint} = core.BoundsHelper;
+
 class Picker {
     constructor(target, selector) {
         this.target = target;
         this.selector = selector;
     }
     getByPoint(hitPoint, hitRadius, options) {
-        if (!hitRadius)
-            hitRadius = 0;
-        if (!options)
-            options = {};
+        if (!hitRadius) hitRadius = 0;
+        if (!options) options = {};
         const through = options.through || false;
         const ignoreHittable = options.ignoreHittable || false;
         const target = options.target || this.target;
         this.exclude = options.exclude || null;
-        this.point = { x: hitPoint.x, y: hitPoint.y, radiusX: hitRadius, radiusY: hitRadius };
+        this.point = {
+            x: hitPoint.x,
+            y: hitPoint.y,
+            radiusX: hitRadius,
+            radiusY: hitRadius
+        };
         this.findList = new core.LeafList(options.findList);
-        if (!options.findList)
-            this.hitBranch(target);
-        const { list } = this.findList;
+        if (!options.findList) this.hitBranch(target.isBranchLeaf ? {
+            children: [ target ]
+        } : target);
+        const {list: list} = this.findList;
         const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable);
         const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
         this.clear();
-        return through ? { path, target: leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, target: leaf };
+        return through ? {
+            path: path,
+            target: leaf,
+            throughPath: list.length ? this.getThroughPath(list) : path
+        } : {
+            path: path,
+            target: leaf
+        };
+    }
+    hitPoint(hitPoint, hitRadius, options) {
+        return !!this.getByPoint(hitPoint, hitRadius, options).target;
     }
     getBestMatchLeaf(list, bottomList, ignoreHittable) {
+        const findList = this.findList = new core.LeafList;
         if (list.length) {
             let find;
-            this.findList = new core.LeafList();
-            const { x, y } = this.point;
-            const point = { x, y, radiusX: 0, radiusY: 0 };
+            const {x: x, y: y} = this.point;
+            const point = {
+                x: x,
+                y: y,
+                radiusX: 0,
+                radiusY: 0
+            };
             for (let i = 0, len = list.length; i < len; i++) {
                 find = list[i];
                 if (ignoreHittable || core.LeafHelper.worldHittable(find)) {
                     this.hitChild(find, point);
-                    if (this.findList.length)
-                        return this.findList.list[0];
+                    if (findList.length) {
+                        if (find.isBranchLeaf && list.some(item => item !== find && core.LeafHelper.hasParent(item, find))) {
+                            findList.reset();
+                            break;
+                        }
+                        return findList.list[0];
+                    }
                 }
             }
         }
         if (bottomList) {
             for (let i = 0, len = bottomList.length; i < len; i++) {
                 this.hitChild(bottomList[i].target, this.point, bottomList[i].proxy);
-                if (this.findList.length)
-                    return this.findList.list[0];
+                if (findList.length) return findList.list[0];
             }
         }
-        return list[0];
+        return ignoreHittable ? list[0] : list.find(item => core.LeafHelper.worldHittable(item));
     }
     getPath(leaf) {
-        const path = new core.LeafList();
+        const path = new core.LeafList;
         while (leaf) {
             path.add(leaf);
             leaf = leaf.parent;
         }
-        if (this.target)
-            path.add(this.target);
+        if (this.target) path.add(this.target);
         return path;
     }
     getHitablePath(leaf) {
         const path = this.getPath(leaf && leaf.hittable ? leaf : null);
-        let item, hittablePath = new core.LeafList();
+        let item, hittablePath = new core.LeafList;
         for (let i = path.list.length - 1; i > -1; i--) {
             item = path.list[i];
-            if (!item.__.hittable)
-                break;
+            if (!item.__.hittable) break;
             hittablePath.addAt(item, 0);
-            if (!item.__.hitChildren)
-                break;
+            if (!item.__.hitChildren) break;
         }
         return hittablePath;
     }
     getThroughPath(list) {
-        const throughPath = new core.LeafList();
+        const throughPath = new core.LeafList;
         const pathList = [];
         for (let i = list.length - 1; i > -1; i--) {
             pathList.push(this.getPath(list[i]));
@@ -747,8 +765,7 @@ class Picker {
             path = pathList[i], nextPath = pathList[i + 1];
             for (let j = 0, jLen = path.length; j < jLen; j++) {
                 leaf = path.list[j];
-                if (nextPath && nextPath.has(leaf))
-                    break;
+                if (nextPath && nextPath.has(leaf)) break;
                 throughPath.add(leaf);
             }
         }
@@ -759,32 +776,37 @@ class Picker {
     }
     eachFind(children, hitMask) {
         let child, hit;
-        const { point } = this, len = children.length;
+        const {point: point} = this, len = children.length;
         for (let i = len - 1; i > -1; i--) {
             child = children[i];
-            if (!child.__.visible || (hitMask && !child.__.mask))
-                continue;
+            if (!child.__.visible || hitMask && !child.__.mask) continue;
             hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point);
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
                     this.eachFind(child.children, child.__onlyHitMask);
-                    if (child.isBranchLeaf)
-                        this.hitChild(child, point);
+                    if (child.isBranchLeaf) this.hitChild(child, point);
                 }
-            }
-            else {
-                if (hit)
-                    this.hitChild(child, point);
+            } else {
+                if (hit) this.hitChild(child, point);
             }
         }
     }
     hitChild(child, point, proxy) {
-        if (this.exclude && this.exclude.has(child))
-            return;
+        if (this.exclude && this.exclude.has(child)) return;
         if (child.__hitWorld(point)) {
-            const { parent } = child;
-            if (parent && parent.__hasMask && !child.__.mask && !parent.children.some(item => item.__.mask && item.__hitWorld(point)))
-                return;
+            const {parent: parent} = child;
+            if (parent && parent.__hasMask && !child.__.mask) {
+                let findMasks = [], item;
+                const {children: children} = parent;
+                for (let i = 0, len = children.length; i < len; i++) {
+                    item = children[i];
+                    if (item.__.mask) findMasks.push(item);
+                    if (item === child) {
+                        if (findMasks && !findMasks.every(value => value.__hitWorld(point))) return;
+                        break;
+                    }
+                }
+            }
             this.findList.add(proxy || child);
         }
     }
@@ -801,24 +823,24 @@ class Picker {
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
-        if (userConfig)
-            this.config = core.DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
         this.picker = new Picker(this.target = target, this);
         this.finder = core.Creator.finder && core.Creator.finder();
     }
     getByPoint(hitPoint, hitRadius, options) {
-        const { target, picker } = this;
-        if (core.Platform.backgrounder)
-            target && target.updateLayout();
+        const {target: target, picker: picker} = this;
+        if (core.Platform.backgrounder) target && target.updateLayout();
         return picker.getByPoint(hitPoint, hitRadius, options);
     }
+    hitPoint(hitPoint, hitRadius, options) {
+        return this.picker.hitPoint(hitPoint, hitRadius, options);
+    }
     getBy(condition, branch, one, options) {
-        return this.finder ? this.finder.getBy(condition, branch, one, options) : core.Plugin.need('find');
+        return this.finder ? this.finder.getBy(condition, branch, one, options) : core.Plugin.need("find");
     }
     destroy() {
         this.picker.destroy();
-        if (this.finder)
-            this.finder.destroy();
+        if (this.finder) this.finder.destroy();
     }
 }
 
@@ -828,24 +850,22 @@ Object.assign(core.Creator, {
     renderer: (target, canvas, options) => new Renderer(target, canvas, options),
     selector: (target, options) => new Selector(target, options)
 });
+
 core.Platform.layout = Layouter.fullLayout;
 
 function fillText(ui, canvas) {
-    const data = ui.__, { rows, decorationY } = data.__textDrawData;
-    if (data.__isPlacehold && data.placeholderColor)
-        canvas.fillStyle = data.placeholderColor;
+    const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
+    if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
     let row;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text)
-            canvas.fillText(row.text, row.x, row.y);
-        else if (row.data)
-            row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
+        if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
+            canvas.fillText(charData.char, charData.x, row.y);
+        });
     }
     if (decorationY) {
-        const { decorationColor, decorationHeight } = data.__textDrawData;
-        if (decorationColor)
-            canvas.fillStyle = decorationColor;
+        const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
+        if (decorationColor) canvas.fillStyle = decorationColor;
         rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
     }
 }
@@ -854,117 +874,112 @@ function fill(fill, ui, canvas) {
     canvas.fillStyle = fill;
     fillPathOrText(ui, canvas);
 }
+
 function fills(fills, ui, canvas) {
     let item;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
         if (item.image) {
-            if (draw.PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
-                continue;
+            if (draw.PaintImage.checkImage(ui, canvas, item, !ui.__.__font)) continue;
             if (!item.style) {
-                if (!i && item.image.isPlacehold)
-                    ui.drawImagePlaceholder(canvas, item.image);
+                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas, item.image);
                 continue;
             }
         }
         canvas.fillStyle = item.style;
         if (item.transform || item.scaleFixed) {
             canvas.save();
-            if (item.transform)
-                canvas.transform(item.transform);
+            if (item.transform) canvas.transform(item.transform);
             if (item.scaleFixed) {
-                const { scaleX, scaleY } = ui.getRenderScaleData(true);
-                canvas.scale(1 / scaleX, 1 / scaleY);
+                const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
+                if (item.scaleFixed === true || item.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
             }
-            if (item.blendMode)
-                canvas.blendMode = item.blendMode;
+            if (item.blendMode) canvas.blendMode = item.blendMode;
             fillPathOrText(ui, canvas);
             canvas.restore();
-        }
-        else {
+        } else {
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
                 fillPathOrText(ui, canvas);
                 canvas.restoreBlendMode();
-            }
-            else
-                fillPathOrText(ui, canvas);
+            } else fillPathOrText(ui, canvas);
         }
     }
 }
+
 function fillPathOrText(ui, canvas) {
-    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    ui.__.__font ? fillText(ui, canvas) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
 }
 
 function strokeText(stroke, ui, canvas) {
     switch (ui.__.strokeAlign) {
-        case 'center':
-            drawCenter$1(stroke, 1, ui, canvas);
-            break;
-        case 'inside':
-            drawAlign(stroke, 'inside', ui, canvas);
-            break;
-        case 'outside':
-            ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas);
-            break;
+      case "center":
+        drawCenter$1(stroke, 1, ui, canvas);
+        break;
+
+      case "inside":
+        drawAlign(stroke, "inside", ui, canvas);
+        break;
+
+      case "outside":
+        ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, "outside", ui, canvas);
+        break;
     }
 }
+
 function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
     const data = ui.__;
-    if (typeof stroke === 'object') {
+    if (core.isObject(stroke)) {
         drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
-    }
-    else {
+    } else {
         canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
         drawTextStroke(ui, canvas);
     }
 }
+
 function drawAlign(stroke, align, ui, canvas) {
     const out = canvas.getSameCanvas(true, true);
     out.font = ui.__.__font;
     drawCenter$1(stroke, 2, ui, out);
-    out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
+    out.blendMode = align === "outside" ? "destination-out" : "destination-in";
     fillText(ui, out);
-    out.blendMode = 'normal';
+    out.blendMode = "normal";
     core.LeafHelper.copyCanvasByWorld(ui, canvas, out);
     out.recycle(ui.__nowWorld);
 }
+
 function drawTextStroke(ui, canvas) {
     let row, data = ui.__.__textDrawData;
-    const { rows, decorationY } = data;
+    const {rows: rows, decorationY: decorationY} = data;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text)
-            canvas.strokeText(row.text, row.x, row.y);
-        else if (row.data)
-            row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
+        if (row.text) canvas.strokeText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
+            canvas.strokeText(charData.char, charData.x, row.y);
+        });
     }
     if (decorationY) {
-        const { decorationHeight } = data;
+        const {decorationHeight: decorationHeight} = data;
         rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
     }
 }
+
 function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
     let item;
-    const data = ui.__, { __hasMultiStrokeStyle } = data;
+    const data = ui.__, {__hasMultiStrokeStyle: __hasMultiStrokeStyle} = data;
     __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i];
-        if (item.image && draw.PaintImage.checkImage(ui, canvas, item, false))
-            continue;
+        if (item.image && draw.PaintImage.checkImage(ui, canvas, item, false)) continue;
         if (item.style) {
             if (__hasMultiStrokeStyle) {
-                const { strokeStyle } = item;
+                const {strokeStyle: strokeStyle} = item;
                 strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
-            }
-            else
-                canvas.strokeStyle = item.style;
+            } else canvas.strokeStyle = item.style;
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
                 isText ? drawTextStroke(ui, canvas) : canvas.stroke();
                 canvas.restoreBlendMode();
-            }
-            else {
+            } else {
                 isText ? drawTextStroke(ui, canvas) : canvas.stroke();
             }
         }
@@ -973,53 +988,54 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
 
 function stroke(stroke, ui, canvas) {
     const data = ui.__;
-    if (!data.__strokeWidth)
-        return;
+    if (!data.__strokeWidth) return;
     if (data.__font) {
         strokeText(stroke, ui, canvas);
-    }
-    else {
+    } else {
         switch (data.strokeAlign) {
-            case 'center':
-                drawCenter(stroke, 1, ui, canvas);
-                break;
-            case 'inside':
-                drawInside(stroke, ui, canvas);
-                break;
-            case 'outside':
-                drawOutside(stroke, ui, canvas);
-                break;
+          case "center":
+            drawCenter(stroke, 1, ui, canvas);
+            break;
+
+          case "inside":
+            drawInside(stroke, ui, canvas);
+            break;
+
+          case "outside":
+            drawOutside(stroke, ui, canvas);
+            break;
         }
     }
 }
+
 function strokes(strokes, ui, canvas) {
     stroke(strokes, ui, canvas);
 }
+
 function drawCenter(stroke, strokeWidthScale, ui, canvas) {
     const data = ui.__;
-    if (typeof stroke === 'object') {
+    if (core.isObject(stroke)) {
         drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
-    }
-    else {
+    } else {
         canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
         canvas.stroke();
     }
-    if (data.__useArrow)
-        draw.Paint.strokeArrow(stroke, ui, canvas);
+    if (data.__useArrow) draw.Paint.strokeArrow(stroke, ui, canvas);
 }
+
 function drawInside(stroke, ui, canvas) {
     canvas.save();
     canvas.clipUI(ui);
     drawCenter(stroke, 2, ui, canvas);
     canvas.restore();
 }
+
 function drawOutside(stroke, ui, canvas) {
     const data = ui.__;
     if (data.__fillAfterStroke) {
         drawCenter(stroke, 2, ui, canvas);
-    }
-    else {
-        const { renderBounds } = ui.__layout;
+    } else {
+        const {renderBounds: renderBounds} = ui.__layout;
         const out = canvas.getSameCanvas(true, true);
         ui.__drawRenderPath(out);
         drawCenter(stroke, 2, ui, out);
@@ -1030,25 +1046,23 @@ function drawOutside(stroke, ui, canvas) {
     }
 }
 
-const { getSpread, getOuterOf, getByMove, getIntersectData } = core.BoundsHelper;
+const {getSpread: getSpread, getOuterOf: getOuterOf, getByMove: getByMove, getIntersectData: getIntersectData} = core.BoundsHelper;
+
 function shape(ui, current, options) {
     const canvas = current.getSameCanvas();
     const nowWorld = ui.__nowWorld;
-    let bounds, fitMatrix, shapeBounds, worldCanvas;
-    let { scaleX, scaleY } = nowWorld;
-    if (scaleX < 0)
-        scaleX = -scaleX;
-    if (scaleY < 0)
-        scaleY = -scaleY;
+    let bounds, matrix, fitMatrix, shapeBounds, worldCanvas;
+    let {scaleX: scaleX, scaleY: scaleY} = nowWorld;
+    if (scaleX < 0) scaleX = -scaleX;
+    if (scaleY < 0) scaleY = -scaleY;
     if (current.bounds.includes(nowWorld)) {
         worldCanvas = canvas;
         bounds = shapeBounds = nowWorld;
-    }
-    else {
-        const { renderShapeSpread: spread } = ui.__layout;
-        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [spread * scaleY, spread * scaleX]) : current.bounds, nowWorld);
+    } else {
+        const {renderShapeSpread: spread} = ui.__layout;
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [ spread * scaleY, spread * scaleX ]) : current.bounds, nowWorld);
         fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
-        let { a: fitScaleX, d: fitScaleY } = fitMatrix;
+        let {a: fitScaleX, d: fitScaleY} = fitMatrix;
         if (fitMatrix.a < 1) {
             worldCanvas = current.getSameCanvas();
             ui.__renderShape(worldCanvas, options);
@@ -1057,28 +1071,39 @@ function shape(ui, current, options) {
         }
         shapeBounds = getOuterOf(nowWorld, fitMatrix);
         bounds = getByMove(shapeBounds, -fitMatrix.e, -fitMatrix.f);
-        if (options.matrix) {
-            const { matrix } = options;
-            fitMatrix.multiply(matrix);
-            fitScaleX *= matrix.scaleX;
-            fitScaleY *= matrix.scaleY;
-        }
-        options = Object.assign(Object.assign({}, options), { matrix: fitMatrix.withScale(fitScaleX, fitScaleY) });
+        const userMatrix = options.matrix;
+        if (userMatrix) {
+            matrix = new core.Matrix(fitMatrix);
+            matrix.multiply(userMatrix);
+            fitScaleX *= userMatrix.scaleX;
+            fitScaleY *= userMatrix.scaleY;
+        } else matrix = fitMatrix;
+        matrix.withScale(fitScaleX, fitScaleY);
+        options = Object.assign(Object.assign({}, options), {
+            matrix: matrix
+        });
     }
     ui.__renderShape(canvas, options);
     return {
-        canvas, matrix: fitMatrix, bounds,
-        worldCanvas, shapeBounds, scaleX, scaleY
+        canvas: canvas,
+        matrix: matrix,
+        fitMatrix: fitMatrix,
+        bounds: bounds,
+        worldCanvas: worldCanvas,
+        shapeBounds: shapeBounds,
+        scaleX: scaleX,
+        scaleY: scaleY
     };
 }
 
 let recycleMap;
-const { stintSet } = core.DataHelper, { hasTransparent: hasTransparent$1 } = draw.ColorConvert;
+
+const {stintSet: stintSet} = core.DataHelper, {hasTransparent: hasTransparent$1} = draw.ColorConvert;
+
 function compute(attrName, ui) {
     const data = ui.__, leafPaints = [];
     let paints = data.__input[attrName], isAlphaPixel, isTransparent;
-    if (!(paints instanceof Array))
-        paints = [paints];
+    if (!core.isArray(paints)) paints = [ paints ];
     recycleMap = draw.PaintImage.recycleImage(attrName, data);
     let maxChildStrokeWidth;
     for (let i = 0, len = paints.length, item; i < len; i++) {
@@ -1086,206 +1111,222 @@ function compute(attrName, ui) {
             leafPaints.push(item);
             if (item.strokeStyle) {
                 maxChildStrokeWidth || (maxChildStrokeWidth = 1);
-                if (item.strokeStyle.strokeWidth)
-                    maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
+                if (item.strokeStyle.strokeWidth) maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
             }
         }
     }
-    data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
+    data["_" + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length) {
         if (leafPaints.every(item => item.isTransparent)) {
-            if (leafPaints.some(item => item.image))
-                isAlphaPixel = true;
+            if (leafPaints.some(item => item.image)) isAlphaPixel = true;
             isTransparent = true;
         }
     }
-    if (attrName === 'fill') {
-        stintSet(data, '__isAlphaPixelFill', isAlphaPixel);
-        stintSet(data, '__isTransparentFill', isTransparent);
-    }
-    else {
-        stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
-        stintSet(data, '__isTransparentStroke', isTransparent);
-        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
+    if (attrName === "fill") {
+        stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
+        stintSet(data, "__isTransparentFill", isTransparent);
+    } else {
+        stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
+        stintSet(data, "__isTransparentStroke", isTransparent);
+        stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
     }
 }
+
 function getLeafPaint(attrName, paint, ui) {
-    if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
-        return undefined;
+    if (!core.isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
     let data;
-    const { boxBounds } = ui.__layout;
+    const {boxBounds: boxBounds} = ui.__layout;
     switch (paint.type) {
-        case 'image':
-            data = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
-            break;
-        case 'linear':
-            data = draw.PaintGradient.linearGradient(paint, boxBounds);
-            break;
-        case 'radial':
-            data = draw.PaintGradient.radialGradient(paint, boxBounds);
-            break;
-        case 'angular':
-            data = draw.PaintGradient.conicGradient(paint, boxBounds);
-            break;
-        case 'solid':
-            const { type, color, opacity } = paint;
-            data = { type, style: draw.ColorConvert.string(color, opacity) };
-            break;
-        default:
-            if (paint.r !== undefined)
-                data = { type: 'solid', style: draw.ColorConvert.string(paint) };
+      case "image":
+        data = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        break;
+
+      case "linear":
+        data = draw.PaintGradient.linearGradient(paint, boxBounds);
+        break;
+
+      case "radial":
+        data = draw.PaintGradient.radialGradient(paint, boxBounds);
+        break;
+
+      case "angular":
+        data = draw.PaintGradient.conicGradient(paint, boxBounds);
+        break;
+
+      case "solid":
+        const {type: type, color: color, opacity: opacity} = paint;
+        data = {
+            type: type,
+            style: draw.ColorConvert.string(color, opacity)
+        };
+        break;
+
+      default:
+        if (!core.isUndefined(paint.r)) data = {
+            type: "solid",
+            style: draw.ColorConvert.string(paint)
+        };
     }
     if (data) {
-        if (typeof data.style === 'string' && hasTransparent$1(data.style))
-            data.isTransparent = true;
+        if (core.isString(data.style) && hasTransparent$1(data.style)) data.isTransparent = true;
         if (paint.style) {
-            if (paint.style.strokeWidth === 0)
-                return undefined;
+            if (paint.style.strokeWidth === 0) return undefined;
             data.strokeStyle = paint.style;
         }
-        if (paint.blendMode)
-            data.blendMode = paint.blendMode;
+        if (paint.editing) data.editing = paint.editing;
+        if (paint.blendMode) data.blendMode = paint.blendMode;
     }
     return data;
 }
 
 const PaintModule = {
-    compute,
-    fill,
-    fills,
-    fillPathOrText,
-    fillText,
-    stroke,
-    strokes,
-    strokeText,
-    drawTextStroke,
-    shape
+    compute: compute,
+    fill: fill,
+    fills: fills,
+    fillPathOrText: fillPathOrText,
+    fillText: fillText,
+    stroke: stroke,
+    strokes: strokes,
+    strokeText: strokeText,
+    drawTextStroke: drawTextStroke,
+    shape: shape
 };
 
 let origin = {}, tempMatrix = core.getMatrixData();
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = core.MatrixHelper;
+
+const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = core.MatrixHelper;
+
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
     translate$1(transform, box.x + x, box.y + y);
     scaleHelper(transform, scaleX, scaleY);
-    if (rotation)
-        rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
+    if (rotation) rotateOfOuter$1(transform, {
+        x: box.x + box.width / 2,
+        y: box.y + box.height / 2
+    }, rotation);
     data.transform = transform;
 }
+
 function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
     const transform = get$3();
-    if (rotation)
-        rotate(transform, rotation);
-    if (skew)
-        skewHelper(transform, skew.x, skew.y);
-    if (scaleX)
-        scaleHelper(transform, scaleX, scaleY);
-    translate$1(transform, box.x + x, box.y + y);
+    layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
     if (clipSize) {
         tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
         multiplyParent(transform, tempMatrix);
     }
     data.transform = transform;
 }
-function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
+
+function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, skew, align, freeTransform) {
     const transform = get$3();
-    if (rotation) {
-        if (align === 'center') {
-            rotateOfOuter$1(transform, { x: width / 2, y: height / 2 }, rotation);
-        }
-        else {
-            rotate(transform, rotation);
-            switch (rotation) {
-                case 90:
+    if (freeTransform) {
+        layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
+    } else {
+        if (rotation) {
+            if (align === "center") {
+                rotateOfOuter$1(transform, {
+                    x: width / 2,
+                    y: height / 2
+                }, rotation);
+            } else {
+                rotate(transform, rotation);
+                switch (rotation) {
+                  case 90:
                     translate$1(transform, height, 0);
                     break;
-                case 180:
+
+                  case 180:
                     translate$1(transform, width, height);
                     break;
-                case 270:
+
+                  case 270:
                     translate$1(transform, 0, width);
                     break;
+                }
             }
         }
+        origin.x = box.x + x;
+        origin.y = box.y + y;
+        translate$1(transform, origin.x, origin.y);
+        if (scaleX) scaleOfOuter$1(transform, origin, scaleX, scaleY);
     }
-    origin.x = box.x + x;
-    origin.y = box.y + y;
-    translate$1(transform, origin.x, origin.y);
-    if (scaleX)
-        scaleOfOuter$1(transform, origin, scaleX, scaleY);
     data.transform = transform;
 }
 
-const { get: get$2, translate } = core.MatrixHelper;
-const tempBox = new core.Bounds();
+function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
+    if (rotation) rotate(transform, rotation);
+    if (skew) skewHelper(transform, skew.x, skew.y);
+    if (scaleX) scaleHelper(transform, scaleX, scaleY);
+    translate$1(transform, box.x + x, box.y + y);
+}
+
+const {get: get$2, translate: translate} = core.MatrixHelper;
+
+const tempBox = new core.Bounds;
+
 const tempScaleData = {};
+
 const tempImage = {};
+
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync, editing, scaleFixed } = paint;
-    if (changeful)
-        leafPaint.changeful = changeful;
-    if (sync)
-        leafPaint.sync = sync;
-    if (editing)
-        leafPaint.editing = editing;
-    if (scaleFixed)
-        leafPaint.scaleFixed = scaleFixed;
+    const {changeful: changeful, sync: sync, scaleFixed: scaleFixed} = paint;
+    if (changeful) leafPaint.changeful = changeful;
+    if (sync) leafPaint.sync = sync;
+    if (scaleFixed) leafPaint.scaleFixed = scaleFixed;
     leafPaint.data = getPatternData(paint, box, image);
 }
+
 function getPatternData(paint, box, image) {
-    if (paint.padding)
-        box = tempBox.set(box).shrink(paint.padding);
-    if (paint.mode === 'strench')
-        paint.mode = 'stretch';
-    let { width, height } = image;
-    const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
+    if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
+    if (paint.mode === "strench") paint.mode = "stretch";
+    let {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} = paint;
     const sameBox = box.width === width && box.height === height;
-    const data = { mode };
-    const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
+    const data = {
+        mode: mode
+    };
+    const swapSize = align !== "center" && (rotation || 0) % 180 === 90;
     core.BoundsHelper.set(tempImage, 0, 0, swapSize ? height : width, swapSize ? width : height);
     let scaleX, scaleY;
-    if (!mode || mode === 'cover' || mode === 'fit') {
+    if (!mode || mode === "cover" || mode === "fit") {
         if (!sameBox || rotation) {
-            scaleX = scaleY = core.BoundsHelper.getFitScale(box, tempImage, mode !== 'fit');
+            scaleX = scaleY = core.BoundsHelper.getFitScale(box, tempImage, mode !== "fit");
             core.BoundsHelper.put(box, image, align, scaleX, false, tempImage);
             core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
         }
-    }
-    else {
+    } else {
         if (scale || size) {
             core.MathHelper.getScaleData(scale, size, image, tempScaleData);
             scaleX = tempScaleData.scaleX;
             scaleY = tempScaleData.scaleY;
         }
-        if (align) {
-            if (scaleX)
-                core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
-            core.AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
+        if (align || gap || repeat) {
+            if (scaleX) core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
+            if (align) core.AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
         }
     }
-    if (offset)
-        core.PointHelper.move(tempImage, offset);
+    if (offset) core.PointHelper.move(tempImage, offset);
     switch (mode) {
-        case 'stretch':
-            if (!sameBox)
-                width = box.width, height = box.height;
-            break;
-        case 'normal':
-        case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
-            break;
-        case 'repeat':
-            if (!sameBox || scaleX || rotation)
-                repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, align);
-            if (!repeat)
-                data.repeat = 'repeat';
-            break;
-        case 'fit':
-        case 'cover':
-        default:
-            if (scaleX)
-                fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+      case "stretch":
+        if (!sameBox) width = box.width, height = box.height;
+        break;
+
+      case "normal":
+      case "clip":
+        if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
+        break;
+
+      case "repeat":
+        if (!sameBox || scaleX || rotation || skew) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
+        if (!repeat) data.repeat = "repeat";
+        const count = core.isObject(repeat);
+        if (gap || count) data.gap = getGapData(gap, count && repeat, tempImage.width, tempImage.height, box);
+        break;
+
+      case "fit":
+      case "cover":
+      default:
+        if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
     }
     if (!data.transform) {
         if (box.x || box.y) {
@@ -1293,49 +1334,69 @@ function getPatternData(paint, box, image) {
             translate(data.transform, box.x, box.y);
         }
     }
-    if (scaleX && mode !== 'stretch') {
+    if (scaleX && mode !== "stretch") {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
     data.width = width;
     data.height = height;
-    if (opacity)
-        data.opacity = opacity;
-    if (filters)
-        data.filters = filters;
-    if (repeat)
-        data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
+    if (opacity) data.opacity = opacity;
+    if (filters) data.filters = filters;
+    if (repeat) data.repeat = core.isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     return data;
 }
 
-let cache, box = new core.Bounds();
-const { isSame } = core.BoundsHelper;
+function getGapData(gap, repeat, width, height, box) {
+    let xGap, yGap;
+    if (core.isObject(gap)) xGap = gap.x, yGap = gap.y; else xGap = yGap = gap;
+    return {
+        x: getGapValue(xGap, width, box.width, repeat && repeat.x),
+        y: getGapValue(yGap, height, box.height, repeat && repeat.y)
+    };
+}
+
+function getGapValue(gap, size, totalSize, rows) {
+    const auto = core.isString(gap) || rows;
+    const remain = rows ? totalSize - rows * size : totalSize % size;
+    const value = auto ? remain / ((rows || Math.floor(totalSize / size)) - 1) : gap;
+    return gap === "auto" ? value < 0 ? 0 : value : value;
+}
+
+let cache, box = new core.Bounds;
+
+const {isSame: isSame} = core.BoundsHelper;
+
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
     const image = core.ImageManager.get(paint);
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint;
-    }
-    else {
-        leafPaint = { type: paint.type, image };
-        if (image.hasAlphaPixel)
-            leafPaint.isTransparent = true;
-        cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
-    }
-    if (firstUse || image.loading)
-        event = { image, attrName, attrValue: paint };
+    } else {
+        leafPaint = {
+            type: paint.type,
+            image: image
+        };
+        if (image.hasAlphaPixel) leafPaint.isTransparent = true;
+        cache = image.use > 1 ? {
+            leafPaint: leafPaint,
+            paint: paint,
+            boxBounds: box.set(boxBounds)
+        } : null;
+    }
+    if (firstUse || image.loading) event = {
+        image: image,
+        attrName: attrName,
+        attrValue: paint
+    };
     if (image.ready) {
         checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
         if (firstUse) {
             onLoad(ui, event);
             onLoadSuccess(ui, event);
         }
-    }
-    else if (image.error) {
-        if (firstUse)
-            onLoadError(ui, event, image.error);
-    }
-    else {
+    } else if (image.error) {
+        if (firstUse) onLoadError(ui, event, image.error);
+    } else {
         if (firstUse) {
             ignoreRender(ui, true);
             onLoad(ui, event);
@@ -1344,79 +1405,84 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             ignoreRender(ui, false);
             if (!ui.destroyed) {
                 if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
-                    if (image.hasAlphaPixel)
-                        ui.__layout.hitCanvasChanged = true;
-                    ui.forceUpdate('surface');
+                    if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true;
+                    ui.forceUpdate("surface");
                 }
                 onLoadSuccess(ui, event);
             }
             leafPaint.loadId = undefined;
-        }, (error) => {
+        }, error => {
             ignoreRender(ui, false);
             onLoadError(ui, event, error);
             leafPaint.loadId = undefined;
         });
         if (ui.placeholderColor) {
-            if (!ui.placeholderDelay)
-                image.isPlacehold = true;
-            else
-                setTimeout(() => {
-                    if (!image.ready) {
-                        image.isPlacehold = true;
-                        ui.forceUpdate('surface');
-                    }
-                }, ui.placeholderDelay);
+            if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
+                if (!image.ready) {
+                    image.isPlacehold = true;
+                    ui.forceUpdate("surface");
+                }
+            }, ui.placeholderDelay);
         }
     }
     return leafPaint;
 }
+
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === 'fill' && !ui.__.__naturalWidth) {
+    if (attrName === "fill" && !ui.__.__naturalWidth) {
         const data = ui.__;
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
-            ui.forceUpdate('width');
+            ui.forceUpdate("width");
             if (ui.__proxyData) {
-                ui.setProxyAttr('width', data.width);
-                ui.setProxyAttr('height', data.height);
+                ui.setProxyAttr("width", data.width);
+                ui.setProxyAttr("height", data.height);
             }
             return false;
         }
     }
-    if (!leafPaint.data)
-        createData(leafPaint, image, paint, boxBounds);
+    if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds);
     return true;
 }
+
 function onLoad(ui, event) {
     emit(ui, core.ImageEvent.LOAD, event);
 }
+
 function onLoadSuccess(ui, event) {
     emit(ui, core.ImageEvent.LOADED, event);
 }
+
 function onLoadError(ui, event, error) {
     event.error = error;
-    ui.forceUpdate('surface');
+    ui.forceUpdate("surface");
     emit(ui, core.ImageEvent.ERROR, event);
 }
+
 function emit(ui, type, data) {
-    if (ui.hasEvent(type))
-        ui.emitEvent(new core.ImageEvent(type, data));
+    if (ui.hasEvent(type)) ui.emitEvent(new core.ImageEvent(type, data));
 }
+
 function ignoreRender(ui, value) {
-    const { leafer } = ui;
-    if (leafer && leafer.viewReady)
-        leafer.renderer.ignore = value;
+    const {leafer: leafer} = ui;
+    if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
 }
 
-const { get: get$1, scale, copy: copy$1 } = core.MatrixHelper;
-const { ceil, abs } = Math;
+const {get: get$1, scale: scale, copy: copy$1} = core.MatrixHelper;
+
+const {floor: floor, max: max, abs: abs} = Math;
+
 function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
-    const id = scaleX + '-' + scaleY + '-' + pixelRatio;
+    let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
+    const id = scaleX + "-" + scaleY + "-" + pixelRatio;
     if (paint.patternId !== id && !ui.destroyed) {
-        const { image, data } = paint;
-        let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
+        const {image: image, data: data} = paint;
+        let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
+        scaleX *= pixelRatio;
+        scaleY *= pixelRatio;
+        const xGap = gap && gap.x * scaleX;
+        const yGap = gap && gap.y * scaleY;
         if (sx) {
             sx = abs(sx);
             sy = abs(sy);
@@ -1426,23 +1492,18 @@ function createPattern(ui, paint, pixelRatio) {
             scaleX *= sx;
             scaleY *= sy;
         }
-        scaleX *= pixelRatio;
-        scaleY *= pixelRatio;
         width *= scaleX;
         height *= scaleY;
         const size = width * height;
         if (!repeat) {
-            if (size > core.Platform.image.maxCacheSize)
-                return false;
+            if (size > core.Platform.image.maxCacheSize) return false;
         }
         let maxSize = core.Platform.image.maxPatternSize;
         if (!image.isSVG) {
             const imageSize = image.width * image.height;
-            if (maxSize > imageSize)
-                maxSize = imageSize;
+            if (maxSize > imageSize) maxSize = imageSize;
         }
-        if (size > maxSize)
-            imageScale = Math.sqrt(size / maxSize);
+        if (size > maxSize) imageScale = Math.sqrt(size / maxSize);
         if (imageScale) {
             scaleX /= imageScale;
             scaleY /= imageScale;
@@ -1456,65 +1517,62 @@ function createPattern(ui, paint, pixelRatio) {
         if (transform || scaleX !== 1 || scaleY !== 1) {
             if (!imageMatrix) {
                 imageMatrix = get$1();
-                if (transform)
-                    copy$1(imageMatrix, transform);
+                if (transform) copy$1(imageMatrix, transform);
             }
             scale(imageMatrix, 1 / scaleX, 1 / scaleY);
         }
-        const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, data.opacity, data.filters);
-        const pattern = image.getPattern(canvas, repeat || (core.Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
+        if (imageMatrix) {
+            const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0);
+            scale(imageMatrix, canvasWidth / max(floor(canvasWidth), 1), canvasHeight / max(floor(canvasHeight), 1));
+        }
+        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap);
+        const pattern = image.getPattern(canvas, repeat || (core.Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
         paint.style = pattern;
         paint.patternId = id;
         return true;
-    }
-    else {
+    } else {
         return false;
     }
 }
 
 function checkImage(ui, canvas, paint, allowDraw) {
-    const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
-    const { pixelRatio } = canvas, { data } = paint;
-    if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
+    const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
+    const {pixelRatio: pixelRatio} = canvas, {data: data} = paint;
+    if (!data || paint.patternId === scaleX + "-" + scaleY + "-" + pixelRatio && !draw.Export.running) {
         return false;
-    }
-    else {
+    } else {
         if (allowDraw) {
             if (data.repeat) {
                 allowDraw = false;
-            }
-            else {
-                if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
-                    let { width, height } = data;
+            } else {
+                if (!(paint.changeful || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
+                    let {width: width, height: height} = data;
                     width *= scaleX * pixelRatio;
                     height *= scaleY * pixelRatio;
                     if (data.scaleX) {
                         width *= data.scaleX;
                         height *= data.scaleY;
                     }
-                    allowDraw = (width * height > core.Platform.image.maxCacheSize);
+                    allowDraw = width * height > core.Platform.image.maxCacheSize;
                 }
             }
         }
         if (allowDraw) {
             if (ui.__.__isFastShadow) {
-                canvas.fillStyle = paint.style || '#000';
+                canvas.fillStyle = paint.style || "#000";
                 canvas.fill();
             }
             drawImage(ui, canvas, paint, data);
             return true;
-        }
-        else {
+        } else {
             if (!paint.style || paint.sync || draw.Export.running) {
                 createPattern(ui, paint, pixelRatio);
-            }
-            else {
+            } else {
                 if (!paint.patternTask) {
-                    paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                    paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
                         paint.patternTask = null;
-                        if (canvas.bounds.hit(ui.__nowWorld))
-                            createPattern(ui, paint, pixelRatio);
-                        ui.forceUpdate('surface');
+                        if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, pixelRatio);
+                        ui.forceUpdate("surface");
                     }), 300);
                 }
             }
@@ -1522,39 +1580,35 @@ function checkImage(ui, canvas, paint, allowDraw) {
         }
     }
 }
+
 function drawImage(ui, canvas, paint, data) {
     canvas.save();
     canvas.clipUI(ui);
-    if (paint.blendMode)
-        canvas.blendMode = paint.blendMode;
-    if (data.opacity)
-        canvas.opacity *= data.opacity;
-    if (data.transform)
-        canvas.transform(data.transform);
+    if (paint.blendMode) canvas.blendMode = paint.blendMode;
+    if (data.opacity) canvas.opacity *= data.opacity;
+    if (data.transform) canvas.transform(data.transform);
     canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
     canvas.restore();
 }
 
 function recycleImage(attrName, data) {
-    const paints = data['_' + attrName];
-    if (paints instanceof Array) {
+    const paints = data["_" + attrName];
+    if (core.isArray(paints)) {
         let paint, image, recycleMap, input, url;
         for (let i = 0, len = paints.length; i < len; i++) {
             paint = paints[i];
             image = paint.image;
             url = image && image.url;
             if (url) {
-                if (!recycleMap)
-                    recycleMap = {};
+                if (!recycleMap) recycleMap = {};
                 recycleMap[url] = true;
                 core.ImageManager.recycle(image);
                 if (image.loading) {
                     if (!input) {
-                        input = (data.__input && data.__input[attrName]) || [];
-                        if (!(input instanceof Array))
-                            input = [input];
+                        input = data.__input && data.__input[attrName] || [];
+                        if (!core.isArray(input)) input = [ input ];
                     }
-                    image.unload(paints[i].loadId, !input.some((item) => item.url === url));
+                    image.unload(paints[i].loadId, !input.some(item => item.url === url));
                 }
             }
         }
@@ -1564,75 +1618,85 @@ function recycleImage(attrName, data) {
 }
 
 const PaintImageModule = {
-    image,
-    checkImage,
-    createPattern,
-    recycleImage,
-    createData,
-    getPatternData,
-    fillOrFitMode,
-    clipMode,
-    repeatMode
+    image: image,
+    checkImage: checkImage,
+    createPattern: createPattern,
+    recycleImage: recycleImage,
+    createData: createData,
+    getPatternData: getPatternData,
+    fillOrFitMode: fillOrFitMode,
+    clipMode: clipMode,
+    repeatMode: repeatMode
 };
 
-const { toPoint: toPoint$2 } = core.AroundHelper, { hasTransparent } = draw.ColorConvert;
+const {toPoint: toPoint$2} = core.AroundHelper, {hasTransparent: hasTransparent} = draw.ColorConvert;
+
 const realFrom$2 = {};
+
 const realTo$2 = {};
+
 function linearGradient(paint, box) {
-    let { from, to, type, opacity } = paint;
-    toPoint$2(from || 'top', box, realFrom$2);
-    toPoint$2(to || 'bottom', box, realTo$2);
+    let {from: from, to: to, type: type, opacity: opacity} = paint;
+    toPoint$2(from || "top", box, realFrom$2);
+    toPoint$2(to || "bottom", box, realTo$2);
     const style = core.Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
-    const data = { type, style };
+    const data = {
+        type: type,
+        style: style
+    };
     applyStops(data, style, paint.stops, opacity);
     return data;
 }
+
 function applyStops(data, gradient, stops, opacity) {
     if (stops) {
         let stop, color, offset, isTransparent;
         for (let i = 0, len = stops.length; i < len; i++) {
             stop = stops[i];
-            if (typeof stop === 'string')
-                offset = i / (len - 1), color = draw.ColorConvert.string(stop, opacity);
-            else
-                offset = stop.offset, color = draw.ColorConvert.string(stop.color, opacity);
+            if (core.isString(stop)) offset = i / (len - 1), color = draw.ColorConvert.string(stop, opacity); else offset = stop.offset, 
+            color = draw.ColorConvert.string(stop.color, opacity);
             gradient.addColorStop(offset, color);
-            if (!isTransparent && hasTransparent(color))
-                isTransparent = true;
+            if (!isTransparent && hasTransparent(color)) isTransparent = true;
         }
-        if (isTransparent)
-            data.isTransparent = true;
+        if (isTransparent) data.isTransparent = true;
     }
 }
 
-const { getAngle, getDistance: getDistance$1 } = core.PointHelper;
-const { get, rotateOfOuter, scaleOfOuter } = core.MatrixHelper;
-const { toPoint: toPoint$1 } = core.AroundHelper;
+const {getAngle: getAngle, getDistance: getDistance$1} = core.PointHelper;
+
+const {get: get, rotateOfOuter: rotateOfOuter, scaleOfOuter: scaleOfOuter} = core.MatrixHelper;
+
+const {toPoint: toPoint$1} = core.AroundHelper;
+
 const realFrom$1 = {};
+
 const realTo$1 = {};
+
 function radialGradient(paint, box) {
-    let { from, to, type, opacity, stretch } = paint;
-    toPoint$1(from || 'center', box, realFrom$1);
-    toPoint$1(to || 'bottom', box, realTo$1);
+    let {from: from, to: to, type: type, opacity: opacity, stretch: stretch} = paint;
+    toPoint$1(from || "center", box, realFrom$1);
+    toPoint$1(to || "bottom", box, realTo$1);
     const style = core.Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
-    const data = { type, style };
+    const data = {
+        type: type,
+        style: style
+    };
     applyStops(data, style, paint.stops, opacity);
     const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
-    if (transform)
-        data.transform = transform;
+    if (transform) data.transform = transform;
     return data;
 }
+
 function getTransform(box, from, to, stretch, rotate90) {
     let transform;
-    const { width, height } = box;
+    const {width: width, height: height} = box;
     if (width !== height || stretch) {
         const angle = getAngle(from, to);
         transform = get();
         if (rotate90) {
             scaleOfOuter(transform, from, width / height * (stretch || 1), 1);
             rotateOfOuter(transform, from, angle + 90);
-        }
-        else {
+        } else {
             scaleOfOuter(transform, from, 1, width / height * (stretch || 1));
             rotateOfOuter(transform, from, angle);
         }
@@ -1640,81 +1704,94 @@ function getTransform(box, from, to, stretch, rotate90) {
     return transform;
 }
 
-const { getDistance } = core.PointHelper;
-const { toPoint } = core.AroundHelper;
+const {getDistance: getDistance} = core.PointHelper;
+
+const {toPoint: toPoint} = core.AroundHelper;
+
 const realFrom = {};
+
 const realTo = {};
+
 function conicGradient(paint, box) {
-    let { from, to, type, opacity, stretch } = paint;
-    toPoint(from || 'center', box, realFrom);
-    toPoint(to || 'bottom', box, realTo);
+    let {from: from, to: to, type: type, opacity: opacity, stretch: stretch} = paint;
+    toPoint(from || "center", box, realFrom);
+    toPoint(to || "bottom", box, realTo);
     const style = core.Platform.conicGradientSupport ? core.Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : core.Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
-    const data = { type, style };
+    const data = {
+        type: type,
+        style: style
+    };
     applyStops(data, style, paint.stops, opacity);
     const transform = getTransform(box, realFrom, realTo, stretch || 1, core.Platform.conicGradientRotate90);
-    if (transform)
-        data.transform = transform;
+    if (transform) data.transform = transform;
     return data;
 }
 
 const PaintGradientModule = {
-    linearGradient,
-    radialGradient,
-    conicGradient,
-    getTransform
+    linearGradient: linearGradient,
+    radialGradient: radialGradient,
+    conicGradient: conicGradient,
+    getTransform: getTransform
 };
 
-const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = core.BoundsHelper;
+const {copy: copy, toOffsetOutBounds: toOffsetOutBounds$1} = core.BoundsHelper;
+
 const tempBounds = {};
+
 const offsetOutBounds$1 = {};
+
 function shadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __nowWorld: nowWorld, __layout } = ui;
-    const { shadow } = ui.__;
-    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
+    const {__nowWorld: nowWorld, __layout: __layout} = ui;
+    const {shadow: shadow} = ui.__;
+    const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
     const other = current.getSameCanvas();
     const end = shadow.length - 1;
     toOffsetOutBounds$1(bounds, offsetOutBounds$1);
     shadow.forEach((item, index) => {
-        other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, draw.ColorConvert.string(item.color));
-        spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
+        let otherScale = 1;
+        if (item.scaleFixed) {
+            const sx = Math.abs(nowWorld.scaleX);
+            if (sx > 1) otherScale = 1 / sx;
+        }
+        other.setWorldShadow(offsetOutBounds$1.offsetX + item.x * scaleX * otherScale, offsetOutBounds$1.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale, draw.ColorConvert.string(item.color));
+        spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
         drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
         copyBounds = bounds;
         if (item.box) {
             other.restore();
             other.save();
             if (worldCanvas) {
-                other.copyWorld(other, bounds, nowWorld, 'copy');
+                other.copyWorld(other, bounds, nowWorld, "copy");
                 copyBounds = nowWorld;
             }
-            worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
+            worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
         }
         core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
-        if (end && index < end)
-            other.clearWorld(copyBounds, true);
+        if (end && index < end) other.clearWorld(copyBounds, true);
     });
     other.recycle(copyBounds);
 }
+
 function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
-    const { bounds, shapeBounds } = shape;
+    const {bounds: bounds, shapeBounds: shapeBounds} = shape;
     if (core.Platform.fullImageShadow) {
         copy(tempBounds, canvas.bounds);
-        tempBounds.x += (outBounds.x - shapeBounds.x);
-        tempBounds.y += (outBounds.y - shapeBounds.y);
+        tempBounds.x += outBounds.x - shapeBounds.x;
+        tempBounds.y += outBounds.y - shapeBounds.y;
         if (spreadScale) {
-            const { matrix } = shape;
-            tempBounds.x -= (bounds.x + (matrix ? matrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
-            tempBounds.y -= (bounds.y + (matrix ? matrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
+            const {fitMatrix: fitMatrix} = shape;
+            tempBounds.x -= (bounds.x + (fitMatrix ? fitMatrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
+            tempBounds.y -= (bounds.y + (fitMatrix ? fitMatrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
             tempBounds.width *= spreadScale;
             tempBounds.height *= spreadScale;
         }
         canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
-    }
-    else {
+    } else {
         if (spreadScale) {
             copy(tempBounds, outBounds);
-            tempBounds.x -= (outBounds.width / 2) * (spreadScale - 1);
-            tempBounds.y -= (outBounds.height / 2) * (spreadScale - 1);
+            tempBounds.x -= outBounds.width / 2 * (spreadScale - 1);
+            tempBounds.y -= outBounds.height / 2 * (spreadScale - 1);
             tempBounds.width *= spreadScale;
             tempBounds.height *= spreadScale;
         }
@@ -1722,174 +1799,184 @@ function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
     }
 }
 
-const { toOffsetOutBounds } = core.BoundsHelper;
+const {toOffsetOutBounds: toOffsetOutBounds} = core.BoundsHelper;
+
 const offsetOutBounds = {};
+
 function innerShadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __nowWorld: nowWorld, __layout } = ui;
-    const { innerShadow } = ui.__;
-    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
+    const {__nowWorld: nowWorld, __layout: __layout} = ui;
+    const {innerShadow: innerShadow} = ui.__;
+    const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
     const other = current.getSameCanvas();
     const end = innerShadow.length - 1;
     toOffsetOutBounds(bounds, offsetOutBounds);
     innerShadow.forEach((item, index) => {
+        let otherScale = 1;
+        if (item.scaleFixed) {
+            const sx = Math.abs(nowWorld.scaleX);
+            if (sx > 1) otherScale = 1 / sx;
+        }
         other.save();
-        other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX);
-        spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
+        other.setWorldShadow(offsetOutBounds.offsetX + item.x * scaleX * otherScale, offsetOutBounds.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale);
+        spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
         drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
         other.restore();
         if (worldCanvas) {
-            other.copyWorld(other, bounds, nowWorld, 'copy');
-            other.copyWorld(worldCanvas, nowWorld, nowWorld, 'source-out');
+            other.copyWorld(other, bounds, nowWorld, "copy");
+            other.copyWorld(worldCanvas, nowWorld, nowWorld, "source-out");
             copyBounds = nowWorld;
-        }
-        else {
-            other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
+        } else {
+            other.copyWorld(shape.canvas, shapeBounds, bounds, "source-out");
             copyBounds = bounds;
         }
-        other.fillWorld(copyBounds, draw.ColorConvert.string(item.color), 'source-in');
+        other.fillWorld(copyBounds, draw.ColorConvert.string(item.color), "source-in");
         core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
-        if (end && index < end)
-            other.clearWorld(copyBounds, true);
+        if (end && index < end) other.clearWorld(copyBounds, true);
     });
     other.recycle(copyBounds);
 }
 
 function blur(ui, current, origin) {
-    const { blur } = ui.__;
+    const {blur: blur} = ui.__;
     origin.setWorldBlur(blur * ui.__nowWorld.a);
     origin.copyWorldToInner(current, ui.__nowWorld, ui.__layout.renderBounds);
-    origin.filter = 'none';
+    origin.filter = "none";
 }
 
-function backgroundBlur(_ui, _current, _shape) {
-}
+function backgroundBlur(_ui, _current, _shape) {}
 
 const EffectModule = {
-    shadow,
-    innerShadow,
-    blur,
-    backgroundBlur
+    shadow: shadow,
+    innerShadow: innerShadow,
+    blur: blur,
+    backgroundBlur: backgroundBlur
 };
 
-const { excludeRenderBounds } = core.LeafBoundsHelper;
-draw.Group.prototype.__renderMask = function (canvas, options) {
+const {excludeRenderBounds: excludeRenderBounds} = core.LeafBoundsHelper;
+
+let usedGrayscaleAlpha;
+
+draw.Group.prototype.__renderMask = function(canvas, options) {
     let child, maskCanvas, contentCanvas, maskOpacity, currentMask, mask;
-    const { children } = this;
+    const {children: children} = this;
     for (let i = 0, len = children.length; i < len; i++) {
         child = children[i], mask = child.__.mask;
         if (mask) {
             if (currentMask) {
-                maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
+                maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, true);
                 maskCanvas = contentCanvas = null;
             }
-            if (mask === 'path' || mask === 'clipping-path') {
-                if (child.opacity < 1) {
-                    currentMask = 'opacity-path';
-                    maskOpacity = child.opacity;
-                    if (!contentCanvas)
-                        contentCanvas = getCanvas(canvas);
-                }
-                else {
-                    currentMask = 'path';
+            maskOpacity = child.__.opacity;
+            usedGrayscaleAlpha = false;
+            if (mask === "path" || mask === "clipping-path") {
+                if (maskOpacity < 1) {
+                    currentMask = "opacity-path";
+                    if (!contentCanvas) contentCanvas = getCanvas(canvas);
+                } else {
+                    currentMask = "path";
                     canvas.save();
                 }
                 child.__clip(contentCanvas || canvas, options);
-            }
-            else {
-                currentMask = mask === 'grayscale' ? 'grayscale' : 'alpha';
-                if (!maskCanvas)
-                    maskCanvas = getCanvas(canvas);
-                if (!contentCanvas)
-                    contentCanvas = getCanvas(canvas);
+            } else {
+                currentMask = mask === "grayscale" ? "grayscale" : "alpha";
+                if (!maskCanvas) maskCanvas = getCanvas(canvas);
+                if (!contentCanvas) contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (mask === 'clipping' || mask === 'clipping-path')
-                excludeRenderBounds(child, options) || child.__render(canvas, options);
+            if (mask === "clipping" || mask === "clipping-path") excludeRenderBounds(child, options) || child.__render(canvas, options);
             continue;
         }
+        const childBlendMode = maskOpacity === 1 && child.__.__blendMode;
+        if (childBlendMode) maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, false);
         excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
+        if (childBlendMode) maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, childBlendMode, false);
     }
-    maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
+    maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, true);
 };
-function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity) {
+
+function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity, blendMode, recycle) {
     switch (maskMode) {
-        case 'grayscale':
-            maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
-        case 'alpha':
-            usePixelMask(leaf, canvas, contentCanvas, maskCanvas);
-            break;
-        case 'opacity-path':
-            copyContent(leaf, canvas, contentCanvas, maskOpacity);
-            break;
-        case 'path':
-            canvas.restore();
+      case "grayscale":
+        if (!usedGrayscaleAlpha) usedGrayscaleAlpha = true, maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
+
+      case "alpha":
+        usePixelMask(leaf, canvas, contentCanvas, maskCanvas, blendMode, recycle);
+        break;
+
+      case "opacity-path":
+        copyContent(leaf, canvas, contentCanvas, maskOpacity, blendMode, recycle);
+        break;
+
+      case "path":
+        if (recycle) canvas.restore();
     }
 }
+
 function getCanvas(canvas) {
     return canvas.getSameCanvas(false, true);
 }
-function usePixelMask(leaf, canvas, content, mask) {
+
+function usePixelMask(leaf, canvas, content, mask, blendMode, recycle) {
     const realBounds = leaf.__nowWorld;
     content.resetTransform();
     content.opacity = 1;
     content.useMask(mask, realBounds);
-    mask.recycle(realBounds);
-    copyContent(leaf, canvas, content, 1);
+    if (recycle) mask.recycle(realBounds);
+    copyContent(leaf, canvas, content, 1, blendMode, recycle);
 }
-function copyContent(leaf, canvas, content, maskOpacity) {
+
+function copyContent(leaf, canvas, content, maskOpacity, blendMode, recycle) {
     const realBounds = leaf.__nowWorld;
     canvas.resetTransform();
     canvas.opacity = maskOpacity;
-    canvas.copyWorld(content, realBounds);
-    content.recycle(realBounds);
-}
-
-const money = '¥￥＄€£￡¢￠';
-const letter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
-const langBefore = '《（「〈『〖【〔｛┌＜‘“＝' + money;
-const langAfter = '》）」〉』〗】〕｝┐＞’”！？，、。：；‰';
-const langSymbol = '≮≯≈≠＝…';
-const langBreak$1 = '—／～｜┆·';
-const beforeChar = '{[(<\'"' + langBefore;
-const afterChar = '>)]}%!?,.:;\'"' + langAfter;
-const symbolChar = afterChar + '_#~&*+\\=|' + langSymbol;
-const breakChar = '- ' + langBreak$1;
-const cjkRangeList = [
-    [0x4E00, 0x9FFF],
-    [0x3400, 0x4DBF],
-    [0x20000, 0x2A6DF],
-    [0x2A700, 0x2B73F],
-    [0x2B740, 0x2B81F],
-    [0x2B820, 0x2CEAF],
-    [0x2CEB0, 0x2EBEF],
-    [0x30000, 0x3134F],
-    [0x31350, 0x323AF],
-    [0x2E80, 0x2EFF],
-    [0x2F00, 0x2FDF],
-    [0x2FF0, 0x2FFF],
-    [0x3000, 0x303F],
-    [0x31C0, 0x31EF],
-    [0x3200, 0x32FF],
-    [0x3300, 0x33FF],
-    [0xF900, 0xFAFF],
-    [0xFE30, 0xFE4F],
-    [0x1F200, 0x1F2FF],
-    [0x2F800, 0x2FA1F],
-];
-const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join('|'));
+    canvas.copyWorld(content, realBounds, undefined, blendMode);
+    recycle ? content.recycle(realBounds) : content.clearWorld(realBounds, true);
+}
+
+const money = "¥￥＄€£￡¢￠";
+
+const letter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
+
+const langBefore = "《（「〈『〖【〔｛┌＜‘“＝" + money;
+
+const langAfter = "》）」〉』〗】〕｝┐＞’”！？，、。：；‰";
+
+const langSymbol = "≮≯≈≠＝…";
+
+const langBreak$1 = "—／～｜┆·";
+
+const beforeChar = "{[(<'\"" + langBefore;
+
+const afterChar = ">)]}%!?,.:;'\"" + langAfter;
+
+const symbolChar = afterChar + "_#~&*+\\=|" + langSymbol;
+
+const breakChar = "- " + langBreak$1;
+
+const cjkRangeList = [ [ 19968, 40959 ], [ 13312, 19903 ], [ 131072, 173791 ], [ 173824, 177983 ], [ 177984, 178207 ], [ 178208, 183983 ], [ 183984, 191471 ], [ 196608, 201551 ], [ 201552, 205743 ], [ 11904, 12031 ], [ 12032, 12255 ], [ 12272, 12287 ], [ 12288, 12351 ], [ 12736, 12783 ], [ 12800, 13055 ], [ 13056, 13311 ], [ 63744, 64255 ], [ 65072, 65103 ], [ 127488, 127743 ], [ 194560, 195103 ] ];
+
+const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join("|"));
+
 function mapChar(str) {
     const map = {};
-    str.split('').forEach(char => map[char] = true);
+    str.split("").forEach(char => map[char] = true);
     return map;
 }
+
 const letterMap = mapChar(letter);
+
 const beforeMap = mapChar(beforeChar);
+
 const afterMap = mapChar(afterChar);
+
 const symbolMap = mapChar(symbolChar);
+
 const breakMap = mapChar(breakChar);
+
 var CharType;
-(function (CharType) {
+
+(function(CharType) {
     CharType[CharType["Letter"] = 0] = "Letter";
     CharType[CharType["Single"] = 1] = "Single";
     CharType[CharType["Before"] = 2] = "Before";
@@ -1897,179 +1984,175 @@ var CharType;
     CharType[CharType["Symbol"] = 4] = "Symbol";
     CharType[CharType["Break"] = 5] = "Break";
 })(CharType || (CharType = {}));
-const { Letter: Letter$1, Single: Single$1, Before: Before$1, After: After$1, Symbol: Symbol$1, Break: Break$1 } = CharType;
+
+const {Letter: Letter$1, Single: Single$1, Before: Before$1, After: After$1, Symbol: Symbol$1, Break: Break$1} = CharType;
+
 function getCharType(char) {
     if (letterMap[char]) {
         return Letter$1;
-    }
-    else if (breakMap[char]) {
+    } else if (breakMap[char]) {
         return Break$1;
-    }
-    else if (beforeMap[char]) {
+    } else if (beforeMap[char]) {
         return Before$1;
-    }
-    else if (afterMap[char]) {
+    } else if (afterMap[char]) {
         return After$1;
-    }
-    else if (symbolMap[char]) {
+    } else if (symbolMap[char]) {
         return Symbol$1;
-    }
-    else if (cjkReg.test(char)) {
+    } else if (cjkReg.test(char)) {
         return Single$1;
-    }
-    else {
+    } else {
         return Letter$1;
     }
 }
 
 const TextRowHelper = {
     trimRight(row) {
-        const { words } = row;
+        const {words: words} = row;
         let trimRight = 0, len = words.length, char;
         for (let i = len - 1; i > -1; i--) {
             char = words[i].data[0];
-            if (char.char === ' ') {
+            if (char.char === " ") {
                 trimRight++;
                 row.width -= char.width;
-            }
-            else {
+            } else {
                 break;
             }
         }
-        if (trimRight)
-            words.splice(len - trimRight, trimRight);
+        if (trimRight) words.splice(len - trimRight, trimRight);
     }
 };
 
 function getTextCase(char, textCase, firstChar) {
     switch (textCase) {
-        case 'title':
-            return firstChar ? char.toUpperCase() : char;
-        case 'upper':
-            return char.toUpperCase();
-        case 'lower':
-            return char.toLowerCase();
-        default:
-            return char;
+      case "title":
+        return firstChar ? char.toUpperCase() : char;
+
+      case "upper":
+        return char.toUpperCase();
+
+      case "lower":
+        return char.toLowerCase();
+
+      default:
+        return char;
     }
 }
 
-const { trimRight } = TextRowHelper;
-const { Letter, Single, Before, After, Symbol, Break } = CharType;
+const {trimRight: trimRight} = TextRowHelper;
+
+const {Letter: Letter, Single: Single, Before: Before, After: After, Symbol: Symbol, Break: Break} = CharType;
+
 let word, row, wordWidth, rowWidth, realWidth;
+
 let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
+
 let textDrawData, rows = [], bounds, findMaxWidth;
+
 function createRows(drawData, content, style) {
     textDrawData = drawData;
     rows = drawData.rows;
     bounds = drawData.bounds;
     findMaxWidth = !bounds.width && !style.autoSizeAlign;
-    const { __letterSpacing, paraIndent, textCase } = style;
-    const { canvas } = core.Platform;
-    const { width, height } = bounds;
-    const charMode = width || height || __letterSpacing || (textCase !== 'none');
+    const {__letterSpacing: __letterSpacing, paraIndent: paraIndent, textCase: textCase} = style;
+    const {canvas: canvas} = core.Platform;
+    const {width: width, height: height} = bounds;
+    const charMode = width || height || __letterSpacing || textCase !== "none";
     if (charMode) {
-        const wrap = style.textWrap !== 'none';
-        const breakAll = style.textWrap === 'break';
+        const wrap = style.textWrap !== "none";
+        const breakAll = style.textWrap === "break";
         paraStart = true;
         lastCharType = null;
         startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
-        word = { data: [] }, row = { words: [] };
-        if (__letterSpacing)
-            content = [...content];
+        word = {
+            data: []
+        }, row = {
+            words: []
+        };
+        if (__letterSpacing) content = [ ...content ];
         for (let i = 0, len = content.length; i < len; i++) {
             char = content[i];
-            if (char === '\n') {
-                if (wordWidth)
-                    addWord();
+            if (char === "\n") {
+                if (wordWidth) addWord();
                 row.paraEnd = true;
                 addRow();
                 paraStart = true;
-            }
-            else {
+            } else {
                 charType = getCharType(char);
-                if (charType === Letter && textCase !== 'none')
-                    char = getTextCase(char, textCase, !wordWidth);
+                if (charType === Letter && textCase !== "none") char = getTextCase(char, textCase, !wordWidth);
                 charWidth = canvas.measureText(char).width;
                 if (__letterSpacing) {
-                    if (__letterSpacing < 0)
-                        charSize = charWidth;
+                    if (__letterSpacing < 0) charSize = charWidth;
                     charWidth += __letterSpacing;
                 }
-                langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After);
-                afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After));
+                langBreak = charType === Single && (lastCharType === Single || lastCharType === Letter) || lastCharType === Single && charType !== After;
+                afterBreak = (charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After);
                 realWidth = paraStart && paraIndent ? width - paraIndent : width;
                 if (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) {
                     if (breakAll) {
-                        if (wordWidth)
-                            addWord();
-                        if (rowWidth)
-                            addRow();
-                    }
-                    else {
-                        if (!afterBreak)
-                            afterBreak = charType === Letter && lastCharType == After;
-                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
-                            if (wordWidth)
-                                addWord();
-                            if (rowWidth)
-                                addRow();
-                        }
-                        else {
-                            if (rowWidth)
-                                addRow();
+                        if (wordWidth) addWord();
+                        if (rowWidth) addRow();
+                    } else {
+                        if (!afterBreak) afterBreak = charType === Letter && lastCharType == After;
+                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || wordWidth + charWidth > realWidth) {
+                            if (wordWidth) addWord();
+                            if (rowWidth) addRow();
+                        } else {
+                            if (rowWidth) addRow();
                         }
                     }
                 }
-                if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
-                else {
+                if (char === " " && paraStart !== true && rowWidth + wordWidth === 0) ; else {
                     if (charType === Break) {
-                        if (char === ' ' && wordWidth)
-                            addWord();
+                        if (char === " " && wordWidth) addWord();
                         addChar(char, charWidth);
                         addWord();
-                    }
-                    else if (langBreak || afterBreak) {
-                        if (wordWidth)
-                            addWord();
+                    } else if (langBreak || afterBreak) {
+                        if (wordWidth) addWord();
                         addChar(char, charWidth);
-                    }
-                    else {
+                    } else {
                         addChar(char, charWidth);
                     }
                 }
                 lastCharType = charType;
             }
         }
-        if (wordWidth)
-            addWord();
-        if (rowWidth)
-            addRow();
+        if (wordWidth) addWord();
+        if (rowWidth) addRow();
         rows.length > 0 && (rows[rows.length - 1].paraEnd = true);
-    }
-    else {
-        content.split('\n').forEach(content => {
+    } else {
+        content.split("\n").forEach(content => {
             textDrawData.paraNumber++;
             rowWidth = canvas.measureText(content).width;
-            rows.push({ x: paraIndent || 0, text: content, width: rowWidth, paraStart: true });
-            if (findMaxWidth)
-                setMaxWidth();
+            rows.push({
+                x: paraIndent || 0,
+                text: content,
+                width: rowWidth,
+                paraStart: true
+            });
+            if (findMaxWidth) setMaxWidth();
         });
     }
 }
+
 function addChar(char, width) {
-    if (charSize && !startCharSize)
-        startCharSize = charSize;
-    word.data.push({ char, width });
+    if (charSize && !startCharSize) startCharSize = charSize;
+    word.data.push({
+        char: char,
+        width: width
+    });
     wordWidth += width;
 }
+
 function addWord() {
     rowWidth += wordWidth;
     word.width = wordWidth;
     row.words.push(word);
-    word = { data: [] };
+    word = {
+        data: []
+    };
     wordWidth = 0;
 }
+
 function addRow() {
     if (paraStart) {
         textDrawData.paraNumber++;
@@ -2082,52 +2165,53 @@ function addRow() {
         startCharSize = 0;
     }
     row.width = rowWidth;
-    if (bounds.width)
-        trimRight(row);
-    else if (findMaxWidth)
-        setMaxWidth();
+    if (bounds.width) trimRight(row); else if (findMaxWidth) setMaxWidth();
     rows.push(row);
-    row = { words: [] };
+    row = {
+        words: []
+    };
     rowWidth = 0;
 }
+
 function setMaxWidth() {
-    if (rowWidth > (textDrawData.maxWidth || 0))
-        textDrawData.maxWidth = rowWidth;
+    if (rowWidth > (textDrawData.maxWidth || 0)) textDrawData.maxWidth = rowWidth;
 }
 
 const CharMode = 0;
+
 const WordMode = 1;
+
 const TextMode = 2;
+
 function layoutChar(drawData, style, width, _height) {
-    const { rows } = drawData;
-    const { textAlign, paraIndent, letterSpacing } = style;
+    const {rows: rows} = drawData;
+    const {textAlign: textAlign, paraIndent: paraIndent, letterSpacing: letterSpacing} = style;
     let charX, addWordWidth, indentWidth, mode, wordChar, wordsLength;
     rows.forEach(row => {
         if (row.words) {
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length;
-            addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && wordsLength > 1) ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
-            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
-            if (row.isOverflow && !letterSpacing)
-                row.textMode = true;
+            addWordWidth = width && (textAlign === "justify" || textAlign === "both") && wordsLength > 1 ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
+            mode = letterSpacing || row.isOverflow ? CharMode : addWordWidth > .01 ? WordMode : TextMode;
+            if (row.isOverflow && !letterSpacing) row.textMode = true;
             if (mode === TextMode) {
                 row.x += indentWidth;
                 toTextChar$1(row);
-            }
-            else {
+            } else {
                 row.x += indentWidth;
                 charX = row.x;
                 row.data = [];
                 row.words.forEach((word, index) => {
                     if (mode === WordMode) {
-                        wordChar = { char: '', x: charX };
+                        wordChar = {
+                            char: "",
+                            x: charX
+                        };
                         charX = toWordChar(word.data, charX, wordChar);
-                        if (row.isOverflow || wordChar.char !== ' ')
-                            row.data.push(wordChar);
-                    }
-                    else {
+                        if (row.isOverflow || wordChar.char !== " ") row.data.push(wordChar);
+                    } else {
                         charX = toChar(word.data, charX, row.data, row.isOverflow);
                     }
-                    if (addWordWidth && (!row.paraEnd || textAlign === 'both') && (index !== wordsLength - 1)) {
+                    if (addWordWidth && (!row.paraEnd || textAlign === "both") && index !== wordsLength - 1) {
                         charX += addWordWidth;
                         row.width += addWordWidth;
                     }
@@ -2137,14 +2221,16 @@ function layoutChar(drawData, style, width, _height) {
         }
     });
 }
+
 function toTextChar$1(row) {
-    row.text = '';
+    row.text = "";
     row.words.forEach(word => {
         word.data.forEach(char => {
             row.text += char.char;
         });
     });
 }
+
 function toWordChar(data, charX, wordChar) {
     data.forEach(char => {
         wordChar.char += char.char;
@@ -2152,9 +2238,10 @@ function toWordChar(data, charX, wordChar) {
     });
     return charX;
 }
+
 function toChar(data, charX, rowData, isOverflow) {
     data.forEach(char => {
-        if (isOverflow || char.char !== ' ') {
+        if (isOverflow || char.char !== " ") {
             char.x = charX;
             rowData.push(char);
         }
@@ -2164,38 +2251,39 @@ function toChar(data, charX, rowData, isOverflow) {
 }
 
 function layoutText(drawData, style) {
-    const { rows, bounds } = drawData, countRows = rows.length;
-    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
-    let { x, y, width, height } = bounds, realHeight = __lineHeight * countRows + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
+    const {rows: rows, bounds: bounds} = drawData, countRows = rows.length;
+    const {__lineHeight: __lineHeight, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __clipText: __clipText, textAlign: textAlign, verticalAlign: verticalAlign, paraSpacing: paraSpacing, autoSizeAlign: autoSizeAlign} = style;
+    let {x: x, y: y, width: width, height: height} = bounds, realHeight = __lineHeight * countRows + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
     if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
-        if (countRows > 1)
-            drawData.overflow = countRows;
-    }
-    else if (height || autoSizeAlign) {
+        if (countRows > 1) drawData.overflow = countRows;
+    } else if (height || autoSizeAlign) {
         switch (verticalAlign) {
-            case 'middle':
-                y += (height - realHeight) / 2;
-                break;
-            case 'bottom': y += (height - realHeight);
+          case "middle":
+            y += (height - realHeight) / 2;
+            break;
+
+          case "bottom":
+            y += height - realHeight;
         }
     }
     starY += y;
-    let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
+    let row, rowX, rowWidth, layoutWidth = width || autoSizeAlign ? width : drawData.maxWidth;
     for (let i = 0, len = countRows; i < len; i++) {
         row = rows[i];
         row.x = x;
-        if (row.width < width || (row.width > width && !__clipText)) {
+        if (row.width < width || row.width > width && !__clipText) {
             switch (textAlign) {
-                case 'center':
-                    row.x += (layoutWidth - row.width) / 2;
-                    break;
-                case 'right': row.x += layoutWidth - row.width;
+              case "center":
+                row.x += (layoutWidth - row.width) / 2;
+                break;
+
+              case "right":
+                row.x += layoutWidth - row.width;
             }
         }
-        if (row.paraStart && paraSpacing && i > 0)
-            starY += paraSpacing;
+        if (row.paraStart && paraSpacing && i > 0) starY += paraSpacing;
         row.y = starY;
         starY += __lineHeight;
         if (drawData.overflow > i && starY > realHeight) {
@@ -2209,19 +2297,15 @@ function layoutText(drawData, style) {
                 rowWidth = -row.width + style.fontSize + __letterSpacing;
                 rowX -= rowWidth;
                 rowWidth += style.fontSize;
-            }
-            else {
+            } else {
                 rowWidth -= __letterSpacing;
             }
         }
-        if (rowX < bounds.x)
-            bounds.x = rowX;
-        if (rowWidth > bounds.width)
-            bounds.width = rowWidth;
+        if (rowX < bounds.x) bounds.x = rowX;
+        if (rowWidth > bounds.width) bounds.width = rowWidth;
         if (__clipText && width && width < rowWidth) {
             row.isOverflow = true;
-            if (!drawData.overflow)
-                drawData.overflow = rows.length;
+            if (!drawData.overflow) drawData.overflow = rows.length;
         }
     }
     bounds.y = y;
@@ -2229,20 +2313,16 @@ function layoutText(drawData, style) {
 }
 
 function clipText(drawData, style, x, width) {
-    if (!width)
-        return;
-    const { rows, overflow } = drawData;
-    let { textOverflow } = style;
+    if (!width) return;
+    const {rows: rows, overflow: overflow} = drawData;
+    let {textOverflow: textOverflow} = style;
     rows.splice(overflow);
-    if (textOverflow && textOverflow !== 'show') {
-        if (textOverflow === 'hide')
-            textOverflow = '';
-        else if (textOverflow === 'ellipsis')
-            textOverflow = '...';
+    if (textOverflow && textOverflow !== "show") {
+        if (textOverflow === "hide") textOverflow = ""; else if (textOverflow === "ellipsis") textOverflow = "...";
         let char, charRight;
         const ellipsisWidth = textOverflow ? core.Platform.canvas.measureText(textOverflow).width : 0;
         const right = x + width - ellipsisWidth;
-        const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
+        const list = style.textWrap === "none" ? rows : [ rows[overflow - 1] ];
         list.forEach(row => {
             if (row.isOverflow && row.data) {
                 let end = row.data.length - 1;
@@ -2251,8 +2331,7 @@ function clipText(drawData, style, x, width) {
                     charRight = char.x + char.width;
                     if (i === end && charRight < right) {
                         break;
-                    }
-                    else if ((charRight < right && char.char !== ' ') || !i) {
+                    } else if (charRight < right && char.char !== " " || !i) {
                         row.data.splice(i + 1);
                         row.width -= char.width;
                         break;
@@ -2260,15 +2339,18 @@ function clipText(drawData, style, x, width) {
                     row.width -= char.width;
                 }
                 row.width += ellipsisWidth;
-                row.data.push({ char: textOverflow, x: charRight });
-                if (row.textMode)
-                    toTextChar(row);
+                row.data.push({
+                    char: textOverflow,
+                    x: charRight
+                });
+                if (row.textMode) toTextChar(row);
             }
         });
     }
 }
+
 function toTextChar(row) {
-    row.text = '';
+    row.text = "";
     row.data.forEach(char => {
         row.text += char.char;
     });
@@ -2277,121 +2359,123 @@ function toTextChar(row) {
 
 function decorationText(drawData, style) {
     let type;
-    const { fontSize, textDecoration } = style;
+    const {fontSize: fontSize, textDecoration: textDecoration} = style;
     drawData.decorationHeight = fontSize / 11;
-    if (typeof textDecoration === 'object') {
+    if (core.isObject(textDecoration)) {
         type = textDecoration.type;
-        if (textDecoration.color)
-            drawData.decorationColor = draw.ColorConvert.string(textDecoration.color);
-    }
-    else
-        type = textDecoration;
+        if (textDecoration.color) drawData.decorationColor = draw.ColorConvert.string(textDecoration.color);
+    } else type = textDecoration;
     switch (type) {
-        case 'under':
-            drawData.decorationY = [fontSize * 0.15];
-            break;
-        case 'delete':
-            drawData.decorationY = [-fontSize * 0.35];
-            break;
-        case 'under-delete':
-            drawData.decorationY = [fontSize * 0.15, -fontSize * 0.35];
+      case "under":
+        drawData.decorationY = [ fontSize * .15 ];
+        break;
+
+      case "delete":
+        drawData.decorationY = [ -fontSize * .35 ];
+        break;
+
+      case "under-delete":
+        drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
     }
 }
 
-const { top, right, bottom, left } = core.Direction4;
+const {top: top, right: right, bottom: bottom, left: left} = core.Direction4;
+
 function getDrawData(content, style) {
-    if (typeof content !== 'string')
-        content = String(content);
+    if (!core.isString(content)) content = String(content);
     let x = 0, y = 0;
-    let width = style.__getInput('width') || 0;
-    let height = style.__getInput('height') || 0;
-    const { textDecoration, __font, __padding: padding } = style;
+    let width = style.__getInput("width") || 0;
+    let height = style.__getInput("height") || 0;
+    const {textDecoration: textDecoration, __font: __font, __padding: padding} = style;
     if (padding) {
-        if (width)
-            x = padding[left], width -= (padding[right] + padding[left]);
-        else if (!style.autoSizeAlign)
-            x = padding[left];
-        if (height)
-            y = padding[top], height -= (padding[top] + padding[bottom]);
-        else if (!style.autoSizeAlign)
-            y = padding[top];
+        if (width) x = padding[left], width -= padding[right] + padding[left]; else if (!style.autoSizeAlign) x = padding[left];
+        if (height) y = padding[top], height -= padding[top] + padding[bottom]; else if (!style.autoSizeAlign) y = padding[top];
     }
     const drawData = {
-        bounds: { x, y, width, height },
+        bounds: {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+        },
         rows: [],
         paraNumber: 0,
         font: core.Platform.canvas.font = __font
     };
     createRows(drawData, content, style);
-    if (padding)
-        padAutoText(padding, drawData, style, width, height);
+    if (padding) padAutoText(padding, drawData, style, width, height);
     layoutText(drawData, style);
     layoutChar(drawData, style, width);
-    if (drawData.overflow)
-        clipText(drawData, style, x, width);
-    if (textDecoration !== 'none')
-        decorationText(drawData, style);
+    if (drawData.overflow) clipText(drawData, style, x, width);
+    if (textDecoration !== "none") decorationText(drawData, style);
     return drawData;
 }
+
 function padAutoText(padding, drawData, style, width, height) {
     if (!width && style.autoSizeAlign) {
         switch (style.textAlign) {
-            case 'left':
-                offsetText(drawData, 'x', padding[left]);
-                break;
-            case 'right': offsetText(drawData, 'x', -padding[right]);
+          case "left":
+            offsetText(drawData, "x", padding[left]);
+            break;
+
+          case "right":
+            offsetText(drawData, "x", -padding[right]);
         }
     }
     if (!height && style.autoSizeAlign) {
         switch (style.verticalAlign) {
-            case 'top':
-                offsetText(drawData, 'y', padding[top]);
-                break;
-            case 'bottom': offsetText(drawData, 'y', -padding[bottom]);
+          case "top":
+            offsetText(drawData, "y", padding[top]);
+            break;
+
+          case "bottom":
+            offsetText(drawData, "y", -padding[bottom]);
         }
     }
 }
+
 function offsetText(drawData, attrName, value) {
-    const { bounds, rows } = drawData;
+    const {bounds: bounds, rows: rows} = drawData;
     bounds[attrName] += value;
-    for (let i = 0; i < rows.length; i++)
-        rows[i][attrName] += value;
+    for (let i = 0; i < rows.length; i++) rows[i][attrName] += value;
 }
 
 const TextConvertModule = {
-    getDrawData
+    getDrawData: getDrawData
 };
 
 function string(color, opacity) {
-    const doOpacity = typeof opacity === 'number' && opacity !== 1;
-    if (typeof color === 'string') {
-        if (doOpacity && draw.ColorConvert.object)
-            color = draw.ColorConvert.object(color);
-        else
-            return color;
+    const doOpacity = core.isNumber(opacity) && opacity < 1;
+    if (core.isString(color)) {
+        if (doOpacity && draw.ColorConvert.object) color = draw.ColorConvert.object(color); else return color;
     }
-    let a = color.a === undefined ? 1 : color.a;
-    if (doOpacity)
-        a *= opacity;
-    const rgb = color.r + ',' + color.g + ',' + color.b;
-    return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
+    let a = core.isUndefined(color.a) ? 1 : color.a;
+    if (doOpacity) a *= opacity;
+    const rgb = color.r + "," + color.g + "," + color.b;
+    return a === 1 ? "rgb(" + rgb + ")" : "rgba(" + rgb + "," + a + ")";
 }
 
 const ColorConvertModule = {
-    string
+    string: string
 };
 
 Object.assign(draw.TextConvert, TextConvertModule);
+
 Object.assign(draw.ColorConvert, ColorConvertModule);
+
 Object.assign(draw.Paint, PaintModule);
+
 Object.assign(draw.PaintImage, PaintImageModule);
+
 Object.assign(draw.PaintGradient, PaintGradientModule);
+
 Object.assign(draw.Effect, EffectModule);
 
-const { setPoint, addPoint, toBounds } = draw.TwoPointBoundsHelper;
+const {setPoint: setPoint, addPoint: addPoint, toBounds: toBounds} = draw.TwoPointBoundsHelper;
+
 function getTrimBounds(canvas) {
-    const { width, height } = canvas.view;
-    const { data } = canvas.context.getImageData(0, 0, width, height);
+    const {width: width, height: height} = canvas.view;
+    const {data: data} = canvas.context.getImageData(0, 0, width, height);
     let x, y, pointBounds, index = 0;
     for (let i = 0; i < data.length; i += 4) {
         if (data[i + 3] !== 0) {
@@ -2401,7 +2485,7 @@ function getTrimBounds(canvas) {
         }
         index++;
     }
-    const bounds = new draw.Bounds();
+    const bounds = new draw.Bounds;
     if (pointBounds) {
         toBounds(pointBounds, bounds);
         bounds.scale(1 / canvas.pixelRatio).ceil();
@@ -2415,64 +2499,80 @@ const ExportModule = {
         let result;
         try {
             const fileType = draw.FileHelper.fileType(filename);
-            const isDownload = filename.includes('.');
+            const isDownload = filename.includes(".");
             options = draw.FileHelper.getExportOptions(options);
-            const { toURL } = draw.Platform;
-            const { download } = draw.Platform.origin;
-            if (fileType === 'json') {
-                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
-                result = { data: isDownload ? true : leaf.toJSON(options.json) };
-            }
-            else if (fileType === 'svg') {
-                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
-                result = { data: isDownload ? true : leaf.toSVG() };
-            }
-            else {
+            const {toURL: toURL} = draw.Platform;
+            const {download: download} = draw.Platform.origin;
+            if (fileType === "json") {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), "text"), filename);
+                result = {
+                    data: isDownload ? true : leaf.toJSON(options.json)
+                };
+            } else if (fileType === "svg") {
+                isDownload && download(toURL(leaf.toSVG(), "svg"), filename);
+                result = {
+                    data: isDownload ? true : leaf.toSVG()
+                };
+            } else {
                 let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
-                const { worldTransform, isLeafer, leafer, isFrame } = leaf;
-                const { slice, clip, trim, screenshot, padding, onCanvas } = options;
-                const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
+                const {worldTransform: worldTransform, isLeafer: isLeafer, leafer: leafer, isFrame: isFrame} = leaf;
+                const {slice: slice, clip: clip, trim: trim, screenshot: screenshot, padding: padding, onCanvas: onCanvas} = options;
+                const smooth = draw.isUndefined(options.smooth) ? leafer ? leafer.config.smooth : true : options.smooth;
                 const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
-                const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
-                const needFill = draw.FileHelper.isOpaqueImage(filename) || fill, matrix = new draw.Matrix();
+                const fill = isLeafer && screenshot ? draw.isUndefined(options.fill) ? leaf.fill : options.fill : options.fill;
+                const needFill = draw.FileHelper.isOpaqueImage(filename) || fill, matrix = new draw.Matrix;
                 if (screenshot) {
-                    renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
-                }
-                else {
-                    let relative = options.relative || (isLeafer ? 'inner' : 'local');
+                    renderBounds = screenshot === true ? isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds : screenshot;
+                } else {
+                    let relative = options.relative || (isLeafer ? "inner" : "local");
                     scaleX = worldTransform.scaleX;
                     scaleY = worldTransform.scaleY;
                     switch (relative) {
-                        case 'inner':
-                            matrix.set(worldTransform);
-                            break;
-                        case 'local':
-                            matrix.set(worldTransform).divide(leaf.localTransform);
-                            scaleX /= leaf.scaleX;
-                            scaleY /= leaf.scaleY;
-                            break;
-                        case 'world':
-                            scaleX = 1;
-                            scaleY = 1;
-                            break;
-                        case 'page':
-                            relative = leafer || leaf;
-                        default:
-                            matrix.set(worldTransform).divide(leaf.getTransform(relative));
-                            const l = relative.worldTransform;
-                            scaleX /= scaleX / l.scaleX;
-                            scaleY /= scaleY / l.scaleY;
+                      case "inner":
+                        matrix.set(worldTransform);
+                        break;
+
+                      case "local":
+                        matrix.set(worldTransform).divide(leaf.localTransform);
+                        scaleX /= leaf.scaleX;
+                        scaleY /= leaf.scaleY;
+                        break;
+
+                      case "world":
+                        scaleX = 1;
+                        scaleY = 1;
+                        break;
+
+                      case "page":
+                        relative = leafer || leaf;
+
+                      default:
+                        matrix.set(worldTransform).divide(leaf.getTransform(relative));
+                        const l = relative.worldTransform;
+                        scaleX /= scaleX / l.scaleX;
+                        scaleY /= scaleY / l.scaleY;
                     }
-                    renderBounds = leaf.getBounds('render', relative);
+                    renderBounds = leaf.getBounds("render", relative);
                 }
-                const scaleData = { scaleX: 1, scaleY: 1 };
+                const scaleData = {
+                    scaleX: 1,
+                    scaleY: 1
+                };
                 draw.MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
                 let pixelRatio = options.pixelRatio || 1;
-                let { x, y, width, height } = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
-                if (clip)
-                    x += clip.x, y += clip.y, width = clip.width, height = clip.height;
-                const renderOptions = { exporting: true, matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
-                let canvas = draw.Creator.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
+                let {x: x, y: y, width: width, height: height} = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                if (clip) x += clip.x, y += clip.y, width = clip.width, height = clip.height;
+                const renderOptions = {
+                    exporting: true,
+                    matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY)
+                };
+                let canvas = draw.Creator.canvas({
+                    width: Math.floor(width),
+                    height: Math.floor(height),
+                    pixelRatio: pixelRatio,
+                    smooth: smooth,
+                    contextSettings: contextSettings
+                });
                 let sliceLeaf;
                 if (slice) {
                     sliceLeaf = leaf;
@@ -2481,152 +2581,190 @@ const ExportModule = {
                     renderOptions.bounds = canvas.bounds;
                 }
                 canvas.save();
-                if (isFrame && fill !== undefined) {
-                    const oldFill = leaf.get('fill');
-                    leaf.fill = '';
+                if (isFrame && !draw.isUndefined(fill)) {
+                    const oldFill = leaf.get("fill");
+                    leaf.fill = "";
                     leaf.__render(canvas, renderOptions);
                     leaf.fill = oldFill;
-                }
-                else {
+                } else {
                     leaf.__render(canvas, renderOptions);
                 }
                 canvas.restore();
-                if (sliceLeaf)
-                    sliceLeaf.__updateWorldOpacity();
+                if (sliceLeaf) sliceLeaf.__updateWorldOpacity();
                 if (trim) {
                     trimBounds = getTrimBounds(canvas);
-                    const old = canvas, { width, height } = trimBounds;
-                    const config = { x: 0, y: 0, width, height, pixelRatio };
+                    const old = canvas, {width: width, height: height} = trimBounds;
+                    const config = {
+                        x: 0,
+                        y: 0,
+                        width: width,
+                        height: height,
+                        pixelRatio: pixelRatio
+                    };
                     canvas = draw.Creator.canvas(config);
                     canvas.copyWorld(old, trimBounds, config);
+                    old.destroy();
                 }
                 if (padding) {
                     const [top, right, bottom, left] = draw.MathHelper.fourNumber(padding);
-                    const old = canvas, { width, height } = old;
-                    canvas = draw.Creator.canvas({ width: width + left + right, height: height + top + bottom, pixelRatio });
-                    canvas.copyWorld(old, old.bounds, { x: left, y: top, width, height });
+                    const old = canvas, {width: width, height: height} = old;
+                    canvas = draw.Creator.canvas({
+                        width: width + left + right,
+                        height: height + top + bottom,
+                        pixelRatio: pixelRatio
+                    });
+                    canvas.copyWorld(old, old.bounds, {
+                        x: left,
+                        y: top,
+                        width: width,
+                        height: height
+                    });
+                    old.destroy();
                 }
-                if (needFill)
-                    canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
-                if (onCanvas)
-                    onCanvas(canvas);
-                const data = filename === 'canvas' ? canvas : canvas.export(filename, options);
-                result = { data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds };
+                if (needFill) canvas.fillWorld(canvas.bounds, fill || "#FFFFFF", "destination-over");
+                if (onCanvas) onCanvas(canvas);
+                const data = filename === "canvas" ? canvas : canvas.export(filename, options);
+                result = {
+                    data: data,
+                    width: canvas.pixelWidth,
+                    height: canvas.pixelHeight,
+                    renderBounds: renderBounds,
+                    trimBounds: trimBounds
+                };
             }
-        }
-        catch (error) {
-            result = { data: '', error };
+        } catch (error) {
+            result = {
+                data: "",
+                error: error
+            };
         }
         draw.Export.running = false;
         return result;
     },
     export(leaf, filename, options) {
         draw.Export.running = true;
-        return addTask((success) => new Promise((resolve) => {
-            const getResult = () => __awaiter(this, void 0, void 0, function* () {
-                if (!draw.Resource.isComplete)
-                    return draw.Platform.requestRender(getResult);
+        return addTask(success => new Promise(resolve => {
+            const getResult = () => __awaiter(this, void 0, void 0, function*() {
+                if (!draw.Resource.isComplete) return draw.Platform.requestRender(getResult);
                 const result = draw.Export.syncExport(leaf, filename, options);
-                if (result.data instanceof Promise)
-                    result.data = yield result.data;
+                if (result.data instanceof Promise) result.data = yield result.data;
                 success(result);
                 resolve();
             });
             leaf.updateLayout();
             checkLazy(leaf);
-            const { leafer } = leaf;
-            if (leafer)
-                leafer.waitViewCompleted(getResult);
-            else
-                getResult();
+            const {leafer: leafer} = leaf;
+            if (leafer) leafer.waitViewCompleted(getResult); else getResult();
         }));
     }
 };
+
 let tasker;
+
 function addTask(task) {
-    if (!tasker)
-        tasker = new draw.TaskProcessor();
-    return new Promise((resolve) => {
-        tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
+    if (!tasker) tasker = new draw.TaskProcessor;
+    return new Promise(resolve => {
+        tasker.add(() => __awaiter(this, void 0, void 0, function*() {
+            return yield task(resolve);
+        }), {
+            parallel: false
+        });
     });
 }
+
 function checkLazy(leaf) {
-    if (leaf.__.__needComputePaint)
-        leaf.__.__computePaint();
-    if (leaf.isBranch)
-        leaf.children.forEach(child => checkLazy(child));
+    if (leaf.__.__needComputePaint) leaf.__.__computePaint();
+    if (leaf.isBranch) leaf.children.forEach(child => checkLazy(child));
 }
 
 const canvas = draw.LeaferCanvasBase.prototype;
-const debug = draw.Debug.get('@leafer-in/export');
-canvas.export = function (filename, options) {
-    const { quality, blob } = draw.FileHelper.getExportOptions(options);
-    if (filename.includes('.'))
-        return this.saveAs(filename, quality);
-    else if (blob)
-        return this.toBlob(filename, quality);
-    else
-        return this.toDataURL(filename, quality);
+
+const debug = draw.Debug.get("@leafer-in/export");
+
+canvas.export = function(filename, options) {
+    const {quality: quality, blob: blob} = draw.FileHelper.getExportOptions(options);
+    if (filename.includes(".")) return this.saveAs(filename, quality); else if (blob) return this.toBlob(filename, quality); else return this.toDataURL(filename, quality);
 };
-canvas.toBlob = function (type, quality) {
-    return new Promise((resolve) => {
-        draw.Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+
+canvas.toBlob = function(type, quality) {
+    return new Promise(resolve => {
+        draw.Platform.origin.canvasToBolb(this.view, type, quality).then(blob => {
             resolve(blob);
-        }).catch((e) => {
+        }).catch(e => {
             debug.error(e);
             resolve(null);
         });
     });
 };
-canvas.toDataURL = function (type, quality) {
+
+canvas.toDataURL = function(type, quality) {
     return draw.Platform.origin.canvasToDataURL(this.view, type, quality);
 };
-canvas.saveAs = function (filename, quality) {
-    return new Promise((resolve) => {
+
+canvas.saveAs = function(filename, quality) {
+    return new Promise(resolve => {
         draw.Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
             resolve(true);
-        }).catch((e) => {
+        }).catch(e => {
             debug.error(e);
             resolve(false);
         });
     });
 };
 
-draw.Plugin.add('export');
+draw.Plugin.add("export");
+
 Object.assign(draw.Export, ExportModule);
-draw.UI.prototype.export = function (filename, options) {
+
+draw.UI.prototype.export = function(filename, options) {
     return draw.Export.export(this, filename, options);
 };
-draw.UI.prototype.syncExport = function (filename, options) {
+
+draw.UI.prototype.syncExport = function(filename, options) {
     return draw.Export.syncExport(this, filename, options);
 };
 
 Object.assign(core.Creator, {
-    interaction: (target, canvas, selector, options) => { return new core$1.InteractionBase(target, canvas, selector, options); },
+    interaction: (target, canvas, selector, options) => new core$1.InteractionBase(target, canvas, selector, options),
     hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
-    hitCanvasManager: () => new core$1.HitCanvasManager()
+    hitCanvasManager: () => new core$1.HitCanvasManager
 });
 
 Object.defineProperty(exports, "LeaferImage", {
     enumerable: true,
-    get: function () { return core.LeaferImage; }
+    get: function() {
+        return core.LeaferImage;
+    }
 });
+
 exports.Layouter = Layouter;
+
 exports.LeaferCanvas = LeaferCanvas;
+
 exports.Picker = Picker;
+
 exports.Renderer = Renderer;
+
 exports.Selector = Selector;
+
 exports.Watcher = Watcher;
+
 exports.useCanvas = useCanvas;
-Object.keys(core).forEach(function (k) {
-    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+
+Object.keys(core).forEach(function(k) {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,
-        get: function () { return core[k]; }
+        get: function() {
+            return core[k];
+        }
     });
 });
-Object.keys(core$1).forEach(function (k) {
-    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+
+Object.keys(core$1).forEach(function(k) {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,
-        get: function () { return core$1[k]; }
+        get: function() {
+            return core$1[k];
+        }
     });
 });