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

package/dist/core.cjs

@@ -40,7 +40,7 @@ function design(leafer) {
     if (leafer.isApp)
         return;
     leafer.__eventIds.push(leafer.on_(core.MoveEvent.BEFORE_MOVE, (e) => { core.LeafHelper.moveWorld(leafer.zoomLayer, e.moveX, e.moveY); }), leafer.on_(core.ZoomEvent.BEFORE_ZOOM, (e) => {
-        const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.config.zoom;
+        const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.app.config.zoom;
         let { scale } = e;
         if (scale * Math.abs(scaleX) < min)
             scale = min / scaleX;
@@ -87,6 +87,9 @@ const Export = {};
 const emptyPaint = {};
 const debug$1 = core.Debug.get('UIData');
 class UIData extends core.LeafData {
+    get __autoWidth() { return !this._width; }
+    get __autoHeight() { return !this._height; }
+    get __autoBounds() { return !this._width && !this._height; }
     setVisible(value) {
         if (this.__leaf.leafer)
             this.__leaf.leafer.watcher.hasVisible = true;
@@ -263,6 +266,9 @@ class TextData extends UIData {
 class ImageData extends RectData {
 }
 
+class CanvasData extends RectData {
+}
+
 function effectType(defaultValue) {
     return (target, key) => {
         core.defineLeafAttr(target, key, defaultValue, {
@@ -473,6 +479,7 @@ const RectRender = {
 
 var UI_1;
 exports.UI = UI_1 = class UI extends core.Leaf {
+    get app() { return this.leafer && this.leafer.app; }
     set scale(value) {
         if (typeof value === 'number') {
             this.scaleX = this.scaleY = value;
@@ -486,22 +493,25 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         const { scaleX, scaleY } = this;
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
     }
+    constructor(data) {
+        super(data);
+    }
     reset(_data) { }
     set(data) {
         Object.assign(this, data);
     }
-    get(options) {
-        return this.__.__getInputData(options);
+    get() {
+        return this.__.__getInputData();
     }
-    getProxyData() { return undefined; }
-    find(condition) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this) : [];
+    createProxyData() { return undefined; }
+    find(condition, options) {
+        return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
     }
-    findOne(condition) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, true) : null;
+    findOne(condition, options) {
+        return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
     }
     getPath(curve) {
-        const path = this.__.path;
+        const { path } = this.__;
         if (!path)
             return [];
         return curve ? core.PathConvert.toCanvasData(path, true) : path;
@@ -533,6 +543,15 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         this.__drawPathByData(canvas, this.__.path);
     }
     __drawPathByData(_drawer, _data) { }
+    __drawPathByBox(drawer) {
+        const { x, y, width, height } = this.__layout.boxBounds;
+        if (this.__.cornerRadius) {
+            drawer.roundRect(x, y, width, height, this.__.cornerRadius);
+        }
+        else {
+            drawer.rect(x, y, width, height);
+        }
+    }
     export(filename, options) {
         return Export.export(this, filename, options);
     }
@@ -574,12 +593,12 @@ __decorate([
 __decorate([
     core.eraserType(false)
 ], exports.UI.prototype, "isEraser", void 0);
+__decorate([
+    core.dataType(false)
+], exports.UI.prototype, "locked", void 0);
 __decorate([
     core.sortType(0)
 ], exports.UI.prototype, "zIndex", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "locked", void 0);
 __decorate([
     core.positionType(0)
 ], exports.UI.prototype, "x", void 0);
@@ -608,11 +627,17 @@ __decorate([
     core.rotationType(0)
 ], exports.UI.prototype, "skewY", void 0);
 __decorate([
-    core.positionType()
+    core.autoLayoutType()
 ], exports.UI.prototype, "around", void 0);
 __decorate([
     core.dataType(false)
 ], exports.UI.prototype, "draggable", void 0);
+__decorate([
+    core.dataType(false)
+], exports.UI.prototype, "editable", void 0);
+__decorate([
+    core.dataType('size')
+], exports.UI.prototype, "editSize", void 0);
 __decorate([
     core.hitType(true)
 ], exports.UI.prototype, "hittable", void 0);
@@ -665,7 +690,7 @@ __decorate([
     core.strokeType(10)
 ], exports.UI.prototype, "miterLimit", void 0);
 __decorate([
-    core.pathType()
+    core.pathType(0)
 ], exports.UI.prototype, "cornerRadius", void 0);
 __decorate([
     core.pathType()
@@ -698,9 +723,9 @@ exports.UI = UI_1 = __decorate([
     core.rewriteAble()
 ], exports.UI);
 
+const matrix = core.MatrixHelper.get();
 exports.Group = class Group extends exports.UI {
     get __tag() { return 'Group'; }
-    get resizeable() { return false; }
     set mask(child) {
         if (this.__hasMask)
             this.__removeMask();
@@ -748,6 +773,14 @@ exports.Group = class Group extends exports.UI {
         data.children = this.children.map(child => child.toJSON());
         return data;
     }
+    __scaleResize(scaleX, scaleY) {
+        const { children } = this;
+        for (let i = 0; i < children.length; i++) {
+            matrix.a = scaleX;
+            matrix.d = scaleY;
+            children[i].transform(matrix, true);
+        }
+    }
     addAt(child, index) {
         this.add(child, index);
     }
@@ -775,21 +808,17 @@ exports.Rect = class Rect extends exports.UI {
     constructor(data) {
         super(data);
     }
-    __drawPathByData(drawer, _data) {
-        const { width, height, cornerRadius } = this.__;
-        if (cornerRadius) {
-            drawer.roundRect(0, 0, width, height, cornerRadius);
-        }
-        else {
-            drawer.rect(0, 0, width, height);
-        }
-    }
+    __drawPathByData(_drawer, _data) { }
 };
 __decorate([
     core.dataProcessor(RectData)
 ], exports.Rect.prototype, "__", void 0);
+__decorate([
+    core.rewrite(exports.UI.prototype.__drawPathByBox)
+], exports.Rect.prototype, "__drawPathByData", null);
 exports.Rect = __decorate([
     core.useModule(RectRender),
+    core.rewriteAble(),
     core.registerUI()
 ], exports.Rect);
 
@@ -799,12 +828,20 @@ const bounds = {};
 const { copy, add } = core.BoundsHelper;
 exports.Box = class Box extends exports.Group {
     get __tag() { return 'Box'; }
-    get resizeable() { return true; }
     constructor(data) {
         super(data);
         this.isBranchLeaf = true;
         this.__layout.renderChanged || this.__layout.renderChange();
     }
+    __scaleResize(scaleX, scaleY) {
+        if (this.__.__autoBounds && this.children.length) {
+            super.__scaleResize(scaleX, scaleY);
+        }
+        else {
+            this.width *= scaleX;
+            this.height *= scaleY;
+        }
+    }
     __updateStrokeSpread() { return 0; }
     __updateRectRenderSpread() { return 0; }
     __updateRenderSpread() {
@@ -814,7 +851,15 @@ exports.Box = class Box extends exports.Group {
             width = this.__.__drawAfterFill ? 0 : 1;
         return width;
     }
-    __updateBoxBounds() { }
+    __updateRectBoxBounds() { }
+    __updateBoxBounds() {
+        if (this.__.__autoBounds && this.children.length) {
+            super.__updateBoxBounds();
+        }
+        else {
+            this.__updateRectBoxBounds();
+        }
+    }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
         this.__updateRectRenderBounds();
@@ -866,7 +911,7 @@ __decorate([
 ], exports.Box.prototype, "__updateRectRenderSpread", null);
 __decorate([
     core.rewrite(rect.__updateBoxBounds)
-], exports.Box.prototype, "__updateBoxBounds", null);
+], exports.Box.prototype, "__updateRectBoxBounds", null);
 __decorate([
     core.rewrite(rect.__updateStrokeBounds)
 ], exports.Box.prototype, "__updateStrokeBounds", null);
@@ -894,6 +939,7 @@ exports.Frame = class Frame extends exports.Box {
     get __tag() { return 'Frame'; }
     constructor(data) {
         super(data);
+        this.isFrame = true;
         if (!this.__.fill)
             this.__.fill = '#FFFFFF';
     }
@@ -934,7 +980,7 @@ exports.Ellipse = class Ellipse extends exports.UI {
                 ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
             }
             if (core.Platform.ellipseToCurve)
-                this.__.path = core.PathConvert.toCanvasData(path, true);
+                this.__.path = this.getPath(true);
         }
         else {
             if (startAngle || endAngle) {
@@ -964,47 +1010,118 @@ exports.Ellipse = __decorate([
     core.registerUI()
 ], exports.Ellipse);
 
-const { sin: sin$1, cos: cos$1, PI: PI$1 } = Math;
-const { moveTo: moveTo$2, lineTo: lineTo$2, closePath: closePath$1, drawPoints: drawPoints$1 } = core.PathCommandDataHelper;
-const { toBounds: toBounds$2 } = core.PathBounds;
-exports.Polygon = class Polygon extends exports.UI {
-    get __tag() { return 'Polygon'; }
-    get resizeable() { return !this.points; }
+const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = core.PathCommandDataHelper;
+const { rotate, getAngle, getDistance, defaultPoint } = core.PointHelper;
+const { toBounds: toBounds$1 } = core.PathBounds;
+exports.Line = class Line extends exports.UI {
+    get __tag() { return 'Line'; }
+    get toPoint() {
+        const { width, rotation } = this.__;
+        const to = { x: 0, y: 0 };
+        if (width)
+            to.x = width;
+        if (rotation)
+            rotate(to, rotation);
+        return to;
+    }
+    set toPoint(value) {
+        this.width = getDistance(defaultPoint, value);
+        this.rotation = getAngle(defaultPoint, value);
+        if (this.height)
+            this.height = 0;
+    }
     constructor(data) {
         super(data);
     }
     __updatePath() {
         const path = this.__.path = [];
         if (this.__.points) {
-            drawPoints$1(path, this.__.points, false, true);
+            drawPoints$1(path, this.__.points, false);
         }
         else {
-            const { width, height, sides } = this.__;
-            const rx = width / 2, ry = height / 2;
-            moveTo$2(path, rx, 0);
-            for (let i = 1; i < sides; i++) {
-                lineTo$2(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
-            }
+            moveTo$2(path, 0, 0);
+            lineTo$2(path, this.width, 0);
         }
-        closePath$1(path);
     }
     __updateRenderPath() {
         if (this.__.points && this.__.curve) {
-            drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, true);
+            drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line');
         }
         else {
             super.__updateRenderPath();
         }
     }
     __updateBoxBounds() {
-        if (this.__.points) {
-            toBounds$2(this.__.__pathForRender, this.__layout.boxBounds);
-            this.__updateNaturalSize();
+        if (this.points) {
+            toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
         }
         else {
             super.__updateBoxBounds();
         }
     }
+    __scaleResize(scaleX, scaleY) {
+        if (this.points) {
+            core.PathScaler.scalePoints(this.__.points, scaleX, scaleY);
+            this.points = this.__.points;
+        }
+        else {
+            if (this.__tag === 'Line') {
+                const point = this.toPoint;
+                point.x *= scaleX;
+                point.y *= scaleY;
+                this.toPoint = point;
+            }
+            else {
+                super.__scaleResize(scaleX, scaleY);
+            }
+        }
+    }
+};
+__decorate([
+    core.dataProcessor(LineData)
+], exports.Line.prototype, "__", void 0);
+__decorate([
+    core.affectStrokeBoundsType('center')
+], exports.Line.prototype, "strokeAlign", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.Line.prototype, "height", void 0);
+__decorate([
+    core.pathType()
+], exports.Line.prototype, "points", void 0);
+__decorate([
+    core.pathType(0)
+], exports.Line.prototype, "curve", void 0);
+exports.Line = __decorate([
+    core.registerUI()
+], exports.Line);
+
+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() { }
+    __scaleResize(_scaleX, _scaleY) { }
 };
 __decorate([
     core.dataProcessor(PolygonData)
@@ -1018,12 +1135,22 @@ __decorate([
 __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);
+__decorate([
+    core.rewrite(line.__scaleResize)
+], exports.Polygon.prototype, "__scaleResize", null);
 exports.Polygon = __decorate([
+    core.rewriteAble(),
     core.registerUI()
 ], exports.Polygon);
 
 const { sin, cos, PI } = Math;
-const { moveTo: moveTo$1, lineTo: lineTo$1, closePath } = core.PathCommandDataHelper;
+const { moveTo, lineTo, closePath } = core.PathCommandDataHelper;
 exports.Star = class Star extends exports.UI {
     get __tag() { return 'Star'; }
     constructor(data) {
@@ -1033,9 +1160,9 @@ exports.Star = class Star extends exports.UI {
         const { width, height, corners, innerRadius } = this.__;
         const rx = width / 2, ry = height / 2;
         const path = this.__.path = [];
-        moveTo$1(path, rx, 0);
+        moveTo(path, rx, 0);
         for (let i = 1; i < corners * 2; i++) {
-            lineTo$1(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / corners));
+            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);
     }
@@ -1053,77 +1180,6 @@ exports.Star = __decorate([
     core.registerUI()
 ], exports.Star);
 
-const { moveTo, lineTo, drawPoints } = core.PathCommandDataHelper;
-const { rotate, getAngle, getDistance, defaultPoint } = core.PointHelper;
-const { toBounds: toBounds$1 } = core.PathBounds;
-exports.Line = class Line extends exports.UI {
-    get __tag() { return 'Line'; }
-    get resizeable() { return !this.points; }
-    get toPoint() {
-        const { width, rotation } = this.__;
-        const to = { x: 0, y: 0 };
-        if (width)
-            to.x = width;
-        if (rotation)
-            rotate(to, rotation);
-        return to;
-    }
-    set toPoint(value) {
-        this.width = getDistance(defaultPoint, value);
-        this.rotation = getAngle(defaultPoint, value);
-        if (this.height)
-            this.height = 0;
-    }
-    constructor(data) {
-        super(data);
-    }
-    __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints(path, this.__.points, false);
-        }
-        else {
-            moveTo(path, 0, 0);
-            lineTo(path, this.width, 0);
-        }
-    }
-    __updateRenderPath() {
-        if (this.__.points && this.__.curve) {
-            drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, false);
-        }
-        else {
-            super.__updateRenderPath();
-        }
-    }
-    __updateBoxBounds() {
-        if (this.points) {
-            toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
-            this.__updateNaturalSize();
-        }
-        else {
-            super.__updateBoxBounds();
-        }
-    }
-};
-__decorate([
-    core.dataProcessor(LineData)
-], exports.Line.prototype, "__", void 0);
-__decorate([
-    core.affectStrokeBoundsType('center')
-], exports.Line.prototype, "strokeAlign", void 0);
-__decorate([
-    core.boundsType(0)
-], exports.Line.prototype, "height", void 0);
-__decorate([
-    core.pathType()
-], exports.Line.prototype, "points", void 0);
-__decorate([
-    core.pathType(0)
-], exports.Line.prototype, "curve", void 0);
-exports.Line = __decorate([
-    core.registerUI()
-], exports.Line);
-
 exports.Image = class Image extends exports.Rect {
     get __tag() { return 'Image'; }
     get ready() { return this.image ? this.image.ready : false; }
@@ -1174,7 +1230,7 @@ exports.Canvas = class Canvas extends exports.Rect {
         this.__.__drawAfterFill = true;
     }
     draw(ui, offset, scale, rotation) {
-        ui.__layout.checkUpdate();
+        ui.__layout.update();
         const matrix = new core.Matrix(ui.__world);
         matrix.invert();
         const m = new core.Matrix();
@@ -1184,7 +1240,7 @@ exports.Canvas = class Canvas extends exports.Rect {
             typeof scale === 'number' ? m.scale(scale) : m.scale(scale.x, scale.y);
         if (rotation)
             m.rotate(rotation);
-        matrix.preMultiply(m);
+        matrix.multiplyParent(m);
         ui.__render(this.canvas, { matrix });
         this.paint();
     }
@@ -1244,11 +1300,11 @@ exports.Canvas = __decorate([
     core.registerUI()
 ], exports.Canvas);
 
-const { copyAndSpread, includes, spread, setByList } = core.BoundsHelper;
+const { copyAndSpread, includes, spread, setList } = core.BoundsHelper;
 exports.Text = class Text extends exports.UI {
     get __tag() { return 'Text'; }
     get textDrawData() {
-        this.__layout.checkUpdate();
+        this.__layout.update();
         return this.__.__textDrawData;
     }
     constructor(data) {
@@ -1278,34 +1334,46 @@ exports.Text = class Text extends exports.UI {
     __updateBoxBounds() {
         const data = this.__;
         const layout = this.__layout;
-        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow } = data;
-        const width = data.__getInput('width');
-        const height = data.__getInput('height');
+        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
+        const autoWidth = data.__autoWidth;
+        const autoHeight = data.__autoHeight;
         data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
+        data.__padding = padding ? 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' && (width || height);
+        data.__clipText = textOverflow !== 'show' && !data.__autoBounds;
         this.__updateTextDrawData();
         const { bounds } = data.__textDrawData;
         const b = layout.boxBounds;
         if (data.__lineHeight < fontSize)
             spread(bounds, fontSize / 2);
-        if (width && height) {
-            super.__updateBoxBounds();
+        if (autoWidth || autoHeight) {
+            b.x = autoWidth ? bounds.x : 0;
+            b.y = autoHeight ? bounds.y : 0;
+            b.width = autoWidth ? bounds.width : data.width;
+            b.height = autoHeight ? bounds.height : data.height;
+            if (padding) {
+                const [top, right, bottom, left] = data.__padding;
+                if (autoWidth) {
+                    b.x -= left;
+                    b.width += (right + left);
+                }
+                if (autoHeight) {
+                    b.y -= top;
+                    b.height += (bottom + top);
+                }
+            }
+            this.__updateNaturalSize();
         }
         else {
-            b.x = width ? 0 : bounds.x;
-            b.y = height ? 0 : bounds.y;
-            b.width = width ? width : bounds.width;
-            b.height = height ? height : bounds.height;
-            this.__updateNaturalSize();
+            super.__updateBoxBounds();
         }
         const contentBounds = includes(b, bounds) ? b : bounds;
         if (contentBounds !== layout.contentBounds) {
             layout.contentBounds = contentBounds;
             layout.renderChanged = true;
-            setByList(data.__textBoxBounds = {}, [b, bounds]);
+            setList(data.__textBoxBounds = {}, [b, bounds]);
         }
         else {
             data.__textBoxBounds = contentBounds;
@@ -1333,6 +1401,9 @@ __decorate([
 __decorate([
     core.boundsType(0)
 ], exports.Text.prototype, "padding", void 0);
+__decorate([
+    core.surfaceType('#000000')
+], exports.Text.prototype, "fill", void 0);
 __decorate([
     core.affectStrokeBoundsType('outside')
 ], exports.Text.prototype, "strokeAlign", void 0);
@@ -1391,13 +1462,15 @@ exports.Text = __decorate([
 const { toBounds } = core.PathBounds;
 exports.Path = class Path extends exports.UI {
     get __tag() { return 'Path'; }
-    get resizeable() { return false; }
     constructor(data) {
         super(data);
     }
+    __scaleResize(scaleX, scaleY) {
+        core.PathScaler.scale(this.__.path, scaleX, scaleY);
+        this.path = this.__.path;
+    }
     __updateBoxBounds() {
         toBounds(this.__.path, this.__layout.boxBounds);
-        this.__updateNaturalSize();
     }
 };
 __decorate([
@@ -1466,6 +1539,8 @@ exports.Leafer = class Leafer extends exports.Group {
     get __tag() { return 'Leafer'; }
     get isApp() { return false; }
     get app() { return this.parent || this; }
+    get imageReady() { return this.viewReady && core.ImageManager.isComplete; }
+    get layoutLocked() { return !this.layouter.running; }
     get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
     constructor(userConfig, data) {
         super(data);
@@ -1558,13 +1633,18 @@ exports.Leafer = class Leafer extends exports.Group {
             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]);
     }
-    forceLayout() {
-        this.__layout.checkUpdate(true);
-    }
     forceFullRender() {
         this.renderer.addBlock(this.canvas.bounds);
         if (this.viewReady)
@@ -1662,23 +1742,26 @@ exports.Leafer = class Leafer extends exports.Group {
         this.emitLeafer(core.LeaferEvent.VIEW_READY);
         core.WaitHelper.run(this.__viewReadyWait);
     }
-    __onRenderEnd(_e) {
-        if (!this.viewReady)
-            this.__onViewReady();
-        const completed = this.__checkViewCompleted();
-        if (completed)
-            this.__onViewCompleted();
-        this.viewCompleted = completed;
-        core.WaitHelper.run(this.__nextRenderWait);
-    }
-    __checkViewCompleted() {
-        return this.viewReady && !this.watcher.changed && core.ImageManager.isComplete;
-    }
-    __onViewCompleted() {
-        if (!this.viewCompleted) {
-            this.emitLeafer(core.LeaferEvent.VIEW_COMPLETED);
-            core.WaitHelper.run(this.__viewCompletedWait);
-        }
+    __onAnimateFrame() {
+        if (this.viewReady) {
+            if (this.__nextRenderWait.length)
+                core.WaitHelper.run(this.__nextRenderWait);
+            const { imageReady } = this;
+            if (imageReady && !this.viewCompleted)
+                this.__checkViewCompleted();
+            if (!imageReady)
+                this.viewCompleted = false;
+        }
+    }
+    __checkViewCompleted(emit = true) {
+        this.nextRender(() => {
+            if (this.imageReady) {
+                if (emit)
+                    this.emitLeafer(core.LeaferEvent.VIEW_COMPLETED);
+                core.WaitHelper.run(this.__viewCompletedWait);
+                this.viewCompleted = true;
+            }
+        });
     }
     __onWatchData() {
         if (this.watcher.childrenChanged && this.interaction) {
@@ -1692,25 +1775,20 @@ exports.Leafer = class Leafer extends exports.Group {
         this.viewReady ? item() : this.__viewReadyWait.push(item);
     }
     waitViewCompleted(item) {
+        this.__viewCompletedWait.push(item);
         if (this.viewCompleted) {
-            item();
+            this.__checkViewCompleted(false);
         }
         else {
-            this.__viewCompletedWait.push(item);
             if (!this.running)
                 this.start();
         }
     }
     nextRender(item) {
-        if (this.watcher && !this.watcher.changed) {
-            item();
-        }
-        else {
-            this.__nextRenderWait.push(item);
-        }
+        this.__nextRenderWait.push(item);
     }
     __checkUpdateLayout() {
-        this.__layout.checkUpdate();
+        this.__layout.update();
     }
     emitLeafer(type) {
         this.emitEvent(new core.LeaferEvent(type, this));
@@ -1720,7 +1798,8 @@ exports.Leafer = class Leafer extends exports.Group {
         this.once(core.LeaferEvent.START, () => core.Run.end(runId));
         this.once(core.LayoutEvent.END, () => this.__onReady());
         this.once(core.RenderEvent.START, () => this.__onCreated());
-        this.__eventIds.push(this.on_(core.WatchEvent.DATA, this.__onWatchData, this), this.on_(core.RenderEvent.END, this.__onRenderEnd, this), this.on_(core.LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this));
+        this.once(core.RenderEvent.END, () => this.__onViewReady());
+        this.__eventIds.push(this.on_(core.WatchEvent.DATA, this.__onWatchData, this), this.on_(core.AnimateEvent.FRAME, this.__onAnimateFrame, this), this.on_(core.LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this));
     }
     __removeListenEvents() {
         this.off_(this.__eventIds);
@@ -1770,6 +1849,22 @@ exports.Leafer = __decorate([
 exports.App = class App extends exports.Leafer {
     get __tag() { return 'App'; }
     get isApp() { return true; }
+    constructor(userConfig, data) {
+        super(userConfig, data);
+        if (userConfig) {
+            const { ground, tree, sky, editor } = userConfig;
+            if (ground)
+                this.ground = this.addLeafer(ground);
+            if (tree || editor)
+                this.tree = this.addLeafer(tree);
+            if (sky || editor)
+                this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
+            if (editor) {
+                this.editor = core.Creator.editor(editor);
+                this.sky.add(this.editor);
+            }
+        }
+    }
     __setApp() {
         const { canvas } = this;
         const { realCanvas, view } = this.config;
@@ -1786,12 +1881,20 @@ exports.App = class App extends exports.Leafer {
     }
     start() {
         super.start();
-        this.children.forEach(leafer => { leafer.start(); });
+        this.children.forEach(leafer => leafer.start());
     }
     stop() {
-        this.children.forEach(leafer => { leafer.stop(); });
+        this.children.forEach(leafer => leafer.stop());
         super.stop();
     }
+    unlockLayout() {
+        super.unlockLayout();
+        this.children.forEach(leafer => leafer.unlockLayout());
+    }
+    lockLayout() {
+        super.lockLayout();
+        this.children.forEach(leafer => leafer.lockLayout());
+    }
     addLeafer(merge) {
         const leafer = new exports.Leafer(merge);
         this.add(leafer);
@@ -1810,7 +1913,7 @@ exports.App = class App extends exports.Leafer {
     }
     __onPropertyChange() {
         if (core.Debug.showHitView)
-            this.children.forEach(leafer => { leafer.forceUpdate('surface'); });
+            this.children.forEach(leafer => leafer.forceUpdate('surface'));
     }
     __onCreated() {
         this.created = this.children.every(child => child.created);
@@ -1823,23 +1926,20 @@ exports.App = class App extends exports.Leafer {
         if (this.children.every(child => child.viewReady))
             super.__onViewReady();
     }
-    __checkViewCompleted() {
-        return this.children.every(item => item.viewCompleted);
-    }
     __onChildRenderEnd(e) {
         this.renderer.addBlock(e.renderBounds);
         if (this.viewReady)
             this.renderer.update();
     }
     __render(canvas, _options) {
-        this.children.forEach(leafer => { canvas.copyWorld(leafer.canvas); });
+        this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
     }
     __onResize(event) {
-        this.children.forEach(leafer => { leafer.resize(event); });
+        this.children.forEach(leafer => leafer.resize(event));
         super.__onResize(event);
     }
     __checkUpdateLayout() {
-        this.children.forEach(leafer => { leafer.__layout.checkUpdate(); });
+        this.children.forEach(leafer => leafer.__layout.update());
     }
     __getChildConfig(userConfig) {
         let config = Object.assign({}, this.config);
@@ -1855,7 +1955,7 @@ exports.App = class App extends exports.Leafer {
     __listenChildEvents(leafer) {
         leafer.once(core.LayoutEvent.END, () => this.__onReady());
         leafer.once(core.RenderEvent.START, () => this.__onCreated());
-        leafer.once(core.RenderEvent.END, (e) => this.__onRenderEnd(e));
+        leafer.once(core.RenderEvent.END, () => this.__onViewReady());
         if (this.realCanvas)
             this.__eventIds.push(leafer.on_(core.RenderEvent.END, this.__onChildRenderEnd, this));
     }
@@ -1865,16 +1965,32 @@ exports.App = __decorate([
 ], exports.App);
 
 exports.Animate = Animate;
+exports.BoxData = BoxData;
+exports.CanvasData = CanvasData;
 exports.ColorConvert = ColorConvert;
 exports.Effect = Effect;
+exports.EllipseData = EllipseData;
 exports.Export = Export;
+exports.FrameData = FrameData;
+exports.GroupData = GroupData;
+exports.ImageData = ImageData;
+exports.LeaferData = LeaferData;
 exports.LeaferTypeCreator = LeaferTypeCreator;
+exports.LineData = LineData;
 exports.Paint = Paint;
+exports.PathData = PathData;
+exports.PenData = PenData;
+exports.PolygonData = PolygonData;
+exports.RectData = RectData;
 exports.RectRender = RectRender;
+exports.StarData = StarData;
 exports.TextConvert = TextConvert;
+exports.TextData = TextData;
 exports.UIBounds = UIBounds;
+exports.UIData = UIData;
 exports.UIHit = UIHit;
 exports.UIRender = UIRender;
+exports.UnitConvert = UnitConvert;
 exports.effectType = effectType;
 exports.resizeType = resizeType;
 Object.keys(core).forEach(function (k) {