taffy-layout 1.4.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # ![Taffy Layout Logo](./taffy.svg) Taffy Layout
1
+ # ![Taffy Layout Logo](docs/taffy.svg) Taffy Layout
2
2
 
3
- [English](README.md) | [简体中文](README.zh-CN.md) | [日本語](README.ja-JP.md)
3
+ [English](README.md) | [简体中文](docs/i18n/zh-CN/README.md) | [日本語](docs/i18n/ja-JP/README.md)
4
4
 
5
5
  [![npm version](https://badge.fury.io/js/taffy-layout.svg)](https://www.npmjs.com/package/taffy-layout)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -71,10 +71,7 @@ childStyle.height = "auto";
71
71
  // Create nodes
72
72
  const child1 = tree.newLeaf(childStyle);
73
73
  const child2 = tree.newLeaf(childStyle);
74
- const container = tree.newWithChildren(
75
- containerStyle,
76
- BigUint64Array.from([child1, child2]),
77
- );
74
+ const container = tree.newWithChildren(containerStyle, [child1, child2]);
78
75
 
79
76
  // Compute layout
80
77
  tree.computeLayout(container, { width: 300, height: 200 });
@@ -93,6 +90,15 @@ console.log(
93
90
  );
94
91
  ```
95
92
 
93
+ ## 📚 Documentation
94
+
95
+ - [Introduction](docs/intro.md)
96
+ - [Getting Started](docs/getting-started/installation.md)
97
+ - [Core Concepts](docs/core-concepts/overview.md)
98
+ - [Styling Guide](docs/styling/index.md)
99
+ - [Advanced Usage](docs/advanced/index.md)
100
+ - [Cookbook](docs/cookbook/index.md)
101
+
96
102
  ## 📖 API Reference
97
103
 
98
104
  ### TaffyTree
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "taffy-layout",
3
- "version": "1.4.0",
3
+ "version": "2.0.1",
4
4
  "description": "WebAssembly bindings for Taffy layout library",
5
5
  "keywords": [
6
6
  "layout",
@@ -59,10 +59,14 @@
59
59
  "@semantic-release/npm": "^13.1.3",
60
60
  "@semantic-release/release-notes-generator": "^14.1.0",
61
61
  "@types/node": "^22.0.0",
62
+ "@types/react": "^19.2.9",
63
+ "@types/react-dom": "^19.2.3",
62
64
  "conventional-changelog-conventionalcommits": "^9.1.0",
63
65
  "husky": "^9.1.7",
64
66
  "lint-staged": "^16.2.7",
65
67
  "prettier": "^3.7.4",
68
+ "react": "^19.2.3",
69
+ "react-dom": "^19.2.3",
66
70
  "semantic-release": "^25.0.2",
67
71
  "tsx": "^4.0.0",
68
72
  "typedoc": "^0.28.15",
package/pkg/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # ![Taffy Layout Logo](./taffy.svg) Taffy Layout
1
+ # ![Taffy Layout Logo](docs/taffy.svg) Taffy Layout
2
2
 
3
- [English](README.md) | [简体中文](README.zh-CN.md) | [日本語](README.ja-JP.md)
3
+ [English](README.md) | [简体中文](docs/i18n/zh-CN/README.md) | [日本語](docs/i18n/ja-JP/README.md)
4
4
 
5
5
  [![npm version](https://badge.fury.io/js/taffy-layout.svg)](https://www.npmjs.com/package/taffy-layout)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -71,10 +71,7 @@ childStyle.height = "auto";
71
71
  // Create nodes
72
72
  const child1 = tree.newLeaf(childStyle);
73
73
  const child2 = tree.newLeaf(childStyle);
74
- const container = tree.newWithChildren(
75
- containerStyle,
76
- BigUint64Array.from([child1, child2]),
77
- );
74
+ const container = tree.newWithChildren(containerStyle, [child1, child2]);
78
75
 
79
76
  // Compute layout
80
77
  tree.computeLayout(container, { width: 300, height: 200 });
@@ -93,6 +90,15 @@ console.log(
93
90
  );
94
91
  ```
95
92
 
93
+ ## 📚 Documentation
94
+
95
+ - [Introduction](docs/intro.md)
96
+ - [Getting Started](docs/getting-started/installation.md)
97
+ - [Core Concepts](docs/core-concepts/overview.md)
98
+ - [Styling Guide](docs/styling/index.md)
99
+ - [Advanced Usage](docs/advanced/index.md)
100
+ - [Cookbook](docs/cookbook/index.md)
101
+
96
102
  ## 📖 API Reference
97
103
 
98
104
  ### TaffyTree
@@ -2294,11 +2294,11 @@ export class TaffyTree {
2294
2294
  * const child1 = tree.newLeaf(new Style());
2295
2295
  * const child2 = tree.newLeaf(new Style());
2296
2296
  * const child3 = tree.newLeaf(new Style());
2297
- * const children = BigUint64Array.from([child1, child2, child3]);
2297
+ * const children = [child1, child2, child3];
2298
2298
  * tree.setChildren(parentId, children);
2299
2299
  * ```
2300
2300
  */
2301
- setChildren(parent: bigint, children: BigUint64Array): void;
2301
+ setChildren(parent: bigint, children: bigint[]): void;
2302
2302
  /**
2303
2303
  * Creates a new TaffyTree with pre-allocated capacity
2304
2304
  *
@@ -2455,7 +2455,7 @@ export class TaffyTree {
2455
2455
  * The children must already exist in the tree.
2456
2456
  *
2457
2457
  * @param style - The style configuration for the node
2458
- * @param children - Array of child node IDs (as BigUint64Array)
2458
+ * @param children - Array of child node IDs (as bigint[])
2459
2459
  *
2460
2460
  * @returns - The node ID (`bigint`)
2461
2461
  *
@@ -2472,11 +2472,11 @@ export class TaffyTree {
2472
2472
  *
2473
2473
  * const container: bigint = tree.newWithChildren(
2474
2474
  * containerStyle,
2475
- * BigUint64Array.from([child1, child2])
2475
+ * [child1, child2]
2476
2476
  * );
2477
2477
  * ```
2478
2478
  */
2479
- newWithChildren(style: Style, children: BigUint64Array): bigint;
2479
+ newWithChildren(style: Style, children: bigint[]): bigint;
2480
2480
  /**
2481
2481
  * Gets the child at a specific index
2482
2482
  *
@@ -2598,12 +2598,13 @@ export class TaffyTree {
2598
2598
  * ```typescript
2599
2599
  * const tree = new TaffyTree();
2600
2600
  * const parentId = tree.newLeaf(new Style());
2601
+ * const child0 = tree.newLeaf(new Style());
2601
2602
  * const child1 = tree.newLeaf(new Style());
2602
2603
  * const child2 = tree.newLeaf(new Style());
2603
2604
  * const child3 = tree.newLeaf(new Style());
2604
- * tree.setChildren(parentId, BigUint64Array.from([child1, child2, child3]));
2605
+ * tree.setChildren(parentId, [child0, child1, child2, child3]);
2605
2606
  *
2606
- * tree.removeChildrenRange(parentId, 1, 3);
2607
+ * tree.removeChildrenRange(parentId, 1, 3); // Removes child1 and child2
2607
2608
  * ```
2608
2609
  */
2609
2610
  removeChildrenRange(parent: bigint, startIndex: number, endIndex: number): void;
@@ -2681,11 +2682,11 @@ export class TaffyTree {
2681
2682
  * const tree = new TaffyTree();
2682
2683
  * const id1 = tree.newLeaf(new Style());
2683
2684
  * const id2 = tree.newLeaf(new Style());
2684
- * const nodes = BigUint64Array.from([id1, id2]);
2685
+ * const nodes = [id1, id2];
2685
2686
  * const contexts = tree.getDisjointNodeContextMut(nodes);
2686
2687
  * ```
2687
2688
  */
2688
- getDisjointNodeContextMut(children: BigUint64Array): any[];
2689
+ getDisjointNodeContextMut(children: bigint[]): any[];
2689
2690
  /**
2690
2691
  * Creates a new empty TaffyTree
2691
2692
  *
@@ -2827,7 +2828,7 @@ export class TaffyTree {
2827
2828
  *
2828
2829
  * @param parent - The parent node ID
2829
2830
  *
2830
- * @returns - Array of child node IDs (`BigUint64Array`)
2831
+ * @returns - Array of child node IDs
2831
2832
  *
2832
2833
  * @throws `TaffyError` if the parent node does not exist
2833
2834
  *
@@ -2835,10 +2836,10 @@ export class TaffyTree {
2835
2836
  * ```typescript
2836
2837
  * const tree = new TaffyTree();
2837
2838
  * const parentId = tree.newLeaf(new Style());
2838
- * const children: BigUint64Array = tree.children(parentId);
2839
+ * const children = tree.children(parentId);
2839
2840
  * ```
2840
2841
  */
2841
- children(parent: bigint): BigUint64Array;
2842
+ children(parent: bigint): bigint[];
2842
2843
  /**
2843
2844
  * Creates a new leaf node with the given style
2844
2845
  *
@@ -3112,7 +3113,7 @@ export interface InitOutput {
3112
3113
  readonly taffyerror_message: (a: number) => [number, number];
3113
3114
  readonly taffytree_addChild: (a: number, b: bigint, c: bigint) => [number, number];
3114
3115
  readonly taffytree_childCount: (a: number, b: bigint) => number;
3115
- readonly taffytree_children: (a: number, b: bigint) => [number, number, number, number];
3116
+ readonly taffytree_children: (a: number, b: bigint) => [number, number, number];
3116
3117
  readonly taffytree_clear: (a: number) => void;
3117
3118
  readonly taffytree_computeLayout: (a: number, b: bigint, c: any) => [number, number];
3118
3119
  readonly taffytree_computeLayoutWithMeasure: (a: number, b: bigint, c: any, d: any) => [number, number];
@@ -3121,7 +3122,7 @@ export interface InitOutput {
3121
3122
  readonly taffytree_disableRounding: (a: number) => void;
3122
3123
  readonly taffytree_enableRounding: (a: number) => void;
3123
3124
  readonly taffytree_getChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
3124
- readonly taffytree_getDisjointNodeContextMut: (a: number, b: number, c: number) => [number, number, number, number];
3125
+ readonly taffytree_getDisjointNodeContextMut: (a: number, b: any) => [number, number, number, number];
3125
3126
  readonly taffytree_getLayout: (a: number, b: bigint) => [number, number, number];
3126
3127
  readonly taffytree_getNodeContext: (a: number, b: bigint) => [number, number, number];
3127
3128
  readonly taffytree_getNodeContextMut: (a: number, b: bigint) => [number, number, number];
@@ -3131,7 +3132,7 @@ export interface InitOutput {
3131
3132
  readonly taffytree_new: () => number;
3132
3133
  readonly taffytree_newLeaf: (a: number, b: number) => [bigint, number, number];
3133
3134
  readonly taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
3134
- readonly taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
3135
+ readonly taffytree_newWithChildren: (a: number, b: number, c: any) => [bigint, number, number];
3135
3136
  readonly taffytree_parent: (a: number, b: bigint) => [number, bigint];
3136
3137
  readonly taffytree_printTree: (a: number, b: bigint) => [number, number];
3137
3138
  readonly taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
@@ -3139,7 +3140,7 @@ export interface InitOutput {
3139
3140
  readonly taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
3140
3141
  readonly taffytree_removeChildrenRange: (a: number, b: bigint, c: number, d: number) => [number, number];
3141
3142
  readonly taffytree_replaceChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [bigint, number, number];
3142
- readonly taffytree_setChildren: (a: number, b: bigint, c: number, d: number) => [number, number];
3143
+ readonly taffytree_setChildren: (a: number, b: bigint, c: any) => [number, number];
3143
3144
  readonly taffytree_setNodeContext: (a: number, b: bigint, c: any) => [number, number];
3144
3145
  readonly taffytree_setStyle: (a: number, b: bigint, c: number) => [number, number];
3145
3146
  readonly taffytree_totalNodeCount: (a: number) => number;
package/pkg/taffy_wasm.js CHANGED
@@ -88,24 +88,11 @@ function getArrayJsValueFromWasm0(ptr, len) {
88
88
  return result;
89
89
  }
90
90
 
91
- function getArrayU64FromWasm0(ptr, len) {
92
- ptr = ptr >>> 0;
93
- return getBigUint64ArrayMemory0().subarray(ptr / 8, ptr / 8 + len);
94
- }
95
-
96
91
  function getArrayU8FromWasm0(ptr, len) {
97
92
  ptr = ptr >>> 0;
98
93
  return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
99
94
  }
100
95
 
101
- let cachedBigUint64ArrayMemory0 = null;
102
- function getBigUint64ArrayMemory0() {
103
- if (cachedBigUint64ArrayMemory0 === null || cachedBigUint64ArrayMemory0.byteLength === 0) {
104
- cachedBigUint64ArrayMemory0 = new BigUint64Array(wasm.memory.buffer);
105
- }
106
- return cachedBigUint64ArrayMemory0;
107
- }
108
-
109
96
  let cachedDataViewMemory0 = null;
110
97
  function getDataViewMemory0() {
111
98
  if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
@@ -140,13 +127,6 @@ function isLikeNone(x) {
140
127
  return x === undefined || x === null;
141
128
  }
142
129
 
143
- function passArray64ToWasm0(arg, malloc) {
144
- const ptr = malloc(arg.length * 8, 8) >>> 0;
145
- getBigUint64ArrayMemory0().set(arg, ptr / 8);
146
- WASM_VECTOR_LEN = arg.length;
147
- return ptr;
148
- }
149
-
150
130
  function passArrayJsValueToWasm0(array, malloc) {
151
131
  const ptr = malloc(array.length * 4, 4) >>> 0;
152
132
  for (let i = 0; i < array.length; i++) {
@@ -3369,16 +3349,14 @@ export class TaffyTree {
3369
3349
  * const child1 = tree.newLeaf(new Style());
3370
3350
  * const child2 = tree.newLeaf(new Style());
3371
3351
  * const child3 = tree.newLeaf(new Style());
3372
- * const children = BigUint64Array.from([child1, child2, child3]);
3352
+ * const children = [child1, child2, child3];
3373
3353
  * tree.setChildren(parentId, children);
3374
3354
  * ```
3375
3355
  * @param {bigint} parent
3376
- * @param {BigUint64Array} children
3356
+ * @param {bigint[]} children
3377
3357
  */
3378
3358
  setChildren(parent, children) {
3379
- const ptr0 = passArray64ToWasm0(children, wasm.__wbindgen_malloc);
3380
- const len0 = WASM_VECTOR_LEN;
3381
- const ret = wasm.taffytree_setChildren(this.__wbg_ptr, parent, ptr0, len0);
3359
+ const ret = wasm.taffytree_setChildren(this.__wbg_ptr, parent, children);
3382
3360
  if (ret[1]) {
3383
3361
  throw takeFromExternrefTable0(ret[0]);
3384
3362
  }
@@ -3579,7 +3557,7 @@ export class TaffyTree {
3579
3557
  * The children must already exist in the tree.
3580
3558
  *
3581
3559
  * @param style - The style configuration for the node
3582
- * @param children - Array of child node IDs (as BigUint64Array)
3560
+ * @param children - Array of child node IDs (as bigint[])
3583
3561
  *
3584
3562
  * @returns - The node ID (`bigint`)
3585
3563
  *
@@ -3596,18 +3574,16 @@ export class TaffyTree {
3596
3574
  *
3597
3575
  * const container: bigint = tree.newWithChildren(
3598
3576
  * containerStyle,
3599
- * BigUint64Array.from([child1, child2])
3577
+ * [child1, child2]
3600
3578
  * );
3601
3579
  * ```
3602
3580
  * @param {Style} style
3603
- * @param {BigUint64Array} children
3581
+ * @param {bigint[]} children
3604
3582
  * @returns {bigint}
3605
3583
  */
3606
3584
  newWithChildren(style, children) {
3607
3585
  _assertClass(style, Style);
3608
- const ptr0 = passArray64ToWasm0(children, wasm.__wbindgen_malloc);
3609
- const len0 = WASM_VECTOR_LEN;
3610
- const ret = wasm.taffytree_newWithChildren(this.__wbg_ptr, style.__wbg_ptr, ptr0, len0);
3586
+ const ret = wasm.taffytree_newWithChildren(this.__wbg_ptr, style.__wbg_ptr, children);
3611
3587
  if (ret[2]) {
3612
3588
  throw takeFromExternrefTable0(ret[1]);
3613
3589
  }
@@ -3786,12 +3762,13 @@ export class TaffyTree {
3786
3762
  * ```typescript
3787
3763
  * const tree = new TaffyTree();
3788
3764
  * const parentId = tree.newLeaf(new Style());
3765
+ * const child0 = tree.newLeaf(new Style());
3789
3766
  * const child1 = tree.newLeaf(new Style());
3790
3767
  * const child2 = tree.newLeaf(new Style());
3791
3768
  * const child3 = tree.newLeaf(new Style());
3792
- * tree.setChildren(parentId, BigUint64Array.from([child1, child2, child3]));
3769
+ * tree.setChildren(parentId, [child0, child1, child2, child3]);
3793
3770
  *
3794
- * tree.removeChildrenRange(parentId, 1, 3);
3771
+ * tree.removeChildrenRange(parentId, 1, 3); // Removes child1 and child2
3795
3772
  * ```
3796
3773
  * @param {bigint} parent
3797
3774
  * @param {number} startIndex
@@ -3895,22 +3872,20 @@ export class TaffyTree {
3895
3872
  * const tree = new TaffyTree();
3896
3873
  * const id1 = tree.newLeaf(new Style());
3897
3874
  * const id2 = tree.newLeaf(new Style());
3898
- * const nodes = BigUint64Array.from([id1, id2]);
3875
+ * const nodes = [id1, id2];
3899
3876
  * const contexts = tree.getDisjointNodeContextMut(nodes);
3900
3877
  * ```
3901
- * @param {BigUint64Array} children
3878
+ * @param {bigint[]} children
3902
3879
  * @returns {any[]}
3903
3880
  */
3904
3881
  getDisjointNodeContextMut(children) {
3905
- const ptr0 = passArray64ToWasm0(children, wasm.__wbindgen_malloc);
3906
- const len0 = WASM_VECTOR_LEN;
3907
- const ret = wasm.taffytree_getDisjointNodeContextMut(this.__wbg_ptr, ptr0, len0);
3882
+ const ret = wasm.taffytree_getDisjointNodeContextMut(this.__wbg_ptr, children);
3908
3883
  if (ret[3]) {
3909
3884
  throw takeFromExternrefTable0(ret[2]);
3910
3885
  }
3911
- var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
3886
+ var v1 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
3912
3887
  wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
3913
- return v2;
3888
+ return v1;
3914
3889
  }
3915
3890
  /**
3916
3891
  * Creates a new empty TaffyTree
@@ -4097,7 +4072,7 @@ export class TaffyTree {
4097
4072
  *
4098
4073
  * @param parent - The parent node ID
4099
4074
  *
4100
- * @returns - Array of child node IDs (`BigUint64Array`)
4075
+ * @returns - Array of child node IDs
4101
4076
  *
4102
4077
  * @throws `TaffyError` if the parent node does not exist
4103
4078
  *
@@ -4105,19 +4080,17 @@ export class TaffyTree {
4105
4080
  * ```typescript
4106
4081
  * const tree = new TaffyTree();
4107
4082
  * const parentId = tree.newLeaf(new Style());
4108
- * const children: BigUint64Array = tree.children(parentId);
4083
+ * const children = tree.children(parentId);
4109
4084
  * ```
4110
4085
  * @param {bigint} parent
4111
- * @returns {BigUint64Array}
4086
+ * @returns {bigint[]}
4112
4087
  */
4113
4088
  children(parent) {
4114
4089
  const ret = wasm.taffytree_children(this.__wbg_ptr, parent);
4115
- if (ret[3]) {
4116
- throw takeFromExternrefTable0(ret[2]);
4090
+ if (ret[2]) {
4091
+ throw takeFromExternrefTable0(ret[1]);
4117
4092
  }
4118
- var v1 = getArrayU64FromWasm0(ret[0], ret[1]).slice();
4119
- wasm.__wbindgen_free(ret[0], ret[1] * 8, 8);
4120
- return v1;
4093
+ return takeFromExternrefTable0(ret[0]);
4121
4094
  }
4122
4095
  /**
4123
4096
  * Creates a new leaf node with the given style
@@ -4553,7 +4526,6 @@ function __wbg_get_imports() {
4553
4526
  function __wbg_finalize_init(instance, module) {
4554
4527
  wasm = instance.exports;
4555
4528
  __wbg_init.__wbindgen_wasm_module = module;
4556
- cachedBigUint64ArrayMemory0 = null;
4557
4529
  cachedDataViewMemory0 = null;
4558
4530
  cachedUint8ArrayMemory0 = null;
4559
4531
 
Binary file
@@ -176,7 +176,7 @@ export const style_width: (a: number) => any;
176
176
  export const taffyerror_message: (a: number) => [number, number];
177
177
  export const taffytree_addChild: (a: number, b: bigint, c: bigint) => [number, number];
178
178
  export const taffytree_childCount: (a: number, b: bigint) => number;
179
- export const taffytree_children: (a: number, b: bigint) => [number, number, number, number];
179
+ export const taffytree_children: (a: number, b: bigint) => [number, number, number];
180
180
  export const taffytree_clear: (a: number) => void;
181
181
  export const taffytree_computeLayout: (a: number, b: bigint, c: any) => [number, number];
182
182
  export const taffytree_computeLayoutWithMeasure: (a: number, b: bigint, c: any, d: any) => [number, number];
@@ -185,7 +185,7 @@ export const taffytree_dirty: (a: number, b: bigint) => [number, number, number]
185
185
  export const taffytree_disableRounding: (a: number) => void;
186
186
  export const taffytree_enableRounding: (a: number) => void;
187
187
  export const taffytree_getChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
188
- export const taffytree_getDisjointNodeContextMut: (a: number, b: number, c: number) => [number, number, number, number];
188
+ export const taffytree_getDisjointNodeContextMut: (a: number, b: any) => [number, number, number, number];
189
189
  export const taffytree_getLayout: (a: number, b: bigint) => [number, number, number];
190
190
  export const taffytree_getNodeContext: (a: number, b: bigint) => [number, number, number];
191
191
  export const taffytree_getNodeContextMut: (a: number, b: bigint) => [number, number, number];
@@ -195,7 +195,7 @@ export const taffytree_markDirty: (a: number, b: bigint) => [number, number];
195
195
  export const taffytree_new: () => number;
196
196
  export const taffytree_newLeaf: (a: number, b: number) => [bigint, number, number];
197
197
  export const taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
198
- export const taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
198
+ export const taffytree_newWithChildren: (a: number, b: number, c: any) => [bigint, number, number];
199
199
  export const taffytree_parent: (a: number, b: bigint) => [number, bigint];
200
200
  export const taffytree_printTree: (a: number, b: bigint) => [number, number];
201
201
  export const taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
@@ -203,7 +203,7 @@ export const taffytree_removeChild: (a: number, b: bigint, c: bigint) => [bigint
203
203
  export const taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
204
204
  export const taffytree_removeChildrenRange: (a: number, b: bigint, c: number, d: number) => [number, number];
205
205
  export const taffytree_replaceChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [bigint, number, number];
206
- export const taffytree_setChildren: (a: number, b: bigint, c: number, d: number) => [number, number];
206
+ export const taffytree_setChildren: (a: number, b: bigint, c: any) => [number, number];
207
207
  export const taffytree_setNodeContext: (a: number, b: bigint, c: any) => [number, number];
208
208
  export const taffytree_setStyle: (a: number, b: bigint, c: number) => [number, number];
209
209
  export const taffytree_totalNodeCount: (a: number) => number;
package/README.ja-JP.md DELETED
@@ -1,279 +0,0 @@
1
- # ![Taffy Layout Logo](./taffy.svg) Taffy Layout
2
-
3
- [English](README.md) | [简体中文](README.zh-CN.md) | [日本語](README.ja-JP.md)
4
-
5
- [![npm version](https://badge.fury.io/js/taffy-layout.svg)](https://www.npmjs.com/package/taffy-layout)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
-
8
- WebAssembly で高速に動作する [Taffy](https://github.com/DioxusLabs/taffy) レイアウトエンジンの JavaScript バインディング。CSS の Flexbox と Grid をほぼネイティブ性能で利用できます。
9
-
10
- ## ✨ 特徴
11
-
12
- - **🚀 高性能**:WebAssembly によるレイアウト計算
13
- - **📦 充実の CSS 対応**:Flexbox と CSS Grid を実装
14
- - **🔧 カスタム計測**:テキスト/コンテンツ計測用コールバックに対応
15
- - **📝 TypeScript 対応**:型定義を同梱
16
- - **🌳 ツリー型 API**:複雑な階層構造にも効率的
17
- - **💡 なじみやすい API**:CSS 風のプロパティ名と値
18
-
19
- ## 📦 インストール
20
-
21
- ```bash
22
- npm install taffy-layout
23
- ```
24
-
25
- ## 🚀 クイックスタート
26
-
27
- ```typescript
28
- import {
29
- loadTaffy,
30
- TaffyTree,
31
- Style,
32
- Display,
33
- FlexDirection,
34
- AlignItems,
35
- } from "taffy-layout";
36
-
37
- // WebAssembly モジュールを初期化
38
- await loadTaffy();
39
-
40
- // レイアウトツリーを作成
41
- const tree = new TaffyTree();
42
-
43
- // コンテナのスタイル
44
- const containerStyle = new Style();
45
- containerStyle.display = Display.Flex;
46
- containerStyle.flexDirection = FlexDirection.Column;
47
- containerStyle.alignItems = AlignItems.Center;
48
-
49
- // size オブジェクトで設定
50
- containerStyle.size = { width: 300, height: 200 };
51
-
52
- // または個別の width/height プロパティを使用
53
- containerStyle.width = 300;
54
- containerStyle.height = 200;
55
-
56
- // padding オブジェクトで設定
57
- containerStyle.padding = { left: 10, right: 10, top: 10, bottom: 10 };
58
-
59
- // または個別の padding プロパティを使用
60
- containerStyle.paddingLeft = 10;
61
- containerStyle.paddingRight = 10;
62
- containerStyle.paddingTop = 10;
63
- containerStyle.paddingBottom = 10;
64
-
65
- // 子要素のスタイル
66
- const childStyle = new Style();
67
- childStyle.flexGrow = 1;
68
- childStyle.width = "100%";
69
- childStyle.height = "auto";
70
-
71
- // ノードを生成
72
- const child1 = tree.newLeaf(childStyle);
73
- const child2 = tree.newLeaf(childStyle);
74
- const container = tree.newWithChildren(
75
- containerStyle,
76
- BigUint64Array.from([child1, child2]),
77
- );
78
-
79
- // レイアウト計算
80
- tree.computeLayout(container, { width: 300, height: 200 });
81
-
82
- // 計算結果を取得
83
- const containerLayout = tree.getLayout(container);
84
- const child1Layout = tree.getLayout(child1);
85
- const child2Layout = tree.getLayout(child2);
86
-
87
- console.log(`Container: ${containerLayout.width}x${containerLayout.height}`);
88
- console.log(
89
- `Child 1: ${child1Layout.width}x${child1Layout.height} at (${child1Layout.x}, ${child1Layout.y})`,
90
- );
91
- console.log(
92
- `Child 2: ${child2Layout.width}x${child2Layout.height} at (${child2Layout.x}, ${child2Layout.y})`,
93
- );
94
- ```
95
-
96
- ## 📖 API リファレンス
97
-
98
- ### TaffyTree
99
-
100
- レイアウトツリーを管理するメインクラス。
101
-
102
- [ドキュメントを見る](./docs/api/classes/TaffyTree.md)
103
-
104
- ### Style
105
-
106
- ノードのレイアウトプロパティを設定するオブジェクト。
107
-
108
- [ドキュメントを見る](./docs/api/classes/Style.md)
109
-
110
- ### Layout
111
-
112
- 計算後のレイアウト結果 (読み取り専用)。
113
-
114
- [ドキュメントを見る](./docs/api/classes/Layout.md)
115
-
116
- ### 列挙型
117
-
118
- [ドキュメントを見る](./docs/api/index.md#enumerations)
119
-
120
- ### 型エイリアス
121
-
122
- [ドキュメントを見る](./docs/api/index.md#type-aliases)
123
-
124
- ## 📐 カスタムテキスト計測
125
-
126
- テキストなど動的な計測が必要な場合は、測定コールバックを渡せます。
127
-
128
- ```typescript
129
- const tree = new TaffyTree();
130
- const textStyle = new Style();
131
- const rootNode = tree.newLeaf(new Style());
132
- const measureTextWidth = (text: string) => text.length * 8;
133
- const measureTextHeight = (text: string, width: number) => 20;
134
-
135
- const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
136
-
137
- tree.computeLayoutWithMeasure(
138
- rootNode,
139
- { width: 800, height: "max-content" },
140
- (known, available, node, context, style) => {
141
- if (context?.text) {
142
- // ここに独自のテキスト計測ロジックを実装
143
- const width = measureTextWidth(context.text);
144
- const height = measureTextHeight(context.text, available.width as number);
145
- return { width, height };
146
- }
147
- return { width: 0, height: 0 };
148
- },
149
- );
150
- ```
151
-
152
- ## 🔧 エラーハンドリング
153
-
154
- 失敗する可能性のあるメソッドは `TaffyError` をスローします。try-catch で処理してください。
155
-
156
- ```typescript
157
- try {
158
- const tree = new TaffyTree();
159
- const style = new Style();
160
- const nodeId = tree.newLeaf(style);
161
- console.log("Created node:", nodeId);
162
- } catch (e) {
163
- if (e instanceof TaffyError) {
164
- console.error("Error:", e.message);
165
- }
166
- }
167
- ```
168
-
169
- ## 🌐 ブラウザ対応
170
-
171
- WebAssembly をサポートするモダンブラウザで動作します。
172
-
173
- - Chrome 57+
174
- - Firefox 52+
175
- - Safari 11+
176
- - Edge 16+
177
-
178
- ## 📚 サンプル
179
-
180
- ### Flexbox 行レイアウト
181
-
182
- ```typescript
183
- const rowStyle = new Style();
184
- rowStyle.display = Display.Flex;
185
- rowStyle.flexDirection = FlexDirection.Row;
186
- rowStyle.justifyContent = JustifyContent.SpaceBetween;
187
- rowStyle.gap = { width: 10, height: 0 };
188
- ```
189
-
190
- ### CSS Grid レイアウト
191
-
192
- ```typescript
193
- import { Style, Display, GridAutoFlow } from "taffy-layout";
194
-
195
- const gridStyle = new Style();
196
- gridStyle.display = Display.Grid;
197
- gridStyle.gridAutoFlow = GridAutoFlow.Row;
198
- gridStyle.gap = { width: 10, height: 10 };
199
-
200
- // グリッドアイテムの配置
201
- const itemStyle = new Style();
202
- itemStyle.gridRow = { start: 1, end: 3 }; // 2 行分
203
- itemStyle.gridColumn = { start: 1, end: { span: 2 } }; // 2 列分
204
- ```
205
-
206
- ### グリッドテンプレート領域
207
-
208
- ```typescript
209
- const gridStyle = new Style();
210
- gridStyle.display = Display.Grid;
211
- gridStyle.gridTemplateAreas = [
212
- { name: "header", rowStart: 1, rowEnd: 2, columnStart: 1, columnEnd: 4 },
213
- { name: "sidebar", rowStart: 2, rowEnd: 4, columnStart: 1, columnEnd: 2 },
214
- { name: "main", rowStart: 2, rowEnd: 4, columnStart: 2, columnEnd: 4 },
215
- { name: "footer", rowStart: 4, rowEnd: 5, columnStart: 1, columnEnd: 4 },
216
- ];
217
-
218
- // 名前付きグリッドライン
219
- gridStyle.gridTemplateRowNames = [
220
- ["header-start"],
221
- ["header-end", "content-start"],
222
- ["content-end", "footer-start"],
223
- ["footer-end"],
224
- ];
225
- ```
226
-
227
- ### 絶対配置
228
-
229
- ```typescript
230
- const absoluteStyle = new Style();
231
- absoluteStyle.position = Position.Absolute;
232
- absoluteStyle.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
233
- absoluteStyle.size = { width: 100, height: 50 };
234
- ```
235
-
236
- ### パーセントサイズ
237
-
238
- ```typescript
239
- const percentStyle = new Style();
240
- percentStyle.size = {
241
- width: "50%", // 親幅の 50%
242
- height: "100%", // 親高の 100%
243
- };
244
- ```
245
-
246
- ### 置換要素のブロックレイアウト
247
-
248
- ```typescript
249
- const imgStyle = new Style();
250
- imgStyle.itemIsReplaced = true;
251
- imgStyle.aspectRatio = 16 / 9; // 16:9
252
- imgStyle.size = { width: "100%", height: "auto" };
253
- ```
254
-
255
- ## 🏗️ ソースからのビルド
256
-
257
- ```bash
258
- # リポジトリを取得
259
- git clone https://github.com/ByteLandTechnology/taffy-layout.git
260
- cd taffy-layout
261
-
262
- # 依存関係をインストール
263
- npm install
264
-
265
- # WebAssembly モジュールをビルド
266
- npm run build
267
-
268
- # テストを実行
269
- npm test
270
- ```
271
-
272
- ## 📄 ライセンス
273
-
274
- MIT License - 詳細は [LICENSE](LICENSE) を参照してください。
275
-
276
- ## 🙏 謝辞
277
-
278
- - [Taffy](https://github.com/DioxusLabs/taffy) - 本プロジェクトがラップしている Rust 製レイアウトエンジン
279
- - [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) - Rust/WebAssembly の相互運用を支えるツール
package/README.zh-CN.md DELETED
@@ -1,279 +0,0 @@
1
- # ![Taffy Layout Logo](./taffy.svg) Taffy Layout
2
-
3
- [English](README.md) | [简体中文](README.zh-CN.md) | [日本語](README.ja-JP.md)
4
-
5
- [![npm version](https://badge.fury.io/js/taffy-layout.svg)](https://www.npmjs.com/package/taffy-layout)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
-
8
- 基于 WebAssembly 的高性能 [Taffy](https://github.com/DioxusLabs/taffy) 布局引擎 JavaScript 绑定,将 CSS Flexbox 和 Grid 布局算法带到前端,接近原生性能。
9
-
10
- ## ✨ 特性
11
-
12
- - **🚀 高性能**:WebAssembly 驱动的布局计算
13
- - **📦 完整 CSS 支持**:实现 Flexbox 与 CSS Grid
14
- - **🔧 自定义测量**:支持自定义文本/内容测量回调
15
- - **📝 TypeScript 友好**:完整类型定义
16
- - **🌳 基于树的 API**:适合复杂场景的高效树结构
17
- - **💡 熟悉的 API**:类 CSS 的属性名称与取值
18
-
19
- ## 📦 安装
20
-
21
- ```bash
22
- npm install taffy-layout
23
- ```
24
-
25
- ## 🚀 快速上手
26
-
27
- ```typescript
28
- import {
29
- loadTaffy,
30
- TaffyTree,
31
- Style,
32
- Display,
33
- FlexDirection,
34
- AlignItems,
35
- } from "taffy-layout";
36
-
37
- // 初始化 WebAssembly 模块
38
- await loadTaffy();
39
-
40
- // 创建布局树
41
- const tree = new TaffyTree();
42
-
43
- // 容器样式
44
- const containerStyle = new Style();
45
- containerStyle.display = Display.Flex;
46
- containerStyle.flexDirection = FlexDirection.Column;
47
- containerStyle.alignItems = AlignItems.Center;
48
-
49
- // 可以设置 size 对象
50
- containerStyle.size = { width: 300, height: 200 };
51
-
52
- // 或使用独立的 width/height 属性
53
- containerStyle.width = 300;
54
- containerStyle.height = 200;
55
-
56
- // 设置 padding 对象
57
- containerStyle.padding = { left: 10, right: 10, top: 10, bottom: 10 };
58
-
59
- // 或使用独立的 padding 属性
60
- containerStyle.paddingLeft = 10;
61
- containerStyle.paddingRight = 10;
62
- containerStyle.paddingTop = 10;
63
- containerStyle.paddingBottom = 10;
64
-
65
- // 子元素样式
66
- const childStyle = new Style();
67
- childStyle.flexGrow = 1;
68
- childStyle.width = "100%";
69
- childStyle.height = "auto";
70
-
71
- // 创建节点
72
- const child1 = tree.newLeaf(childStyle);
73
- const child2 = tree.newLeaf(childStyle);
74
- const container = tree.newWithChildren(
75
- containerStyle,
76
- BigUint64Array.from([child1, child2]),
77
- );
78
-
79
- // 计算布局
80
- tree.computeLayout(container, { width: 300, height: 200 });
81
-
82
- // 读取结果
83
- const containerLayout = tree.getLayout(container);
84
- const child1Layout = tree.getLayout(child1);
85
- const child2Layout = tree.getLayout(child2);
86
-
87
- console.log(`Container: ${containerLayout.width}x${containerLayout.height}`);
88
- console.log(
89
- `Child 1: ${child1Layout.width}x${child1Layout.height} at (${child1Layout.x}, ${child1Layout.y})`,
90
- );
91
- console.log(
92
- `Child 2: ${child2Layout.width}x${child2Layout.height} at (${child2Layout.x}, ${child2Layout.y})`,
93
- );
94
- ```
95
-
96
- ## 📖 API 参考
97
-
98
- ### TaffyTree
99
-
100
- 管理布局树的核心类。
101
-
102
- [查看文档](./docs/api/classes/TaffyTree.md)
103
-
104
- ### Style
105
-
106
- 用于配置节点布局属性的对象。
107
-
108
- [查看文档](./docs/api/classes/Style.md)
109
-
110
- ### Layout
111
-
112
- 只读的布局计算结果。
113
-
114
- [查看文档](./docs/api/classes/Layout.md)
115
-
116
- ### 枚举
117
-
118
- [查看文档](./docs/api/index.md#enumerations)
119
-
120
- ### 类型别名
121
-
122
- [查看文档](./docs/api/index.md#type-aliases)
123
-
124
- ## 📐 自定义文本测量
125
-
126
- 对文本节点或需要动态测量的内容,可传入测量回调:
127
-
128
- ```typescript
129
- const tree = new TaffyTree();
130
- const textStyle = new Style();
131
- const rootNode = tree.newLeaf(new Style());
132
- const measureTextWidth = (text: string) => text.length * 8;
133
- const measureTextHeight = (text: string, width: number) => 20;
134
-
135
- const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
136
-
137
- tree.computeLayoutWithMeasure(
138
- rootNode,
139
- { width: 800, height: "max-content" },
140
- (known, available, node, context, style) => {
141
- if (context?.text) {
142
- // 在这里实现文本测量逻辑
143
- const width = measureTextWidth(context.text);
144
- const height = measureTextHeight(context.text, available.width as number);
145
- return { width, height };
146
- }
147
- return { width: 0, height: 0 };
148
- },
149
- );
150
- ```
151
-
152
- ## 🔧 错误处理
153
-
154
- 可能失败的方法会抛出 `TaffyError`。使用 try-catch 处理:
155
-
156
- ```typescript
157
- try {
158
- const tree = new TaffyTree();
159
- const style = new Style();
160
- const nodeId = tree.newLeaf(style);
161
- console.log("Created node:", nodeId);
162
- } catch (e) {
163
- if (e instanceof TaffyError) {
164
- console.error("Error:", e.message);
165
- }
166
- }
167
- ```
168
-
169
- ## 🌐 浏览器支持
170
-
171
- 支持所有具备 WebAssembly 的现代浏览器:
172
-
173
- - Chrome 57+
174
- - Firefox 52+
175
- - Safari 11+
176
- - Edge 16+
177
-
178
- ## 📚 示例
179
-
180
- ### Flexbox 行布局
181
-
182
- ```typescript
183
- const rowStyle = new Style();
184
- rowStyle.display = Display.Flex;
185
- rowStyle.flexDirection = FlexDirection.Row;
186
- rowStyle.justifyContent = JustifyContent.SpaceBetween;
187
- rowStyle.gap = { width: 10, height: 0 };
188
- ```
189
-
190
- ### CSS Grid 布局
191
-
192
- ```typescript
193
- import { Style, Display, GridAutoFlow } from "taffy-layout";
194
-
195
- const gridStyle = new Style();
196
- gridStyle.display = Display.Grid;
197
- gridStyle.gridAutoFlow = GridAutoFlow.Row;
198
- gridStyle.gap = { width: 10, height: 10 };
199
-
200
- // 网格项定位
201
- const itemStyle = new Style();
202
- itemStyle.gridRow = { start: 1, end: 3 }; // 跨 2 行
203
- itemStyle.gridColumn = { start: 1, end: { span: 2 } }; // 跨 2 列
204
- ```
205
-
206
- ### 网格区域模板
207
-
208
- ```typescript
209
- const gridStyle = new Style();
210
- gridStyle.display = Display.Grid;
211
- gridStyle.gridTemplateAreas = [
212
- { name: "header", rowStart: 1, rowEnd: 2, columnStart: 1, columnEnd: 4 },
213
- { name: "sidebar", rowStart: 2, rowEnd: 4, columnStart: 1, columnEnd: 2 },
214
- { name: "main", rowStart: 2, rowEnd: 4, columnStart: 2, columnEnd: 4 },
215
- { name: "footer", rowStart: 4, rowEnd: 5, columnStart: 1, columnEnd: 4 },
216
- ];
217
-
218
- // 命名网格线
219
- gridStyle.gridTemplateRowNames = [
220
- ["header-start"],
221
- ["header-end", "content-start"],
222
- ["content-end", "footer-start"],
223
- ["footer-end"],
224
- ];
225
- ```
226
-
227
- ### 绝对定位
228
-
229
- ```typescript
230
- const absoluteStyle = new Style();
231
- absoluteStyle.position = Position.Absolute;
232
- absoluteStyle.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
233
- absoluteStyle.size = { width: 100, height: 50 };
234
- ```
235
-
236
- ### 百分比尺寸
237
-
238
- ```typescript
239
- const percentStyle = new Style();
240
- percentStyle.size = {
241
- width: "50%", // 父级宽度的 50%
242
- height: "100%", // 父级高度的 100%
243
- };
244
- ```
245
-
246
- ### 替换元素的块级布局
247
-
248
- ```typescript
249
- const imgStyle = new Style();
250
- imgStyle.itemIsReplaced = true;
251
- imgStyle.aspectRatio = 16 / 9; // 16:9 宽高比
252
- imgStyle.size = { width: "100%", height: "auto" };
253
- ```
254
-
255
- ## 🏗️ 从源码构建
256
-
257
- ```bash
258
- # 克隆仓库
259
- git clone https://github.com/ByteLandTechnology/taffy-layout.git
260
- cd taffy-layout
261
-
262
- # 安装依赖
263
- npm install
264
-
265
- # 构建 WebAssembly 模块
266
- npm run build
267
-
268
- # 运行测试
269
- npm test
270
- ```
271
-
272
- ## 📄 许可证
273
-
274
- MIT License - 详见 [LICENSE](LICENSE)。
275
-
276
- ## 🙏 致谢
277
-
278
- - [Taffy](https://github.com/DioxusLabs/taffy) - 本项目封装的 Rust 布局引擎
279
- - [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) - Rust/WebAssembly 互操作工具