leafer-draw 1.0.0-rc.10

package/dist/web.esm.js

@@ -0,0 +1,2353 @@
+import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, MatrixHelper, ImageEvent, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
+export * from '@leafer/core';
+export { LeaferImage } from '@leafer/core';
+import { ColorConvert, Export, Group, TextConvert, Paint, PaintImage as PaintImage$1, PaintGradient as PaintGradient$1, Effect } from '@leafer-ui/draw';
+export * from '@leafer-ui/draw';
+
+const debug$2 = Debug.get('LeaferCanvas');
+class LeaferCanvas extends LeaferCanvasBase {
+    init() {
+        const { view } = this.config;
+        view ? this.__createViewFrom(view) : this.__createView();
+        const { style } = this.view;
+        style.display || (style.display = 'block');
+        this.parentView = this.view.parentElement;
+        if (this.parentView)
+            this.parentView.style.userSelect = 'none';
+        if (Platform.syncDomFont && !this.parentView) {
+            this.view.style.display = 'none';
+            document.body.appendChild(this.view);
+        }
+        this.__createContext();
+        if (!this.autoLayout)
+            this.resize(this.config);
+    }
+    set backgroundColor(color) { this.view.style.backgroundColor = color; }
+    get backgroundColor() { return this.view.style.backgroundColor; }
+    set hittable(hittable) { this.view.style.pointerEvents = hittable ? 'auto' : 'none'; }
+    get hittable() { return this.view.style.pointerEvents !== 'none'; }
+    __createView() {
+        this.view = document.createElement('canvas');
+    }
+    __createViewFrom(inputView) {
+        let find = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView;
+        if (find) {
+            if (find instanceof HTMLCanvasElement) {
+                this.view = find;
+            }
+            else {
+                let parent = find;
+                if (find === window || find === document) {
+                    const div = document.createElement('div');
+                    const { style } = div;
+                    style.position = 'absolute';
+                    style.top = style.bottom = style.left = style.right = '0px';
+                    document.body.appendChild(div);
+                    parent = div;
+                }
+                this.__createView();
+                const view = this.view;
+                if (parent.hasChildNodes()) {
+                    const { style } = view;
+                    style.position = 'absolute';
+                    style.top = style.left = '0px';
+                    parent.style.position || (parent.style.position = 'relative');
+                }
+                parent.appendChild(view);
+            }
+        }
+        else {
+            debug$2.error(`no id: ${inputView}`);
+            this.__createView();
+        }
+    }
+    updateViewSize() {
+        const { width, height, pixelRatio } = this;
+        const { style } = this.view;
+        style.width = width + 'px';
+        style.height = height + 'px';
+        this.view.width = Math.ceil(width * pixelRatio);
+        this.view.height = Math.ceil(height * pixelRatio);
+    }
+    updateClientBounds() {
+        this.clientBounds = this.view.getBoundingClientRect();
+    }
+    startAutoLayout(autoBounds, listener) {
+        this.autoBounds = autoBounds;
+        this.resizeListener = listener;
+        try {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                this.updateClientBounds();
+                for (const entry of entries)
+                    this.checkAutoBounds(entry.contentRect);
+            });
+            const parent = this.parentView;
+            if (parent) {
+                this.resizeObserver.observe(parent);
+                this.checkAutoBounds(parent.getBoundingClientRect());
+            }
+        }
+        catch (_a) {
+            this.imitateResizeObserver();
+        }
+    }
+    imitateResizeObserver() {
+        if (this.autoLayout) {
+            if (this.parentView)
+                this.checkAutoBounds(this.parentView.getBoundingClientRect());
+            Platform.requestRender(this.imitateResizeObserver.bind(this));
+        }
+    }
+    checkAutoBounds(parentSize) {
+        const view = this.view;
+        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize);
+        if (width !== this.width || height !== this.height) {
+            const { style } = view;
+            const { pixelRatio } = this;
+            style.marginLeft = x + 'px';
+            style.marginTop = y + 'px';
+            const size = { width, height, pixelRatio };
+            const oldSize = {};
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+            this.resize(size);
+            if (this.width !== undefined)
+                this.resizeListener(new ResizeEvent(size, oldSize));
+        }
+    }
+    stopAutoLayout() {
+        this.autoLayout = false;
+        this.resizeListener = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    unrealCanvas() {
+        if (!this.unreal && this.parentView) {
+            const view = this.view;
+            if (view)
+                view.remove();
+            this.view = this.parentView;
+            this.unreal = true;
+        }
+    }
+    destroy() {
+        if (this.view) {
+            this.stopAutoLayout();
+            if (!this.unreal) {
+                const view = this.view;
+                if (view.parentElement)
+                    view.remove();
+            }
+            super.destroy();
+        }
+    }
+}
+
+canvasPatch(CanvasRenderingContext2D.prototype);
+canvasPatch(Path2D.prototype);
+
+const { mineType, fileType } = FileHelper;
+Object.assign(Creator, {
+    canvas: (options, manager) => new LeaferCanvas(options, manager),
+    image: (options) => new LeaferImage(options)
+});
+function useCanvas(_canvasType, _power) {
+    Platform.origin = {
+        createCanvas(width, height) {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            return canvas;
+        },
+        canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+        canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasSaveAs: (canvas, filename, quality) => {
+            return new Promise((resolve) => {
+                let el = document.createElement('a');
+                el.href = canvas.toDataURL(mineType(fileType(filename)), quality);
+                el.download = filename;
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+                resolve();
+            });
+        },
+        loadImage(src) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                const { suffix, crossOrigin } = Platform.image;
+                if (crossOrigin) {
+                    img.setAttribute('crossOrigin', crossOrigin);
+                    img.crossOrigin = crossOrigin;
+                }
+                img.onload = () => { resolve(img); };
+                img.onerror = (e) => { reject(e); };
+                if (!src.startsWith('data:') && !src.startsWith('blob:') && suffix)
+                    src += (src.includes("?") ? "&" : "?") + suffix;
+                img.src = src;
+            });
+        }
+    };
+    Platform.event = {
+        stopDefault(origin) { origin.preventDefault(); },
+        stopNow(origin) { origin.stopImmediatePropagation(); },
+        stop(origin) { origin.stopPropagation(); }
+    };
+    Platform.canvas = Creator.canvas();
+    Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
+}
+Platform.name = 'web';
+Platform.isMobile = 'ontouchstart' in window;
+Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
+Platform.devicePixelRatio = Math.max(1, devicePixelRatio);
+const { userAgent } = navigator;
+if (userAgent.indexOf("Firefox") > -1) {
+    Platform.conicGradientRotate90 = true;
+    Platform.intWheelDeltaY = true;
+    Platform.syncDomFont = true;
+}
+else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
+    Platform.fullImageShadow = true;
+}
+if (userAgent.indexOf('Windows') > -1) {
+    Platform.os = 'Windows';
+    Platform.intWheelDeltaY = true;
+}
+else if (userAgent.indexOf('Mac') > -1) {
+    Platform.os = 'Mac';
+}
+else if (userAgent.indexOf('Linux') > -1) {
+    Platform.os = 'Linux';
+}
+
+class Watcher {
+    get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
+    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;
+        }
+    }
+}
+
+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) => undefined,
+    interaction: (_target, _canvas, _selector, _options) => undefined
+});
+Platform.layout = Layouter.fullLayout;
+
+const PaintImage = {};
+const PaintGradient = {};
+
+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, pixelRatio, slice, trim } = options;
+                    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, height, 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, 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$1, PaintImageModule);
+Object.assign(PaintGradient$1, PaintGradientModule);
+Object.assign(Effect, EffectModule);
+Object.assign(Export, ExportModule);
+
+useCanvas();
+
+export { Layouter, LeaferCanvas, Renderer, Watcher, useCanvas };