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

package/dist/web.module.js

@@ -101,14 +101,14 @@ const PI_2 = PI$4 / 2;
 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) {
@@ -119,7 +119,7 @@ const MatrixHelper = {
         t.e = e;
         t.f = f;
     },
-    get: get$5,
+    get: get$6,
     getWorld,
     copy(t, matrix) {
         t.a = matrix.a;
@@ -682,7 +682,7 @@ const { addPoint: addPoint$3 } = TwoPointBoundsHelper;
 
 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 = {
@@ -825,16 +825,16 @@ const BoundsHelper = {
         }
     },
     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);
@@ -900,16 +900,16 @@ const BoundsHelper = {
         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) {
@@ -1053,25 +1053,55 @@ class AutoBounds {
     }
 }
 
-const center = { x: 0.5, y: 0.5 };
+var Direction4;
+(function (Direction4) {
+    Direction4[Direction4["top"] = 0] = "top";
+    Direction4[Direction4["right"] = 1] = "right";
+    Direction4[Direction4["bottom"] = 2] = "bottom";
+    Direction4[Direction4["left"] = 3] = "left";
+})(Direction4 || (Direction4 = {}));
+var Direction9;
+(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";
+})(Direction9 || (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[Direction9[around]] : around;
+}
 
 const StringNumberMap = {
     '0': 1,
@@ -3086,7 +3116,6 @@ const PathScaler = {
                     break;
                 case G$1:
                     scalePoints(data, scaleX, scaleY, i, 2);
-                    console.log('G');
                     i += 9;
                     break;
                 case F$1:
@@ -3801,7 +3830,7 @@ LayoutEvent.CHECK_UPDATE = 'layout.check_update';
 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';
@@ -4450,13 +4479,10 @@ const LeafHelper = {
         }
     },
     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;
     },
@@ -5909,7 +5935,7 @@ const LeafRender = {
             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) {
@@ -5986,7 +6012,7 @@ const BranchRender = {
         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;
@@ -7332,6 +7358,8 @@ class LeaferCanvas extends LeaferCanvasBase {
         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);
@@ -8057,6 +8085,9 @@ class FrameData extends BoxData {
 class LineData extends UIData {
 }
 
+class ArrowData extends LineData {
+}
+
 class RectData extends UIData {
     get __boxStroke() { return true; }
 }
@@ -8115,6 +8146,25 @@ class TextData extends UIData {
 }
 
 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 {
@@ -8361,14 +8411,15 @@ let UI = UI_1 = class UI extends Leaf {
     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) {
@@ -8540,6 +8591,12 @@ __decorate([
 __decorate([
     strokeType(10)
 ], UI.prototype, "miterLimit", void 0);
+__decorate([
+    strokeType('none')
+], UI.prototype, "startArrow", void 0);
+__decorate([
+    strokeType('none')
+], UI.prototype, "endArrow", void 0);
 __decorate([
     pathType(0)
 ], UI.prototype, "cornerRadius", void 0);
@@ -9036,26 +9093,10 @@ let Image$1 = class Image extends Rect {
     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;
@@ -9185,11 +9226,12 @@ let Text = class Text extends UI {
     __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;
@@ -9203,9 +9245,8 @@ let Text = class Text extends UI {
             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);
@@ -9390,6 +9431,7 @@ let Leafer = class Leafer extends Group {
     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) {
@@ -9592,23 +9634,26 @@ let Leafer = class Leafer extends Group {
         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) {
@@ -9622,22 +9667,17 @@ let Leafer = class Leafer extends 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.update();
@@ -9650,7 +9690,8 @@ let Leafer = class Leafer extends Group {
         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);
@@ -9777,9 +9818,6 @@ let App = class App extends 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)
@@ -9809,7 +9847,7 @@ let App = class App extends Leafer {
     __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));
     }
@@ -9818,6 +9856,7 @@ App = __decorate([
     registerUI()
 ], 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();
@@ -9834,13 +9873,13 @@ function fillOrFitMode(data, mode, box, width, height, rotation) {
     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;
     }
@@ -9848,7 +9887,7 @@ function clipMode(data, box, offset, scale, rotation) {
         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);
@@ -9864,10 +9903,15 @@ function repeatMode(data, box, width, height, scale, rotation) {
                 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;
 }
@@ -9875,11 +9919,22 @@ function repeatMode(data, box, width, height, scale, rotation) {
 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)
@@ -9890,12 +9945,14 @@ function createData(leafPaint, image, paint, box) {
             }
             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':
@@ -9907,6 +9964,8 @@ function createData(leafPaint, image, paint, box) {
     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) {
@@ -9953,11 +10012,11 @@ function hasNaturalSize(ui, attrName, image) {
         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;
         }
     }
@@ -9976,7 +10035,7 @@ function createPattern(ui, paint, pixelRatio) {
         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);
@@ -9989,7 +10048,7 @@ function createPattern(ui, paint, pixelRatio) {
         width *= scaleX;
         height *= scaleY;
         const size = width * height;
-        if (paint.data.mode !== 'repeat') {
+        if (!repeat) {
             if (size > Platform.image.maxCacheSize)
                 return false;
         }
@@ -10019,7 +10078,7 @@ function createPattern(ui, paint, pixelRatio) {
             }
             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;
@@ -10047,7 +10106,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
     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;
@@ -11047,6 +11106,7 @@ function decorationText(drawData, style) {
     }
 }
 
+const { top, right, bottom, left } = Direction4;
 const TextConvert = {
     getDrawData(content, style) {
         if (typeof content !== 'string')
@@ -11054,16 +11114,15 @@ const TextConvert = {
         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 = {
@@ -11073,6 +11132,8 @@ const TextConvert = {
             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)
@@ -11082,6 +11143,32 @@ const TextConvert = {
         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) {
@@ -11165,4 +11252,4 @@ Object.assign(Export$1, Export);
 
 useCanvas();
 
-export { Animate, AnimateEvent, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert$1 as ColorConvert, Creator, Cursor, DataHelper, Debug, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export$1 as Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafHit, LeafLayout, LeafLevelList, LeafList, LeafMask, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, Path, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, PluginManager, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert$1 as TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIHit, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, effectType, eraserType, getDescriptor, hitType, layoutProcessor, maskType, opacityType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, useCanvas, useModule, usePlugin };
+export { Animate, AnimateEvent, App, AroundHelper, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert$1 as ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export$1 as Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafHit, LeafLayout, LeafLevelList, LeafList, LeafMask, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, Path, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, PluginManager, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert$1 as TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIHit, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, effectType, eraserType, getDescriptor, hitType, layoutProcessor, maskType, opacityType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, useCanvas, useModule, usePlugin };