taffy-layout 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taffy-layout",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "WebAssembly bindings for Taffy layout library",
   "keywords": [
     "layout",

package/pkg/taffy_wasm.d.ts

@@ -597,6 +597,74 @@ export type StyleProperty =
   | "gridAutoRows" | "gridAutoColumns"
   | "gridTemplateAreas" | "gridTemplateRowNames" | "gridTemplateColumnNames";
 
+/**
+ * Valid property keys for Layout.get() method.
+ *
+ * Supports both object properties and individual flat properties.
+ *
+ * @example
+ * ```typescript
+ * import { TaffyTree, Style } from "taffy-layout";
+ *
+ * const tree = new TaffyTree();
+ * const root = tree.newLeaf(new Style());
+ * tree.computeLayout(root, { width: 100, height: 100 });
+ * const layout = tree.getLayout(root);
+ * // Object properties
+ * layout.get("position", "size");
+ *
+ * // Individual flat properties
+ * layout.get("width", "height", "marginLeft");
+ *
+ * // Mixed
+ * layout.get("position", "width", "paddingTop");
+ *
+ * tree.free();
+ * ```
+ */
+export type LayoutProperty =
+  // Rendering order
+  | "order"
+  // Position
+  | "position" | "x" | "y"
+  // Size
+  | "size" | "width" | "height"
+  // Content size
+  | "contentSize" | "contentWidth" | "contentHeight"
+  // Scrollbar size
+  | "scrollbarSize" | "scrollbarWidth" | "scrollbarHeight"
+  // Border
+  | "border" | "borderLeft" | "borderRight" | "borderTop" | "borderBottom"
+  // Padding
+  | "padding" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom"
+  // Margin
+  | "margin" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom";
+
+/**
+ * Type-safe property values for Layout.get().
+ *
+ * Maps property paths to their expected value types.
+ */
+export type LayoutPropertyValues = {
+  [K in LayoutProperty]:
+    K extends "order" ? number :
+    K extends "position" ? Point<number> :
+    K extends "x" | "y" ? number :
+    K extends "size" ? Size<number> :
+    K extends "width" | "height" ? number :
+    K extends "contentSize" ? Size<number> :
+    K extends "contentWidth" | "contentHeight" ? number :
+    K extends "scrollbarSize" ? Size<number> :
+    K extends "scrollbarWidth" | "scrollbarHeight" ? number :
+    K extends "border" ? Rect<number> :
+    K extends "borderLeft" | "borderRight" | "borderTop" | "borderBottom" ? number :
+    K extends "padding" ? Rect<number> :
+    K extends "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" ? number :
+    K extends "margin" ? Rect<number> :
+    K extends "marginLeft" | "marginRight" | "marginTop" | "marginBottom" ? number :
+    unknown;
+};
+
 /**
  * Type-safe property values for batch setting.
  *
@@ -712,6 +780,56 @@ declare module "./taffy_wasm" {
      */
     set(props: StylePropertyValues): void;
   }
+
+  interface Layout {
+    /**
+     * Reads multiple layout properties in a single WASM call.
+     * Supports both object properties and individual flat properties.
+     *
+     * @returns Single value for one key, tuple for 2-3 keys, array for 4+ keys
+     *
+     * @throws Error if any property key is unknown.
+     *
+     * @remarks
+     * - Single property: returns exact value type
+     * - 2-3 properties: returns typed tuple for destructuring
+     * - 4+ properties: returns array of union types
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     *
+     * // Single property - returns exact type
+     * const width = layout.get("width"); // number
+     *
+     * // Two properties - returns tuple for destructuring
+     * const [pos, size] = layout.get("position", "size");
+     * // pos: Point<number>, size: Size<number>
+     *
+     * // Three properties - returns tuple for destructuring
+     * const [x, y, w] = layout.get("x", "y", "width");
+     *
+     * // Four or more properties - returns array
+     * const values = layout.get("x", "y", "width", "height");
+     * // values type is: number[]
+     *
+     * tree.free();
+     * ```
+     */
+    get<K extends LayoutProperty>(...keys: [K]): LayoutPropertyValues[K];
+    get<K1 extends LayoutProperty, K2 extends LayoutProperty>(
+      ...keys: [K1, K2]
+    ): [LayoutPropertyValues[K1], LayoutPropertyValues[K2]];
+    get<K1 extends LayoutProperty, K2 extends LayoutProperty, K3 extends LayoutProperty>(
+      ...keys: [K1, K2, K3]
+    ): [LayoutPropertyValues[K1], LayoutPropertyValues[K2], LayoutPropertyValues[K3]];
+    get<Keys extends LayoutProperty[]>(...keys: Keys): LayoutPropertyArrayValues<Keys>;
+  }
 }
 
 /**
@@ -722,6 +840,13 @@ type StylePropertyArrayValues<Keys extends StyleProperty[]> = {
   [K in keyof Keys]: Keys[K] extends StyleProperty ? StylePropertyValues[Keys[K]] : unknown;
 };
 
+/**
+ * Helper type to convert an array of layout property keys to an array of their value types.
+ */
+type LayoutPropertyArrayValues<Keys extends LayoutProperty[]> = {
+  [K in keyof Keys]: Keys[K] extends LayoutProperty ? LayoutPropertyValues[Keys[K]] : unknown;
+};
+
 
 
 /**
@@ -1155,6 +1280,28 @@ export class Layout {
    * @returns - The computed right border width in pixels
    */
   readonly borderRight: number;
+  /**
+   * Gets the content size as a Size with contentWidth and contentHeight
+   *
+   * If the node has overflow content, this represents the total size of all content
+   * (may exceed the node's width/height).
+   *
+   * @returns - A Size with contentWidth and contentHeight in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const contentSize = layout.contentSize;
+   * console.log(`Content: ${contentSize.width} x ${contentSize.height}`);
+   * tree.free();
+   * ```
+   */
+  readonly contentSize: any;
   /**
    * Gets the right margin
    *
@@ -1209,6 +1356,27 @@ export class Layout {
    * @returns - The computed bottom padding in pixels
    */
   readonly paddingBottom: number;
+  /**
+   * Gets the scrollbar size as a Size with scrollbarWidth and scrollbarHeight
+   *
+   * When overflow is set to scroll, this indicates the space reserved for scrollbars.
+   *
+   * @returns - A Size with scrollbarWidth and scrollbarHeight in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const scrollbarSize = layout.scrollbarSize;
+   * console.log(`Scrollbar: ${scrollbarSize.width} x ${scrollbarSize.height}`);
+   * tree.free();
+   * ```
+   */
+  readonly scrollbarSize: any;
   /**
    * Gets the width of the vertical scrollbar
    *
@@ -1245,6 +1413,25 @@ export class Layout {
    * @returns - The vertical position in pixels
    */
   readonly y: number;
+  /**
+   * Gets the size as a Size with width and height
+   *
+   * @returns - A Size with width and height in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const size = layout.size;
+   * console.log(`Size: ${size.width} x ${size.height}`);
+   * tree.free();
+   * ```
+   */
+  readonly size: any;
   /**
    * Gets the rendering order of the node
    *
@@ -1263,6 +1450,25 @@ export class Layout {
    * @returns - The width in pixels
    */
   readonly width: number;
+  /**
+   * Gets the border as a Rect with left, right, top, bottom border widths
+   *
+   * @returns - A Rect with border widths in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const border = layout.border;
+   * console.log(`Border: ${border.left} ${border.right} ${border.top} ${border.bottom}`);
+   * tree.free();
+   * ```
+   */
+  readonly border: any;
   /**
    * Gets the computed height of the node
    *
@@ -1272,6 +1478,63 @@ export class Layout {
    * @returns - The height in pixels
    */
   readonly height: number;
+  /**
+   * Gets the margin as a Rect with left, right, top, bottom margins
+   *
+   * @returns - A Rect with margin values in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const margin = layout.margin;
+   * console.log(`Margin: ${margin.left} ${margin.right} ${margin.top} ${margin.bottom}`);
+   * tree.free();
+   * ```
+   */
+  readonly margin: any;
+  /**
+   * Gets the padding as a Rect with left, right, top, bottom padding
+   *
+   * @returns - A Rect with padding values in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const padding = layout.padding;
+   * console.log(`Padding: ${padding.left} ${padding.right} ${padding.top} ${padding.bottom}`);
+   * tree.free();
+   * ```
+   */
+  readonly padding: any;
+  /**
+   * Gets the position as a Point with x and y coordinates
+   *
+   * @returns - A Point with x and y coordinates in pixels
+   *
+   * @example
+   * ```typescript
+   * import { TaffyTree, Style } from "taffy-layout";
+   *
+   * const tree = new TaffyTree();
+   * const root = tree.newLeaf(new Style());
+   * tree.computeLayout(root, { width: 100, height: 100 });
+   * const layout = tree.getLayout(root);
+   * const pos = layout.position;
+   * console.log(`Position: (${pos.x}, ${pos.y})`);
+   * tree.free();
+   * ```
+   */
+  readonly position: any;
 }
 
 /**
@@ -2676,24 +2939,32 @@ export interface InitOutput {
   readonly __wbg_style_free: (a: number, b: number) => void;
   readonly __wbg_taffyerror_free: (a: number, b: number) => void;
   readonly __wbg_taffytree_free: (a: number, b: number) => void;
+  readonly layout_border: (a: number) => any;
   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_contentSize: (a: number) => any;
   readonly layout_contentWidth: (a: number) => number;
+  readonly layout_get: (a: number, b: number, c: number) => any;
   readonly layout_height: (a: number) => number;
+  readonly layout_margin: (a: number) => any;
   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_padding: (a: number) => any;
   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_position: (a: number) => any;
   readonly layout_scrollbarHeight: (a: number) => number;
+  readonly layout_scrollbarSize: (a: number) => any;
   readonly layout_scrollbarWidth: (a: number) => number;
+  readonly layout_size: (a: number) => any;
   readonly layout_width: (a: number) => number;
   readonly layout_x: (a: number) => number;
   readonly layout_y: (a: number) => number;

package/pkg/taffy_wasm.js

@@ -723,6 +723,32 @@ export class Layout {
         const ret = wasm.layout_borderRight(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * Gets the content size as a Size with contentWidth and contentHeight
+     *
+     * If the node has overflow content, this represents the total size of all content
+     * (may exceed the node's width/height).
+     *
+     * @returns - A Size with contentWidth and contentHeight in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const contentSize = layout.contentSize;
+     * console.log(`Content: ${contentSize.width} x ${contentSize.height}`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get contentSize() {
+        const ret = wasm.layout_contentSize(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the right margin
      *
@@ -809,6 +835,31 @@ export class Layout {
         const ret = wasm.layout_paddingBottom(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * Gets the scrollbar size as a Size with scrollbarWidth and scrollbarHeight
+     *
+     * When overflow is set to scroll, this indicates the space reserved for scrollbars.
+     *
+     * @returns - A Size with scrollbarWidth and scrollbarHeight in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const scrollbarSize = layout.scrollbarSize;
+     * console.log(`Scrollbar: ${scrollbarSize.width} x ${scrollbarSize.height}`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get scrollbarSize() {
+        const ret = wasm.layout_scrollbarSize(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the width of the vertical scrollbar
      *
@@ -861,6 +912,68 @@ export class Layout {
         const ret = wasm.layout_y(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * Reads multiple layout properties in a single WASM call.
+     *
+     * Supports both compound properties and individual flat properties.
+     *
+     * @throws Error if any property key is unknown.
+     *
+     * @param keys - Property keys to read
+     * @returns - Single value if one key, array of values if multiple keys
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 800, height: 600 });
+     * const layout = tree.getLayout(root);
+     *
+     * // Read single property
+     * const width = layout.get("width");
+     *
+     * // Read compound property
+     * const pos = layout.get("position");
+     *
+     * // Read multiple properties with destructuring
+     * const [position, size] = layout.get("position", "size");
+     *
+     * tree.free();
+     * ```
+     * @param {...string[]} keys
+     * @returns {any}
+     */
+    get(...keys) {
+        const ptr0 = passArrayJsValueToWasm0(keys, wasm.__wbindgen_malloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.layout_get(this.__wbg_ptr, ptr0, len0);
+        return ret;
+    }
+    /**
+     * Gets the size as a Size with width and height
+     *
+     * @returns - A Size with width and height in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const size = layout.size;
+     * console.log(`Size: ${size.width} x ${size.height}`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get size() {
+        const ret = wasm.layout_size(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the rendering order of the node
      *
@@ -887,6 +1000,29 @@ export class Layout {
         const ret = wasm.layout_width(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * Gets the border as a Rect with left, right, top, bottom border widths
+     *
+     * @returns - A Rect with border widths in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const border = layout.border;
+     * console.log(`Border: ${border.left} ${border.right} ${border.top} ${border.bottom}`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get border() {
+        const ret = wasm.layout_border(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the computed height of the node
      *
@@ -900,6 +1036,75 @@ export class Layout {
         const ret = wasm.layout_height(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * Gets the margin as a Rect with left, right, top, bottom margins
+     *
+     * @returns - A Rect with margin values in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const margin = layout.margin;
+     * console.log(`Margin: ${margin.left} ${margin.right} ${margin.top} ${margin.bottom}`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get margin() {
+        const ret = wasm.layout_margin(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the padding as a Rect with left, right, top, bottom padding
+     *
+     * @returns - A Rect with padding values in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const padding = layout.padding;
+     * console.log(`Padding: ${padding.left} ${padding.right} ${padding.top} ${padding.bottom}`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get padding() {
+        const ret = wasm.layout_padding(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the position as a Point with x and y coordinates
+     *
+     * @returns - A Point with x and y coordinates in pixels
+     *
+     * @example
+     * ```typescript
+     * import { TaffyTree, Style } from "taffy-layout";
+     *
+     * const tree = new TaffyTree();
+     * const root = tree.newLeaf(new Style());
+     * tree.computeLayout(root, { width: 100, height: 100 });
+     * const layout = tree.getLayout(root);
+     * const pos = layout.position;
+     * console.log(`Position: (${pos.x}, ${pos.y})`);
+     * tree.free();
+     * ```
+     * @returns {any}
+     */
+    get position() {
+        const ret = wasm.layout_position(this.__wbg_ptr);
+        return ret;
+    }
 }
 if (Symbol.dispose) Layout.prototype[Symbol.dispose] = Layout.prototype.free;
 

package/pkg/taffy_wasm_bg.wasm.d.ts

@@ -5,24 +5,32 @@ export const __wbg_layout_free: (a: number, b: number) => void;
 export const __wbg_style_free: (a: number, b: number) => void;
 export const __wbg_taffyerror_free: (a: number, b: number) => void;
 export const __wbg_taffytree_free: (a: number, b: number) => void;
+export const layout_border: (a: number) => any;
 export const layout_borderBottom: (a: number) => number;
 export const layout_borderLeft: (a: number) => number;
 export const layout_borderRight: (a: number) => number;
 export const layout_borderTop: (a: number) => number;
 export const layout_contentHeight: (a: number) => number;
+export const layout_contentSize: (a: number) => any;
 export const layout_contentWidth: (a: number) => number;
+export const layout_get: (a: number, b: number, c: number) => any;
 export const layout_height: (a: number) => number;
+export const layout_margin: (a: number) => any;
 export const layout_marginBottom: (a: number) => number;
 export const layout_marginLeft: (a: number) => number;
 export const layout_marginRight: (a: number) => number;
 export const layout_marginTop: (a: number) => number;
 export const layout_order: (a: number) => number;
+export const layout_padding: (a: number) => any;
 export const layout_paddingBottom: (a: number) => number;
 export const layout_paddingLeft: (a: number) => number;
 export const layout_paddingRight: (a: number) => number;
 export const layout_paddingTop: (a: number) => number;
+export const layout_position: (a: number) => any;
 export const layout_scrollbarHeight: (a: number) => number;
+export const layout_scrollbarSize: (a: number) => any;
 export const layout_scrollbarWidth: (a: number) => number;
+export const layout_size: (a: number) => any;
 export const layout_width: (a: number) => number;
 export const layout_x: (a: number) => number;
 export const layout_y: (a: number) => number;