@leafer-ui/miniapp 1.0.0-beta.9 → 1.0.0-rc.11

package/dist/miniapp.esm.js

@@ -0,0 +1,2729 @@
+import { LeaferCanvasBase, Platform, canvasPatch, DataHelper, canvasSizeAttrs, ResizeEvent, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, Answer, MatrixHelper, ImageEvent, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
+export * from '@leafer/core';
+export { LeaferImage } from '@leafer/core';
+import { InteractionHelper, InteractionBase, HitCanvasManager, Platform as Platform$1 } from '@leafer-ui/core';
+export * from '@leafer-ui/core';
+import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
+
+class LeaferCanvas extends LeaferCanvasBase {
+    get allowBackgroundColor() { return false; }
+    init() {
+        let { view } = this.config;
+        if (view) {
+            if (typeof view === 'string') {
+                if (view[0] !== '#')
+                    view = '#' + view;
+                this.viewSelect = Platform.miniapp.select(view);
+            }
+            else if (view.fields) {
+                this.viewSelect = view;
+            }
+            else {
+                this.initView(view);
+            }
+            if (this.viewSelect)
+                Platform.miniapp.getSizeView(this.viewSelect).then(sizeView => {
+                    this.initView(sizeView);
+                });
+        }
+        else {
+            this.initView();
+        }
+    }
+    initView(view) {
+        if (!view) {
+            view = {};
+            this.__createView();
+        }
+        else {
+            this.view = view.view || view;
+        }
+        this.__createContext();
+        const { width, height, pixelRatio } = this.config;
+        const size = { width: width || view.width, height: height || view.height, pixelRatio };
+        this.resize(size);
+        if (this.context.roundRect) {
+            this.roundRect = function (x, y, width, height, radius) {
+                this.context.roundRect(x, y, width, height, typeof radius === 'number' ? [radius] : radius);
+            };
+        }
+        canvasPatch(this.context.__proto__);
+    }
+    __createView() {
+        this.view = Platform.origin.createCanvas(1, 1);
+    }
+    updateViewSize() {
+        const { width, height, pixelRatio } = this;
+        this.view.width = Math.ceil(width * pixelRatio);
+        this.view.height = Math.ceil(height * pixelRatio);
+    }
+    updateClientBounds(callback) {
+        if (this.viewSelect)
+            Platform.miniapp.getBounds(this.viewSelect).then(bounds => {
+                this.clientBounds = bounds;
+                if (callback)
+                    callback();
+            });
+    }
+    startAutoLayout(_autoBounds, listener) {
+        this.resizeListener = listener;
+        this.checkSize = this.checkSize.bind(this);
+        Platform.miniapp.onWindowResize(this.checkSize);
+    }
+    checkSize() {
+        if (this.viewSelect) {
+            setTimeout(() => {
+                this.updateClientBounds(() => {
+                    const { width, height } = this.clientBounds;
+                    const { pixelRatio } = this;
+                    const size = { width, height, pixelRatio };
+                    if (!this.isSameSize(size)) {
+                        const oldSize = {};
+                        DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+                        this.resize(size);
+                        if (this.width !== undefined)
+                            this.resizeListener(new ResizeEvent(size, oldSize));
+                    }
+                });
+            }, 500);
+        }
+    }
+    stopAutoLayout() {
+        this.autoLayout = false;
+        this.resizeListener = null;
+        Platform.miniapp.offWindowResize(this.checkSize);
+    }
+}
+
+const { mineType, fileType } = FileHelper;
+Object.assign(Creator, {
+    canvas: (options, manager) => new LeaferCanvas(options, manager),
+    image: (options) => new LeaferImage(options)
+});
+function useCanvas(_canvasType, app) {
+    if (!Platform.origin) {
+        Platform.origin = {
+            createCanvas: (width, height, _format) => app.createOffscreenCanvas({ type: '2d', width, height }),
+            canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+            canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
+            canvasSaveAs: (canvas, filePath, quality) => {
+                return new Promise((resolve, reject) => {
+                    let data = canvas.toDataURL(mineType(fileType(filePath)), quality);
+                    data = data.substring(data.indexOf('64,') + 3);
+                    let toAlbum;
+                    if (!filePath.includes('/')) {
+                        filePath = `${app.env.USER_DATA_PATH}/` + filePath;
+                        toAlbum = true;
+                    }
+                    const fs = app.getFileSystemManager();
+                    fs.writeFile({
+                        filePath,
+                        data,
+                        encoding: 'base64',
+                        success() {
+                            if (toAlbum) {
+                                Platform.miniapp.saveToAlbum(filePath).then(() => {
+                                    fs.unlink({ filePath });
+                                });
+                            }
+                            resolve();
+                        },
+                        fail(error) {
+                            reject(error);
+                        }
+                    });
+                });
+            },
+            loadImage(url) {
+                return new Promise((resolve, reject) => {
+                    const img = Platform.canvas.view.createImage();
+                    img.onload = () => { resolve(img); };
+                    img.onerror = (error) => { reject(error); };
+                    img.src = url;
+                });
+            },
+            noRepeat: 'repeat-x'
+        };
+        Platform.miniapp = {
+            select(name) {
+                return app.createSelectorQuery().select(name);
+            },
+            getBounds(select) {
+                return new Promise((resolve) => {
+                    select.boundingClientRect().exec((res) => {
+                        const rect = res[1];
+                        resolve({ x: rect.top, y: rect.left, width: rect.width, height: rect.height });
+                    });
+                });
+            },
+            getSizeView(select) {
+                return new Promise((resolve) => {
+                    select.fields({ node: true, size: true }).exec((res) => {
+                        const data = res[0];
+                        resolve({ view: data.node, width: data.width, height: data.height });
+                    });
+                });
+            },
+            saveToAlbum(path) {
+                return new Promise((resolve) => {
+                    app.getSetting({
+                        success: (res) => {
+                            if (res.authSetting['scope.writePhotosAlbum']) {
+                                app.saveImageToPhotosAlbum({
+                                    filePath: path,
+                                    success() { resolve(true); }
+                                });
+                            }
+                            else {
+                                app.authorize({
+                                    scope: 'scope.writePhotosAlbum',
+                                    success: () => {
+                                        app.saveImageToPhotosAlbum({
+                                            filePath: path,
+                                            success() { resolve(true); }
+                                        });
+                                    },
+                                    fail: () => { }
+                                });
+                            }
+                        }
+                    });
+                });
+            },
+            onWindowResize(fun) {
+                app.onWindowResize(fun);
+            },
+            offWindowResize(fun) {
+                app.offWindowResize(fun);
+            }
+        };
+        Platform.event = {
+            stopDefault(_origin) { },
+            stopNow(_origin) { },
+            stop(_origin) { }
+        };
+        Platform.canvas = Creator.canvas();
+        Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
+    }
+}
+Platform.name = 'miniapp';
+Platform.requestRender = function (render) { Platform.canvas.view.requestAnimationFrame(render); };
+Platform.devicePixelRatio = wx.getSystemInfoSync().pixelRatio;
+
+class Watcher {
+    get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
+    get updatedList() {
+        if (this.hasRemove) {
+            const updatedList = new LeafList();
+            this.__updatedList.list.forEach(item => { if (item.leafer)
+                updatedList.add(item); });
+            return updatedList;
+        }
+        else {
+            return this.__updatedList;
+        }
+    }
+    constructor(target, userConfig) {
+        this.totalTimes = 0;
+        this.config = {};
+        this.__updatedList = new LeafList();
+        this.target = target;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+    }
+    start() {
+        if (this.disabled)
+            return;
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    disable() {
+        this.stop();
+        this.__removeListenEvents();
+        this.disabled = true;
+    }
+    update() {
+        this.changed = true;
+        if (this.running)
+            this.target.emit(RenderEvent.REQUEST);
+    }
+    __onAttrChange(event) {
+        this.__updatedList.add(event.target);
+        this.update();
+    }
+    __onChildEvent(event) {
+        if (event.type === ChildEvent.ADD) {
+            this.hasAdd = true;
+            this.__pushChild(event.child);
+        }
+        else {
+            this.hasRemove = true;
+            this.__updatedList.add(event.parent);
+        }
+        this.update();
+    }
+    __pushChild(child) {
+        this.__updatedList.add(child);
+        if (child.isBranch)
+            this.__loopChildren(child);
+    }
+    __loopChildren(parent) {
+        const { children } = parent;
+        for (let i = 0, len = children.length; i < len; i++)
+            this.__pushChild(children[i]);
+    }
+    __onRquestData() {
+        this.target.emitEvent(new WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }));
+        this.__updatedList = new LeafList();
+        this.totalTimes++;
+        this.changed = false;
+        this.hasVisible = false;
+        this.hasRemove = false;
+        this.hasAdd = false;
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(PropertyEvent.CHANGE, this.__onAttrChange, this),
+            target.on_([ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this),
+            target.on_(WatchEvent.REQUEST, this.__onRquestData, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = null;
+            this.__updatedList = null;
+        }
+    }
+}
+
+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.proxyZoom) {
+            if (layout.matrixChanged) {
+                updateAllMatrix$1(leaf, true);
+                levelList.add(leaf);
+                if (leaf.isBranch)
+                    pushAllChildBranch(leaf, levelList);
+                pushAllParent(leaf, levelList);
+            }
+            else if (layout.boundsChanged) {
+                levelList.add(leaf);
+                if (leaf.isBranch)
+                    leaf.__tempNumber = 0;
+                pushAllParent(leaf, levelList);
+            }
+        }
+    });
+}
+function updateBounds(boundsList) {
+    let list, branch, children;
+    boundsList.sort(true);
+    boundsList.levels.forEach(level => {
+        list = boundsList.levelMap[level];
+        for (let i = 0, len = list.length; i < len; i++) {
+            branch = list[i];
+            if (branch.isBranch && branch.__tempNumber) {
+                children = branch.children;
+                for (let j = 0, jLen = children.length; j < jLen; j++) {
+                    if (!children[j].isBranch) {
+                        updateOneBounds(children[j]);
+                    }
+                }
+            }
+            updateOneBounds(branch);
+        }
+    });
+}
+function updateChange(updateList) {
+    updateList.list.forEach(leaf => {
+        if (leaf.__layout.opacityChanged)
+            updateAllWorldOpacity(leaf);
+        leaf.__updateChange();
+    });
+}
+
+const { worldBounds } = LeafBoundsHelper;
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
+class LayoutBlockData {
+    constructor(list) {
+        this.updatedBounds = new Bounds();
+        this.beforeBounds = new Bounds();
+        this.afterBounds = new Bounds();
+        if (list instanceof Array)
+            list = new LeafList(list);
+        this.updatedList = list;
+    }
+    setBefore() {
+        this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
+    }
+    setAfter() {
+        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.addList(data.updatedList.list);
+        this.beforeBounds.add(data.beforeBounds);
+        this.afterBounds.add(data.afterBounds);
+        this.updatedBounds.add(data.updatedBounds);
+    }
+    destroy() {
+        this.updatedList = null;
+    }
+}
+
+const { updateAllMatrix, updateAllChange } = LeafHelper;
+const debug$1 = Debug.get('Layouter');
+class Layouter {
+    constructor(target, userConfig) {
+        this.totalTimes = 0;
+        this.config = {};
+        this.__levelList = new LeafLevelList();
+        this.target = target;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+    }
+    start() {
+        if (this.disabled)
+            return;
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    disable() {
+        this.stop();
+        this.__removeListenEvents();
+        this.disabled = true;
+    }
+    layout() {
+        if (!this.running)
+            return;
+        const { target } = this;
+        this.times = 0;
+        try {
+            target.emit(LayoutEvent.START);
+            this.layoutOnce();
+            target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
+        }
+        catch (e) {
+            debug$1.error(e);
+        }
+        this.layoutedBlocks = null;
+    }
+    layoutAgain() {
+        if (this.layouting) {
+            this.waitAgain = true;
+        }
+        else {
+            this.layoutOnce();
+        }
+    }
+    layoutOnce() {
+        if (this.layouting)
+            return debug$1.warn('layouting');
+        if (this.times > 3)
+            return debug$1.warn('layout max times');
+        this.times++;
+        this.totalTimes++;
+        this.layouting = true;
+        this.target.emit(WatchEvent.REQUEST);
+        if (this.totalTimes > 1) {
+            this.partLayout();
+        }
+        else {
+            this.fullLayout();
+        }
+        this.layouting = false;
+        if (this.waitAgain) {
+            this.waitAgain = false;
+            this.layoutOnce();
+        }
+    }
+    partLayout() {
+        var _a;
+        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const t = Run.start('PartLayout');
+        const { target, __updatedList: updateList } = this;
+        const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
+        const blocks = this.getBlocks(updateList);
+        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));
+        this.addBlocks(blocks);
+        this.__levelList.reset();
+        this.__updatedList = null;
+        Run.end(t);
+    }
+    fullLayout() {
+        const t = Run.start('FullLayout');
+        const { target } = this;
+        const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
+        const blocks = this.getBlocks(new LeafList(target));
+        target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
+        Layouter.fullLayout(target);
+        blocks.forEach(item => { item.setAfter(); });
+        target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
+        target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
+        this.addBlocks(blocks);
+        Run.end(t);
+    }
+    static fullLayout(target) {
+        updateAllMatrix(target, true);
+        if (target.isBranch) {
+            BranchHelper.updateBounds(target);
+        }
+        else {
+            LeafHelper.updateBounds(target);
+        }
+        updateAllChange(target);
+    }
+    addExtra(leaf) {
+        const block = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+        block.updatedList.add(leaf);
+        block.beforeBounds.add(leaf.__world);
+    }
+    createBlock(data) {
+        return new LayoutBlockData(data);
+    }
+    getBlocks(list) {
+        return [this.createBlock(list)];
+    }
+    addBlocks(current) {
+        this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current;
+    }
+    __onReceiveWatchData(event) {
+        this.__updatedList = event.data.updatedList;
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(LayoutEvent.REQUEST, this.layout, this),
+            target.on_(LayoutEvent.AGAIN, this.layoutAgain, this),
+            target.on_(WatchEvent.DATA, this.__onReceiveWatchData, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = this.config = null;
+        }
+    }
+}
+
+const debug = Debug.get('Renderer');
+class Renderer {
+    get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
+    constructor(target, canvas, userConfig) {
+        this.FPS = 60;
+        this.totalTimes = 0;
+        this.times = 0;
+        this.config = {
+            usePartRender: true,
+            maxFPS: 60
+        };
+        this.target = target;
+        this.canvas = canvas;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+        this.__requestRender();
+    }
+    start() {
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    update() {
+        this.changed = true;
+    }
+    requestLayout() {
+        this.target.emit(LayoutEvent.REQUEST);
+    }
+    render(callback) {
+        if (!(this.running && this.canvas.view)) {
+            this.changed = true;
+            return;
+        }
+        const { target } = this;
+        this.times = 0;
+        this.totalBounds = new Bounds();
+        debug.log(target.innerName, '--->');
+        try {
+            this.emitRender(RenderEvent.START);
+            this.renderOnce(callback);
+            this.emitRender(RenderEvent.END, this.totalBounds);
+            ImageManager.clearRecycled();
+        }
+        catch (e) {
+            this.rendering = false;
+            debug.error(e);
+        }
+        debug.log('-------------|');
+    }
+    renderAgain() {
+        if (this.rendering) {
+            this.waitAgain = true;
+        }
+        else {
+            this.renderOnce();
+        }
+    }
+    renderOnce(callback) {
+        if (this.rendering)
+            return debug.warn('rendering');
+        if (this.times > 3)
+            return debug.warn('render max times');
+        this.times++;
+        this.totalTimes++;
+        this.rendering = true;
+        this.changed = false;
+        this.renderBounds = new Bounds();
+        this.renderOptions = {};
+        if (callback) {
+            this.emitRender(RenderEvent.BEFORE);
+            callback();
+        }
+        else {
+            this.requestLayout();
+            this.emitRender(RenderEvent.BEFORE);
+            if (this.config.usePartRender && this.totalTimes > 1) {
+                this.partRender();
+            }
+            else {
+                this.fullRender();
+            }
+        }
+        this.emitRender(RenderEvent.RENDER, this.renderBounds, this.renderOptions);
+        this.emitRender(RenderEvent.AFTER, this.renderBounds, this.renderOptions);
+        this.updateBlocks = null;
+        this.rendering = false;
+        if (this.waitAgain) {
+            this.waitAgain = false;
+            this.renderOnce();
+        }
+    }
+    partRender() {
+        const { canvas, updateBlocks: list } = this;
+        if (!list)
+            return debug.warn('PartRender: need update attr');
+        this.mergeBlocks();
+        list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
+            this.clipRender(block); });
+    }
+    clipRender(block) {
+        const t = Run.start('PartRender');
+        const { canvas } = this;
+        const bounds = block.getIntersect(canvas.bounds);
+        const includes = block.includes(this.target.__world);
+        const realBounds = new Bounds(bounds);
+        canvas.save();
+        if (includes && !Debug.showRepaint) {
+            canvas.clear();
+        }
+        else {
+            bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil();
+            canvas.clearWorld(bounds, true);
+            canvas.clipWorld(bounds, true);
+        }
+        this.__render(bounds, includes, realBounds);
+        canvas.restore();
+        Run.end(t);
+    }
+    fullRender() {
+        const t = Run.start('FullRender');
+        const { canvas } = this;
+        canvas.save();
+        canvas.clear();
+        this.__render(canvas.bounds, true);
+        canvas.restore();
+        Run.end(t);
+    }
+    __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)
+            this.canvas.strokeWorld(bounds, 'red');
+        this.target.__render(this.canvas, options);
+        this.renderBounds = realBounds || bounds;
+        this.renderOptions = options;
+        this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
+        if (Debug.showHitView)
+            this.renderHitView(options);
+        if (Debug.showBoundsView)
+            this.renderBoundsView(options);
+        this.canvas.updateRender();
+    }
+    renderHitView(_options) { }
+    renderBoundsView(_options) { }
+    addBlock(block) {
+        if (!this.updateBlocks)
+            this.updateBlocks = [];
+        this.updateBlocks.push(block);
+    }
+    mergeBlocks() {
+        const { updateBlocks: list } = this;
+        if (list) {
+            const bounds = new Bounds();
+            bounds.setList(list);
+            list.length = 0;
+            list.push(bounds);
+        }
+    }
+    __requestRender() {
+        const startTime = Date.now();
+        Platform.requestRender(() => {
+            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
+            if (this.running) {
+                this.target.emit(AnimateEvent.FRAME);
+                if (this.changed && this.canvas.view)
+                    this.render();
+                this.target.emit(RenderEvent.NEXT);
+            }
+            if (this.target)
+                this.__requestRender();
+        });
+    }
+    __onResize(e) {
+        if (this.canvas.unreal)
+            return;
+        if (e.bigger || !e.samePixelRatio) {
+            const { width, height } = e.old;
+            const bounds = new Bounds(0, 0, width, height);
+            if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
+                this.addBlock(this.canvas.bounds);
+                this.target.forceUpdate('surface');
+            }
+        }
+    }
+    __onLayoutEnd(event) {
+        if (event.data)
+            event.data.map(item => {
+                let empty;
+                if (item.updatedList)
+                    item.updatedList.list.some(leaf => {
+                        empty = (!leaf.__world.width || !leaf.__world.height);
+                        if (empty) {
+                            if (!leaf.isLeafer)
+                                debug.tip(leaf.innerName, ': empty');
+                            empty = (!leaf.isBranch || leaf.isBranchLeaf);
+                        }
+                        return empty;
+                    });
+                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            });
+    }
+    emitRender(type, bounds, options) {
+        this.target.emitEvent(new RenderEvent(type, this.times, bounds, options));
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(RenderEvent.REQUEST, this.update, this),
+            target.on_(LayoutEvent.END, this.__onLayoutEnd, this),
+            target.on_(RenderEvent.AGAIN, this.renderAgain, this),
+            target.on_(ResizeEvent.RESIZE, this.__onResize, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = null;
+            this.canvas = null;
+            this.config = null;
+        }
+    }
+}
+
+const { hitRadiusPoint } = BoundsHelper;
+class Picker {
+    constructor(target, selector) {
+        this.target = target;
+        this.selector = selector;
+    }
+    getByPoint(hitPoint, hitRadius, options) {
+        if (!hitRadius)
+            hitRadius = 0;
+        if (!options)
+            options = {};
+        const through = options.through || false;
+        const ignoreHittable = options.ignoreHittable || false;
+        const target = options.target || this.target;
+        this.exclude = options.exclude || null;
+        this.point = { x: hitPoint.x, y: hitPoint.y, radiusX: hitRadius, radiusY: hitRadius };
+        this.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, target: leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, target: leaf };
+    }
+    getBestMatchLeaf() {
+        const { findList: targets } = this;
+        if (targets.length > 1) {
+            let find;
+            this.findList = [];
+            const { x, y } = this.point;
+            const point = { x, y, radiusX: 0, radiusY: 0 };
+            for (let i = 0, len = targets.length; i < len; i++) {
+                find = targets[i];
+                if (LeafHelper.worldHittable(find)) {
+                    this.hitChild(find, point);
+                    if (this.findList.length)
+                        return this.findList[0];
+                }
+            }
+        }
+        return targets[0];
+    }
+    getPath(leaf) {
+        const path = new LeafList();
+        while (leaf) {
+            path.add(leaf);
+            leaf = leaf.parent;
+        }
+        path.add(this.target);
+        return path;
+    }
+    getHitablePath(leaf) {
+        const path = this.getPath(leaf);
+        let item, hittablePath = new LeafList();
+        for (let i = path.list.length - 1; i > -1; i--) {
+            item = path.list[i];
+            if (!item.__.hittable)
+                break;
+            hittablePath.addAt(item, 0);
+            if (!item.__.hitChildren)
+                break;
+        }
+        return hittablePath;
+    }
+    getThroughPath(list) {
+        const throughPath = new LeafList();
+        const pathList = [];
+        for (let i = list.length - 1; i > -1; i--) {
+            pathList.push(this.getPath(list[i]));
+        }
+        let path, nextPath, leaf;
+        for (let i = 0, len = pathList.length; i < len; i++) {
+            path = pathList[i], nextPath = pathList[i + 1];
+            for (let j = 0, jLen = path.length; j < jLen; j++) {
+                leaf = path.list[j];
+                if (nextPath && nextPath.has(leaf))
+                    break;
+                throughPath.add(leaf);
+            }
+        }
+        return throughPath;
+    }
+    eachFind(children, hitMask) {
+        let child, hit;
+        const { point } = this, len = children.length;
+        for (let i = len - 1; i > -1; i--) {
+            child = children[i];
+            if (!child.__.visible || (hitMask && !child.__.mask))
+                continue;
+            hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point);
+            if (child.isBranch) {
+                if (hit || child.__ignoreHitWorld) {
+                    this.eachFind(child.children, child.__onlyHitMask);
+                    if (child.isBranchLeaf && !this.findList.length)
+                        this.hitChild(child, point);
+                }
+            }
+            else {
+                if (hit)
+                    this.hitChild(child, point);
+            }
+        }
+    }
+    hitChild(child, point) {
+        if (this.exclude && this.exclude.has(child))
+            return;
+        if (child.__hitWorld(point))
+            this.findList.push(child);
+    }
+    clear() {
+        this.point = null;
+        this.findList = null;
+        this.exclude = null;
+    }
+    destroy() {
+        this.clear();
+    }
+}
+
+const { Yes, NoAndSkip, YesAndSkip } = Answer;
+class Selector {
+    constructor(target, userConfig) {
+        this.config = {};
+        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.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.picker.getByPoint(hitPoint, hitRadius, options);
+    }
+    getByInnerId(innerId, branch) {
+        const cache = this.innerIdMap[innerId];
+        if (cache)
+            return cache;
+        this.eachFind(this.toChildren(branch), this.methods.innerId, null, innerId);
+        return this.findLeaf;
+    }
+    getById(id, branch) {
+        const cache = this.idMap[id];
+        if (cache && LeafHelper.hasParent(cache, branch || this.target))
+            return cache;
+        this.eachFind(this.toChildren(branch), this.methods.id, null, id);
+        return this.findLeaf;
+    }
+    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++) {
+            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 { 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_(PropertyEvent.CHANGE, this.__checkIdChange, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+        this.__eventIds.length = 0;
+    }
+    destroy() {
+        if (this.__eventIds.length) {
+            this.__removeListenEvents();
+            this.picker.destroy();
+            this.findLeaf = null;
+            this.innerIdMap = {};
+            this.idMap = {};
+        }
+    }
+}
+
+Object.assign(Creator, {
+    watcher: (target, options) => new Watcher(target, options),
+    layouter: (target, options) => new Layouter(target, options),
+    renderer: (target, canvas, options) => new Renderer(target, canvas, options),
+    selector: (target, options) => new Selector(target, options)
+});
+Platform.layout = Layouter.fullLayout;
+
+const PointerEventHelper = {
+    convertTouch(e, local) {
+        const touch = PointerEventHelper.getTouch(e);
+        const base = InteractionHelper.getBase(e);
+        return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'touch', pressure: touch.force || 1 });
+    },
+    getTouch(e) {
+        return e.touches[0] || e.changedTouches[0];
+    }
+};
+
+class Interaction extends InteractionBase {
+    __listenEvents() {
+        super.__listenEvents();
+        if (this.config.eventer)
+            this.config.eventer.receiveEvent = this.receive.bind(this);
+    }
+    receive(e) {
+        switch (e.type) {
+            case 'touchstart':
+                this.onTouchStart(e);
+                break;
+            case 'touchmove':
+                this.onTouchMove(e);
+                break;
+            case 'touchend':
+                this.onTouchEnd(e);
+                break;
+            case 'touchcancel':
+                this.onTouchCancel();
+        }
+    }
+    getLocal(p, updateClient) {
+        if (updateClient)
+            this.canvas.updateClientBounds();
+        if (p.x !== undefined) {
+            return { x: p.x, y: p.y };
+        }
+        else {
+            const { clientBounds } = this.canvas;
+            return { x: p.clientX - clientBounds.x, y: p.clientY - clientBounds.y };
+        }
+    }
+    getTouches(touches) {
+        return touches;
+    }
+    onTouchStart(e) {
+        this.multiTouchStart(e);
+        const touch = PointerEventHelper.getTouch(e);
+        this.pointerDown(PointerEventHelper.convertTouch(e, this.getLocal(touch, true)));
+    }
+    onTouchMove(e) {
+        this.multiTouchMove(e);
+        if (this.useMultiTouch)
+            return;
+        const touch = PointerEventHelper.getTouch(e);
+        this.pointerMove(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
+    }
+    onTouchEnd(e) {
+        this.multiTouchEnd();
+        const touch = PointerEventHelper.getTouch(e);
+        this.pointerUp(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
+    }
+    onTouchCancel() {
+        this.pointerCancel();
+    }
+    multiTouchStart(e) {
+        this.useMultiTouch = (e.touches.length >= 2);
+        this.touches = this.useMultiTouch ? this.getTouches(e.touches) : undefined;
+        if (this.useMultiTouch)
+            this.pointerCancel();
+    }
+    multiTouchMove(e) {
+        if (!this.useMultiTouch)
+            return;
+        if (e.touches.length > 1) {
+            const touches = this.getTouches(e.touches);
+            const list = this.getKeepTouchList(this.touches, touches);
+            if (list.length > 1) {
+                this.multiTouch(InteractionHelper.getBase(e), list);
+                this.touches = touches;
+            }
+        }
+    }
+    multiTouchEnd() {
+        this.touches = null;
+        this.useMultiTouch = false;
+        this.transformEnd();
+    }
+    getKeepTouchList(old, touches) {
+        let to;
+        const list = [];
+        old.forEach(from => {
+            to = touches.find(touch => touch.identifier === from.identifier);
+            if (to)
+                list.push({ from: this.getLocal(from), to: this.getLocal(to) });
+        });
+        return list;
+    }
+    getLocalTouchs(points) {
+        return points.map(point => this.getLocal(point));
+    }
+    destroy() {
+        super.destroy();
+        this.touches = 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(fill, ui, canvas) {
+    canvas.fillStyle = fill;
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+}
+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 && PaintImage.checkImage(ui, canvas, item, !__font))
+            continue;
+        if (item.style) {
+            canvas.fillStyle = item.style;
+            if (item.transform) {
+                canvas.save();
+                canvas.transform(item.transform);
+                if (item.blendMode)
+                    canvas.blendMode = item.blendMode;
+                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
+                canvas.restore();
+            }
+            else {
+                if (item.blendMode) {
+                    canvas.saveBlendMode(item.blendMode);
+                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
+                    canvas.restoreBlendMode();
+                }
+                else {
+                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
+                }
+            }
+        }
+    }
+}
+
+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(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+            break;
+        case 'inside':
+            drawAlignStroke('inside', stroke, isStrokes, ui, canvas);
+            break;
+        case 'outside':
+            drawAlignStroke('outside', stroke, isStrokes, ui, canvas);
+            break;
+    }
+}
+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(stroke, true, ui, out) : drawTextStroke(ui, out);
+    out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
+    fillText(ui, out);
+    out.blendMode = 'normal';
+    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;
+    const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i];
+        if (row.text) {
+            canvas.strokeText(row.text, row.x, row.y);
+        }
+        else if (row.data) {
+            row.data.forEach(charData => {
+                canvas.strokeText(charData.char, charData.x, row.y);
+            });
+        }
+        if (decorationY)
+            canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
+    }
+}
+function drawStrokesStyle(strokes, isText, ui, canvas) {
+    let item;
+    for (let i = 0, len = strokes.length; i < len; i++) {
+        item = strokes[i];
+        if (item.image && PaintImage.checkImage(ui, canvas, item, false))
+            continue;
+        if (item.style) {
+            canvas.strokeStyle = item.style;
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode);
+                isText ? drawTextStroke(ui, canvas) : canvas.stroke();
+                canvas.restoreBlendMode();
+            }
+            else {
+                isText ? drawTextStroke(ui, canvas) : canvas.stroke();
+            }
+        }
+    }
+}
+
+function stroke(stroke, ui, canvas) {
+    const options = ui.__;
+    const { __strokeWidth, strokeAlign, __font } = options;
+    if (!__strokeWidth)
+        return;
+    if (__font) {
+        strokeText(stroke, ui, canvas);
+    }
+    else {
+        switch (strokeAlign) {
+            case 'center':
+                canvas.setStroke(stroke, __strokeWidth, options);
+                canvas.stroke();
+                break;
+            case 'inside':
+                canvas.save();
+                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, 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);
+                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;
+function createData(leafPaint, image, paint, box) {
+    let { width, height } = image;
+    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;
+            if (box.x || box.y) {
+                data.transform = get$3();
+                translate(data.transform, box.x, box.y);
+            }
+            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);
+    }
+    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 };
+        leafPaint.image = 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 {
+        if (firstUse)
+            onLoad(ui, event);
+        leafPaint.loadId = image.load(() => {
+            if (!ui.destroyed) {
+                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds))
+                    ui.forceUpdate('surface');
+                onLoadSuccess(ui, event);
+            }
+            leafPaint.loadId = null;
+        }, (error) => {
+            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.__naturalHeight = image.height;
+        if (data.__autoWidth || data.__autoHeight) {
+            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));
+}
+
+const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
+const { round, abs: abs$1 } = Math;
+function createPattern(ui, paint, pixelRatio) {
+    let { scaleX, scaleY } = ui.__world;
+    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;
+        }
+        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(width < 1 ? 1 : round(width), height < 1 ? 1 : round(height), opacity);
+        const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
+        paint.style = pattern;
+        paint.patternId = id;
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+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 } = ui.__world;
+    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+        return false;
+    }
+    else {
+        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 {
+            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.__world))
+                            createPattern(ui, paint, canvas.pixelRatio);
+                        ui.forceUpdate('surface');
+                    }), 300);
+                }
+            }
+            return false;
+        }
+    }
+}
+
+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) {
+    let { from, to, type, blendMode, opacity } = paint;
+    from || (from = defaultFrom$2);
+    to || (to = defaultTo$2);
+    const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height);
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+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.string(stop.color, opacity));
+    }
+}
+
+const { set: set$1, getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
+const { get: get$1, rotateOfOuter: rotateOfOuter$1, scaleOfOuter: scaleOfOuter$1 } = MatrixHelper;
+const defaultFrom$1 = { x: 0.5, y: 0.5 };
+const defaultTo$1 = { x: 0.5, y: 1 };
+const realFrom$1 = {};
+const realTo$1 = {};
+function radialGradient(paint, box) {
+    let { from, to, type, opacity, blendMode, stretch } = paint;
+    from || (from = defaultFrom$1);
+    to || (to = defaultTo$1);
+    const { x, y, width, height } = box;
+    set$1(realFrom$1, x + from.x * width, y + from.y * height);
+    set$1(realTo$1, x + to.x * width, y + to.y * height);
+    let transform;
+    if (width !== height || stretch) {
+        transform = get$1();
+        scaleOfOuter$1(transform, realFrom$1, width / height * (stretch || 1), 1);
+        rotateOfOuter$1(transform, realFrom$1, getAngle$1(realFrom$1, realTo$1) + 90);
+    }
+    const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style, transform };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+
+const { set, getAngle, getDistance } = PointHelper;
+const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
+const defaultFrom = { x: 0.5, y: 0.5 };
+const defaultTo = { x: 0.5, y: 1 };
+const realFrom = {};
+const realTo = {};
+function conicGradient(paint, box) {
+    let { from, to, type, opacity, blendMode, stretch } = paint;
+    from || (from = defaultFrom);
+    to || (to = defaultTo);
+    const { x, y, width, height } = box;
+    set(realFrom, x + from.x * width, y + from.y * height);
+    set(realTo, x + to.x * width, y + to.y * height);
+    const transform = get();
+    const angle = getAngle(realFrom, realTo);
+    if (Platform.conicGradientRotate90) {
+        scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1);
+        rotateOfOuter(transform, realFrom, angle + 90);
+    }
+    else {
+        scaleOfOuter(transform, realFrom, 1, width / height * (stretch || 1));
+        rotateOfOuter(transform, realFrom, angle);
+    }
+    const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style, transform };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+
+const PaintGradientModule = {
+    linearGradient,
+    radialGradient,
+    conicGradient
+};
+
+const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
+const tempBounds = {};
+const offsetOutBounds$1 = {};
+function shadow(ui, current, shape) {
+    let copyBounds, spreadScale;
+    const { __nowWorld: nowWorld, __layout } = ui;
+    const { shadow } = ui.__;
+    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
+    const other = current.getSameCanvas();
+    const end = shadow.length - 1;
+    toOffsetOutBounds$1(bounds, offsetOutBounds$1);
+    shadow.forEach((item, index) => {
+        other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, item.color);
+        spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
+        drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
+        copyBounds = bounds;
+        if (item.box) {
+            other.restore();
+            other.save();
+            if (worldCanvas) {
+                other.copyWorld(other, bounds, nowWorld, 'copy');
+                copyBounds = nowWorld;
+            }
+            worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
+        }
+        if (ui.__worldFlipped) {
+            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
+        }
+        else {
+            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        }
+        if (end && index < end)
+            other.clearWorld(copyBounds, true);
+    });
+    other.recycle(copyBounds);
+}
+function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
+    const { bounds, shapeBounds } = shape;
+    if (Platform.fullImageShadow) {
+        copy(tempBounds, canvas.bounds);
+        tempBounds.x += (outBounds.x - shapeBounds.x);
+        tempBounds.y += (outBounds.y - shapeBounds.y);
+        if (spreadScale) {
+            const { matrix } = shape;
+            tempBounds.x -= (bounds.x + (matrix ? matrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
+            tempBounds.y -= (bounds.y + (matrix ? matrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
+            tempBounds.width *= spreadScale;
+            tempBounds.height *= spreadScale;
+        }
+        canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
+    }
+    else {
+        if (spreadScale) {
+            copy(tempBounds, outBounds);
+            tempBounds.x -= (outBounds.width / 2) * (spreadScale - 1);
+            tempBounds.y -= (outBounds.height / 2) * (spreadScale - 1);
+            tempBounds.width *= spreadScale;
+            tempBounds.height *= spreadScale;
+        }
+        canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds);
+    }
+}
+
+const { toOffsetOutBounds } = BoundsHelper;
+const offsetOutBounds = {};
+function innerShadow(ui, current, shape) {
+    let copyBounds, spreadScale;
+    const { __nowWorld: nowWorld, __layout: __layout } = ui;
+    const { innerShadow } = ui.__;
+    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
+    const other = current.getSameCanvas();
+    const end = innerShadow.length - 1;
+    toOffsetOutBounds(bounds, offsetOutBounds);
+    innerShadow.forEach((item, index) => {
+        other.save();
+        other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX);
+        spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
+        drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
+        other.restore();
+        if (worldCanvas) {
+            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.__worldFlipped) {
+            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
+        }
+        else {
+            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        }
+        if (end && index < end)
+            other.clearWorld(copyBounds, true);
+    });
+    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.filter = 'none';
+}
+
+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';
+const langBefore = '《（「〈『〖【〔｛┌＜‘“＝' + money;
+const langAfter = '》）」〉』〗】〕｝┐＞’”！？，、。：；‰';
+const langSymbol = '≮≯≈≠＝…';
+const langBreak$1 = '—／～｜┆·';
+const beforeChar = '{[(<\'"' + langBefore;
+const afterChar = '>)]}%!?,.:;\'"' + langAfter;
+const symbolChar = afterChar + '_#~&*+\\=|' + langSymbol;
+const breakChar = '- ' + langBreak$1;
+const cjkRangeList = [
+    [0x4E00, 0x9FFF],
+    [0x3400, 0x4DBF],
+    [0x20000, 0x2A6DF],
+    [0x2A700, 0x2B73F],
+    [0x2B740, 0x2B81F],
+    [0x2B820, 0x2CEAF],
+    [0x2CEB0, 0x2EBEF],
+    [0x30000, 0x3134F],
+    [0x31350, 0x323AF],
+    [0x2E80, 0x2EFF],
+    [0x2F00, 0x2FDF],
+    [0x2FF0, 0x2FFF],
+    [0x3000, 0x303F],
+    [0x31C0, 0x31EF],
+    [0x3200, 0x32FF],
+    [0x3300, 0x33FF],
+    [0xF900, 0xFAFF],
+    [0xFE30, 0xFE4F],
+    [0x1F200, 0x1F2FF],
+    [0x2F800, 0x2FA1F],
+];
+const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join('|'));
+function mapChar(str) {
+    const map = {};
+    str.split('').forEach(char => map[char] = true);
+    return map;
+}
+const letterMap = mapChar(letter);
+const beforeMap = mapChar(beforeChar);
+const afterMap = mapChar(afterChar);
+const symbolMap = mapChar(symbolChar);
+const breakMap = mapChar(breakChar);
+var CharType;
+(function (CharType) {
+    CharType[CharType["Letter"] = 0] = "Letter";
+    CharType[CharType["Single"] = 1] = "Single";
+    CharType[CharType["Before"] = 2] = "Before";
+    CharType[CharType["After"] = 3] = "After";
+    CharType[CharType["Symbol"] = 4] = "Symbol";
+    CharType[CharType["Break"] = 5] = "Break";
+})(CharType || (CharType = {}));
+const { Letter: Letter$1, Single: Single$1, Before: Before$1, After: After$1, Symbol: Symbol$1, Break: Break$1 } = CharType;
+function getCharType(char) {
+    if (letterMap[char]) {
+        return Letter$1;
+    }
+    else if (breakMap[char]) {
+        return Break$1;
+    }
+    else if (beforeMap[char]) {
+        return Before$1;
+    }
+    else if (afterMap[char]) {
+        return After$1;
+    }
+    else if (symbolMap[char]) {
+        return Symbol$1;
+    }
+    else if (cjkReg.test(char)) {
+        return Single$1;
+    }
+    else {
+        return Letter$1;
+    }
+}
+
+const TextRowHelper = {
+    trimRight(row) {
+        const { words } = row;
+        let trimRight = 0, len = words.length, char;
+        for (let i = len - 1; i > -1; i--) {
+            char = words[i].data[0];
+            if (char.char === ' ') {
+                trimRight++;
+                row.width -= char.width;
+            }
+            else {
+                break;
+            }
+        }
+        if (trimRight)
+            words.splice(len - trimRight, trimRight);
+    }
+};
+
+function getTextCase(char, textCase, firstChar) {
+    switch (textCase) {
+        case 'title':
+            return firstChar ? char.toUpperCase() : char;
+        case 'upper':
+            return char.toUpperCase();
+        case 'lower':
+            return char.toLowerCase();
+        default:
+            return char;
+    }
+}
+
+const { trimRight } = TextRowHelper;
+const { Letter, Single, Before, After, Symbol, Break } = CharType;
+let word, row, wordWidth, rowWidth, realWidth;
+let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
+let textDrawData, rows = [], bounds;
+function createRows(drawData, content, style) {
+    textDrawData = drawData;
+    rows = drawData.rows;
+    bounds = drawData.bounds;
+    const { __letterSpacing, paraIndent, textCase } = style;
+    const { canvas } = Platform;
+    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;
+        startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
+        word = { data: [] }, row = { words: [] };
+        for (let i = 0, len = content.length; i < len; i++) {
+            char = content[i];
+            if (char === '\n') {
+                if (wordWidth)
+                    addWord();
+                row.paraEnd = true;
+                addRow();
+                paraStart = true;
+            }
+            else {
+                charType = getCharType(char);
+                if (charType === Letter && textCase !== 'none')
+                    char = getTextCase(char, textCase, !wordWidth);
+                charWidth = canvas.measureText(char).width;
+                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 (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) {
+                    if (breakAll) {
+                        if (wordWidth)
+                            addWord();
+                        addRow();
+                    }
+                    else {
+                        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) ;
+                else {
+                    if (charType === Break) {
+                        if (char === ' ' && wordWidth)
+                            addWord();
+                        addChar(char, charWidth);
+                        addWord();
+                    }
+                    else if (langBreak || afterBreak) {
+                        if (wordWidth)
+                            addWord();
+                        addChar(char, charWidth);
+                    }
+                    else {
+                        addChar(char, charWidth);
+                    }
+                }
+                lastCharType = charType;
+            }
+        }
+        if (wordWidth)
+            addWord();
+        if (rowWidth)
+            addRow();
+        rows.length > 0 && (rows[rows.length - 1].paraEnd = true);
+    }
+    else {
+        content.split('\n').forEach(content => {
+            textDrawData.paraNumber++;
+            rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
+        });
+    }
+}
+function addChar(char, width) {
+    if (charSize && !startCharSize)
+        startCharSize = charSize;
+    word.data.push({ char, width });
+    wordWidth += width;
+}
+function addWord() {
+    rowWidth += wordWidth;
+    word.width = wordWidth;
+    row.words.push(word);
+    word = { data: [] };
+    wordWidth = 0;
+}
+function addRow() {
+    if (paraStart) {
+        textDrawData.paraNumber++;
+        row.paraStart = true;
+        paraStart = false;
+    }
+    if (charSize) {
+        row.startCharSize = startCharSize;
+        row.endCharSize = charSize;
+        startCharSize = 0;
+    }
+    row.width = rowWidth;
+    if (bounds.width)
+        trimRight(row);
+    rows.push(row);
+    row = { words: [] };
+    rowWidth = 0;
+}
+
+const CharMode = 0;
+const WordMode = 1;
+const TextMode = 2;
+function layoutChar(drawData, style, width, _height) {
+    const { rows } = drawData;
+    const { textAlign, paraIndent, letterSpacing } = style;
+    let charX, addWordWidth, indentWidth, mode, wordChar;
+    rows.forEach(row => {
+        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 : TextMode);
+            if (row.isOverflow && !letterSpacing)
+                row.textMode = true;
+            if (mode === TextMode) {
+                row.x += indentWidth;
+                toTextChar$1(row);
+            }
+            else {
+                row.x += indentWidth;
+                charX = row.x;
+                row.data = [];
+                row.words.forEach(word => {
+                    if (mode === WordMode) {
+                        wordChar = { char: '', x: charX };
+                        charX = toWordChar(word.data, charX, wordChar);
+                        if (wordChar.char !== ' ')
+                            row.data.push(wordChar);
+                    }
+                    else {
+                        charX = toChar(word.data, charX, row.data);
+                    }
+                    if (!row.paraEnd && addWordWidth) {
+                        charX += addWordWidth;
+                        row.width += addWordWidth;
+                    }
+                });
+            }
+            row.words = null;
+        }
+    });
+}
+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;
+        charX += char.width;
+    });
+    return charX;
+}
+function toChar(data, charX, rowData) {
+    data.forEach(char => {
+        if (char.char !== ' ') {
+            char.x = charX;
+            rowData.push(char);
+        }
+        charX += char.width;
+    });
+    return charX;
+}
+
+function layoutText(drawData, style) {
+    const { rows, bounds } = drawData;
+    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 (__clipText && realHeight > height) {
+        realHeight = Math.max(height, __lineHeight);
+        drawData.overflow = rows.length;
+    }
+    else {
+        switch (verticalAlign) {
+            case 'middle':
+                y += (height - realHeight) / 2;
+                break;
+            case 'bottom':
+                y += (height - realHeight);
+        }
+    }
+    starY += y;
+    let row, rowX, rowWidth;
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i];
+        row.x = x;
+        switch (textAlign) {
+            case 'center':
+                row.x += (width - row.width) / 2;
+                break;
+            case 'right':
+                row.x += width - row.width;
+        }
+        if (row.paraStart && paraSpacing && i > 0)
+            starY += paraSpacing;
+        row.y = starY;
+        starY += __lineHeight;
+        if (drawData.overflow > i && starY > realHeight) {
+            row.isOverflow = true;
+            drawData.overflow = i + 1;
+        }
+        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;
+            }
+        }
+        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, 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 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);
+            }
+        });
+    }
+}
+function toTextChar(row) {
+    row.text = '';
+    row.data.forEach(char => {
+        row.text += char.char;
+    });
+    row.data = null;
+}
+
+function decorationText(drawData, style) {
+    const { fontSize } = style;
+    drawData.decorationHeight = fontSize / 11;
+    switch (style.textDecoration) {
+        case 'under':
+            drawData.decorationY = fontSize * 0.15;
+            break;
+        case 'delete':
+            drawData.decorationY = -fontSize * 0.35;
+    }
+}
+
+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]);
+        }
+    }
+}
+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
+};
+
+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 { 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 renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                    options = FileHelper.getExportOptions(options);
+                    const { scale, slice, trim } = options;
+                    const pixelRatio = options.pixelRatio || 1;
+                    const screenshot = options.screenshot || leaf.isApp;
+                    const fill = options.fill === undefined ? ((leaf.isLeafer && screenshot) ? leaf.fill : '') : options.fill;
+                    const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
+                    if (screenshot) {
+                        renderBounds = screenshot === true ? (leaf.isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                    }
+                    else {
+                        const { localTransform, __world: world } = leaf;
+                        matrix.set(world).divide(localTransform).invert();
+                        scaleX = 1 / (world.scaleX / leaf.scaleX);
+                        scaleY = 1 / (world.scaleY / leaf.scaleY);
+                        renderBounds = leaf.getBounds('render', 'local');
+                    }
+                    let { x, y, width, height } = renderBounds;
+                    if (scale) {
+                        matrix.scale(scale);
+                        width *= scale, height *= scale;
+                        scaleX *= scale, scaleY *= scale;
+                    }
+                    let canvas = Creator.canvas({ width: Math.ceil(width), height: Math.ceil(width), pixelRatio });
+                    const renderOptions = { matrix: matrix.translate(-x, -y).withScale(scaleX, scaleY) };
+                    if (slice) {
+                        leaf = leafer;
+                        renderOptions.bounds = canvas.bounds;
+                    }
+                    canvas.save();
+                    leaf.__render(canvas, renderOptions);
+                    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');
+                    const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
+                    over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
+                }));
+            }
+            else {
+                over({ data: false });
+            }
+        }));
+    }
+};
+let tasker;
+function addTask(task) {
+    if (!tasker)
+        tasker = new TaskProcessor();
+    return new Promise((resolve) => {
+        tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: 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()
+});
+try {
+    useCanvas('wx', wx);
+}
+catch (_a) { }
+
+LeaferCanvas.prototype.__createContext = function () {
+    if (this.viewSelect) {
+        const offscreenView = Platform$1.origin.createCanvas(1, 1);
+        const context = this.view.getContext('2d');
+        this.testView = this.view;
+        this.testContext = context;
+        this.view = offscreenView;
+    }
+    this.context = this.view.getContext('2d');
+    this.__bindContext();
+};
+LeaferCanvas.prototype.updateRender = function () {
+    if (this.testView) {
+        let pattern = this.context.createPattern(this.view, Platform$1.origin.noRepeat);
+        this.testContext.clearRect(0, 0, this.view.width, this.view.height);
+        this.testContext.fillStyle = pattern;
+        this.testContext.fillRect(0, 0, this.view.width, this.view.height);
+        this.testContext.fillStyle = pattern = null;
+    }
+};
+LeaferCanvas.prototype.updateViewSize = function () {
+    const { width, height, pixelRatio, view, testView } = this;
+    view.width = width * pixelRatio;
+    view.height = height * pixelRatio;
+    if (testView) {
+        testView.width = view.width;
+        testView.height = view.height;
+    }
+};
+
+export { Interaction, Layouter, LeaferCanvas, Renderer, Selector, Watcher, useCanvas };