leafer-draw 1.0.3 → 1.0.5

package/dist/web.module.js

@@ -4483,15 +4483,16 @@ class LeafLayout {
     }
     getLayoutBounds(type, relative = 'world', unscale) {
         const { leaf } = this;
-        let point, matrix, bounds = this.getInnerBounds(type);
+        let point, matrix, layoutBounds, bounds = this.getInnerBounds(type);
         switch (relative) {
             case 'world':
                 point = leaf.getWorldPoint(bounds);
                 matrix = leaf.__world;
                 break;
             case 'local':
+                const { scaleX, scaleY, rotation, skewX, skewY } = leaf.__;
+                layoutBounds = { scaleX, scaleY, rotation, skewX, skewY };
                 point = leaf.getLocalPointByInner(bounds);
-                matrix = leaf.__localMatrix;
                 break;
             case 'inner':
                 point = bounds;
@@ -4503,7 +4504,8 @@ class LeafLayout {
                 point = leaf.getWorldPoint(bounds, relative);
                 matrix = getRelativeWorld$1(leaf, relative, true);
         }
-        const layoutBounds = MatrixHelper.getLayout(matrix);
+        if (!layoutBounds)
+            layoutBounds = MatrixHelper.getLayout(matrix);
         copy$5(layoutBounds, bounds);
         PointHelper.copy(layoutBounds, point);
         if (unscale) {
@@ -4753,6 +4755,7 @@ class RenderEvent extends Event {
     }
 }
 RenderEvent.REQUEST = 'render.request';
+RenderEvent.CHILD_START = 'render.child_start';
 RenderEvent.START = 'render.start';
 RenderEvent.BEFORE = 'render.before';
 RenderEvent.RENDER = 'render';
@@ -4928,7 +4931,7 @@ const { isFinite } = Number;
 const debug$6 = Debug.get('setAttr');
 const LeafDataProxy = {
     __setAttr(name, newValue, checkFiniteNumber) {
-        if (this.leafer && this.leafer.created) {
+        if (this.leaferIsCreated) {
             const oldValue = this.__.__getInput(name);
             if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
                 debug$6.warn(this.innerName, name, newValue);
@@ -5000,7 +5003,7 @@ const LeafMatrix = {
 
 const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
 const { updateBounds: updateBounds$1 } = BranchHelper;
-const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$4 } = BoundsHelper;
+const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
 const { toBounds: toBounds$2 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
@@ -5083,7 +5086,7 @@ const LeafBounds = {
         const b = this.__layout.boxBounds;
         const data = this.__;
         if (data.__pathInputed) {
-            toBounds$2(data.__pathForRender, b);
+            toBounds$2(data.path, b);
         }
         else {
             b.x = 0;
@@ -5095,7 +5098,7 @@ const LeafBounds = {
     __updateAutoLayout() {
         this.__layout.matrixChanged = true;
         if (this.isBranch) {
-            if (this.leafer && this.leafer.ready)
+            if (this.leaferIsReady)
                 this.leafer.layouter.addExtra(this);
             if (this.__.flow) {
                 if (this.__layout.boxChanged)
@@ -5121,11 +5124,11 @@ const LeafBounds = {
     },
     __updateStrokeBounds() {
         const layout = this.__layout;
-        copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+        copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds() {
         const layout = this.__layout;
-        layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
+        layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
     }
 };
 
@@ -5230,6 +5233,8 @@ let Leaf = class Leaf {
     get innerName() { return this.__.name || this.tag + this.innerId; }
     get __DataProcessor() { return LeafData; }
     get __LayoutProcessor() { return LeafLayout; }
+    get leaferIsCreated() { return this.leafer && this.leafer.created; }
+    get leaferIsReady() { return this.leafer && this.leafer.ready; }
     get isLeafer() { return false; }
     get isBranch() { return false; }
     get isBranchLeaf() { return false; }
@@ -5671,6 +5676,7 @@ let Branch = class Branch extends Leaf {
     add(child, index) {
         if (child === this)
             return;
+        child.__ || (child = UICreator.get(child.tag, child));
         if (child.parent)
             child.parent.remove(child);
         child.parent = this;
@@ -5693,10 +5699,14 @@ let Branch = class Branch extends Leaf {
     }
     remove(child, destroy) {
         if (child) {
-            if (child.animationOut)
-                child.__runAnimation('out', () => this.__remove(child, destroy));
+            if (child.__) {
+                if (child.animationOut)
+                    child.__runAnimation('out', () => this.__remove(child, destroy));
+                else
+                    this.__remove(child, destroy);
+            }
             else
-                this.__remove(child, destroy);
+                this.find(child).forEach(item => this.remove(item, destroy));
         }
         else if (child === undefined) {
             super.remove(null, destroy);
@@ -5914,7 +5924,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.3";
+const version = "1.0.5";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6556,6 +6566,7 @@ class Renderer {
         this.totalBounds = new Bounds();
         debug$3.log(target.innerName, '--->');
         try {
+            target.app.emit(RenderEvent.CHILD_START, target);
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(RenderEvent.END, this.totalBounds);
@@ -7292,12 +7303,7 @@ let UI = UI_1 = class UI extends Leaf {
         this.__drawPathByData(canvas, this.__.path);
     }
     __drawPathByData(drawer, data) {
-        if (data) {
-            PathDrawer.drawPathByData(drawer, data);
-        }
-        else {
-            this.__drawPathByBox(drawer);
-        }
+        data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
     }
     __drawPathByBox(drawer) {
         const { x, y, width, height } = this.__layout.boxBounds;
@@ -7305,9 +7311,8 @@ let UI = UI_1 = class UI extends Leaf {
             const { cornerRadius } = this.__;
             drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
         }
-        else {
+        else
             drawer.rect(x, y, width, height);
-        }
     }
     animate(_keyframe, _options, _type, _isTemp) {
         return needPlugin('animate');
@@ -7316,10 +7321,10 @@ let UI = UI_1 = class UI extends Leaf {
     export(filename, options) {
         return Export.export(this, filename, options);
     }
-    clone(newData) {
+    clone(data) {
         const json = this.toJSON();
-        if (newData)
-            Object.assign(json, newData);
+        if (data)
+            Object.assign(json, data);
         return UI_1.one(json);
     }
     static one(data, x, y, width, height) {
@@ -7990,10 +7995,9 @@ Rect = __decorate([
     registerUI()
 ], Rect);
 
-const rect = Rect.prototype;
-const group = Group.prototype;
+const { copy: copy$2, add, includes: includes$1 } = BoundsHelper;
+const rect = Rect.prototype, group = Group.prototype;
 const childrenRenderBounds = {};
-const { copy: copy$2, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -8007,29 +8011,27 @@ let Box = class Box extends Group {
         return this.__updateRectRenderSpread() || -1;
     }
     __updateRectBoxBounds() { }
-    __updateBoxBounds(secondLayout) {
+    __updateBoxBounds(_secondLayout) {
         const data = this.__;
         if (this.children.length) {
             if (data.__autoSide) {
-                if (this.leafer && this.leafer.ready)
-                    this.leafer.layouter.addExtra(this);
                 super.__updateBoxBounds();
                 const { boxBounds } = this.__layout;
                 if (!data.__autoSize) {
-                    if (data.__autoWidth)
-                        boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0;
-                    else
-                        boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0;
+                    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;
+                    }
                 }
-                if (secondLayout && data.flow && data.padding)
-                    copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
                 this.__updateNaturalSize();
             }
             else {
                 this.__updateRectBoxBounds();
             }
-            if (data.flow)
-                this.__updateContentBounds();
         }
         else {
             this.__updateRectBoxBounds();
@@ -8095,6 +8097,9 @@ __decorate([
 __decorate([
     dataType(false)
 ], Box.prototype, "resizeChildren", void 0);
+__decorate([
+    dataType(false)
+], Box.prototype, "textBox", void 0);
 __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
@@ -8624,6 +8629,9 @@ __decorate([
 __decorate([
     boundsType('top')
 ], Text.prototype, "verticalAlign", void 0);
+__decorate([
+    boundsType(true)
+], Text.prototype, "autoSizeAlign", void 0);
 __decorate([
     boundsType('normal')
 ], Text.prototype, "textWrap", void 0);
@@ -9165,9 +9173,10 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, image.error);
     }
     else {
-        ignoreRender(ui, true);
-        if (firstUse)
+        if (firstUse) {
+            ignoreRender(ui, true);
             onLoad(ui, event);
+        }
         leafPaint.loadId = image.load(() => {
             ignoreRender(ui, false);
             if (!ui.destroyed) {
@@ -9779,11 +9788,12 @@ const { trimRight } = TextRowHelper;
 const { Letter, Single, Before, After, Symbol, Break } = CharType;
 let word, row, wordWidth, rowWidth, realWidth;
 let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
-let textDrawData, rows = [], bounds;
+let textDrawData, rows = [], bounds, findMaxWidth;
 function createRows(drawData, content, style) {
     textDrawData = drawData;
     rows = drawData.rows;
     bounds = drawData.bounds;
+    findMaxWidth = !bounds.width && !style.autoSizeAlign;
     const { __letterSpacing, paraIndent, textCase } = style;
     const { canvas } = Platform;
     const { width, height } = bounds;
@@ -9868,7 +9878,10 @@ function createRows(drawData, content, style) {
     else {
         content.split('\n').forEach(content => {
             textDrawData.paraNumber++;
-            rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
+            rowWidth = canvas.measureText(content).width;
+            rows.push({ x: paraIndent || 0, text: content, width: rowWidth, paraStart: true });
+            if (findMaxWidth)
+                setMaxWidth();
         });
     }
 }
@@ -9899,10 +9912,16 @@ function addRow() {
     row.width = rowWidth;
     if (bounds.width)
         trimRight(row);
+    else if (findMaxWidth)
+        setMaxWidth();
     rows.push(row);
     row = { words: [] };
     rowWidth = 0;
 }
+function setMaxWidth() {
+    if (rowWidth > (textDrawData.maxWidth || 0))
+        textDrawData.maxWidth = rowWidth;
+}
 
 const CharMode = 0;
 const WordMode = 1;
@@ -9974,34 +9993,32 @@ function toChar(data, charX, rowData, isOverflow) {
 
 function layoutText(drawData, style) {
     const { rows, bounds } = drawData;
-    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
     if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
         drawData.overflow = rows.length;
     }
-    else {
+    else if (height || autoSizeAlign) {
         switch (verticalAlign) {
             case 'middle':
                 y += (height - realHeight) / 2;
                 break;
-            case 'bottom':
-                y += (height - realHeight);
+            case 'bottom': y += (height - realHeight);
         }
     }
     starY += y;
-    let row, rowX, rowWidth;
+    let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
         if (row.width < width || (row.width > width && !__clipText)) {
             switch (textAlign) {
                 case 'center':
-                    row.x += (width - row.width) / 2;
+                    row.x += (layoutWidth - row.width) / 2;
                     break;
-                case 'right':
-                    row.x += width - row.width;
+                case 'right': row.x += layoutWidth - row.width;
             }
         }
         if (row.paraStart && paraSpacing && i > 0)
@@ -10106,14 +10123,14 @@ function getDrawData(content, style) {
     let height = style.__getInput('height') || 0;
     const { textDecoration, __font, __padding: padding } = style;
     if (padding) {
-        if (width) {
+        if (width)
+            x = padding[left], width -= (padding[right] + padding[left]);
+        else if (!style.autoSizeAlign)
             x = padding[left];
-            width -= (padding[right] + padding[left]);
-        }
-        if (height) {
+        if (height)
+            y = padding[top], height -= (padding[top] + padding[bottom]);
+        else if (!style.autoSizeAlign)
             y = padding[top];
-            height -= (padding[top] + padding[bottom]);
-        }
     }
     const drawData = {
         bounds: { x, y, width, height },
@@ -10133,22 +10150,20 @@ function getDrawData(content, style) {
     return drawData;
 }
 function padAutoText(padding, drawData, style, width, height) {
-    if (!width) {
+    if (!width && style.autoSizeAlign) {
         switch (style.textAlign) {
             case 'left':
                 offsetText(drawData, 'x', padding[left]);
                 break;
-            case 'right':
-                offsetText(drawData, 'x', -padding[right]);
+            case 'right': offsetText(drawData, 'x', -padding[right]);
         }
     }
-    if (!height) {
+    if (!height && style.autoSizeAlign) {
         switch (style.verticalAlign) {
             case 'top':
                 offsetText(drawData, 'y', padding[top]);
                 break;
-            case 'bottom':
-                offsetText(drawData, 'y', -padding[bottom]);
+            case 'bottom': offsetText(drawData, 'y', -padding[bottom]);
         }
     }
 }