leafer-ui 1.8.0 → 1.9.1

package/dist/web.esm.js

@@ -1,69 +1,80 @@
-import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, Plugin, MathHelper, getMatrixData, MatrixHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
-export * from '@leafer/core';
-export { LeaferImage } from '@leafer/core';
-import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from '@leafer-ui/core';
-export * from '@leafer-ui/core';
-import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from '@leafer-ui/draw';
-
-const debug$2 = Debug.get('LeaferCanvas');
+import { Debug, LeaferCanvasBase, Platform, isString, DataHelper, canvasSizeAttrs, isUndefined, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, Plugin, MathHelper, isObject, Matrix, getMatrixData, MatrixHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4, isNumber } from "@leafer/core";
+
+export * from "@leafer/core";
+
+export { LeaferImage } from "@leafer/core";
+
+import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from "@leafer-ui/core";
+
+export * from "@leafer-ui/core";
+
+import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from "@leafer-ui/draw";
+
+const debug$2 = Debug.get("LeaferCanvas");
+
 class LeaferCanvas extends LeaferCanvasBase {
     set zIndex(zIndex) {
-        const { style } = this.view;
+        const {style: style} = this.view;
         style.zIndex = zIndex;
         this.setAbsolute(this.view);
     }
     set childIndex(index) {
-        const { view, parentView } = this;
+        const {view: view, parentView: parentView} = this;
         if (view && parentView) {
             const beforeNode = parentView.children[index];
             if (beforeNode) {
                 this.setAbsolute(beforeNode);
                 parentView.insertBefore(view, beforeNode);
-            }
-            else {
+            } else {
                 parentView.appendChild(beforeNode);
             }
         }
     }
     init() {
-        const { config } = this;
+        const {config: config} = this;
         const view = config.view || config.canvas;
         view ? this.__createViewFrom(view) : this.__createView();
-        const { style } = this.view;
-        style.display || (style.display = 'block');
+        const {style: style} = this.view;
+        style.display || (style.display = "block");
         this.parentView = this.view.parentElement;
         if (this.parentView) {
             const pStyle = this.parentView.style;
-            pStyle.webkitUserSelect = pStyle.userSelect = 'none';
+            pStyle.webkitUserSelect = pStyle.userSelect = "none";
         }
         if (Platform.syncDomFont && !this.parentView) {
-            style.display = 'none';
+            style.display = "none";
             document.body.appendChild(this.view);
         }
         this.__createContext();
-        if (!this.autoLayout)
-            this.resize(config);
+        if (!this.autoLayout) this.resize(config);
+    }
+    set backgroundColor(color) {
+        this.view.style.backgroundColor = color;
+    }
+    get backgroundColor() {
+        return this.view.style.backgroundColor;
+    }
+    set hittable(hittable) {
+        this.view.style.pointerEvents = hittable ? "auto" : "none";
+    }
+    get hittable() {
+        return this.view.style.pointerEvents !== "none";
     }
-    set backgroundColor(color) { this.view.style.backgroundColor = color; }
-    get backgroundColor() { return this.view.style.backgroundColor; }
-    set hittable(hittable) { this.view.style.pointerEvents = hittable ? 'auto' : 'none'; }
-    get hittable() { return this.view.style.pointerEvents !== 'none'; }
     __createView() {
-        this.view = document.createElement('canvas');
+        this.view = document.createElement("canvas");
     }
     __createViewFrom(inputView) {
-        let find = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView;
+        let find = isString(inputView) ? document.getElementById(inputView) : inputView;
         if (find) {
             if (find instanceof HTMLCanvasElement) {
                 this.view = find;
-            }
-            else {
+            } else {
                 let parent = find;
                 if (find === window || find === document) {
-                    const div = document.createElement('div');
-                    const { style } = div;
-                    style.position = 'absolute';
-                    style.top = style.bottom = style.left = style.right = '0px';
+                    const div = document.createElement("div");
+                    const {style: style} = div;
+                    style.position = "absolute";
+                    style.top = style.bottom = style.left = style.right = "0px";
                     document.body.appendChild(div);
                     parent = div;
                 }
@@ -71,103 +82,101 @@ class LeaferCanvas extends LeaferCanvasBase {
                 const view = this.view;
                 if (parent.hasChildNodes()) {
                     this.setAbsolute(view);
-                    parent.style.position || (parent.style.position = 'relative');
+                    parent.style.position || (parent.style.position = "relative");
                 }
                 parent.appendChild(view);
             }
-        }
-        else {
+        } else {
             debug$2.error(`no id: ${inputView}`);
             this.__createView();
         }
     }
     setAbsolute(view) {
-        const { style } = view;
-        style.position = 'absolute';
-        style.top = style.left = '0px';
+        const {style: style} = view;
+        style.position = "absolute";
+        style.top = style.left = "0px";
     }
     updateViewSize() {
-        const { width, height, pixelRatio } = this;
-        const { style } = this.view;
-        style.width = width + 'px';
-        style.height = height + 'px';
+        const {width: width, height: height, pixelRatio: pixelRatio} = this;
+        const {style: style} = this.view;
+        style.width = width + "px";
+        style.height = height + "px";
         this.view.width = Math.ceil(width * pixelRatio);
         this.view.height = Math.ceil(height * pixelRatio);
     }
     updateClientBounds() {
-        if (this.view.parentElement)
-            this.clientBounds = this.view.getBoundingClientRect();
+        if (this.view.parentElement) this.clientBounds = this.view.getBoundingClientRect();
     }
     startAutoLayout(autoBounds, listener) {
         this.resizeListener = listener;
         if (autoBounds) {
             this.autoBounds = autoBounds;
             try {
-                this.resizeObserver = new ResizeObserver((entries) => {
+                this.resizeObserver = new ResizeObserver(entries => {
                     this.updateClientBounds();
-                    for (const entry of entries)
-                        this.checkAutoBounds(entry.contentRect);
+                    for (const entry of entries) this.checkAutoBounds(entry.contentRect);
                 });
                 const parent = this.parentView;
                 if (parent) {
                     this.resizeObserver.observe(parent);
                     this.checkAutoBounds(parent.getBoundingClientRect());
-                }
-                else {
+                } else {
                     this.checkAutoBounds(this.view);
-                    debug$2.warn('no parent');
+                    debug$2.warn("no parent");
                 }
-            }
-            catch (_a) {
+            } catch (_a) {
                 this.imitateResizeObserver();
             }
-        }
-        else {
-            window.addEventListener('resize', this.windowListener = () => {
+        } else {
+            window.addEventListener("resize", this.windowListener = () => {
                 const pixelRatio = Platform.devicePixelRatio;
                 if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
-                    const { width, height } = this;
-                    this.emitResize({ width, height, pixelRatio });
+                    const {width: width, height: height} = this;
+                    this.emitResize({
+                        width: width,
+                        height: height,
+                        pixelRatio: pixelRatio
+                    });
                 }
             });
         }
     }
     imitateResizeObserver() {
         if (this.autoLayout) {
-            if (this.parentView)
-                this.checkAutoBounds(this.parentView.getBoundingClientRect());
+            if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect());
             Platform.requestRender(this.imitateResizeObserver.bind(this));
         }
     }
     checkAutoBounds(parentSize) {
         const view = this.view;
-        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize);
-        const size = { width, height, pixelRatio: this.config.pixelRatio ? this.pixelRatio : Platform.devicePixelRatio };
+        const {x: x, y: y, width: width, height: height} = this.autoBounds.getBoundsFrom(parentSize);
+        const size = {
+            width: width,
+            height: height,
+            pixelRatio: this.config.pixelRatio ? this.pixelRatio : Platform.devicePixelRatio
+        };
         if (!this.isSameSize(size)) {
-            const { style } = view;
-            style.marginLeft = x + 'px';
-            style.marginTop = y + 'px';
+            const {style: style} = view;
+            style.marginLeft = x + "px";
+            style.marginTop = y + "px";
             this.emitResize(size);
         }
     }
     stopAutoLayout() {
         this.autoLayout = false;
-        if (this.resizeObserver)
-            this.resizeObserver.disconnect();
+        if (this.resizeObserver) this.resizeObserver.disconnect();
         this.resizeListener = this.resizeObserver = null;
     }
     emitResize(size) {
         const oldSize = {};
         DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
         this.resize(size);
-        if (this.resizeListener && this.width !== undefined)
-            this.resizeListener(new ResizeEvent(size, oldSize));
+        if (this.resizeListener && !isUndefined(this.width)) this.resizeListener(new ResizeEvent(size, oldSize));
     }
     unrealCanvas() {
         if (!this.unreal && this.parentView) {
             const view = this.view;
-            if (view)
-                view.remove();
+            if (view) view.remove();
             this.view = this.parentView;
             this.unreal = true;
         }
@@ -176,13 +185,12 @@ class LeaferCanvas extends LeaferCanvasBase {
         if (this.view) {
             this.stopAutoLayout();
             if (this.windowListener) {
-                window.removeEventListener('resize', this.windowListener);
+                window.removeEventListener("resize", this.windowListener);
                 this.windowListener = null;
             }
             if (!this.unreal) {
                 const view = this.view;
-                if (view.parentElement)
-                    view.remove();
+                if (view.parentElement) view.remove();
             }
             super.destroy();
         }
@@ -190,33 +198,36 @@ class LeaferCanvas extends LeaferCanvasBase {
 }
 
 canvasPatch(CanvasRenderingContext2D.prototype);
+
 canvasPatch(Path2D.prototype);
 
-const { mineType, fileType } = FileHelper;
+const {mineType: mineType, fileType: fileType} = FileHelper;
+
 Object.assign(Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
-    image: (options) => new LeaferImage(options)
+    image: options => new LeaferImage(options)
 });
+
 function useCanvas(_canvasType, _power) {
     Platform.origin = {
         createCanvas(width, height) {
-            const canvas = document.createElement('canvas');
+            const canvas = document.createElement("canvas");
             canvas.width = width;
             canvas.height = height;
             return canvas;
         },
         canvasToDataURL: (canvas, type, quality) => {
             const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
-            return imageType === 'image/bmp' ? url.replace('image/png;', 'image/bmp;') : url;
+            return imageType === "image/bmp" ? url.replace("image/png;", "image/bmp;") : url;
         },
-        canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, mineType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
             const url = canvas.toDataURL(mineType(fileType(filename)), quality);
             return Platform.origin.download(url, filename);
         },
         download(url, filename) {
-            return new Promise((resolve) => {
-                let el = document.createElement('a');
+            return new Promise(resolve => {
+                let el = document.createElement("a");
                 el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
@@ -227,78 +238,98 @@ function useCanvas(_canvasType, _power) {
         },
         loadImage(src) {
             return new Promise((resolve, reject) => {
-                const img = new Platform.origin.Image();
-                const { crossOrigin } = Platform.image;
+                const img = new Platform.origin.Image;
+                const {crossOrigin: crossOrigin} = Platform.image;
                 if (crossOrigin) {
-                    img.setAttribute('crossOrigin', crossOrigin);
+                    img.setAttribute("crossOrigin", crossOrigin);
                     img.crossOrigin = crossOrigin;
                 }
-                img.onload = () => { resolve(img); };
-                img.onerror = (e) => { reject(e); };
+                img.onload = () => {
+                    resolve(img);
+                };
+                img.onerror = e => {
+                    reject(e);
+                };
                 img.src = Platform.image.getRealURL(src);
             });
         },
-        Image,
-        PointerEvent,
-        DragEvent
+        Image: Image,
+        PointerEvent: PointerEvent,
+        DragEvent: DragEvent
     };
     Platform.event = {
-        stopDefault(origin) { origin.preventDefault(); },
-        stopNow(origin) { origin.stopImmediatePropagation(); },
-        stop(origin) { origin.stopPropagation(); }
+        stopDefault(origin) {
+            origin.preventDefault();
+        },
+        stopNow(origin) {
+            origin.stopImmediatePropagation();
+        },
+        stop(origin) {
+            origin.stopPropagation();
+        }
     };
     Platform.canvas = Creator.canvas();
     Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
 }
-Platform.name = 'web';
-Platform.isMobile = 'ontouchstart' in window;
-Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-defineKey(Platform, 'devicePixelRatio', { get() { return devicePixelRatio; } });
-const { userAgent } = navigator;
+
+Platform.name = "web";
+
+Platform.isMobile = "ontouchstart" in window;
+
+Platform.requestRender = function(render) {
+    window.requestAnimationFrame(render);
+};
+
+defineKey(Platform, "devicePixelRatio", {
+    get() {
+        return devicePixelRatio;
+    }
+});
+
+const {userAgent: userAgent} = navigator;
+
 if (userAgent.indexOf("Firefox") > -1) {
     Platform.conicGradientRotate90 = true;
     Platform.intWheelDeltaY = true;
     Platform.syncDomFont = true;
-}
-else if (userAgent.indexOf("AppleWebKit") > -1) {
+} else if (/iPhone|iPad|iPod/.test(navigator.userAgent) || /Macintosh/.test(navigator.userAgent) && /Version\/[\d.]+.*Safari/.test(navigator.userAgent)) {
     Platform.fullImageShadow = true;
 }
-if (userAgent.indexOf('Windows') > -1) {
-    Platform.os = 'Windows';
+
+if (userAgent.indexOf("Windows") > -1) {
+    Platform.os = "Windows";
     Platform.intWheelDeltaY = true;
-}
-else if (userAgent.indexOf('Mac') > -1) {
-    Platform.os = 'Mac';
-}
-else if (userAgent.indexOf('Linux') > -1) {
-    Platform.os = 'Linux';
+} else if (userAgent.indexOf("Mac") > -1) {
+    Platform.os = "Mac";
+} else if (userAgent.indexOf("Linux") > -1) {
+    Platform.os = "Linux";
 }
 
 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 LeafList();
-            this.__updatedList.list.forEach(item => { if (item.leafer)
-                updatedList.add(item); });
+            const updatedList = new 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 LeafList();
+        this.__updatedList = new LeafList;
         this.target = target;
-        if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
-        if (this.disabled)
-            return;
+        if (this.disabled) return;
         this.running = true;
     }
     stop() {
@@ -311,8 +342,7 @@ class Watcher {
     }
     update() {
         this.changed = true;
-        if (this.running)
-            this.target.emit(RenderEvent.REQUEST);
+        if (this.running) this.target.emit(RenderEvent.REQUEST);
     }
     __onAttrChange(event) {
         this.__updatedList.add(event.target);
@@ -322,8 +352,7 @@ class Watcher {
         if (event.type === ChildEvent.ADD) {
             this.hasAdd = true;
             this.__pushChild(event.child);
-        }
-        else {
+        } else {
             this.hasRemove = true;
             this.__updatedList.add(event.parent);
         }
@@ -331,28 +360,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 WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }));
-        this.__updatedList = new LeafList();
+        this.target.emitEvent(new WatchEvent(WatchEvent.DATA, {
+            updatedList: this.updatedList
+        }));
+        this.__updatedList = new LeafList;
         this.totalTimes++;
         this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false;
     }
     __listenEvents() {
-        this.__eventIds = [
-            this.target.on_([
-                [PropertyEvent.CHANGE, this.__onAttrChange, this],
-                [[ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this],
-                [WatchEvent.REQUEST, this.__onRquestData, this]
-            ])
-        ];
+        this.__eventIds = [ this.target.on_([ [ PropertyEvent.CHANGE, this.__onAttrChange, this ], [ [ ChildEvent.ADD, ChildEvent.REMOVE ], this.__onChildEvent, this ], [ WatchEvent.REQUEST, this.__onRquestData, this ] ]) ];
     }
     __removeListenEvents() {
         this.target.off_(this.__eventIds);
@@ -366,8 +389,10 @@ class Watcher {
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
-const { pushAllChildBranch, pushAllParent } = BranchHelper;
+const {updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange} = LeafHelper;
+
+const {pushAllChildBranch: pushAllChildBranch, pushAllParent: pushAllParent} = BranchHelper;
+
 function updateMatrix(updateList, levelList) {
     let layout;
     updateList.list.forEach(leaf => {
@@ -376,19 +401,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);
@@ -408,18 +431,19 @@ function updateBounds(boundsList) {
         }
     });
 }
+
 function updateChange(updateList) {
     updateList.list.forEach(updateOneChange);
 }
 
-const { worldBounds } = LeafBoundsHelper;
+const {worldBounds: worldBounds} = LeafBoundsHelper;
+
 class LayoutBlockData {
     constructor(list) {
-        this.updatedBounds = new Bounds();
-        this.beforeBounds = new Bounds();
-        this.afterBounds = new Bounds();
-        if (list instanceof Array)
-            list = new LeafList(list);
+        this.updatedBounds = new Bounds;
+        this.beforeBounds = new Bounds;
+        this.afterBounds = new Bounds;
+        if (isArray(list)) list = new LeafList(list);
         this.updatedList = list;
     }
     setBefore() {
@@ -427,7 +451,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);
@@ -440,21 +464,21 @@ class LayoutBlockData {
     }
 }
 
-const { updateAllMatrix, updateAllChange } = LeafHelper;
-const debug$1 = Debug.get('Layouter');
+const {updateAllMatrix: updateAllMatrix, updateAllChange: updateAllChange} = LeafHelper;
+
+const debug$1 = Debug.get("Layouter");
+
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
         this.config = {};
-        this.__levelList = new LeafLevelList();
+        this.__levelList = new LeafLevelList;
         this.target = target;
-        if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
-        if (this.disabled)
-            return;
+        if (this.disabled) return;
         this.running = true;
     }
     stop() {
@@ -466,16 +490,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(LayoutEvent.START);
             this.layoutOnce();
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
-        }
-        catch (e) {
+        } catch (e) {
             debug$1.error(e);
         }
         this.layoutedBlocks = null;
@@ -483,24 +505,20 @@ class Layouter {
     layoutAgain() {
         if (this.layouting) {
             this.waitAgain = true;
-        }
-        else {
+        } else {
             this.layoutOnce();
         }
     }
     layoutOnce() {
-        if (this.layouting)
-            return debug$1.warn('layouting');
-        if (this.times > 3)
-            return debug$1.warn('layout max times');
+        if (this.layouting) return debug$1.warn("layouting");
+        if (this.times > 3) return debug$1.warn("layout max times");
         this.times++;
         this.totalTimes++;
         this.layouting = true;
         this.target.emit(WatchEvent.REQUEST);
         if (this.totalTimes > 1) {
             this.partLayout();
-        }
-        else {
+        } else {
             this.fullLayout();
         }
         this.layouting = false;
@@ -511,11 +529,10 @@ class Layouter {
     }
     partLayout() {
         var _a;
-        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        const t = Run.start('PartLayout');
-        const { target, __updatedList: updateList } = this;
-        const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
+        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length)) return;
+        const t = Run.start("PartLayout");
+        const {target: target, __updatedList: updateList} = this;
+        const {BEFORE: BEFORE, LAYOUT: LAYOUT, AFTER: AFTER} = LayoutEvent;
         const blocks = this.getBlocks(updateList);
         blocks.forEach(item => item.setBefore());
         target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
@@ -524,8 +541,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 LayoutEvent(LAYOUT, blocks, this.times));
         target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
@@ -535,13 +551,15 @@ class Layouter {
         Run.end(t);
     }
     fullLayout() {
-        const t = Run.start('FullLayout');
-        const { target } = this;
-        const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
+        const t = Run.start("FullLayout");
+        const {target: target} = this;
+        const {BEFORE: BEFORE, LAYOUT: LAYOUT, AFTER: AFTER} = LayoutEvent;
         const blocks = this.getBlocks(new LeafList(target));
         target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
         Layouter.fullLayout(target);
-        blocks.forEach(item => { item.setAfter(); });
+        blocks.forEach(item => {
+            item.setAfter();
+        });
         target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
         target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
         this.addBlocks(blocks);
@@ -549,15 +567,12 @@ class Layouter {
     }
     static fullLayout(target) {
         updateAllMatrix(target, true);
-        if (target.isBranch)
-            BranchHelper.updateBounds(target);
-        else
-            LeafHelper.updateBounds(target);
+        if (target.isBranch) BranchHelper.updateBounds(target); else 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);
         }
@@ -566,7 +581,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;
@@ -575,13 +590,7 @@ class Layouter {
         this.__updatedList = event.data.updatedList;
     }
     __listenEvents() {
-        this.__eventIds = [
-            this.target.on_([
-                [LayoutEvent.REQUEST, this.layout, this],
-                [LayoutEvent.AGAIN, this.layoutAgain, this],
-                [WatchEvent.DATA, this.__onReceiveWatchData, this]
-            ])
-        ];
+        this.__eventIds = [ this.target.on_([ [ LayoutEvent.REQUEST, this.layout, this ], [ LayoutEvent.AGAIN, this.layoutAgain, this ], [ WatchEvent.DATA, this.__onReceiveWatchData, this ] ]) ];
     }
     __removeListenEvents() {
         this.target.off_(this.__eventIds);
@@ -595,9 +604,12 @@ class Layouter {
     }
 }
 
-const debug = Debug.get('Renderer');
+const debug = 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;
@@ -608,8 +620,7 @@ class Renderer {
         };
         this.target = target;
         this.canvas = canvas;
-        if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
@@ -620,8 +631,7 @@ class Renderer {
         this.running = false;
     }
     update(change = true) {
-        if (!this.changed)
-            this.changed = change;
+        if (!this.changed) this.changed = change;
         this.__requestRender();
     }
     requestLayout() {
@@ -629,7 +639,7 @@ class Renderer {
     }
     checkRender() {
         if (this.running) {
-            const { target } = this;
+            const {target: target} = this;
             if (target.isApp) {
                 target.emit(RenderEvent.CHILD_START, target);
                 target.children.forEach(leafer => {
@@ -638,54 +648,47 @@ class Renderer {
                 });
                 target.emit(RenderEvent.CHILD_END, target);
             }
-            if (this.changed && this.canvas.view)
-                this.render();
+            if (this.changed && this.canvas.view) this.render();
             this.target.emit(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 Bounds();
-        debug.log(target.innerName, '--->');
+        this.totalBounds = new Bounds;
+        debug.log(target.innerName, "---\x3e");
         try {
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(RenderEvent.END, this.totalBounds);
             ImageManager.clearRecycled();
-        }
-        catch (e) {
+        } catch (e) {
             this.rendering = false;
             debug.error(e);
         }
-        debug.log('-------------|');
+        debug.log("-------------|");
     }
     renderAgain() {
         if (this.rendering) {
             this.waitAgain = true;
-        }
-        else {
+        } else {
             this.renderOnce();
         }
     }
     renderOnce(callback) {
-        if (this.rendering)
-            return debug.warn('rendering');
-        if (this.times > 3)
-            return debug.warn('render max times');
+        if (this.rendering) return debug.warn("rendering");
+        if (this.times > 3) return debug.warn("render max times");
         this.times++;
         this.totalTimes++;
         this.rendering = true;
         this.changed = false;
-        this.renderBounds = new Bounds();
+        this.renderBounds = new Bounds;
         this.renderOptions = {};
         if (callback) {
             this.emitRender(RenderEvent.BEFORE);
             callback();
-        }
-        else {
+        } else {
             this.requestLayout();
             if (this.ignore) {
                 this.ignore = this.rendering = false;
@@ -694,8 +697,7 @@ class Renderer {
             this.emitRender(RenderEvent.BEFORE);
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender();
-            }
-            else {
+            } else {
                 this.fullRender();
             }
         }
@@ -709,16 +711,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 = Run.start('PartRender');
-        const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
+        const t = Run.start("PartRender");
+        const {canvas: canvas} = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
         canvas.save();
         bounds.spread(Renderer.clipSpread).ceil();
         canvas.clearWorld(bounds, true);
@@ -728,8 +730,8 @@ class Renderer {
         Run.end(t);
     }
     fullRender() {
-        const t = Run.start('FullRender');
-        const { canvas } = this;
+        const t = Run.start("FullRender");
+        const {canvas: canvas} = this;
         canvas.save();
         canvas.clear();
         this.__render(canvas.bounds);
@@ -737,11 +739,14 @@ class Renderer {
         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 (Debug.showRepaint)
-            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 (Debug.showRepaint) Debug.drawRepaint(canvas, bounds);
         this.target.__render(canvas, options);
         this.renderBounds = realBounds = realBounds || bounds;
         this.renderOptions = options;
@@ -749,14 +754,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 Bounds();
+            const bounds = new Bounds;
             bounds.setList(list);
             list.length = 0;
             list.push(bounds);
@@ -764,26 +768,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();
         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 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;
             }
         }
@@ -791,34 +792,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.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.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 RenderEvent(type, this.times, bounds, options));
     }
     __listenEvents() {
-        this.__eventIds = [
-            this.target.on_([
-                [RenderEvent.REQUEST, this.update, this],
-                [LayoutEvent.END, this.__onLayoutEnd, this],
-                [RenderEvent.AGAIN, this.renderAgain, this],
-                [ResizeEvent.RESIZE, this.__onResize, this]
-            ])
-        ];
+        this.__eventIds = [ this.target.on_([ [ RenderEvent.REQUEST, this.update, this ], [ LayoutEvent.END, this.__onLayoutEnd, this ], [ RenderEvent.AGAIN, this.renderAgain, this ], [ ResizeEvent.RESIZE, this.__onResize, this ] ]) ];
     }
     __removeListenEvents() {
         this.target.off_(this.__eventIds);
@@ -831,82 +822,104 @@ class Renderer {
         }
     }
 }
+
 Renderer.clipSpread = 10;
 
-const { hitRadiusPoint } = BoundsHelper;
+const {hitRadiusPoint: hitRadiusPoint} = 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 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 LeafList;
         if (list.length) {
             let find;
-            this.findList = new 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 || 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 && 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 => LeafHelper.worldHittable(item));
     }
     getPath(leaf) {
-        const path = new LeafList();
+        const path = new 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 LeafList();
+        let item, hittablePath = new 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 LeafList();
+        const throughPath = new LeafList;
         const pathList = [];
         for (let i = list.length - 1; i > -1; i--) {
             pathList.push(this.getPath(list[i]));
@@ -916,8 +929,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);
             }
         }
@@ -928,32 +940,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);
         }
     }
@@ -970,24 +987,24 @@ class Picker {
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
-        if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config);
         this.picker = new Picker(this.target = target, this);
         this.finder = Creator.finder && Creator.finder();
     }
     getByPoint(hitPoint, hitRadius, options) {
-        const { target, picker } = this;
-        if (Platform.backgrounder)
-            target && target.updateLayout();
+        const {target: target, picker: picker} = this;
+        if (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) : Plugin.need('find');
+        return this.finder ? this.finder.getBy(condition, branch, one, options) : Plugin.need("find");
     }
     destroy() {
         this.picker.destroy();
-        if (this.finder)
-            this.finder.destroy();
+        if (this.finder) this.finder.destroy();
     }
 }
 
@@ -997,13 +1014,21 @@ Object.assign(Creator, {
     renderer: (target, canvas, options) => new Renderer(target, canvas, options),
     selector: (target, options) => new Selector(target, options)
 });
+
 Platform.layout = Layouter.fullLayout;
 
 const PointerEventHelper = {
     convert(e, local) {
         const base = InteractionHelper.getBase(e);
-        const data = Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: e.width, height: e.height, pointerType: e.pointerType, pressure: e.pressure });
-        if (data.pointerType === 'pen') {
+        const data = Object.assign(Object.assign({}, base), {
+            x: local.x,
+            y: local.y,
+            width: e.width,
+            height: e.height,
+            pointerType: e.pointerType,
+            pressure: e.pressure
+        });
+        if (data.pointerType === "pen") {
             data.tangentialPressure = e.tangentialPressure;
             data.tiltX = e.tiltX;
             data.tiltY = e.tiltY;
@@ -1013,12 +1038,27 @@ const PointerEventHelper = {
     },
     convertMouse(e, local) {
         const base = InteractionHelper.getBase(e);
-        return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'mouse', pressure: 0.5 });
+        return Object.assign(Object.assign({}, base), {
+            x: local.x,
+            y: local.y,
+            width: 1,
+            height: 1,
+            pointerType: "mouse",
+            pressure: .5
+        });
     },
     convertTouch(e, local) {
         const touch = PointerEventHelper.getTouch(e);
         const base = InteractionHelper.getBase(e);
-        return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'touch', multiTouch: e.touches.length > 1, pressure: touch.force });
+        return Object.assign(Object.assign({}, base), {
+            x: local.x,
+            y: local.y,
+            width: 1,
+            height: 1,
+            pointerType: "touch",
+            multiTouch: e.touches.length > 1,
+            pressure: touch.force
+        });
     },
     getTouch(e) {
         return e.targetTouches[0] || e.changedTouches[0];
@@ -1028,44 +1068,56 @@ const PointerEventHelper = {
 const KeyEventHelper = {
     convert(e) {
         const base = InteractionHelper.getBase(e);
-        const data = Object.assign(Object.assign({}, base), { code: e.code, key: e.key });
+        const data = Object.assign(Object.assign({}, base), {
+            code: e.code,
+            key: e.key
+        });
         return data;
     }
 };
 
-const { pathCanDrag } = InteractionHelper;
+const {pathCanDrag: pathCanDrag} = InteractionHelper;
+
 class Interaction extends InteractionBase {
-    get notPointer() { const { p } = this; return p.type !== 'pointer' || p.touch || this.useMultiTouch; }
-    get notTouch() { const { p } = this; return p.type === 'mouse' || this.usePointer; }
-    get notMouse() { return this.usePointer || this.useTouch; }
+    get notPointer() {
+        const {p: p} = this;
+        return p.type !== "pointer" || p.touch || this.useMultiTouch;
+    }
+    get notTouch() {
+        const {p: p} = this;
+        return p.type === "mouse" || this.usePointer;
+    }
+    get notMouse() {
+        return this.usePointer || this.useTouch;
+    }
     __listenEvents() {
         super.__listenEvents();
         const view = this.view = this.canvas.view;
         this.viewEvents = {
-            'pointerdown': this.onPointerDown,
-            'mousedown': this.onMouseDown,
-            'touchstart': this.onTouchStart,
-            'pointerleave': this.onPointerLeave,
-            'contextmenu': this.onContextMenu,
-            'wheel': this.onWheel,
-            'gesturestart': this.onGesturestart,
-            'gesturechange': this.onGesturechange,
-            'gestureend': this.onGestureend
+            pointerdown: this.onPointerDown,
+            mousedown: this.onMouseDown,
+            touchstart: this.onTouchStart,
+            pointerleave: this.onPointerLeave,
+            contextmenu: this.onContextMenu,
+            wheel: this.onWheel,
+            gesturestart: this.onGesturestart,
+            gesturechange: this.onGesturechange,
+            gestureend: this.onGestureend
         };
         this.windowEvents = {
-            'pointermove': this.onPointerMove,
-            'pointerup': this.onPointerUp,
-            'pointercancel': this.onPointerCancel,
-            'mousemove': this.onMouseMove,
-            'mouseup': this.onMouseUp,
-            'touchmove': this.onTouchMove,
-            'touchend': this.onTouchEnd,
-            'touchcancel': this.onTouchCancel,
-            'keydown': this.onKeyDown,
-            'keyup': this.onKeyUp,
-            'scroll': this.onScroll
+            pointermove: this.onPointerMove,
+            pointerup: this.onPointerUp,
+            pointercancel: this.onPointerCancel,
+            mousemove: this.onMouseMove,
+            mouseup: this.onMouseUp,
+            touchmove: this.onTouchMove,
+            touchend: this.onTouchEnd,
+            touchcancel: this.onTouchCancel,
+            keydown: this.onKeyDown,
+            keyup: this.onKeyUp,
+            scroll: this.onScroll
         };
-        const { viewEvents, windowEvents } = this;
+        const {viewEvents: viewEvents, windowEvents: windowEvents} = this;
         for (let name in viewEvents) {
             viewEvents[name] = viewEvents[name].bind(this);
             view.addEventListener(name, viewEvents[name]);
@@ -1077,7 +1129,7 @@ class Interaction extends InteractionBase {
     }
     __removeListenEvents() {
         super.__removeListenEvents();
-        const { viewEvents, windowEvents } = this;
+        const {viewEvents: viewEvents, windowEvents: windowEvents} = this;
         for (let name in viewEvents) {
             this.view.removeEventListener(name, viewEvents[name]);
             this.viewEvents = {};
@@ -1095,14 +1147,12 @@ class Interaction extends InteractionBase {
         return list;
     }
     preventDefaultPointer(e) {
-        const { pointer } = this.config;
-        if (pointer.preventDefault)
-            e.preventDefault();
+        const {pointer: pointer} = this.config;
+        if (pointer.preventDefault) e.preventDefault();
     }
     preventDefaultWheel(e) {
-        const { wheel } = this.config;
-        if (wheel.preventDefault)
-            e.preventDefault();
+        const {wheel: wheel} = this.config;
+        if (wheel.preventDefault) e.preventDefault();
     }
     preventWindowPointer(e) {
         return !this.downData && e.target !== this.view;
@@ -1114,8 +1164,7 @@ class Interaction extends InteractionBase {
         this.keyUp(KeyEventHelper.convert(e));
     }
     onContextMenu(e) {
-        if (this.config.pointer.preventDefaultMenu)
-            e.preventDefault();
+        if (this.config.pointer.preventDefaultMenu) e.preventDefault();
         this.menu(PointerEventHelper.convert(e, this.getLocal(e)));
     }
     onScroll() {
@@ -1123,14 +1172,12 @@ class Interaction extends InteractionBase {
     }
     onPointerDown(e) {
         this.preventDefaultPointer(e);
-        if (this.notPointer)
-            return;
+        if (this.notPointer) return;
         this.usePointer || (this.usePointer = true);
         this.pointerDown(PointerEventHelper.convert(e, this.getLocal(e)));
     }
     onPointerMove(e, isLeave) {
-        if (this.notPointer || this.preventWindowPointer(e))
-            return;
+        if (this.notPointer || this.preventWindowPointer(e)) return;
         this.usePointer || (this.usePointer = true);
         const data = PointerEventHelper.convert(e, this.getLocal(e, true));
         isLeave ? this.pointerHover(data) : this.pointerMove(data);
@@ -1139,49 +1186,39 @@ class Interaction extends InteractionBase {
         this.onPointerMove(e, true);
     }
     onPointerUp(e) {
-        if (this.downData)
-            this.preventDefaultPointer(e);
-        if (this.notPointer || this.preventWindowPointer(e))
-            return;
+        if (this.downData) this.preventDefaultPointer(e);
+        if (this.notPointer || this.preventWindowPointer(e)) return;
         this.pointerUp(PointerEventHelper.convert(e, this.getLocal(e)));
     }
     onPointerCancel() {
-        if (this.useMultiTouch)
-            return;
+        if (this.useMultiTouch) return;
         this.pointerCancel();
     }
     onMouseDown(e) {
         this.preventDefaultPointer(e);
-        if (this.notMouse)
-            return;
+        if (this.notMouse) return;
         this.pointerDown(PointerEventHelper.convertMouse(e, this.getLocal(e)));
     }
     onMouseMove(e) {
-        if (this.notMouse || this.preventWindowPointer(e))
-            return;
+        if (this.notMouse || this.preventWindowPointer(e)) return;
         this.pointerMove(PointerEventHelper.convertMouse(e, this.getLocal(e, true)));
     }
     onMouseUp(e) {
-        if (this.downData)
-            this.preventDefaultPointer(e);
-        if (this.notMouse || this.preventWindowPointer(e))
-            return;
+        if (this.downData) this.preventDefaultPointer(e);
+        if (this.notMouse || this.preventWindowPointer(e)) return;
         this.pointerUp(PointerEventHelper.convertMouse(e, this.getLocal(e)));
     }
     onMouseCancel() {
-        if (this.notMouse)
-            return;
+        if (this.notMouse) return;
         this.pointerCancel();
     }
     onTouchStart(e) {
         const touch = PointerEventHelper.getTouch(e);
         const local = this.getLocal(touch, true);
-        const { preventDefault } = this.config.touch;
-        if (preventDefault === true || (preventDefault === 'auto' && pathCanDrag(this.findPath(local))))
-            e.preventDefault();
+        const {preventDefault: preventDefault} = this.config.touch;
+        if (preventDefault === true || preventDefault === "auto" && pathCanDrag(this.findPath(local))) e.preventDefault();
         this.multiTouchStart(e);
-        if (this.notTouch)
-            return;
+        if (this.notTouch) return;
         if (this.touchTimer) {
             window.clearTimeout(this.touchTimer);
             this.touchTimer = 0;
@@ -1191,17 +1228,14 @@ class Interaction extends InteractionBase {
     }
     onTouchMove(e) {
         this.multiTouchMove(e);
-        if (this.notTouch || this.preventWindowPointer(e))
-            return;
+        if (this.notTouch || this.preventWindowPointer(e)) return;
         const touch = PointerEventHelper.getTouch(e);
         this.pointerMove(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
     }
     onTouchEnd(e) {
         this.multiTouchEnd();
-        if (this.notTouch || this.preventWindowPointer(e))
-            return;
-        if (this.touchTimer)
-            clearTimeout(this.touchTimer);
+        if (this.notTouch || this.preventWindowPointer(e)) return;
+        if (this.touchTimer) clearTimeout(this.touchTimer);
         this.touchTimer = setTimeout(() => {
             this.useTouch = false;
         }, 500);
@@ -1209,19 +1243,16 @@ class Interaction extends InteractionBase {
         this.pointerUp(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
     }
     onTouchCancel() {
-        if (this.notTouch)
-            return;
+        if (this.notTouch) return;
         this.pointerCancel();
     }
     multiTouchStart(e) {
-        this.useMultiTouch = (e.touches.length > 1);
+        this.useMultiTouch = e.touches.length > 1;
         this.touches = this.useMultiTouch ? this.getTouches(e.touches) : undefined;
-        if (this.useMultiTouch)
-            this.pointerCancel();
+        if (this.useMultiTouch) this.pointerCancel();
     }
     multiTouchMove(e) {
-        if (!this.useMultiTouch)
-            return;
+        if (!this.useMultiTouch) return;
         if (e.touches.length > 1) {
             const touches = this.getTouches(e.touches);
             const list = this.getKeepTouchList(this.touches, touches);
@@ -1241,8 +1272,10 @@ class Interaction extends InteractionBase {
         const list = [];
         old.forEach(from => {
             to = touches.find(touch => touch.identifier === from.identifier);
-            if (to)
-                list.push({ from: this.getLocal(from), to: this.getLocal(to) });
+            if (to) list.push({
+                from: this.getLocal(from),
+                to: this.getLocal(to)
+            });
         });
         return list;
     }
@@ -1251,31 +1284,35 @@ class Interaction extends InteractionBase {
     }
     onWheel(e) {
         this.preventDefaultWheel(e);
-        this.wheel(Object.assign(Object.assign(Object.assign({}, InteractionHelper.getBase(e)), this.getLocal(e)), { deltaX: e.deltaX, deltaY: e.deltaY }));
+        this.wheel(Object.assign(Object.assign(Object.assign({}, InteractionHelper.getBase(e)), this.getLocal(e)), {
+            deltaX: e.deltaX,
+            deltaY: e.deltaY
+        }));
     }
     onGesturestart(e) {
-        if (this.useMultiTouch)
-            return;
+        if (this.useMultiTouch) return;
         this.preventDefaultWheel(e);
         this.lastGestureScale = 1;
         this.lastGestureRotation = 0;
     }
     onGesturechange(e) {
-        if (this.useMultiTouch)
-            return;
+        if (this.useMultiTouch) return;
         this.preventDefaultWheel(e);
         const eventBase = InteractionHelper.getBase(e);
         Object.assign(eventBase, this.getLocal(e));
-        const scale = (e.scale / this.lastGestureScale);
-        const rotation = (e.rotation - this.lastGestureRotation) / Math.PI * 180 * (MathHelper.within(this.config.wheel.rotateSpeed, 0, 1) / 4 + 0.1);
-        this.zoom(Object.assign(Object.assign({}, eventBase), { scale: scale * scale }));
-        this.rotate(Object.assign(Object.assign({}, eventBase), { rotation }));
+        const scale = e.scale / this.lastGestureScale;
+        const rotation = (e.rotation - this.lastGestureRotation) / Math.PI * 180 * (MathHelper.within(this.config.wheel.rotateSpeed, 0, 1) / 4 + .1);
+        this.zoom(Object.assign(Object.assign({}, eventBase), {
+            scale: scale * scale
+        }));
+        this.rotate(Object.assign(Object.assign({}, eventBase), {
+            rotation: rotation
+        }));
         this.lastGestureScale = e.scale;
         this.lastGestureRotation = e.rotation;
     }
     onGestureend(e) {
-        if (this.useMultiTouch)
-            return;
+        if (this.useMultiTouch) return;
         this.preventDefaultWheel(e);
         this.transformEnd();
     }
@@ -1283,21 +1320,18 @@ class Interaction extends InteractionBase {
         super.setCursor(cursor);
         const list = [];
         this.eachCursor(cursor, list);
-        if (typeof list[list.length - 1] === 'object')
-            list.push('default');
-        this.canvas.view.style.cursor = list.map(item => (typeof item === 'object') ? `url(${item.url}) ${item.x || 0} ${item.y || 0}` : item).join(',');
+        if (isObject(list[list.length - 1])) list.push("default");
+        this.canvas.view.style.cursor = list.map(item => isObject(item) ? `url(${item.url}) ${item.x || 0} ${item.y || 0}` : item).join(",");
     }
     eachCursor(cursor, list, level = 0) {
         level++;
-        if (cursor instanceof Array) {
+        if (isArray(cursor)) {
             cursor.forEach(item => this.eachCursor(item, list, level));
-        }
-        else {
-            const custom = typeof cursor === 'string' && Cursor.get(cursor);
+        } else {
+            const custom = isString(cursor) && Cursor.get(cursor);
             if (custom && level < 2) {
                 this.eachCursor(custom, list, level);
-            }
-            else {
+            } else {
                 list.push(cursor);
             }
         }
@@ -1312,21 +1346,18 @@ class Interaction extends InteractionBase {
 }
 
 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)));
     }
 }
@@ -1335,117 +1366,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 (PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
-                continue;
+            if (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 (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";
     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 && PaintImage.checkImage(ui, canvas, item, false))
-            continue;
+        if (item.image && 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();
             }
         }
@@ -1454,53 +1480,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 (isObject(stroke)) {
         drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
-    }
-    else {
+    } else {
         canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
         canvas.stroke();
     }
-    if (data.__useArrow)
-        Paint.strokeArrow(stroke, ui, canvas);
+    if (data.__useArrow) 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);
@@ -1511,25 +1538,27 @@ function drawOutside(stroke, ui, canvas) {
     }
 }
 
-const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
+const {getSpread: getSpread, getOuterOf: getOuterOf, getByMove: getByMove, getIntersectData: getIntersectData} = 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;
-    if (current.bounds.includes(nowWorld)) {
+    const nowWorld = ui.__nowWorld, currentBounds = current.bounds;
+    let bounds, matrix, fitMatrix, shapeBounds, worldCanvas;
+    let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
+    if (currentBounds.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);
-        fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
-        let { a: fitScaleX, d: fitScaleY } = fitMatrix;
+    } else {
+        const {renderShapeSpread: spread} = ui.__layout;
+        let worldClipBounds;
+        if (Platform.fullImageShadow) {
+            worldClipBounds = nowWorld;
+        } else {
+            const spreadBounds = spread ? getSpread(currentBounds, scaleX === scaleY ? spread * scaleX : [ spread * scaleY, spread * scaleX ]) : currentBounds;
+            worldClipBounds = getIntersectData(spreadBounds, nowWorld);
+        }
+        fitMatrix = currentBounds.getFitMatrix(worldClipBounds);
+        let {a: fitScaleX, d: fitScaleY} = fitMatrix;
         if (fitMatrix.a < 1) {
             worldCanvas = current.getSameCanvas();
             ui.__renderShape(worldCanvas, options);
@@ -1538,28 +1567,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 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 } = DataHelper, { hasTransparent: hasTransparent$1 } = ColorConvert;
+
+const {stintSet: stintSet} = DataHelper, {hasTransparent: hasTransparent$1} = ColorConvert;
+
 function compute(attrName, ui) {
     const data = ui.__, leafPaints = [];
     let paints = data.__input[attrName], isAlphaPixel, isTransparent;
-    if (!(paints instanceof Array))
-        paints = [paints];
+    if (!isArray(paints)) paints = [ paints ];
     recycleMap = PaintImage.recycleImage(attrName, data);
     let maxChildStrokeWidth;
     for (let i = 0, len = paints.length, item; i < len; i++) {
@@ -1567,206 +1607,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 (!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 = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
-            break;
-        case 'linear':
-            data = PaintGradient.linearGradient(paint, boxBounds);
-            break;
-        case 'radial':
-            data = PaintGradient.radialGradient(paint, boxBounds);
-            break;
-        case 'angular':
-            data = PaintGradient.conicGradient(paint, boxBounds);
-            break;
-        case 'solid':
-            const { type, color, opacity } = paint;
-            data = { type, style: ColorConvert.string(color, opacity) };
-            break;
-        default:
-            if (paint.r !== undefined)
-                data = { type: 'solid', style: ColorConvert.string(paint) };
+      case "image":
+        data = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        break;
+
+      case "linear":
+        data = PaintGradient.linearGradient(paint, boxBounds);
+        break;
+
+      case "radial":
+        data = PaintGradient.radialGradient(paint, boxBounds);
+        break;
+
+      case "angular":
+        data = PaintGradient.conicGradient(paint, boxBounds);
+        break;
+
+      case "solid":
+        const {type: type, color: color, opacity: opacity} = paint;
+        data = {
+            type: type,
+            style: ColorConvert.string(color, opacity)
+        };
+        break;
+
+      default:
+        if (!isUndefined(paint.r)) data = {
+            type: "solid",
+            style: ColorConvert.string(paint)
+        };
     }
     if (data) {
-        if (typeof data.style === 'string' && hasTransparent$1(data.style))
-            data.isTransparent = true;
+        if (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 = getMatrixData();
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
+
+const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = 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 } = MatrixHelper;
-const tempBox = new 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} = MatrixHelper;
+
+const tempBox = new 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;
     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 = BoundsHelper.getFitScale(box, tempImage, mode !== 'fit');
+            scaleX = scaleY = BoundsHelper.getFitScale(box, tempImage, mode !== "fit");
             BoundsHelper.put(box, image, align, scaleX, false, tempImage);
             BoundsHelper.scale(tempImage, scaleX, scaleY, true);
         }
-    }
-    else {
+    } else {
         if (scale || size) {
             MathHelper.getScaleData(scale, size, image, tempScaleData);
             scaleX = tempScaleData.scaleX;
             scaleY = tempScaleData.scaleY;
         }
-        if (align) {
-            if (scaleX)
-                BoundsHelper.scale(tempImage, scaleX, scaleY, true);
-            AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
+        if (align || gap || repeat) {
+            if (scaleX) BoundsHelper.scale(tempImage, scaleX, scaleY, true);
+            if (align) AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
         }
     }
-    if (offset)
-        PointHelper.move(tempImage, offset);
+    if (offset) 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 = 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) {
@@ -1774,49 +1830,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 = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     return data;
 }
 
-let cache, box = new Bounds();
-const { isSame } = BoundsHelper;
+function getGapData(gap, repeat, width, height, box) {
+    let xGap, yGap;
+    if (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 = 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 Bounds;
+
+const {isSame: isSame} = BoundsHelper;
+
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
     const image = 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);
@@ -1825,79 +1901,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, ImageEvent.LOAD, event);
 }
+
 function onLoadSuccess(ui, event) {
     emit(ui, ImageEvent.LOADED, event);
 }
+
 function onLoadError(ui, event, error) {
     event.error = error;
-    ui.forceUpdate('surface');
+    ui.forceUpdate("surface");
     emit(ui, ImageEvent.ERROR, event);
 }
+
 function emit(ui, type, data) {
-    if (ui.hasEvent(type))
-        ui.emitEvent(new ImageEvent(type, data));
+    if (ui.hasEvent(type)) ui.emitEvent(new 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 } = MatrixHelper;
-const { ceil, abs } = Math;
+const {get: get$1, scale: scale, copy: copy$1} = 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);
@@ -1907,23 +1988,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 > Platform.image.maxCacheSize)
-                return false;
+            if (size > Platform.image.maxCacheSize) return false;
         }
         let maxSize = 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;
@@ -1937,97 +2013,95 @@ 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 || (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 || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
         paint.style = pattern;
         paint.patternId = id;
         return true;
-    }
-    else {
+    } else {
         return false;
     }
 }
 
-/******************************************************************************
-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;
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
 function 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 && !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 && !Export.running) {
         return false;
-    }
-    else {
+    } else {
         if (allowDraw) {
             if (data.repeat) {
                 allowDraw = false;
-            }
-            else {
-                if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
-                    let { width, height } = data;
+            } else {
+                if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || 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 > Platform.image.maxCacheSize);
+                    allowDraw = width * height > 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 || Export.running) {
                 createPattern(ui, paint, pixelRatio);
-            }
-            else {
+            } else {
                 if (!paint.patternTask) {
-                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                    paint.patternTask = 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);
                 }
             }
@@ -2035,39 +2109,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 (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;
                 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 (!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));
                 }
             }
         }
@@ -2077,75 +2147,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 } = AroundHelper, { hasTransparent } = ColorConvert;
+const {toPoint: toPoint$2} = AroundHelper, {hasTransparent: hasTransparent} = 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 = 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 = ColorConvert.string(stop, opacity);
-            else
-                offset = stop.offset, color = ColorConvert.string(stop.color, opacity);
+            if (isString(stop)) offset = i / (len - 1), color = ColorConvert.string(stop, opacity); else offset = stop.offset, 
+            color = 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 } = PointHelper;
-const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
-const { toPoint: toPoint$1 } = AroundHelper;
+const {getAngle: getAngle, getDistance: getDistance$1} = PointHelper;
+
+const {get: get, rotateOfOuter: rotateOfOuter, scaleOfOuter: scaleOfOuter} = MatrixHelper;
+
+const {toPoint: toPoint$1} = 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 = 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);
         }
@@ -2153,81 +2233,94 @@ function getTransform(box, from, to, stretch, rotate90) {
     return transform;
 }
 
-const { getDistance } = PointHelper;
-const { toPoint } = AroundHelper;
+const {getDistance: getDistance} = PointHelper;
+
+const {toPoint: toPoint} = 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 = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : 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, 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 } = BoundsHelper;
+const {copy: copy, toOffsetOutBounds: toOffsetOutBounds$1} = 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, 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, 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");
         }
         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 (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;
         }
@@ -2235,174 +2328,184 @@ function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
     }
 }
 
-const { toOffsetOutBounds } = BoundsHelper;
+const {toOffsetOutBounds: toOffsetOutBounds} = 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, ColorConvert.string(item.color), 'source-in');
+        other.fillWorld(copyBounds, ColorConvert.string(item.color), "source-in");
         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 } = LeafBoundsHelper;
-Group.prototype.__renderMask = function (canvas, options) {
+const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
+
+let usedGrayscaleAlpha;
+
+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";
@@ -2410,179 +2513,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 } = Platform;
-    const { width, height } = bounds;
-    const charMode = width || height || __letterSpacing || (textCase !== 'none');
+    const {__letterSpacing: __letterSpacing, paraIndent: paraIndent, textCase: textCase} = style;
+    const {canvas: canvas} = 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++;
@@ -2595,52 +2694,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;
                     }
@@ -2650,14 +2750,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;
@@ -2665,9 +2767,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);
         }
@@ -2677,38 +2780,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) {
@@ -2722,19 +2826,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;
@@ -2742,20 +2842,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 ? 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;
@@ -2764,8 +2860,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;
@@ -2773,15 +2868,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;
     });
@@ -2790,122 +2888,124 @@ 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 (isObject(textDecoration)) {
         type = textDecoration.type;
-        if (textDecoration.color)
-            drawData.decorationColor = ColorConvert.string(textDecoration.color);
-    }
-    else
-        type = textDecoration;
+        if (textDecoration.color) drawData.decorationColor = 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 } = Direction4;
+const {top: top, right: right, bottom: bottom, left: left} = Direction4;
+
 function getDrawData(content, style) {
-    if (typeof content !== 'string')
-        content = String(content);
+    if (!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: 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 && ColorConvert.object)
-            color = ColorConvert.object(color);
-        else
-            return color;
+    const doOpacity = isNumber(opacity) && opacity < 1;
+    if (isString(color)) {
+        if (doOpacity && ColorConvert.object) color = 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 = 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(TextConvert, TextConvertModule);
+
 Object.assign(ColorConvert, ColorConvertModule);
+
 Object.assign(Paint, PaintModule);
+
 Object.assign(PaintImage, PaintImageModule);
+
 Object.assign(PaintGradient, PaintGradientModule);
+
 Object.assign(Effect, EffectModule);
 
 Object.assign(Creator, {
     interaction: (target, canvas, selector, options) => new Interaction(target, canvas, selector, options),
     hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
-    hitCanvasManager: () => new HitCanvasManager()
+    hitCanvasManager: () => new HitCanvasManager
 });
+
 useCanvas();
 
 export { Interaction, Layouter, LeaferCanvas, Picker, Renderer, Selector, Watcher, useCanvas };