leafer-ui 1.0.0-beta.8 → 1.0.0-rc.2

package/dist/web.esm.js

@@ -0,0 +1,2652 @@
+import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, BoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, Creator, LeaferCanvasBase, Cursor, canvasSizeAttrs, canvasPatch, InteractionHelper, MathHelper, InteractionBase, LeaferImage, FileHelper, MatrixHelper, ImageEvent, PointHelper, TaskProcessor } from '@leafer/core';
+export * from '@leafer/core';
+export { LeaferImage } from '@leafer/core';
+import { ColorConvert as ColorConvert$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$1 } from '@leafer-ui/core';
+export * from '@leafer-ui/core';
+
+class Watcher {
+    get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
+    get updatedList() {
+        if (this.hasRemove) {
+            const updatedList = new LeafList();
+            this.__updatedList.list.forEach(item => { if (item.leafer)
+                updatedList.push(item); });
+            return updatedList;
+        }
+        else {
+            return this.__updatedList;
+        }
+    }
+    constructor(target, userConfig) {
+        this.totalTimes = 0;
+        this.config = {};
+        this.__updatedList = new LeafList();
+        this.target = target;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+    }
+    start() {
+        if (this.disabled)
+            return;
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    disable() {
+        this.stop();
+        this.__removeListenEvents();
+        this.disabled = true;
+    }
+    update() {
+        this.changed = true;
+        if (this.running)
+            this.target.emit(RenderEvent.REQUEST);
+    }
+    __onAttrChange(event) {
+        this.__updatedList.push(event.target);
+        this.update();
+    }
+    __onChildEvent(event) {
+        if (event.type === ChildEvent.ADD) {
+            this.hasAdd = true;
+            this.__pushChild(event.child);
+        }
+        else {
+            this.hasRemove = true;
+            this.__updatedList.push(event.parent);
+        }
+        this.update();
+    }
+    __pushChild(child) {
+        this.__updatedList.push(child);
+        if (child.isBranch)
+            this.__loopChildren(child);
+    }
+    __loopChildren(parent) {
+        const { children } = parent;
+        for (let i = 0, len = children.length; i < len; i++)
+            this.__pushChild(children[i]);
+    }
+    __onRquestData() {
+        this.target.emitEvent(new WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }));
+        this.__updatedList = new LeafList();
+        this.totalTimes++;
+        this.changed = false;
+        this.hasVisible = false;
+        this.hasRemove = false;
+        this.hasAdd = false;
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(PropertyEvent.CHANGE, this.__onAttrChange, this),
+            target.on_([ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this),
+            target.on_(WatchEvent.REQUEST, this.__onRquestData, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = null;
+            this.__updatedList = null;
+        }
+    }
+}
+
+const { updateAllWorldMatrix: updateAllWorldMatrix$1, updateAllWorldOpacity } = LeafHelper;
+const { pushAllChildBranch, pushAllParent } = BranchHelper;
+function updateMatrix(updateList, levelList) {
+    let layout;
+    updateList.list.forEach(leaf => {
+        layout = leaf.__layout;
+        if (levelList.without(leaf) && !layout.useZoomProxy) {
+            if (layout.matrixChanged) {
+                updateAllWorldMatrix$1(leaf);
+                levelList.push(leaf);
+                if (leaf.isBranch)
+                    pushAllChildBranch(leaf, levelList);
+                pushAllParent(leaf, levelList);
+            }
+            else if (layout.boundsChanged) {
+                levelList.push(leaf);
+                if (leaf.isBranch)
+                    leaf.__tempNumber = 0;
+                pushAllParent(leaf, levelList);
+            }
+        }
+    });
+}
+function updateBounds(boundsList) {
+    let itemList, branch;
+    boundsList.sort(true);
+    boundsList.levels.forEach(level => {
+        itemList = boundsList.levelMap[level];
+        for (let i = 0, len = itemList.length; i < len; i++) {
+            branch = itemList[i];
+            if (branch.isBranch && branch.__tempNumber) {
+                for (let j = 0, jLen = branch.children.length; j < jLen; j++) {
+                    if (!branch.children[j].isBranch) {
+                        branch.children[j].__updateWorldBounds();
+                    }
+                }
+            }
+            branch.__updateWorldBounds();
+        }
+    });
+}
+function updateChange(updateList) {
+    updateList.list.forEach(leaf => {
+        if (leaf.__layout.opacityChanged)
+            updateAllWorldOpacity(leaf);
+        leaf.__updateChange();
+    });
+}
+
+const { worldBounds } = LeafBoundsHelper;
+const { setByListWithHandle } = BoundsHelper;
+class LayoutBlockData {
+    constructor(list) {
+        this.updatedBounds = new Bounds();
+        this.beforeBounds = new Bounds();
+        this.afterBounds = new Bounds();
+        if (list instanceof Array)
+            list = new LeafList(list);
+        this.updatedList = list;
+    }
+    setBefore() {
+        setByListWithHandle(this.beforeBounds, this.updatedList.list, worldBounds);
+    }
+    setAfter() {
+        setByListWithHandle(this.afterBounds, this.updatedList.list, worldBounds);
+        this.updatedBounds.setByList([this.beforeBounds, this.afterBounds]);
+    }
+    merge(data) {
+        this.updatedList.pushList(data.updatedList.list);
+        this.beforeBounds.add(data.beforeBounds);
+        this.afterBounds.add(data.afterBounds);
+        this.updatedBounds.add(data.updatedBounds);
+    }
+    destroy() {
+        this.updatedList = null;
+    }
+}
+
+const { updateAllWorldMatrix, updateAllChange } = LeafHelper;
+const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
+const debug$2 = Debug.get('Layouter');
+class Layouter {
+    constructor(target, userConfig) {
+        this.totalTimes = 0;
+        this.config = {};
+        this.__levelList = new LeafLevelList();
+        this.target = target;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+    }
+    start() {
+        if (this.disabled)
+            return;
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    disable() {
+        this.stop();
+        this.__removeListenEvents();
+        this.disabled = true;
+    }
+    layout() {
+        if (!this.running)
+            return;
+        const { target } = this;
+        this.times = 0;
+        try {
+            target.emit(LayoutEvent.START);
+            this.layoutOnce();
+            target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
+        }
+        catch (e) {
+            debug$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(WatchEvent.REQUEST);
+        if (this.totalTimes > 1) {
+            this.partLayout();
+        }
+        else {
+            this.fullLayout();
+        }
+        this.layouting = false;
+        if (this.waitAgain) {
+            this.waitAgain = false;
+            this.layoutOnce();
+        }
+    }
+    partLayout() {
+        var _a;
+        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const t = Run.start('PartLayout');
+        const { target, __updatedList: updateList } = this;
+        const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
+        const blocks = this.getBlocks(updateList);
+        blocks.forEach(item => { item.setBefore(); });
+        target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
+        updateList.sort();
+        updateMatrix(updateList, this.__levelList);
+        updateBounds(this.__levelList);
+        updateChange(updateList);
+        blocks.forEach(item => item.setAfter());
+        target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
+        target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
+        this.addBlocks(blocks);
+        this.__levelList.reset();
+        this.__updatedList = null;
+        Run.end(t);
+    }
+    fullLayout() {
+        const t = Run.start('FullLayout');
+        const { target } = this;
+        const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
+        const blocks = this.getBlocks(new LeafList(target));
+        target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
+        Layouter.fullLayout(target);
+        blocks.forEach(item => { item.setAfter(); });
+        target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
+        target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
+        this.addBlocks(blocks);
+        Run.end(t);
+    }
+    static fullLayout(target) {
+        updateAllWorldMatrix(target);
+        if (target.isBranch) {
+            const branchStack = [target];
+            pushAllBranchStack(target, branchStack);
+            updateWorldBoundsByBranchStack(branchStack);
+        }
+        else {
+            target.__updateWorldBounds();
+        }
+        updateAllChange(target);
+    }
+    createBlock(data) {
+        return new LayoutBlockData(data);
+    }
+    getBlocks(list) {
+        return [this.createBlock(list)];
+    }
+    addBlocks(current) {
+        this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current;
+    }
+    __onReceiveWatchData(event) {
+        this.__updatedList = event.data.updatedList;
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(LayoutEvent.REQUEST, this.layout, this),
+            target.on_(LayoutEvent.AGAIN, this.layoutAgain, this),
+            target.on_(WatchEvent.DATA, this.__onReceiveWatchData, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = null;
+            this.config = null;
+        }
+    }
+}
+
+const debug$1 = Debug.get('Renderer');
+class Renderer {
+    get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
+    constructor(target, canvas, userConfig) {
+        this.FPS = 60;
+        this.totalTimes = 0;
+        this.times = 0;
+        this.config = {
+            usePartRender: true,
+            maxFPS: 60
+        };
+        this.target = target;
+        this.canvas = canvas;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+        this.__requestRender();
+    }
+    start() {
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    update() {
+        this.changed = true;
+    }
+    requestLayout() {
+        this.target.emit(LayoutEvent.REQUEST);
+    }
+    render(callback) {
+        if (!(this.running && this.canvas.view)) {
+            this.changed = true;
+            return;
+        }
+        const { target } = this;
+        this.times = 0;
+        this.totalBounds = new Bounds();
+        debug$1.log(target.innerName, '--->');
+        try {
+            this.emitRender(RenderEvent.START);
+            this.renderOnce(callback);
+            this.emitRender(RenderEvent.END, this.totalBounds);
+            ImageManager.clearRecycled();
+        }
+        catch (e) {
+            this.rendering = false;
+            debug$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 Bounds();
+        this.renderOptions = {};
+        if (callback) {
+            this.emitRender(RenderEvent.BEFORE);
+            callback();
+        }
+        else {
+            this.requestLayout();
+            this.emitRender(RenderEvent.BEFORE);
+            if (this.config.usePartRender && this.totalTimes > 1) {
+                this.partRender();
+            }
+            else {
+                this.fullRender();
+            }
+        }
+        this.emitRender(RenderEvent.RENDER, this.renderBounds, this.renderOptions);
+        this.emitRender(RenderEvent.AFTER, this.renderBounds, this.renderOptions);
+        this.updateBlocks = null;
+        this.rendering = false;
+        if (this.waitAgain) {
+            this.waitAgain = false;
+            this.renderOnce();
+        }
+    }
+    partRender() {
+        const { canvas, updateBlocks: list } = this;
+        if (!list)
+            return debug$1.warn('PartRender: need update attr');
+        if (list.some(block => block.includes(this.target.__world)))
+            this.mergeBlocks();
+        list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
+            this.clipRender(block); });
+    }
+    clipRender(block) {
+        const t = Run.start('PartRender');
+        const { canvas } = this;
+        const bounds = block.getIntersect(canvas.bounds);
+        const includes = block.includes(this.target.__world);
+        const realBounds = new Bounds().copy(bounds);
+        canvas.save();
+        if (includes && !Debug.showRepaint) {
+            canvas.clear();
+        }
+        else {
+            bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil();
+            canvas.clearWorld(bounds, true);
+            canvas.clipWorld(bounds, true);
+        }
+        this.__render(bounds, realBounds);
+        canvas.restore();
+        Run.end(t);
+    }
+    fullRender() {
+        const t = Run.start('FullRender');
+        const { canvas } = this;
+        canvas.save();
+        canvas.clear();
+        this.__render(canvas.bounds);
+        canvas.restore();
+        Run.end(t);
+    }
+    __render(bounds, realBounds) {
+        const options = (bounds === null || bounds === void 0 ? void 0 : bounds.includes(this.target.__world)) ? {} : { bounds };
+        if (this.needFill)
+            this.canvas.fillWorld(bounds, this.config.fill);
+        if (Debug.showRepaint)
+            this.canvas.strokeWorld(bounds, 'red');
+        this.target.__render(this.canvas, options);
+        this.renderBounds = realBounds || bounds;
+        this.renderOptions = options;
+        this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
+        if (Debug.showHitView)
+            this.renderHitView(options);
+        if (Debug.showBoundsView)
+            this.renderBoundsView(options);
+        this.canvas.updateRender();
+    }
+    renderHitView(_options) { }
+    renderBoundsView(_options) { }
+    addBlock(block) {
+        if (!this.updateBlocks)
+            this.updateBlocks = [];
+        this.updateBlocks.push(block);
+    }
+    mergeBlocks() {
+        const { updateBlocks: list } = this;
+        if (list) {
+            const bounds = new Bounds();
+            bounds.setByList(list);
+            list.length = 0;
+            list.push(bounds);
+        }
+    }
+    __requestRender() {
+        const startTime = Date.now();
+        Platform.requestRender(() => {
+            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
+            if (this.changed) {
+                if (this.running && this.canvas.view)
+                    this.render();
+            }
+            if (this.running)
+                this.target.emit(AnimateEvent.FRAME);
+            if (this.target)
+                this.__requestRender();
+        });
+    }
+    __onResize(e) {
+        if (this.canvas.unreal)
+            return;
+        if (e.bigger || !e.samePixelRatio) {
+            const { width, height } = e.old;
+            const bounds = new Bounds(0, 0, width, height);
+            if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
+                this.addBlock(this.canvas.bounds);
+                this.target.forceUpdate('blendMode');
+            }
+        }
+    }
+    __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.warn(leaf.innerName, ': empty');
+                            empty = (!leaf.isBranch || leaf.isBranchLeaf);
+                        }
+                        return empty;
+                    });
+                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            });
+    }
+    emitRender(type, bounds, options) {
+        this.target.emitEvent(new RenderEvent(type, this.times, bounds, options));
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [
+            target.on_(RenderEvent.REQUEST, this.update, this),
+            target.on_(LayoutEvent.END, this.__onLayoutEnd, this),
+            target.on_(RenderEvent.AGAIN, this.renderAgain, this),
+            target.on_(ResizeEvent.RESIZE, this.__onResize, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+    }
+    destroy() {
+        if (this.target) {
+            this.stop();
+            this.__removeListenEvents();
+            this.target = null;
+            this.canvas = null;
+            this.config = null;
+        }
+    }
+}
+
+const { hitRadiusPoint } = BoundsHelper;
+class FindPath {
+    constructor(target, selector) {
+        this.target = target;
+        this.selector = selector;
+    }
+    getByPoint(hitPoint, hitRadius, options) {
+        if (!hitRadius)
+            hitRadius = 0;
+        if (!options)
+            options = {};
+        const through = options.through || false;
+        const ignoreHittable = options.ignoreHittable || false;
+        this.exclude = options.exclude || null;
+        this.point = { x: hitPoint.x, y: hitPoint.y, radiusX: hitRadius, radiusY: hitRadius };
+        this.findList = [];
+        this.eachFind(this.target.children, this.target.__onlyHitMask);
+        const list = this.findList;
+        const leaf = this.getBestMatchLeaf();
+        const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
+        this.clear();
+        return through ? { path, leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, leaf };
+    }
+    getBestMatchLeaf() {
+        const { findList: targets } = this;
+        if (targets.length > 1) {
+            let find;
+            this.findList = [];
+            const { x, y } = this.point;
+            const point = { x, y, radiusX: 0, radiusY: 0 };
+            for (let i = 0, len = targets.length; i < len; i++) {
+                find = targets[i];
+                if (LeafHelper.worldHittable(find)) {
+                    this.hitChild(find, point);
+                    if (this.findList.length)
+                        return this.findList[0];
+                }
+            }
+        }
+        return targets[0];
+    }
+    getPath(leaf) {
+        const path = new LeafList();
+        while (leaf) {
+            path.push(leaf);
+            leaf = leaf.parent;
+        }
+        path.push(this.target);
+        return path;
+    }
+    getHitablePath(leaf) {
+        const path = this.getPath(leaf);
+        let item, hittablePath = new LeafList();
+        for (let i = path.list.length - 1; i > -1; i--) {
+            item = path.list[i];
+            if (!item.__.hittable)
+                break;
+            hittablePath.unshift(item);
+            if (!item.__.hitChildren)
+                break;
+        }
+        return hittablePath;
+    }
+    getThroughPath(list) {
+        const throughPath = new LeafList();
+        const pathList = [];
+        for (let i = list.length - 1; i > -1; i--) {
+            pathList.push(this.getPath(list[i]));
+        }
+        let path, nextPath, leaf;
+        for (let i = 0, len = pathList.length; i < len; i++) {
+            path = pathList[i], nextPath = pathList[i + 1];
+            for (let j = 0, jLen = path.length; j < jLen; j++) {
+                leaf = path.list[j];
+                if (nextPath && nextPath.has(leaf))
+                    break;
+                throughPath.push(leaf);
+            }
+        }
+        return throughPath;
+    }
+    eachFind(children, hitMask) {
+        let child, hit;
+        const { point } = this, len = children.length;
+        for (let i = len - 1; i > -1; i--) {
+            child = children[i];
+            if (!child.__.visible || (hitMask && !child.__.isMask))
+                continue;
+            hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point);
+            if (child.isBranch) {
+                if (hit || child.__ignoreHitWorld) {
+                    this.eachFind(child.children, child.__onlyHitMask);
+                    if (child.isBranchLeaf && !this.findList.length)
+                        this.hitChild(child, point);
+                }
+            }
+            else {
+                if (hit)
+                    this.hitChild(child, point);
+            }
+        }
+    }
+    hitChild(child, point) {
+        if (this.exclude && this.exclude.has(child))
+            return;
+        if (child.__hitWorld(point))
+            this.findList.push(child);
+    }
+    clear() {
+        this.point = null;
+        this.findList = null;
+        this.exclude = null;
+    }
+    destroy() {
+        this.clear();
+    }
+}
+
+class Selector {
+    constructor(target, userConfig) {
+        this.config = {};
+        this.innerIdList = {};
+        this.idList = {};
+        this.classNameList = {};
+        this.tagNameList = {};
+        this.target = target;
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.findPath = new FindPath(target, this);
+        this.__listenEvents();
+    }
+    getByPoint(hitPoint, hitRadius, options) {
+        if (Platform.name === 'node')
+            this.target.emit(LayoutEvent.CHECK_UPDATE);
+        return this.findPath.getByPoint(hitPoint, hitRadius, options);
+    }
+    find(name, branch) {
+        if (typeof name === 'number') {
+            return this.getByInnerId(name, branch);
+        }
+        else if (name.startsWith('#')) {
+            return this.getById(name.substring(1), branch);
+        }
+        else if (name.startsWith('.')) {
+            return this.getByClassName(name.substring(1), branch);
+        }
+        else {
+            return this.getByTagName(name, branch);
+        }
+    }
+    getByInnerId(name, branch) {
+        let cache = this.innerIdList[name];
+        if (cache)
+            return cache;
+        if (!branch)
+            branch = this.target;
+        let find;
+        this.loopFind(branch, (leaf) => {
+            if (leaf.innerId === name) {
+                find = leaf;
+                this.innerIdList[name] = find;
+                return true;
+            }
+            else {
+                return false;
+            }
+        });
+        return find;
+    }
+    getById(name, branch) {
+        let cache = this.idList[name];
+        if (cache)
+            return cache;
+        if (!branch)
+            branch = this.target;
+        let find;
+        this.loopFind(branch, (leaf) => {
+            if (leaf.id === name) {
+                find = leaf;
+                this.idList[name] = find;
+                return true;
+            }
+            else {
+                return false;
+            }
+        });
+        return find;
+    }
+    getByClassName(name, branch) {
+        if (!branch)
+            branch = this.target;
+        let find = [];
+        this.loopFind(branch, (leaf) => {
+            if (leaf.className === name)
+                find.push(leaf);
+            return false;
+        });
+        return find;
+    }
+    getByTagName(name, branch) {
+        if (!branch)
+            branch = this.target;
+        let find = [];
+        this.loopFind(branch, (leaf) => {
+            if (leaf.__tag === name)
+                find.push(leaf);
+            return false;
+        });
+        return find;
+    }
+    loopFind(branch, find) {
+        if (find(branch))
+            return;
+        const { children } = branch;
+        for (let i = 0, len = children.length; i < len; i++) {
+            branch = children[i];
+            if (find(branch))
+                return;
+            if (branch.isBranch)
+                this.loopFind(branch, find);
+        }
+    }
+    __onRemoveChild(event) {
+        const target = event.target;
+        if (this.idList[target.id])
+            this.idList[target.id] = null;
+        if (this.innerIdList[target.id])
+            this.innerIdList[target.innerId] = null;
+    }
+    __listenEvents() {
+        this.__eventIds = [
+            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+        this.__eventIds.length = 0;
+    }
+    destroy() {
+        if (this.__eventIds.length) {
+            this.__removeListenEvents();
+            this.findPath.destroy();
+            this.innerIdList = {};
+            this.idList = {};
+            this.classNameList = {};
+            this.tagNameList = {};
+        }
+    }
+}
+
+Object.assign(Creator, {
+    watcher: (target, options) => new Watcher(target, options),
+    layouter: (target, options) => new Layouter(target, options),
+    renderer: (target, canvas, options) => new Renderer(target, canvas, options),
+    selector: (target, options) => new Selector(target, options)
+});
+Platform.layout = Layouter.fullLayout;
+
+const debug = Debug.get('LeaferCanvas');
+class LeaferCanvas extends LeaferCanvasBase {
+    init() {
+        const { view } = this.config;
+        view ? this.__createViewFrom(view) : this.__createView();
+        const { style } = this.view;
+        style.display || (style.display = 'block');
+        this.parentView = this.view.parentElement;
+        if (Platform.syncDomFont && !this.parentView) {
+            this.view.style.display = 'none';
+            document.body.appendChild(this.view);
+        }
+        this.__createContext();
+        if (!this.autoLayout)
+            this.resize(this.config);
+    }
+    set backgroundColor(color) { this.view.style.backgroundColor = color; }
+    get backgroundColor() { return this.view.style.backgroundColor; }
+    set hittable(hittable) { this.view.style.pointerEvents = hittable ? 'auto' : 'none'; }
+    get hittable() { return this.view.style.pointerEvents !== 'none'; }
+    __createView() {
+        this.view = document.createElement('canvas');
+    }
+    setCursor(cursor) {
+        const list = [];
+        this.eachCursor(cursor, list);
+        if (typeof list[list.length - 1] === 'object')
+            list.push('default');
+        this.view.style.cursor = list.map(item => (typeof item === 'object') ? `url(${item.url}) ${item.x || 0} ${item.y || 0}` : item).join(',');
+    }
+    eachCursor(cursor, list, level = 0) {
+        level++;
+        if (cursor instanceof Array) {
+            cursor.forEach(item => this.eachCursor(item, list, level));
+        }
+        else {
+            const custom = typeof cursor === 'string' && Cursor.get(cursor);
+            if (custom && level < 2) {
+                this.eachCursor(custom, list, level);
+            }
+            else {
+                list.push(cursor);
+            }
+        }
+    }
+    __createViewFrom(inputView) {
+        let find = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView;
+        if (find) {
+            if (find instanceof HTMLCanvasElement) {
+                this.view = find;
+            }
+            else {
+                let parent = find;
+                if (find === window || find === document) {
+                    const div = document.createElement('div');
+                    const { style } = div;
+                    style.position = 'absolute';
+                    style.top = style.bottom = style.left = style.right = '0px';
+                    document.body.appendChild(div);
+                    parent = div;
+                }
+                this.__createView();
+                const view = this.view;
+                if (parent.hasChildNodes()) {
+                    const { style } = view;
+                    style.position = 'absolute';
+                    style.top = style.left = '0px';
+                    parent.style.position || (parent.style.position = 'relative');
+                }
+                parent.appendChild(view);
+            }
+        }
+        else {
+            debug.error(`no id: ${inputView}`);
+            this.__createView();
+        }
+    }
+    updateViewSize() {
+        const { width, height, pixelRatio } = this;
+        const { style } = this.view;
+        style.width = width + 'px';
+        style.height = height + 'px';
+        this.view.width = width * pixelRatio;
+        this.view.height = height * pixelRatio;
+    }
+    updateClientBounds() {
+        this.clientBounds = this.view.getBoundingClientRect();
+    }
+    startAutoLayout(autoBounds, listener) {
+        this.autoBounds = autoBounds;
+        this.resizeListener = listener;
+        try {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                this.updateClientBounds();
+                for (const entry of entries)
+                    this.checkAutoBounds(entry.contentRect);
+            });
+            const parent = this.parentView;
+            if (parent) {
+                this.resizeObserver.observe(parent);
+                this.checkAutoBounds(parent.getBoundingClientRect());
+            }
+        }
+        catch (_a) {
+            this.imitateResizeObserver();
+        }
+    }
+    imitateResizeObserver() {
+        if (this.autoLayout) {
+            if (this.parentView)
+                this.checkAutoBounds(this.parentView.getBoundingClientRect());
+            Platform.requestRender(this.imitateResizeObserver.bind(this));
+        }
+    }
+    checkAutoBounds(parentSize) {
+        const view = this.view;
+        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize);
+        if (width !== this.width || height !== this.height) {
+            const { style } = view;
+            const { pixelRatio } = this;
+            style.marginLeft = x + 'px';
+            style.marginTop = y + 'px';
+            const size = { width, height, pixelRatio };
+            const oldSize = {};
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+            this.resize(size);
+            if (this.width !== undefined)
+                this.resizeListener(new ResizeEvent(size, oldSize));
+        }
+    }
+    stopAutoLayout() {
+        this.autoLayout = false;
+        this.resizeListener = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    unrealCanvas() {
+        if (!this.unreal && this.parentView) {
+            const view = this.view;
+            if (view)
+                view.remove();
+            this.view = this.parentView;
+            this.unreal = true;
+        }
+    }
+    destroy() {
+        if (this.view) {
+            this.stopAutoLayout();
+            if (!this.unreal) {
+                const view = this.view;
+                if (view.parentElement)
+                    view.remove();
+            }
+            super.destroy();
+        }
+    }
+}
+
+canvasPatch(CanvasRenderingContext2D.prototype);
+canvasPatch(Path2D.prototype);
+
+const PointerEventHelper = {
+    convert(e, local) {
+        const base = InteractionHelper.getBase(e);
+        const data = Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: e.width, height: e.height, pointerType: e.pointerType, pressure: e.pressure });
+        if (data.pointerType === 'pen') {
+            data.tangentialPressure = e.tangentialPressure;
+            data.tiltX = e.tiltX;
+            data.tiltY = e.tiltY;
+            data.twist = e.twist;
+        }
+        return data;
+    },
+    convertMouse(e, local) {
+        const base = InteractionHelper.getBase(e);
+        return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'mouse', pressure: 0.5 });
+    },
+    convertTouch(e, local) {
+        const touch = PointerEventHelper.getTouch(e);
+        const base = InteractionHelper.getBase(e);
+        return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'touch', pressure: touch.force });
+    },
+    getTouch(e) {
+        return e.targetTouches[0] || e.changedTouches[0];
+    }
+};
+
+const WheelEventHelper = {
+    getMove(e, config) {
+        let { moveSpeed } = config;
+        let { deltaX, deltaY } = e;
+        if (e.shiftKey && !deltaX) {
+            deltaX = deltaY;
+            deltaY = 0;
+        }
+        if (deltaX > 50)
+            deltaX = Math.max(50, deltaX / 3);
+        if (deltaY > 50)
+            deltaY = Math.max(50, deltaY / 3);
+        return { x: -deltaX * moveSpeed * 2, y: -deltaY * moveSpeed * 2 };
+    },
+    getScale(e, config) {
+        let zoom;
+        let scale = 1;
+        let { zoomMode, zoomSpeed } = config;
+        const delta = e.deltaY || e.deltaX;
+        if (zoomMode) {
+            zoom = !e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta);
+            if (e.shiftKey || e.metaKey || e.ctrlKey)
+                zoom = true;
+        }
+        else {
+            zoom = !e.shiftKey && (e.metaKey || e.ctrlKey);
+        }
+        if (zoom) {
+            zoomSpeed = MathHelper.within(zoomSpeed, 0, 1);
+            const min = e.deltaY ? config.delta.y : config.delta.x;
+            scale = 1 - delta / (min * 25 * (1 - zoomSpeed) + 10);
+            if (scale < 0.5)
+                scale = 0.5;
+            if (scale >= 1.5)
+                scale = 1.5;
+        }
+        return scale;
+    }
+};
+
+const KeyEventHelper = {
+    convert(e) {
+        const base = InteractionHelper.getBase(e);
+        const data = Object.assign(Object.assign({}, base), { code: e.code, key: e.key });
+        return data;
+    }
+};
+
+const { getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
+class Interaction extends InteractionBase {
+    __listenEvents() {
+        super.__listenEvents();
+        const view = this.view = this.canvas.view;
+        this.viewEvents = {
+            'pointerdown': this.onPointerDown,
+            'mousedown': this.onMouseDown,
+            'touchstart': this.onTouchStart,
+            'wheel': this.onWheel,
+            'gesturestart': this.onGesturestart,
+            'gesturechange': this.onGesturechange,
+            'gestureend': this.onGestureend
+        };
+        this.windowEvents = {
+            'pointermove': this.onPointerMove,
+            'pointerup': this.onPointerUp,
+            'pointercancel': this.onPointerCancel,
+            'mousemove': this.onMouseMove,
+            'mouseup': this.onMouseUp,
+            'touchmove': this.onTouchMove,
+            'touchend': this.onTouchEnd,
+            'touchcancel': this.onTouchCancel,
+            'keydown': this.onKeyDown,
+            'keyup': this.onKeyUp,
+            'scroll': this.onScroll
+        };
+        const { viewEvents, windowEvents } = this;
+        for (let name in viewEvents) {
+            viewEvents[name] = viewEvents[name].bind(this);
+            view.addEventListener(name, viewEvents[name]);
+        }
+        for (let name in windowEvents) {
+            windowEvents[name] = windowEvents[name].bind(this);
+            window.addEventListener(name, windowEvents[name]);
+        }
+    }
+    __removeListenEvents() {
+        super.__removeListenEvents();
+        const { viewEvents, windowEvents } = this;
+        for (let name in viewEvents) {
+            this.view.removeEventListener(name, viewEvents[name]);
+            this.viewEvents = {};
+        }
+        for (let name in windowEvents) {
+            window.removeEventListener(name, windowEvents[name]);
+            this.windowEvents = {};
+        }
+    }
+    getLocal(p, updateClient) {
+        if (updateClient)
+            this.canvas.updateClientBounds();
+        const { clientBounds } = this.canvas;
+        return { x: p.clientX - clientBounds.x, y: p.clientY - clientBounds.y };
+    }
+    getTouches(touches) {
+        const list = [];
+        for (let i = 0, len = touches.length; i < len; i++) {
+            list.push(touches[i]);
+        }
+        return list;
+    }
+    preventDefaultPointer(e) {
+        const { pointer } = this.config;
+        if (pointer.preventDefault)
+            e.preventDefault();
+    }
+    preventDefaultWheel(e) {
+        const { wheel } = this.config;
+        if (wheel.preventDefault)
+            e.preventDefault();
+    }
+    preventWindowPointer(e) {
+        return !this.downData && e.target !== this.view;
+    }
+    onKeyDown(e) {
+        this.keyDown(KeyEventHelper.convert(e));
+    }
+    onKeyUp(e) {
+        this.keyUp(KeyEventHelper.convert(e));
+    }
+    onScroll() {
+        this.canvas.updateClientBounds();
+    }
+    onPointerDown(e) {
+        this.preventDefaultPointer(e);
+        this.usePointer || (this.usePointer = true);
+        if (this.useMultiTouch)
+            return;
+        this.pointerDown(PointerEventHelper.convert(e, this.getLocal(e)));
+    }
+    onPointerMove(e) {
+        this.usePointer || (this.usePointer = true);
+        if (this.useMultiTouch || this.preventWindowPointer(e))
+            return;
+        this.pointerMove(PointerEventHelper.convert(e, this.getLocal(e, true)));
+    }
+    onPointerUp(e) {
+        if (this.downData)
+            this.preventDefaultPointer(e);
+        if (this.useMultiTouch || this.preventWindowPointer(e))
+            return;
+        this.pointerUp(PointerEventHelper.convert(e, this.getLocal(e)));
+    }
+    onPointerCancel() {
+        if (this.useMultiTouch)
+            return;
+        this.pointerCancel();
+    }
+    onMouseDown(e) {
+        this.preventDefaultPointer(e);
+        if (this.useTouch || this.usePointer)
+            return;
+        this.pointerDown(PointerEventHelper.convertMouse(e, this.getLocal(e)));
+    }
+    onMouseMove(e) {
+        if (this.useTouch || this.usePointer || this.preventWindowPointer(e))
+            return;
+        this.pointerMove(PointerEventHelper.convertMouse(e, this.getLocal(e, true)));
+    }
+    onMouseUp(e) {
+        if (this.downData)
+            this.preventDefaultPointer(e);
+        if (this.useTouch || this.usePointer || this.preventWindowPointer(e))
+            return;
+        this.pointerUp(PointerEventHelper.convertMouse(e, this.getLocal(e)));
+    }
+    onMouseCancel() {
+        if (this.useTouch || this.usePointer)
+            return;
+        this.pointerCancel();
+    }
+    onTouchStart(e) {
+        e.preventDefault();
+        this.multiTouchStart(e);
+        if (this.usePointer)
+            return;
+        if (this.touchTimer) {
+            window.clearTimeout(this.touchTimer);
+            this.touchTimer = 0;
+        }
+        this.useTouch = true;
+        const touch = PointerEventHelper.getTouch(e);
+        this.pointerDown(PointerEventHelper.convertTouch(e, this.getLocal(touch, true)));
+    }
+    onTouchMove(e) {
+        this.multiTouchMove(e);
+        if (this.usePointer || this.preventWindowPointer(e))
+            return;
+        const touch = PointerEventHelper.getTouch(e);
+        this.pointerMove(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
+    }
+    onTouchEnd(e) {
+        this.multiTouchEnd();
+        if (this.usePointer || this.preventWindowPointer(e))
+            return;
+        if (this.touchTimer)
+            clearTimeout(this.touchTimer);
+        this.touchTimer = setTimeout(() => {
+            this.useTouch = false;
+        }, 500);
+        const touch = PointerEventHelper.getTouch(e);
+        this.pointerUp(PointerEventHelper.convertTouch(e, this.getLocal(touch)));
+    }
+    onTouchCancel() {
+        if (this.usePointer)
+            return;
+        this.pointerCancel();
+    }
+    multiTouchStart(e) {
+        this.useMultiTouch = (e.touches.length >= 2);
+        this.touches = this.useMultiTouch ? this.getTouches(e.touches) : undefined;
+        if (this.useMultiTouch)
+            this.pointerCancel();
+    }
+    multiTouchMove(e) {
+        if (!this.useMultiTouch)
+            return;
+        if (e.touches.length > 1) {
+            const touches = this.getTouches(e.touches);
+            const list = this.getKeepTouchList(this.touches, touches);
+            if (list.length > 1) {
+                this.multiTouch(InteractionHelper.getBase(e), list);
+                this.touches = touches;
+            }
+        }
+    }
+    multiTouchEnd() {
+        this.touches = null;
+        this.useMultiTouch = false;
+        this.transformEnd();
+    }
+    getKeepTouchList(old, touches) {
+        let to;
+        const list = [];
+        old.forEach(from => {
+            to = touches.find(touch => touch.identifier === from.identifier);
+            if (to)
+                list.push({ from: this.getLocal(from), to: this.getLocal(to) });
+        });
+        return list;
+    }
+    getLocalTouchs(points) {
+        return points.map(point => this.getLocal(point));
+    }
+    onWheel(e) {
+        this.preventDefaultWheel(e);
+        const { wheel } = this.config;
+        const scale = wheel.getScale ? wheel.getScale(e, wheel) : WheelEventHelper.getScale(e, wheel);
+        const local = this.getLocal(e);
+        const eventBase = InteractionHelper.getBase(e);
+        scale !== 1 ? this.zoom(getZoomEventData(local, scale, eventBase)) : this.move(getMoveEventData(local, wheel.getMove ? wheel.getMove(e, wheel) : WheelEventHelper.getMove(e, wheel), eventBase));
+    }
+    onGesturestart(e) {
+        this.preventDefaultWheel(e);
+        this.lastGestureScale = 1;
+        this.lastGestureRotation = 0;
+    }
+    onGesturechange(e) {
+        this.preventDefaultWheel(e);
+        const local = this.getLocal(e);
+        const eventBase = InteractionHelper.getBase(e);
+        const changeScale = e.scale / this.lastGestureScale;
+        const changeAngle = e.rotation - this.lastGestureRotation;
+        let { rotateSpeed } = this.config.wheel;
+        rotateSpeed = MathHelper.within(rotateSpeed, 0, 1);
+        this.zoom(getZoomEventData(local, changeScale * changeScale, eventBase));
+        this.rotate(getRotateEventData(local, changeAngle / Math.PI * 180 * (rotateSpeed / 4 + 0.1), eventBase));
+        this.lastGestureScale = e.scale;
+        this.lastGestureRotation = e.rotation;
+    }
+    onGestureend(e) {
+        this.preventDefaultWheel(e);
+        this.transformEnd();
+    }
+    destroy() {
+        if (this.view) {
+            super.destroy();
+            this.view = null;
+            this.touches = null;
+        }
+    }
+}
+
+const { mineType, fileType } = FileHelper;
+Object.assign(Creator, {
+    canvas: (options, manager) => new LeaferCanvas(options, manager),
+    image: (options) => new LeaferImage(options),
+    hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
+    interaction: (target, canvas, selector, options) => new Interaction(target, canvas, selector, options),
+});
+function useCanvas(_canvasType, _power) {
+    Platform.origin = {
+        createCanvas(width, height) {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            return canvas;
+        },
+        canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+        canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasSaveAs: (canvas, filename, quality) => {
+            return new Promise((resolve) => {
+                let el = document.createElement('a');
+                el.href = canvas.toDataURL(mineType(fileType(filename)), quality);
+                el.download = filename;
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+                resolve();
+            });
+        },
+        loadImage(src) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.setAttribute('crossOrigin', 'anonymous');
+                img.crossOrigin = 'anonymous';
+                img.onload = () => { resolve(img); };
+                img.onerror = (e) => { reject(e); };
+                if (!src.startsWith('data:') && Platform.imageSuffix)
+                    src += (src.includes("?") ? "&" : "?") + Platform.imageSuffix;
+                img.src = src;
+            });
+        }
+    };
+    Platform.canvas = Creator.canvas();
+    Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
+}
+Platform.name = 'web';
+Platform.isMobile = 'ontouchstart' in window;
+Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
+Platform.devicePixelRatio = devicePixelRatio;
+Platform.realtimeLayout = true;
+const { userAgent } = navigator;
+if (userAgent.indexOf("Firefox") > -1) {
+    Platform.conicGradientRotate90 = true;
+    Platform.intWheelDeltaY = true;
+    Platform.syncDomFont = true;
+}
+else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
+    Platform.fullImageShadow = true;
+}
+if (userAgent.indexOf('Windows') > -1) {
+    Platform.os = 'Windows';
+    Platform.intWheelDeltaY = true;
+}
+else if (userAgent.indexOf('Mac') > -1) {
+    Platform.os = 'Mac';
+}
+else if (userAgent.indexOf('Linux') > -1) {
+    Platform.os = 'Linux';
+}
+
+const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper$1, rotate } = MatrixHelper;
+function fillOrFitMode(data, mode, box, width, height, rotation) {
+    const transform = get$4();
+    const swap = rotation && rotation !== 180;
+    const sw = box.width / (swap ? height : width);
+    const sh = box.height / (swap ? width : height);
+    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
+    const x = box.x + (box.width - width * scale) / 2;
+    const y = box.y + (box.height - height * scale) / 2;
+    translate$1(transform, x, y);
+    scaleHelper$1(transform, scale);
+    if (rotation)
+        rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
+    data.scaleX = data.scaleY = scale;
+    data.transform = transform;
+}
+function clipMode(data, box, offset, scale, rotation) {
+    const transform = get$4();
+    translate$1(transform, box.x, box.y);
+    if (offset)
+        translate$1(transform, offset.x, offset.y);
+    if (scale) {
+        typeof scale === 'number' ? scaleHelper$1(transform, scale) : scaleHelper$1(transform, scale.x, scale.y);
+        data.scaleX = transform.a;
+        data.scaleY = transform.d;
+    }
+    if (rotation)
+        rotate(transform, rotation);
+    data.transform = transform;
+}
+function repeatMode(data, box, width, height, scale, rotation) {
+    const transform = get$4();
+    if (rotation) {
+        rotate(transform, rotation);
+        switch (rotation) {
+            case 90:
+                translate$1(transform, height, 0);
+                break;
+            case 180:
+                translate$1(transform, width, height);
+                break;
+            case 270:
+                translate$1(transform, 0, width);
+                break;
+        }
+    }
+    translate$1(transform, box.x, box.y);
+    if (scale) {
+        scaleOfOuter$2(transform, box, scale);
+        data.scaleX = data.scaleY = scale;
+    }
+    data.transform = transform;
+}
+
+const { get: get$3, translate } = MatrixHelper;
+function createData(leafPaint, image, paint, box) {
+    let { width, height } = image;
+    const { opacity, mode, offset, scale, rotation, blendMode } = paint;
+    const sameBox = box.width === width && box.height === height;
+    if (blendMode)
+        leafPaint.blendMode = blendMode;
+    const data = leafPaint.data = { mode };
+    switch (mode) {
+        case 'strench':
+            if (!sameBox)
+                width = box.width, height = box.height;
+            if (box.x || box.y) {
+                data.transform = get$3();
+                translate(data.transform, box.x, box.y);
+            }
+            break;
+        case 'clip':
+            if (offset || scale || rotation)
+                clipMode(data, box, offset, scale, rotation);
+            break;
+        case 'repeat':
+            if (!sameBox || scale || rotation)
+                repeatMode(data, box, width, height, scale, rotation);
+            break;
+        case 'fit':
+        case 'cover':
+        default:
+            if (!sameBox || rotation)
+                fillOrFitMode(data, mode, box, width, height, rotation);
+    }
+    data.width = width;
+    data.height = height;
+    if (opacity)
+        data.opacity = opacity;
+}
+
+function image(ui, attrName, attrValue, box, firstUse) {
+    const leafPaint = { type: attrValue.type };
+    const image = leafPaint.image = ImageManager.get(attrValue);
+    const event = (firstUse || image.loading) && { target: ui, image, attrName, attrValue };
+    if (image.ready) {
+        if (hasNaturalSize(ui, attrName, image))
+            createData(leafPaint, image, attrValue, box);
+        if (firstUse) {
+            emit(ImageEvent.LOAD, event);
+            emit(ImageEvent.LOADED, event);
+        }
+    }
+    else if (image.error) {
+        if (firstUse) {
+            ui.forceUpdate('surface');
+            event.error = image.error;
+            emit(ImageEvent.ERROR, event);
+        }
+    }
+    else {
+        if (firstUse)
+            emit(ImageEvent.LOAD, event);
+        leafPaint.loadId = image.load(() => {
+            if (!ui.destroyed) {
+                if (hasNaturalSize(ui, attrName, image)) {
+                    createData(leafPaint, image, attrValue, box);
+                    ui.forceUpdate('surface');
+                }
+                emit(ImageEvent.LOADED, event);
+            }
+        }, (error) => {
+            ui.forceUpdate('surface');
+            event.error = error;
+            emit(ImageEvent.ERROR, event);
+        });
+    }
+    return leafPaint;
+}
+function hasNaturalSize(ui, attrName, image) {
+    if (attrName === 'fill' && !ui.__.__naturalWidth) {
+        const { __: d } = ui;
+        d.__naturalWidth = image.width;
+        d.__naturalHeight = image.height;
+        if (!d.__getInput('width') || !d.__getInput('height')) {
+            ui.forceUpdate('width');
+            return false;
+        }
+    }
+    return true;
+}
+function emit(type, data) {
+    if (data.target.hasEvent(type))
+        data.target.emitEvent(new ImageEvent(type, data));
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const { get: get$2, scale: scaleHelper, copy: copy$1 } = MatrixHelper;
+function createPattern(ui, paint, pixelRatio) {
+    let { scaleX, scaleY } = ui.__world;
+    const id = scaleX + '-' + scaleY;
+    if (paint.patternId !== id && !ui.destroyed) {
+        paint.patternId = id;
+        scaleX = Math.abs(scaleX);
+        scaleY = Math.abs(scaleY);
+        const { image, data } = paint;
+        const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096);
+        const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096);
+        let scale, matrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
+        if (sx) {
+            matrix = get$2();
+            copy$1(matrix, transform);
+            scaleHelper(matrix, 1 / sx, 1 / sy);
+            scaleX *= sx;
+            scaleY *= sy;
+        }
+        scaleX *= pixelRatio;
+        scaleY *= pixelRatio;
+        width *= scaleX;
+        height *= scaleY;
+        if (width > maxWidth || height > maxHeight) {
+            scale = Math.max(width / maxWidth, height / maxHeight);
+        }
+        if (scale) {
+            scaleX /= scale;
+            scaleY /= scale;
+            width /= scale;
+            height /= scale;
+        }
+        if (sx) {
+            scaleX /= sx;
+            scaleY /= sy;
+        }
+        if (transform || scaleX !== 1 || scaleY !== 1) {
+            if (!matrix) {
+                matrix = get$2();
+                if (transform)
+                    copy$1(matrix, transform);
+            }
+            scaleHelper(matrix, 1 / scaleX, 1 / scaleY);
+        }
+        const style = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
+        try {
+            if (paint.transform)
+                paint.transform = null;
+            if (matrix)
+                style.setTransform ? style.setTransform(matrix) : paint.transform = matrix;
+        }
+        catch (_a) {
+            paint.transform = matrix;
+        }
+        paint.style = style;
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+function checkImage(ui, canvas, paint, allowPaint) {
+    const { scaleX, scaleY } = ui.__world;
+    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+        return false;
+    }
+    else {
+        if (allowPaint) {
+            if (paint.image.isSVG && paint.data.mode !== 'repeat') {
+                let { width, height } = paint.data;
+                width *= scaleX * canvas.pixelRatio;
+                height *= scaleY * canvas.pixelRatio;
+                allowPaint = width > 4096 || height > 4096;
+            }
+            else {
+                allowPaint = false;
+            }
+        }
+        if (allowPaint) {
+            canvas.save();
+            canvas.clip();
+            const { data } = paint;
+            if (paint.blendMode)
+                canvas.blendMode = paint.blendMode;
+            if (data.opacity)
+                canvas.opacity *= data.opacity;
+            if (data.transform)
+                canvas.transform(data.transform);
+            canvas.drawImage(paint.image.view, 0, 0, data.width, data.height);
+            canvas.restore();
+            return true;
+        }
+        else {
+            if (!paint.style) {
+                createPattern(ui, paint, canvas.pixelRatio);
+            }
+            else {
+                ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                    if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
+                        ui.forceUpdate('surface');
+                }), 300);
+            }
+            return false;
+        }
+    }
+}
+
+function recycleImage(data, attrName) {
+    const paints = (attrName === 'fill' ? data._fill : data._stroke);
+    if (paints instanceof Array) {
+        let image, recycleMap, input, url;
+        for (let i = 0, len = paints.length; i < len; i++) {
+            image = paints[i].image;
+            url = image && image.url;
+            if (url) {
+                if (!recycleMap)
+                    recycleMap = {};
+                recycleMap[url] = true;
+                ImageManager.recycle(image);
+                if (image.loading) {
+                    if (!input) {
+                        input = (data.__input && data.__input[attrName]) || [];
+                        if (!(input instanceof Array))
+                            input = [input];
+                    }
+                    image.unload(paints[i].loadId, !input.some((item) => item.url === url));
+                }
+            }
+        }
+        return recycleMap;
+    }
+    return null;
+}
+
+function fillText(ui, canvas) {
+    let row;
+    const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i];
+        if (row.text) {
+            canvas.fillText(row.text, row.x, row.y);
+        }
+        else if (row.data) {
+            row.data.forEach(charData => {
+                canvas.fillText(charData.char, charData.x, row.y);
+            });
+        }
+        if (decorationY)
+            canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
+    }
+}
+
+function fill(ui, canvas, fill) {
+    canvas.fillStyle = fill;
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+}
+function fills(ui, canvas, fills) {
+    let item;
+    const { windingRule, __font } = ui.__;
+    for (let i = 0, len = fills.length; i < len; i++) {
+        item = fills[i];
+        if (item.image && checkImage(ui, canvas, item, !__font))
+            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(ui, canvas, stroke) {
+    const { strokeAlign } = ui.__;
+    const isStrokes = typeof stroke !== 'string';
+    switch (strokeAlign) {
+        case 'center':
+            canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
+            isStrokes ? drawStrokesStyle(ui, stroke, canvas, true) : drawTextStroke(ui, canvas);
+            break;
+        case 'inside':
+            drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes);
+            break;
+        case 'outside':
+            drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes);
+            break;
+    }
+}
+function drawAlignStroke(ui, canvas, stroke, align, isStrokes) {
+    const { strokeWidth, __font } = ui.__;
+    const out = canvas.getSameCanvas(true);
+    out.setStroke(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__);
+    out.font = __font;
+    isStrokes ? drawStrokesStyle(ui, stroke, out, true) : drawTextStroke(ui, out);
+    out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
+    fillText(ui, out);
+    out.blendMode = 'normal';
+    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+    out.recycle();
+}
+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(ui, strokes, canvas, isText) {
+    let item;
+    for (let i = 0, len = strokes.length; i < len; i++) {
+        item = strokes[i];
+        if (item.image && 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(ui, canvas, stroke) {
+    const options = ui.__;
+    const { strokeWidth, strokeAlign, __font } = options;
+    if (!strokeWidth)
+        return;
+    if (__font) {
+        strokeText(ui, canvas, stroke);
+    }
+    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);
+                out.setStroke(stroke, strokeWidth * 2, ui.__);
+                ui.__drawRenderPath(out);
+                out.stroke();
+                options.windingRule ? out.clip(options.windingRule) : out.clip();
+                out.clearWorld(ui.__layout.renderBounds);
+                canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+                out.recycle();
+                break;
+        }
+    }
+}
+function strokes(ui, canvas, strokes) {
+    const options = ui.__;
+    const { strokeWidth, strokeAlign, __font } = options;
+    if (!strokeWidth)
+        return;
+    if (__font) {
+        strokeText(ui, canvas, strokes);
+    }
+    else {
+        switch (strokeAlign) {
+            case 'center':
+                canvas.setStroke(undefined, strokeWidth, options);
+                drawStrokesStyle(ui, strokes, canvas);
+                break;
+            case 'inside':
+                canvas.save();
+                canvas.setStroke(undefined, strokeWidth * 2, options);
+                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
+                drawStrokesStyle(ui, strokes, canvas);
+                canvas.restore();
+                break;
+            case 'outside':
+                const { renderBounds } = ui.__layout;
+                const out = canvas.getSameCanvas(true);
+                ui.__drawRenderPath(out);
+                out.setStroke(undefined, strokeWidth * 2, ui.__);
+                drawStrokesStyle(ui, strokes, out);
+                options.windingRule ? out.clip(options.windingRule) : out.clip();
+                out.clearWorld(renderBounds);
+                canvas.copyWorldToInner(out, ui.__world, renderBounds);
+                out.recycle();
+                break;
+        }
+    }
+}
+
+const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
+function shape(ui, current, options) {
+    const canvas = current.getSameCanvas();
+    let bounds, matrix, shapeBounds;
+    let worldCanvas;
+    const { __world } = ui;
+    let { scaleX, scaleY } = __world;
+    if (scaleX < 0)
+        scaleX = -scaleX;
+    if (scaleY < 0)
+        scaleY = -scaleY;
+    if (!current.bounds.includes(__world, options.matrix)) {
+        const { renderShapeSpread: spread } = ui.__layout;
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, __world, options.matrix);
+        matrix = current.bounds.getFitMatrix(worldClipBounds);
+        if (matrix.a < 1) {
+            worldCanvas = current.getSameCanvas();
+            ui.__renderShape(worldCanvas, options);
+            scaleX *= matrix.a;
+            scaleY *= matrix.d;
+        }
+        shapeBounds = getOuterOf(__world, matrix);
+        bounds = getByMove(shapeBounds, -matrix.e, -matrix.f);
+        if (options.matrix)
+            matrix.multiply(options.matrix);
+        options = Object.assign(Object.assign({}, options), { matrix });
+    }
+    else {
+        if (options.matrix) {
+            scaleX *= options.matrix.a;
+            scaleY *= options.matrix.d;
+            bounds = shapeBounds = getOuterOf(__world, options.matrix);
+        }
+        else {
+            bounds = shapeBounds = __world;
+        }
+        worldCanvas = canvas;
+    }
+    ui.__renderShape(canvas, options);
+    return {
+        canvas, matrix, bounds,
+        worldCanvas, shapeBounds, scaleX, scaleY
+    };
+}
+
+const defaultFrom$2 = { x: 0.5, y: 0 };
+const defaultTo$2 = { x: 0.5, y: 1 };
+function linearGradient(paint, box) {
+    let { from, to, type, blendMode, opacity } = paint;
+    from || (from = defaultFrom$2);
+    to || (to = defaultTo$2);
+    const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height);
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+function applyStops(gradient, stops, opacity) {
+    let stop;
+    for (let i = 0, len = stops.length; i < len; i++) {
+        stop = stops[i];
+        gradient.addColorStop(stop.offset, ColorConvert$1.string(stop.color, opacity));
+    }
+}
+
+const { set: set$1, getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
+const { get: get$1, rotateOfOuter: rotateOfOuter$1, scaleOfOuter: scaleOfOuter$1 } = MatrixHelper;
+const defaultFrom$1 = { x: 0.5, y: 0.5 };
+const defaultTo$1 = { x: 0.5, y: 1 };
+const realFrom$1 = {};
+const realTo$1 = {};
+function radialGradient(paint, box) {
+    let { from, to, type, opacity, blendMode, stretch } = paint;
+    from || (from = defaultFrom$1);
+    to || (to = defaultTo$1);
+    const { x, y, width, height } = box;
+    set$1(realFrom$1, x + from.x * width, y + from.y * height);
+    set$1(realTo$1, x + to.x * width, y + to.y * height);
+    let transform;
+    if (width !== height || stretch) {
+        transform = get$1();
+        scaleOfOuter$1(transform, realFrom$1, width / height * (stretch || 1), 1);
+        rotateOfOuter$1(transform, realFrom$1, getAngle$1(realFrom$1, realTo$1) + 90);
+    }
+    const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style, transform };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+
+const { set, getAngle, getDistance } = PointHelper;
+const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
+const defaultFrom = { x: 0.5, y: 0.5 };
+const defaultTo = { x: 0.5, y: 1 };
+const realFrom = {};
+const realTo = {};
+function conicGradient(paint, box) {
+    let { from, to, type, opacity, blendMode, stretch } = paint;
+    from || (from = defaultFrom);
+    to || (to = defaultTo);
+    const { x, y, width, height } = box;
+    set(realFrom, x + from.x * width, y + from.y * height);
+    set(realTo, x + to.x * width, y + to.y * height);
+    const transform = get();
+    const angle = getAngle(realFrom, realTo);
+    if (Platform.conicGradientRotate90) {
+        scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1);
+        rotateOfOuter(transform, realFrom, angle + 90);
+    }
+    else {
+        scaleOfOuter(transform, realFrom, 1, width / height * (stretch || 1));
+        rotateOfOuter(transform, realFrom, angle);
+    }
+    const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
+    applyStops(style, paint.stops, opacity);
+    const data = { type, style, transform };
+    if (blendMode)
+        data.blendMode = blendMode;
+    return data;
+}
+
+let recycleMap;
+function compute(ui, attrName) {
+    const value = [];
+    let item;
+    let paints = ui.__.__input[attrName];
+    if (!(paints instanceof Array))
+        paints = [paints];
+    recycleMap = recycleImage(ui.__, attrName);
+    for (let i = 0, len = paints.length; i < len; i++) {
+        item = getLeafPaint(ui, paints[i], attrName);
+        if (item)
+            value.push(item);
+    }
+    ui.__['_' + attrName] = value.length ? value : undefined;
+}
+function getLeafPaint(ui, paint, attrName) {
+    if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
+        return undefined;
+    const { boxBounds } = ui.__layout;
+    switch (paint.type) {
+        case 'solid':
+            let { type, blendMode, color, opacity } = paint;
+            return { type, blendMode, style: ColorConvert$1.string(color, opacity) };
+        case 'image':
+            return image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        case 'linear':
+            return linearGradient(paint, boxBounds);
+        case 'radial':
+            return radialGradient(paint, boxBounds);
+        case 'angular':
+            return conicGradient(paint, boxBounds);
+        default:
+            return paint.r ? { type: 'solid', style: ColorConvert$1.string(paint) } : undefined;
+    }
+}
+
+var UIPaint = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    compute: compute,
+    drawTextStroke: drawTextStroke,
+    fill: fill,
+    fillText: fillText,
+    fills: fills,
+    recycleImage: recycleImage,
+    shape: shape,
+    stroke: stroke,
+    strokeText: strokeText,
+    strokes: strokes
+});
+
+const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
+const tempBounds = {};
+const offsetOutBounds$1 = {};
+function shadow(ui, current, shape, _options) {
+    let copyBounds, spreadScale;
+    const { __world, __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, __world, 'copy');
+                copyBounds = __world;
+            }
+            worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
+        }
+        if (ui.__hasMirror) {
+            current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
+        }
+        else {
+            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        }
+        if (end && index < end)
+            other.clear();
+    });
+    other.recycle();
+}
+function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
+    const { bounds, shapeBounds } = shape;
+    if (Platform.fullImageShadow) {
+        copy(tempBounds, canvas.bounds);
+        tempBounds.x += (outBounds.x - shapeBounds.x);
+        tempBounds.y += (outBounds.y - shapeBounds.y);
+        if (spreadScale) {
+            const { matrix } = shape;
+            tempBounds.x -= (bounds.x + (matrix ? matrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
+            tempBounds.y -= (bounds.y + (matrix ? matrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
+            tempBounds.width *= spreadScale;
+            tempBounds.height *= spreadScale;
+        }
+        canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
+    }
+    else {
+        if (spreadScale) {
+            copy(tempBounds, outBounds);
+            tempBounds.x -= (outBounds.width / 2) * (spreadScale - 1);
+            tempBounds.y -= (outBounds.height / 2) * (spreadScale - 1);
+            tempBounds.width *= spreadScale;
+            tempBounds.height *= spreadScale;
+        }
+        canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds);
+    }
+}
+
+const { toOffsetOutBounds } = BoundsHelper;
+const offsetOutBounds = {};
+function innerShadow(ui, current, shape, _options) {
+    let copyBounds, spreadScale;
+    const { __world, __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, __world, 'copy');
+            other.copyWorld(worldCanvas, __world, __world, 'source-out');
+            copyBounds = __world;
+        }
+        else {
+            other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
+            copyBounds = bounds;
+        }
+        other.fillWorld(copyBounds, item.color, 'source-in');
+        if (ui.__hasMirror) {
+            current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
+        }
+        else {
+            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        }
+        if (end && index < end)
+            other.clear();
+    });
+    other.recycle();
+}
+
+function blur(ui, current, origin) {
+    const { blur } = ui.__;
+    origin.setWorldBlur(blur * ui.__world.a);
+    origin.copyWorldToInner(current, ui.__world, ui.__layout.renderBounds);
+    origin.filter = 'none';
+}
+
+var UIEffect = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    blur: blur,
+    innerShadow: innerShadow,
+    shadow: shadow
+});
+
+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, charType, lastCharType, langBreak, afterBreak, paraStart;
+let textDrawData, rows = [], bounds;
+function createRows(drawData, content, style) {
+    textDrawData = drawData;
+    rows = drawData.rows;
+    bounds = drawData.bounds;
+    const { __letterSpacing, paraIndent, textCase } = style;
+    const { canvas } = Platform;
+    const { width, height } = bounds;
+    const charMode = width || height || __letterSpacing || (textCase !== 'none');
+    if (charMode) {
+        paraStart = true;
+        lastCharType = null;
+        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)
+                    charWidth += __letterSpacing;
+                langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After);
+                afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After));
+                realWidth = paraStart && paraIndent ? width - paraIndent : width;
+                if (width && rowWidth + wordWidth + charWidth > realWidth) {
+                    if (!afterBreak)
+                        afterBreak = charType === Letter && lastCharType == After;
+                    if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                        if (wordWidth)
+                            addWord();
+                        addRow();
+                    }
+                    else {
+                        addRow();
+                    }
+                }
+                if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
+                else {
+                    if (charType === Break) {
+                        if (char === ' ' && wordWidth)
+                            addWord();
+                        addChar(char, charWidth);
+                        addWord();
+                    }
+                    else if (langBreak || afterBreak) {
+                        if (wordWidth)
+                            addWord();
+                        addChar(char, charWidth);
+                    }
+                    else {
+                        addChar(char, charWidth);
+                    }
+                }
+                lastCharType = charType;
+            }
+        }
+        if (wordWidth)
+            addWord();
+        if (rowWidth)
+            addRow();
+        rows.length > 0 && (rows[rows.length - 1].paraEnd = true);
+    }
+    else {
+        content.split('\n').forEach(content => {
+            textDrawData.paraNumber++;
+            rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
+        });
+    }
+}
+function addChar(char, width) {
+    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;
+    }
+    row.width = rowWidth;
+    if (bounds.width)
+        trimRight(row);
+    rows.push(row);
+    row = { words: [] };
+    rowWidth = 0;
+}
+
+const CharMode = 0;
+const WordMode = 1;
+const RowMode = 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 : RowMode);
+            if (mode === RowMode) {
+                row.text = '';
+                row.x += indentWidth;
+                row.words.forEach(word => {
+                    word.data.forEach(char => {
+                        row.text += char.char;
+                    });
+                });
+            }
+            else {
+                row.x += indentWidth;
+                charX = row.x;
+                row.data = [];
+                row.words.forEach(word => {
+                    if (mode === WordMode) {
+                        wordChar = { char: '', x: charX };
+                        charX = toWordChar(word.data, charX, wordChar);
+                        if (wordChar.char !== ' ')
+                            row.data.push(wordChar);
+                    }
+                    else {
+                        charX = toChar(word.data, charX, row.data);
+                    }
+                    if (!row.paraEnd && addWordWidth) {
+                        charX += addWordWidth;
+                        row.width += addWordWidth;
+                    }
+                });
+            }
+            row.words = null;
+        }
+    });
+}
+function toWordChar(data, charX, wordChar) {
+    data.forEach(char => {
+        wordChar.char += char.char;
+        charX += char.width;
+    });
+    return charX;
+}
+function toChar(data, charX, rowData) {
+    data.forEach(char => {
+        if (char.char !== ' ') {
+            char.x = charX;
+            rowData.push(char);
+        }
+        charX += char.width;
+    });
+    return charX;
+}
+
+function layoutText(drawData, style) {
+    const { rows, bounds } = drawData;
+    const { __lineHeight, __baseLine, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
+    let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
+    let starY = __baseLine;
+    if (textOverflow !== 'show' && realHeight > height) {
+        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;
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i];
+        row.x = x;
+        switch (textAlign) {
+            case 'center':
+                row.x += (width - row.width) / 2;
+                break;
+            case 'right':
+                row.x += width - row.width;
+        }
+        if (row.paraStart && paraSpacing && i > 0)
+            starY += paraSpacing;
+        row.y = starY;
+        starY += __lineHeight;
+        if (drawData.overflow > i && starY > realHeight) {
+            row.isOverflow = true;
+            drawData.overflow = i + 1;
+        }
+        if (row.width < 0) {
+            const charWidth = row.words[0].data[0].width;
+            const rowX = row.x + row.width;
+            if (rowX < bounds.x)
+                bounds.x = rowX - charWidth;
+            if (-row.width > bounds.width)
+                bounds.width = -row.width + style.fontSize + charWidth;
+        }
+        else {
+            if (row.x < bounds.x)
+                bounds.x = row.x;
+            if (row.width > bounds.width)
+                bounds.width = row.width;
+        }
+    }
+    bounds.y = y;
+    bounds.height = realHeight;
+}
+
+function clipText(drawData, textOverflow) {
+    const { rows, overflow } = drawData;
+    rows.splice(overflow);
+    if (textOverflow !== 'hide') {
+        if (textOverflow === 'ellipsis')
+            textOverflow = '...';
+        const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
+        const row = rows[overflow - 1];
+        let char, end = row.data.length - 1, charRight;
+        const { x, width } = drawData.bounds;
+        const right = x + width - ellipsisWidth;
+        for (let i = end; i > -1; i--) {
+            char = row.data[i];
+            charRight = char.x + char.width;
+            if (i === end && charRight < right) {
+                break;
+            }
+            else if (charRight < right && char.char !== ' ') {
+                row.data.splice(i + 1);
+                row.width -= char.width;
+                break;
+            }
+            row.width -= char.width;
+        }
+        row.width += ellipsisWidth;
+        row.data.push({ char: textOverflow, x: charRight });
+    }
+}
+
+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 TextConvert = {
+    getDrawData(content, style) {
+        if (typeof content !== 'string')
+            content = String(content);
+        let x = 0, y = 0;
+        let { width, height, padding } = style;
+        const { textDecoration, textOverflow, __font } = style;
+        if (!width)
+            width = 0;
+        if (padding) {
+            const [top, right, bottom, left] = MathHelper.fourNumber(padding);
+            if (width) {
+                x = left;
+                width -= (right + left);
+            }
+            if (height) {
+                y = top;
+                height -= (top + bottom);
+            }
+        }
+        const drawData = {
+            bounds: { x, y, width, height },
+            rows: [],
+            paraNumber: 0,
+            font: Platform.canvas.font = __font
+        };
+        createRows(drawData, content, style);
+        layoutText(drawData, style);
+        layoutChar(drawData, style, width);
+        if (drawData.overflow)
+            clipText(drawData, textOverflow);
+        if (textDecoration !== 'none')
+            decorationText(drawData, style);
+        return drawData;
+    }
+};
+
+const ColorConvert = {
+    string(color, opacity) {
+        if (typeof color === 'string')
+            return color;
+        let a = color.a === undefined ? 1 : color.a;
+        if (opacity)
+            a *= opacity;
+        const rgb = color.r + ',' + color.g + ',' + color.b;
+        return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
+    }
+};
+
+const Export = {
+    export(leaf, filename, options) {
+        return addTask((success) => new Promise((resolve) => {
+            const { leafer } = leaf;
+            if (leafer) {
+                leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
+                    let quality, blob;
+                    let { canvas } = leafer;
+                    let { unreal } = canvas;
+                    if (unreal) {
+                        canvas = canvas.getSameCanvas();
+                        canvas.backgroundColor = leafer.config.fill;
+                        leafer.__render(canvas, {});
+                    }
+                    switch (typeof options) {
+                        case 'object':
+                            if (options.quality)
+                                quality = options.quality;
+                            if (options.blob)
+                                blob = true;
+                            break;
+                        case 'number':
+                            quality = options;
+                            break;
+                        case 'boolean':
+                            blob = options;
+                    }
+                    let data;
+                    if (filename.includes('.')) {
+                        data = yield canvas.saveAs(filename, quality);
+                    }
+                    else if (blob) {
+                        data = yield canvas.toBlob(filename, quality);
+                    }
+                    else {
+                        data = yield canvas.toDataURL(filename, quality);
+                    }
+                    success({ data });
+                    resolve();
+                    if (unreal)
+                        canvas.recycle();
+                }));
+            }
+            else {
+                success({ data: false });
+                resolve();
+            }
+        }));
+    }
+};
+let tasker;
+function addTask(task) {
+    if (!tasker)
+        tasker = new TaskProcessor();
+    return new Promise((resolve) => {
+        tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
+    });
+}
+
+Object.assign(Paint, UIPaint);
+Object.assign(Effect, UIEffect);
+Object.assign(TextConvert$1, TextConvert);
+Object.assign(ColorConvert$1, ColorConvert);
+Object.assign(Export$1, Export);
+
+useCanvas();
+
+export { Interaction, Layouter, LeaferCanvas, Renderer, Selector, Watcher, useCanvas };