taffy-js 0.2.1 → 0.2.3

package/README.md

@@ -229,6 +229,7 @@ const style = new Style();
 | `min_size`     | `{ width, height }` | Minimum size constraints |
 | `max_size`     | `{ width, height }` | Maximum size constraints |
 | `aspect_ratio` | `number?`           | Width-to-height ratio    |
+| `box_sizing`   | `BoxSizing`         | Size calculation mode    |
 
 #### Spacing
 
@@ -416,6 +417,13 @@ Overflow.Scroll; // Always show scrollbars
 Overflow.Auto; // Show scrollbars when needed
 ```
 
+#### BoxSizing
+
+```typescript
+BoxSizing.BorderBox; // Include padding/border in size (default)
+BoxSizing.ContentBox; // Size is content only
+```
+
 ---
 
 ## 📏 Custom Measurement

package/package.json

@@ -5,7 +5,7 @@
     "ByteLandTechnology <github@byteland.app>"
   ],
   "description": "WebAssembly bindings for Taffy layout library",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "license": "MIT",
   "repository": {
     "type": "git",

package/taffy_js.d.ts

@@ -66,6 +66,20 @@ export enum AlignSelf {
   Stretch = 7,
 }
 
+/**
+ * Box sizing enum
+ * 
+ * Controls how the total width and height of an element is calculated.
+ * 
+ * # Variants
+ * - `BorderBox`: Width and height include content, padding, and border (default)
+ * - `ContentBox`: Width and height include only the content
+ */
+export enum BoxSizing {
+  BorderBox = 0,
+  ContentBox = 1,
+}
+
 /**
  * Display mode enum
  * 
@@ -144,6 +158,96 @@ export enum JustifyContent {
   SpaceEvenly = 8,
 }
 
+export class Layout {
+  private constructor();
+  free(): void;
+  [Symbol.dispose](): void;
+  /**
+   * Gets the top border width.
+   */
+  readonly borderTop: number;
+  /**
+   * Gets the top margin.
+   */
+  readonly marginTop: number;
+  /**
+   * Gets the left border width.
+   */
+  readonly borderLeft: number;
+  /**
+   * Gets the left margin.
+   */
+  readonly marginLeft: number;
+  /**
+   * Gets the top padding.
+   */
+  readonly paddingTop: number;
+  /**
+   * Gets the right border width.
+   */
+  readonly borderRight: number;
+  /**
+   * Gets the right margin.
+   */
+  readonly marginRight: number;
+  /**
+   * Gets the left padding.
+   */
+  readonly paddingLeft: number;
+  /**
+   * Gets the bottom border width.
+   */
+  readonly borderBottom: number;
+  /**
+   * Gets the width of the scrollable content.
+   */
+  readonly contentWidth: number;
+  /**
+   * Gets the bottom margin.
+   */
+  readonly marginBottom: number;
+  /**
+   * Gets the right padding.
+   */
+  readonly paddingRight: number;
+  /**
+   * Gets the height of the scrollable content.
+   */
+  readonly contentHeight: number;
+  /**
+   * Gets the bottom padding.
+   */
+  readonly paddingBottom: number;
+  /**
+   * Gets the width of the vertical scrollbar.
+   */
+  readonly scrollbarWidth: number;
+  /**
+   * Gets the height of the horizontal scrollbar.
+   */
+  readonly scrollbarHeight: number;
+  /**
+   * Gets the x coordinate of the node's top-left corner.
+   */
+  readonly x: number;
+  /**
+   * Gets the y coordinate of the node's top-left corner.
+   */
+  readonly y: number;
+  /**
+   * Gets the rendering order of the node.
+   */
+  readonly order: number;
+  /**
+   * Gets the computed width of the node.
+   */
+  readonly width: number;
+  /**
+   * Gets the computed height of the node.
+   */
+  readonly height: number;
+}
+
 /**
  * Overflow handling enum
  * 
@@ -209,6 +313,10 @@ export class Style {
    * Sets the align-self property. Use AlignSelf.Auto to inherit from parent.
    */
   set align_self(value: AlignSelf | null | undefined);
+  /**
+   * Gets the box sizing mode (BorderBox or ContentBox).
+   */
+  box_sizing: BoxSizing;
   /**
    * Gets the flex-basis as a JsDimension (Length, Percent, or Auto).
    * Flex-basis defines the initial main size before grow/shrink.
@@ -469,9 +577,9 @@ export class TaffyTree {
    * * `node` - The node ID to query.
    * 
    * # Returns
-   * A layout object with potentially fractional values.
+   * A `Layout` object with potentially fractional pixel values.
    */
-  unroundedLayout(node: bigint): any;
+  unroundedLayout(node: bigint): Layout;
   /**
    * Creates a new node with the given children.
    * 
@@ -636,9 +744,9 @@ export class TaffyTree {
    * * `node` - The node ID to query.
    * 
    * # Returns
-   * A layout object: `{ order, size: {width, height}, location: {x, y}, ... }`
+   * A `Layout` object with computed position, size, and spacing values.
    */
-  getLayout(node: bigint): any;
+  getLayout(node: bigint): Layout;
   /**
    * Gets the parent of a node.
    * 
@@ -713,13 +821,36 @@ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembl
 
 export interface InitOutput {
   readonly memory: WebAssembly.Memory;
+  readonly __wbg_layout_free: (a: number, b: number) => void;
   readonly __wbg_style_free: (a: number, b: number) => void;
   readonly __wbg_taffytree_free: (a: number, b: number) => void;
+  readonly layout_borderBottom: (a: number) => number;
+  readonly layout_borderLeft: (a: number) => number;
+  readonly layout_borderRight: (a: number) => number;
+  readonly layout_borderTop: (a: number) => number;
+  readonly layout_contentHeight: (a: number) => number;
+  readonly layout_contentWidth: (a: number) => number;
+  readonly layout_height: (a: number) => number;
+  readonly layout_marginBottom: (a: number) => number;
+  readonly layout_marginLeft: (a: number) => number;
+  readonly layout_marginRight: (a: number) => number;
+  readonly layout_marginTop: (a: number) => number;
+  readonly layout_order: (a: number) => number;
+  readonly layout_paddingBottom: (a: number) => number;
+  readonly layout_paddingLeft: (a: number) => number;
+  readonly layout_paddingRight: (a: number) => number;
+  readonly layout_paddingTop: (a: number) => number;
+  readonly layout_scrollbarHeight: (a: number) => number;
+  readonly layout_scrollbarWidth: (a: number) => number;
+  readonly layout_width: (a: number) => number;
+  readonly layout_x: (a: number) => number;
+  readonly layout_y: (a: number) => number;
   readonly style_align_content: (a: number) => number;
   readonly style_align_items: (a: number) => number;
   readonly style_align_self: (a: number) => number;
   readonly style_aspect_ratio: (a: number) => number;
   readonly style_border: (a: number) => any;
+  readonly style_box_sizing: (a: number) => number;
   readonly style_display: (a: number) => number;
   readonly style_flex_basis: (a: number) => any;
   readonly style_flex_direction: (a: number) => number;
@@ -741,6 +872,7 @@ export interface InitOutput {
   readonly style_set_align_self: (a: number, b: number) => void;
   readonly style_set_aspect_ratio: (a: number, b: number) => void;
   readonly style_set_border: (a: number, b: any) => void;
+  readonly style_set_box_sizing: (a: number, b: number) => void;
   readonly style_set_display: (a: number, b: number) => void;
   readonly style_set_flex_basis: (a: number, b: any) => void;
   readonly style_set_flex_direction: (a: number, b: number) => void;

package/taffy_js.js

@@ -219,6 +219,10 @@ if (!('encodeInto' in cachedTextEncoder)) {
 
 let WASM_VECTOR_LEN = 0;
 
+const LayoutFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_layout_free(ptr >>> 0, 1));
+
 const StyleFinalization = (typeof FinalizationRegistry === 'undefined')
     ? { register: () => {}, unregister: () => {} }
     : new FinalizationRegistry(ptr => wasm.__wbg_style_free(ptr >>> 0, 1));
@@ -295,6 +299,21 @@ export const AlignSelf = Object.freeze({
     Stretch: 7, "7": "Stretch",
 });
 
+/**
+ * Box sizing enum
+ *
+ * Controls how the total width and height of an element is calculated.
+ *
+ * # Variants
+ * - `BorderBox`: Width and height include content, padding, and border (default)
+ * - `ContentBox`: Width and height include only the content
+ * @enum {0 | 1}
+ */
+export const BoxSizing = Object.freeze({
+    BorderBox: 0, "0": "BorderBox",
+    ContentBox: 1, "1": "ContentBox",
+});
+
 /**
  * Display mode enum
  *
@@ -377,6 +396,212 @@ export const JustifyContent = Object.freeze({
     SpaceEvenly: 8, "8": "SpaceEvenly",
 });
 
+/**
+ * Layout result struct
+ *
+ * A wrapper around `taffy::Layout` that provides WASM bindings.
+ * Contains the computed layout values for a node after calling `computeLayout()`.
+ * All values are in pixels.
+ *
+ * # Properties
+ * - `order`: Rendering order (higher = on top)
+ * - `x`, `y`: Position of top-left corner relative to parent
+ * - `width`, `height`: Computed dimensions
+ * - `contentWidth`, `contentHeight`: Size of scrollable content
+ * - `scrollbarWidth`, `scrollbarHeight`: Size allocated for scrollbars
+ * - `borderLeft`, `borderRight`, `borderTop`, `borderBottom`: Border widths
+ * - `paddingLeft`, `paddingRight`, `paddingTop`, `paddingBottom`: Padding sizes
+ * - `marginLeft`, `marginRight`, `marginTop`, `marginBottom`: Margin sizes
+ */
+export class Layout {
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(Layout.prototype);
+        obj.__wbg_ptr = ptr;
+        LayoutFinalization.register(obj, obj.__wbg_ptr, obj);
+        return obj;
+    }
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        LayoutFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_layout_free(ptr, 0);
+    }
+    /**
+     * Gets the top border width.
+     * @returns {number}
+     */
+    get borderTop() {
+        const ret = wasm.layout_borderTop(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the top margin.
+     * @returns {number}
+     */
+    get marginTop() {
+        const ret = wasm.layout_marginTop(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the left border width.
+     * @returns {number}
+     */
+    get borderLeft() {
+        const ret = wasm.layout_borderLeft(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the left margin.
+     * @returns {number}
+     */
+    get marginLeft() {
+        const ret = wasm.layout_marginLeft(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the top padding.
+     * @returns {number}
+     */
+    get paddingTop() {
+        const ret = wasm.layout_paddingTop(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the right border width.
+     * @returns {number}
+     */
+    get borderRight() {
+        const ret = wasm.layout_borderRight(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the right margin.
+     * @returns {number}
+     */
+    get marginRight() {
+        const ret = wasm.layout_marginRight(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the left padding.
+     * @returns {number}
+     */
+    get paddingLeft() {
+        const ret = wasm.layout_paddingLeft(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the bottom border width.
+     * @returns {number}
+     */
+    get borderBottom() {
+        const ret = wasm.layout_borderBottom(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the width of the scrollable content.
+     * @returns {number}
+     */
+    get contentWidth() {
+        const ret = wasm.layout_contentWidth(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the bottom margin.
+     * @returns {number}
+     */
+    get marginBottom() {
+        const ret = wasm.layout_marginBottom(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the right padding.
+     * @returns {number}
+     */
+    get paddingRight() {
+        const ret = wasm.layout_paddingRight(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the height of the scrollable content.
+     * @returns {number}
+     */
+    get contentHeight() {
+        const ret = wasm.layout_contentHeight(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the bottom padding.
+     * @returns {number}
+     */
+    get paddingBottom() {
+        const ret = wasm.layout_paddingBottom(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the width of the vertical scrollbar.
+     * @returns {number}
+     */
+    get scrollbarWidth() {
+        const ret = wasm.layout_scrollbarWidth(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the height of the horizontal scrollbar.
+     * @returns {number}
+     */
+    get scrollbarHeight() {
+        const ret = wasm.layout_scrollbarHeight(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the x coordinate of the node's top-left corner.
+     * @returns {number}
+     */
+    get x() {
+        const ret = wasm.layout_x(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the y coordinate of the node's top-left corner.
+     * @returns {number}
+     */
+    get y() {
+        const ret = wasm.layout_y(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the rendering order of the node.
+     * @returns {number}
+     */
+    get order() {
+        const ret = wasm.layout_order(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * Gets the computed width of the node.
+     * @returns {number}
+     */
+    get width() {
+        const ret = wasm.layout_width(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the computed height of the node.
+     * @returns {number}
+     */
+    get height() {
+        const ret = wasm.layout_height(this.__wbg_ptr);
+        return ret;
+    }
+}
+if (Symbol.dispose) Layout.prototype[Symbol.dispose] = Layout.prototype.free;
+
 /**
  * Overflow handling enum
  *
@@ -471,6 +696,14 @@ export class Style {
         const ret = wasm.style_align_self(this.__wbg_ptr);
         return ret === 8 ? undefined : ret;
     }
+    /**
+     * Gets the box sizing mode (BorderBox or ContentBox).
+     * @returns {BoxSizing}
+     */
+    get box_sizing() {
+        const ret = wasm.style_box_sizing(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the flex-basis as a JsDimension (Length, Percent, or Auto).
      * Flex-basis defines the initial main size before grow/shrink.
@@ -607,6 +840,15 @@ export class Style {
     set align_self(val) {
         wasm.style_set_align_self(this.__wbg_ptr, isLikeNone(val) ? 8 : val);
     }
+    /**
+     * Sets the box sizing mode.
+     * - `BoxSizing.BorderBox`: Width and height include content, padding, and border (default)
+     * - `BoxSizing.ContentBox`: Width and height include only the content
+     * @param {BoxSizing} val
+     */
+    set box_sizing(val) {
+        wasm.style_set_box_sizing(this.__wbg_ptr, val);
+    }
     /**
      * Sets the flex-basis. Accepts { Length: number } | { Percent: number } | "Auto".
      * @param {any} val
@@ -1097,16 +1339,16 @@ export class TaffyTree {
      * * `node` - The node ID to query.
      *
      * # Returns
-     * A layout object with potentially fractional values.
+     * A `Layout` object with potentially fractional pixel values.
      * @param {bigint} node
-     * @returns {any}
+     * @returns {Layout}
      */
     unroundedLayout(node) {
         const ret = wasm.taffytree_unroundedLayout(this.__wbg_ptr, node);
         if (ret[2]) {
             throw takeFromExternrefTable0(ret[1]);
         }
-        return takeFromExternrefTable0(ret[0]);
+        return Layout.__wrap(ret[0]);
     }
     /**
      * Creates a new node with the given children.
@@ -1380,16 +1622,16 @@ export class TaffyTree {
      * * `node` - The node ID to query.
      *
      * # Returns
-     * A layout object: `{ order, size: {width, height}, location: {x, y}, ... }`
+     * A `Layout` object with computed position, size, and spacing values.
      * @param {bigint} node
-     * @returns {any}
+     * @returns {Layout}
      */
     getLayout(node) {
         const ret = wasm.taffytree_getLayout(this.__wbg_ptr, node);
         if (ret[2]) {
             throw takeFromExternrefTable0(ret[1]);
         }
-        return takeFromExternrefTable0(ret[0]);
+        return Layout.__wrap(ret[0]);
     }
     /**
      * Gets the parent of a node.
@@ -1664,7 +1906,7 @@ function __wbg_get_imports() {
         const ret = arg0.length;
         return ret;
     };
-    imports.wbg.__wbg_log_730ba2e365bddb50 = function(arg0, arg1) {
+    imports.wbg.__wbg_log_b0b3f53073d3e573 = function(arg0, arg1) {
         console.log(getStringFromWasm0(arg0, arg1));
     };
     imports.wbg.__wbg_new_1ba21ce319a06297 = function() {