leafer-draw 1.0.1 → 1.0.3

package/dist/web.cjs

@@ -0,0 +1,2575 @@
+'use strict';
+
+var core = require('@leafer/core');
+var draw = require('@leafer-ui/draw');
+
+const debug$3 = core.Debug.get('LeaferCanvas');
+class LeaferCanvas extends core.LeaferCanvasBase {
+    set zIndex(zIndex) {
+        const { style } = this.view;
+        style.zIndex = zIndex;
+        this.setAbsolute(this.view);
+    }
+    set childIndex(index) {
+        const { view, parentView } = this;
+        if (view && parentView) {
+            const beforeNode = parentView.children[index];
+            if (beforeNode) {
+                this.setAbsolute(beforeNode);
+                parentView.insertBefore(view, beforeNode);
+            }
+            else {
+                parentView.appendChild(beforeNode);
+            }
+        }
+    }
+    init() {
+        const { config } = this;
+        const view = config.view || config.canvas;
+        view ? this.__createViewFrom(view) : this.__createView();
+        const { style } = this.view;
+        style.display || (style.display = 'block');
+        this.parentView = this.view.parentElement;
+        if (this.parentView) {
+            const pStyle = this.parentView.style;
+            pStyle.webkitUserSelect = pStyle.userSelect = 'none';
+        }
+        if (core.Platform.syncDomFont && !this.parentView) {
+            style.display = 'none';
+            document.body.appendChild(this.view);
+        }
+        this.__createContext();
+        if (!this.autoLayout)
+            this.resize(config);
+    }
+    set backgroundColor(color) { this.view.style.backgroundColor = color; }
+    get backgroundColor() { return this.view.style.backgroundColor; }
+    set hittable(hittable) { this.view.style.pointerEvents = hittable ? 'auto' : 'none'; }
+    get hittable() { return this.view.style.pointerEvents !== 'none'; }
+    __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()) {
+                    this.setAbsolute(view);
+                    parent.style.position || (parent.style.position = 'relative');
+                }
+                parent.appendChild(view);
+            }
+        }
+        else {
+            debug$3.error(`no id: ${inputView}`);
+            this.__createView();
+        }
+    }
+    setAbsolute(view) {
+        const { style } = view;
+        style.position = 'absolute';
+        style.top = style.left = '0px';
+    }
+    updateViewSize() {
+        const { width, height, pixelRatio } = this;
+        const { style } = this.view;
+        style.width = width + 'px';
+        style.height = height + 'px';
+        this.view.width = Math.ceil(width * pixelRatio);
+        this.view.height = Math.ceil(height * pixelRatio);
+    }
+    updateClientBounds() {
+        this.clientBounds = this.view.getBoundingClientRect();
+    }
+    startAutoLayout(autoBounds, listener) {
+        this.resizeListener = listener;
+        if (autoBounds) {
+            this.autoBounds = autoBounds;
+            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());
+                }
+                else {
+                    this.checkAutoBounds(this.view);
+                    debug$3.warn('no parent');
+                }
+            }
+            catch (_a) {
+                this.imitateResizeObserver();
+            }
+        }
+        else {
+            window.addEventListener('resize', () => {
+                const pixelRatio = core.Platform.devicePixelRatio;
+                if (this.pixelRatio !== pixelRatio) {
+                    const { width, height } = this;
+                    this.emitResize({ width, height, pixelRatio });
+                }
+            });
+        }
+    }
+    imitateResizeObserver() {
+        if (this.autoLayout) {
+            if (this.parentView)
+                this.checkAutoBounds(this.parentView.getBoundingClientRect());
+            core.Platform.requestRender(this.imitateResizeObserver.bind(this));
+        }
+    }
+    checkAutoBounds(parentSize) {
+        const view = this.view;
+        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize);
+        const size = { width, height, pixelRatio: core.Platform.devicePixelRatio };
+        if (!this.isSameSize(size)) {
+            const { style } = view;
+            style.marginLeft = x + 'px';
+            style.marginTop = y + 'px';
+            this.emitResize(size);
+        }
+    }
+    stopAutoLayout() {
+        this.autoLayout = false;
+        this.resizeListener = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    emitResize(size) {
+        const oldSize = {};
+        core.DataHelper.copyAttrs(oldSize, this, core.canvasSizeAttrs);
+        this.resize(size);
+        if (this.width !== undefined)
+            this.resizeListener(new core.ResizeEvent(size, oldSize));
+    }
+    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();
+        }
+    }
+}
+
+core.canvasPatch(CanvasRenderingContext2D.prototype);
+core.canvasPatch(Path2D.prototype);
+
+const { mineType, fileType } = core.FileHelper;
+Object.assign(core.Creator, {
+    canvas: (options, manager) => new LeaferCanvas(options, manager),
+    image: (options) => new core.LeaferImage(options)
+});
+function useCanvas(_canvasType, _power) {
+    core.Platform.origin = {
+        createCanvas(width, height) {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            return canvas;
+        },
+        canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+        canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasSaveAs: (canvas, filename, quality) => {
+            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            return core.Platform.origin.download(url, filename);
+        },
+        download(url, filename) {
+            return new Promise((resolve) => {
+                let el = document.createElement('a');
+                el.href = url;
+                el.download = filename;
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+                resolve();
+            });
+        },
+        loadImage(src) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                const { crossOrigin } = core.Platform.image;
+                if (crossOrigin) {
+                    img.setAttribute('crossOrigin', crossOrigin);
+                    img.crossOrigin = crossOrigin;
+                }
+                img.onload = () => { resolve(img); };
+                img.onerror = (e) => { reject(e); };
+                img.src = core.Platform.image.getRealURL(src);
+            });
+        }
+    };
+    core.Platform.event = {
+        stopDefault(origin) { origin.preventDefault(); },
+        stopNow(origin) { origin.stopImmediatePropagation(); },
+        stop(origin) { origin.stopPropagation(); }
+    };
+    core.Platform.canvas = core.Creator.canvas();
+    core.Platform.conicGradientSupport = !!core.Platform.canvas.context.createConicGradient;
+}
+core.Platform.name = 'web';
+core.Platform.isMobile = 'ontouchstart' in window;
+core.Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
+core.defineKey(core.Platform, 'devicePixelRatio', { get() { return Math.max(1, devicePixelRatio); } });
+const { userAgent } = navigator;
+if (userAgent.indexOf("Firefox") > -1) {
+    core.Platform.conicGradientRotate90 = true;
+    core.Platform.intWheelDeltaY = true;
+    core.Platform.syncDomFont = true;
+}
+else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
+    core.Platform.fullImageShadow = true;
+}
+if (userAgent.indexOf('Windows') > -1) {
+    core.Platform.os = 'Windows';
+    core.Platform.intWheelDeltaY = true;
+}
+else if (userAgent.indexOf('Mac') > -1) {
+    core.Platform.os = 'Mac';
+}
+else if (userAgent.indexOf('Linux') > -1) {
+    core.Platform.os = 'Linux';
+}
+
+class Watcher {
+    get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
+    get updatedList() {
+        if (this.hasRemove) {
+            const updatedList = new core.LeafList();
+            this.__updatedList.list.forEach(item => { if (item.leafer)
+                updatedList.add(item); });
+            return updatedList;
+        }
+        else {
+            return this.__updatedList;
+        }
+    }
+    constructor(target, userConfig) {
+        this.totalTimes = 0;
+        this.config = {};
+        this.__updatedList = new core.LeafList();
+        this.target = target;
+        if (userConfig)
+            this.config = core.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(core.RenderEvent.REQUEST);
+    }
+    __onAttrChange(event) {
+        this.__updatedList.add(event.target);
+        this.update();
+    }
+    __onChildEvent(event) {
+        if (event.type === core.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 core.WatchEvent(core.WatchEvent.DATA, { updatedList: this.updatedList }));
+        this.__updatedList = new core.LeafList();
+        this.totalTimes++;
+        this.changed = false;
+        this.hasVisible = false;
+        this.hasRemove = false;
+        this.hasAdd = false;
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(core.PropertyEvent.CHANGE, this.__onAttrChange, this),
+            target.on_([core.ChildEvent.ADD, core.ChildEvent.REMOVE], this.__onChildEvent, this),
+            target.on_(core.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 } = core.LeafHelper;
+const { pushAllChildBranch, pushAllParent } = core.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) {
+    let layout;
+    updateList.list.forEach(leaf => {
+        layout = leaf.__layout;
+        if (layout.opacityChanged)
+            updateAllWorldOpacity(leaf);
+        if (layout.stateStyleChanged)
+            setTimeout(() => layout.stateStyleChanged && leaf.updateState());
+        leaf.__updateChange();
+    });
+}
+
+const { worldBounds } = core.LeafBoundsHelper;
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
+class LayoutBlockData {
+    constructor(list) {
+        this.updatedBounds = new core.Bounds();
+        this.beforeBounds = new core.Bounds();
+        this.afterBounds = new core.Bounds();
+        if (list instanceof Array)
+            list = new core.LeafList(list);
+        this.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 } = core.LeafHelper;
+const debug$2 = core.Debug.get('Layouter');
+class Layouter {
+    constructor(target, userConfig) {
+        this.totalTimes = 0;
+        this.config = {};
+        this.__levelList = new core.LeafLevelList();
+        this.target = target;
+        if (userConfig)
+            this.config = core.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(core.LayoutEvent.START);
+            this.layoutOnce();
+            target.emitEvent(new core.LayoutEvent(core.LayoutEvent.END, this.layoutedBlocks, this.times));
+        }
+        catch (e) {
+            debug$2.error(e);
+        }
+        this.layoutedBlocks = null;
+    }
+    layoutAgain() {
+        if (this.layouting) {
+            this.waitAgain = true;
+        }
+        else {
+            this.layoutOnce();
+        }
+    }
+    layoutOnce() {
+        if (this.layouting)
+            return debug$2.warn('layouting');
+        if (this.times > 3)
+            return debug$2.warn('layout max times');
+        this.times++;
+        this.totalTimes++;
+        this.layouting = true;
+        this.target.emit(core.WatchEvent.REQUEST);
+        if (this.totalTimes > 1) {
+            this.partLayout();
+        }
+        else {
+            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 = core.Run.start('PartLayout');
+        const { target, __updatedList: updateList } = this;
+        const { BEFORE, LAYOUT, AFTER } = core.LayoutEvent;
+        const blocks = this.getBlocks(updateList);
+        blocks.forEach(item => item.setBefore());
+        target.emitEvent(new core.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 core.LayoutEvent(LAYOUT, blocks, this.times));
+        target.emitEvent(new core.LayoutEvent(AFTER, blocks, this.times));
+        this.addBlocks(blocks);
+        this.__levelList.reset();
+        this.__updatedList = null;
+        core.Run.end(t);
+    }
+    fullLayout() {
+        const t = core.Run.start('FullLayout');
+        const { target } = this;
+        const { BEFORE, LAYOUT, AFTER } = core.LayoutEvent;
+        const blocks = this.getBlocks(new core.LeafList(target));
+        target.emitEvent(new core.LayoutEvent(BEFORE, blocks, this.times));
+        Layouter.fullLayout(target);
+        blocks.forEach(item => { item.setAfter(); });
+        target.emitEvent(new core.LayoutEvent(LAYOUT, blocks, this.times));
+        target.emitEvent(new core.LayoutEvent(AFTER, blocks, this.times));
+        this.addBlocks(blocks);
+        core.Run.end(t);
+    }
+    static fullLayout(target) {
+        updateAllMatrix(target, true);
+        if (target.isBranch) {
+            core.BranchHelper.updateBounds(target);
+        }
+        else {
+            core.LeafHelper.updateBounds(target);
+        }
+        updateAllChange(target);
+    }
+    addExtra(leaf) {
+        if (!this.__updatedList.has(leaf)) {
+            const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+            updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world);
+            updatedList.add(leaf);
+        }
+    }
+    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_(core.LayoutEvent.REQUEST, this.layout, this),
+            target.on_(core.LayoutEvent.AGAIN, this.layoutAgain, this),
+            target.on_(core.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$1 = core.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 = core.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(core.LayoutEvent.REQUEST);
+    }
+    render(callback) {
+        if (!(this.running && this.canvas.view)) {
+            this.changed = true;
+            return;
+        }
+        const { target } = this;
+        this.times = 0;
+        this.totalBounds = new core.Bounds();
+        debug$1.log(target.innerName, '--->');
+        try {
+            this.emitRender(core.RenderEvent.START);
+            this.renderOnce(callback);
+            this.emitRender(core.RenderEvent.END, this.totalBounds);
+            core.ImageManager.clearRecycled();
+        }
+        catch (e) {
+            this.rendering = false;
+            debug$1.error(e);
+        }
+        debug$1.log('-------------|');
+    }
+    renderAgain() {
+        if (this.rendering) {
+            this.waitAgain = true;
+        }
+        else {
+            this.renderOnce();
+        }
+    }
+    renderOnce(callback) {
+        if (this.rendering)
+            return debug$1.warn('rendering');
+        if (this.times > 3)
+            return debug$1.warn('render max times');
+        this.times++;
+        this.totalTimes++;
+        this.rendering = true;
+        this.changed = false;
+        this.renderBounds = new core.Bounds();
+        this.renderOptions = {};
+        if (callback) {
+            this.emitRender(core.RenderEvent.BEFORE);
+            callback();
+        }
+        else {
+            this.requestLayout();
+            if (this.ignore) {
+                this.ignore = this.rendering = false;
+                return;
+            }
+            this.emitRender(core.RenderEvent.BEFORE);
+            if (this.config.usePartRender && this.totalTimes > 1) {
+                this.partRender();
+            }
+            else {
+                this.fullRender();
+            }
+        }
+        this.emitRender(core.RenderEvent.RENDER, this.renderBounds, this.renderOptions);
+        this.emitRender(core.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$1.warn('PartRender: need update attr');
+        this.mergeBlocks();
+        list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
+            this.clipRender(block); });
+    }
+    clipRender(block) {
+        const t = core.Run.start('PartRender');
+        const { canvas } = this;
+        const bounds = block.getIntersect(canvas.bounds);
+        const includes = block.includes(this.target.__world);
+        const realBounds = new core.Bounds(bounds);
+        canvas.save();
+        if (includes && !core.Debug.showRepaint) {
+            canvas.clear();
+        }
+        else {
+            bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
+            canvas.clearWorld(bounds, true);
+            canvas.clipWorld(bounds, true);
+        }
+        this.__render(bounds, includes, realBounds);
+        canvas.restore();
+        core.Run.end(t);
+    }
+    fullRender() {
+        const t = core.Run.start('FullRender');
+        const { canvas } = this;
+        canvas.save();
+        canvas.clear();
+        this.__render(canvas.bounds, true);
+        canvas.restore();
+        core.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 (core.Debug.showRepaint)
+            this.canvas.strokeWorld(bounds, 'red');
+        this.target.__render(this.canvas, options);
+        this.renderBounds = realBounds = realBounds || bounds;
+        this.renderOptions = options;
+        this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
+        if (core.Debug.showHitView)
+            this.renderHitView(options);
+        if (core.Debug.showBoundsView)
+            this.renderBoundsView(options);
+        this.canvas.updateRender(realBounds);
+    }
+    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 core.Bounds();
+            bounds.setList(list);
+            list.length = 0;
+            list.push(bounds);
+        }
+    }
+    __requestRender() {
+        const startTime = Date.now();
+        core.Platform.requestRender(() => {
+            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
+            if (this.running) {
+                if (this.changed && this.canvas.view)
+                    this.render();
+                this.target.emit(core.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 core.Bounds(0, 0, width, height);
+            if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
+                this.addBlock(this.canvas.bounds);
+                this.target.forceUpdate('surface');
+                return;
+            }
+        }
+        this.addBlock(new core.Bounds(0, 0, 1, 1));
+        this.changed = true;
+    }
+    __onLayoutEnd(event) {
+        if (event.data)
+            event.data.map(item => {
+                let empty;
+                if (item.updatedList)
+                    item.updatedList.list.some(leaf => {
+                        empty = (!leaf.__world.width || !leaf.__world.height);
+                        if (empty) {
+                            if (!leaf.isLeafer)
+                                debug$1.tip(leaf.innerName, ': empty');
+                            empty = (!leaf.isBranch || leaf.isBranchLeaf);
+                        }
+                        return empty;
+                    });
+                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            });
+    }
+    emitRender(type, bounds, options) {
+        this.target.emitEvent(new core.RenderEvent(type, this.times, bounds, options));
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(core.RenderEvent.REQUEST, this.update, this),
+            target.on_(core.LayoutEvent.END, this.__onLayoutEnd, this),
+            target.on_(core.RenderEvent.AGAIN, this.renderAgain, this),
+            target.on_(core.ResizeEvent.RESIZE, this.__onResize, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = this.canvas = this.config = null;
+        }
+    }
+}
+
+Object.assign(core.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
+});
+core.Platform.layout = Layouter.fullLayout;
+
+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 && draw.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 && draw.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 } = core.BoundsHelper;
+function shape(ui, current, options) {
+    const canvas = current.getSameCanvas();
+    const nowWorld = ui.__nowWorld;
+    let bounds, fitMatrix, shapeBounds, worldCanvas;
+    let { scaleX, scaleY } = nowWorld;
+    if (scaleX < 0)
+        scaleX = -scaleX;
+    if (scaleY < 0)
+        scaleY = -scaleY;
+    if (current.bounds.includes(nowWorld)) {
+        worldCanvas = canvas;
+        bounds = shapeBounds = nowWorld;
+    }
+    else {
+        const { renderShapeSpread: spread } = ui.__layout;
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [spread * scaleY, spread * scaleX]) : current.bounds, nowWorld);
+        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 = draw.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: draw.ColorConvert.string(color, opacity) };
+        case 'image':
+            return draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        case 'linear':
+            return draw.PaintGradient.linearGradient(paint, boxBounds);
+        case 'radial':
+            return draw.PaintGradient.radialGradient(paint, boxBounds);
+        case 'angular':
+            return draw.PaintGradient.conicGradient(paint, boxBounds);
+        default:
+            return paint.r !== undefined ? { type: 'solid', style: draw.ColorConvert.string(paint) } : undefined;
+    }
+}
+
+const PaintModule = {
+    compute,
+    fill,
+    fills,
+    fillText,
+    stroke,
+    strokes,
+    strokeText,
+    drawTextStroke,
+    shape
+};
+
+let origin = {};
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate } = core.MatrixHelper;
+function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
+    const transform = get$3();
+    translate$1(transform, box.x + x, box.y + y);
+    scaleHelper(transform, scaleX, scaleY);
+    if (rotation)
+        rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
+    data.transform = transform;
+}
+function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
+    const transform = get$3();
+    translate$1(transform, box.x + x, box.y + y);
+    if (scaleX)
+        scaleHelper(transform, scaleX, scaleY);
+    if (rotation)
+        rotate(transform, rotation);
+    data.transform = transform;
+}
+function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
+    const transform = get$3();
+    if (rotation) {
+        if (align === 'center') {
+            rotateOfOuter$1(transform, { x: width / 2, y: height / 2 }, rotation);
+        }
+        else {
+            rotate(transform, rotation);
+            switch (rotation) {
+                case 90:
+                    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 + x;
+    origin.y = box.y + y;
+    translate$1(transform, origin.x, origin.y);
+    if (scaleX)
+        scaleOfOuter$1(transform, origin, scaleX, scaleY);
+    data.transform = transform;
+}
+
+const { get: get$2, translate } = core.MatrixHelper;
+const tempBox = new core.Bounds();
+const tempPoint = {};
+const tempScaleData = {};
+function createData(leafPaint, image, paint, box) {
+    const { blendMode, sync } = paint;
+    if (blendMode)
+        leafPaint.blendMode = blendMode;
+    if (sync)
+        leafPaint.sync = sync;
+    leafPaint.data = getPatternData(paint, box, image);
+}
+function getPatternData(paint, box, image) {
+    let { width, height } = image;
+    if (paint.padding)
+        box = tempBox.set(box).shrink(paint.padding);
+    if (paint.mode === 'strench')
+        paint.mode = 'stretch';
+    const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
+    const sameBox = box.width === width && box.height === height;
+    const data = { mode };
+    const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
+    const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
+    let x = 0, y = 0, scaleX, scaleY;
+    if (!mode || mode === 'cover' || mode === 'fit') {
+        if (!sameBox || rotation) {
+            const sw = box.width / swapWidth, sh = box.height / swapHeight;
+            scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
+            x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
+        }
+    }
+    else if (scale || size) {
+        core.MathHelper.getScaleData(scale, size, image, tempScaleData);
+        scaleX = tempScaleData.scaleX;
+        scaleY = tempScaleData.scaleY;
+    }
+    if (align) {
+        const imageBounds = { x, y, width: swapWidth, height: swapHeight };
+        if (scaleX)
+            imageBounds.width *= scaleX, imageBounds.height *= scaleY;
+        core.AlignHelper.toPoint(align, imageBounds, box, tempPoint, true);
+        x += tempPoint.x, y += tempPoint.y;
+    }
+    if (offset)
+        x += offset.x, y += offset.y;
+    switch (mode) {
+        case 'stretch':
+            if (!sameBox)
+                width = box.width, height = box.height;
+            break;
+        case 'normal':
+        case 'clip':
+            if (x || y || 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, align);
+            if (!repeat)
+                data.repeat = 'repeat';
+            break;
+        case 'fit':
+        case 'cover':
+        default:
+            if (scaleX)
+                fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
+    }
+    if (!data.transform) {
+        if (box.x || box.y) {
+            data.transform = get$2();
+            translate(data.transform, box.x, box.y);
+        }
+    }
+    if (scaleX && mode !== 'stretch') {
+        data.scaleX = scaleX;
+        data.scaleY = scaleY;
+    }
+    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';
+    return data;
+}
+
+let cache, box = new core.Bounds();
+const { isSame } = core.BoundsHelper;
+function image(ui, attrName, paint, boxBounds, firstUse) {
+    let leafPaint, event;
+    const image = core.ImageManager.get(paint);
+    if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
+        leafPaint = cache.leafPaint;
+    }
+    else {
+        leafPaint = { type: paint.type, image };
+        cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
+    }
+    if (firstUse || image.loading)
+        event = { image, attrName, attrValue: paint };
+    if (image.ready) {
+        checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
+        if (firstUse) {
+            onLoad(ui, event);
+            onLoadSuccess(ui, event);
+        }
+    }
+    else if (image.error) {
+        if (firstUse)
+            onLoadError(ui, event, image.error);
+    }
+    else {
+        ignoreRender(ui, true);
+        if (firstUse)
+            onLoad(ui, event);
+        leafPaint.loadId = image.load(() => {
+            ignoreRender(ui, false);
+            if (!ui.destroyed) {
+                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
+                    if (image.hasOpacityPixel)
+                        ui.__layout.hitCanvasChanged = true;
+                    ui.forceUpdate('surface');
+                }
+                onLoadSuccess(ui, event);
+            }
+            leafPaint.loadId = null;
+        }, (error) => {
+            ignoreRender(ui, false);
+            onLoadError(ui, event, error);
+            leafPaint.loadId = null;
+        });
+    }
+    return leafPaint;
+}
+function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
+    if (attrName === 'fill' && !ui.__.__naturalWidth) {
+        const data = ui.__;
+        data.__naturalWidth = image.width / data.pixelRatio;
+        data.__naturalHeight = image.height / data.pixelRatio;
+        if (data.__autoSide) {
+            ui.forceUpdate('width');
+            if (ui.__proxyData) {
+                ui.setProxyAttr('width', data.width);
+                ui.setProxyAttr('height', data.height);
+            }
+            return false;
+        }
+    }
+    if (!leafPaint.data)
+        createData(leafPaint, image, paint, boxBounds);
+    return true;
+}
+function onLoad(ui, event) {
+    emit(ui, core.ImageEvent.LOAD, event);
+}
+function onLoadSuccess(ui, event) {
+    emit(ui, core.ImageEvent.LOADED, event);
+}
+function onLoadError(ui, event, error) {
+    event.error = error;
+    ui.forceUpdate('surface');
+    emit(ui, core.ImageEvent.ERROR, event);
+}
+function emit(ui, type, data) {
+    if (ui.hasEvent(type))
+        ui.emitEvent(new core.ImageEvent(type, data));
+}
+function ignoreRender(ui, value) {
+    const { leafer } = ui;
+    if (leafer && leafer.viewReady)
+        leafer.renderer.ignore = value;
+}
+
+const { get: get$1, scale, copy: copy$1 } = core.MatrixHelper;
+const { ceil, abs: abs$1 } = Math;
+function createPattern(ui, paint, pixelRatio) {
+    let { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    const id = scaleX + '-' + scaleY + '-' + pixelRatio;
+    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$1();
+            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 > core.Platform.image.maxCacheSize)
+                return false;
+        }
+        let maxSize = core.Platform.image.maxPatternSize;
+        if (!image.isSVG) {
+            const imageSize = image.width * image.height;
+            if (maxSize > imageSize)
+                maxSize = imageSize;
+        }
+        if (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$1();
+                if (transform)
+                    copy$1(imageMatrix, transform);
+            }
+            scale(imageMatrix, 1 / scaleX, 1 / scaleY);
+        }
+        const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, opacity);
+        const pattern = image.getPattern(canvas, repeat || (core.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 } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    const { pixelRatio } = canvas;
+    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
+        return false;
+    }
+    else {
+        const { data } = paint;
+        if (allowPaint) {
+            if (!data.repeat) {
+                let { width, height } = data;
+                width *= abs(scaleX) * pixelRatio;
+                height *= abs(scaleY) * pixelRatio;
+                if (data.scaleX) {
+                    width *= data.scaleX;
+                    height *= data.scaleY;
+                }
+                allowPaint = (width * height > core.Platform.image.maxCacheSize) || draw.Export.running;
+            }
+            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 || paint.sync || draw.Export.running) {
+                createPattern(ui, paint, pixelRatio);
+            }
+            else {
+                if (!paint.patternTask) {
+                    paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                        paint.patternTask = null;
+                        if (canvas.bounds.hit(ui.__nowWorld))
+                            createPattern(ui, paint, pixelRatio);
+                        ui.forceUpdate('surface');
+                    }), 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;
+                core.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,
+    checkImage,
+    createPattern,
+    recycleImage,
+    createData,
+    getPatternData,
+    fillOrFitMode,
+    clipMode,
+    repeatMode
+};
+
+const { toPoint: toPoint$2 } = core.AroundHelper;
+const realFrom$2 = {};
+const realTo$2 = {};
+function linearGradient(paint, box) {
+    let { from, to, type, blendMode, opacity } = paint;
+    toPoint$2(from || 'top', box, realFrom$2);
+    toPoint$2(to || 'bottom', box, realTo$2);
+    const style = core.Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+function applyStops(gradient, stops, opacity) {
+    if (stops) {
+        let stop;
+        for (let i = 0, len = stops.length; i < len; i++) {
+            stop = stops[i];
+            if (typeof stop === 'string') {
+                gradient.addColorStop(i / (len - 1), draw.ColorConvert.string(stop, opacity));
+            }
+            else {
+                gradient.addColorStop(stop.offset, draw.ColorConvert.string(stop.color, opacity));
+            }
+        }
+    }
+}
+
+const { getAngle, getDistance: getDistance$1 } = core.PointHelper;
+const { get, rotateOfOuter, scaleOfOuter } = core.MatrixHelper;
+const { toPoint: toPoint$1 } = core.AroundHelper;
+const realFrom$1 = {};
+const realTo$1 = {};
+function radialGradient(paint, box) {
+    let { from, to, type, opacity, blendMode, stretch } = paint;
+    toPoint$1(from || 'center', box, realFrom$1);
+    toPoint$1(to || 'bottom', box, realTo$1);
+    const style = core.Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style };
+    const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
+    if (transform)
+        data.transform = transform;
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+function getTransform(box, from, to, stretch, rotate90) {
+    let transform;
+    const { width, height } = box;
+    if (width !== height || stretch) {
+        const angle = getAngle(from, to);
+        transform = get();
+        if (rotate90) {
+            scaleOfOuter(transform, from, width / height * (stretch || 1), 1);
+            rotateOfOuter(transform, from, angle + 90);
+        }
+        else {
+            scaleOfOuter(transform, from, 1, width / height * (stretch || 1));
+            rotateOfOuter(transform, from, angle);
+        }
+    }
+    return transform;
+}
+
+const { getDistance } = core.PointHelper;
+const { toPoint } = core.AroundHelper;
+const realFrom = {};
+const realTo = {};
+function conicGradient(paint, box) {
+    let { from, to, type, opacity, blendMode, stretch } = paint;
+    toPoint(from || 'center', box, realFrom);
+    toPoint(to || 'bottom', box, realTo);
+    const style = core.Platform.conicGradientSupport ? core.Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : core.Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style };
+    const transform = getTransform(box, realFrom, realTo, stretch || 1, core.Platform.conicGradientRotate90);
+    if (transform)
+        data.transform = transform;
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+
+const PaintGradientModule = {
+    linearGradient,
+    radialGradient,
+    conicGradient,
+    getTransform
+};
+
+const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = core.BoundsHelper;
+const tempBounds = {};
+const offsetOutBounds$1 = {};
+function shadow(ui, current, shape) {
+    let copyBounds, spreadScale;
+    const { __nowWorld: nowWorld, __layout } = ui;
+    const { shadow } = ui.__;
+    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
+    const 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 (core.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 } = core.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.__nowWorld.a);
+    origin.copyWorldToInner(current, ui.__nowWorld, ui.__layout.renderBounds);
+    origin.filter = 'none';
+}
+
+function backgroundBlur(_ui, _current, _shape) {
+}
+
+const EffectModule = {
+    shadow,
+    innerShadow,
+    blur,
+    backgroundBlur
+};
+
+const { excludeRenderBounds } = core.LeafBoundsHelper;
+draw.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.__.mask === '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.__.mask !== '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 } = core.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();
+                        if (rowWidth)
+                            addRow();
+                    }
+                    else {
+                        if (!afterBreak)
+                            afterBreak = charType === Letter && lastCharType == After;
+                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                            if (wordWidth)
+                                addWord();
+                            if (rowWidth)
+                                addRow();
+                        }
+                        else {
+                            if (rowWidth)
+                                addRow();
+                        }
+                    }
+                }
+                if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
+                else {
+                    if (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 (row.isOverflow || wordChar.char !== ' ')
+                            row.data.push(wordChar);
+                    }
+                    else {
+                        charX = toChar(word.data, charX, row.data, row.isOverflow);
+                    }
+                    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, isOverflow) {
+    data.forEach(char => {
+        if (isOverflow || 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;
+        if (row.width < width || (row.width > width && !__clipText)) {
+            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, x, width) {
+    if (!width)
+        return;
+    const { rows, overflow } = drawData;
+    let { textOverflow } = style;
+    rows.splice(overflow);
+    if (textOverflow && textOverflow !== 'show') {
+        if (textOverflow === 'hide')
+            textOverflow = '';
+        else if (textOverflow === 'ellipsis')
+            textOverflow = '...';
+        let char, charRight;
+        const ellipsisWidth = textOverflow ? core.Platform.canvas.measureText(textOverflow).width : 0;
+        const right = x + width - ellipsisWidth;
+        const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
+        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 } = core.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: core.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, x, width);
+    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) {
+    const doOpacity = typeof opacity === 'number' && opacity !== 1;
+    if (typeof color === 'string') {
+        if (doOpacity && draw.ColorConvert.object)
+            color = draw.ColorConvert.object(color);
+        else
+            return color;
+    }
+    let a = color.a === undefined ? 1 : color.a;
+    if (doOpacity)
+        a *= opacity;
+    const rgb = color.r + ',' + color.g + ',' + color.b;
+    return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
+}
+
+const ColorConvertModule = {
+    string
+};
+
+const { setPoint, addPoint, toBounds } = core.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 core.Bounds();
+    toBounds(pointBounds, bounds);
+    return bounds.scale(1 / canvas.pixelRatio).ceil();
+}
+
+const ExportModule = {
+    export(leaf, filename, options) {
+        this.running = true;
+        const fileType = core.FileHelper.fileType(filename);
+        const isDownload = filename.includes('.');
+        options = core.FileHelper.getExportOptions(options);
+        return addTask((success) => new Promise((resolve) => {
+            const over = (result) => {
+                success(result);
+                resolve();
+                this.running = false;
+            };
+            const { toURL } = core.Platform;
+            const { download } = core.Platform.origin;
+            if (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
+            }
+            if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                return over({ data: isDownload ? true : leaf.toSVG() });
+            }
+            const { leafer } = leaf;
+            if (leafer) {
+                checkLazy(leaf);
+                leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
+                    let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                    const { worldTransform, isLeafer, isFrame } = leaf;
+                    const { slice, trim, onCanvas } = options;
+                    const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                    const contextSettings = options.contextSettings || leafer.config.contextSettings;
+                    const screenshot = options.screenshot || leaf.isApp;
+                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
+                    const needFill = core.FileHelper.isOpaqueImage(filename) || fill, matrix = new core.Matrix();
+                    if (screenshot) {
+                        renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                    }
+                    else {
+                        let relative = options.relative || (isLeafer ? 'inner' : 'local');
+                        scaleX = worldTransform.scaleX;
+                        scaleY = worldTransform.scaleY;
+                        switch (relative) {
+                            case 'inner':
+                                matrix.set(worldTransform);
+                                break;
+                            case 'local':
+                                matrix.set(worldTransform).divide(leaf.localTransform);
+                                scaleX /= leaf.scaleX;
+                                scaleY /= leaf.scaleY;
+                                break;
+                            case 'world':
+                                scaleX = 1;
+                                scaleY = 1;
+                                break;
+                            case 'page':
+                                relative = leaf.leafer;
+                            default:
+                                matrix.set(worldTransform).divide(leaf.getTransform(relative));
+                                const l = relative.worldTransform;
+                                scaleX /= scaleX / l.scaleX;
+                                scaleY /= scaleY / l.scaleY;
+                        }
+                        renderBounds = leaf.getBounds('render', relative);
+                    }
+                    const scaleData = { scaleX: 1, scaleY: 1 };
+                    core.MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                    let pixelRatio = options.pixelRatio || 1;
+                    if (leaf.isApp) {
+                        scaleData.scaleX *= pixelRatio;
+                        scaleData.scaleY *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
+                    const { x, y, width, height } = new core.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                    const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
+                    let canvas = core.Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
+                    let sliceLeaf;
+                    if (slice) {
+                        sliceLeaf = leaf;
+                        sliceLeaf.__worldOpacity = 0;
+                        leaf = leafer;
+                        renderOptions.bounds = canvas.bounds;
+                    }
+                    canvas.save();
+                    if (isFrame && fill !== undefined) {
+                        const oldFill = leaf.get('fill');
+                        leaf.fill = '';
+                        leaf.__render(canvas, renderOptions);
+                        leaf.fill = oldFill;
+                    }
+                    else {
+                        leaf.__render(canvas, renderOptions);
+                    }
+                    canvas.restore();
+                    if (sliceLeaf)
+                        sliceLeaf.__updateWorldOpacity();
+                    if (trim) {
+                        trimBounds = getTrimBounds(canvas);
+                        const old = canvas, { width, height } = trimBounds;
+                        const config = { x: 0, y: 0, width, height, pixelRatio };
+                        canvas = core.Creator.canvas(config);
+                        canvas.copyWorld(old, trimBounds, config);
+                    }
+                    if (needFill)
+                        canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
+                    if (onCanvas)
+                        onCanvas(canvas);
+                    const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
+                    over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
+                }));
+            }
+            else {
+                over({ data: false });
+            }
+        }));
+    }
+};
+let tasker;
+function addTask(task) {
+    if (!tasker)
+        tasker = new core.TaskProcessor();
+    return new Promise((resolve) => {
+        tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
+    });
+}
+function checkLazy(leaf) {
+    if (leaf.__.__needComputePaint)
+        leaf.__.__computePaint();
+    if (leaf.isBranch)
+        leaf.children.forEach(child => checkLazy(child));
+}
+
+const canvas = core.LeaferCanvasBase.prototype;
+const debug = core.Debug.get('@leafer-ui/export');
+canvas.export = function (filename, options) {
+    const { quality, blob } = core.FileHelper.getExportOptions(options);
+    if (filename.includes('.')) {
+        return this.saveAs(filename, quality);
+    }
+    else if (blob) {
+        return this.toBlob(filename, quality);
+    }
+    else {
+        return this.toDataURL(filename, quality);
+    }
+};
+canvas.toBlob = function (type, quality) {
+    return new Promise((resolve) => {
+        core.Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+            resolve(blob);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(null);
+        });
+    });
+};
+canvas.toDataURL = function (type, quality) {
+    return core.Platform.origin.canvasToDataURL(this.view, type, quality);
+};
+canvas.saveAs = function (filename, quality) {
+    return new Promise((resolve) => {
+        core.Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+            resolve(true);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(false);
+        });
+    });
+};
+
+Object.assign(draw.TextConvert, TextConvertModule);
+Object.assign(draw.ColorConvert, ColorConvertModule);
+Object.assign(draw.Paint, PaintModule);
+Object.assign(draw.PaintImage, PaintImageModule);
+Object.assign(draw.PaintGradient, PaintGradientModule);
+Object.assign(draw.Effect, EffectModule);
+Object.assign(draw.Export, ExportModule);
+
+useCanvas();
+
+Object.defineProperty(exports, "LeaferImage", {
+    enumerable: true,
+    get: function () { return core.LeaferImage; }
+});
+exports.Layouter = Layouter;
+exports.LeaferCanvas = LeaferCanvas;
+exports.Renderer = Renderer;
+exports.Watcher = Watcher;
+exports.useCanvas = useCanvas;
+Object.keys(core).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return core[k]; }
+    });
+});
+Object.keys(draw).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return draw[k]; }
+    });
+});