@leafer-ui/draw 1.6.2 → 1.6.4

package/lib/draw.cjs

@@ -1,2068 +0,0 @@
-'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, Iterator */
-
-
-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 effectType(defaultValue) {
-    return core.decorateLeafAttr(defaultValue, (key) => core.attr({
-        set(value) {
-            this.__setAttr(key, value);
-            if (value)
-                this.__.__useEffect = true;
-            this.__layout.renderChanged || this.__layout.renderChange();
-        }
-    }));
-}
-function resizeType(defaultValue) {
-    return core.decorateLeafAttr(defaultValue, (key) => core.attr({
-        set(value) {
-            this.__setAttr(key, value);
-            this.__layout.boxChanged || this.__layout.boxChange();
-            this.__updateSize();
-        }
-    }));
-}
-function zoomLayerType() {
-    return (target, key) => {
-        const privateKey = '_' + key;
-        core.defineKey(target, key, {
-            set(value) { if (this.isLeafer)
-                this[privateKey] = value; },
-            get() {
-                return this.isApp
-                    ? this.tree.zoomLayer
-                    : (this.isLeafer ? (this[privateKey] || this) : this.leafer && this.leafer.zoomLayer);
-            }
-        });
-    };
-}
-
-const TextConvert = {};
-const ColorConvert = {};
-const UnitConvert = {
-    number(value, percentRefer) {
-        return typeof value === 'object' ? (value.type === 'percent' ? value.value * percentRefer : value.value) : value;
-    }
-};
-const PathArrow = {};
-const Paint = {};
-const PaintImage = {};
-const PaintGradient = {};
-const Effect = {};
-const Filter = {
-    apply() { core.Plugin.need('filter'); }
-};
-const Export = {};
-const State = {
-    setStyleName() { return core.Plugin.need('state'); },
-    set() { return core.Plugin.need('state'); }
-};
-const Transition = {
-    list: {},
-    register(attrName, fn) { Transition.list[attrName] = fn; },
-    get(attrName) { return Transition.list[attrName]; }
-};
-
-const { parse, objectToCanvasData } = core.PathConvert;
-const emptyPaint = {};
-const debug$1 = core.Debug.get('UIData');
-class UIData extends core.LeafData {
-    get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
-    get __strokeWidth() {
-        const { strokeWidth, strokeWidthFixed } = this;
-        if (strokeWidthFixed) {
-            const ui = this.__leaf;
-            let { scaleX } = ui.__nowWorld || ui.__world;
-            if (scaleX < 0)
-                scaleX = -scaleX;
-            return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
-        }
-        else
-            return strokeWidth;
-    }
-    get __hasStroke() { return this.stroke && this.strokeWidth; }
-    get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
-    get __hasMultiPaint() {
-        const t = this;
-        if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
-            return true;
-        return t.fill && this.__hasStroke;
-    }
-    get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
-    get __hasSurface() { const t = this; return (t.fill || t.stroke); }
-    get __autoWidth() { return !this._width; }
-    get __autoHeight() { return !this._height; }
-    get __autoSide() { return !this._width || !this._height; }
-    get __autoSize() { return !this._width && !this._height; }
-    setVisible(value) {
-        this._visible = value;
-        const { leafer } = this.__leaf;
-        if (leafer)
-            leafer.watcher.hasVisible = true;
-    }
-    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.__removeNaturalSize();
-        if (typeof value === 'string' || !value) {
-            if (this.__isFills) {
-                this.__removeInput('fill');
-                PaintImage.recycleImage('fill', this);
-                this.__isFills = false;
-                this.__pixelFill && (this.__pixelFill = false);
-            }
-            this._fill = value;
-        }
-        else if (typeof value === 'object') {
-            this.__setInput('fill', value);
-            const layout = this.__leaf.__layout;
-            layout.boxChanged || layout.boxChange();
-            this.__isFills = true;
-            this._fill || (this._fill = emptyPaint);
-        }
-    }
-    setStroke(value) {
-        if (typeof value === 'string' || !value) {
-            if (this.__isStrokes) {
-                this.__removeInput('stroke');
-                PaintImage.recycleImage('stroke', this);
-                this.__isStrokes = false;
-                this.__pixelStroke && (this.__pixelStroke = false);
-            }
-            this._stroke = value;
-        }
-        else if (typeof value === 'object') {
-            this.__setInput('stroke', value);
-            const layout = this.__leaf.__layout;
-            layout.boxChanged || layout.boxChange();
-            this.__isStrokes = true;
-            this._stroke || (this._stroke = emptyPaint);
-        }
-    }
-    setPath(value) {
-        const isString = typeof value === 'string';
-        if (isString || (value && typeof value[0] === 'object')) {
-            this.__setInput('path', value);
-            this._path = isString ? parse(value) : objectToCanvasData(value);
-        }
-        else {
-            if (this.__input)
-                this.__removeInput('path');
-            this._path = value;
-        }
-    }
-    setShadow(value) {
-        setArray(this, 'shadow', value);
-    }
-    setInnerShadow(value) {
-        setArray(this, 'innerShadow', value);
-    }
-    setFilter(value) {
-        setArray(this, 'filter', value);
-    }
-    __computePaint() {
-        const { fill, stroke } = this.__input;
-        if (fill)
-            Paint.compute('fill', this.__leaf);
-        if (stroke)
-            Paint.compute('stroke', this.__leaf);
-        this.__needComputePaint = false;
-    }
-}
-function setArray(data, key, value) {
-    data.__setInput(key, value);
-    if (value instanceof Array) {
-        if (value.some((item) => item.visible === false))
-            value = value.filter((item) => item.visible !== false);
-        value.length || (value = null);
-    }
-    else
-        value = value && value.visible !== false ? [value] : null;
-    data['_' + key] = value;
-}
-
-class GroupData extends UIData {
-}
-
-class BoxData extends GroupData {
-    get __boxStroke() { return !this.__pathInputed; }
-    get __drawAfterFill() { const t = this; return (t.overflow === 'hide' && (t.__clipAfterFill || t.innerShadow) && t.__leaf.children.length); }
-    get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
-}
-
-class LeaferData extends GroupData {
-    __getInputData(names, options) {
-        const data = super.__getInputData(names, options);
-        core.canvasSizeAttrs.forEach(key => delete data[key]);
-        return data;
-    }
-}
-
-class FrameData extends BoxData {
-}
-
-class LineData extends UIData {
-}
-
-class RectData extends UIData {
-    get __boxStroke() { return !this.__pathInputed; }
-}
-
-class EllipseData extends UIData {
-    get __boxStroke() { return !this.__pathInputed; }
-}
-
-class PolygonData extends UIData {
-}
-
-class StarData extends UIData {
-}
-
-class PathData extends UIData {
-    get __pathInputed() { return 2; }
-}
-
-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 {
-    get __useNaturalRatio() { return false; }
-    setFontWeight(value) {
-        if (typeof value === 'string') {
-            this.__setInput('fontWeight', value);
-            value = fontWeightMap[value] || 400;
-        }
-        else if (this.__input)
-            this.__removeInput('fontWeight');
-        this._fontWeight = value;
-    }
-    setBoxStyle(value) {
-        let t = this.__leaf, box = t.__box;
-        if (value) {
-            const { boxStyle } = this;
-            if (box)
-                for (let key in boxStyle)
-                    box[key] = undefined;
-            else
-                box = t.__box = core.UICreator.get('Rect', 0);
-            const layout = t.__layout, boxLayout = box.__layout;
-            if (!boxStyle)
-                box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
-            box.set(value);
-            if (boxLayout.strokeChanged)
-                layout.strokeChange();
-            if (boxLayout.renderChanged)
-                layout.renderChange();
-            box.__updateChange();
-        }
-        else if (box) {
-            t.__box = box.parent = null;
-            box.destroy();
-        }
-        this._boxStyle = value;
-    }
-}
-
-class ImageData extends RectData {
-    setUrl(value) {
-        this.__setImageFill(value);
-        this._url = value;
-    }
-    __setImageFill(value) {
-        if (this.__leaf.image)
-            this.__leaf.image = null;
-        this.fill = value ? { type: 'image', mode: 'stretch', url: value } : undefined;
-    }
-    __getData() {
-        const data = super.__getData();
-        delete data.fill;
-        return data;
-    }
-    __getInputData(names, options) {
-        const data = super.__getInputData(names, options);
-        delete data.fill;
-        return data;
-    }
-}
-
-class CanvasData extends RectData {
-    get __isCanvas() { return true; }
-    get __drawAfterFill() { return true; }
-    __getInputData(names, options) {
-        const data = super.__getInputData(names, options);
-        data.url = this.__leaf.canvas.toDataURL('image/png');
-        return data;
-    }
-}
-
-const UIBounds = {
-    __updateStrokeSpread() {
-        let width = 0, boxWidth = 0;
-        const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
-        if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
-            boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
-            if (!data.__boxStroke) {
-                const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * width;
-                const storkeCapAddWidth = data.strokeCap === 'none' ? 0 : strokeWidth;
-                width += Math.max(miterLimitAddWidth, storkeCapAddWidth);
-            }
-        }
-        if (data.__useArrow)
-            width += strokeWidth * 5;
-        if (box) {
-            width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
-            boxWidth = box.__layout.strokeBoxSpread;
-        }
-        this.__layout.strokeBoxSpread = boxWidth;
-        return width;
-    },
-    __updateRenderSpread() {
-        let width = 0;
-        const { shadow, innerShadow, blur, backgroundBlur, filter } = 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);
-        if (filter)
-            width += Filter.getSpread(filter);
-        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;
-        width += this.__layout.strokeSpread || 0;
-        return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
-    }
-};
-
-const UIRender = {
-    __updateChange() {
-        const data = this.__, w = this.__world;
-        if (data.__useEffect) {
-            const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
-            data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
-        }
-        const half = data.__hasHalf;
-        w.half !== half && (w.half = half);
-        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) {
-        drawFast(this, canvas, options);
-    },
-    __draw(canvas, options, originCanvas) {
-        const data = this.__;
-        if (data.__complex) {
-            if (data.__needComputePaint)
-                data.__computePaint();
-            const { fill, stroke, __drawAfterFill } = data;
-            this.__drawRenderPath(canvas);
-            if (data.__useEffect) {
-                const shape = Paint.shape(this, canvas, options);
-                this.__nowWorld = this.__getNowWorld(options);
-                const { shadow, innerShadow, filter } = data;
-                if (shadow)
-                    Effect.shadow(this, canvas, shape);
-                if (fill)
-                    data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
-                if (__drawAfterFill)
-                    this.__drawAfterFill(canvas, options);
-                if (innerShadow)
-                    Effect.innerShadow(this, canvas, shape);
-                if (stroke)
-                    data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
-                if (filter)
-                    Filter.apply(filter, this, this.__nowWorld, canvas, originCanvas, shape);
-                if (shape.worldCanvas)
-                    shape.worldCanvas.recycle();
-                shape.canvas.recycle();
-            }
-            else {
-                if (fill)
-                    data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
-                if (__drawAfterFill)
-                    this.__drawAfterFill(canvas, options);
-                if (stroke)
-                    data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
-            }
-        }
-        else {
-            if (data.__pathInputed) {
-                drawFast(this, canvas, options);
-            }
-            else {
-                this.__drawFast(canvas, options);
-            }
-        }
-    },
-    __renderShape(canvas, options, ignoreFill, ignoreStroke) {
-        if (this.__worldOpacity) {
-            canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
-            const { fill, stroke } = this.__;
-            this.__drawRenderPath(canvas);
-            if (fill && !ignoreFill)
-                this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-            if (this.__.__isCanvas)
-                this.__drawAfterFill(canvas, options);
-            if (stroke && !ignoreStroke)
-                this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
-        }
-    },
-    __drawAfterFill(canvas, options) {
-        if (this.__.__clipAfterFill) {
-            canvas.save();
-            this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
-            this.__drawContent(canvas, options);
-            canvas.restore();
-        }
-        else
-            this.__drawContent(canvas, options);
-    }
-};
-function drawFast(ui, canvas, options) {
-    const { fill, stroke, __drawAfterFill } = ui.__;
-    ui.__drawRenderPath(canvas);
-    if (fill)
-        Paint.fill(fill, ui, canvas);
-    if (__drawAfterFill)
-        ui.__drawAfterFill(canvas, options);
-    if (stroke)
-        Paint.stroke(stroke, ui, canvas);
-}
-
-const RectRender = {
-    __drawFast(canvas, options) {
-        let { x, y, width, height } = this.__layout.boxBounds;
-        const { fill, stroke, __drawAfterFill } = this.__;
-        if (fill) {
-            canvas.fillStyle = fill;
-            canvas.fillRect(x, y, width, height);
-        }
-        if (__drawAfterFill)
-            this.__drawAfterFill(canvas, options);
-        if (stroke) {
-            const { strokeAlign, __strokeWidth } = this.__;
-            if (!__strokeWidth)
-                return;
-            canvas.setStroke(stroke, __strokeWidth, this.__);
-            const half = __strokeWidth / 2;
-            switch (strokeAlign) {
-                case 'center':
-                    canvas.strokeRect(0, 0, width, height);
-                    break;
-                case 'inside':
-                    width -= __strokeWidth, height -= __strokeWidth;
-                    if (width < 0 || height < 0) {
-                        canvas.save();
-                        this.__clip(canvas, options);
-                        canvas.strokeRect(x + half, y + half, width, height);
-                        canvas.restore();
-                    }
-                    else
-                        canvas.strokeRect(x + half, y + half, width, height);
-                    break;
-                case 'outside':
-                    canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
-                    break;
-            }
-        }
-    }
-};
-
-var UI_1;
-exports.UI = UI_1 = class UI extends core.Leaf {
-    get app() { return this.leafer && this.leafer.app; }
-    get isFrame() { return false; }
-    set scale(value) { core.MathHelper.assignScale(this, value); }
-    get scale() { return this.__.scale; }
-    get pen() {
-        const { path } = this.__;
-        core.pen.set(this.path = path || []);
-        if (!path)
-            this.__drawPathByBox(core.pen);
-        return core.pen;
-    }
-    constructor(data) {
-        super(data);
-    }
-    reset(_data) { }
-    set(data, transition) {
-        if (data) {
-            if (transition) {
-                if (transition === 'temp') {
-                    this.lockNormalStyle = true;
-                    Object.assign(this, data);
-                    this.lockNormalStyle = false;
-                }
-                else
-                    this.animate(data, transition);
-            }
-            else
-                Object.assign(this, data);
-        }
-    }
-    get(name) {
-        return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
-    }
-    createProxyData() { return undefined; }
-    find(_condition, _options) { return core.Plugin.need('find'); }
-    findTag(tag) { return this.find({ tag }); }
-    findOne(_condition, _options) { return core.Plugin.need('find'); }
-    findId(id) { return this.findOne({ id }); }
-    getPath(curve, pathForRender) {
-        this.__layout.update();
-        let path = pathForRender ? this.__.__pathForRender : this.__.path;
-        if (!path)
-            core.pen.set(path = []), this.__drawPathByBox(core.pen);
-        return curve ? core.PathConvert.toCanvasData(path, true) : path;
-    }
-    getPathString(curve, pathForRender, floatLength) {
-        return core.PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
-    }
-    load() {
-        this.__.__computePaint();
-    }
-    __onUpdateSize() {
-        if (this.__.__input) {
-            const data = this.__;
-            (data.lazy && !this.__inLazyBounds && !Export.running) ? data.__needComputePaint = true : data.__computePaint();
-        }
-    }
-    __updateRenderPath() {
-        if (this.__.path) {
-            const data = this.__;
-            data.__pathForRender = data.cornerRadius ? core.PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
-            if (data.__useArrow)
-                PathArrow.addArrows(this, !data.cornerRadius);
-        }
-    }
-    __drawRenderPath(canvas) {
-        canvas.beginPath();
-        this.__drawPathByData(canvas, this.__.__pathForRender);
-    }
-    __drawPath(canvas) {
-        canvas.beginPath();
-        this.__drawPathByData(canvas, this.__.path);
-    }
-    __drawPathByData(drawer, data) {
-        data ? core.PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
-    }
-    __drawPathByBox(drawer) {
-        const { x, y, width, height } = this.__layout.boxBounds;
-        if (this.__.cornerRadius) {
-            const { cornerRadius } = this.__;
-            drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
-        }
-        else
-            drawer.rect(x, y, width, height);
-    }
-    drawImagePlaceholder(canvas, _image) {
-        Paint.fill(this.__.placeholderColor, this, canvas);
-    }
-    animate(_keyframe, _options, _type, _isTemp) {
-        return core.Plugin.need('animate');
-    }
-    killAnimate(_type, _nextStyle) { }
-    export(_filename, _options) {
-        return core.Plugin.need('export');
-    }
-    syncExport(_filename, _options) {
-        return core.Plugin.need('export');
-    }
-    clone(data) {
-        const json = core.DataHelper.clone(this.toJSON());
-        if (data)
-            Object.assign(json, data);
-        return UI_1.one(json);
-    }
-    static one(data, x, y, width, height) {
-        return core.UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
-    }
-    static registerUI() {
-        core.registerUI()(this);
-    }
-    static registerData(data) {
-        core.dataProcessor(data)(this.prototype);
-    }
-    static setEditConfig(_config) { }
-    static setEditOuter(_toolName) { }
-    static setEditInner(_editorName) { }
-    destroy() {
-        this.fill = this.stroke = null;
-        if (this.__animate)
-            this.killAnimate();
-        super.destroy();
-    }
-};
-__decorate([
-    core.dataProcessor(UIData)
-], exports.UI.prototype, "__", void 0);
-__decorate([
-    zoomLayerType()
-], exports.UI.prototype, "zoomLayer", 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.visibleType(true)
-], exports.UI.prototype, "visible", void 0);
-__decorate([
-    core.surfaceType(false)
-], exports.UI.prototype, "locked", void 0);
-__decorate([
-    core.surfaceType(false)
-], exports.UI.prototype, "dim", void 0);
-__decorate([
-    core.surfaceType(false)
-], exports.UI.prototype, "dimskip", void 0);
-__decorate([
-    core.sortType(0)
-], exports.UI.prototype, "zIndex", void 0);
-__decorate([
-    core.maskType(false)
-], exports.UI.prototype, "mask", void 0);
-__decorate([
-    core.eraserType(false)
-], exports.UI.prototype, "eraser", void 0);
-__decorate([
-    core.positionType(0, true)
-], exports.UI.prototype, "x", void 0);
-__decorate([
-    core.positionType(0, true)
-], exports.UI.prototype, "y", void 0);
-__decorate([
-    core.boundsType(100, true)
-], exports.UI.prototype, "width", void 0);
-__decorate([
-    core.boundsType(100, true)
-], exports.UI.prototype, "height", void 0);
-__decorate([
-    core.scaleType(1, true)
-], exports.UI.prototype, "scaleX", void 0);
-__decorate([
-    core.scaleType(1, true)
-], exports.UI.prototype, "scaleY", void 0);
-__decorate([
-    core.rotationType(0, true)
-], exports.UI.prototype, "rotation", void 0);
-__decorate([
-    core.rotationType(0, true)
-], exports.UI.prototype, "skewX", void 0);
-__decorate([
-    core.rotationType(0, true)
-], exports.UI.prototype, "skewY", void 0);
-__decorate([
-    core.positionType(0, true)
-], exports.UI.prototype, "offsetX", void 0);
-__decorate([
-    core.positionType(0, true)
-], exports.UI.prototype, "offsetY", void 0);
-__decorate([
-    core.positionType(0, true)
-], exports.UI.prototype, "scrollX", void 0);
-__decorate([
-    core.positionType(0, true)
-], exports.UI.prototype, "scrollY", void 0);
-__decorate([
-    core.autoLayoutType()
-], exports.UI.prototype, "origin", void 0);
-__decorate([
-    core.autoLayoutType()
-], exports.UI.prototype, "around", void 0);
-__decorate([
-    core.dataType(false)
-], exports.UI.prototype, "lazy", void 0);
-__decorate([
-    core.naturalBoundsType(1)
-], exports.UI.prototype, "pixelRatio", void 0);
-__decorate([
-    core.pathInputType()
-], exports.UI.prototype, "path", void 0);
-__decorate([
-    core.pathType()
-], exports.UI.prototype, "windingRule", void 0);
-__decorate([
-    core.pathType(true)
-], exports.UI.prototype, "closed", void 0);
-__decorate([
-    core.boundsType(0)
-], exports.UI.prototype, "padding", void 0);
-__decorate([
-    core.boundsType(false)
-], exports.UI.prototype, "lockRatio", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "widthRange", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "heightRange", void 0);
-__decorate([
-    core.dataType(false)
-], exports.UI.prototype, "draggable", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "dragBounds", void 0);
-__decorate([
-    core.dataType(false)
-], exports.UI.prototype, "editable", 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(false)
-], exports.UI.prototype, "hitBox", 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('')
-], 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(false)
-], exports.UI.prototype, "strokeWidthFixed", 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(0)
-], exports.UI.prototype, "dashOffset", void 0);
-__decorate([
-    core.strokeType(10)
-], exports.UI.prototype, "miterLimit", void 0);
-__decorate([
-    core.pathType(0)
-], 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([
-    effectType()
-], exports.UI.prototype, "filter", void 0);
-__decorate([
-    core.surfaceType()
-], exports.UI.prototype, "placeholderColor", void 0);
-__decorate([
-    core.dataType({})
-], exports.UI.prototype, "data", void 0);
-__decorate([
-    core.rewrite(core.Leaf.prototype.reset)
-], exports.UI.prototype, "reset", null);
-exports.UI = UI_1 = __decorate([
-    core.useModule(UIBounds),
-    core.useModule(UIRender),
-    core.rewriteAble()
-], exports.UI);
-
-exports.Group = class Group extends exports.UI {
-    get __tag() { return 'Group'; }
-    get isBranch() { return true; }
-    constructor(data) {
-        super(data);
-    }
-    reset(data) {
-        this.__setBranch();
-        super.reset(data);
-    }
-    __setBranch() {
-        if (!this.children)
-            this.children = [];
-    }
-    set(data, transition) {
-        if (data) {
-            if (data.children) {
-                const { children } = data;
-                delete data.children;
-                this.children ? this.clear() : this.__setBranch();
-                super.set(data, transition);
-                children.forEach(child => this.add(child));
-                data.children = children;
-            }
-            else
-                super.set(data, transition);
-        }
-    }
-    toJSON(options) {
-        const data = super.toJSON(options);
-        data.children = this.children.map(child => child.toJSON(options));
-        return data;
-    }
-    pick(_hitPoint, _options) { return undefined; }
-    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) { }
-    clear() { }
-};
-__decorate([
-    core.dataProcessor(GroupData)
-], exports.Group.prototype, "__", void 0);
-__decorate([
-    core.boundsType(0)
-], exports.Group.prototype, "width", void 0);
-__decorate([
-    core.boundsType(0)
-], exports.Group.prototype, "height", void 0);
-exports.Group = __decorate([
-    core.useModule(core.Branch),
-    core.registerUI()
-], exports.Group);
-
-var Leafer_1;
-const debug = core.Debug.get('Leafer');
-exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
-    get __tag() { return 'Leafer'; }
-    get isApp() { return false; }
-    get app() { return this.parent || this; }
-    get isLeafer() { return true; }
-    get imageReady() { return this.viewReady && core.Resource.isComplete; }
-    get layoutLocked() { return !this.layouter.running; }
-    get FPS() { return this.renderer ? this.renderer.FPS : 60; }
-    get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
-    get clientBounds() { return (this.canvas && this.canvas.getClientBounds(true)) || core.getBoundsData(); }
-    constructor(userConfig, data) {
-        super(data);
-        this.config = {
-            start: true,
-            hittable: true,
-            smooth: true,
-            lazySpeard: 100,
-        };
-        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);
-        Leafer_1.list.add(this);
-    }
-    init(userConfig, parentApp) {
-        if (this.canvas)
-            return;
-        let start;
-        const { config } = this;
-        this.__setLeafer(this);
-        if (parentApp) {
-            this.parentApp = parentApp;
-            this.__bindApp(parentApp);
-            start = parentApp.running;
-        }
-        if (userConfig) {
-            this.parent = parentApp;
-            this.initType(userConfig.type);
-            this.parent = undefined;
-            core.DataHelper.assign(config, userConfig);
-        }
-        const canvas = this.canvas = core.Creator.canvas(config);
-        this.__controllers.push(this.renderer = core.Creator.renderer(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, parentApp);
-        this.view = canvas.view;
-        if (!parentApp) {
-            this.selector = core.Creator.selector(this);
-            this.interaction = core.Creator.interaction(this, canvas, this.selector, config);
-            if (this.interaction) {
-                this.__controllers.unshift(this.interaction);
-                this.hitCanvasManager = core.Creator.hitCanvasManager();
-            }
-            this.canvasManager = new core.CanvasManager();
-            start = config.start;
-        }
-        this.hittable = config.hittable;
-        this.fill = config.fill;
-        this.canvasManager.add(canvas);
-        this.__listenEvents();
-        if (start)
-            this.__startTimer = setTimeout(this.start.bind(this));
-        core.WaitHelper.run(this.__initWait);
-        this.onInit();
-    }
-    onInit() { }
-    initType(_type) { }
-    set(data, transition) {
-        this.waitInit(() => { super.set(data, transition); });
-    }
-    start() {
-        clearTimeout(this.__startTimer);
-        if (!this.running && this.canvas) {
-            this.running = true;
-            this.ready ? this.emitLeafer(core.LeaferEvent.RESTART) : this.emitLeafer(core.LeaferEvent.START);
-            this.__controllers.forEach(item => item.start());
-            if (!this.isApp)
-                this.renderer.render();
-        }
-    }
-    stop() {
-        clearTimeout(this.__startTimer);
-        if (this.running && this.canvas) {
-            this.__controllers.forEach(item => item.stop());
-            this.running = false;
-            this.emitLeafer(core.LeaferEvent.STOP);
-        }
-    }
-    unlockLayout() {
-        this.layouter.start();
-        this.updateLayout();
-    }
-    lockLayout() {
-        this.updateLayout();
-        this.layouter.stop();
-    }
-    resize(size) {
-        const data = core.DataHelper.copyAttrs({}, size, core.canvasSizeAttrs);
-        Object.keys(data).forEach(key => this[key] = data[key]);
-    }
-    forceRender(bounds, sync) {
-        const { renderer } = this;
-        if (renderer) {
-            renderer.addBlock(bounds ? new core.Bounds(bounds) : this.canvas.bounds);
-            if (this.viewReady)
-                sync ? renderer.render() : renderer.update();
-        }
-    }
-    requestRender(change = false) {
-        if (this.renderer)
-            this.renderer.update(change);
-    }
-    updateCursor(cursor) {
-        const i = this.interaction;
-        if (i)
-            cursor ? i.setCursor(cursor) : i.updateCursor();
-    }
-    updateLazyBounds() {
-        this.lazyBounds = this.canvas.bounds.clone().spread(this.config.lazySpeard);
-    }
-    __doResize(size) {
-        const { canvas } = this;
-        if (!canvas || canvas.isSameSize(size))
-            return;
-        const old = core.DataHelper.copyAttrs({}, this.canvas, core.canvasSizeAttrs);
-        canvas.resize(size);
-        this.updateLazyBounds();
-        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.__level = 1;
-    }
-    __checkAutoLayout(config, parentApp) {
-        if (!parentApp) {
-            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') {
-                if (!this.parent)
-                    this.canvas.hittable = newValue;
-            }
-            else if (attrName === 'zIndex') {
-                this.canvas.zIndex = newValue;
-                setTimeout(() => this.parent && this.parent.__updateSortChildren());
-            }
-        }
-        return 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.forceRender();
-    }
-    __onCreated() {
-        this.created = true;
-    }
-    __onReady() {
-        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);
-    }
-    __onLayoutEnd() {
-        const { grow, width: fixedWidth, height: fixedHeight } = this.config;
-        if (grow) {
-            let { width, height, pixelRatio } = this;
-            const bounds = grow === 'box' ? this.worldBoxBounds : this.__world;
-            if (!fixedWidth)
-                width = Math.max(1, bounds.x + bounds.width);
-            if (!fixedHeight)
-                height = Math.max(1, bounds.y + bounds.height);
-            this.__doResize({ width, height, pixelRatio });
-        }
-        if (!this.ready)
-            this.__onReady();
-    }
-    __onNextRender() {
-        if (this.viewReady) {
-            core.WaitHelper.run(this.__nextRenderWait);
-            const { imageReady } = this;
-            if (imageReady && !this.viewCompleted)
-                this.__checkViewCompleted();
-            if (!imageReady) {
-                this.viewCompleted = false;
-                this.requestRender();
-            }
-        }
-        else
-            this.requestRender();
-    }
-    __checkViewCompleted(emit = true) {
-        this.nextRender(() => {
-            if (this.imageReady) {
-                if (emit)
-                    this.emitLeafer(core.LeaferEvent.VIEW_COMPLETED);
-                core.WaitHelper.run(this.__viewCompletedWait);
-                this.viewCompleted = true;
-            }
-        });
-    }
-    __onWatchData() {
-        if (this.watcher.childrenChanged && this.interaction) {
-            this.nextRender(() => this.interaction.updateCursor());
-        }
-    }
-    waitInit(item, bind) {
-        if (bind)
-            item = item.bind(bind);
-        if (!this.__initWait)
-            this.__initWait = [];
-        this.canvas ? item() : this.__initWait.push(item);
-    }
-    waitReady(item, bind) {
-        if (bind)
-            item = item.bind(bind);
-        this.ready ? item() : this.__readyWait.push(item);
-    }
-    waitViewReady(item, bind) {
-        if (bind)
-            item = item.bind(bind);
-        this.viewReady ? item() : this.__viewReadyWait.push(item);
-    }
-    waitViewCompleted(item, bind) {
-        if (bind)
-            item = item.bind(bind);
-        this.__viewCompletedWait.push(item);
-        if (this.viewCompleted)
-            this.__checkViewCompleted(false);
-        else if (!this.running)
-            this.start();
-    }
-    nextRender(item, bind, off) {
-        if (bind)
-            item = item.bind(bind);
-        const list = this.__nextRenderWait;
-        if (off) {
-            for (let i = 0; i < list.length; i++) {
-                if (list[i] === item) {
-                    list.splice(i, 1);
-                    break;
-                }
-            }
-        }
-        else
-            list.push(item);
-        this.requestRender();
-    }
-    zoom(_zoomType, _padding, _fixedScale, _transition) {
-        return core.Plugin.need('view');
-    }
-    getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
-    getValidScale(changeScale) { return changeScale; }
-    getWorldPointByClient(clientPoint, updateClient) {
-        return this.interaction && this.interaction.getLocal(clientPoint, updateClient);
-    }
-    getPagePointByClient(clientPoint, updateClient) {
-        return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient));
-    }
-    getClientPointByWorld(worldPoint) {
-        const { x, y } = this.clientBounds;
-        return { x: x + worldPoint.x, y: y + worldPoint.y };
-    }
-    updateClientBounds() {
-        this.canvas && this.canvas.updateClientBounds();
-    }
-    receiveEvent(_event) { }
-    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.START, () => this.updateLazyBounds());
-        this.once(core.RenderEvent.START, () => this.__onCreated());
-        this.once(core.RenderEvent.END, () => this.__onViewReady());
-        this.__eventIds.push(this.on_(core.WatchEvent.DATA, this.__onWatchData, this), this.on_(core.LayoutEvent.END, this.__onLayoutEnd, this), this.on_(core.RenderEvent.NEXT, this.__onNextRender, this));
-    }
-    __removeListenEvents() {
-        this.off_(this.__eventIds);
-        this.__eventIds.length = 0;
-    }
-    destroy(sync) {
-        const doDestory = () => {
-            if (!this.destroyed) {
-                Leafer_1.list.remove(this);
-                try {
-                    this.stop();
-                    this.emitEvent(new core.LeaferEvent(core.LeaferEvent.END, this));
-                    this.__removeListenEvents();
-                    this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
-                    this.__controllers.length = 0;
-                    if (!this.parent) {
-                        if (this.selector)
-                            this.selector.destroy();
-                        if (this.hitCanvasManager)
-                            this.hitCanvasManager.destroy();
-                        this.canvasManager.destroy();
-                    }
-                    this.canvas.destroy();
-                    this.config.view = this.view = this.parentApp = null;
-                    if (this.userConfig)
-                        this.userConfig.view = null;
-                    super.destroy();
-                    setTimeout(() => { core.ImageManager.clearRecycled(); }, 100);
-                }
-                catch (e) {
-                    debug.error(e);
-                }
-            }
-        };
-        sync ? doDestory() : setTimeout(doDestory);
-    }
-};
-exports.Leafer.list = new core.LeafList();
-__decorate([
-    core.dataProcessor(LeaferData)
-], exports.Leafer.prototype, "__", void 0);
-__decorate([
-    core.boundsType()
-], exports.Leafer.prototype, "pixelRatio", void 0);
-exports.Leafer = Leafer_1 = __decorate([
-    core.registerUI()
-], exports.Leafer);
-
-exports.Rect = class Rect extends exports.UI {
-    get __tag() { return 'Rect'; }
-    constructor(data) {
-        super(data);
-    }
-};
-__decorate([
-    core.dataProcessor(RectData)
-], exports.Rect.prototype, "__", void 0);
-exports.Rect = __decorate([
-    core.useModule(RectRender),
-    core.rewriteAble(),
-    core.registerUI()
-], exports.Rect);
-
-const { copy, add, includes: includes$1 } = core.BoundsHelper;
-const rect = exports.Rect.prototype, group = exports.Group.prototype;
-const childrenRenderBounds = {};
-exports.Box = class Box extends exports.Group {
-    get __tag() { return 'Box'; }
-    get isBranchLeaf() { return true; }
-    constructor(data) {
-        super(data);
-        this.__layout.renderChanged || this.__layout.renderChange();
-    }
-    __updateStrokeSpread() { return 0; }
-    __updateRectRenderSpread() { return 0; }
-    __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
-    __updateRectBoxBounds() { }
-    __updateBoxBounds(_secondLayout) {
-        const data = this.__;
-        if (this.children.length && !this.pathInputed) {
-            if (data.__autoSide) {
-                if (data.__hasSurface)
-                    this.__extraUpdate();
-                super.__updateBoxBounds();
-                const { boxBounds } = this.__layout;
-                if (!data.__autoSize) {
-                    if (data.__autoWidth) {
-                        boxBounds.width += boxBounds.x, boxBounds.x = 0;
-                        boxBounds.height = data.height, boxBounds.y = 0;
-                    }
-                    else {
-                        boxBounds.height += boxBounds.y, boxBounds.y = 0;
-                        boxBounds.width = data.width, boxBounds.x = 0;
-                    }
-                }
-                this.__updateNaturalSize();
-            }
-            else
-                this.__updateRectBoxBounds();
-        }
-        else
-            this.__updateRectBoxBounds();
-    }
-    __updateStrokeBounds() { }
-    __updateRenderBounds() {
-        let isOverflow;
-        const { renderBounds } = this.__layout;
-        if (this.children.length) {
-            super.__updateRenderBounds();
-            copy(childrenRenderBounds, renderBounds);
-            this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
-            if (isOverflow && this.__.overflow !== 'hide')
-                add(renderBounds, childrenRenderBounds);
-        }
-        else
-            this.__updateRectRenderBounds();
-        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
-    }
-    __updateRectRenderBounds() { }
-    __updateRectChange() { }
-    __updateChange() {
-        super.__updateChange();
-        this.__updateRectChange();
-    }
-    __renderRect(_canvas, _options) { }
-    __renderGroup(_canvas, _options) { }
-    __render(canvas, options) {
-        if (this.__.__drawAfterFill) {
-            this.__renderRect(canvas, options);
-        }
-        else {
-            this.__renderRect(canvas, options);
-            if (this.children.length)
-                this.__renderGroup(canvas, options);
-        }
-    }
-    __drawContent(canvas, options) {
-        this.__renderGroup(canvas, options);
-        if (this.__.__hasStroke) {
-            canvas.setWorld(this.__nowWorld);
-            this.__drawRenderPath(canvas);
-        }
-    }
-};
-__decorate([
-    core.dataProcessor(BoxData)
-], exports.Box.prototype, "__", void 0);
-__decorate([
-    core.boundsType(100)
-], exports.Box.prototype, "width", void 0);
-__decorate([
-    core.boundsType(100)
-], exports.Box.prototype, "height", void 0);
-__decorate([
-    core.dataType(false)
-], exports.Box.prototype, "resizeChildren", 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, "__updateRectBoxBounds", 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.__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'; }
-    get isFrame() { return true; }
-    constructor(data) {
-        super(data);
-    }
-};
-__decorate([
-    core.dataProcessor(FrameData)
-], exports.Frame.prototype, "__", void 0);
-__decorate([
-    core.surfaceType('#FFFFFF')
-], exports.Frame.prototype, "fill", 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, 360, 0, true);
-            }
-            if (core.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([
-    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 { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = core.PathCommandDataHelper;
-const { rotate, getAngle, getDistance, defaultPoint } = core.PointHelper;
-const { toBounds } = core.PathBounds;
-exports.Line = class Line extends exports.UI {
-    get __tag() { return 'Line'; }
-    get toPoint() {
-        const { width, rotation } = this.__;
-        const to = core.getPointData();
-        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 data = this.__;
-        const path = data.path = [];
-        if (data.points) {
-            drawPoints$1(path, data.points, false, data.closed);
-        }
-        else {
-            moveTo$2(path, 0, 0);
-            lineTo$2(path, this.width, 0);
-        }
-    }
-    __updateRenderPath() {
-        const data = this.__;
-        if (!this.pathInputed && data.points && data.curve) {
-            drawPoints$1(data.__pathForRender = [], data.points, data.curve, data.closed);
-            if (data.__useArrow)
-                PathArrow.addArrows(this, false);
-        }
-        else
-            super.__updateRenderPath();
-    }
-    __updateBoxBounds() {
-        if (this.points) {
-            toBounds(this.__.__pathForRender, this.__layout.boxBounds);
-        }
-        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);
-__decorate([
-    core.pathType(false)
-], exports.Line.prototype, "closed", void 0);
-exports.Line = __decorate([
-    core.registerUI()
-], exports.Line);
-
-const { sin: sin$1, cos: cos$1, PI: PI$1 } = Math;
-const { moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath$1, drawPoints } = core.PathCommandDataHelper;
-const line = exports.Line.prototype;
-exports.Polygon = class Polygon extends exports.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() { }
-};
-__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);
-__decorate([
-    core.rewrite(line.__updateRenderPath)
-], exports.Polygon.prototype, "__updateRenderPath", null);
-__decorate([
-    core.rewrite(line.__updateBoxBounds)
-], exports.Polygon.prototype, "__updateBoxBounds", null);
-exports.Polygon = __decorate([
-    core.rewriteAble(),
-    core.registerUI()
-], exports.Polygon);
-
-const { sin, cos, PI } = Math;
-const { moveTo, lineTo, 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(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([
-    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);
-
-exports.Image = class Image extends exports.Rect {
-    get __tag() { return 'Image'; }
-    get ready() { return this.image ? this.image.ready : false; }
-    constructor(data) {
-        super(data);
-        this.on_(core.ImageEvent.LOADED, this.__onLoaded, this);
-    }
-    __onLoaded(e) {
-        if (e.attrName === 'fill' && e.attrValue.url === this.url)
-            this.image = e.image;
-    }
-    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);
-const MyImage = exports.Image;
-
-exports.Canvas = class Canvas extends exports.Rect {
-    get __tag() { return 'Canvas'; }
-    get ready() { return !this.url; }
-    constructor(data) {
-        super(data);
-        this.canvas = core.Creator.canvas(this.__);
-        this.context = this.canvas.context;
-        if (data && data.url)
-            this.drawImage(data.url);
-    }
-    drawImage(url) {
-        new core.LeaferImage({ url }).load((image) => {
-            this.context.drawImage(image.view, 0, 0);
-            this.url = undefined;
-            this.paint();
-            this.emitEvent(new core.ImageEvent(core.ImageEvent.LOADED, { image }));
-        });
-    }
-    draw(ui, offset, scale, rotation) {
-        const matrix = new core.Matrix(ui.worldTransform).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.multiplyParent(m);
-        ui.__render(this.canvas, { matrix: matrix.withScale() });
-        this.paint();
-    }
-    paint() {
-        this.forceRender();
-    }
-    __drawContent(canvas, _options) {
-        const { width, height } = this.__, { view } = this.canvas;
-        canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
-    }
-    __updateSize() {
-        const { canvas } = this;
-        if (canvas) {
-            const { smooth, safeResize } = this.__;
-            canvas.resize(this.__, safeResize);
-            if (canvas.smooth !== smooth)
-                canvas.smooth = smooth;
-        }
-    }
-    destroy() {
-        if (this.canvas) {
-            this.canvas.destroy();
-            this.canvas = this.context = null;
-        }
-        super.destroy();
-    }
-};
-__decorate([
-    core.dataProcessor(CanvasData)
-], 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(1)
-], exports.Canvas.prototype, "pixelRatio", void 0);
-__decorate([
-    resizeType(true)
-], exports.Canvas.prototype, "smooth", void 0);
-__decorate([
-    core.dataType(false)
-], exports.Canvas.prototype, "safeResize", void 0);
-__decorate([
-    resizeType()
-], exports.Canvas.prototype, "contextSettings", void 0);
-exports.Canvas = __decorate([
-    core.registerUI()
-], exports.Canvas);
-
-const { copyAndSpread, includes, spread, setList } = core.BoundsHelper;
-exports.Text = class Text extends exports.UI {
-    get __tag() { return 'Text'; }
-    get textDrawData() { this.updateLayout(); return this.__.__textDrawData; }
-    constructor(data) {
-        super(data);
-    }
-    __updateTextDrawData() {
-        const data = this.__;
-        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
-        data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
-        data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
-        data.__padding = padding ? core.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.__autoSize;
-        data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__);
-    }
-    __updateBoxBounds() {
-        const data = this.__;
-        const layout = this.__layout;
-        const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
-        this.__updateTextDrawData();
-        const { bounds: contentBounds } = data.__textDrawData;
-        const b = layout.boxBounds;
-        layout.contentBounds = contentBounds;
-        if (data.__lineHeight < fontSize)
-            spread(contentBounds, fontSize / 2);
-        if (autoWidth || autoHeight) {
-            b.x = autoWidth ? contentBounds.x : 0;
-            b.y = autoHeight ? contentBounds.y : 0;
-            b.width = autoWidth ? contentBounds.width : data.width;
-            b.height = autoHeight ? contentBounds.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();
-        if (italic)
-            b.width += fontSize * 0.16;
-        const isOverflow = !includes(b, contentBounds) || undefined;
-        if (isOverflow)
-            setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
-        else
-            data.__textBoxBounds = b;
-        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
-    }
-    __onUpdateSize() {
-        if (this.__box)
-            this.__box.__onUpdateSize();
-        super.__onUpdateSize();
-    }
-    __updateRenderSpread() {
-        let width = super.__updateRenderSpread();
-        if (!width)
-            width = this.isOverflow ? 1 : 0;
-        return width;
-    }
-    __updateRenderBounds() {
-        const { renderBounds, renderSpread } = this.__layout;
-        copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
-        if (this.__box)
-            this.__box.__layout.renderBounds = renderBounds;
-    }
-    __drawRenderPath(canvas) {
-        canvas.font = this.__.__font;
-    }
-    __draw(canvas, options, originCanvas) {
-        const box = this.__box;
-        if (box)
-            box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
-        if (this.textEditing && !Export.running)
-            return;
-        super.__draw(canvas, options, originCanvas);
-    }
-    destroy() {
-        if (this.boxStyle)
-            this.boxStyle = null;
-        super.destroy();
-    }
-};
-__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.surfaceType()
-], exports.Text.prototype, "boxStyle", void 0);
-__decorate([
-    core.dataType(false)
-], exports.Text.prototype, "resizeFontSize", void 0);
-__decorate([
-    core.surfaceType('#000000')
-], exports.Text.prototype, "fill", void 0);
-__decorate([
-    core.affectStrokeBoundsType('outside')
-], exports.Text.prototype, "strokeAlign", void 0);
-__decorate([
-    core.hitType('all')
-], exports.Text.prototype, "hitFill", void 0);
-__decorate([
-    core.boundsType('')
-], exports.Text.prototype, "text", void 0);
-__decorate([
-    core.boundsType('')
-], exports.Text.prototype, "placeholder", void 0);
-__decorate([
-    core.boundsType('caption')
-], 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: 1.5 })
-], 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('x')
-], exports.Text.prototype, "writingMode", 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(true)
-], exports.Text.prototype, "autoSizeAlign", void 0);
-__decorate([
-    core.boundsType('normal')
-], exports.Text.prototype, "textWrap", void 0);
-__decorate([
-    core.boundsType('show')
-], exports.Text.prototype, "textOverflow", void 0);
-exports.Text = __decorate([
-    core.registerUI()
-], exports.Text);
-
-exports.Path = class Path extends exports.UI {
-    get __tag() { return 'Path'; }
-    constructor(data) {
-        super(data);
-    }
-};
-__decorate([
-    core.dataProcessor(PathData)
-], exports.Path.prototype, "__", 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() { 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; }
-    clearPath() { return this; }
-    paint() {
-        if (!this.pathElement.__layout.boxChanged)
-            this.pathElement.forceUpdate('path');
-    }
-};
-__decorate([
-    core.dataProcessor(PenData)
-], exports.Pen.prototype, "__", void 0);
-__decorate([
-    penPathType()
-], exports.Pen.prototype, "path", void 0);
-exports.Pen = __decorate([
-    core.useModule(core.PathCreator, ['set', 'path', 'paint']),
-    core.registerUI()
-], exports.Pen);
-function penPathType() {
-    return (target, key) => {
-        core.defineKey(target, key, {
-            get() { return this.__path; }
-        });
-    };
-}
-
-exports.BoxData = BoxData;
-exports.CanvasData = CanvasData;
-exports.ColorConvert = ColorConvert;
-exports.Effect = Effect;
-exports.EllipseData = EllipseData;
-exports.Export = Export;
-exports.Filter = Filter;
-exports.FrameData = FrameData;
-exports.GroupData = GroupData;
-exports.ImageData = ImageData;
-exports.LeaferData = LeaferData;
-exports.LineData = LineData;
-exports.MyImage = MyImage;
-exports.Paint = Paint;
-exports.PaintGradient = PaintGradient;
-exports.PaintImage = PaintImage;
-exports.PathArrow = PathArrow;
-exports.PathData = PathData;
-exports.PenData = PenData;
-exports.PolygonData = PolygonData;
-exports.RectData = RectData;
-exports.RectRender = RectRender;
-exports.StarData = StarData;
-exports.State = State;
-exports.TextConvert = TextConvert;
-exports.TextData = TextData;
-exports.Transition = Transition;
-exports.UIBounds = UIBounds;
-exports.UIData = UIData;
-exports.UIRender = UIRender;
-exports.UnitConvert = UnitConvert;
-exports.effectType = effectType;
-exports.resizeType = resizeType;
-exports.zoomLayerType = zoomLayerType;
-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]; }
-    });
-});