@leafer-ui/core 1.0.0-beta.12 → 1.0.0-beta.15

package/dist/core.cjs

@@ -0,0 +1,1848 @@
+'use strict';
+
+var core = require('@leafer/core');
+
+/******************************************************************************
+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 __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function draw(leafer) {
+    const { config } = leafer;
+    config.move.dragOut = false;
+}
+
+function design(leafer) {
+    if (leafer.isApp)
+        return;
+    leafer.__eventIds.push(leafer.on_(core.MoveEvent.BEFORE_MOVE, (e) => { core.LeafHelper.moveWorld(leafer.moveLayer, e.moveX, e.moveY); }), leafer.on_(core.ZoomEvent.BEFORE_ZOOM, (e) => {
+        const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.config.zoom;
+        let { scale } = e;
+        if (scale * Math.abs(scaleX) < min)
+            scale = min / scaleX;
+        else if (scale * Math.abs(scaleX) > max)
+            scale = max / scaleX;
+        if (scale !== 1)
+            core.LeafHelper.zoomOfWorld(leafer.zoomLayer, e, scale);
+    }));
+}
+
+const debug$2 = core.Debug.get('LeaferTypeCreator');
+const LeaferTypeCreator = {
+    list: {},
+    register(name, fn) {
+        if (list[name]) {
+            debug$2.repeat(name);
+        }
+        else {
+            list[name] = fn;
+        }
+    },
+    run(name, leafer) {
+        const fn = LeaferTypeCreator.list[name];
+        if (fn) {
+            fn(leafer);
+        }
+        else {
+            debug$2.error('no', name);
+        }
+    }
+};
+const { list } = LeaferTypeCreator;
+LeaferTypeCreator.register('draw', draw);
+LeaferTypeCreator.register('user', draw);
+LeaferTypeCreator.register('design', design);
+
+const Effect = {};
+const Paint = {};
+const Animate = {};
+const TextConvert = {};
+const ColorConvert = {};
+const Export = {};
+
+const emptyPaint = {};
+const debug$1 = core.Debug.get('UIData');
+class UIData extends core.LeafData {
+    setVisible(value) {
+        if (this.__leaf.leafer)
+            this.__leaf.leafer.watcher.hasVisible = true;
+        this._visible = value;
+    }
+    setWidth(value) {
+        if (value < 0) {
+            this._width = -value;
+            this.__leaf.scaleX *= -1;
+            debug$1.warn('width < 0, instead -scaleX ', this);
+        }
+        else {
+            this._width = value;
+        }
+    }
+    setHeight(value) {
+        if (value < 0) {
+            this._height = -value;
+            this.__leaf.scaleY *= -1;
+            debug$1.warn('height < 0, instead -scaleY', this);
+        }
+        else {
+            this._height = value;
+        }
+    }
+    setFill(value) {
+        if (this.__naturalWidth)
+            this.__naturalWidth = this.__naturalHeight = undefined;
+        if (typeof value === 'string' || !value) {
+            if (this.__isFills) {
+                this.__removeInput('fill');
+                Paint.recycleImage(this, 'fill');
+                this.__isFills = false;
+            }
+            this._fill = value;
+        }
+        else if (typeof value === 'object') {
+            this.__setInput('fill', value);
+            this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
+            this.__isFills = true;
+            this._fill || (this._fill = emptyPaint);
+        }
+    }
+    setStroke(value) {
+        if (typeof value === 'string' || !value) {
+            if (this.__isStrokes) {
+                this.__removeInput('stroke');
+                Paint.recycleImage(this, 'stroke');
+                this.__isStrokes = false;
+            }
+            this._stroke = value;
+        }
+        else if (typeof value === 'object') {
+            this.__setInput('stroke', value);
+            this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
+            this.__isStrokes = true;
+            this._stroke || (this._stroke = emptyPaint);
+        }
+    }
+    setShadow(value) {
+        this.__setInput('shadow', value);
+        if (value instanceof Array) {
+            if (value.some((item) => item.visible === false))
+                value = value.filter((item) => item.visible !== false);
+            this._shadow = value.length ? value : null;
+        }
+        else if (value) {
+            this._shadow = value.visible === false ? null : [value];
+        }
+        else {
+            this._shadow = null;
+        }
+    }
+    setInnerShadow(value) {
+        this.__setInput('innerShadow', value);
+        if (value instanceof Array) {
+            if (value.some((item) => item.visible === false))
+                value = value.filter((item) => item.visible !== false);
+            this._innerShadow = value.length ? value : null;
+        }
+        else if (value) {
+            this._innerShadow = value.visible === false ? null : [value];
+        }
+        else {
+            this._innerShadow = null;
+        }
+    }
+}
+const UnitConvert = {
+    number(value, percentRefer) {
+        if (typeof value === 'object')
+            return value.type === 'percent' ? value.value / 100 * percentRefer : value.value;
+        return value;
+    }
+};
+
+class GroupData extends UIData {
+}
+
+class BoxData extends GroupData {
+    get __boxStroke() { return true; }
+}
+
+class LeaferData extends GroupData {
+}
+
+class FrameData extends BoxData {
+}
+
+class LineData extends UIData {
+}
+
+class RectData extends UIData {
+    get __boxStroke() { return true; }
+}
+
+class EllipseData extends UIData {
+    get __boxStroke() { return true; }
+}
+
+class PolygonData extends UIData {
+}
+
+class StarData extends UIData {
+}
+
+const { parse } = core.PathConvert;
+class PathData extends UIData {
+    setPath(value) {
+        if (typeof value === 'string') {
+            this.__setInput('path', value);
+            this._path = parse(value);
+        }
+        else {
+            if (this.__input)
+                this.__removeInput('path');
+            this._path = value;
+        }
+    }
+}
+
+class PenData extends GroupData {
+}
+
+const fontWeightMap = {
+    'thin': 100,
+    'extra-light': 200,
+    'light': 300,
+    'normal': 400,
+    'medium': 500,
+    'semi-bold': 600,
+    'bold': 700,
+    'extra-bold': 800,
+    'black': 900
+};
+class TextData extends UIData {
+    setFontWeight(value) {
+        if (typeof value === 'string') {
+            this.__setInput('fontWeight', value);
+            this._fontWeight = fontWeightMap[value] || 400;
+        }
+        else {
+            if (this.__input)
+                this.__removeInput('fontWeight');
+            this._fontWeight = value;
+        }
+    }
+}
+
+class ImageData extends RectData {
+}
+
+function effectType(defaultValue) {
+    return (target, key) => {
+        core.defineLeafAttr(target, key, defaultValue, {
+            set(value) {
+                this.__setAttr(key, value);
+                if (value)
+                    this.__.__useEffect = true;
+                this.__layout.renderChanged || this.__layout.renderChange();
+            }
+        });
+    };
+}
+function resizeType(defaultValue) {
+    return (target, key) => {
+        core.defineLeafAttr(target, key, defaultValue, {
+            set(value) {
+                this.__setAttr(key, value);
+                this.__layout.boxChanged || this.__layout.boxChange();
+                this.__updateSize();
+            }
+        });
+    };
+}
+
+const UIBounds = {
+    __updateStrokeSpread() {
+        let width = 0, boxWidth = 0;
+        const { stroke, hitStroke, strokeAlign, strokeWidth } = this.__;
+        if ((stroke || hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
+            boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
+            if (!this.__.__boxStroke) {
+                const { miterLimit, strokeCap } = this.__;
+                const miterLimitAddWidth = this.__tag !== 'Line' ? 1 / Math.sin(miterLimit * core.OneRadian / 2) * Math.sqrt(strokeWidth) - width : 0;
+                const storkeCapAddWidth = strokeCap === 'none' ? 0 : strokeWidth;
+                width += Math.max(miterLimitAddWidth, storkeCapAddWidth);
+            }
+        }
+        this.__layout.strokeBoxSpread = boxWidth;
+        return width;
+    },
+    __updateRenderSpread() {
+        let width = 0;
+        const { shadow, innerShadow, blur, backgroundBlur } = this.__;
+        if (shadow)
+            shadow.forEach(item => {
+                width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5);
+            });
+        if (blur)
+            width = Math.max(width, blur);
+        let shapeWidth = width = Math.ceil(width);
+        if (innerShadow)
+            innerShadow.forEach(item => {
+                shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5);
+            });
+        if (backgroundBlur)
+            shapeWidth = Math.max(shapeWidth, backgroundBlur);
+        this.__layout.renderShapeSpread = shapeWidth;
+        return width;
+    }
+};
+
+const UIHit = {
+    __updateHitCanvas() {
+        if (!this.__hitCanvas)
+            this.__hitCanvas = this.leafer.hitCanvasManager.getPathType(this);
+        const h = this.__hitCanvas;
+        this.__drawHitPath(h);
+        h.setStrokeOptions(this.__);
+    },
+    __hit(inner) {
+        const { __hitCanvas: h } = this;
+        if (core.Platform.name === 'miniapp')
+            this.__drawHitPath(h);
+        const { fill, hitFill, windingRule } = this.__;
+        const needHitFill = (fill && hitFill === 'path') || hitFill === 'all';
+        const isHitFill = h.hitFill(inner, windingRule);
+        if (needHitFill && isHitFill)
+            return true;
+        const { stroke, hitStroke, strokeWidth, strokeAlign } = this.__;
+        const needHitStroke = (stroke && hitStroke === 'path') || hitStroke === 'all';
+        const radiusWidth = inner.radiusX * 2;
+        let hitWidth = radiusWidth;
+        if (needHitStroke) {
+            switch (strokeAlign) {
+                case 'inside':
+                    hitWidth += strokeWidth * 2;
+                    if (!needHitFill && (isHitFill && h.hitStroke(inner, hitWidth)))
+                        return true;
+                    hitWidth = radiusWidth;
+                    break;
+                case 'center':
+                    hitWidth += strokeWidth;
+                    break;
+                case 'outside':
+                    hitWidth += strokeWidth * 2;
+                    if (!needHitFill) {
+                        if (!isHitFill && h.hitStroke(inner, hitWidth))
+                            return true;
+                        hitWidth = radiusWidth;
+                    }
+                    break;
+            }
+        }
+        return hitWidth ? h.hitStroke(inner, hitWidth) : false;
+    }
+};
+
+const UIRender = {
+    __updateChange() {
+        const data = this.__;
+        if (data.__useEffect) {
+            const { shadow, innerShadow, blur, backgroundBlur } = this.__;
+            data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur);
+        }
+        data.__checkSingle();
+        const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
+        if (complex) {
+            data.__complex = true;
+        }
+        else {
+            data.__complex && (data.__complex = false);
+        }
+    },
+    __drawFast(canvas, options) {
+        const { fill, stroke, __drawAfterFill } = this.__;
+        this.__drawRenderPath(canvas);
+        if (fill)
+            Paint.fill(this, canvas, fill);
+        if (__drawAfterFill)
+            this.__drawAfterFill(canvas, options);
+        if (stroke)
+            Paint.stroke(this, canvas, stroke);
+    },
+    __draw(canvas, options) {
+        if (this.__.__complex) {
+            const { fill, stroke, __drawAfterFill } = this.__;
+            this.__drawRenderPath(canvas);
+            if (this.__.__useEffect) {
+                const shape = Paint.shape(this, canvas, options);
+                const { shadow, innerShadow } = this.__;
+                if (shadow)
+                    Effect.shadow(this, canvas, shape, options);
+                if (fill)
+                    this.__.__isFills ? Paint.fills(this, canvas, fill) : Paint.fill(this, canvas, fill);
+                if (__drawAfterFill)
+                    this.__drawAfterFill(canvas, options);
+                if (innerShadow)
+                    Effect.innerShadow(this, canvas, shape, options);
+                if (stroke)
+                    this.__.__isStrokes ? Paint.strokes(this, canvas, stroke) : Paint.stroke(this, canvas, stroke);
+                if (shape.worldCanvas)
+                    shape.worldCanvas.recycle();
+                shape.canvas.recycle();
+            }
+            else {
+                if (fill)
+                    this.__.__isFills ? Paint.fills(this, canvas, fill) : Paint.fill(this, canvas, fill);
+                if (__drawAfterFill)
+                    this.__drawAfterFill(canvas, options);
+                if (stroke)
+                    this.__.__isStrokes ? Paint.strokes(this, canvas, stroke) : Paint.stroke(this, canvas, stroke);
+            }
+        }
+        else {
+            this.__drawFast(canvas, options);
+        }
+    },
+    __renderShape(canvas, options) {
+        if (!this.__worldOpacity)
+            return;
+        canvas.setWorld(this.__world, options.matrix);
+        const { fill, stroke } = this.__;
+        this.__drawRenderPath(canvas);
+        if (fill)
+            Paint.fill(this, canvas, '#000000');
+        if (stroke)
+            Paint.stroke(this, canvas, '#000000');
+    }
+};
+
+const RectRender = {
+    __drawFast(canvas, options) {
+        const { width, height, fill, stroke, __drawAfterFill } = this.__;
+        if (fill) {
+            canvas.fillStyle = fill;
+            canvas.fillRect(0, 0, width, height);
+        }
+        if (__drawAfterFill)
+            this.__drawAfterFill(canvas, options);
+        if (stroke) {
+            const { strokeAlign, strokeWidth } = this.__;
+            canvas.setStroke(stroke, strokeWidth, this.__);
+            const half = strokeWidth / 2;
+            switch (strokeAlign) {
+                case 'center':
+                    canvas.strokeRect(0, 0, width, height);
+                    break;
+                case 'inside':
+                    canvas.strokeRect(half, half, width - strokeWidth, height - strokeWidth);
+                    break;
+                case 'outside':
+                    canvas.strokeRect(-half, -half, width + strokeWidth, height + strokeWidth);
+                    break;
+            }
+        }
+    }
+};
+
+var UI_1;
+exports.UI = UI_1 = class UI extends core.Leaf {
+    set scale(value) {
+        if (typeof value === 'number') {
+            this.scaleX = this.scaleY = value;
+        }
+        else {
+            this.scaleX = value.x;
+            this.scaleY = value.y;
+        }
+    }
+    get scale() {
+        const { scaleX, scaleY } = this;
+        return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
+    }
+    constructor(data) {
+        super(data);
+    }
+    set(data) {
+        Object.assign(this, data);
+    }
+    get() {
+        return this.__.__getInputData();
+    }
+    getPath(curve) {
+        const path = this.__.path;
+        if (!path)
+            return [];
+        return curve ? core.PathConvert.toCanvasData(path, true) : path;
+    }
+    getPathString(curve) {
+        return core.PathConvert.stringify(this.getPath(curve));
+    }
+    __onUpdateSize() {
+        if (this.__.__input) {
+            const { fill, stroke } = this.__.__input;
+            if (fill)
+                Paint.compute(this, 'fill');
+            if (stroke)
+                Paint.compute(this, 'stroke');
+        }
+    }
+    __updateRenderPath() {
+        if (this.__.path) {
+            const { __: data } = this;
+            data.__pathForRender = data.cornerRadius ? core.PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
+        }
+    }
+    __drawRenderPath(canvas) {
+        canvas.beginPath();
+        this.__drawPathByData(canvas, this.__.__pathForRender);
+    }
+    __drawPath(canvas) {
+        canvas.beginPath();
+        this.__drawPathByData(canvas, this.__.path);
+    }
+    __drawPathByData(_drawer, _data) { }
+    export(filename, options) {
+        return Export.export(this, filename, options);
+    }
+    clone() {
+        return UI_1.one(this.toJSON());
+    }
+    static one(data, x, y, width, height) {
+        return core.UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
+    }
+    destroy() {
+        this.fill = this.stroke = null;
+        super.destroy();
+    }
+};
+__decorate([
+    core.dataProcessor(UIData)
+], exports.UI.prototype, "__", void 0);
+__decorate([
+    core.dataType('')
+], exports.UI.prototype, "id", void 0);
+__decorate([
+    core.dataType('')
+], exports.UI.prototype, "name", void 0);
+__decorate([
+    core.dataType('')
+], exports.UI.prototype, "className", void 0);
+__decorate([
+    core.surfaceType('pass-through')
+], exports.UI.prototype, "blendMode", void 0);
+__decorate([
+    core.opacityType(1)
+], exports.UI.prototype, "opacity", void 0);
+__decorate([
+    core.opacityType(true)
+], exports.UI.prototype, "visible", void 0);
+__decorate([
+    core.maskType(false)
+], exports.UI.prototype, "isMask", void 0);
+__decorate([
+    core.eraserType(false)
+], exports.UI.prototype, "isEraser", void 0);
+__decorate([
+    core.sortType(0)
+], exports.UI.prototype, "zIndex", void 0);
+__decorate([
+    core.dataType()
+], exports.UI.prototype, "locked", void 0);
+__decorate([
+    core.positionType(0)
+], exports.UI.prototype, "x", void 0);
+__decorate([
+    core.positionType(0)
+], exports.UI.prototype, "y", void 0);
+__decorate([
+    core.boundsType(100)
+], exports.UI.prototype, "width", void 0);
+__decorate([
+    core.boundsType(100)
+], exports.UI.prototype, "height", void 0);
+__decorate([
+    core.scaleType(1)
+], exports.UI.prototype, "scaleX", void 0);
+__decorate([
+    core.scaleType(1)
+], exports.UI.prototype, "scaleY", void 0);
+__decorate([
+    core.rotationType(0)
+], exports.UI.prototype, "rotation", void 0);
+__decorate([
+    core.rotationType(0)
+], exports.UI.prototype, "skewX", void 0);
+__decorate([
+    core.rotationType(0)
+], exports.UI.prototype, "skewY", void 0);
+__decorate([
+    core.positionType()
+], exports.UI.prototype, "around", void 0);
+__decorate([
+    core.dataType(false)
+], exports.UI.prototype, "draggable", void 0);
+__decorate([
+    core.hitType(true)
+], exports.UI.prototype, "hittable", void 0);
+__decorate([
+    core.hitType('path')
+], exports.UI.prototype, "hitFill", void 0);
+__decorate([
+    core.strokeType('path')
+], exports.UI.prototype, "hitStroke", void 0);
+__decorate([
+    core.hitType(true)
+], exports.UI.prototype, "hitChildren", void 0);
+__decorate([
+    core.hitType(true)
+], exports.UI.prototype, "hitSelf", void 0);
+__decorate([
+    core.hitType()
+], exports.UI.prototype, "hitRadius", void 0);
+__decorate([
+    core.cursorType('default')
+], exports.UI.prototype, "cursor", void 0);
+__decorate([
+    core.surfaceType()
+], exports.UI.prototype, "fill", void 0);
+__decorate([
+    core.strokeType()
+], exports.UI.prototype, "stroke", void 0);
+__decorate([
+    core.strokeType('inside')
+], exports.UI.prototype, "strokeAlign", void 0);
+__decorate([
+    core.strokeType(1)
+], exports.UI.prototype, "strokeWidth", void 0);
+__decorate([
+    core.strokeType('none')
+], exports.UI.prototype, "strokeCap", void 0);
+__decorate([
+    core.strokeType('miter')
+], exports.UI.prototype, "strokeJoin", void 0);
+__decorate([
+    core.strokeType()
+], exports.UI.prototype, "dashPattern", void 0);
+__decorate([
+    core.strokeType()
+], exports.UI.prototype, "dashOffset", void 0);
+__decorate([
+    core.strokeType(10)
+], exports.UI.prototype, "miterLimit", void 0);
+__decorate([
+    core.pathType()
+], exports.UI.prototype, "cornerRadius", void 0);
+__decorate([
+    core.pathType()
+], exports.UI.prototype, "cornerSmoothing", void 0);
+__decorate([
+    effectType()
+], exports.UI.prototype, "shadow", void 0);
+__decorate([
+    effectType()
+], exports.UI.prototype, "innerShadow", void 0);
+__decorate([
+    effectType()
+], exports.UI.prototype, "blur", void 0);
+__decorate([
+    effectType()
+], exports.UI.prototype, "backgroundBlur", void 0);
+__decorate([
+    effectType()
+], exports.UI.prototype, "grayscale", void 0);
+__decorate([
+    core.rewrite(core.PathDrawer.drawPathByData)
+], exports.UI.prototype, "__drawPathByData", null);
+exports.UI = UI_1 = __decorate([
+    core.useModule(UIBounds),
+    core.useModule(UIHit),
+    core.useModule(UIRender),
+    core.rewriteAble()
+], exports.UI);
+
+exports.Group = class Group extends exports.UI {
+    get __tag() { return 'Group'; }
+    get resizeable() { return false; }
+    set mask(child) {
+        if (this.__hasMask)
+            this.__removeMask();
+        if (child) {
+            child.isMask = true;
+            this.addAt(child, 0);
+        }
+    }
+    get mask() {
+        return this.children.find(item => item.isMask);
+    }
+    constructor(data) {
+        super(data);
+        this.__setBranch();
+    }
+    __setBranch() {
+        this.isBranch = true;
+        if (!this.children)
+            this.children = [];
+    }
+    set(data) {
+        if (data.children) {
+            const { children } = data;
+            delete data.children;
+            if (!this.children)
+                this.__setBranch();
+            super.set(data);
+            let child;
+            children.forEach(childData => {
+                child = core.UICreator.get(childData.tag, childData);
+                this.add(child);
+            });
+            data.children = children;
+        }
+        else {
+            super.set(data);
+        }
+    }
+    toJSON() {
+        const data = super.toJSON();
+        data.children = this.children.map(child => child.toJSON());
+        return data;
+    }
+    addAt(child, index) {
+        this.add(child, index);
+    }
+    addAfter(child, after) {
+        this.add(child, this.children.indexOf(after) + 1);
+    }
+    addBefore(child, before) {
+        this.add(child, this.children.indexOf(before));
+    }
+    add(_child, _index) { }
+    addMany(..._children) { }
+    remove(_child, _destroy) { }
+    removeAll(_destroy) { }
+};
+__decorate([
+    core.dataProcessor(GroupData)
+], exports.Group.prototype, "__", void 0);
+exports.Group = __decorate([
+    core.useModule(core.Branch),
+    core.registerUI()
+], exports.Group);
+
+exports.Rect = class Rect extends exports.UI {
+    get __tag() { return 'Rect'; }
+    constructor(data) {
+        super(data);
+    }
+    __drawPathByData(drawer, _data) {
+        const { width, height, cornerRadius } = this.__;
+        if (cornerRadius) {
+            drawer.roundRect(0, 0, width, height, cornerRadius);
+        }
+        else {
+            drawer.rect(0, 0, width, height);
+        }
+    }
+};
+__decorate([
+    core.dataProcessor(RectData)
+], exports.Rect.prototype, "__", void 0);
+exports.Rect = __decorate([
+    core.useModule(RectRender),
+    core.registerUI()
+], exports.Rect);
+
+const rect = exports.Rect.prototype;
+const group = exports.Group.prototype;
+const bounds = {};
+const { copy, add } = core.BoundsHelper;
+exports.Box = class Box extends exports.Group {
+    get __tag() { return 'Box'; }
+    get resizeable() { return true; }
+    constructor(data) {
+        super(data);
+        this.isBranchLeaf = true;
+        this.__layout.renderChanged || this.__layout.renderChange();
+    }
+    __updateStrokeSpread() { return 0; }
+    __updateRectRenderSpread() { return 0; }
+    __updateRenderSpread() {
+        let width = this.__updateRectRenderSpread() || super.__updateRenderSpread();
+        this.__.__drawAfterFill = this.__.overflow === 'hide';
+        if (!width)
+            width = this.__.__drawAfterFill ? 0 : 1;
+        return width;
+    }
+    __updateBoxBounds() { }
+    __updateStrokeBounds() { }
+    __updateRenderBounds() {
+        this.__updateRectRenderBounds();
+        if (!this.__.__drawAfterFill) {
+            const { renderBounds } = this.__layout;
+            copy(bounds, renderBounds);
+            super.__updateRenderBounds();
+            add(renderBounds, bounds);
+        }
+    }
+    __updateRectRenderBounds() { }
+    __updateRectChange() { }
+    __updateChange() {
+        super.__updateChange();
+        this.__updateRectChange();
+    }
+    __drawPathByData(_drawer, _data) { }
+    __renderRect(_canvas, _options) { }
+    __renderGroup(_canvas, _options) { }
+    __render(canvas, options) {
+        if (this.__.__drawAfterFill) {
+            this.__renderRect(canvas, options);
+        }
+        else {
+            this.__renderRect(canvas, options);
+            this.__renderGroup(canvas, options);
+        }
+    }
+    __drawAfterFill(canvas, options) {
+        canvas.save();
+        canvas.clip();
+        this.__renderGroup(canvas, options);
+        canvas.restore();
+        if (this.__.stroke)
+            this.__drawRenderPath(canvas);
+    }
+};
+__decorate([
+    core.dataProcessor(BoxData)
+], exports.Box.prototype, "__", void 0);
+__decorate([
+    core.affectRenderBoundsType('show')
+], exports.Box.prototype, "overflow", void 0);
+__decorate([
+    core.rewrite(rect.__updateStrokeSpread)
+], exports.Box.prototype, "__updateStrokeSpread", null);
+__decorate([
+    core.rewrite(rect.__updateRenderSpread)
+], exports.Box.prototype, "__updateRectRenderSpread", null);
+__decorate([
+    core.rewrite(rect.__updateBoxBounds)
+], exports.Box.prototype, "__updateBoxBounds", null);
+__decorate([
+    core.rewrite(rect.__updateStrokeBounds)
+], exports.Box.prototype, "__updateStrokeBounds", null);
+__decorate([
+    core.rewrite(rect.__updateRenderBounds)
+], exports.Box.prototype, "__updateRectRenderBounds", null);
+__decorate([
+    core.rewrite(rect.__updateChange)
+], exports.Box.prototype, "__updateRectChange", null);
+__decorate([
+    core.rewrite(rect.__drawPathByData)
+], exports.Box.prototype, "__drawPathByData", null);
+__decorate([
+    core.rewrite(rect.__render)
+], exports.Box.prototype, "__renderRect", null);
+__decorate([
+    core.rewrite(group.__render)
+], exports.Box.prototype, "__renderGroup", null);
+exports.Box = __decorate([
+    core.rewriteAble(),
+    core.registerUI()
+], exports.Box);
+
+exports.Frame = class Frame extends exports.Box {
+    get __tag() { return 'Frame'; }
+    constructor(data) {
+        super(data);
+        if (!this.__.fill)
+            this.__.fill = '#FFFFFF';
+    }
+};
+__decorate([
+    core.dataProcessor(FrameData)
+], exports.Frame.prototype, "__", void 0);
+__decorate([
+    core.affectRenderBoundsType('hide')
+], exports.Frame.prototype, "overflow", void 0);
+exports.Frame = __decorate([
+    core.registerUI()
+], exports.Frame);
+
+const { moveTo: moveTo$3, closePath: closePath$2, ellipse } = core.PathCommandDataHelper;
+exports.Ellipse = class Ellipse extends exports.UI {
+    get __tag() { return 'Ellipse'; }
+    constructor(data) {
+        super(data);
+    }
+    __updatePath() {
+        const { width, height, innerRadius, startAngle, endAngle } = this.__;
+        const rx = width / 2, ry = height / 2;
+        const path = this.__.path = [];
+        if (innerRadius) {
+            if (startAngle || endAngle) {
+                if (innerRadius < 1)
+                    ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false);
+                ellipse(path, rx, ry, rx, ry, 0, endAngle, startAngle, true);
+                if (innerRadius < 1)
+                    closePath$2(path);
+            }
+            else {
+                if (innerRadius < 1) {
+                    ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
+                    moveTo$3(path, width, ry);
+                }
+                ellipse(path, rx, ry, rx, ry, 0, 0, 360, true);
+            }
+        }
+        else {
+            if (startAngle || endAngle) {
+                moveTo$3(path, rx, ry);
+                ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle, false);
+                closePath$2(path);
+            }
+            else {
+                ellipse(path, rx, ry, rx, ry);
+            }
+        }
+    }
+};
+__decorate([
+    core.dataProcessor(EllipseData)
+], exports.Ellipse.prototype, "__", void 0);
+__decorate([
+    core.pathType(0)
+], exports.Ellipse.prototype, "innerRadius", void 0);
+__decorate([
+    core.pathType(0)
+], exports.Ellipse.prototype, "startAngle", void 0);
+__decorate([
+    core.pathType(0)
+], exports.Ellipse.prototype, "endAngle", void 0);
+exports.Ellipse = __decorate([
+    core.registerUI()
+], exports.Ellipse);
+
+const { sin: sin$1, cos: cos$1, PI: PI$1 } = Math;
+const { moveTo: moveTo$2, lineTo: lineTo$2, closePath: closePath$1, drawPoints: drawPoints$1 } = core.PathCommandDataHelper;
+const { toBounds: toBounds$2 } = core.PathBounds;
+exports.Polygon = class Polygon extends exports.UI {
+    get __tag() { return 'Polygon'; }
+    get resizeable() { return !this.points; }
+    constructor(data) {
+        super(data);
+    }
+    __updatePath() {
+        const path = this.__.path = [];
+        if (this.__.points) {
+            drawPoints$1(path, this.__.points, false, true);
+        }
+        else {
+            const { width, height, sides } = this.__;
+            const rx = width / 2, ry = height / 2;
+            moveTo$2(path, rx, 0);
+            for (let i = 1; i < sides; i++) {
+                lineTo$2(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
+            }
+        }
+        closePath$1(path);
+    }
+    __updateRenderPath() {
+        if (this.__.points && this.__.curve) {
+            drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, true);
+            this.__updateNaturalSize();
+        }
+        else {
+            super.__updateRenderPath();
+        }
+    }
+    __updateBoxBounds() {
+        this.__.points ? toBounds$2(this.__.path, this.__layout.boxBounds) : super.__updateBoxBounds();
+    }
+};
+__decorate([
+    core.dataProcessor(PolygonData)
+], exports.Polygon.prototype, "__", void 0);
+__decorate([
+    core.pathType(3)
+], exports.Polygon.prototype, "sides", void 0);
+__decorate([
+    core.pathType()
+], exports.Polygon.prototype, "points", void 0);
+__decorate([
+    core.pathType(0)
+], exports.Polygon.prototype, "curve", void 0);
+exports.Polygon = __decorate([
+    core.registerUI()
+], exports.Polygon);
+
+const { sin, cos, PI } = Math;
+const { moveTo: moveTo$1, lineTo: lineTo$1, closePath } = core.PathCommandDataHelper;
+exports.Star = class Star extends exports.UI {
+    get __tag() { return 'Star'; }
+    constructor(data) {
+        super(data);
+    }
+    __updatePath() {
+        const { width, height, corners, innerRadius } = this.__;
+        const rx = width / 2, ry = height / 2;
+        const path = this.__.path = [];
+        moveTo$1(path, rx, 0);
+        for (let i = 1; i < corners * 2; i++) {
+            lineTo$1(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / corners));
+        }
+        closePath(path);
+    }
+};
+__decorate([
+    core.dataProcessor(StarData)
+], exports.Star.prototype, "__", void 0);
+__decorate([
+    core.pathType(5)
+], exports.Star.prototype, "corners", void 0);
+__decorate([
+    core.pathType(0.382)
+], exports.Star.prototype, "innerRadius", void 0);
+exports.Star = __decorate([
+    core.registerUI()
+], exports.Star);
+
+const { moveTo, lineTo, drawPoints } = core.PathCommandDataHelper;
+const { rotate, getAngle, getDistance, defaultPoint } = core.PointHelper;
+const { toBounds: toBounds$1 } = core.PathBounds;
+exports.Line = class Line extends exports.UI {
+    get __tag() { return 'Line'; }
+    get resizeable() { return !this.points; }
+    get toPoint() {
+        const { width, rotation } = this.__;
+        const to = { x: 0, y: 0 };
+        if (width)
+            to.x = width;
+        if (rotation)
+            rotate(to, rotation);
+        return to;
+    }
+    set toPoint(value) {
+        this.width = getDistance(defaultPoint, value);
+        this.rotation = getAngle(defaultPoint, value);
+        if (this.height)
+            this.height = 0;
+    }
+    constructor(data) {
+        super(data);
+    }
+    __updatePath() {
+        const path = this.__.path = [];
+        if (this.__.points) {
+            drawPoints(path, this.__.points, false);
+        }
+        else {
+            moveTo(path, 0, 0);
+            lineTo(path, this.width, 0);
+        }
+    }
+    __updateRenderPath() {
+        if (this.__.points && this.__.curve) {
+            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, false);
+        }
+        else {
+            super.__updateRenderPath();
+        }
+    }
+    __updateBoxBounds() {
+        if (this.points) {
+            toBounds$1(this.__.path, this.__layout.boxBounds);
+            this.__updateNaturalSize();
+        }
+        else {
+            super.__updateBoxBounds();
+        }
+    }
+};
+__decorate([
+    core.dataProcessor(LineData)
+], exports.Line.prototype, "__", void 0);
+__decorate([
+    core.affectStrokeBoundsType('center')
+], exports.Line.prototype, "strokeAlign", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Line.prototype, "height", void 0);
+__decorate([
+    core.pathType()
+], exports.Line.prototype, "points", void 0);
+__decorate([
+    core.pathType(0)
+], exports.Line.prototype, "curve", void 0);
+exports.Line = __decorate([
+    core.registerUI()
+], exports.Line);
+
+exports.Image = class Image extends exports.Rect {
+    get __tag() { return 'Image'; }
+    get ready() { return this.image ? this.image.ready : false; }
+    constructor(data) {
+        super(data);
+    }
+    __updateBoxBounds() {
+        let update;
+        const { url } = this;
+        const fill = this.fill;
+        if (fill) {
+            if (fill.url !== url)
+                update = true;
+        }
+        else {
+            if (url)
+                update = true;
+        }
+        if (update) {
+            if (this.image)
+                this.image = null;
+            this.fill = url ? { type: 'image', mode: 'strench', url } : undefined;
+            this.once(core.ImageEvent.LOADED, (e) => this.image = e.image);
+        }
+        super.__updateBoxBounds();
+    }
+    destroy() {
+        this.image = null;
+        super.destroy();
+    }
+};
+__decorate([
+    core.dataProcessor(ImageData)
+], exports.Image.prototype, "__", void 0);
+__decorate([
+    core.boundsType('')
+], exports.Image.prototype, "url", void 0);
+exports.Image = __decorate([
+    core.registerUI()
+], exports.Image);
+
+exports.Canvas = class Canvas extends exports.Rect {
+    get __tag() { return 'Canvas'; }
+    constructor(data) {
+        super(data);
+        this.canvas = core.Creator.canvas(this.__);
+        this.context = this.canvas.context;
+        this.__.__drawAfterFill = true;
+    }
+    draw(ui, offset, scale, rotation) {
+        ui.__layout.checkUpdate();
+        const matrix = new core.Matrix(ui.__world);
+        matrix.invert();
+        const m = new core.Matrix();
+        if (offset)
+            m.translate(offset.x, offset.y);
+        if (scale)
+            typeof scale === 'number' ? m.scale(scale) : m.scale(scale.x, scale.y);
+        if (rotation)
+            m.rotate(rotation);
+        matrix.preMultiply(m);
+        ui.__render(this.canvas, { matrix });
+        this.paint();
+    }
+    paint() {
+        this.forceUpdate('fill');
+    }
+    __drawAfterFill(canvas, _options) {
+        const origin = this.canvas.view;
+        const { width, height } = this;
+        if (this.__.cornerRadius) {
+            canvas.save();
+            canvas.clip();
+            canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
+            canvas.restore();
+        }
+        else {
+            canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
+        }
+    }
+    __updateSize() {
+        const { canvas } = this;
+        if (canvas) {
+            const { smooth } = this.__;
+            if (canvas.smooth !== smooth)
+                canvas.smooth = smooth;
+            canvas.resize(this.__);
+        }
+    }
+    destroy() {
+        if (this.canvas) {
+            this.canvas.destroy();
+            this.canvas = null;
+            this.context = null;
+        }
+        super.destroy();
+    }
+};
+__decorate([
+    core.dataProcessor(ImageData)
+], exports.Canvas.prototype, "__", void 0);
+__decorate([
+    resizeType(100)
+], exports.Canvas.prototype, "width", void 0);
+__decorate([
+    resizeType(100)
+], exports.Canvas.prototype, "height", void 0);
+__decorate([
+    resizeType(core.Platform.devicePixelRatio)
+], exports.Canvas.prototype, "pixelRatio", void 0);
+__decorate([
+    resizeType(true)
+], exports.Canvas.prototype, "smooth", void 0);
+__decorate([
+    core.hitType('all')
+], exports.Canvas.prototype, "hitFill", void 0);
+exports.Canvas = __decorate([
+    core.registerUI()
+], exports.Canvas);
+
+const { copyAndSpread, includes, spread } = core.BoundsHelper;
+exports.Text = class Text extends exports.UI {
+    get __tag() { return 'Text'; }
+    get textDrawData() {
+        this.__layout.checkUpdate();
+        return this.__.__textDrawData;
+    }
+    constructor(data) {
+        super(data);
+    }
+    __drawHitPath(canvas) {
+        const { __lineHeight, __baseLine, __textDrawData: data } = this.__;
+        canvas.beginPath();
+        if (this.__.__letterSpacing < 0) {
+            this.__drawPathByData(canvas);
+        }
+        else {
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight));
+        }
+    }
+    __drawPathByData(drawer, _data) {
+        const { x, y, width, height } = this.__layout.boxBounds;
+        drawer.rect(x, y, width, height);
+    }
+    __drawRenderPath(canvas) {
+        canvas.font = this.__.__font;
+    }
+    __updateTextDrawData() {
+        const data = this.__;
+        data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
+    }
+    __updateBoxBounds() {
+        const data = this.__;
+        const layout = this.__layout;
+        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase } = data;
+        data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
+        data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
+        data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
+        data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
+        this.__updateTextDrawData();
+        const { bounds } = data.__textDrawData;
+        const b = layout.boxBounds;
+        if (data.__lineHeight < fontSize)
+            spread(bounds, fontSize / 2);
+        const width = data.__getInput('width');
+        const height = data.__getInput('height');
+        if (width && height) {
+            super.__updateBoxBounds();
+        }
+        else {
+            b.x = width ? 0 : bounds.x;
+            b.y = height ? 0 : bounds.y;
+            b.width = width ? width : bounds.width;
+            b.height = height ? height : bounds.height;
+            this.__updateNaturalSize();
+        }
+        const contentBounds = includes(b, bounds) ? b : bounds;
+        if (contentBounds !== layout.contentBounds) {
+            layout.contentBounds = contentBounds;
+            layout.renderChanged = true;
+        }
+    }
+    __updateRenderSpread() {
+        let width = super.__updateRenderSpread();
+        if (!width)
+            width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1;
+        return width;
+    }
+    __updateRenderBounds() {
+        copyAndSpread(this.__layout.renderBounds, this.__layout.contentBounds, this.__layout.renderSpread);
+    }
+};
+__decorate([
+    core.dataProcessor(TextData)
+], exports.Text.prototype, "__", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Text.prototype, "width", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Text.prototype, "height", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Text.prototype, "padding", void 0);
+__decorate([
+    core.affectStrokeBoundsType('outside')
+], exports.Text.prototype, "strokeAlign", void 0);
+__decorate([
+    core.boundsType('')
+], exports.Text.prototype, "text", void 0);
+__decorate([
+    core.boundsType('L')
+], exports.Text.prototype, "fontFamily", void 0);
+__decorate([
+    core.boundsType(12)
+], exports.Text.prototype, "fontSize", void 0);
+__decorate([
+    core.boundsType('normal')
+], exports.Text.prototype, "fontWeight", void 0);
+__decorate([
+    core.boundsType(false)
+], exports.Text.prototype, "italic", void 0);
+__decorate([
+    core.boundsType('none')
+], exports.Text.prototype, "textCase", void 0);
+__decorate([
+    core.boundsType('none')
+], exports.Text.prototype, "textDecoration", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Text.prototype, "letterSpacing", void 0);
+__decorate([
+    core.boundsType({ type: 'percent', value: 150 })
+], exports.Text.prototype, "lineHeight", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Text.prototype, "paraIndent", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Text.prototype, "paraSpacing", void 0);
+__decorate([
+    core.boundsType('left')
+], exports.Text.prototype, "textAlign", void 0);
+__decorate([
+    core.boundsType('top')
+], exports.Text.prototype, "verticalAlign", void 0);
+__decorate([
+    core.boundsType('show')
+], exports.Text.prototype, "textOverflow", void 0);
+exports.Text = __decorate([
+    core.registerUI()
+], exports.Text);
+
+const { toBounds } = core.PathBounds;
+exports.Path = class Path extends exports.UI {
+    get __tag() { return 'Path'; }
+    get resizeable() { return false; }
+    constructor(data) {
+        super(data);
+    }
+    __updateBoxBounds() {
+        toBounds(this.__.path, this.__layout.boxBounds);
+        this.__updateNaturalSize();
+    }
+};
+__decorate([
+    core.dataProcessor(PathData)
+], exports.Path.prototype, "__", void 0);
+__decorate([
+    core.pathType()
+], exports.Path.prototype, "path", void 0);
+__decorate([
+    core.pathType()
+], exports.Path.prototype, "windingRule", void 0);
+__decorate([
+    core.affectStrokeBoundsType('center')
+], exports.Path.prototype, "strokeAlign", void 0);
+exports.Path = __decorate([
+    core.registerUI()
+], exports.Path);
+
+exports.Pen = class Pen extends exports.Group {
+    get __tag() { return 'Pen'; }
+    constructor(data) {
+        super(data);
+    }
+    setStyle(data) {
+        const path = this.pathElement = new exports.Path(data);
+        this.pathStyle = data;
+        this.path = path.path || (path.path = []);
+        this.add(path);
+        return this;
+    }
+    beginPath() {
+        this.path.length = 0;
+        this.paint();
+        return this;
+    }
+    moveTo(_x, _y) { return this; }
+    lineTo(_x, _y) { return this; }
+    bezierCurveTo(_x1, _y1, _x2, _y2, _x, _y) { return this; }
+    quadraticCurveTo(_x1, _y1, _x, _y) { return this; }
+    closePath() { return this; }
+    rect(_x, _y, _width, _height) { return this; }
+    roundRect(_x, _y, _width, _height, _cornerRadius) { return this; }
+    ellipse(_x, _y, _radiusX, _radiusY, _rotation, _startAngle, _endAngle, _anticlockwise) { return this; }
+    arc(_x, _y, _radius, _startAngle, _endAngle, _anticlockwise) { return this; }
+    arcTo(_x1, _y1, _x2, _y2, _radius) { return this; }
+    drawEllipse(_x, _y, _radiusX, _radiusY, _rotation, _startAngle, _endAngle, _anticlockwise) { return this; }
+    drawArc(_x, _y, _radius, _startAngle, _endAngle, _anticlockwise) { return this; }
+    drawPoints(_points, _curve, _close) { return this; }
+    paint() {
+        this.pathElement.forceUpdate('path');
+    }
+    clear() {
+        this.removeAll(true);
+    }
+};
+__decorate([
+    core.dataProcessor(PenData)
+], exports.Pen.prototype, "__", void 0);
+exports.Pen = __decorate([
+    core.useModule(core.PathCreator, ['beginPath']),
+    core.registerUI()
+], exports.Pen);
+
+const debug = core.Debug.get('Leafer');
+exports.Leafer = class Leafer extends exports.Group {
+    get __tag() { return 'Leafer'; }
+    get isApp() { return false; }
+    get app() { return this.parent || this; }
+    constructor(userConfig, data) {
+        super(data);
+        this.zoomLayer = this;
+        this.moveLayer = this;
+        this.config = {
+            type: 'design',
+            start: true,
+            hittable: true,
+            smooth: true,
+            zoom: {
+                min: 0.02,
+                max: 256
+            },
+            move: {
+                holdSpaceKey: true,
+                dragOut: true,
+                autoDistance: 2
+            }
+        };
+        this.__eventIds = [];
+        this.__controllers = [];
+        this.__readyWait = [];
+        this.__viewReadyWait = [];
+        this.__viewCompletedWait = [];
+        this.__renderWait = [];
+        this.userConfig = userConfig;
+        if (userConfig && (userConfig.view || userConfig.width))
+            this.init(userConfig);
+    }
+    init(userConfig, parentApp) {
+        if (this.canvas)
+            return;
+        this.__setLeafer(this);
+        if (userConfig)
+            core.DataHelper.assign(this.config, userConfig);
+        let start;
+        const { config } = this;
+        LeaferTypeCreator.run(config.type, this);
+        this.canvas = core.Creator.canvas(config);
+        this.__controllers.push(this.renderer = core.Creator.renderer(this, this.canvas, config), this.watcher = core.Creator.watcher(this, config), this.layouter = core.Creator.layouter(this, config));
+        if (this.isApp)
+            this.__setApp();
+        this.__checkAutoLayout(config);
+        this.view = this.canvas.view;
+        if (parentApp) {
+            this.__bindApp(parentApp);
+            start = parentApp.running;
+        }
+        else {
+            this.selector = core.Creator.selector(this);
+            this.__controllers.unshift(this.interaction = core.Creator.interaction(this, this.canvas, this.selector, config));
+            this.canvasManager = new core.CanvasManager();
+            this.hitCanvasManager = new core.HitCanvasManager();
+            start = config.start;
+        }
+        this.hittable = config.hittable;
+        this.fill = config.fill;
+        this.canvasManager.add(this.canvas);
+        this.__listenEvents();
+        if (start)
+            this.__startTimer = setTimeout(this.start.bind(this));
+        core.PluginManager.onLeafer(this);
+    }
+    set(data) {
+        if (!this.children) {
+            setTimeout(() => {
+                super.set(data);
+            });
+        }
+        else {
+            super.set(data);
+        }
+    }
+    start() {
+        clearTimeout(this.__startTimer);
+        if (!this.running && this.canvas) {
+            this.ready ? this.emitLeafer(core.LeaferEvent.RESTART) : this.emitLeafer(core.LeaferEvent.START);
+            this.__controllers.forEach(item => item.start());
+            if (!this.isApp)
+                this.renderer.render();
+            this.running = true;
+        }
+    }
+    stop() {
+        clearTimeout(this.__startTimer);
+        if (this.running && this.canvas) {
+            this.__controllers.forEach(item => item.stop());
+            this.running = false;
+            this.emitLeafer(core.LeaferEvent.STOP);
+        }
+    }
+    resize(size) {
+        const data = core.DataHelper.copyAttrs({}, size, core.canvasSizeAttrs);
+        Object.keys(data).forEach(key => this[key] = data[key]);
+    }
+    forceLayout() {
+        this.__layout.checkUpdate(true);
+    }
+    forceFullRender() {
+        this.renderer.addBlock(this.canvas.bounds);
+        if (this.viewReady)
+            this.renderer.update();
+    }
+    updateCursor() {
+        if (this.interaction)
+            this.interaction.updateCursor();
+    }
+    __doResize(size) {
+        if (!this.canvas || this.canvas.isSameSize(size))
+            return;
+        const old = core.DataHelper.copyAttrs({}, this.canvas, core.canvasSizeAttrs);
+        this.canvas.resize(size);
+        this.__onResize(new core.ResizeEvent(size, old));
+    }
+    __onResize(event) {
+        this.emitEvent(event);
+        core.DataHelper.copyAttrs(this.__, event, core.canvasSizeAttrs);
+        setTimeout(() => { if (this.canvasManager)
+            this.canvasManager.clearRecycled(); }, 0);
+    }
+    __setApp() { }
+    __bindApp(app) {
+        this.selector = app.selector;
+        this.interaction = app.interaction;
+        this.canvasManager = app.canvasManager;
+        this.hitCanvasManager = app.hitCanvasManager;
+    }
+    __setLeafer(leafer) {
+        this.leafer = leafer;
+        this.isLeafer = !!leafer;
+        this.__level = 1;
+    }
+    setZoomLayer(zoomLayer, moveLayer) {
+        this.zoomLayer = zoomLayer;
+        this.moveLayer = moveLayer || zoomLayer;
+    }
+    __checkAutoLayout(config) {
+        if (!config.width || !config.height) {
+            this.autoLayout = new core.AutoBounds(config);
+            this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
+        }
+    }
+    __setAttr(attrName, newValue) {
+        if (this.canvas) {
+            if (core.canvasSizeAttrs.includes(attrName)) {
+                this.__changeCanvasSize(attrName, newValue);
+            }
+            else if (attrName === 'fill') {
+                this.__changeFill(newValue);
+            }
+            else if (attrName === 'hittable') {
+                this.canvas.hittable = newValue;
+            }
+        }
+        super.__setAttr(attrName, newValue);
+    }
+    __getAttr(attrName) {
+        if (this.canvas && core.canvasSizeAttrs.includes(attrName))
+            return this.canvas[attrName];
+        return super.__getAttr(attrName);
+    }
+    __changeCanvasSize(attrName, newValue) {
+        const data = core.DataHelper.copyAttrs({}, this.canvas, core.canvasSizeAttrs);
+        data[attrName] = this.config[attrName] = newValue;
+        if (newValue)
+            this.canvas.stopAutoLayout();
+        this.__doResize(data);
+    }
+    __changeFill(newValue) {
+        this.config.fill = newValue;
+        if (this.canvas.allowBackgroundColor) {
+            this.canvas.backgroundColor = newValue;
+        }
+        else {
+            this.forceFullRender();
+        }
+    }
+    __onCreated() {
+        this.created = true;
+    }
+    __onReady() {
+        if (this.ready)
+            return;
+        this.ready = true;
+        this.emitLeafer(core.LeaferEvent.BEFORE_READY);
+        this.emitLeafer(core.LeaferEvent.READY);
+        this.emitLeafer(core.LeaferEvent.AFTER_READY);
+        core.WaitHelper.run(this.__readyWait);
+    }
+    __onViewReady() {
+        if (this.viewReady)
+            return;
+        this.viewReady = true;
+        this.emitLeafer(core.LeaferEvent.VIEW_READY);
+        core.WaitHelper.run(this.__viewReadyWait);
+    }
+    __onRenderEnd(_e) {
+        if (!this.viewReady)
+            this.__onViewReady();
+        const completed = this.__checkViewCompleted();
+        if (completed)
+            this.__onViewCompleted();
+        this.viewCompleted = completed;
+        core.WaitHelper.run(this.__renderWait);
+    }
+    __checkViewCompleted() {
+        return this.viewReady && !this.watcher.changed && core.ImageManager.isComplete;
+    }
+    __onViewCompleted() {
+        if (!this.viewCompleted) {
+            this.emitLeafer(core.LeaferEvent.VIEW_COMPLETED);
+            core.WaitHelper.run(this.__viewCompletedWait);
+        }
+    }
+    __onWatchData() {
+        if (this.watcher.childrenChanged && this.interaction) {
+            this.waitRender(() => this.interaction.updateCursor());
+        }
+    }
+    waitReady(item) {
+        this.ready ? item() : this.__readyWait.push(item);
+    }
+    waitViewReady(item) {
+        this.viewReady ? item() : this.__viewReadyWait.push(item);
+    }
+    waitViewCompleted(item) {
+        if (this.viewCompleted) {
+            item();
+        }
+        else {
+            this.__viewCompletedWait.push(item);
+            if (!this.running)
+                this.start();
+        }
+    }
+    waitRender(item) {
+        if (this.watcher && !this.watcher.changed) {
+            item();
+        }
+        else {
+            this.__renderWait.push(item);
+        }
+    }
+    __checkUpdateLayout() {
+        this.__layout.checkUpdate();
+    }
+    emitLeafer(type) {
+        this.emitEvent(new core.LeaferEvent(type, this));
+    }
+    __listenEvents() {
+        const runId = core.Run.start('FirstCreate ' + this.innerName);
+        this.once(core.LeaferEvent.START, () => core.Run.end(runId));
+        this.once(core.LayoutEvent.END, () => this.__onReady());
+        this.once(core.RenderEvent.START, () => this.__onCreated());
+        this.__eventIds.push(this.on_(core.WatchEvent.DATA, this.__onWatchData, this), this.on_(core.RenderEvent.END, this.__onRenderEnd, this), this.on_(core.LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this));
+    }
+    __removeListenEvents() {
+        this.off_(this.__eventIds);
+        this.__eventIds.length = 0;
+    }
+    destroy() {
+        setTimeout(() => {
+            if (!this.destroyed) {
+                try {
+                    this.stop();
+                    this.emitEvent(new core.LeaferEvent(core.LeaferEvent.END, this));
+                    this.__removeListenEvents();
+                    this.__controllers.forEach(item => {
+                        if (!(this.parent && item === this.interaction))
+                            item.destroy();
+                    });
+                    this.__controllers.length = 0;
+                    if (!this.parent) {
+                        this.selector.destroy();
+                        this.canvasManager.destroy();
+                        this.hitCanvasManager.destroy();
+                    }
+                    this.canvas.destroy();
+                    this.config.view = this.view = null;
+                    if (this.userConfig)
+                        this.userConfig.view = null;
+                    super.destroy();
+                    setTimeout(() => { core.ImageManager.clearRecycled(); }, 100);
+                }
+                catch (e) {
+                    debug.error(e);
+                }
+            }
+        });
+    }
+};
+__decorate([
+    core.dataProcessor(LeaferData)
+], exports.Leafer.prototype, "__", void 0);
+__decorate([
+    core.boundsType()
+], exports.Leafer.prototype, "pixelRatio", void 0);
+exports.Leafer = __decorate([
+    core.registerUI()
+], exports.Leafer);
+
+exports.App = class App extends exports.Leafer {
+    get __tag() { return 'App'; }
+    get isApp() { return true; }
+    __setApp() {
+        const { canvas } = this;
+        const { realCanvas, view } = this.config;
+        if (realCanvas || view === this.canvas.view || !canvas.parentView) {
+            this.realCanvas = true;
+        }
+        else {
+            canvas.unrealCanvas();
+        }
+        this.leafer = this;
+        this.watcher.disable();
+        this.layouter.disable();
+        this.__eventIds.push(this.on_(core.PropertyEvent.CHANGE, this.__onPropertyChange, this));
+    }
+    start() {
+        super.start();
+        this.children.forEach(leafer => { leafer.start(); });
+    }
+    stop() {
+        this.children.forEach(leafer => { leafer.stop(); });
+        super.stop();
+    }
+    addLeafer(merge) {
+        const leafer = new exports.Leafer(merge);
+        this.add(leafer);
+        return leafer;
+    }
+    add(leafer) {
+        if (!leafer.view) {
+            if (this.realCanvas && !this.canvas.bounds) {
+                setTimeout(() => this.add(leafer), 10);
+                return;
+            }
+            leafer.init(this.__getChildConfig(leafer.userConfig), this);
+        }
+        super.add(leafer);
+        this.__listenChildEvents(leafer);
+    }
+    __onPropertyChange() {
+        if (core.Debug.showHitView)
+            this.children.forEach(leafer => { leafer.forceUpdate('surface'); });
+    }
+    __onCreated() {
+        this.created = this.children.every(child => child.created);
+    }
+    __onReady() {
+        if (this.children.every(child => child.ready))
+            super.__onReady();
+    }
+    __onViewReady() {
+        if (this.children.every(child => child.viewReady))
+            super.__onViewReady();
+    }
+    __checkViewCompleted() {
+        return this.children.every(item => item.viewCompleted);
+    }
+    __onChildRenderEnd(e) {
+        this.renderer.addBlock(e.renderBounds);
+        if (this.viewReady)
+            this.renderer.update();
+    }
+    __render(canvas, _options) {
+        this.children.forEach(leafer => { canvas.copyWorld(leafer.canvas); });
+    }
+    __onResize(event) {
+        this.children.forEach(leafer => { leafer.resize(event); });
+        super.__onResize(event);
+    }
+    __checkUpdateLayout() {
+        this.children.forEach(leafer => { leafer.__layout.checkUpdate(); });
+    }
+    __getChildConfig(userConfig) {
+        let config = Object.assign({}, this.config);
+        config.hittable = config.realCanvas = undefined;
+        if (userConfig)
+            core.DataHelper.assign(config, userConfig);
+        if (this.autoLayout)
+            core.DataHelper.copyAttrs(config, this, core.canvasSizeAttrs);
+        config.view = this.realCanvas ? undefined : this.view;
+        config.fill = undefined;
+        return config;
+    }
+    __listenChildEvents(leafer) {
+        leafer.once(core.LayoutEvent.END, () => this.__onReady());
+        leafer.once(core.RenderEvent.START, () => this.__onCreated());
+        leafer.once(core.RenderEvent.END, (e) => this.__onRenderEnd(e));
+        if (this.realCanvas)
+            this.__eventIds.push(leafer.on_(core.RenderEvent.END, this.__onChildRenderEnd, this));
+    }
+};
+exports.App = __decorate([
+    core.registerUI()
+], exports.App);
+
+exports.Animate = Animate;
+exports.ColorConvert = ColorConvert;
+exports.Effect = Effect;
+exports.Export = Export;
+exports.LeaferTypeCreator = LeaferTypeCreator;
+exports.Paint = Paint;
+exports.RectRender = RectRender;
+exports.TextConvert = TextConvert;
+exports.UIBounds = UIBounds;
+exports.UIHit = UIHit;
+exports.UIRender = UIRender;
+exports.effectType = effectType;
+exports.resizeType = resizeType;
+Object.keys(core).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return core[k]; }
+    });
+});