taffy-wasm 0.9.4 → 0.9.5

package/README.md

@@ -44,18 +44,13 @@ async function main() {
   containerStyle.display = Display.Flex;
   containerStyle.flexDirection = FlexDirection.Column;
   containerStyle.alignItems = AlignItems.Center;
-  containerStyle.size = { width: { Length: 300 }, height: { Length: 200 } };
-  containerStyle.padding = {
-    left: { Length: 10 },
-    right: { Length: 10 },
-    top: { Length: 10 },
-    bottom: { Length: 10 },
-  };
+  containerStyle.size = { width: 300, height: 200 };
+  containerStyle.padding = { left: 10, right: 10, top: 10, bottom: 10 };
 
   // Create child styles
   const childStyle = new Style();
   childStyle.flexGrow = 1;
-  childStyle.size = { width: { Percent: 100 }, height: "Auto" };
+  childStyle.size = { width: "100%", height: "auto" };
 
   // Create nodes
   const child1 = tree.newLeaf(childStyle);
@@ -66,10 +61,7 @@ async function main() {
   );
 
   // Compute layout
-  tree.computeLayout(container, {
-    width: { Definite: 300 },
-    height: { Definite: 200 },
-  });
+  tree.computeLayout(container, { width: 300, height: 200 });
 
   // Read computed layouts
   const containerLayout = tree.getLayout(container);
@@ -311,10 +303,10 @@ enum BoxSizing {
 ### Types
 
 ```typescript
-// Dimension values
-type Dimension = { Length: number } | { Percent: number } | "Auto";
-type LengthPercentage = { Length: number } | { Percent: number };
-type LengthPercentageAuto = { Length: number } | { Percent: number } | "Auto";
+// Dimension values (CSS-like syntax)
+type Dimension = number | `${number}%` | "auto"; // e.g., 100, "50%", "auto"
+type LengthPercentage = number | `${number}%`; // e.g., 10, "25%"
+type LengthPercentageAuto = number | `${number}%` | "auto";
 
 // Geometry
 interface Size<T> {
@@ -333,7 +325,7 @@ interface Point<T> {
 }
 
 // Available space for layout computation
-type AvailableSpace = { Definite: number } | "MinContent" | "MaxContent";
+type AvailableSpace = number | "MinContent" | "MaxContent";
 
 // Measure function for custom content measurement
 type MeasureFunction = (
@@ -354,7 +346,7 @@ const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
 
 tree.computeLayoutWithMeasure(
   rootNode,
-  { width: { Definite: 800 }, height: "MaxContent" },
+  { width: 800, height: "MaxContent" },
   (known, available, node, context, style) => {
     if (context?.text) {
       // Your text measurement logic here
@@ -399,7 +391,7 @@ const rowStyle = new Style();
 rowStyle.display = Display.Flex;
 rowStyle.flexDirection = FlexDirection.Row;
 rowStyle.justifyContent = JustifyContent.SpaceBetween;
-rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
+rowStyle.gap = { width: 10, height: 0 };
 ```
 
 ### Absolute Positioning
@@ -407,13 +399,8 @@ rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
 ```javascript
 const absoluteStyle = new Style();
 absoluteStyle.position = Position.Absolute;
-absoluteStyle.inset = {
-  left: { Length: 10 },
-  top: { Length: 10 },
-  right: "Auto",
-  bottom: "Auto",
-};
-absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
+absoluteStyle.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
+absoluteStyle.size = { width: 100, height: 50 };
 ```
 
 ### Percentage Sizing
@@ -421,8 +408,8 @@ absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
 ```javascript
 const percentStyle = new Style();
 percentStyle.size = {
-  width: { Percent: 50 }, // 50% of parent
-  height: { Percent: 100 }, // 100% of parent
+  width: "50%", // 50% of parent
+  height: "100%", // 100% of parent
 };
 ```
 
@@ -430,7 +417,7 @@ percentStyle.size = {
 
 ```bash
 # Clone the repository
-git clone https://github.com/user/taffy-js.git
+git clone https://github.com/ByteLandTechnology/taffy-js.git
 cd taffy-js
 
 # Install dependencies

package/package.json

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

package/taffy_wasm.d.ts

@@ -56,8 +56,8 @@ export type AvailableSpace = number | "minContent" | "maxContent";
  * const pixelSize: Size<number> = { width: 200, height: 100 };
  *
  * const dimensionSize: Size<Dimension> = {
- *   width: { Length: 200 },
- *   height: { Percent: 50 }
+ *   width: 200,
+ *   height: "50%"
  * };
  *
  * const availableSize: Size<AvailableSpace> = {
@@ -981,8 +981,8 @@ export enum Position {
  * - `flexGrow`: `0`
  * - `flexShrink`: `1`
  * - All alignment properties: `undefined` (use default behavior)
- * - All dimensions: `"Auto"`
- * - All spacing: `{ Length: 0 }`
+ * - All dimensions: `"auto"`
+ * - All spacing: `0`
  * 
  */
 export class Style {
@@ -1023,7 +1023,7 @@ export class Style {
    *
    * The initial size of a flex item before growing/shrinking.
    *
-   * @returns - A `Dimension` value (`{ Length: n }`, `{ Percent: n }`, or `"Auto"`)
+   * @returns - A `Dimension` value (`number`, `\"{number}%\"`, or `\"auto\"`)
    */
   flexBasis: Dimension;
   /**
@@ -1342,10 +1342,10 @@ export class TaffyTree {
    * @example
    * ```typescript
    * // Fixed size container
-   * { width: { Definite: 800 }, height: { Definite: 600 } }
+   * { width: 800, height: 600 }
    *
    * // Flexible width, fixed height
-   * { width: "MaxContent", height: { Definite: 600 } }
+   * { width: "MaxContent", height: 600 }
    *
    * // Minimum content size
    * { width: "MinContent", height: "MinContent" }
@@ -1355,7 +1355,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
-   * tree.computeLayout(rootId, { width: { Definite: 800 }, height: { Definite: 600 } });
+   * tree.computeLayout(rootId, { width: 800, height: 600 });
    * ```
    */
   computeLayout(node: bigint, available_space: Size<AvailableSpace>): void;
@@ -1609,7 +1609,7 @@ export class TaffyTree {
    * ```typescript
    * tree.computeLayoutWithMeasure(
    *   rootId,
-   *   { width: { Definite: 800 }, height: "MaxContent" },
+   *   { width: 800, height: "MaxContent" },
    *   (known, available, node, context, style) => {
    *     if (context?.text) {
    *       const measured = measureText(context.text, available.width);
@@ -1713,7 +1713,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
-   * tree.computeLayout(rootId, { width: { Definite: 800 }, height: { Definite: 600 } });
+   * tree.computeLayout(rootId, { width: 800, height: 600 });
    * const layout: Layout = tree.getLayout(nodeId);
    * console.log(`Position: (${layout.x}, ${layout.y}), Size: ${layout.width}x${layout.height}`);
    * ```
@@ -1782,7 +1782,7 @@ export class TaffyTree {
    * @example
    * ```typescript
    * const style = new Style();
-   * style.size = { width: { Length: 100 }, height: { Length: 50 } };
+   * style.size = { width: 100, height: 50 };
    * const nodeId: bigint = tree.newLeaf(style);
    * ```
    */

package/taffy_wasm.js

@@ -918,8 +918,8 @@ export const Position = Object.freeze({
  * - `flexGrow`: `0`
  * - `flexShrink`: `1`
  * - All alignment properties: `undefined` (use default behavior)
- * - All dimensions: `"Auto"`
- * - All spacing: `{ Length: 0 }`
+ * - All dimensions: `"auto"`
+ * - All spacing: `0`
  */
 export class Style {
     static __wrap(ptr) {
@@ -970,7 +970,7 @@ export class Style {
      *
      * The initial size of a flex item before growing/shrinking.
      *
-     * @returns - A `Dimension` value (`{ Length: n }`, `{ Percent: n }`, or `"Auto"`)
+     * @returns - A `Dimension` value (`number`, `\"{number}%\"`, or `\"auto\"`)
      * @returns {Dimension}
      */
     get flexBasis() {
@@ -984,7 +984,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.border = { left: { Length: 1 }, right: { Length: 1 }, top: { Length: 1 }, bottom: { Length: 1 } };
+     * style.border = { left: 1, right: 1, top: 1, bottom: 1 };
      * ```
      * @param {Rect<LengthPercentage>} val
      */
@@ -998,7 +998,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.margin = { left: { Length: 10 }, right: { Length: 10 }, top: { Length: 5 }, bottom: { Length: 5 } };
+     * style.margin = { left: 10, right: 10, top: 5, bottom: 5 };
      * ```
      * @param {Rect<LengthPercentageAuto>} val
      */
@@ -1053,7 +1053,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.padding = { left: { Length: 20 }, right: { Length: 20 }, top: { Length: 10 }, bottom: { Length: 10 } };
+     * style.padding = { left: 20, right: 20, top: 10, bottom: 10 };
      * ```
      * @param {Rect<LengthPercentage>} val
      */
@@ -1079,7 +1079,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.maxSize = { width: "MaxContent", height: { Length: 500 } };
+     * style.maxSize = { width: "auto", height: 500 };
      * ```
      * @param {Size<Dimension>} val
      */
@@ -1093,7 +1093,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.minSize = { width: { Length: 100 }, height: "Auto" };
+     * style.minSize = { width: 100, height: "auto" };
      * ```
      * @param {Size<Dimension>} val
      */
@@ -1124,7 +1124,7 @@ export class Style {
      *
      * ```typescript
      * style.position = Position.Absolute;
-     * style.inset = { left: { Length: 10 }, top: { Length: 10 }, right: "Auto", bottom: "Auto" };
+     * style.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
      * ```
      * @param {Position} val
      */
@@ -1222,7 +1222,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.flexBasis = { Length: 100 };
+     * style.flexBasis = 100;
      * ```
      * @param {Dimension} val
      */
@@ -1436,7 +1436,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.gap = { width: { Length: 10 }, height: { Length: 10 } };
+     * style.gap = { width: 10, height: 10 };
      * ```
      * @param {Size<LengthPercentage>} val
      */
@@ -1496,7 +1496,7 @@ export class Style {
      *
      * @example
      * ```typescript
-     * style.size = { width: { Length: 200 }, height: { Percent: 100 } };
+     * style.size = { width: 200, height: "100%" };
      * ```
      * @param {Size<Dimension>} val
      */
@@ -1538,7 +1538,7 @@ export class Style {
      * @example
      * ```typescript
      * style.position = Position.Absolute;
-     * style.inset = { left: { Length: 0 }, top: { Length: 0 }, right: "Auto", bottom: "Auto" };
+     * style.inset = { left: 0, top: 0, right: "auto", bottom: "auto" };
      * ```
      * @param {Rect<LengthPercentageAuto>} val
      */
@@ -1784,10 +1784,10 @@ export class TaffyTree {
      * @example
      * ```typescript
      * // Fixed size container
-     * { width: { Definite: 800 }, height: { Definite: 600 } }
+     * { width: 800, height: 600 }
      *
      * // Flexible width, fixed height
-     * { width: "MaxContent", height: { Definite: 600 } }
+     * { width: "MaxContent", height: 600 }
      *
      * // Minimum content size
      * { width: "MinContent", height: "MinContent" }
@@ -1797,7 +1797,7 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
-     * tree.computeLayout(rootId, { width: { Definite: 800 }, height: { Definite: 600 } });
+     * tree.computeLayout(rootId, { width: 800, height: 600 });
      * ```
      * @param {bigint} node
      * @param {Size<AvailableSpace>} available_space
@@ -2160,7 +2160,7 @@ export class TaffyTree {
      * ```typescript
      * tree.computeLayoutWithMeasure(
      *   rootId,
-     *   { width: { Definite: 800 }, height: "MaxContent" },
+     *   { width: 800, height: "MaxContent" },
      *   (known, available, node, context, style) => {
      *     if (context?.text) {
      *       const measured = measureText(context.text, available.width);
@@ -2307,7 +2307,7 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
-     * tree.computeLayout(rootId, { width: { Definite: 800 }, height: { Definite: 600 } });
+     * tree.computeLayout(rootId, { width: 800, height: 600 });
      * const layout: Layout = tree.getLayout(nodeId);
      * console.log(`Position: (${layout.x}, ${layout.y}), Size: ${layout.width}x${layout.height}`);
      * ```
@@ -2407,7 +2407,7 @@ export class TaffyTree {
      * @example
      * ```typescript
      * const style = new Style();
-     * style.size = { width: { Length: 100 }, height: { Length: 50 } };
+     * style.size = { width: 100, height: 50 };
      * const nodeId: bigint = tree.newLeaf(style);
      * ```
      * @param {Style} style
@@ -2681,7 +2681,7 @@ function __wbg_get_imports() {
         const ret = arg0.length;
         return ret;
     };
-    imports.wbg.__wbg_log_0d6297a6179e3992 = function(arg0, arg1) {
+    imports.wbg.__wbg_log_274c70cbdd825a00 = function(arg0, arg1) {
         console.log(getStringFromWasm0(arg0, arg1));
     };
     imports.wbg.__wbg_new_1ba21ce319a06297 = function() {