leafer-ui 1.0.3 → 1.0.5

package/dist/web.js

@@ -4486,15 +4486,16 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -4506,7 +4507,8 @@ var LeaferUI = (function (exports) {
                     point = leaf.getWorldPoint(bounds, relative);
                     matrix = getRelativeWorld$1(leaf, relative, true);
             }
-            const layoutBounds = MatrixHelper.getLayout(matrix);
+            if (!layoutBounds)
+                layoutBounds = MatrixHelper.getLayout(matrix);
             copy$6(layoutBounds, bounds);
             PointHelper.copy(layoutBounds, point);
             if (unscale) {
@@ -4756,6 +4758,7 @@ var LeaferUI = (function (exports) {
         }
     }
     RenderEvent.REQUEST = 'render.request';
+    RenderEvent.CHILD_START = 'render.child_start';
     RenderEvent.START = 'render.start';
     RenderEvent.BEFORE = 'render.before';
     RenderEvent.RENDER = 'render';
@@ -4931,7 +4934,7 @@ var LeaferUI = (function (exports) {
     const debug$8 = 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$8.warn(this.innerName, name, newValue);
@@ -5003,7 +5006,7 @@ var LeaferUI = (function (exports) {
 
     const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
     const { updateBounds: updateBounds$1 } = BranchHelper;
-    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$5 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
     const { toBounds: toBounds$2 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
@@ -5086,7 +5089,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -5098,7 +5101,7 @@ var LeaferUI = (function (exports) {
         __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)
@@ -5124,11 +5127,11 @@ var LeaferUI = (function (exports) {
         },
         __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$5(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
         }
     };
 
@@ -5233,6 +5236,8 @@ var LeaferUI = (function (exports) {
         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; }
@@ -5674,6 +5679,7 @@ var LeaferUI = (function (exports) {
         add(child, index) {
             if (child === this)
                 return;
+            child.__ || (child = UICreator.get(child.tag, child));
             if (child.parent)
                 child.parent.remove(child);
             child.parent = this;
@@ -5696,10 +5702,14 @@ var LeaferUI = (function (exports) {
         }
         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);
@@ -5917,7 +5927,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.3";
+    const version = "1.0.5";
 
     const debug$7 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6559,6 +6569,7 @@ var LeaferUI = (function (exports) {
             this.totalBounds = new Bounds();
             debug$5.log(target.innerName, '--->');
             try {
+                target.app.emit(RenderEvent.CHILD_START, target);
                 this.emitRender(RenderEvent.START);
                 this.renderOnce(callback);
                 this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6856,7 +6867,7 @@ var LeaferUI = (function (exports) {
                 if (child.isBranch) {
                     if (hit || child.__ignoreHitWorld) {
                         this.eachFind(child.children, child.__onlyHitMask);
-                        if (child.isBranchLeaf && !this.findList.length)
+                        if (child.isBranchLeaf)
                             this.hitChild(child, point);
                     }
                 }
@@ -7566,12 +7577,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -7579,9 +7585,8 @@ var LeaferUI = (function (exports) {
                 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');
@@ -7590,10 +7595,10 @@ var LeaferUI = (function (exports) {
         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) {
@@ -8264,10 +8269,9 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Rect);
 
-    const rect$1 = exports.Rect.prototype;
-    const group$1 = exports.Group.prototype;
+    const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
+    const rect$1 = exports.Rect.prototype, group$1 = exports.Group.prototype;
     const childrenRenderBounds = {};
-    const { copy: copy$3, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
         get isBranchLeaf() { return true; }
@@ -8281,29 +8285,27 @@ var LeaferUI = (function (exports) {
             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();
@@ -8369,6 +8371,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType(false)
     ], exports.Box.prototype, "resizeChildren", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.Box.prototype, "textBox", void 0);
     __decorate([
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
@@ -8898,6 +8903,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType('top')
     ], exports.Text.prototype, "verticalAlign", void 0);
+    __decorate([
+        boundsType(true)
+    ], exports.Text.prototype, "autoSizeAlign", void 0);
     __decorate([
         boundsType('normal')
     ], exports.Text.prototype, "textWrap", void 0);
@@ -9618,9 +9626,10 @@ var LeaferUI = (function (exports) {
             this.dragData = getDragEventData(data, data, data);
             this.canAnimate = this.canDragOut = true;
         }
-        getList() {
+        getList(realDraggable, hover) {
             const { proxy } = this.interaction.selector;
-            return this.dragging && (!proxy || !proxy.list.length) ? (exports.DragEvent.list || this.dragableList || emptyList) : emptyList;
+            const hasProxyList = proxy && proxy.list.length, dragList = exports.DragEvent.list || this.draggableList || emptyList;
+            return this.dragging && (hasProxyList ? (realDraggable ? emptyList : new LeafList(hover ? [...proxy.list, ...proxy.dragHoverExclude] : proxy.list)) : dragList);
         }
         checkDrag(data, canDrag) {
             const { interaction } = this;
@@ -9645,8 +9654,8 @@ var LeaferUI = (function (exports) {
                 this.dragging = canDrag && PointerButton.left(data);
                 if (this.dragging) {
                     this.interaction.emit(exports.DragEvent.START, this.dragData);
-                    this.getDragableList(this.dragData.path);
-                    this.setDragStartPoints(this.realDragableList = this.getList());
+                    this.getDraggableList(this.dragData.path);
+                    this.setDragStartPoints(this.realDraggableList = this.getList(true));
                 }
             }
         }
@@ -9654,12 +9663,12 @@ var LeaferUI = (function (exports) {
             this.dragStartPoints = {};
             list.forEach(leaf => this.dragStartPoints[leaf.innerId] = { x: leaf.x, y: leaf.y });
         }
-        getDragableList(path) {
+        getDraggableList(path) {
             let leaf;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                if ((leaf.__.draggable || leaf.__.editable) && leaf.__.hitSelf && !leaf.__.locked) {
-                    this.dragableList = new LeafList(leaf);
+                if ((leaf.draggable || leaf.editable) && leaf.hitSelf && !leaf.locked) {
+                    this.draggableList = new LeafList(leaf);
                     break;
                 }
             }
@@ -9684,7 +9693,7 @@ var LeaferUI = (function (exports) {
         }
         dragReal() {
             const { running } = this.interaction;
-            const list = this.realDragableList;
+            const list = this.realDraggableList;
             if (list.length && running) {
                 const { totalX, totalY } = this.dragData;
                 list.forEach(leaf => leaf.draggable && leaf.move(exports.DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
@@ -9773,7 +9782,7 @@ var LeaferUI = (function (exports) {
             this.interaction.emit(exports.DragEvent.LEAVE, data, dragEnterPath);
         }
         dragReset() {
-            exports.DragEvent.list = exports.DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
+            exports.DragEvent.list = exports.DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
         }
         checkDragOut(data) {
             const { interaction } = this;
@@ -9914,6 +9923,7 @@ var LeaferUI = (function (exports) {
         touch: {
             preventDefault: true
         },
+        multiTouch: {},
         cursor: true,
         keyEvent: true
     };
@@ -10040,6 +10050,8 @@ var LeaferUI = (function (exports) {
             this.pointerUp(data);
         }
         multiTouch(data, list) {
+            if (this.config.multiTouch.disabled)
+                return;
             const { move, angle, scale, center } = MultiTouchHelper.getData(list);
             this.rotate(getRotateEventData$1(center, angle, data));
             this.zoom(getZoomEventData$1(center, scale, data));
@@ -10229,7 +10241,7 @@ var LeaferUI = (function (exports) {
                 data = this.hoverData;
             if (!data)
                 return;
-            this.findPath(data, { exclude: this.dragger.getList(), name: exports.PointerEvent.MOVE });
+            this.findPath(data, { exclude: this.dragger.getList(false, true), name: exports.PointerEvent.MOVE });
             this.hoverData = data;
         }
         updateCursor(data) {
@@ -10251,7 +10263,7 @@ var LeaferUI = (function (exports) {
             const { path } = data;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                cursor = leaf.syncEventer ? leaf.syncEventer.cursor : leaf.cursor;
+                cursor = (leaf.syncEventer && leaf.syncEventer.cursor) || leaf.cursor;
                 if (cursor)
                     break;
             }
@@ -10433,7 +10445,7 @@ var LeaferUI = (function (exports) {
         if (isHitPixel) {
             const { renderBounds } = this.__layout;
             const size = Platform.image.hitCanvasSize;
-            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds, 0.5).a;
+            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
             const { x, y, width, height } = tempBounds$1.set(renderBounds).scale(scale);
             h.resize({ width, height, pixelRatio: 1 });
             h.clear();
@@ -10489,15 +10501,14 @@ var LeaferUI = (function (exports) {
         return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
     };
 
-    const ui$1 = new exports.UI();
-    const rect = exports.Rect.prototype;
-    rect.__updateHitCanvas = function () {
+    const ui$1 = exports.UI.prototype, rect = exports.Rect.prototype, box$1 = exports.Box.prototype;
+    rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
         if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
             ui$1.__updateHitCanvas.call(this);
         else if (this.__hitCanvas)
             this.__hitCanvas = null;
     };
-    rect.__hitFill = function (inner) {
+    rect.__hitFill = box$1.__hitFill = function (inner) {
         return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
 
@@ -11348,9 +11359,10 @@ var LeaferUI = (function (exports) {
                 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) {
@@ -11962,11 +11974,12 @@ var LeaferUI = (function (exports) {
     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;
@@ -12051,7 +12064,10 @@ var LeaferUI = (function (exports) {
         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();
             });
         }
     }
@@ -12082,10 +12098,16 @@ var LeaferUI = (function (exports) {
         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;
@@ -12157,34 +12179,32 @@ var LeaferUI = (function (exports) {
 
     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)
@@ -12289,14 +12309,14 @@ var LeaferUI = (function (exports) {
         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 },
@@ -12316,22 +12336,20 @@ var LeaferUI = (function (exports) {
         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]);
             }
         }
     }