leafer-ui 1.0.0-rc.7 → 1.0.0-rc.8

package/dist/web.js

@@ -104,14 +104,14 @@ var LeaferUI = (function (exports) {
     const { sin: sin$5, cos: cos$5, acos, sqrt: sqrt$3 } = Math;
     const { float } = MathHelper;
     const tempPoint$2 = {};
-    function get$5() {
+    function get$6() {
         return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
     }
     function getWorld() {
-        return Object.assign(Object.assign({}, get$5()), { x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
+        return Object.assign(Object.assign({}, get$6()), { x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
     }
     const MatrixHelper = {
-        defaultMatrix: get$5(),
+        defaultMatrix: get$6(),
         defaultWorld: getWorld(),
         tempMatrix: {},
         set(t, a = 1, b = 0, c = 0, d = 1, e = 0, f = 0) {
@@ -122,7 +122,7 @@ var LeaferUI = (function (exports) {
             t.e = e;
             t.f = f;
         },
-        get: get$5,
+        get: get$6,
         getWorld,
         copy(t, matrix) {
             t.a = matrix.a;
@@ -685,7 +685,7 @@ var LeaferUI = (function (exports) {
 
     const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$3 } = TwoPointBoundsHelper;
     const { toOuterPoint: toOuterPoint$1 } = MatrixHelper;
-    let right, bottom, boundsRight, boundsBottom;
+    let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
     const toPoint$1 = {};
     const BoundsHelper = {
@@ -828,16 +828,16 @@ var LeaferUI = (function (exports) {
             }
         },
         add(t, bounds) {
-            right = t.x + t.width;
-            bottom = t.y + t.height;
+            right$1 = t.x + t.width;
+            bottom$1 = t.y + t.height;
             boundsRight = bounds.x + bounds.width;
             boundsBottom = bounds.y + bounds.height;
-            right = right > boundsRight ? right : boundsRight;
-            bottom = bottom > boundsBottom ? bottom : boundsBottom;
+            right$1 = right$1 > boundsRight ? right$1 : boundsRight;
+            bottom$1 = bottom$1 > boundsBottom ? bottom$1 : boundsBottom;
             t.x = t.x < bounds.x ? t.x : bounds.x;
             t.y = t.y < bounds.y ? t.y : bounds.y;
-            t.width = right - t.x;
-            t.height = bottom - t.y;
+            t.width = right$1 - t.x;
+            t.height = bottom$1 - t.y;
         },
         addList(t, list) {
             B.setListWithFn(t, list, undefined, true);
@@ -903,16 +903,16 @@ var LeaferUI = (function (exports) {
             if (otherMatrix)
                 other = B.tempToOuterOf(other, otherMatrix);
             let { x, y, width, height } = other;
-            right = x + width;
-            bottom = y + height;
+            right$1 = x + width;
+            bottom$1 = y + height;
             boundsRight = t.x + t.width;
             boundsBottom = t.y + t.height;
             x = x > t.x ? x : t.x;
             y = y > t.y ? y : t.y;
-            right = right < boundsRight ? right : boundsRight;
-            bottom = bottom < boundsBottom ? bottom : boundsBottom;
-            width = right - x;
-            height = bottom - y;
+            right$1 = right$1 < boundsRight ? right$1 : boundsRight;
+            bottom$1 = bottom$1 < boundsBottom ? bottom$1 : boundsBottom;
+            width = right$1 - x;
+            height = bottom$1 - y;
             return { x, y, width, height };
         },
         intersect(t, other, otherMatrix) {
@@ -1056,25 +1056,55 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const center = { x: 0.5, y: 0.5 };
+    exports.Direction4 = void 0;
+    (function (Direction4) {
+        Direction4[Direction4["top"] = 0] = "top";
+        Direction4[Direction4["right"] = 1] = "right";
+        Direction4[Direction4["bottom"] = 2] = "bottom";
+        Direction4[Direction4["left"] = 3] = "left";
+    })(exports.Direction4 || (exports.Direction4 = {}));
+    exports.Direction9 = void 0;
+    (function (Direction9) {
+        Direction9[Direction9["topLeft"] = 0] = "topLeft";
+        Direction9[Direction9["top"] = 1] = "top";
+        Direction9[Direction9["topRight"] = 2] = "topRight";
+        Direction9[Direction9["right"] = 3] = "right";
+        Direction9[Direction9["bottomRight"] = 4] = "bottomRight";
+        Direction9[Direction9["bottom"] = 5] = "bottom";
+        Direction9[Direction9["bottomLeft"] = 6] = "bottomLeft";
+        Direction9[Direction9["left"] = 7] = "left";
+        Direction9[Direction9["center"] = 8] = "center";
+    })(exports.Direction9 || (exports.Direction9 = {}));
+
+    const directionData = [
+        { x: 0, y: 0 },
+        { x: 0.5, y: 0 },
+        { x: 1, y: 0 },
+        { x: 1, y: 0.5 },
+        { x: 1, y: 1 },
+        { x: 0.5, y: 1 },
+        { x: 0, y: 1 },
+        { x: 0, y: 0.5 },
+        { x: 0.5, y: 0.5 }
+    ];
     const AroundHelper = {
-        center,
+        directionData,
         tempPoint: {},
+        get: get$5,
         toPoint(around, bounds, to, onlySize) {
             to || (to = {});
-            switch (around) {
-                case 'center':
-                    around = center;
-                    break;
-            }
-            to.x = around.x * bounds.width;
-            to.y = around.y * bounds.height;
+            const point = get$5(around);
+            to.x = point.x * bounds.width;
+            to.y = point.y * bounds.height;
             if (!onlySize) {
                 to.x += bounds.x;
                 to.y += bounds.y;
             }
         }
     };
+    function get$5(around) {
+        return typeof around === 'string' ? directionData[exports.Direction9[around]] : around;
+    }
 
     const StringNumberMap = {
         '0': 1,
@@ -3089,7 +3119,6 @@ var LeaferUI = (function (exports) {
                         break;
                     case G$1:
                         scalePoints(data, scaleX, scaleY, i, 2);
-                        console.log('G');
                         i += 9;
                         break;
                     case F$1:
@@ -3804,7 +3833,7 @@ var LeaferUI = (function (exports) {
     LayoutEvent.REQUEST = 'layout.request';
     LayoutEvent.START = 'layout.start';
     LayoutEvent.BEFORE = 'layout.before';
-    LayoutEvent.LAYOUT = 'layout.layout';
+    LayoutEvent.LAYOUT = 'layout';
     LayoutEvent.AFTER = 'layout.after';
     LayoutEvent.AGAIN = 'layout.again';
     LayoutEvent.END = 'layout.end';
@@ -4453,13 +4482,10 @@ var LeaferUI = (function (exports) {
             }
         },
         worldHittable(t) {
-            if (!t.__.hittable)
-                return false;
-            let { parent } = t;
-            while (parent) {
-                if (!parent.__.hittable || !parent.__.hitChildren)
+            while (t) {
+                if (!t.__.hittable)
                     return false;
-                parent = parent.parent;
+                t = t.parent;
             }
             return true;
         },
@@ -7334,6 +7360,7 @@ var LeaferUI = (function (exports) {
             view ? this.__createViewFrom(view) : this.__createView();
             const { style } = this.view;
             style.display || (style.display = 'block');
+            style.userSelect = 'none';
             this.parentView = this.view.parentElement;
             if (Platform.syncDomFont && !this.parentView) {
                 this.view.style.display = 'none';
@@ -9188,11 +9215,12 @@ var LeaferUI = (function (exports) {
         __updateBoxBounds() {
             const data = this.__;
             const layout = this.__layout;
-            const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow } = data;
+            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 ? 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.__autoBounds;
@@ -9206,9 +9234,8 @@ var LeaferUI = (function (exports) {
                 b.y = autoHeight ? bounds.y : 0;
                 b.width = autoWidth ? bounds.width : data.width;
                 b.height = autoHeight ? bounds.height : data.height;
-                const { padding } = data;
                 if (padding) {
-                    const [top, right, bottom, left] = MathHelper.fourNumber(padding);
+                    const [top, right, bottom, left] = data.__padding;
                     if (autoWidth) {
                         b.x -= left;
                         b.width += (right + left);
@@ -9393,6 +9420,7 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
         get app() { return this.parent || this; }
+        get imageReady() { return this.viewReady && 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) {
@@ -9595,23 +9623,26 @@ var LeaferUI = (function (exports) {
             this.emitLeafer(LeaferEvent.VIEW_READY);
             WaitHelper.run(this.__viewReadyWait);
         }
-        __onRenderEnd(_e) {
-            if (!this.viewReady)
-                this.__onViewReady();
-            const completed = this.__checkViewCompleted();
-            if (completed)
-                this.__onViewCompleted();
-            this.viewCompleted = completed;
-            WaitHelper.run(this.__nextRenderWait);
-        }
-        __checkViewCompleted() {
-            return this.viewReady && !this.watcher.changed && ImageManager.isComplete;
-        }
-        __onViewCompleted() {
-            if (!this.viewCompleted) {
-                this.emitLeafer(LeaferEvent.VIEW_COMPLETED);
-                WaitHelper.run(this.__viewCompletedWait);
-            }
+        __onAnimateFrame() {
+            if (this.viewReady) {
+                if (this.__nextRenderWait.length)
+                    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(LeaferEvent.VIEW_COMPLETED);
+                    WaitHelper.run(this.__viewCompletedWait);
+                    this.viewCompleted = true;
+                }
+            });
         }
         __onWatchData() {
             if (this.watcher.childrenChanged && this.interaction) {
@@ -9625,22 +9656,17 @@ var LeaferUI = (function (exports) {
             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.update();
@@ -9653,7 +9679,8 @@ var LeaferUI = (function (exports) {
             this.once(LeaferEvent.START, () => Run.end(runId));
             this.once(LayoutEvent.END, () => this.__onReady());
             this.once(RenderEvent.START, () => this.__onCreated());
-            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(RenderEvent.END, this.__onRenderEnd, this), this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this));
+            this.once(RenderEvent.END, () => this.__onViewReady());
+            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(AnimateEvent.FRAME, this.__onAnimateFrame, this), this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this));
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
@@ -9780,9 +9807,6 @@ var LeaferUI = (function (exports) {
             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)
@@ -9812,7 +9836,7 @@ var LeaferUI = (function (exports) {
         __listenChildEvents(leafer) {
             leafer.once(LayoutEvent.END, () => this.__onReady());
             leafer.once(RenderEvent.START, () => this.__onCreated());
-            leafer.once(RenderEvent.END, (e) => this.__onRenderEnd(e));
+            leafer.once(RenderEvent.END, () => this.__onViewReady());
             if (this.realCanvas)
                 this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
         }
@@ -9878,7 +9902,7 @@ var LeaferUI = (function (exports) {
     const { get: get$3, translate } = MatrixHelper;
     function createData(leafPaint, image, paint, box) {
         let { width, height } = image;
-        const { opacity, mode, offset, scale, rotation, blendMode } = paint;
+        const { opacity, mode, offset, scale, rotation, blendMode, repeat } = paint;
         const sameBox = box.width === width && box.height === height;
         if (blendMode)
             leafPaint.blendMode = blendMode;
@@ -9899,6 +9923,8 @@ var LeaferUI = (function (exports) {
             case 'repeat':
                 if (!sameBox || scale || rotation)
                     repeatMode(data, box, width, height, scale, rotation);
+                if (!repeat)
+                    data.repeat = 'repeat';
                 break;
             case 'fit':
             case 'cover':
@@ -9910,6 +9936,8 @@ var LeaferUI = (function (exports) {
         data.height = height;
         if (opacity)
             data.opacity = opacity;
+        if (repeat)
+            data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
     }
 
     function image(ui, attrName, attrValue, box, firstUse) {
@@ -9956,11 +9984,11 @@ var LeaferUI = (function (exports) {
             d.__naturalWidth = image.width;
             d.__naturalHeight = image.height;
             if (!d.__getInput('width') || !d.__getInput('height')) {
+                ui.forceUpdate('width');
                 if (ui.__proxyData) {
                     ui.setProxyAttr('width', ui.__.width);
                     ui.setProxyAttr('height', ui.__.height);
                 }
-                ui.forceUpdate('width');
                 return false;
             }
         }
@@ -9979,7 +10007,7 @@ var LeaferUI = (function (exports) {
             scaleX = Math.abs(scaleX);
             scaleY = Math.abs(scaleY);
             const { image, data } = paint;
-            let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
+            let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
             if (sx) {
                 imageMatrix = get$2();
                 copy$1(imageMatrix, transform);
@@ -9992,7 +10020,7 @@ var LeaferUI = (function (exports) {
             width *= scaleX;
             height *= scaleY;
             const size = width * height;
-            if (paint.data.mode !== 'repeat') {
+            if (!repeat) {
                 if (size > Platform.image.maxCacheSize)
                     return false;
             }
@@ -10022,7 +10050,7 @@ var LeaferUI = (function (exports) {
                 }
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
+            const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), repeat || (Platform.origin.noRepeat || 'no-repeat'));
             try {
                 if (paint.transform)
                     paint.transform = null;
@@ -10050,7 +10078,7 @@ var LeaferUI = (function (exports) {
         else {
             const { data } = paint;
             if (allowPaint) {
-                if (data.mode !== 'repeat') {
+                if (!data.repeat) {
                     let { width, height } = data;
                     width *= abs(scaleX) * canvas.pixelRatio;
                     height *= abs(scaleY) * canvas.pixelRatio;
@@ -11050,6 +11078,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    const { top, right, bottom, left } = exports.Direction4;
     const TextConvert = {
         getDrawData(content, style) {
             if (typeof content !== 'string')
@@ -11057,16 +11086,15 @@ var LeaferUI = (function (exports) {
             let x = 0, y = 0;
             let width = style.__getInput('width') || 0;
             let height = style.__getInput('height') || 0;
-            const { textDecoration, __font, padding } = style;
+            const { textDecoration, __font, __padding: padding } = style;
             if (padding) {
-                const [top, right, bottom, left] = MathHelper.fourNumber(padding);
                 if (width) {
-                    x = left;
-                    width -= (right + left);
+                    x = padding[left];
+                    width -= (padding[right] + padding[left]);
                 }
                 if (height) {
-                    y = top;
-                    height -= (top + bottom);
+                    y = padding[top];
+                    height -= (padding[top] + padding[bottom]);
                 }
             }
             const drawData = {
@@ -11076,6 +11104,8 @@ var LeaferUI = (function (exports) {
                 font: Platform.canvas.font = __font
             };
             createRows(drawData, content, style);
+            if (padding)
+                padAutoText(padding, drawData, style, width, height);
             layoutText(drawData, style);
             layoutChar(drawData, style, width);
             if (drawData.overflow)
@@ -11085,6 +11115,32 @@ var LeaferUI = (function (exports) {
             return drawData;
         }
     };
+    function padAutoText(padding, drawData, style, width, height) {
+        if (!width) {
+            switch (style.textAlign) {
+                case 'left':
+                    offsetText(drawData, 'x', padding[left]);
+                    break;
+                case 'right':
+                    offsetText(drawData, 'x', -padding[right]);
+            }
+        }
+        if (!height) {
+            switch (style.verticalAlign) {
+                case 'top':
+                    offsetText(drawData, 'y', padding[top]);
+                    break;
+                case 'bottom':
+                    offsetText(drawData, 'y', -padding[bottom]);
+            }
+        }
+    }
+    function offsetText(drawData, attrName, value) {
+        const { bounds, rows } = drawData;
+        bounds[attrName] += value;
+        for (let i = 0; i < rows.length; i++)
+            rows[i][attrName] += value;
+    }
 
     const ColorConvert = {
         string(color, opacity) {