@leafer-ui/core 1.0.0-rc.8 → 1.0.0

package/dist/core.esm.js

@@ -1,1966 +0,0 @@
-import { MoveEvent, LeafHelper, ZoomEvent, Debug, LeafData, PathConvert, defineLeafAttr, OneRadian, Platform, dataProcessor, dataType, surfaceType, opacityType, maskType, eraserType, sortType, positionType, boundsType, scaleType, rotationType, autoLayoutType, hitType, strokeType, cursorType, pathType, rewrite, Leaf, PathDrawer, useModule, rewriteAble, PathCorner, UICreator, MatrixHelper, Branch, registerUI, affectRenderBoundsType, BoundsHelper, PathCommandDataHelper, affectStrokeBoundsType, PathScaler, PointHelper, PathBounds, ImageEvent, Creator, Matrix, MathHelper, PathCreator, ImageManager, DataHelper, CanvasManager, HitCanvasManager, PluginManager, LeaferEvent, canvasSizeAttrs, ResizeEvent, AutoBounds, WaitHelper, Run, LayoutEvent, RenderEvent, WatchEvent, AnimateEvent, PropertyEvent } from '@leafer/core';
-export * from '@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_(MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.zoomLayer, e.moveX, e.moveY); }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
-        const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.app.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)
-            LeafHelper.zoomOfWorld(leafer.zoomLayer, e, scale);
-    }));
-}
-
-const debug$2 = 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 = Debug.get('UIData');
-class UIData extends LeafData {
-    get __autoWidth() { return !this._width; }
-    get __autoHeight() { return !this._height; }
-    get __autoBounds() { return !this._width && !this._height; }
-    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('fill', this);
-                this.__isFills = false;
-                if (this.__pixelFill)
-                    this.__pixelFill = 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('stroke', this);
-                this.__isStrokes = false;
-                if (this.__pixelStroke)
-                    this.__pixelStroke = 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 } = 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 {
-}
-
-class CanvasData extends RectData {
-}
-
-function effectType(defaultValue) {
-    return (target, key) => {
-        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) => {
-        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 * 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 (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(fill, this, canvas);
-        if (__drawAfterFill)
-            this.__drawAfterFill(canvas, options);
-        if (stroke)
-            Paint.stroke(stroke, this, canvas, options);
-    },
-    __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(fill, this, canvas) : Paint.fill(fill, this, canvas);
-                if (__drawAfterFill)
-                    this.__drawAfterFill(canvas, options);
-                if (innerShadow)
-                    Effect.innerShadow(this, canvas, shape, options);
-                if (stroke)
-                    this.__.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
-                if (shape.worldCanvas)
-                    shape.worldCanvas.recycle();
-                shape.canvas.recycle();
-            }
-            else {
-                if (fill)
-                    this.__.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
-                if (__drawAfterFill)
-                    this.__drawAfterFill(canvas, options);
-                if (stroke)
-                    this.__.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
-            }
-        }
-        else {
-            this.__drawFast(canvas, options);
-        }
-    },
-    __renderShape(canvas, renderOptions) {
-        if (!this.__worldOpacity)
-            return;
-        canvas.setWorld(this.__world, renderOptions.matrix);
-        const { fill, stroke } = this.__;
-        this.__drawRenderPath(canvas);
-        if (fill)
-            this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-        if (stroke)
-            this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas, renderOptions) : Paint.stroke('#000000', this, canvas, renderOptions);
-    }
-};
-
-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;
-let UI = UI_1 = class UI extends Leaf {
-    get app() { return this.leafer && this.leafer.app; }
-    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);
-    }
-    reset(_data) { }
-    set(data) {
-        Object.assign(this, data);
-    }
-    get() {
-        return this.__.__getInputData();
-    }
-    createProxyData() { return undefined; }
-    find(condition, options) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
-    }
-    findOne(condition, options) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
-    }
-    getPath(curve) {
-        const { path } = this.__;
-        if (!path)
-            return [];
-        return curve ? PathConvert.toCanvasData(path, true) : path;
-    }
-    getPathString(curve) {
-        return PathConvert.stringify(this.getPath(curve));
-    }
-    __onUpdateSize() {
-        if (this.__.__input) {
-            const { fill, stroke } = this.__.__input;
-            if (fill)
-                Paint.compute('fill', this);
-            if (stroke)
-                Paint.compute('stroke', this);
-        }
-    }
-    __updateRenderPath() {
-        if (this.__.path) {
-            const { __: data } = this;
-            data.__pathForRender = data.cornerRadius ? 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) { }
-    __drawPathByBox(drawer) {
-        const { x, y, width, height } = this.__layout.boxBounds;
-        if (this.__.cornerRadius) {
-            drawer.roundRect(x, y, width, height, this.__.cornerRadius);
-        }
-        else {
-            drawer.rect(x, y, width, height);
-        }
-    }
-    export(filename, options) {
-        return Export.export(this, filename, options);
-    }
-    clone() {
-        return UI_1.one(this.toJSON());
-    }
-    static one(data, x, y, width, height) {
-        return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
-    }
-    destroy() {
-        this.fill = this.stroke = null;
-        super.destroy();
-    }
-};
-__decorate([
-    dataProcessor(UIData)
-], UI.prototype, "__", void 0);
-__decorate([
-    dataType('')
-], UI.prototype, "id", void 0);
-__decorate([
-    dataType('')
-], UI.prototype, "name", void 0);
-__decorate([
-    dataType('')
-], UI.prototype, "className", void 0);
-__decorate([
-    surfaceType('pass-through')
-], UI.prototype, "blendMode", void 0);
-__decorate([
-    opacityType(1)
-], UI.prototype, "opacity", void 0);
-__decorate([
-    opacityType(true)
-], UI.prototype, "visible", void 0);
-__decorate([
-    maskType(false)
-], UI.prototype, "isMask", void 0);
-__decorate([
-    eraserType(false)
-], UI.prototype, "isEraser", void 0);
-__decorate([
-    dataType(false)
-], UI.prototype, "locked", void 0);
-__decorate([
-    sortType(0)
-], UI.prototype, "zIndex", void 0);
-__decorate([
-    positionType(0)
-], UI.prototype, "x", void 0);
-__decorate([
-    positionType(0)
-], UI.prototype, "y", void 0);
-__decorate([
-    boundsType(100)
-], UI.prototype, "width", void 0);
-__decorate([
-    boundsType(100)
-], UI.prototype, "height", void 0);
-__decorate([
-    scaleType(1)
-], UI.prototype, "scaleX", void 0);
-__decorate([
-    scaleType(1)
-], UI.prototype, "scaleY", void 0);
-__decorate([
-    rotationType(0)
-], UI.prototype, "rotation", void 0);
-__decorate([
-    rotationType(0)
-], UI.prototype, "skewX", void 0);
-__decorate([
-    rotationType(0)
-], UI.prototype, "skewY", void 0);
-__decorate([
-    autoLayoutType()
-], UI.prototype, "around", void 0);
-__decorate([
-    dataType(false)
-], UI.prototype, "draggable", void 0);
-__decorate([
-    dataType(false)
-], UI.prototype, "editable", void 0);
-__decorate([
-    dataType('size')
-], UI.prototype, "editSize", void 0);
-__decorate([
-    hitType(true)
-], UI.prototype, "hittable", void 0);
-__decorate([
-    hitType('path')
-], UI.prototype, "hitFill", void 0);
-__decorate([
-    strokeType('path')
-], UI.prototype, "hitStroke", void 0);
-__decorate([
-    hitType(false)
-], UI.prototype, "hitBox", void 0);
-__decorate([
-    hitType(true)
-], UI.prototype, "hitChildren", void 0);
-__decorate([
-    hitType(true)
-], UI.prototype, "hitSelf", void 0);
-__decorate([
-    hitType()
-], UI.prototype, "hitRadius", void 0);
-__decorate([
-    cursorType('')
-], UI.prototype, "cursor", void 0);
-__decorate([
-    surfaceType()
-], UI.prototype, "fill", void 0);
-__decorate([
-    strokeType()
-], UI.prototype, "stroke", void 0);
-__decorate([
-    strokeType('inside')
-], UI.prototype, "strokeAlign", void 0);
-__decorate([
-    strokeType(1)
-], UI.prototype, "strokeWidth", void 0);
-__decorate([
-    strokeType('none')
-], UI.prototype, "strokeCap", void 0);
-__decorate([
-    strokeType('miter')
-], UI.prototype, "strokeJoin", void 0);
-__decorate([
-    strokeType()
-], UI.prototype, "dashPattern", void 0);
-__decorate([
-    strokeType()
-], UI.prototype, "dashOffset", void 0);
-__decorate([
-    strokeType(10)
-], UI.prototype, "miterLimit", void 0);
-__decorate([
-    pathType(0)
-], UI.prototype, "cornerRadius", void 0);
-__decorate([
-    pathType()
-], UI.prototype, "cornerSmoothing", void 0);
-__decorate([
-    effectType()
-], UI.prototype, "shadow", void 0);
-__decorate([
-    effectType()
-], UI.prototype, "innerShadow", void 0);
-__decorate([
-    effectType()
-], UI.prototype, "blur", void 0);
-__decorate([
-    effectType()
-], UI.prototype, "backgroundBlur", void 0);
-__decorate([
-    effectType()
-], UI.prototype, "grayscale", void 0);
-__decorate([
-    rewrite(Leaf.prototype.reset)
-], UI.prototype, "reset", null);
-__decorate([
-    rewrite(PathDrawer.drawPathByData)
-], UI.prototype, "__drawPathByData", null);
-UI = UI_1 = __decorate([
-    useModule(UIBounds),
-    useModule(UIHit),
-    useModule(UIRender),
-    rewriteAble()
-], UI);
-
-const matrix = MatrixHelper.get();
-let Group = class Group extends UI {
-    get __tag() { return 'Group'; }
-    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();
-            }
-            else {
-                this.removeAll(true);
-            }
-            super.set(data);
-            let child;
-            children.forEach(childData => {
-                child = 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;
-    }
-    __scaleResize(scaleX, scaleY) {
-        const { children } = this;
-        for (let i = 0; i < children.length; i++) {
-            matrix.a = scaleX;
-            matrix.d = scaleY;
-            children[i].transform(matrix, true);
-        }
-    }
-    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([
-    dataProcessor(GroupData)
-], Group.prototype, "__", void 0);
-Group = __decorate([
-    useModule(Branch),
-    registerUI()
-], Group);
-
-let Rect = class Rect extends UI {
-    get __tag() { return 'Rect'; }
-    constructor(data) {
-        super(data);
-    }
-    __drawPathByData(_drawer, _data) { }
-};
-__decorate([
-    dataProcessor(RectData)
-], Rect.prototype, "__", void 0);
-__decorate([
-    rewrite(UI.prototype.__drawPathByBox)
-], Rect.prototype, "__drawPathByData", null);
-Rect = __decorate([
-    useModule(RectRender),
-    rewriteAble(),
-    registerUI()
-], Rect);
-
-const rect = Rect.prototype;
-const group = Group.prototype;
-const bounds = {};
-const { copy, add } = BoundsHelper;
-let Box = class Box extends Group {
-    get __tag() { return 'Box'; }
-    constructor(data) {
-        super(data);
-        this.isBranchLeaf = true;
-        this.__layout.renderChanged || this.__layout.renderChange();
-    }
-    __scaleResize(scaleX, scaleY) {
-        if (this.__.__autoBounds && this.children.length) {
-            super.__scaleResize(scaleX, scaleY);
-        }
-        else {
-            this.width *= scaleX;
-            this.height *= scaleY;
-        }
-    }
-    __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;
-    }
-    __updateRectBoxBounds() { }
-    __updateBoxBounds() {
-        if (this.__.__autoBounds && this.children.length) {
-            super.__updateBoxBounds();
-        }
-        else {
-            this.__updateRectBoxBounds();
-        }
-    }
-    __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([
-    dataProcessor(BoxData)
-], Box.prototype, "__", void 0);
-__decorate([
-    affectRenderBoundsType('show')
-], Box.prototype, "overflow", void 0);
-__decorate([
-    rewrite(rect.__updateStrokeSpread)
-], Box.prototype, "__updateStrokeSpread", null);
-__decorate([
-    rewrite(rect.__updateRenderSpread)
-], Box.prototype, "__updateRectRenderSpread", null);
-__decorate([
-    rewrite(rect.__updateBoxBounds)
-], Box.prototype, "__updateRectBoxBounds", null);
-__decorate([
-    rewrite(rect.__updateStrokeBounds)
-], Box.prototype, "__updateStrokeBounds", null);
-__decorate([
-    rewrite(rect.__updateRenderBounds)
-], Box.prototype, "__updateRectRenderBounds", null);
-__decorate([
-    rewrite(rect.__updateChange)
-], Box.prototype, "__updateRectChange", null);
-__decorate([
-    rewrite(rect.__drawPathByData)
-], Box.prototype, "__drawPathByData", null);
-__decorate([
-    rewrite(rect.__render)
-], Box.prototype, "__renderRect", null);
-__decorate([
-    rewrite(group.__render)
-], Box.prototype, "__renderGroup", null);
-Box = __decorate([
-    rewriteAble(),
-    registerUI()
-], Box);
-
-let Frame = class Frame extends Box {
-    get __tag() { return 'Frame'; }
-    constructor(data) {
-        super(data);
-        this.isFrame = true;
-        if (!this.__.fill)
-            this.__.fill = '#FFFFFF';
-    }
-};
-__decorate([
-    dataProcessor(FrameData)
-], Frame.prototype, "__", void 0);
-__decorate([
-    affectRenderBoundsType('hide')
-], Frame.prototype, "overflow", void 0);
-Frame = __decorate([
-    registerUI()
-], Frame);
-
-const { moveTo: moveTo$3, closePath: closePath$2, ellipse } = PathCommandDataHelper;
-let Ellipse = class Ellipse extends 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, 360, 0, true);
-            }
-            if (Platform.ellipseToCurve)
-                this.__.path = this.getPath(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([
-    dataProcessor(EllipseData)
-], Ellipse.prototype, "__", void 0);
-__decorate([
-    pathType(0)
-], Ellipse.prototype, "innerRadius", void 0);
-__decorate([
-    pathType(0)
-], Ellipse.prototype, "startAngle", void 0);
-__decorate([
-    pathType(0)
-], Ellipse.prototype, "endAngle", void 0);
-Ellipse = __decorate([
-    registerUI()
-], Ellipse);
-
-const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = PathCommandDataHelper;
-const { rotate, getAngle, getDistance, defaultPoint } = PointHelper;
-const { toBounds: toBounds$1 } = PathBounds;
-let Line = class Line extends UI {
-    get __tag() { return 'Line'; }
-    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$1(path, this.__.points, false);
-        }
-        else {
-            moveTo$2(path, 0, 0);
-            lineTo$2(path, this.width, 0);
-        }
-    }
-    __updateRenderPath() {
-        if (this.__.points && this.__.curve) {
-            drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line');
-        }
-        else {
-            super.__updateRenderPath();
-        }
-    }
-    __updateBoxBounds() {
-        if (this.points) {
-            toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
-        }
-        else {
-            super.__updateBoxBounds();
-        }
-    }
-    __scaleResize(scaleX, scaleY) {
-        if (this.points) {
-            PathScaler.scalePoints(this.__.points, scaleX, scaleY);
-            this.points = this.__.points;
-        }
-        else {
-            if (this.__tag === 'Line') {
-                const point = this.toPoint;
-                point.x *= scaleX;
-                point.y *= scaleY;
-                this.toPoint = point;
-            }
-            else {
-                super.__scaleResize(scaleX, scaleY);
-            }
-        }
-    }
-};
-__decorate([
-    dataProcessor(LineData)
-], Line.prototype, "__", void 0);
-__decorate([
-    affectStrokeBoundsType('center')
-], Line.prototype, "strokeAlign", void 0);
-__decorate([
-    boundsType(0)
-], Line.prototype, "height", void 0);
-__decorate([
-    pathType()
-], Line.prototype, "points", void 0);
-__decorate([
-    pathType(0)
-], Line.prototype, "curve", void 0);
-Line = __decorate([
-    registerUI()
-], Line);
-
-const { sin: sin$1, cos: cos$1, PI: PI$1 } = Math;
-const { moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath$1, drawPoints } = PathCommandDataHelper;
-const line = Line.prototype;
-let Polygon = class Polygon extends UI {
-    get __tag() { return 'Polygon'; }
-    constructor(data) {
-        super(data);
-    }
-    __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints(path, this.__.points, false, true);
-        }
-        else {
-            const { width, height, sides } = this.__;
-            const rx = width / 2, ry = height / 2;
-            moveTo$1(path, rx, 0);
-            for (let i = 1; i < sides; i++) {
-                lineTo$1(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
-            }
-        }
-        closePath$1(path);
-    }
-    __updateRenderPath() { }
-    __updateBoxBounds() { }
-    __scaleResize(_scaleX, _scaleY) { }
-};
-__decorate([
-    dataProcessor(PolygonData)
-], Polygon.prototype, "__", void 0);
-__decorate([
-    pathType(3)
-], Polygon.prototype, "sides", void 0);
-__decorate([
-    pathType()
-], Polygon.prototype, "points", void 0);
-__decorate([
-    pathType(0)
-], Polygon.prototype, "curve", void 0);
-__decorate([
-    rewrite(line.__updateRenderPath)
-], Polygon.prototype, "__updateRenderPath", null);
-__decorate([
-    rewrite(line.__updateBoxBounds)
-], Polygon.prototype, "__updateBoxBounds", null);
-__decorate([
-    rewrite(line.__scaleResize)
-], Polygon.prototype, "__scaleResize", null);
-Polygon = __decorate([
-    rewriteAble(),
-    registerUI()
-], Polygon);
-
-const { sin, cos, PI } = Math;
-const { moveTo, lineTo, closePath } = PathCommandDataHelper;
-let Star = class Star extends 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(path, rx, 0);
-        for (let i = 1; i < corners * 2; i++) {
-            lineTo(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([
-    dataProcessor(StarData)
-], Star.prototype, "__", void 0);
-__decorate([
-    pathType(5)
-], Star.prototype, "corners", void 0);
-__decorate([
-    pathType(0.382)
-], Star.prototype, "innerRadius", void 0);
-Star = __decorate([
-    registerUI()
-], Star);
-
-let Image = class Image extends 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(ImageEvent.LOADED, (e) => this.image = e.image);
-        }
-        super.__updateBoxBounds();
-    }
-    destroy() {
-        this.image = null;
-        super.destroy();
-    }
-};
-__decorate([
-    dataProcessor(ImageData)
-], Image.prototype, "__", void 0);
-__decorate([
-    boundsType('')
-], Image.prototype, "url", void 0);
-Image = __decorate([
-    registerUI()
-], Image);
-
-let Canvas = class Canvas extends Rect {
-    get __tag() { return 'Canvas'; }
-    constructor(data) {
-        super(data);
-        this.canvas = Creator.canvas(this.__);
-        this.context = this.canvas.context;
-        this.__.__drawAfterFill = true;
-    }
-    draw(ui, offset, scale, rotation) {
-        ui.__layout.update();
-        const matrix = new Matrix(ui.__world);
-        matrix.invert();
-        const m = new 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.multiplyParent(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([
-    dataProcessor(ImageData)
-], Canvas.prototype, "__", void 0);
-__decorate([
-    resizeType(100)
-], Canvas.prototype, "width", void 0);
-__decorate([
-    resizeType(100)
-], Canvas.prototype, "height", void 0);
-__decorate([
-    resizeType(Platform.devicePixelRatio)
-], Canvas.prototype, "pixelRatio", void 0);
-__decorate([
-    resizeType(true)
-], Canvas.prototype, "smooth", void 0);
-__decorate([
-    hitType('all')
-], Canvas.prototype, "hitFill", void 0);
-Canvas = __decorate([
-    registerUI()
-], Canvas);
-
-const { copyAndSpread, includes, spread, setList } = BoundsHelper;
-let Text = class Text extends UI {
-    get __tag() { return 'Text'; }
-    get textDrawData() {
-        this.__layout.update();
-        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, textOverflow, padding } = data;
-        const autoWidth = data.__autoWidth;
-        const autoHeight = data.__autoHeight;
-        data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
-        data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
-        data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
-        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}`;
-        data.__clipText = textOverflow !== 'show' && !data.__autoBounds;
-        this.__updateTextDrawData();
-        const { bounds } = data.__textDrawData;
-        const b = layout.boxBounds;
-        if (data.__lineHeight < fontSize)
-            spread(bounds, fontSize / 2);
-        if (autoWidth || autoHeight) {
-            b.x = autoWidth ? bounds.x : 0;
-            b.y = autoHeight ? bounds.y : 0;
-            b.width = autoWidth ? bounds.width : data.width;
-            b.height = autoHeight ? bounds.height : data.height;
-            if (padding) {
-                const [top, right, bottom, left] = data.__padding;
-                if (autoWidth) {
-                    b.x -= left;
-                    b.width += (right + left);
-                }
-                if (autoHeight) {
-                    b.y -= top;
-                    b.height += (bottom + top);
-                }
-            }
-            this.__updateNaturalSize();
-        }
-        else {
-            super.__updateBoxBounds();
-        }
-        const contentBounds = includes(b, bounds) ? b : bounds;
-        if (contentBounds !== layout.contentBounds) {
-            layout.contentBounds = contentBounds;
-            layout.renderChanged = true;
-            setList(data.__textBoxBounds = {}, [b, bounds]);
-        }
-        else {
-            data.__textBoxBounds = contentBounds;
-        }
-    }
-    __updateRenderSpread() {
-        let width = super.__updateRenderSpread();
-        if (!width)
-            width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1;
-        return width;
-    }
-    __updateRenderBounds() {
-        copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
-    }
-};
-__decorate([
-    dataProcessor(TextData)
-], Text.prototype, "__", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "width", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "height", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "padding", void 0);
-__decorate([
-    surfaceType('#000000')
-], Text.prototype, "fill", void 0);
-__decorate([
-    affectStrokeBoundsType('outside')
-], Text.prototype, "strokeAlign", void 0);
-__decorate([
-    hitType('all')
-], Text.prototype, "hitFill", void 0);
-__decorate([
-    boundsType('')
-], Text.prototype, "text", void 0);
-__decorate([
-    boundsType('L')
-], Text.prototype, "fontFamily", void 0);
-__decorate([
-    boundsType(12)
-], Text.prototype, "fontSize", void 0);
-__decorate([
-    boundsType('normal')
-], Text.prototype, "fontWeight", void 0);
-__decorate([
-    boundsType(false)
-], Text.prototype, "italic", void 0);
-__decorate([
-    boundsType('none')
-], Text.prototype, "textCase", void 0);
-__decorate([
-    boundsType('none')
-], Text.prototype, "textDecoration", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "letterSpacing", void 0);
-__decorate([
-    boundsType({ type: 'percent', value: 150 })
-], Text.prototype, "lineHeight", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "paraIndent", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "paraSpacing", void 0);
-__decorate([
-    boundsType('left')
-], Text.prototype, "textAlign", void 0);
-__decorate([
-    boundsType('top')
-], Text.prototype, "verticalAlign", void 0);
-__decorate([
-    boundsType('normal')
-], Text.prototype, "textWrap", void 0);
-__decorate([
-    boundsType('show')
-], Text.prototype, "textOverflow", void 0);
-Text = __decorate([
-    registerUI()
-], Text);
-
-const { toBounds } = PathBounds;
-let Path = class Path extends UI {
-    get __tag() { return 'Path'; }
-    constructor(data) {
-        super(data);
-    }
-    __scaleResize(scaleX, scaleY) {
-        PathScaler.scale(this.__.path, scaleX, scaleY);
-        this.path = this.__.path;
-    }
-    __updateBoxBounds() {
-        toBounds(this.__.path, this.__layout.boxBounds);
-    }
-};
-__decorate([
-    dataProcessor(PathData)
-], Path.prototype, "__", void 0);
-__decorate([
-    pathType()
-], Path.prototype, "path", void 0);
-__decorate([
-    pathType()
-], Path.prototype, "windingRule", void 0);
-__decorate([
-    affectStrokeBoundsType('center')
-], Path.prototype, "strokeAlign", void 0);
-Path = __decorate([
-    registerUI()
-], Path);
-
-let Pen = class Pen extends Group {
-    get __tag() { return 'Pen'; }
-    constructor(data) {
-        super(data);
-    }
-    setStyle(data) {
-        const path = this.pathElement = new 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([
-    dataProcessor(PenData)
-], Pen.prototype, "__", void 0);
-Pen = __decorate([
-    useModule(PathCreator, ['beginPath']),
-    registerUI()
-], Pen);
-
-const debug = Debug.get('Leafer');
-let Leafer = class Leafer extends Group {
-    get __tag() { return 'Leafer'; }
-    get isApp() { return false; }
-    get app() { return this.parent || this; }
-    get imageReady() { return this.viewReady && ImageManager.isComplete; }
-    get layoutLocked() { return !this.layouter.running; }
-    get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
-    constructor(userConfig, data) {
-        super(data);
-        this.zoomLayer = 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.leafs = 0;
-        this.__eventIds = [];
-        this.__controllers = [];
-        this.__readyWait = [];
-        this.__viewReadyWait = [];
-        this.__viewCompletedWait = [];
-        this.__nextRenderWait = [];
-        this.userConfig = userConfig;
-        if (userConfig && (userConfig.view || userConfig.width))
-            this.init(userConfig);
-    }
-    init(userConfig, parentApp) {
-        if (this.canvas)
-            return;
-        this.__setLeafer(this);
-        if (userConfig)
-            DataHelper.assign(this.config, userConfig);
-        let start;
-        const { config } = this;
-        LeaferTypeCreator.run(config.type, this);
-        this.canvas = Creator.canvas(config);
-        this.__controllers.push(this.renderer = Creator.renderer(this, this.canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = 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 = Creator.selector(this);
-            this.__controllers.unshift(this.interaction = Creator.interaction(this, this.canvas, this.selector, config));
-            this.canvasManager = new CanvasManager();
-            this.hitCanvasManager = new 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));
-        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(LeaferEvent.RESTART) : this.emitLeafer(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(LeaferEvent.STOP);
-        }
-    }
-    unlockLayout() {
-        this.layouter.start();
-        this.updateLayout();
-    }
-    lockLayout() {
-        this.updateLayout();
-        this.layouter.stop();
-    }
-    resize(size) {
-        const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs);
-        Object.keys(data).forEach(key => this[key] = data[key]);
-    }
-    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 = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs);
-        this.canvas.resize(size);
-        this.__onResize(new ResizeEvent(size, old));
-    }
-    __onResize(event) {
-        this.emitEvent(event);
-        DataHelper.copyAttrs(this.__, event, 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) {
-        this.zoomLayer = zoomLayer;
-    }
-    __checkAutoLayout(config) {
-        if (!config.width || !config.height) {
-            this.autoLayout = new AutoBounds(config);
-            this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
-        }
-    }
-    __setAttr(attrName, newValue) {
-        if (this.canvas) {
-            if (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 && canvasSizeAttrs.includes(attrName))
-            return this.canvas[attrName];
-        return super.__getAttr(attrName);
-    }
-    __changeCanvasSize(attrName, newValue) {
-        const data = DataHelper.copyAttrs({}, this.canvas, 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(LeaferEvent.BEFORE_READY);
-        this.emitLeafer(LeaferEvent.READY);
-        this.emitLeafer(LeaferEvent.AFTER_READY);
-        WaitHelper.run(this.__readyWait);
-    }
-    __onViewReady() {
-        if (this.viewReady)
-            return;
-        this.viewReady = true;
-        this.emitLeafer(LeaferEvent.VIEW_READY);
-        WaitHelper.run(this.__viewReadyWait);
-    }
-    __onAnimateFrame() {
-        if (this.viewReady) {
-            if (this.__nextRenderWait.length)
-                WaitHelper.run(this.__nextRenderWait);
-            const { imageReady } = this;
-            if (imageReady && !this.viewCompleted)
-                this.__checkViewCompleted();
-            if (!imageReady)
-                this.viewCompleted = false;
-        }
-    }
-    __checkViewCompleted(emit = true) {
-        this.nextRender(() => {
-            if (this.imageReady) {
-                if (emit)
-                    this.emitLeafer(LeaferEvent.VIEW_COMPLETED);
-                WaitHelper.run(this.__viewCompletedWait);
-                this.viewCompleted = true;
-            }
-        });
-    }
-    __onWatchData() {
-        if (this.watcher.childrenChanged && this.interaction) {
-            this.nextRender(() => this.interaction.updateCursor());
-        }
-    }
-    waitReady(item) {
-        this.ready ? item() : this.__readyWait.push(item);
-    }
-    waitViewReady(item) {
-        this.viewReady ? item() : this.__viewReadyWait.push(item);
-    }
-    waitViewCompleted(item) {
-        this.__viewCompletedWait.push(item);
-        if (this.viewCompleted) {
-            this.__checkViewCompleted(false);
-        }
-        else {
-            if (!this.running)
-                this.start();
-        }
-    }
-    nextRender(item) {
-        this.__nextRenderWait.push(item);
-    }
-    __checkUpdateLayout() {
-        this.__layout.update();
-    }
-    emitLeafer(type) {
-        this.emitEvent(new LeaferEvent(type, this));
-    }
-    __listenEvents() {
-        const runId = Run.start('FirstCreate ' + this.innerName);
-        this.once(LeaferEvent.START, () => Run.end(runId));
-        this.once(LayoutEvent.END, () => this.__onReady());
-        this.once(RenderEvent.START, () => this.__onCreated());
-        this.once(RenderEvent.END, () => this.__onViewReady());
-        this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(AnimateEvent.FRAME, this.__onAnimateFrame, this), this.on_(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 LeaferEvent(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(() => { ImageManager.clearRecycled(); }, 100);
-                }
-                catch (e) {
-                    debug.error(e);
-                }
-            }
-        });
-    }
-};
-__decorate([
-    dataProcessor(LeaferData)
-], Leafer.prototype, "__", void 0);
-__decorate([
-    boundsType()
-], Leafer.prototype, "pixelRatio", void 0);
-Leafer = __decorate([
-    registerUI()
-], Leafer);
-
-let App = class App extends Leafer {
-    get __tag() { return 'App'; }
-    get isApp() { return true; }
-    constructor(userConfig, data) {
-        super(userConfig, data);
-        if (userConfig) {
-            const { ground, tree, sky, editor } = userConfig;
-            if (ground)
-                this.ground = this.addLeafer(ground);
-            if (tree || editor)
-                this.tree = this.addLeafer(tree);
-            if (sky || editor)
-                this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
-            if (editor) {
-                this.editor = Creator.editor(editor);
-                this.sky.add(this.editor);
-            }
-        }
-    }
-    __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_(PropertyEvent.CHANGE, this.__onPropertyChange, this));
-    }
-    start() {
-        super.start();
-        this.children.forEach(leafer => leafer.start());
-    }
-    stop() {
-        this.children.forEach(leafer => leafer.stop());
-        super.stop();
-    }
-    unlockLayout() {
-        super.unlockLayout();
-        this.children.forEach(leafer => leafer.unlockLayout());
-    }
-    lockLayout() {
-        super.lockLayout();
-        this.children.forEach(leafer => leafer.lockLayout());
-    }
-    addLeafer(merge) {
-        const leafer = new 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 (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();
-    }
-    __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.update());
-    }
-    __getChildConfig(userConfig) {
-        let config = Object.assign({}, this.config);
-        config.hittable = config.realCanvas = undefined;
-        if (userConfig)
-            DataHelper.assign(config, userConfig);
-        if (this.autoLayout)
-            DataHelper.copyAttrs(config, this, canvasSizeAttrs);
-        config.view = this.realCanvas ? undefined : this.view;
-        config.fill = undefined;
-        return config;
-    }
-    __listenChildEvents(leafer) {
-        leafer.once(LayoutEvent.END, () => this.__onReady());
-        leafer.once(RenderEvent.START, () => this.__onCreated());
-        leafer.once(RenderEvent.END, () => this.__onViewReady());
-        if (this.realCanvas)
-            this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
-    }
-};
-App = __decorate([
-    registerUI()
-], App);
-
-export { Animate, App, Box, BoxData, Canvas, CanvasData, ColorConvert, Effect, Ellipse, EllipseData, Export, Frame, FrameData, Group, GroupData, Image, ImageData, Leafer, LeaferData, LeaferTypeCreator, Line, LineData, Paint, Path, PathData, Pen, PenData, Polygon, PolygonData, Rect, RectData, RectRender, Star, StarData, Text, TextConvert, TextData, UI, UIBounds, UIData, UIHit, UIRender, UnitConvert, effectType, resizeType };