leafer-ui 1.0.0-rc.2 → 1.0.0-rc.21

package/dist/web.esm.js

@@ -1,8 +1,230 @@
-import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, BoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, Creator, LeaferCanvasBase, Cursor, canvasSizeAttrs, canvasPatch, InteractionHelper, MathHelper, InteractionBase, LeaferImage, FileHelper, MatrixHelper, ImageEvent, PointHelper, TaskProcessor } from '@leafer/core';
+import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, Answer, MathHelper, MatrixHelper, ImageEvent, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
-import { ColorConvert as ColorConvert$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$1 } from '@leafer-ui/core';
+import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager, Leafer } from '@leafer-ui/core';
 export * from '@leafer-ui/core';
+import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
+
+const debug$3 = Debug.get('LeaferCanvas');
+class LeaferCanvas extends LeaferCanvasBase {
+    init() {
+        const { view } = this.config;
+        view ? this.__createViewFrom(view) : this.__createView();
+        const { style } = this.view;
+        style.display || (style.display = 'block');
+        this.parentView = this.view.parentElement;
+        if (this.parentView)
+            this.parentView.style.userSelect = 'none';
+        if (Platform.syncDomFont && !this.parentView) {
+            this.view.style.display = 'none';
+            document.body.appendChild(this.view);
+        }
+        this.__createContext();
+        if (!this.autoLayout)
+            this.resize(this.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'; }
+    __createView() {
+        this.view = document.createElement('canvas');
+    }
+    __createViewFrom(inputView) {
+        let find = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView;
+        if (find) {
+            if (find instanceof HTMLCanvasElement) {
+                this.view = find;
+            }
+            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';
+                    document.body.appendChild(div);
+                    parent = div;
+                }
+                this.__createView();
+                const view = this.view;
+                if (parent.hasChildNodes()) {
+                    const { style } = view;
+                    style.position = 'absolute';
+                    style.top = style.left = '0px';
+                    parent.style.position || (parent.style.position = 'relative');
+                }
+                parent.appendChild(view);
+            }
+        }
+        else {
+            debug$3.error(`no id: ${inputView}`);
+            this.__createView();
+        }
+    }
+    updateViewSize() {
+        const { width, height, pixelRatio } = this;
+        const { 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() {
+        this.clientBounds = this.view.getBoundingClientRect();
+    }
+    startAutoLayout(autoBounds, listener) {
+        this.autoBounds = autoBounds;
+        this.resizeListener = listener;
+        try {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                this.updateClientBounds();
+                for (const entry of entries)
+                    this.checkAutoBounds(entry.contentRect);
+            });
+            const parent = this.parentView;
+            if (parent) {
+                this.resizeObserver.observe(parent);
+                this.checkAutoBounds(parent.getBoundingClientRect());
+            }
+        }
+        catch (_a) {
+            this.imitateResizeObserver();
+        }
+    }
+    imitateResizeObserver() {
+        if (this.autoLayout) {
+            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);
+        if (width !== this.width || height !== this.height) {
+            const { style } = view;
+            const { pixelRatio } = this;
+            style.marginLeft = x + 'px';
+            style.marginTop = y + 'px';
+            const size = { width, height, pixelRatio };
+            const oldSize = {};
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+            this.resize(size);
+            if (this.width !== undefined)
+                this.resizeListener(new ResizeEvent(size, oldSize));
+        }
+    }
+    stopAutoLayout() {
+        this.autoLayout = false;
+        this.resizeListener = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    unrealCanvas() {
+        if (!this.unreal && this.parentView) {
+            const view = this.view;
+            if (view)
+                view.remove();
+            this.view = this.parentView;
+            this.unreal = true;
+        }
+    }
+    destroy() {
+        if (this.view) {
+            this.stopAutoLayout();
+            if (!this.unreal) {
+                const view = this.view;
+                if (view.parentElement)
+                    view.remove();
+            }
+            super.destroy();
+        }
+    }
+}
+
+canvasPatch(CanvasRenderingContext2D.prototype);
+canvasPatch(Path2D.prototype);
+
+const { mineType, fileType } = FileHelper;
+Object.assign(Creator, {
+    canvas: (options, manager) => new LeaferCanvas(options, manager),
+    image: (options) => new LeaferImage(options)
+});
+function useCanvas(_canvasType, _power) {
+    Platform.origin = {
+        createCanvas(width, height) {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            return canvas;
+        },
+        canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(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');
+                el.href = url;
+                el.download = filename;
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+                resolve();
+            });
+        },
+        loadImage(src) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                const { suffix, crossOrigin } = Platform.image;
+                if (crossOrigin) {
+                    img.setAttribute('crossOrigin', crossOrigin);
+                    img.crossOrigin = crossOrigin;
+                }
+                img.onload = () => { resolve(img); };
+                img.onerror = (e) => { reject(e); };
+                if (!src.startsWith('data:') && !src.startsWith('blob:') && suffix)
+                    src += (src.includes("?") ? "&" : "?") + suffix;
+                img.src = src;
+            });
+        }
+    };
+    Platform.event = {
+        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); };
+Platform.devicePixelRatio = Math.max(1, devicePixelRatio);
+const { userAgent } = navigator;
+if (userAgent.indexOf("Firefox") > -1) {
+    Platform.conicGradientRotate90 = true;
+    Platform.intWheelDeltaY = true;
+    Platform.syncDomFont = true;
+}
+else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
+    Platform.fullImageShadow = true;
+}
+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';
+}
 
 class Watcher {
     get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
@@ -10,7 +232,7 @@ class Watcher {
         if (this.hasRemove) {
             const updatedList = new LeafList();
             this.__updatedList.list.forEach(item => { if (item.leafer)
-                updatedList.push(item); });
+                updatedList.add(item); });
             return updatedList;
         }
         else {
@@ -45,7 +267,7 @@ class Watcher {
             this.target.emit(RenderEvent.REQUEST);
     }
     __onAttrChange(event) {
-        this.__updatedList.push(event.target);
+        this.__updatedList.add(event.target);
         this.update();
     }
     __onChildEvent(event) {
@@ -55,12 +277,12 @@ class Watcher {
         }
         else {
             this.hasRemove = true;
-            this.__updatedList.push(event.parent);
+            this.__updatedList.add(event.parent);
         }
         this.update();
     }
     __pushChild(child) {
-        this.__updatedList.push(child);
+        this.__updatedList.add(child);
         if (child.isBranch)
             this.__loopChildren(child);
     }
@@ -99,22 +321,22 @@ class Watcher {
     }
 }
 
-const { updateAllWorldMatrix: updateAllWorldMatrix$1, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
     updateList.list.forEach(leaf => {
         layout = leaf.__layout;
-        if (levelList.without(leaf) && !layout.useZoomProxy) {
+        if (levelList.without(leaf) && !layout.proxyZoom) {
             if (layout.matrixChanged) {
-                updateAllWorldMatrix$1(leaf);
-                levelList.push(leaf);
+                updateAllMatrix$1(leaf, true);
+                levelList.add(leaf);
                 if (leaf.isBranch)
                     pushAllChildBranch(leaf, levelList);
                 pushAllParent(leaf, levelList);
             }
             else if (layout.boundsChanged) {
-                levelList.push(leaf);
+                levelList.add(leaf);
                 if (leaf.isBranch)
                     leaf.__tempNumber = 0;
                 pushAllParent(leaf, levelList);
@@ -123,20 +345,21 @@ function updateMatrix(updateList, levelList) {
     });
 }
 function updateBounds(boundsList) {
-    let itemList, branch;
+    let list, branch, children;
     boundsList.sort(true);
     boundsList.levels.forEach(level => {
-        itemList = boundsList.levelMap[level];
-        for (let i = 0, len = itemList.length; i < len; i++) {
-            branch = itemList[i];
+        list = boundsList.levelMap[level];
+        for (let i = 0, len = list.length; i < len; i++) {
+            branch = list[i];
             if (branch.isBranch && branch.__tempNumber) {
-                for (let j = 0, jLen = branch.children.length; j < jLen; j++) {
-                    if (!branch.children[j].isBranch) {
-                        branch.children[j].__updateWorldBounds();
+                children = branch.children;
+                for (let j = 0, jLen = children.length; j < jLen; j++) {
+                    if (!children[j].isBranch) {
+                        updateOneBounds(children[j]);
                     }
                 }
             }
-            branch.__updateWorldBounds();
+            updateOneBounds(branch);
         }
     });
 }
@@ -149,7 +372,7 @@ function updateChange(updateList) {
 }
 
 const { worldBounds } = LeafBoundsHelper;
-const { setByListWithHandle } = BoundsHelper;
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new Bounds();
@@ -160,14 +383,20 @@ class LayoutBlockData {
         this.updatedList = list;
     }
     setBefore() {
-        setByListWithHandle(this.beforeBounds, this.updatedList.list, worldBounds);
+        this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
     }
     setAfter() {
-        setByListWithHandle(this.afterBounds, this.updatedList.list, worldBounds);
-        this.updatedBounds.setByList([this.beforeBounds, this.afterBounds]);
+        const { list } = this.updatedList;
+        if (list.some(leaf => leaf.noBounds)) {
+            this.afterBounds.set(bigBounds);
+        }
+        else {
+            this.afterBounds.setListWithFn(list, worldBounds);
+        }
+        this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
     }
     merge(data) {
-        this.updatedList.pushList(data.updatedList.list);
+        this.updatedList.addList(data.updatedList.list);
         this.beforeBounds.add(data.beforeBounds);
         this.afterBounds.add(data.afterBounds);
         this.updatedBounds.add(data.updatedBounds);
@@ -177,8 +406,7 @@ class LayoutBlockData {
     }
 }
 
-const { updateAllWorldMatrix, updateAllChange } = LeafHelper;
-const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
+const { updateAllMatrix, updateAllChange } = LeafHelper;
 const debug$2 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
@@ -255,12 +483,15 @@ class Layouter {
         const { target, __updatedList: updateList } = this;
         const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
         const blocks = this.getBlocks(updateList);
-        blocks.forEach(item => { item.setBefore(); });
+        blocks.forEach(item => item.setBefore());
         target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
+        this.extraBlock = null;
         updateList.sort();
         updateMatrix(updateList, this.__levelList);
         updateBounds(this.__levelList);
         updateChange(updateList);
+        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));
@@ -283,17 +514,22 @@ class Layouter {
         Run.end(t);
     }
     static fullLayout(target) {
-        updateAllWorldMatrix(target);
+        updateAllMatrix(target, true);
         if (target.isBranch) {
-            const branchStack = [target];
-            pushAllBranchStack(target, branchStack);
-            updateWorldBoundsByBranchStack(branchStack);
+            BranchHelper.updateBounds(target);
         }
         else {
-            target.__updateWorldBounds();
+            LeafHelper.updateBounds(target);
         }
         updateAllChange(target);
     }
+    addExtra(leaf) {
+        if (!this.__updatedList.has(leaf)) {
+            const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+            updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world);
+            updatedList.add(leaf);
+        }
+    }
     createBlock(data) {
         return new LayoutBlockData(data);
     }
@@ -321,8 +557,7 @@ class Layouter {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.config = null;
+            this.target = this.config = null;
         }
     }
 }
@@ -403,6 +638,10 @@ class Renderer {
         }
         else {
             this.requestLayout();
+            if (this.ignore) {
+                this.ignore = this.rendering = false;
+                return;
+            }
             this.emitRender(RenderEvent.BEFORE);
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender();
@@ -424,8 +663,7 @@ class Renderer {
         const { canvas, updateBlocks: list } = this;
         if (!list)
             return debug$1.warn('PartRender: need update attr');
-        if (list.some(block => block.includes(this.target.__world)))
-            this.mergeBlocks();
+        this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
     }
@@ -434,7 +672,7 @@ class Renderer {
         const { canvas } = this;
         const bounds = block.getIntersect(canvas.bounds);
         const includes = block.includes(this.target.__world);
-        const realBounds = new Bounds().copy(bounds);
+        const realBounds = new Bounds(bounds);
         canvas.save();
         if (includes && !Debug.showRepaint) {
             canvas.clear();
@@ -444,7 +682,7 @@ class Renderer {
             canvas.clearWorld(bounds, true);
             canvas.clipWorld(bounds, true);
         }
-        this.__render(bounds, realBounds);
+        this.__render(bounds, includes, realBounds);
         canvas.restore();
         Run.end(t);
     }
@@ -453,12 +691,12 @@ class Renderer {
         const { canvas } = this;
         canvas.save();
         canvas.clear();
-        this.__render(canvas.bounds);
+        this.__render(canvas.bounds, true);
         canvas.restore();
         Run.end(t);
     }
-    __render(bounds, realBounds) {
-        const options = (bounds === null || bounds === void 0 ? void 0 : bounds.includes(this.target.__world)) ? {} : { bounds };
+    __render(bounds, includes, realBounds) {
+        const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
         if (this.needFill)
             this.canvas.fillWorld(bounds, this.config.fill);
         if (Debug.showRepaint)
@@ -484,7 +722,7 @@ class Renderer {
         const { updateBlocks: list } = this;
         if (list) {
             const bounds = new Bounds();
-            bounds.setByList(list);
+            bounds.setList(list);
             list.length = 0;
             list.push(bounds);
         }
@@ -493,12 +731,12 @@ class Renderer {
         const startTime = Date.now();
         Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
-            if (this.changed) {
-                if (this.running && this.canvas.view)
+            if (this.running) {
+                this.target.emit(AnimateEvent.FRAME);
+                if (this.changed && this.canvas.view)
                     this.render();
+                this.target.emit(RenderEvent.NEXT);
             }
-            if (this.running)
-                this.target.emit(AnimateEvent.FRAME);
             if (this.target)
                 this.__requestRender();
         });
@@ -511,7 +749,7 @@ class Renderer {
             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('blendMode');
+                this.target.forceUpdate('surface');
             }
         }
     }
@@ -524,7 +762,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$1.warn(leaf.innerName, ': empty');
+                                debug$1.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -551,15 +789,13 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.canvas = null;
-            this.config = null;
+            this.target = this.canvas = this.config = null;
         }
     }
 }
 
 const { hitRadiusPoint } = BoundsHelper;
-class FindPath {
+class Picker {
     constructor(target, selector) {
         this.target = target;
         this.selector = selector;
@@ -571,15 +807,17 @@ class FindPath {
             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.findList = [];
-        this.eachFind(this.target.children, this.target.__onlyHitMask);
+        this.findList = options.findList || [];
+        if (!options.findList)
+            this.eachFind(target.children, target.__onlyHitMask);
         const list = this.findList;
         const leaf = this.getBestMatchLeaf();
         const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
         this.clear();
-        return through ? { path, leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, leaf };
+        return through ? { path, target: leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, target: leaf };
     }
     getBestMatchLeaf() {
         const { findList: targets } = this;
@@ -602,20 +840,20 @@ class FindPath {
     getPath(leaf) {
         const path = new LeafList();
         while (leaf) {
-            path.push(leaf);
+            path.add(leaf);
             leaf = leaf.parent;
         }
-        path.push(this.target);
+        path.add(this.target);
         return path;
     }
     getHitablePath(leaf) {
-        const path = this.getPath(leaf);
+        const path = this.getPath(leaf && leaf.hittable ? leaf : null);
         let item, hittablePath = new LeafList();
         for (let i = path.list.length - 1; i > -1; i--) {
             item = path.list[i];
             if (!item.__.hittable)
                 break;
-            hittablePath.unshift(item);
+            hittablePath.addAt(item, 0);
             if (!item.__.hitChildren)
                 break;
         }
@@ -634,7 +872,7 @@ class FindPath {
                 leaf = path.list[j];
                 if (nextPath && nextPath.has(leaf))
                     break;
-                throughPath.push(leaf);
+                throughPath.add(leaf);
             }
         }
         return throughPath;
@@ -644,7 +882,7 @@ class FindPath {
         const { point } = this, len = children.length;
         for (let i = len - 1; i > -1; i--) {
             child = children[i];
-            if (!child.__.visible || (hitMask && !child.__.isMask))
+            if (!child.__.visible || (hitMask && !child.__.mask))
                 continue;
             hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point);
             if (child.isBranch) {
@@ -676,120 +914,113 @@ class FindPath {
     }
 }
 
+const { Yes, NoAndSkip, YesAndSkip } = Answer;
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
-        this.innerIdList = {};
-        this.idList = {};
-        this.classNameList = {};
-        this.tagNameList = {};
+        this.innerIdMap = {};
+        this.idMap = {};
+        this.methods = {
+            id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
+            innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
+            className: (leaf, name) => leaf.className === name ? 1 : 0,
+            tag: (leaf, name) => leaf.__tag === name ? 1 : 0
+        };
         this.target = target;
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
-        this.findPath = new FindPath(target, this);
+        this.picker = new Picker(target, this);
         this.__listenEvents();
     }
+    getBy(condition, branch, one, options) {
+        switch (typeof condition) {
+            case 'number':
+                const leaf = this.getByInnerId(condition, branch);
+                return one ? leaf : (leaf ? [leaf] : []);
+            case 'string':
+                switch (condition[0]) {
+                    case '#':
+                        const leaf = this.getById(condition.substring(1), branch);
+                        return one ? leaf : (leaf ? [leaf] : []);
+                    case '.':
+                        return this.getByMethod(this.methods.className, branch, one, condition.substring(1));
+                    default:
+                        return this.getByMethod(this.methods.tag, branch, one, condition);
+                }
+            case 'function':
+                return this.getByMethod(condition, branch, one, options);
+        }
+    }
     getByPoint(hitPoint, hitRadius, options) {
         if (Platform.name === 'node')
             this.target.emit(LayoutEvent.CHECK_UPDATE);
-        return this.findPath.getByPoint(hitPoint, hitRadius, options);
-    }
-    find(name, branch) {
-        if (typeof name === 'number') {
-            return this.getByInnerId(name, branch);
-        }
-        else if (name.startsWith('#')) {
-            return this.getById(name.substring(1), branch);
-        }
-        else if (name.startsWith('.')) {
-            return this.getByClassName(name.substring(1), branch);
-        }
-        else {
-            return this.getByTagName(name, branch);
-        }
+        return this.picker.getByPoint(hitPoint, hitRadius, options);
     }
-    getByInnerId(name, branch) {
-        let cache = this.innerIdList[name];
+    getByInnerId(innerId, branch) {
+        const cache = this.innerIdMap[innerId];
         if (cache)
             return cache;
-        if (!branch)
-            branch = this.target;
-        let find;
-        this.loopFind(branch, (leaf) => {
-            if (leaf.innerId === name) {
-                find = leaf;
-                this.innerIdList[name] = find;
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        return find;
+        this.eachFind(this.toChildren(branch), this.methods.innerId, null, innerId);
+        return this.findLeaf;
     }
-    getById(name, branch) {
-        let cache = this.idList[name];
-        if (cache)
+    getById(id, branch) {
+        const cache = this.idMap[id];
+        if (cache && LeafHelper.hasParent(cache, branch || this.target))
             return cache;
-        if (!branch)
-            branch = this.target;
-        let find;
-        this.loopFind(branch, (leaf) => {
-            if (leaf.id === name) {
-                find = leaf;
-                this.idList[name] = find;
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        return find;
-    }
-    getByClassName(name, branch) {
-        if (!branch)
-            branch = this.target;
-        let find = [];
-        this.loopFind(branch, (leaf) => {
-            if (leaf.className === name)
-                find.push(leaf);
-            return false;
-        });
-        return find;
-    }
-    getByTagName(name, branch) {
-        if (!branch)
-            branch = this.target;
-        let find = [];
-        this.loopFind(branch, (leaf) => {
-            if (leaf.__tag === name)
-                find.push(leaf);
-            return false;
-        });
-        return find;
+        this.eachFind(this.toChildren(branch), this.methods.id, null, id);
+        return this.findLeaf;
     }
-    loopFind(branch, find) {
-        if (find(branch))
-            return;
-        const { children } = branch;
+    getByClassName(className, branch) {
+        return this.getByMethod(this.methods.className, branch, false, className);
+    }
+    getByTag(tag, branch) {
+        return this.getByMethod(this.methods.tag, branch, false, tag);
+    }
+    getByMethod(method, branch, one, options) {
+        const list = one ? null : [];
+        this.eachFind(this.toChildren(branch), method, list, options);
+        return list || this.findLeaf;
+    }
+    eachFind(children, method, list, options) {
+        let child, result;
         for (let i = 0, len = children.length; i < len; i++) {
-            branch = children[i];
-            if (find(branch))
-                return;
-            if (branch.isBranch)
-                this.loopFind(branch, find);
+            child = children[i];
+            result = method(child, options);
+            if (result === Yes || result === YesAndSkip) {
+                if (list) {
+                    list.push(child);
+                }
+                else {
+                    this.findLeaf = child;
+                    return;
+                }
+            }
+            if (child.isBranch && result < NoAndSkip)
+                this.eachFind(child.children, method, list, options);
         }
     }
+    toChildren(branch) {
+        this.findLeaf = null;
+        return [branch || this.target];
+    }
     __onRemoveChild(event) {
-        const target = event.target;
-        if (this.idList[target.id])
-            this.idList[target.id] = null;
-        if (this.innerIdList[target.id])
-            this.innerIdList[target.innerId] = null;
+        const { id, innerId } = event.child;
+        if (this.idMap[id])
+            delete this.idMap[id];
+        if (this.innerIdMap[innerId])
+            delete this.innerIdMap[innerId];
+    }
+    __checkIdChange(event) {
+        if (event.attrName === 'id') {
+            const id = event.oldValue;
+            if (this.idMap[id])
+                delete this.idMap[id];
+        }
     }
     __listenEvents() {
         this.__eventIds = [
-            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this)
+            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this),
+            this.target.on_(PropertyEvent.CHANGE, this.__checkIdChange, this)
         ];
     }
     __removeListenEvents() {
@@ -799,11 +1030,10 @@ class Selector {
     destroy() {
         if (this.__eventIds.length) {
             this.__removeListenEvents();
-            this.findPath.destroy();
-            this.innerIdList = {};
-            this.idList = {};
-            this.classNameList = {};
-            this.tagNameList = {};
+            this.picker.destroy();
+            this.findLeaf = null;
+            this.innerIdMap = {};
+            this.idMap = {};
         }
     }
 }
@@ -816,169 +1046,6 @@ Object.assign(Creator, {
 });
 Platform.layout = Layouter.fullLayout;
 
-const debug = Debug.get('LeaferCanvas');
-class LeaferCanvas extends LeaferCanvasBase {
-    init() {
-        const { view } = this.config;
-        view ? this.__createViewFrom(view) : this.__createView();
-        const { style } = this.view;
-        style.display || (style.display = 'block');
-        this.parentView = this.view.parentElement;
-        if (Platform.syncDomFont && !this.parentView) {
-            this.view.style.display = 'none';
-            document.body.appendChild(this.view);
-        }
-        this.__createContext();
-        if (!this.autoLayout)
-            this.resize(this.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'; }
-    __createView() {
-        this.view = document.createElement('canvas');
-    }
-    setCursor(cursor) {
-        const list = [];
-        this.eachCursor(cursor, list);
-        if (typeof list[list.length - 1] === 'object')
-            list.push('default');
-        this.view.style.cursor = list.map(item => (typeof item === 'object') ? `url(${item.url}) ${item.x || 0} ${item.y || 0}` : item).join(',');
-    }
-    eachCursor(cursor, list, level = 0) {
-        level++;
-        if (cursor instanceof Array) {
-            cursor.forEach(item => this.eachCursor(item, list, level));
-        }
-        else {
-            const custom = typeof cursor === 'string' && Cursor.get(cursor);
-            if (custom && level < 2) {
-                this.eachCursor(custom, list, level);
-            }
-            else {
-                list.push(cursor);
-            }
-        }
-    }
-    __createViewFrom(inputView) {
-        let find = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView;
-        if (find) {
-            if (find instanceof HTMLCanvasElement) {
-                this.view = find;
-            }
-            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';
-                    document.body.appendChild(div);
-                    parent = div;
-                }
-                this.__createView();
-                const view = this.view;
-                if (parent.hasChildNodes()) {
-                    const { style } = view;
-                    style.position = 'absolute';
-                    style.top = style.left = '0px';
-                    parent.style.position || (parent.style.position = 'relative');
-                }
-                parent.appendChild(view);
-            }
-        }
-        else {
-            debug.error(`no id: ${inputView}`);
-            this.__createView();
-        }
-    }
-    updateViewSize() {
-        const { width, height, pixelRatio } = this;
-        const { style } = this.view;
-        style.width = width + 'px';
-        style.height = height + 'px';
-        this.view.width = width * pixelRatio;
-        this.view.height = height * pixelRatio;
-    }
-    updateClientBounds() {
-        this.clientBounds = this.view.getBoundingClientRect();
-    }
-    startAutoLayout(autoBounds, listener) {
-        this.autoBounds = autoBounds;
-        this.resizeListener = listener;
-        try {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                this.updateClientBounds();
-                for (const entry of entries)
-                    this.checkAutoBounds(entry.contentRect);
-            });
-            const parent = this.parentView;
-            if (parent) {
-                this.resizeObserver.observe(parent);
-                this.checkAutoBounds(parent.getBoundingClientRect());
-            }
-        }
-        catch (_a) {
-            this.imitateResizeObserver();
-        }
-    }
-    imitateResizeObserver() {
-        if (this.autoLayout) {
-            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);
-        if (width !== this.width || height !== this.height) {
-            const { style } = view;
-            const { pixelRatio } = this;
-            style.marginLeft = x + 'px';
-            style.marginTop = y + 'px';
-            const size = { width, height, pixelRatio };
-            const oldSize = {};
-            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
-            this.resize(size);
-            if (this.width !== undefined)
-                this.resizeListener(new ResizeEvent(size, oldSize));
-        }
-    }
-    stopAutoLayout() {
-        this.autoLayout = false;
-        this.resizeListener = null;
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-    }
-    unrealCanvas() {
-        if (!this.unreal && this.parentView) {
-            const view = this.view;
-            if (view)
-                view.remove();
-            this.view = this.parentView;
-            this.unreal = true;
-        }
-    }
-    destroy() {
-        if (this.view) {
-            this.stopAutoLayout();
-            if (!this.unreal) {
-                const view = this.view;
-                if (view.parentElement)
-                    view.remove();
-            }
-            super.destroy();
-        }
-    }
-}
-
-canvasPatch(CanvasRenderingContext2D.prototype);
-canvasPatch(Path2D.prototype);
-
 const PointerEventHelper = {
     convert(e, local) {
         const base = InteractionHelper.getBase(e);
@@ -1025,7 +1092,7 @@ const WheelEventHelper = {
         let { zoomMode, zoomSpeed } = config;
         const delta = e.deltaY || e.deltaX;
         if (zoomMode) {
-            zoom = !e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta);
+            zoom = (zoomMode === 'mouse') ? true : (!e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta));
             if (e.shiftKey || e.metaKey || e.ctrlKey)
                 zoom = true;
         }
@@ -1035,7 +1102,7 @@ const WheelEventHelper = {
         if (zoom) {
             zoomSpeed = MathHelper.within(zoomSpeed, 0, 1);
             const min = e.deltaY ? config.delta.y : config.delta.x;
-            scale = 1 - delta / (min * 25 * (1 - zoomSpeed) + 10);
+            scale = 1 - delta / (min * 4) * zoomSpeed;
             if (scale < 0.5)
                 scale = 0.5;
             if (scale >= 1.5)
@@ -1062,6 +1129,7 @@ class Interaction extends InteractionBase {
             'pointerdown': this.onPointerDown,
             'mousedown': this.onMouseDown,
             'touchstart': this.onTouchStart,
+            'contextmenu': this.onContextMenu,
             'wheel': this.onWheel,
             'gesturestart': this.onGesturestart,
             'gesturechange': this.onGesturechange,
@@ -1134,6 +1202,11 @@ class Interaction extends InteractionBase {
     onKeyUp(e) {
         this.keyUp(KeyEventHelper.convert(e));
     }
+    onContextMenu(e) {
+        if (this.config.pointer.preventDefaultMenu)
+            e.preventDefault();
+        this.menu(PointerEventHelper.convert(e, this.getLocal(e)));
+    }
     onScroll() {
         this.canvas.updateClientBounds();
     }
@@ -1288,6 +1361,29 @@ class Interaction extends InteractionBase {
         this.preventDefaultWheel(e);
         this.transformEnd();
     }
+    setCursor(cursor) {
+        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(',');
+    }
+    eachCursor(cursor, list, level = 0) {
+        level++;
+        if (cursor instanceof Array) {
+            cursor.forEach(item => this.eachCursor(item, list, level));
+        }
+        else {
+            const custom = typeof cursor === 'string' && Cursor.get(cursor);
+            if (custom && level < 2) {
+                this.eachCursor(custom, list, level);
+            }
+            else {
+                list.push(cursor);
+            }
+        }
+    }
     destroy() {
         if (this.view) {
             super.destroy();
@@ -1297,416 +1393,34 @@ class Interaction extends InteractionBase {
     }
 }
 
-const { mineType, fileType } = FileHelper;
-Object.assign(Creator, {
-    canvas: (options, manager) => new LeaferCanvas(options, manager),
-    image: (options) => new LeaferImage(options),
-    hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
-    interaction: (target, canvas, selector, options) => new Interaction(target, canvas, selector, options),
-});
-function useCanvas(_canvasType, _power) {
-    Platform.origin = {
-        createCanvas(width, height) {
-            const canvas = document.createElement('canvas');
-            canvas.width = width;
-            canvas.height = height;
-            return canvas;
-        },
-        canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
-        canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
-        canvasSaveAs: (canvas, filename, quality) => {
-            return new Promise((resolve) => {
-                let el = document.createElement('a');
-                el.href = canvas.toDataURL(mineType(fileType(filename)), quality);
-                el.download = filename;
-                document.body.appendChild(el);
-                el.click();
-                document.body.removeChild(el);
-                resolve();
-            });
-        },
-        loadImage(src) {
-            return new Promise((resolve, reject) => {
-                const img = new Image();
-                img.setAttribute('crossOrigin', 'anonymous');
-                img.crossOrigin = 'anonymous';
-                img.onload = () => { resolve(img); };
-                img.onerror = (e) => { reject(e); };
-                if (!src.startsWith('data:') && Platform.imageSuffix)
-                    src += (src.includes("?") ? "&" : "?") + Platform.imageSuffix;
-                img.src = src;
+function fillText(ui, canvas) {
+    let row;
+    const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
+    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);
             });
         }
-    };
-    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); };
-Platform.devicePixelRatio = devicePixelRatio;
-Platform.realtimeLayout = true;
-const { userAgent } = navigator;
-if (userAgent.indexOf("Firefox") > -1) {
-    Platform.conicGradientRotate90 = true;
-    Platform.intWheelDeltaY = true;
-    Platform.syncDomFont = true;
-}
-else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
-    Platform.fullImageShadow = true;
-}
-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';
+        if (decorationY)
+            canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
+    }
 }
 
-const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper$1, rotate } = MatrixHelper;
-function fillOrFitMode(data, mode, box, width, height, rotation) {
-    const transform = get$4();
-    const swap = rotation && rotation !== 180;
-    const sw = box.width / (swap ? height : width);
-    const sh = box.height / (swap ? width : height);
-    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
-    const x = box.x + (box.width - width * scale) / 2;
-    const y = box.y + (box.height - height * scale) / 2;
-    translate$1(transform, x, y);
-    scaleHelper$1(transform, scale);
-    if (rotation)
-        rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
-    data.scaleX = data.scaleY = scale;
-    data.transform = transform;
-}
-function clipMode(data, box, offset, scale, rotation) {
-    const transform = get$4();
-    translate$1(transform, box.x, box.y);
-    if (offset)
-        translate$1(transform, offset.x, offset.y);
-    if (scale) {
-        typeof scale === 'number' ? scaleHelper$1(transform, scale) : scaleHelper$1(transform, scale.x, scale.y);
-        data.scaleX = transform.a;
-        data.scaleY = transform.d;
-    }
-    if (rotation)
-        rotate(transform, rotation);
-    data.transform = transform;
-}
-function repeatMode(data, box, width, height, scale, rotation) {
-    const transform = get$4();
-    if (rotation) {
-        rotate(transform, rotation);
-        switch (rotation) {
-            case 90:
-                translate$1(transform, height, 0);
-                break;
-            case 180:
-                translate$1(transform, width, height);
-                break;
-            case 270:
-                translate$1(transform, 0, width);
-                break;
-        }
-    }
-    translate$1(transform, box.x, box.y);
-    if (scale) {
-        scaleOfOuter$2(transform, box, scale);
-        data.scaleX = data.scaleY = scale;
-    }
-    data.transform = transform;
-}
-
-const { get: get$3, translate } = MatrixHelper;
-function createData(leafPaint, image, paint, box) {
-    let { width, height } = image;
-    const { opacity, mode, offset, scale, rotation, blendMode } = paint;
-    const sameBox = box.width === width && box.height === height;
-    if (blendMode)
-        leafPaint.blendMode = blendMode;
-    const data = leafPaint.data = { mode };
-    switch (mode) {
-        case 'strench':
-            if (!sameBox)
-                width = box.width, height = box.height;
-            if (box.x || box.y) {
-                data.transform = get$3();
-                translate(data.transform, box.x, box.y);
-            }
-            break;
-        case 'clip':
-            if (offset || scale || rotation)
-                clipMode(data, box, offset, scale, rotation);
-            break;
-        case 'repeat':
-            if (!sameBox || scale || rotation)
-                repeatMode(data, box, width, height, scale, rotation);
-            break;
-        case 'fit':
-        case 'cover':
-        default:
-            if (!sameBox || rotation)
-                fillOrFitMode(data, mode, box, width, height, rotation);
-    }
-    data.width = width;
-    data.height = height;
-    if (opacity)
-        data.opacity = opacity;
-}
-
-function image(ui, attrName, attrValue, box, firstUse) {
-    const leafPaint = { type: attrValue.type };
-    const image = leafPaint.image = ImageManager.get(attrValue);
-    const event = (firstUse || image.loading) && { target: ui, image, attrName, attrValue };
-    if (image.ready) {
-        if (hasNaturalSize(ui, attrName, image))
-            createData(leafPaint, image, attrValue, box);
-        if (firstUse) {
-            emit(ImageEvent.LOAD, event);
-            emit(ImageEvent.LOADED, event);
-        }
-    }
-    else if (image.error) {
-        if (firstUse) {
-            ui.forceUpdate('surface');
-            event.error = image.error;
-            emit(ImageEvent.ERROR, event);
-        }
-    }
-    else {
-        if (firstUse)
-            emit(ImageEvent.LOAD, event);
-        leafPaint.loadId = image.load(() => {
-            if (!ui.destroyed) {
-                if (hasNaturalSize(ui, attrName, image)) {
-                    createData(leafPaint, image, attrValue, box);
-                    ui.forceUpdate('surface');
-                }
-                emit(ImageEvent.LOADED, event);
-            }
-        }, (error) => {
-            ui.forceUpdate('surface');
-            event.error = error;
-            emit(ImageEvent.ERROR, event);
-        });
-    }
-    return leafPaint;
-}
-function hasNaturalSize(ui, attrName, image) {
-    if (attrName === 'fill' && !ui.__.__naturalWidth) {
-        const { __: d } = ui;
-        d.__naturalWidth = image.width;
-        d.__naturalHeight = image.height;
-        if (!d.__getInput('width') || !d.__getInput('height')) {
-            ui.forceUpdate('width');
-            return false;
-        }
-    }
-    return true;
-}
-function emit(type, data) {
-    if (data.target.hasEvent(type))
-        data.target.emitEvent(new ImageEvent(type, data));
-}
-
-/******************************************************************************
-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 */
-
-
-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;
-};
-
-const { get: get$2, scale: scaleHelper, copy: copy$1 } = MatrixHelper;
-function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = ui.__world;
-    const id = scaleX + '-' + scaleY;
-    if (paint.patternId !== id && !ui.destroyed) {
-        paint.patternId = id;
-        scaleX = Math.abs(scaleX);
-        scaleY = Math.abs(scaleY);
-        const { image, data } = paint;
-        const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096);
-        const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096);
-        let scale, matrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
-        if (sx) {
-            matrix = get$2();
-            copy$1(matrix, transform);
-            scaleHelper(matrix, 1 / sx, 1 / sy);
-            scaleX *= sx;
-            scaleY *= sy;
-        }
-        scaleX *= pixelRatio;
-        scaleY *= pixelRatio;
-        width *= scaleX;
-        height *= scaleY;
-        if (width > maxWidth || height > maxHeight) {
-            scale = Math.max(width / maxWidth, height / maxHeight);
-        }
-        if (scale) {
-            scaleX /= scale;
-            scaleY /= scale;
-            width /= scale;
-            height /= scale;
-        }
-        if (sx) {
-            scaleX /= sx;
-            scaleY /= sy;
-        }
-        if (transform || scaleX !== 1 || scaleY !== 1) {
-            if (!matrix) {
-                matrix = get$2();
-                if (transform)
-                    copy$1(matrix, transform);
-            }
-            scaleHelper(matrix, 1 / scaleX, 1 / scaleY);
-        }
-        const style = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
-        try {
-            if (paint.transform)
-                paint.transform = null;
-            if (matrix)
-                style.setTransform ? style.setTransform(matrix) : paint.transform = matrix;
-        }
-        catch (_a) {
-            paint.transform = matrix;
-        }
-        paint.style = style;
-        return true;
-    }
-    else {
-        return false;
-    }
-}
-
-function checkImage(ui, canvas, paint, allowPaint) {
-    const { scaleX, scaleY } = ui.__world;
-    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
-        return false;
-    }
-    else {
-        if (allowPaint) {
-            if (paint.image.isSVG && paint.data.mode !== 'repeat') {
-                let { width, height } = paint.data;
-                width *= scaleX * canvas.pixelRatio;
-                height *= scaleY * canvas.pixelRatio;
-                allowPaint = width > 4096 || height > 4096;
-            }
-            else {
-                allowPaint = false;
-            }
-        }
-        if (allowPaint) {
-            canvas.save();
-            canvas.clip();
-            const { data } = paint;
-            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.view, 0, 0, data.width, data.height);
-            canvas.restore();
-            return true;
-        }
-        else {
-            if (!paint.style) {
-                createPattern(ui, paint, canvas.pixelRatio);
-            }
-            else {
-                ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                    if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
-                        ui.forceUpdate('surface');
-                }), 300);
-            }
-            return false;
-        }
-    }
-}
-
-function recycleImage(data, attrName) {
-    const paints = (attrName === 'fill' ? data._fill : data._stroke);
-    if (paints instanceof Array) {
-        let image, recycleMap, input, url;
-        for (let i = 0, len = paints.length; i < len; i++) {
-            image = paints[i].image;
-            url = image && image.url;
-            if (url) {
-                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];
-                    }
-                    image.unload(paints[i].loadId, !input.some((item) => item.url === url));
-                }
-            }
-        }
-        return recycleMap;
-    }
-    return null;
-}
-
-function fillText(ui, canvas) {
-    let row;
-    const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
-    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 (decorationY)
-            canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
-    }
-}
-
-function fill(ui, canvas, fill) {
+function fill(fill, ui, canvas) {
     canvas.fillStyle = fill;
     ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
 }
-function fills(ui, canvas, fills) {
+function fills(fills, ui, canvas) {
     let item;
     const { windingRule, __font } = ui.__;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
-        if (item.image && checkImage(ui, canvas, item, !__font))
+        if (item.image && PaintImage.checkImage(ui, canvas, item, !__font))
             continue;
         if (item.style) {
             canvas.fillStyle = item.style;
@@ -1732,33 +1446,38 @@ function fills(ui, canvas, fills) {
     }
 }
 
-function strokeText(ui, canvas, stroke) {
+function strokeText(stroke, ui, canvas) {
     const { strokeAlign } = ui.__;
     const isStrokes = typeof stroke !== 'string';
     switch (strokeAlign) {
         case 'center':
             canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
-            isStrokes ? drawStrokesStyle(ui, stroke, canvas, true) : drawTextStroke(ui, canvas);
+            isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
             break;
         case 'inside':
-            drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes);
+            drawAlignStroke('inside', stroke, isStrokes, ui, canvas);
             break;
         case 'outside':
-            drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes);
+            drawAlignStroke('outside', stroke, isStrokes, ui, canvas);
             break;
     }
 }
-function drawAlignStroke(ui, canvas, stroke, align, isStrokes) {
-    const { strokeWidth, __font } = ui.__;
-    const out = canvas.getSameCanvas(true);
-    out.setStroke(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__);
+function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
+    const { __strokeWidth, __font } = ui.__;
+    const out = canvas.getSameCanvas(true, true);
+    out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__);
     out.font = __font;
-    isStrokes ? drawStrokesStyle(ui, stroke, out, true) : drawTextStroke(ui, out);
+    isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
-    out.recycle();
+    if (ui.__worldFlipped) {
+        canvas.copyWorldByReset(out, ui.__nowWorld);
+    }
+    else {
+        canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
+    }
+    out.recycle(ui.__nowWorld);
 }
 function drawTextStroke(ui, canvas) {
     let row;
@@ -1777,11 +1496,11 @@ function drawTextStroke(ui, canvas) {
             canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
 }
-function drawStrokesStyle(ui, strokes, canvas, isText) {
+function drawStrokesStyle(strokes, isText, ui, canvas) {
     let item;
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i];
-        if (item.image && checkImage(ui, canvas, item, false))
+        if (item.image && PaintImage.checkImage(ui, canvas, item, false))
             continue;
         if (item.style) {
             canvas.strokeStyle = item.style;
@@ -1797,121 +1516,575 @@ function drawStrokesStyle(ui, strokes, canvas, isText) {
     }
 }
 
-function stroke(ui, canvas, stroke) {
+function stroke(stroke, ui, canvas) {
     const options = ui.__;
-    const { strokeWidth, strokeAlign, __font } = options;
-    if (!strokeWidth)
+    const { __strokeWidth, strokeAlign, __font } = options;
+    if (!__strokeWidth)
         return;
     if (__font) {
-        strokeText(ui, canvas, stroke);
+        strokeText(stroke, ui, canvas);
     }
     else {
         switch (strokeAlign) {
             case 'center':
-                canvas.setStroke(stroke, strokeWidth, options);
+                canvas.setStroke(stroke, __strokeWidth, options);
                 canvas.stroke();
                 break;
             case 'inside':
                 canvas.save();
-                canvas.setStroke(stroke, strokeWidth * 2, options);
+                canvas.setStroke(stroke, __strokeWidth * 2, options);
                 options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
                 canvas.stroke();
                 canvas.restore();
                 break;
             case 'outside':
-                const out = canvas.getSameCanvas(true);
-                out.setStroke(stroke, strokeWidth * 2, ui.__);
+                const out = canvas.getSameCanvas(true, true);
+                out.setStroke(stroke, __strokeWidth * 2, options);
                 ui.__drawRenderPath(out);
                 out.stroke();
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(ui.__layout.renderBounds);
-                canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
-                out.recycle();
+                if (ui.__worldFlipped) {
+                    canvas.copyWorldByReset(out, ui.__nowWorld);
+                }
+                else {
+                    canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
+                }
+                out.recycle(ui.__nowWorld);
+                break;
+        }
+    }
+}
+function strokes(strokes, ui, canvas) {
+    const options = ui.__;
+    const { __strokeWidth, strokeAlign, __font } = options;
+    if (!__strokeWidth)
+        return;
+    if (__font) {
+        strokeText(strokes, ui, canvas);
+    }
+    else {
+        switch (strokeAlign) {
+            case 'center':
+                canvas.setStroke(undefined, __strokeWidth, options);
+                drawStrokesStyle(strokes, false, ui, canvas);
+                break;
+            case 'inside':
+                canvas.save();
+                canvas.setStroke(undefined, __strokeWidth * 2, options);
+                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
+                drawStrokesStyle(strokes, false, ui, canvas);
+                canvas.restore();
+                break;
+            case 'outside':
+                const { renderBounds } = ui.__layout;
+                const out = canvas.getSameCanvas(true, true);
+                ui.__drawRenderPath(out);
+                out.setStroke(undefined, __strokeWidth * 2, options);
+                drawStrokesStyle(strokes, false, ui, out);
+                options.windingRule ? out.clip(options.windingRule) : out.clip();
+                out.clearWorld(renderBounds);
+                if (ui.__worldFlipped) {
+                    canvas.copyWorldByReset(out, ui.__nowWorld);
+                }
+                else {
+                    canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
+                }
+                out.recycle(ui.__nowWorld);
+                break;
+        }
+    }
+}
+
+const { getSpread, getOuterOf, getByMove, 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)) {
+        worldCanvas = canvas;
+        bounds = shapeBounds = nowWorld;
+    }
+    else {
+        const { renderShapeSpread: spread } = ui.__layout;
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, nowWorld);
+        fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
+        let { a: fitScaleX, d: fitScaleY } = fitMatrix;
+        if (fitMatrix.a < 1) {
+            worldCanvas = current.getSameCanvas();
+            ui.__renderShape(worldCanvas, options);
+            scaleX *= fitScaleX;
+            scaleY *= fitScaleY;
+        }
+        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) });
+    }
+    ui.__renderShape(canvas, options);
+    return {
+        canvas, matrix: fitMatrix, bounds,
+        worldCanvas, shapeBounds, scaleX, scaleY
+    };
+}
+
+let recycleMap;
+function compute(attrName, ui) {
+    const data = ui.__, leafPaints = [];
+    let paints = data.__input[attrName], hasOpacityPixel;
+    if (!(paints instanceof Array))
+        paints = [paints];
+    recycleMap = PaintImage.recycleImage(attrName, data);
+    for (let i = 0, len = paints.length, item; i < len; i++) {
+        item = getLeafPaint(attrName, paints[i], ui);
+        if (item)
+            leafPaints.push(item);
+    }
+    data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
+    if (leafPaints.length && leafPaints[0].image)
+        hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
+    if (attrName === 'fill') {
+        data.__pixelFill = hasOpacityPixel;
+    }
+    else {
+        data.__pixelStroke = hasOpacityPixel;
+    }
+}
+function getLeafPaint(attrName, paint, ui) {
+    if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
+        return undefined;
+    const { boxBounds } = ui.__layout;
+    switch (paint.type) {
+        case 'solid':
+            let { type, blendMode, color, opacity } = paint;
+            return { type, blendMode, style: ColorConvert.string(color, opacity) };
+        case 'image':
+            return PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        case 'linear':
+            return PaintGradient.linearGradient(paint, boxBounds);
+        case 'radial':
+            return PaintGradient.radialGradient(paint, boxBounds);
+        case 'angular':
+            return PaintGradient.conicGradient(paint, boxBounds);
+        default:
+            return paint.r ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
+    }
+}
+
+const PaintModule = {
+    compute,
+    fill,
+    fills,
+    fillText,
+    stroke,
+    strokes,
+    strokeText,
+    drawTextStroke,
+    shape
+};
+
+let origin = {};
+const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
+function fillOrFitMode(data, mode, box, width, height, rotation) {
+    const transform = get$4();
+    const swap = rotation && rotation !== 180;
+    const sw = box.width / (swap ? height : width);
+    const sh = box.height / (swap ? width : height);
+    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
+    const x = box.x + (box.width - width * scale) / 2;
+    const y = box.y + (box.height - height * scale) / 2;
+    translate$1(transform, x, y);
+    scaleHelper(transform, scale);
+    if (rotation)
+        rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
+    data.scaleX = data.scaleY = scale;
+    data.transform = transform;
+}
+function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
+    const transform = get$4();
+    translate$1(transform, box.x, box.y);
+    if (x || y)
+        translate$1(transform, x, y);
+    if (scaleX) {
+        scaleHelper(transform, scaleX, scaleY);
+        data.scaleX = transform.a;
+        data.scaleY = transform.d;
+    }
+    if (rotation)
+        rotate(transform, rotation);
+    data.transform = transform;
+}
+function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation) {
+    const transform = get$4();
+    if (rotation) {
+        rotate(transform, rotation);
+        switch (rotation) {
+            case 90:
+                translate$1(transform, height, 0);
+                break;
+            case 180:
+                translate$1(transform, width, height);
                 break;
+            case 270:
+                translate$1(transform, 0, width);
+                break;
+        }
+    }
+    origin.x = box.x;
+    origin.y = box.y;
+    if (x || y)
+        origin.x += x, origin.y += y;
+    translate$1(transform, origin.x, origin.y);
+    if (scaleX) {
+        scaleOfOuter$2(transform, origin, scaleX, scaleY);
+        data.scaleX = scaleX;
+        data.scaleY = scaleY;
+    }
+    data.transform = transform;
+}
+
+const { get: get$3, translate } = MatrixHelper;
+const tempBox = new Bounds();
+function createData(leafPaint, image, paint, box) {
+    let { width, height } = image;
+    if (paint.padding)
+        box = tempBox.set(box).shrink(paint.padding);
+    const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint;
+    const sameBox = box.width === width && box.height === height;
+    if (blendMode)
+        leafPaint.blendMode = blendMode;
+    const data = leafPaint.data = { mode };
+    let x, y, scaleX, scaleY;
+    if (offset)
+        x = offset.x, y = offset.y;
+    if (size) {
+        scaleX = (typeof size === 'number' ? size : size.width) / width;
+        scaleY = (typeof size === 'number' ? size : size.height) / height;
+    }
+    else if (scale) {
+        scaleX = typeof scale === 'number' ? scale : scale.x;
+        scaleY = typeof scale === 'number' ? scale : scale.y;
+    }
+    switch (mode) {
+        case 'strench':
+            if (!sameBox)
+                width = box.width, height = box.height;
+            break;
+        case 'clip':
+            if (offset || scaleX || rotation)
+                clipMode(data, box, x, y, scaleX, scaleY, rotation);
+            break;
+        case 'repeat':
+            if (!sameBox || scaleX || rotation)
+                repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation);
+            if (!repeat)
+                data.repeat = 'repeat';
+            break;
+        case 'fit':
+        case 'cover':
+        default:
+            if (!sameBox || rotation)
+                fillOrFitMode(data, mode, box, width, height, rotation);
+    }
+    if (!data.transform) {
+        if (box.x || box.y) {
+            data.transform = get$3();
+            translate(data.transform, box.x, box.y);
+        }
+    }
+    data.width = width;
+    data.height = height;
+    if (opacity)
+        data.opacity = opacity;
+    if (repeat)
+        data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
+}
+
+let cache, box = new Bounds();
+const { 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 };
+        cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
+    }
+    if (firstUse || image.loading)
+        event = { image, 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 {
+        ignoreRender(ui, true);
+        if (firstUse)
+            onLoad(ui, event);
+        leafPaint.loadId = image.load(() => {
+            ignoreRender(ui, false);
+            if (!ui.destroyed) {
+                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
+                    if (image.hasOpacityPixel)
+                        ui.__layout.hitCanvasChanged = true;
+                    ui.forceUpdate('surface');
+                }
+                onLoadSuccess(ui, event);
+            }
+            leafPaint.loadId = null;
+        }, (error) => {
+            ignoreRender(ui, false);
+            onLoadError(ui, event, error);
+            leafPaint.loadId = null;
+        });
+    }
+    return leafPaint;
+}
+function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
+    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');
+            if (ui.__proxyData) {
+                ui.setProxyAttr('width', data.width);
+                ui.setProxyAttr('height', data.height);
+            }
+            return false;
+        }
+    }
+    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');
+    emit(ui, ImageEvent.ERROR, event);
+}
+function emit(ui, 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 { get: get$2, scale, copy: copy$1 } = MatrixHelper;
+const { ceil, abs: abs$1 } = Math;
+function createPattern(ui, paint, pixelRatio) {
+    let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    const id = scaleX + '-' + scaleY;
+    if (paint.patternId !== id && !ui.destroyed) {
+        scaleX = abs$1(scaleX);
+        scaleY = abs$1(scaleY);
+        const { image, data } = paint;
+        let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
+        if (sx) {
+            imageMatrix = get$2();
+            copy$1(imageMatrix, transform);
+            scale(imageMatrix, 1 / sx, 1 / sy);
+            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;
+        }
+        let maxSize = Platform.image.maxPatternSize;
+        if (!image.isSVG) {
+            const imageSize = image.width * image.height;
+            if (maxSize > imageSize)
+                maxSize = imageSize;
+        }
+        if (size > maxSize)
+            imageScale = Math.sqrt(size / maxSize);
+        if (imageScale) {
+            scaleX /= imageScale;
+            scaleY /= imageScale;
+            width /= imageScale;
+            height /= imageScale;
+        }
+        if (sx) {
+            scaleX /= sx;
+            scaleY /= sy;
         }
-    }
-}
-function strokes(ui, canvas, strokes) {
-    const options = ui.__;
-    const { strokeWidth, strokeAlign, __font } = options;
-    if (!strokeWidth)
-        return;
-    if (__font) {
-        strokeText(ui, canvas, strokes);
+        if (transform || scaleX !== 1 || scaleY !== 1) {
+            if (!imageMatrix) {
+                imageMatrix = get$2();
+                if (transform)
+                    copy$1(imageMatrix, transform);
+            }
+            scale(imageMatrix, 1 / scaleX, 1 / scaleY);
+        }
+        const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, opacity);
+        const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
+        paint.style = pattern;
+        paint.patternId = id;
+        return true;
     }
     else {
-        switch (strokeAlign) {
-            case 'center':
-                canvas.setStroke(undefined, strokeWidth, options);
-                drawStrokesStyle(ui, strokes, canvas);
-                break;
-            case 'inside':
-                canvas.save();
-                canvas.setStroke(undefined, strokeWidth * 2, options);
-                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                drawStrokesStyle(ui, strokes, canvas);
-                canvas.restore();
-                break;
-            case 'outside':
-                const { renderBounds } = ui.__layout;
-                const out = canvas.getSameCanvas(true);
-                ui.__drawRenderPath(out);
-                out.setStroke(undefined, strokeWidth * 2, ui.__);
-                drawStrokesStyle(ui, strokes, out);
-                options.windingRule ? out.clip(options.windingRule) : out.clip();
-                out.clearWorld(renderBounds);
-                canvas.copyWorldToInner(out, ui.__world, renderBounds);
-                out.recycle();
-                break;
-        }
+        return false;
     }
 }
 
-const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
-function shape(ui, current, options) {
-    const canvas = current.getSameCanvas();
-    let bounds, matrix, shapeBounds;
-    let worldCanvas;
-    const { __world } = ui;
-    let { scaleX, scaleY } = __world;
-    if (scaleX < 0)
-        scaleX = -scaleX;
-    if (scaleY < 0)
-        scaleY = -scaleY;
-    if (!current.bounds.includes(__world, options.matrix)) {
-        const { renderShapeSpread: spread } = ui.__layout;
-        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, __world, options.matrix);
-        matrix = current.bounds.getFitMatrix(worldClipBounds);
-        if (matrix.a < 1) {
-            worldCanvas = current.getSameCanvas();
-            ui.__renderShape(worldCanvas, options);
-            scaleX *= matrix.a;
-            scaleY *= matrix.d;
-        }
-        shapeBounds = getOuterOf(__world, matrix);
-        bounds = getByMove(shapeBounds, -matrix.e, -matrix.f);
-        if (options.matrix)
-            matrix.multiply(options.matrix);
-        options = Object.assign(Object.assign({}, options), { matrix });
+/******************************************************************************
+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 */
+
+
+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;
+};
+
+const { abs } = Math;
+function checkImage(ui, canvas, paint, allowPaint) {
+    const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+        return false;
     }
     else {
-        if (options.matrix) {
-            scaleX *= options.matrix.a;
-            scaleY *= options.matrix.d;
-            bounds = shapeBounds = getOuterOf(__world, options.matrix);
+        const { data } = paint;
+        if (allowPaint) {
+            if (!data.repeat) {
+                let { width, height } = data;
+                width *= abs(scaleX) * canvas.pixelRatio;
+                height *= abs(scaleY) * canvas.pixelRatio;
+                if (data.scaleX) {
+                    width *= data.scaleX;
+                    height *= data.scaleY;
+                }
+                allowPaint = width * height > Platform.image.maxCacheSize;
+            }
+            else {
+                allowPaint = false;
+            }
+        }
+        if (allowPaint) {
+            canvas.save();
+            canvas.clip();
+            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.view, 0, 0, data.width, data.height);
+            canvas.restore();
+            return true;
         }
         else {
-            bounds = shapeBounds = __world;
+            if (!paint.style || Export.running) {
+                createPattern(ui, paint, canvas.pixelRatio);
+            }
+            else {
+                if (!paint.patternTask) {
+                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                        paint.patternTask = null;
+                        if (canvas.bounds.hit(ui.__nowWorld))
+                            createPattern(ui, paint, canvas.pixelRatio);
+                        ui.forceUpdate('surface');
+                    }), 300);
+                }
+            }
+            return false;
         }
-        worldCanvas = canvas;
     }
-    ui.__renderShape(canvas, options);
-    return {
-        canvas, matrix, bounds,
-        worldCanvas, shapeBounds, scaleX, scaleY
-    };
 }
 
+function recycleImage(attrName, data) {
+    const paints = data['_' + attrName];
+    if (paints instanceof Array) {
+        let image, recycleMap, input, url;
+        for (let i = 0, len = paints.length; i < len; i++) {
+            image = paints[i].image;
+            url = image && image.url;
+            if (url) {
+                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];
+                    }
+                    image.unload(paints[i].loadId, !input.some((item) => item.url === url));
+                }
+            }
+        }
+        return recycleMap;
+    }
+    return null;
+}
+
+const PaintImageModule = {
+    image,
+    createData,
+    fillOrFitMode,
+    clipMode,
+    repeatMode,
+    createPattern,
+    checkImage,
+    recycleImage
+};
+
 const defaultFrom$2 = { x: 0.5, y: 0 };
 const defaultTo$2 = { x: 0.5, y: 1 };
 function linearGradient(paint, box) {
@@ -1929,7 +2102,7 @@ function applyStops(gradient, stops, opacity) {
     let stop;
     for (let i = 0, len = stops.length; i < len; i++) {
         stop = stops[i];
-        gradient.addColorStop(stop.offset, ColorConvert$1.string(stop.color, opacity));
+        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
     }
 }
 
@@ -1991,62 +2164,18 @@ function conicGradient(paint, box) {
     return data;
 }
 
-let recycleMap;
-function compute(ui, attrName) {
-    const value = [];
-    let item;
-    let paints = ui.__.__input[attrName];
-    if (!(paints instanceof Array))
-        paints = [paints];
-    recycleMap = recycleImage(ui.__, attrName);
-    for (let i = 0, len = paints.length; i < len; i++) {
-        item = getLeafPaint(ui, paints[i], attrName);
-        if (item)
-            value.push(item);
-    }
-    ui.__['_' + attrName] = value.length ? value : undefined;
-}
-function getLeafPaint(ui, paint, attrName) {
-    if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
-        return undefined;
-    const { boxBounds } = ui.__layout;
-    switch (paint.type) {
-        case 'solid':
-            let { type, blendMode, color, opacity } = paint;
-            return { type, blendMode, style: ColorConvert$1.string(color, opacity) };
-        case 'image':
-            return image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
-        case 'linear':
-            return linearGradient(paint, boxBounds);
-        case 'radial':
-            return radialGradient(paint, boxBounds);
-        case 'angular':
-            return conicGradient(paint, boxBounds);
-        default:
-            return paint.r ? { type: 'solid', style: ColorConvert$1.string(paint) } : undefined;
-    }
-}
-
-var UIPaint = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    compute: compute,
-    drawTextStroke: drawTextStroke,
-    fill: fill,
-    fillText: fillText,
-    fills: fills,
-    recycleImage: recycleImage,
-    shape: shape,
-    stroke: stroke,
-    strokeText: strokeText,
-    strokes: strokes
-});
+const PaintGradientModule = {
+    linearGradient,
+    radialGradient,
+    conicGradient
+};
 
 const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
 const tempBounds = {};
 const offsetOutBounds$1 = {};
-function shadow(ui, current, shape, _options) {
+function shadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __world, __layout } = ui;
+    const { __nowWorld: nowWorld, __layout } = ui;
     const { shadow } = ui.__;
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
     const other = current.getSameCanvas();
@@ -2061,21 +2190,21 @@ function shadow(ui, current, shape, _options) {
             other.restore();
             other.save();
             if (worldCanvas) {
-                other.copyWorld(other, bounds, __world, 'copy');
-                copyBounds = __world;
+                other.copyWorld(other, bounds, nowWorld, 'copy');
+                copyBounds = nowWorld;
             }
-            worldCanvas ? other.copyWorld(worldCanvas, __world, __world, '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');
         }
-        if (ui.__hasMirror) {
-            current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
+        if (ui.__worldFlipped) {
+            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
         }
         else {
             current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
         }
         if (end && index < end)
-            other.clear();
+            other.clearWorld(copyBounds, true);
     });
-    other.recycle();
+    other.recycle(copyBounds);
 }
 function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
     const { bounds, shapeBounds } = shape;
@@ -2106,9 +2235,9 @@ function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
 
 const { toOffsetOutBounds } = BoundsHelper;
 const offsetOutBounds = {};
-function innerShadow(ui, current, shape, _options) {
+function innerShadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __world, __layout: __layout } = ui;
+    const { __nowWorld: nowWorld, __layout: __layout } = ui;
     const { innerShadow } = ui.__;
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
     const other = current.getSameCanvas();
@@ -2121,40 +2250,115 @@ function innerShadow(ui, current, shape, _options) {
         drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
         other.restore();
         if (worldCanvas) {
-            other.copyWorld(other, bounds, __world, 'copy');
-            other.copyWorld(worldCanvas, __world, __world, 'source-out');
-            copyBounds = __world;
+            other.copyWorld(other, bounds, nowWorld, 'copy');
+            other.copyWorld(worldCanvas, nowWorld, nowWorld, 'source-out');
+            copyBounds = nowWorld;
         }
         else {
             other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
             copyBounds = bounds;
         }
         other.fillWorld(copyBounds, item.color, 'source-in');
-        if (ui.__hasMirror) {
-            current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
+        if (ui.__worldFlipped) {
+            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
         }
         else {
             current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
         }
         if (end && index < end)
-            other.clear();
+            other.clearWorld(copyBounds, true);
     });
-    other.recycle();
+    other.recycle(copyBounds);
 }
 
 function blur(ui, current, origin) {
     const { blur } = ui.__;
-    origin.setWorldBlur(blur * ui.__world.a);
-    origin.copyWorldToInner(current, ui.__world, ui.__layout.renderBounds);
+    origin.setWorldBlur(blur * ui.__nowWorld.a);
+    origin.copyWorldToInner(current, ui.__nowWorld, ui.__layout.renderBounds);
     origin.filter = 'none';
 }
 
-var UIEffect = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    blur: blur,
-    innerShadow: innerShadow,
-    shadow: shadow
-});
+function backgroundBlur(_ui, _current, _shape) {
+}
+
+const EffectModule = {
+    shadow,
+    innerShadow,
+    blur,
+    backgroundBlur
+};
+
+const { excludeRenderBounds } = LeafBoundsHelper;
+Group.prototype.__renderMask = function (canvas, options) {
+    let child, maskCanvas, contentCanvas, maskOpacity, currentMask;
+    const { children } = this;
+    for (let i = 0, len = children.length; i < len; i++) {
+        child = children[i];
+        if (child.__.mask) {
+            if (currentMask) {
+                maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
+                maskCanvas = contentCanvas = null;
+            }
+            if (child.__.maskType === 'path') {
+                if (child.opacity < 1) {
+                    currentMask = 'opacity-path';
+                    maskOpacity = child.opacity;
+                    if (!contentCanvas)
+                        contentCanvas = getCanvas(canvas);
+                }
+                else {
+                    currentMask = 'path';
+                    canvas.save();
+                }
+                child.__clip(contentCanvas || canvas, options);
+            }
+            else {
+                currentMask = 'alpha';
+                if (!maskCanvas)
+                    maskCanvas = getCanvas(canvas);
+                if (!contentCanvas)
+                    contentCanvas = getCanvas(canvas);
+                child.__render(maskCanvas, options);
+            }
+            if (child.__.maskType !== 'clipping')
+                continue;
+        }
+        if (excludeRenderBounds(child, options))
+            continue;
+        child.__render(contentCanvas || canvas, options);
+    }
+    maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
+};
+function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity) {
+    switch (maskMode) {
+        case 'alpha':
+            usePixelMask(leaf, canvas, contentCanvas, maskCanvas);
+            break;
+        case 'opacity-path':
+            copyContent(leaf, canvas, contentCanvas, maskOpacity);
+            break;
+        case 'path':
+            canvas.restore();
+    }
+}
+function getCanvas(canvas) {
+    return canvas.getSameCanvas(false, true);
+}
+function usePixelMask(leaf, canvas, content, mask) {
+    const realBounds = leaf.__nowWorld;
+    content.resetTransform();
+    content.opacity = 1;
+    content.useMask(mask, realBounds);
+    mask.recycle(realBounds);
+    copyContent(leaf, canvas, content, 1);
+}
+function copyContent(leaf, canvas, content, maskOpacity) {
+    const realBounds = leaf.__nowWorld;
+    canvas.resetTransform();
+    canvas.opacity = maskOpacity;
+    canvas.copyWorld(content, realBounds);
+    content.recycle(realBounds);
+}
 
 const money = '¥￥＄€£￡¢￠';
 const letter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
@@ -2268,7 +2472,7 @@ function getTextCase(char, textCase, firstChar) {
 const { trimRight } = TextRowHelper;
 const { Letter, Single, Before, After, Symbol, Break } = CharType;
 let word, row, wordWidth, rowWidth, realWidth;
-let char, charWidth, charType, lastCharType, langBreak, afterBreak, paraStart;
+let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
 let textDrawData, rows = [], bounds;
 function createRows(drawData, content, style) {
     textDrawData = drawData;
@@ -2279,9 +2483,11 @@ function createRows(drawData, content, style) {
     const { width, height } = bounds;
     const charMode = width || height || __letterSpacing || (textCase !== 'none');
     if (charMode) {
+        const wrap = style.textWrap !== 'none';
+        const breakAll = style.textWrap === 'break';
         paraStart = true;
         lastCharType = null;
-        wordWidth = rowWidth = 0;
+        startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
         word = { data: [] }, row = { words: [] };
         for (let i = 0, len = content.length; i < len; i++) {
             char = content[i];
@@ -2297,21 +2503,31 @@ function createRows(drawData, content, style) {
                 if (charType === Letter && textCase !== 'none')
                     char = getTextCase(char, textCase, !wordWidth);
                 charWidth = canvas.measureText(char).width;
-                if (__letterSpacing)
+                if (__letterSpacing) {
+                    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));
                 realWidth = paraStart && paraIndent ? width - paraIndent : width;
-                if (width && rowWidth + wordWidth + charWidth > realWidth) {
-                    if (!afterBreak)
-                        afterBreak = charType === Letter && lastCharType == After;
-                    if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                if (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) {
+                    if (breakAll) {
                         if (wordWidth)
                             addWord();
                         addRow();
                     }
                     else {
-                        addRow();
+                        if (!afterBreak)
+                            afterBreak = charType === Letter && lastCharType == After;
+                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                            if (wordWidth)
+                                addWord();
+                            addRow();
+                        }
+                        else {
+                            addRow();
+                        }
                     }
                 }
                 if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
@@ -2348,6 +2564,8 @@ function createRows(drawData, content, style) {
     }
 }
 function addChar(char, width) {
+    if (charSize && !startCharSize)
+        startCharSize = charSize;
     word.data.push({ char, width });
     wordWidth += width;
 }
@@ -2364,6 +2582,11 @@ function addRow() {
         row.paraStart = true;
         paraStart = false;
     }
+    if (charSize) {
+        row.startCharSize = startCharSize;
+        row.endCharSize = charSize;
+        startCharSize = 0;
+    }
     row.width = rowWidth;
     if (bounds.width)
         trimRight(row);
@@ -2374,7 +2597,7 @@ function addRow() {
 
 const CharMode = 0;
 const WordMode = 1;
-const RowMode = 2;
+const TextMode = 2;
 function layoutChar(drawData, style, width, _height) {
     const { rows } = drawData;
     const { textAlign, paraIndent, letterSpacing } = style;
@@ -2383,15 +2606,12 @@ function layoutChar(drawData, style, width, _height) {
         if (row.words) {
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
             addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
-            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : RowMode);
-            if (mode === RowMode) {
-                row.text = '';
+            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
+            if (row.isOverflow && !letterSpacing)
+                row.textMode = true;
+            if (mode === TextMode) {
                 row.x += indentWidth;
-                row.words.forEach(word => {
-                    word.data.forEach(char => {
-                        row.text += char.char;
-                    });
-                });
+                toTextChar$1(row);
             }
             else {
                 row.x += indentWidth;
@@ -2417,6 +2637,14 @@ function layoutChar(drawData, style, width, _height) {
         }
     });
 }
+function toTextChar$1(row) {
+    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;
@@ -2437,10 +2665,10 @@ function toChar(data, charX, rowData) {
 
 function layoutText(drawData, style) {
     const { rows, bounds } = drawData;
-    const { __lineHeight, __baseLine, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
-    if (textOverflow !== 'show' && realHeight > height) {
+    if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
         drawData.overflow = rows.length;
     }
@@ -2454,7 +2682,7 @@ function layoutText(drawData, style) {
         }
     }
     starY += y;
-    let row;
+    let row, rowX, rowWidth;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
@@ -2473,53 +2701,74 @@ function layoutText(drawData, style) {
             row.isOverflow = true;
             drawData.overflow = i + 1;
         }
-        if (row.width < 0) {
-            const charWidth = row.words[0].data[0].width;
-            const rowX = row.x + row.width;
-            if (rowX < bounds.x)
-                bounds.x = rowX - charWidth;
-            if (-row.width > bounds.width)
-                bounds.width = -row.width + style.fontSize + charWidth;
+        rowX = row.x;
+        rowWidth = row.width;
+        if (__letterSpacing < 0) {
+            if (row.width < 0) {
+                rowWidth = -row.width + style.fontSize + __letterSpacing;
+                rowX -= rowWidth;
+                rowWidth += style.fontSize;
+            }
+            else {
+                rowWidth -= __letterSpacing;
+            }
         }
-        else {
-            if (row.x < bounds.x)
-                bounds.x = row.x;
-            if (row.width > bounds.width)
-                bounds.width = row.width;
+        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;
         }
     }
     bounds.y = y;
     bounds.height = realHeight;
 }
 
-function clipText(drawData, textOverflow) {
+function clipText(drawData, style) {
     const { rows, overflow } = drawData;
+    let { textOverflow } = style;
     rows.splice(overflow);
     if (textOverflow !== 'hide') {
         if (textOverflow === 'ellipsis')
             textOverflow = '...';
+        let char, charRight;
         const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
-        const row = rows[overflow - 1];
-        let char, end = row.data.length - 1, charRight;
-        const { x, width } = drawData.bounds;
-        const right = x + width - ellipsisWidth;
-        for (let i = end; i > -1; i--) {
-            char = row.data[i];
-            charRight = char.x + char.width;
-            if (i === end && charRight < right) {
-                break;
-            }
-            else if (charRight < right && char.char !== ' ') {
-                row.data.splice(i + 1);
-                row.width -= char.width;
-                break;
+        const right = style.x + style.width - ellipsisWidth;
+        const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
+        list.forEach(row => {
+            if (row.isOverflow && row.data) {
+                let end = row.data.length - 1;
+                for (let i = end; i > -1; i--) {
+                    char = row.data[i];
+                    charRight = char.x + char.width;
+                    if (i === end && charRight < right) {
+                        break;
+                    }
+                    else if (charRight < right && char.char !== ' ') {
+                        row.data.splice(i + 1);
+                        row.width -= char.width;
+                        break;
+                    }
+                    row.width -= char.width;
+                }
+                row.width += ellipsisWidth;
+                row.data.push({ char: textOverflow, x: charRight });
+                if (row.textMode)
+                    toTextChar(row);
             }
-            row.width -= char.width;
-        }
-        row.width += ellipsisWidth;
-        row.data.push({ char: textOverflow, x: charRight });
+        });
     }
 }
+function toTextChar(row) {
+    row.text = '';
+    row.data.forEach(char => {
+        row.text += char.char;
+    });
+    row.data = null;
+}
 
 function decorationText(drawData, style) {
     const { fontSize } = style;
@@ -2533,101 +2782,190 @@ function decorationText(drawData, style) {
     }
 }
 
-const TextConvert = {
-    getDrawData(content, style) {
-        if (typeof content !== 'string')
-            content = String(content);
-        let x = 0, y = 0;
-        let { width, height, padding } = style;
-        const { textDecoration, textOverflow, __font } = style;
-        if (!width)
-            width = 0;
-        if (padding) {
-            const [top, right, bottom, left] = MathHelper.fourNumber(padding);
-            if (width) {
-                x = left;
-                width -= (right + left);
-            }
-            if (height) {
-                y = top;
-                height -= (top + bottom);
-            }
+const { top, right, bottom, left } = Direction4;
+function getDrawData(content, style) {
+    if (typeof content !== 'string')
+        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;
+    if (padding) {
+        if (width) {
+            x = padding[left];
+            width -= (padding[right] + padding[left]);
+        }
+        if (height) {
+            y = padding[top];
+            height -= (padding[top] + padding[bottom]);
+        }
+    }
+    const drawData = {
+        bounds: { x, y, width, height },
+        rows: [],
+        paraNumber: 0,
+        font: Platform.canvas.font = __font
+    };
+    createRows(drawData, content, style);
+    if (padding)
+        padAutoText(padding, drawData, style, width, height);
+    layoutText(drawData, style);
+    layoutChar(drawData, style, width);
+    if (drawData.overflow)
+        clipText(drawData, style);
+    if (textDecoration !== 'none')
+        decorationText(drawData, style);
+    return drawData;
+}
+function padAutoText(padding, drawData, style, width, height) {
+    if (!width) {
+        switch (style.textAlign) {
+            case 'left':
+                offsetText(drawData, 'x', padding[left]);
+                break;
+            case 'right':
+                offsetText(drawData, 'x', -padding[right]);
+        }
+    }
+    if (!height) {
+        switch (style.verticalAlign) {
+            case 'top':
+                offsetText(drawData, 'y', padding[top]);
+                break;
+            case 'bottom':
+                offsetText(drawData, 'y', -padding[bottom]);
         }
-        const drawData = {
-            bounds: { x, y, width, height },
-            rows: [],
-            paraNumber: 0,
-            font: Platform.canvas.font = __font
-        };
-        createRows(drawData, content, style);
-        layoutText(drawData, style);
-        layoutChar(drawData, style, width);
-        if (drawData.overflow)
-            clipText(drawData, textOverflow);
-        if (textDecoration !== 'none')
-            decorationText(drawData, style);
-        return drawData;
     }
+}
+function offsetText(drawData, attrName, value) {
+    const { bounds, rows } = drawData;
+    bounds[attrName] += value;
+    for (let i = 0; i < rows.length; i++)
+        rows[i][attrName] += value;
+}
+
+const TextConvertModule = {
+    getDrawData
 };
 
-const ColorConvert = {
-    string(color, opacity) {
-        if (typeof color === 'string')
-            return color;
-        let a = color.a === undefined ? 1 : color.a;
-        if (opacity)
-            a *= opacity;
-        const rgb = color.r + ',' + color.g + ',' + color.b;
-        return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
-    }
+function string(color, opacity) {
+    if (typeof color === 'string')
+        return color;
+    let a = color.a === undefined ? 1 : color.a;
+    if (opacity)
+        a *= opacity;
+    const rgb = color.r + ',' + color.g + ',' + color.b;
+    return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
+}
+
+const ColorConvertModule = {
+    string
 };
 
-const Export = {
+const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper;
+function getTrimBounds(canvas) {
+    const { width, height } = canvas.view;
+    const { data } = canvas.context.getImageData(0, 0, width, height);
+    let x, y, pointBounds, index = 0;
+    for (let i = 0; i < data.length; i += 4) {
+        if (data[i + 3] !== 0) {
+            x = index % width;
+            y = (index - x) / width;
+            pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
+        }
+        index++;
+    }
+    const bounds = new Bounds();
+    toBounds(pointBounds, bounds);
+    return bounds.scale(1 / canvas.pixelRatio).ceil();
+}
+
+const ExportModule = {
     export(leaf, filename, options) {
+        this.running = true;
         return addTask((success) => new Promise((resolve) => {
+            const over = (result) => {
+                success(result);
+                resolve();
+                this.running = false;
+            };
             const { leafer } = leaf;
             if (leafer) {
                 leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
-                    let quality, blob;
-                    let { canvas } = leafer;
-                    let { unreal } = canvas;
-                    if (unreal) {
-                        canvas = canvas.getSameCanvas();
-                        canvas.backgroundColor = leafer.config.fill;
-                        leafer.__render(canvas, {});
+                    options = FileHelper.getExportOptions(options);
+                    let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                    const { worldTransform, isLeafer, isFrame } = leaf;
+                    const { slice, trim, onCanvas } = options;
+                    const scale = options.scale || 1;
+                    const pixelRatio = options.pixelRatio || 1;
+                    const screenshot = options.screenshot || leaf.isApp;
+                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
+                    const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
+                    if (screenshot) {
+                        renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
                     }
-                    switch (typeof options) {
-                        case 'object':
-                            if (options.quality)
-                                quality = options.quality;
-                            if (options.blob)
-                                blob = true;
-                            break;
-                        case 'number':
-                            quality = options;
-                            break;
-                        case 'boolean':
-                            blob = options;
+                    else {
+                        let relative = options.relative || (isLeafer ? 'inner' : 'local');
+                        scaleX = worldTransform.scaleX;
+                        scaleY = worldTransform.scaleY;
+                        switch (relative) {
+                            case 'inner':
+                                matrix.set(worldTransform);
+                                break;
+                            case 'local':
+                                matrix.set(worldTransform).divide(leaf.localTransform);
+                                scaleX /= leaf.scaleX;
+                                scaleY /= leaf.scaleY;
+                                break;
+                            case 'world':
+                                scaleX = 1;
+                                scaleY = 1;
+                                break;
+                            case 'page':
+                                relative = leaf.leafer;
+                            default:
+                                matrix.set(worldTransform).divide(leaf.getTransform(relative));
+                                const l = relative.worldTransform;
+                                scaleX /= scaleX / l.scaleX;
+                                scaleY /= scaleY / l.scaleY;
+                        }
+                        renderBounds = leaf.getBounds('render', relative);
                     }
-                    let data;
-                    if (filename.includes('.')) {
-                        data = yield canvas.saveAs(filename, quality);
+                    const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
+                    let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio });
+                    const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
+                    if (slice) {
+                        leaf = leafer;
+                        renderOptions.bounds = canvas.bounds;
                     }
-                    else if (blob) {
-                        data = yield canvas.toBlob(filename, quality);
+                    canvas.save();
+                    if (isFrame && fill !== undefined) {
+                        const oldFill = leaf.get('fill');
+                        leaf.fill = '';
+                        leaf.__render(canvas, renderOptions);
+                        leaf.fill = oldFill;
                     }
                     else {
-                        data = yield canvas.toDataURL(filename, quality);
+                        leaf.__render(canvas, renderOptions);
                     }
-                    success({ data });
-                    resolve();
-                    if (unreal)
-                        canvas.recycle();
+                    canvas.restore();
+                    if (trim) {
+                        trimBounds = getTrimBounds(canvas);
+                        const old = canvas, { width, height } = trimBounds;
+                        const config = { x: 0, y: 0, width, height, pixelRatio };
+                        canvas = Creator.canvas(config);
+                        canvas.copyWorld(old, trimBounds, config);
+                    }
+                    if (needFill)
+                        canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
+                    if (onCanvas)
+                        onCanvas(canvas);
+                    const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
+                    over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
                 }));
             }
             else {
-                success({ data: false });
-                resolve();
+                over({ data: false });
             }
         }));
     }
@@ -2641,12 +2979,63 @@ function addTask(task) {
     });
 }
 
-Object.assign(Paint, UIPaint);
-Object.assign(Effect, UIEffect);
-Object.assign(TextConvert$1, TextConvert);
-Object.assign(ColorConvert$1, ColorConvert);
-Object.assign(Export$1, Export);
+const canvas = LeaferCanvasBase.prototype;
+const debug = Debug.get('@leafer-ui/export');
+canvas.export = function (filename, options) {
+    const { quality, blob } = FileHelper.getExportOptions(options);
+    if (filename.includes('.')) {
+        return this.saveAs(filename, quality);
+    }
+    else if (blob) {
+        return this.toBlob(filename, quality);
+    }
+    else {
+        return this.toDataURL(filename, quality);
+    }
+};
+canvas.toBlob = function (type, quality) {
+    return new Promise((resolve) => {
+        Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+            resolve(blob);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(null);
+        });
+    });
+};
+canvas.toDataURL = function (type, quality) {
+    return Platform.origin.canvasToDataURL(this.view, type, quality);
+};
+canvas.saveAs = function (filename, quality) {
+    return new Promise((resolve) => {
+        Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+            resolve(true);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(false);
+        });
+    });
+};
+
+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(Export, ExportModule);
 
+Object.assign(Creator, {
+    interaction: (target, canvas, selector, options) => new Interaction(target, canvas, selector, options),
+    hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
+    hitCanvasManager: () => new HitCanvasManager()
+});
 useCanvas();
+window.addEventListener('unload', () => {
+    const { list } = Leafer;
+    list.forEach(leafer => leafer.destroy(true));
+    list.destroy();
+    ImageManager.destroy();
+});
 
 export { Interaction, Layouter, LeaferCanvas, Renderer, Selector, Watcher, useCanvas };