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

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;
         },
@@ -5912,7 +5938,7 @@ var LeaferUI = (function (exports) {
                 canvas.setWorld(this.__world, options.matrix);
                 canvas.opacity = this.__worldOpacity;
                 if (this.__.__single) {
-                    const tempCanvas = canvas.getSameCanvas(true);
+                    const tempCanvas = canvas.getSameCanvas(true, true);
                     this.__draw(tempCanvas, options);
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
                     if (this.__worldFlipped || options.matrix) {
@@ -5989,7 +6015,7 @@ var LeaferUI = (function (exports) {
             if (this.__worldOpacity) {
                 if (this.__.__single) {
                     canvas.resetTransform();
-                    const tempCanvas = canvas.getSameCanvas();
+                    const tempCanvas = canvas.getSameCanvas(false, true);
                     this.__renderBranch(tempCanvas, options);
                     canvas.opacity = this.__worldOpacity;
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
@@ -7335,6 +7361,8 @@ var LeaferUI = (function (exports) {
             const { style } = this.view;
             style.display || (style.display = 'block');
             this.parentView = this.view.parentElement;
+            if (this.parentView)
+                this.parentView.style.userSelect = 'none';
             if (Platform.syncDomFont && !this.parentView) {
                 this.view.style.display = 'none';
                 document.body.appendChild(this.view);
@@ -8060,6 +8088,9 @@ var LeaferUI = (function (exports) {
     class LineData extends UIData {
     }
 
+    class ArrowData extends LineData {
+    }
+
     class RectData extends UIData {
         get __boxStroke() { return true; }
     }
@@ -8118,6 +8149,25 @@ var LeaferUI = (function (exports) {
     }
 
     class ImageData extends RectData {
+        setUrl(value) {
+            this.__setImageFill(value);
+            this._url = value;
+        }
+        __setImageFill(value) {
+            if (this.__leaf.image)
+                this.__leaf.image = null;
+            this.fill = value ? { type: 'image', mode: 'strench', url: value } : undefined;
+        }
+        __getData() {
+            const data = super.__getData();
+            delete data.fill;
+            return data;
+        }
+        __getInputData() {
+            const data = super.__getInputData();
+            delete data.fill;
+            return data;
+        }
     }
 
     class CanvasData extends RectData {
@@ -8364,14 +8414,15 @@ var LeaferUI = (function (exports) {
         findOne(condition, options) {
             return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
         }
-        getPath(curve) {
-            const { path } = this.__;
+        getPath(curve, pathForRender) {
+            this.__layout.update();
+            let path = pathForRender ? this.__.__pathForRender : this.__.path;
             if (!path)
-                return [];
+                this.__drawPathByBox(new PathCreator(path = []));
             return curve ? PathConvert.toCanvasData(path, true) : path;
         }
-        getPathString(curve) {
-            return PathConvert.stringify(this.getPath(curve));
+        getPathString(curve, pathForRender) {
+            return PathConvert.stringify(this.getPath(curve, pathForRender));
         }
         __onUpdateSize() {
             if (this.__.__input) {
@@ -8543,6 +8594,12 @@ var LeaferUI = (function (exports) {
     __decorate([
         strokeType(10)
     ], exports.UI.prototype, "miterLimit", void 0);
+    __decorate([
+        strokeType('none')
+    ], exports.UI.prototype, "startArrow", void 0);
+    __decorate([
+        strokeType('none')
+    ], exports.UI.prototype, "endArrow", void 0);
     __decorate([
         pathType(0)
     ], exports.UI.prototype, "cornerRadius", void 0);
@@ -9039,26 +9096,10 @@ var LeaferUI = (function (exports) {
         get ready() { return this.image ? this.image.ready : false; }
         constructor(data) {
             super(data);
-        }
-        __updateBoxBounds() {
-            let update;
-            const { url } = this;
-            const fill = this.fill;
-            if (fill) {
-                if (fill.url !== url)
-                    update = true;
-            }
-            else {
-                if (url)
-                    update = true;
-            }
-            if (update) {
-                if (this.image)
-                    this.image = null;
-                this.fill = url ? { type: 'image', mode: 'strench', url } : undefined;
-                this.once(ImageEvent.LOADED, (e) => this.image = e.image);
-            }
-            super.__updateBoxBounds();
+            this.on(ImageEvent.LOADED, (e) => {
+                if (e.attrName === 'fill' && e.attrValue.url === this.url)
+                    this.image = e.image;
+            });
         }
         destroy() {
             this.image = null;
@@ -9188,11 +9229,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 +9248,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 +9434,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 +9637,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 +9670,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 +9693,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 +9821,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 +9850,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));
         }
@@ -9821,6 +9859,7 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.App);
 
+    let origin = {};
     const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
     function fillOrFitMode(data, mode, box, width, height, rotation) {
         const transform = get$4();
@@ -9837,13 +9876,13 @@ var LeaferUI = (function (exports) {
         data.scaleX = data.scaleY = scale;
         data.transform = transform;
     }
-    function clipMode(data, box, offset, scale, rotation) {
+    function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$4();
         translate$1(transform, box.x, box.y);
-        if (offset)
-            translate$1(transform, offset.x, offset.y);
-        if (scale) {
-            typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y);
+        if (x || y)
+            translate$1(transform, x, y);
+        if (scaleX) {
+            scaleHelper(transform, scaleX, scaleY);
             data.scaleX = transform.a;
             data.scaleY = transform.d;
         }
@@ -9851,7 +9890,7 @@ var LeaferUI = (function (exports) {
             rotate(transform, rotation);
         data.transform = transform;
     }
-    function repeatMode(data, box, width, height, scale, rotation) {
+    function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation) {
         const transform = get$4();
         if (rotation) {
             rotate(transform, rotation);
@@ -9867,10 +9906,15 @@ var LeaferUI = (function (exports) {
                     break;
             }
         }
-        translate$1(transform, box.x, box.y);
-        if (scale) {
-            scaleOfOuter$2(transform, box, scale);
-            data.scaleX = data.scaleY = scale;
+        origin.x = box.x;
+        origin.y = box.y;
+        if (x || y)
+            origin.x += x, origin.y += y;
+        translate$1(transform, origin.x, origin.y);
+        if (scaleX) {
+            scaleOfOuter$2(transform, origin, scaleX, scaleY);
+            data.scaleX = scaleX;
+            data.scaleY = scaleY;
         }
         data.transform = transform;
     }
@@ -9878,11 +9922,22 @@ 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, size, rotation, blendMode, repeat } = paint;
         const sameBox = box.width === width && box.height === height;
         if (blendMode)
             leafPaint.blendMode = blendMode;
         const data = leafPaint.data = { mode };
+        let x, y, scaleX, scaleY;
+        if (offset)
+            x = offset.x, y = offset.y;
+        if (size) {
+            scaleX = (typeof size === 'number' ? size : size.width) / width;
+            scaleY = (typeof size === 'number' ? size : size.height) / height;
+        }
+        else if (scale) {
+            scaleX = typeof scale === 'number' ? scale : scale.x;
+            scaleY = typeof scale === 'number' ? scale : scale.y;
+        }
         switch (mode) {
             case 'strench':
                 if (!sameBox)
@@ -9893,12 +9948,14 @@ var LeaferUI = (function (exports) {
                 }
                 break;
             case 'clip':
-                if (offset || scale || rotation)
-                    clipMode(data, box, offset, scale, rotation);
+                if (offset || scaleX || rotation)
+                    clipMode(data, box, x, y, scaleX, scaleY, rotation);
                 break;
             case 'repeat':
-                if (!sameBox || scale || rotation)
-                    repeatMode(data, box, width, height, scale, rotation);
+                if (!sameBox || scaleX || rotation)
+                    repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation);
+                if (!repeat)
+                    data.repeat = 'repeat';
                 break;
             case 'fit':
             case 'cover':
@@ -9910,6 +9967,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 +10015,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 +10038,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 +10051,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 +10081,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 +10109,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 +11109,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    const { top, right, bottom, left } = exports.Direction4;
     const TextConvert = {
         getDrawData(content, style) {
             if (typeof content !== 'string')
@@ -11057,16 +11117,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 +11135,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 +11146,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) {
@@ -11171,6 +11258,7 @@ var LeaferUI = (function (exports) {
     exports.Animate = Animate;
     exports.AnimateEvent = AnimateEvent;
     exports.AroundHelper = AroundHelper;
+    exports.ArrowData = ArrowData;
     exports.AutoBounds = AutoBounds;
     exports.BezierHelper = BezierHelper;
     exports.Bounds = Bounds;