@leafer-ui/draw 1.6.4 → 1.6.6

package/lib/draw.esm.js

@@ -0,0 +1,2072 @@
+import { defineKey, decorateLeafAttr, attr, Plugin, PathConvert, DataHelper, Debug, LeafData, canvasSizeAttrs, UICreator, dataProcessor, dataType, surfaceType, opacityType, visibleType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, autoLayoutType, naturalBoundsType, pathInputType, pathType, hitType, strokeType, cursorType, rewrite, Leaf, useModule, rewriteAble, MathHelper, pen, PathCorner, PathDrawer, registerUI, Branch, LeafList, Resource, getBoundsData, Creator, CanvasManager, WaitHelper, LeaferEvent, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, ImageManager, BoundsHelper, affectRenderBoundsType, PathCommandDataHelper, Platform, PointHelper, PathBounds, affectStrokeBoundsType, getPointData, LeaferImage, ImageEvent, Matrix, PathCreator } 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, 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 decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            if (value)
+                this.__.__useEffect = true;
+            this.__layout.renderChanged || this.__layout.renderChange();
+        }
+    }));
+}
+function resizeType(defaultValue) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.boxChanged || this.__layout.boxChange();
+            this.__updateSize();
+        }
+    }));
+}
+function zoomLayerType() {
+    return (target, key) => {
+        const privateKey = '_' + key;
+        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);
+            }
+        });
+    };
+}
+
+function hasTransparent$1(color) {
+    if (!color || color.length === 7 || color.length === 4)
+        return false;
+    if (color === 'transparent')
+        return true;
+    const first = color[0];
+    if (first === '#') {
+        switch (color.length) {
+            case 5: return color[4] !== 'f' && color[4] !== 'F';
+            case 9: return (color[7] !== 'f' && color[7] !== 'F') || (color[8] !== 'f' && color[8] !== 'F');
+        }
+    }
+    else if (first === 'r' || first === 'h') {
+        if (color[3] === 'a') {
+            const i = color.lastIndexOf(',');
+            if (i > -1)
+                return parseFloat(color.slice(i + 1)) < 1;
+        }
+    }
+    return false;
+}
+
+const TextConvert = {};
+const ColorConvert = {
+    hasTransparent: hasTransparent$1
+};
+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() { Plugin.need('filter'); }
+};
+const Export = {};
+const State = {
+    setStyleName() { return Plugin.need('state'); },
+    set() { return Plugin.need('state'); }
+};
+const Transition = {
+    list: {},
+    register(attrName, fn) { Transition.list[attrName] = fn; },
+    get(attrName) { return Transition.list[attrName]; }
+};
+
+const { parse, objectToCanvasData } = PathConvert;
+const { stintSet: stintSet$1 } = DataHelper, { hasTransparent } = ColorConvert;
+const emptyPaint = {};
+const debug$1 = Debug.get('UIData');
+class UIData extends 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) {
+            stintSet$1(this, '__isTransparentFill', hasTransparent(value));
+            this.__isFills && this.__removePaint('fill', true);
+            this._fill = value;
+        }
+        else if (typeof value === 'object') {
+            this.__setPaint('fill', value);
+        }
+    }
+    setStroke(value) {
+        if (typeof value === 'string' || !value) {
+            stintSet$1(this, '__isTransparentStroke', hasTransparent(value));
+            this.__isStrokes && this.__removePaint('stroke', true);
+            this._stroke = value;
+        }
+        else if (typeof value === 'object') {
+            this.__setPaint('stroke', value);
+        }
+    }
+    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 = undefined;
+    }
+    __setPaint(attrName, value) {
+        this.__setInput(attrName, value);
+        const layout = this.__leaf.__layout;
+        layout.boxChanged || layout.boxChange();
+        if (value instanceof Array && !value.length) {
+            this.__removePaint(attrName);
+        }
+        else {
+            if (attrName === 'fill')
+                this.__isFills = true, this._fill || (this._fill = emptyPaint);
+            else
+                this.__isStrokes = true, this._stroke || (this._stroke = emptyPaint);
+        }
+    }
+    __removePaint(attrName, removeInput) {
+        if (removeInput)
+            this.__removeInput(attrName);
+        PaintImage.recycleImage(attrName, this);
+        if (attrName === 'fill') {
+            stintSet$1(this, '__isAlphaPixelFill', undefined);
+            this._fill = this.__isFills = undefined;
+        }
+        else {
+            stintSet$1(this, '__isAlphaPixelStroke', undefined);
+            this._stroke = this.__isStrokes = undefined;
+        }
+    }
+}
+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 = undefined);
+    }
+    else
+        value = value && value.visible !== false ? [value] : undefined;
+    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);
+        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 = 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) {
+        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 { stintSet } = DataHelper;
+const UIRender = {
+    __updateChange() {
+        const data = this.__;
+        if (data.__useEffect) {
+            const { shadow, fill, stroke } = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
+            stintSet(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !(shadow[0].box && data.__isTransparentFill) && fill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
+            data.__useEffect = !!(shadow || otherEffect);
+        }
+        stintSet(this.__world, 'half', data.__hasHalf);
+        stintSet(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
+        data.__checkSingle();
+        stintSet(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+    },
+    __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, __fillAfterStroke, __isFastShadow } = data;
+            this.__drawRenderPath(canvas);
+            if (data.__useEffect && !__isFastShadow) {
+                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 (__fillAfterStroke)
+                    data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                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 && !__fillAfterStroke)
+                    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 (__fillAfterStroke)
+                    data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                if (__isFastShadow) {
+                    const shadow = data.shadow[0], { scaleX, scaleY } = this.__nowWorld;
+                    canvas.save(), canvas.setWorldShadow(shadow.x * scaleX, shadow.y * scaleY, shadow.blur * scaleX, ColorConvert.string(shadow.color));
+                }
+                if (fill)
+                    data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                if (__isFastShadow)
+                    canvas.restore();
+                if (__drawAfterFill)
+                    this.__drawAfterFill(canvas, options);
+                if (stroke && !__fillAfterStroke)
+                    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.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+            if (this.__.__isCanvas)
+                this.__drawAfterFill(canvas, options);
+            if (stroke && !ignoreStroke)
+                this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
+        }
+    },
+    __drawAfterFill(canvas, options) {
+        if (this.__.__clipAfterFill) {
+            canvas.save();
+            canvas.clipUI(this);
+            this.__drawContent(canvas, options);
+            canvas.restore();
+        }
+        else
+            this.__drawContent(canvas, options);
+    }
+};
+function drawFast(ui, canvas, options) {
+    const { fill, stroke, __drawAfterFill, __fillAfterStroke } = ui.__;
+    ui.__drawRenderPath(canvas);
+    if (__fillAfterStroke)
+        Paint.stroke(stroke, ui, canvas);
+    if (fill)
+        Paint.fill(fill, ui, canvas);
+    if (__drawAfterFill)
+        ui.__drawAfterFill(canvas, options);
+    if (stroke && !__fillAfterStroke)
+        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;
+let UI = UI_1 = class UI extends Leaf {
+    get app() { return this.leafer && this.leafer.app; }
+    get isFrame() { return false; }
+    set scale(value) { MathHelper.assignScale(this, value); }
+    get scale() { return this.__.scale; }
+    get pen() {
+        const { path } = this.__;
+        pen.set(this.path = path || []);
+        if (!path)
+            this.__drawPathByBox(pen);
+        return 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 Plugin.need('find'); }
+    findTag(tag) { return this.find({ tag }); }
+    findOne(_condition, _options) { return Plugin.need('find'); }
+    findId(id) { return this.findOne({ id }); }
+    getPath(curve, pathForRender) {
+        this.__layout.update();
+        let path = pathForRender ? this.__.__pathForRender : this.__.path;
+        if (!path)
+            pen.set(path = []), this.__drawPathByBox(pen);
+        return curve ? PathConvert.toCanvasData(path, true) : path;
+    }
+    getPathString(curve, pathForRender, floatLength) {
+        return 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 ? 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 ? 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 Plugin.need('animate');
+    }
+    killAnimate(_type, _nextStyle) { }
+    export(_filename, _options) {
+        return Plugin.need('export');
+    }
+    syncExport(_filename, _options) {
+        return Plugin.need('export');
+    }
+    clone(data) {
+        const json = DataHelper.clone(this.toJSON());
+        if (data)
+            Object.assign(json, data);
+        return UI_1.one(json);
+    }
+    static one(data, x, y, width, height) {
+        return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
+    }
+    static registerUI() {
+        registerUI()(this);
+    }
+    static registerData(data) {
+        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([
+    dataProcessor(UIData)
+], UI.prototype, "__", void 0);
+__decorate([
+    zoomLayerType()
+], UI.prototype, "zoomLayer", 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([
+    visibleType(true)
+], UI.prototype, "visible", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "locked", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "dim", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "dimskip", void 0);
+__decorate([
+    sortType(0)
+], UI.prototype, "zIndex", void 0);
+__decorate([
+    maskType(false)
+], UI.prototype, "mask", void 0);
+__decorate([
+    eraserType(false)
+], UI.prototype, "eraser", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "x", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "y", void 0);
+__decorate([
+    boundsType(100, true)
+], UI.prototype, "width", void 0);
+__decorate([
+    boundsType(100, true)
+], UI.prototype, "height", void 0);
+__decorate([
+    scaleType(1, true)
+], UI.prototype, "scaleX", void 0);
+__decorate([
+    scaleType(1, true)
+], UI.prototype, "scaleY", void 0);
+__decorate([
+    rotationType(0, true)
+], UI.prototype, "rotation", void 0);
+__decorate([
+    rotationType(0, true)
+], UI.prototype, "skewX", void 0);
+__decorate([
+    rotationType(0, true)
+], UI.prototype, "skewY", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "offsetX", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "offsetY", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "scrollX", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "scrollY", void 0);
+__decorate([
+    autoLayoutType()
+], UI.prototype, "origin", void 0);
+__decorate([
+    autoLayoutType()
+], UI.prototype, "around", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "lazy", void 0);
+__decorate([
+    naturalBoundsType(1)
+], UI.prototype, "pixelRatio", void 0);
+__decorate([
+    pathInputType()
+], UI.prototype, "path", void 0);
+__decorate([
+    pathType()
+], UI.prototype, "windingRule", void 0);
+__decorate([
+    pathType(true)
+], UI.prototype, "closed", void 0);
+__decorate([
+    boundsType(0)
+], UI.prototype, "padding", void 0);
+__decorate([
+    boundsType(false)
+], UI.prototype, "lockRatio", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "widthRange", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "heightRange", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "draggable", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "dragBounds", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "editable", 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(false)
+], UI.prototype, "strokeWidthFixed", 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(0)
+], 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([
+    effectType()
+], UI.prototype, "filter", void 0);
+__decorate([
+    surfaceType()
+], UI.prototype, "placeholderColor", void 0);
+__decorate([
+    dataType(100)
+], UI.prototype, "placeholderDelay", void 0);
+__decorate([
+    dataType({})
+], UI.prototype, "data", void 0);
+__decorate([
+    rewrite(Leaf.prototype.reset)
+], UI.prototype, "reset", null);
+UI = UI_1 = __decorate([
+    useModule(UIBounds),
+    useModule(UIRender),
+    rewriteAble()
+], UI);
+
+let Group = class Group extends 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([
+    dataProcessor(GroupData)
+], Group.prototype, "__", void 0);
+__decorate([
+    boundsType(0)
+], Group.prototype, "width", void 0);
+__decorate([
+    boundsType(0)
+], Group.prototype, "height", void 0);
+Group = __decorate([
+    useModule(Branch),
+    registerUI()
+], Group);
+
+var Leafer_1;
+const debug = Debug.get('Leafer');
+let Leafer = Leafer_1 = class Leafer extends Group {
+    get __tag() { return 'Leafer'; }
+    get isApp() { return false; }
+    get app() { return this.parent || this; }
+    get isLeafer() { return true; }
+    get imageReady() { return this.viewReady && 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)) || 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;
+            DataHelper.assign(config, userConfig);
+        }
+        const canvas = this.canvas = Creator.canvas(config);
+        this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
+        if (this.isApp)
+            this.__setApp();
+        this.__checkAutoLayout(config, parentApp);
+        this.view = canvas.view;
+        if (!parentApp) {
+            this.selector = Creator.selector(this);
+            this.interaction = Creator.interaction(this, canvas, this.selector, config);
+            if (this.interaction) {
+                this.__controllers.unshift(this.interaction);
+                this.hitCanvasManager = Creator.hitCanvasManager();
+            }
+            this.canvasManager = new 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));
+        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(LeaferEvent.RESTART) : this.emitLeafer(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(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]);
+    }
+    forceRender(bounds, sync) {
+        const { renderer } = this;
+        if (renderer) {
+            renderer.addBlock(bounds ? new 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 = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs);
+        canvas.resize(size);
+        this.updateLazyBounds();
+        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.__level = 1;
+    }
+    __checkAutoLayout(config, parentApp) {
+        if (!parentApp) {
+            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') {
+                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 && 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.forceRender();
+    }
+    __onCreated() {
+        this.created = true;
+    }
+    __onReady() {
+        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);
+    }
+    __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) {
+            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(LeaferEvent.VIEW_COMPLETED);
+                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 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 LeaferEvent(type, this));
+    }
+    __listenEvents() {
+        const runId = Run.start('FirstCreate ' + this.innerName);
+        this.once([
+            [LeaferEvent.START, () => Run.end(runId)],
+            [LayoutEvent.START, this.updateLazyBounds, this],
+            [RenderEvent.START, this.__onCreated, this],
+            [RenderEvent.END, this.__onViewReady, this]
+        ]);
+        this.__eventIds.push(this.on_([
+            [WatchEvent.DATA, this.__onWatchData, this],
+            [LayoutEvent.END, this.__onLayoutEnd, this],
+            [RenderEvent.NEXT, this.__onNextRender, this]
+        ]));
+    }
+    __removeListenEvents() {
+        this.off_(this.__eventIds);
+    }
+    destroy(sync) {
+        const doDestory = () => {
+            if (!this.destroyed) {
+                Leafer_1.list.remove(this);
+                try {
+                    this.stop();
+                    this.emitEvent(new LeaferEvent(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(() => { ImageManager.clearRecycled(); }, 100);
+                }
+                catch (e) {
+                    debug.error(e);
+                }
+            }
+        };
+        sync ? doDestory() : setTimeout(doDestory);
+    }
+};
+Leafer.list = new LeafList();
+__decorate([
+    dataProcessor(LeaferData)
+], Leafer.prototype, "__", void 0);
+__decorate([
+    boundsType()
+], Leafer.prototype, "pixelRatio", void 0);
+Leafer = Leafer_1 = __decorate([
+    registerUI()
+], Leafer);
+
+let Rect = class Rect extends UI {
+    get __tag() { return 'Rect'; }
+    constructor(data) {
+        super(data);
+    }
+};
+__decorate([
+    dataProcessor(RectData)
+], Rect.prototype, "__", void 0);
+Rect = __decorate([
+    useModule(RectRender),
+    rewriteAble(),
+    registerUI()
+], Rect);
+
+const { copy, add, includes: includes$1 } = BoundsHelper;
+const rect = Rect.prototype, group = Group.prototype;
+const childrenRenderBounds = {};
+let Box = class Box extends 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);
+            if (isOverflow && this.__.overflow !== 'hide')
+                add(renderBounds, childrenRenderBounds);
+        }
+        else
+            this.__updateRectRenderBounds();
+        DataHelper.stintSet(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([
+    dataProcessor(BoxData)
+], Box.prototype, "__", void 0);
+__decorate([
+    boundsType(100)
+], Box.prototype, "width", void 0);
+__decorate([
+    boundsType(100)
+], Box.prototype, "height", void 0);
+__decorate([
+    dataType(false)
+], Box.prototype, "resizeChildren", 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.__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'; }
+    get isFrame() { return true; }
+    constructor(data) {
+        super(data);
+    }
+};
+__decorate([
+    dataProcessor(FrameData)
+], Frame.prototype, "__", void 0);
+__decorate([
+    surfaceType('#FFFFFF')
+], Frame.prototype, "fill", 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 } = PathBounds;
+let Line = class Line extends UI {
+    get __tag() { return 'Line'; }
+    get toPoint() {
+        const { width, rotation } = this.__;
+        const to = 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([
+    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);
+__decorate([
+    pathType(false)
+], Line.prototype, "closed", 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() { }
+};
+__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);
+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() { const { image } = this; return image && image.ready; }
+    get image() { const { fill } = this.__; return fill instanceof Array && fill[0].image; }
+    constructor(data) {
+        super(data);
+    }
+};
+__decorate([
+    dataProcessor(ImageData)
+], Image.prototype, "__", void 0);
+__decorate([
+    boundsType('')
+], Image.prototype, "url", void 0);
+Image = __decorate([
+    registerUI()
+], Image);
+const MyImage = Image;
+
+let Canvas = class Canvas extends Rect {
+    get __tag() { return 'Canvas'; }
+    get context() { return this.canvas.context; }
+    get ready() { return !this.url; }
+    constructor(data) {
+        super(data);
+        this.canvas = Creator.canvas(this.__);
+        if (data && data.url)
+            this.drawImage(data.url);
+    }
+    drawImage(url) {
+        new LeaferImage({ url }).load((image) => {
+            this.context.drawImage(image.view, 0, 0);
+            this.url = undefined;
+            this.paint();
+            this.emitEvent(new ImageEvent(ImageEvent.LOADED, { image }));
+        });
+    }
+    draw(ui, offset, scale, rotation) {
+        const matrix = new Matrix(ui.worldTransform).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: 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 = null;
+        }
+        super.destroy();
+    }
+};
+__decorate([
+    dataProcessor(CanvasData)
+], Canvas.prototype, "__", void 0);
+__decorate([
+    resizeType(100)
+], Canvas.prototype, "width", void 0);
+__decorate([
+    resizeType(100)
+], Canvas.prototype, "height", void 0);
+__decorate([
+    resizeType(1)
+], Canvas.prototype, "pixelRatio", void 0);
+__decorate([
+    resizeType(true)
+], Canvas.prototype, "smooth", void 0);
+__decorate([
+    dataType(false)
+], Canvas.prototype, "safeResize", void 0);
+__decorate([
+    resizeType()
+], Canvas.prototype, "contextSettings", 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.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 ? 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;
+        DataHelper.stintSet(this, 'isOverflow', !includes(b, contentBounds));
+        if (this.isOverflow)
+            setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
+        else
+            data.__textBoxBounds = b;
+    }
+    __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([
+    dataProcessor(TextData)
+], Text.prototype, "__", void 0);
+__decorate([
+    boundsType(0)
+], Text.prototype, "width", void 0);
+__decorate([
+    boundsType(0)
+], Text.prototype, "height", void 0);
+__decorate([
+    surfaceType()
+], Text.prototype, "boxStyle", void 0);
+__decorate([
+    dataType(false)
+], Text.prototype, "resizeFontSize", 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('')
+], Text.prototype, "placeholder", void 0);
+__decorate([
+    boundsType('caption')
+], 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: 1.5 })
+], Text.prototype, "lineHeight", void 0);
+__decorate([
+    boundsType(0)
+], Text.prototype, "paraIndent", void 0);
+__decorate([
+    boundsType(0)
+], Text.prototype, "paraSpacing", void 0);
+__decorate([
+    boundsType('x')
+], Text.prototype, "writingMode", void 0);
+__decorate([
+    boundsType('left')
+], Text.prototype, "textAlign", void 0);
+__decorate([
+    boundsType('top')
+], Text.prototype, "verticalAlign", void 0);
+__decorate([
+    boundsType(true)
+], Text.prototype, "autoSizeAlign", void 0);
+__decorate([
+    boundsType('normal')
+], Text.prototype, "textWrap", void 0);
+__decorate([
+    boundsType('show')
+], Text.prototype, "textOverflow", void 0);
+__decorate([
+    surfaceType(false)
+], Text.prototype, "textEditing", void 0);
+Text = __decorate([
+    registerUI()
+], Text);
+
+let Path = class Path extends UI {
+    get __tag() { return 'Path'; }
+    constructor(data) {
+        super(data);
+    }
+};
+__decorate([
+    dataProcessor(PathData)
+], Path.prototype, "__", 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() { 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([
+    dataProcessor(PenData)
+], Pen.prototype, "__", void 0);
+__decorate([
+    penPathType()
+], Pen.prototype, "path", void 0);
+Pen = __decorate([
+    useModule(PathCreator, ['set', 'path', 'paint']),
+    registerUI()
+], Pen);
+function penPathType() {
+    return (target, key) => {
+        defineKey(target, key, {
+            get() { return this.__path; }
+        });
+    };
+}
+
+export { Box, BoxData, Canvas, CanvasData, ColorConvert, Effect, Ellipse, EllipseData, Export, Filter, Frame, FrameData, Group, GroupData, Image, ImageData, Leafer, LeaferData, Line, LineData, MyImage, Paint, PaintGradient, PaintImage, Path, PathArrow, PathData, Pen, PenData, Polygon, PolygonData, Rect, RectData, RectRender, Star, StarData, State, Text, TextConvert, TextData, Transition, UI, UIBounds, UIData, UIRender, UnitConvert, effectType, resizeType, zoomLayerType };