taffy-layout 1.2.0 → 1.4.0
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.ja-JP.md +5 -5
- package/README.md +5 -5
- package/README.zh-CN.md +5 -5
- package/package.json +1 -1
- package/pkg/README.md +5 -5
- package/pkg/taffy_wasm.d.ts +277 -4
- package/pkg/taffy_wasm.js +220 -3
- package/pkg/taffy_wasm_bg.wasm +0 -0
- package/pkg/taffy_wasm_bg.wasm.d.ts +9 -1
package/README.ja-JP.md
CHANGED
|
@@ -99,27 +99,27 @@ console.log(
|
|
|
99
99
|
|
|
100
100
|
レイアウトツリーを管理するメインクラス。
|
|
101
101
|
|
|
102
|
-
[ドキュメントを見る](./docs/classes/TaffyTree.md)
|
|
102
|
+
[ドキュメントを見る](./docs/api/classes/TaffyTree.md)
|
|
103
103
|
|
|
104
104
|
### Style
|
|
105
105
|
|
|
106
106
|
ノードのレイアウトプロパティを設定するオブジェクト。
|
|
107
107
|
|
|
108
|
-
[ドキュメントを見る](./docs/classes/Style.md)
|
|
108
|
+
[ドキュメントを見る](./docs/api/classes/Style.md)
|
|
109
109
|
|
|
110
110
|
### Layout
|
|
111
111
|
|
|
112
112
|
計算後のレイアウト結果 (読み取り専用)。
|
|
113
113
|
|
|
114
|
-
[ドキュメントを見る](./docs/classes/Layout.md)
|
|
114
|
+
[ドキュメントを見る](./docs/api/classes/Layout.md)
|
|
115
115
|
|
|
116
116
|
### 列挙型
|
|
117
117
|
|
|
118
|
-
[ドキュメントを見る](./docs/index.md#enumerations)
|
|
118
|
+
[ドキュメントを見る](./docs/api/index.md#enumerations)
|
|
119
119
|
|
|
120
120
|
### 型エイリアス
|
|
121
121
|
|
|
122
|
-
[ドキュメントを見る](./docs/index.md#type-aliases)
|
|
122
|
+
[ドキュメントを見る](./docs/api/index.md#type-aliases)
|
|
123
123
|
|
|
124
124
|
## 📐 カスタムテキスト計測
|
|
125
125
|
|
package/README.md
CHANGED
|
@@ -99,27 +99,27 @@ console.log(
|
|
|
99
99
|
|
|
100
100
|
The main class for managing layout trees.
|
|
101
101
|
|
|
102
|
-
[View Documentation](./docs/classes/TaffyTree.md)
|
|
102
|
+
[View Documentation](./docs/api/classes/TaffyTree.md)
|
|
103
103
|
|
|
104
104
|
### Style
|
|
105
105
|
|
|
106
106
|
Configuration object for node layout properties.
|
|
107
107
|
|
|
108
|
-
[View Documentation](./docs/classes/Style.md)
|
|
108
|
+
[View Documentation](./docs/api/classes/Style.md)
|
|
109
109
|
|
|
110
110
|
### Layout
|
|
111
111
|
|
|
112
112
|
Read-only computed layout result.
|
|
113
113
|
|
|
114
|
-
[View Documentation](./docs/classes/Layout.md)
|
|
114
|
+
[View Documentation](./docs/api/classes/Layout.md)
|
|
115
115
|
|
|
116
116
|
### Enums
|
|
117
117
|
|
|
118
|
-
[View Documentation](./docs/index.md#enumerations)
|
|
118
|
+
[View Documentation](./docs/api/index.md#enumerations)
|
|
119
119
|
|
|
120
120
|
### Types
|
|
121
121
|
|
|
122
|
-
[View Documentation](./docs/index.md#type-aliases)
|
|
122
|
+
[View Documentation](./docs/api/index.md#type-aliases)
|
|
123
123
|
|
|
124
124
|
## 📐 Custom Text Measurement
|
|
125
125
|
|
package/README.zh-CN.md
CHANGED
|
@@ -99,27 +99,27 @@ console.log(
|
|
|
99
99
|
|
|
100
100
|
管理布局树的核心类。
|
|
101
101
|
|
|
102
|
-
[查看文档](./docs/classes/TaffyTree.md)
|
|
102
|
+
[查看文档](./docs/api/classes/TaffyTree.md)
|
|
103
103
|
|
|
104
104
|
### Style
|
|
105
105
|
|
|
106
106
|
用于配置节点布局属性的对象。
|
|
107
107
|
|
|
108
|
-
[查看文档](./docs/classes/Style.md)
|
|
108
|
+
[查看文档](./docs/api/classes/Style.md)
|
|
109
109
|
|
|
110
110
|
### Layout
|
|
111
111
|
|
|
112
112
|
只读的布局计算结果。
|
|
113
113
|
|
|
114
|
-
[查看文档](./docs/classes/Layout.md)
|
|
114
|
+
[查看文档](./docs/api/classes/Layout.md)
|
|
115
115
|
|
|
116
116
|
### 枚举
|
|
117
117
|
|
|
118
|
-
[查看文档](./docs/index.md#enumerations)
|
|
118
|
+
[查看文档](./docs/api/index.md#enumerations)
|
|
119
119
|
|
|
120
120
|
### 类型别名
|
|
121
121
|
|
|
122
|
-
[查看文档](./docs/index.md#type-aliases)
|
|
122
|
+
[查看文档](./docs/api/index.md#type-aliases)
|
|
123
123
|
|
|
124
124
|
## 📐 自定义文本测量
|
|
125
125
|
|
package/package.json
CHANGED
package/pkg/README.md
CHANGED
|
@@ -99,27 +99,27 @@ console.log(
|
|
|
99
99
|
|
|
100
100
|
The main class for managing layout trees.
|
|
101
101
|
|
|
102
|
-
[View Documentation](./docs/classes/TaffyTree.md)
|
|
102
|
+
[View Documentation](./docs/api/classes/TaffyTree.md)
|
|
103
103
|
|
|
104
104
|
### Style
|
|
105
105
|
|
|
106
106
|
Configuration object for node layout properties.
|
|
107
107
|
|
|
108
|
-
[View Documentation](./docs/classes/Style.md)
|
|
108
|
+
[View Documentation](./docs/api/classes/Style.md)
|
|
109
109
|
|
|
110
110
|
### Layout
|
|
111
111
|
|
|
112
112
|
Read-only computed layout result.
|
|
113
113
|
|
|
114
|
-
[View Documentation](./docs/classes/Layout.md)
|
|
114
|
+
[View Documentation](./docs/api/classes/Layout.md)
|
|
115
115
|
|
|
116
116
|
### Enums
|
|
117
117
|
|
|
118
|
-
[View Documentation](./docs/index.md#enumerations)
|
|
118
|
+
[View Documentation](./docs/api/index.md#enumerations)
|
|
119
119
|
|
|
120
120
|
### Types
|
|
121
121
|
|
|
122
|
-
[View Documentation](./docs/index.md#type-aliases)
|
|
122
|
+
[View Documentation](./docs/api/index.md#type-aliases)
|
|
123
123
|
|
|
124
124
|
## 📐 Custom Text Measurement
|
|
125
125
|
|
package/pkg/taffy_wasm.d.ts
CHANGED
|
@@ -597,6 +597,74 @@ export type StyleProperty =
|
|
|
597
597
|
| "gridAutoRows" | "gridAutoColumns"
|
|
598
598
|
| "gridTemplateAreas" | "gridTemplateRowNames" | "gridTemplateColumnNames";
|
|
599
599
|
|
|
600
|
+
/**
|
|
601
|
+
* Valid property keys for Layout.get() method.
|
|
602
|
+
*
|
|
603
|
+
* Supports both object properties and individual flat properties.
|
|
604
|
+
*
|
|
605
|
+
* @example
|
|
606
|
+
* ```typescript
|
|
607
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
608
|
+
*
|
|
609
|
+
* const tree = new TaffyTree();
|
|
610
|
+
* const root = tree.newLeaf(new Style());
|
|
611
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
612
|
+
* const layout = tree.getLayout(root);
|
|
613
|
+
* // Object properties
|
|
614
|
+
* layout.get("position", "size");
|
|
615
|
+
*
|
|
616
|
+
* // Individual flat properties
|
|
617
|
+
* layout.get("width", "height", "marginLeft");
|
|
618
|
+
*
|
|
619
|
+
* // Mixed
|
|
620
|
+
* layout.get("position", "width", "paddingTop");
|
|
621
|
+
*
|
|
622
|
+
* tree.free();
|
|
623
|
+
* ```
|
|
624
|
+
*/
|
|
625
|
+
export type LayoutProperty =
|
|
626
|
+
// Rendering order
|
|
627
|
+
| "order"
|
|
628
|
+
// Position
|
|
629
|
+
| "position" | "x" | "y"
|
|
630
|
+
// Size
|
|
631
|
+
| "size" | "width" | "height"
|
|
632
|
+
// Content size
|
|
633
|
+
| "contentSize" | "contentWidth" | "contentHeight"
|
|
634
|
+
// Scrollbar size
|
|
635
|
+
| "scrollbarSize" | "scrollbarWidth" | "scrollbarHeight"
|
|
636
|
+
// Border
|
|
637
|
+
| "border" | "borderLeft" | "borderRight" | "borderTop" | "borderBottom"
|
|
638
|
+
// Padding
|
|
639
|
+
| "padding" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom"
|
|
640
|
+
// Margin
|
|
641
|
+
| "margin" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom";
|
|
642
|
+
|
|
643
|
+
/**
|
|
644
|
+
* Type-safe property values for Layout.get().
|
|
645
|
+
*
|
|
646
|
+
* Maps property paths to their expected value types.
|
|
647
|
+
*/
|
|
648
|
+
export type LayoutPropertyValues = {
|
|
649
|
+
[K in LayoutProperty]:
|
|
650
|
+
K extends "order" ? number :
|
|
651
|
+
K extends "position" ? Point<number> :
|
|
652
|
+
K extends "x" | "y" ? number :
|
|
653
|
+
K extends "size" ? Size<number> :
|
|
654
|
+
K extends "width" | "height" ? number :
|
|
655
|
+
K extends "contentSize" ? Size<number> :
|
|
656
|
+
K extends "contentWidth" | "contentHeight" ? number :
|
|
657
|
+
K extends "scrollbarSize" ? Size<number> :
|
|
658
|
+
K extends "scrollbarWidth" | "scrollbarHeight" ? number :
|
|
659
|
+
K extends "border" ? Rect<number> :
|
|
660
|
+
K extends "borderLeft" | "borderRight" | "borderTop" | "borderBottom" ? number :
|
|
661
|
+
K extends "padding" ? Rect<number> :
|
|
662
|
+
K extends "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" ? number :
|
|
663
|
+
K extends "margin" ? Rect<number> :
|
|
664
|
+
K extends "marginLeft" | "marginRight" | "marginTop" | "marginBottom" ? number :
|
|
665
|
+
unknown;
|
|
666
|
+
};
|
|
667
|
+
|
|
600
668
|
/**
|
|
601
669
|
* Type-safe property values for batch setting.
|
|
602
670
|
*
|
|
@@ -712,6 +780,56 @@ declare module "./taffy_wasm" {
|
|
|
712
780
|
*/
|
|
713
781
|
set(props: StylePropertyValues): void;
|
|
714
782
|
}
|
|
783
|
+
|
|
784
|
+
interface Layout {
|
|
785
|
+
/**
|
|
786
|
+
* Reads multiple layout properties in a single WASM call.
|
|
787
|
+
* Supports both object properties and individual flat properties.
|
|
788
|
+
*
|
|
789
|
+
* @returns Single value for one key, tuple for 2-3 keys, array for 4+ keys
|
|
790
|
+
*
|
|
791
|
+
* @throws Error if any property key is unknown.
|
|
792
|
+
*
|
|
793
|
+
* @remarks
|
|
794
|
+
* - Single property: returns exact value type
|
|
795
|
+
* - 2-3 properties: returns typed tuple for destructuring
|
|
796
|
+
* - 4+ properties: returns array of union types
|
|
797
|
+
*
|
|
798
|
+
* @example
|
|
799
|
+
* ```typescript
|
|
800
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
801
|
+
*
|
|
802
|
+
* const tree = new TaffyTree();
|
|
803
|
+
* const root = tree.newLeaf(new Style());
|
|
804
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
805
|
+
* const layout = tree.getLayout(root);
|
|
806
|
+
*
|
|
807
|
+
* // Single property - returns exact type
|
|
808
|
+
* const width = layout.get("width"); // number
|
|
809
|
+
*
|
|
810
|
+
* // Two properties - returns tuple for destructuring
|
|
811
|
+
* const [pos, size] = layout.get("position", "size");
|
|
812
|
+
* // pos: Point<number>, size: Size<number>
|
|
813
|
+
*
|
|
814
|
+
* // Three properties - returns tuple for destructuring
|
|
815
|
+
* const [x, y, w] = layout.get("x", "y", "width");
|
|
816
|
+
*
|
|
817
|
+
* // Four or more properties - returns array
|
|
818
|
+
* const values = layout.get("x", "y", "width", "height");
|
|
819
|
+
* // values type is: number[]
|
|
820
|
+
*
|
|
821
|
+
* tree.free();
|
|
822
|
+
* ```
|
|
823
|
+
*/
|
|
824
|
+
get<K extends LayoutProperty>(...keys: [K]): LayoutPropertyValues[K];
|
|
825
|
+
get<K1 extends LayoutProperty, K2 extends LayoutProperty>(
|
|
826
|
+
...keys: [K1, K2]
|
|
827
|
+
): [LayoutPropertyValues[K1], LayoutPropertyValues[K2]];
|
|
828
|
+
get<K1 extends LayoutProperty, K2 extends LayoutProperty, K3 extends LayoutProperty>(
|
|
829
|
+
...keys: [K1, K2, K3]
|
|
830
|
+
): [LayoutPropertyValues[K1], LayoutPropertyValues[K2], LayoutPropertyValues[K3]];
|
|
831
|
+
get<Keys extends LayoutProperty[]>(...keys: Keys): LayoutPropertyArrayValues<Keys>;
|
|
832
|
+
}
|
|
715
833
|
}
|
|
716
834
|
|
|
717
835
|
/**
|
|
@@ -722,6 +840,13 @@ type StylePropertyArrayValues<Keys extends StyleProperty[]> = {
|
|
|
722
840
|
[K in keyof Keys]: Keys[K] extends StyleProperty ? StylePropertyValues[Keys[K]] : unknown;
|
|
723
841
|
};
|
|
724
842
|
|
|
843
|
+
/**
|
|
844
|
+
* Helper type to convert an array of layout property keys to an array of their value types.
|
|
845
|
+
*/
|
|
846
|
+
type LayoutPropertyArrayValues<Keys extends LayoutProperty[]> = {
|
|
847
|
+
[K in keyof Keys]: Keys[K] extends LayoutProperty ? LayoutPropertyValues[Keys[K]] : unknown;
|
|
848
|
+
};
|
|
849
|
+
|
|
725
850
|
|
|
726
851
|
|
|
727
852
|
/**
|
|
@@ -1155,6 +1280,28 @@ export class Layout {
|
|
|
1155
1280
|
* @returns - The computed right border width in pixels
|
|
1156
1281
|
*/
|
|
1157
1282
|
readonly borderRight: number;
|
|
1283
|
+
/**
|
|
1284
|
+
* Gets the content size as a Size with contentWidth and contentHeight
|
|
1285
|
+
*
|
|
1286
|
+
* If the node has overflow content, this represents the total size of all content
|
|
1287
|
+
* (may exceed the node's width/height).
|
|
1288
|
+
*
|
|
1289
|
+
* @returns - A Size with contentWidth and contentHeight in pixels
|
|
1290
|
+
*
|
|
1291
|
+
* @example
|
|
1292
|
+
* ```typescript
|
|
1293
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1294
|
+
*
|
|
1295
|
+
* const tree = new TaffyTree();
|
|
1296
|
+
* const root = tree.newLeaf(new Style());
|
|
1297
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1298
|
+
* const layout = tree.getLayout(root);
|
|
1299
|
+
* const contentSize = layout.contentSize;
|
|
1300
|
+
* console.log(`Content: ${contentSize.width} x ${contentSize.height}`);
|
|
1301
|
+
* tree.free();
|
|
1302
|
+
* ```
|
|
1303
|
+
*/
|
|
1304
|
+
readonly contentSize: any;
|
|
1158
1305
|
/**
|
|
1159
1306
|
* Gets the right margin
|
|
1160
1307
|
*
|
|
@@ -1209,6 +1356,27 @@ export class Layout {
|
|
|
1209
1356
|
* @returns - The computed bottom padding in pixels
|
|
1210
1357
|
*/
|
|
1211
1358
|
readonly paddingBottom: number;
|
|
1359
|
+
/**
|
|
1360
|
+
* Gets the scrollbar size as a Size with scrollbarWidth and scrollbarHeight
|
|
1361
|
+
*
|
|
1362
|
+
* When overflow is set to scroll, this indicates the space reserved for scrollbars.
|
|
1363
|
+
*
|
|
1364
|
+
* @returns - A Size with scrollbarWidth and scrollbarHeight in pixels
|
|
1365
|
+
*
|
|
1366
|
+
* @example
|
|
1367
|
+
* ```typescript
|
|
1368
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1369
|
+
*
|
|
1370
|
+
* const tree = new TaffyTree();
|
|
1371
|
+
* const root = tree.newLeaf(new Style());
|
|
1372
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1373
|
+
* const layout = tree.getLayout(root);
|
|
1374
|
+
* const scrollbarSize = layout.scrollbarSize;
|
|
1375
|
+
* console.log(`Scrollbar: ${scrollbarSize.width} x ${scrollbarSize.height}`);
|
|
1376
|
+
* tree.free();
|
|
1377
|
+
* ```
|
|
1378
|
+
*/
|
|
1379
|
+
readonly scrollbarSize: any;
|
|
1212
1380
|
/**
|
|
1213
1381
|
* Gets the width of the vertical scrollbar
|
|
1214
1382
|
*
|
|
@@ -1245,6 +1413,25 @@ export class Layout {
|
|
|
1245
1413
|
* @returns - The vertical position in pixels
|
|
1246
1414
|
*/
|
|
1247
1415
|
readonly y: number;
|
|
1416
|
+
/**
|
|
1417
|
+
* Gets the size as a Size with width and height
|
|
1418
|
+
*
|
|
1419
|
+
* @returns - A Size with width and height in pixels
|
|
1420
|
+
*
|
|
1421
|
+
* @example
|
|
1422
|
+
* ```typescript
|
|
1423
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1424
|
+
*
|
|
1425
|
+
* const tree = new TaffyTree();
|
|
1426
|
+
* const root = tree.newLeaf(new Style());
|
|
1427
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1428
|
+
* const layout = tree.getLayout(root);
|
|
1429
|
+
* const size = layout.size;
|
|
1430
|
+
* console.log(`Size: ${size.width} x ${size.height}`);
|
|
1431
|
+
* tree.free();
|
|
1432
|
+
* ```
|
|
1433
|
+
*/
|
|
1434
|
+
readonly size: any;
|
|
1248
1435
|
/**
|
|
1249
1436
|
* Gets the rendering order of the node
|
|
1250
1437
|
*
|
|
@@ -1263,6 +1450,25 @@ export class Layout {
|
|
|
1263
1450
|
* @returns - The width in pixels
|
|
1264
1451
|
*/
|
|
1265
1452
|
readonly width: number;
|
|
1453
|
+
/**
|
|
1454
|
+
* Gets the border as a Rect with left, right, top, bottom border widths
|
|
1455
|
+
*
|
|
1456
|
+
* @returns - A Rect with border widths in pixels
|
|
1457
|
+
*
|
|
1458
|
+
* @example
|
|
1459
|
+
* ```typescript
|
|
1460
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1461
|
+
*
|
|
1462
|
+
* const tree = new TaffyTree();
|
|
1463
|
+
* const root = tree.newLeaf(new Style());
|
|
1464
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1465
|
+
* const layout = tree.getLayout(root);
|
|
1466
|
+
* const border = layout.border;
|
|
1467
|
+
* console.log(`Border: ${border.left} ${border.right} ${border.top} ${border.bottom}`);
|
|
1468
|
+
* tree.free();
|
|
1469
|
+
* ```
|
|
1470
|
+
*/
|
|
1471
|
+
readonly border: any;
|
|
1266
1472
|
/**
|
|
1267
1473
|
* Gets the computed height of the node
|
|
1268
1474
|
*
|
|
@@ -1272,6 +1478,63 @@ export class Layout {
|
|
|
1272
1478
|
* @returns - The height in pixels
|
|
1273
1479
|
*/
|
|
1274
1480
|
readonly height: number;
|
|
1481
|
+
/**
|
|
1482
|
+
* Gets the margin as a Rect with left, right, top, bottom margins
|
|
1483
|
+
*
|
|
1484
|
+
* @returns - A Rect with margin values in pixels
|
|
1485
|
+
*
|
|
1486
|
+
* @example
|
|
1487
|
+
* ```typescript
|
|
1488
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1489
|
+
*
|
|
1490
|
+
* const tree = new TaffyTree();
|
|
1491
|
+
* const root = tree.newLeaf(new Style());
|
|
1492
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1493
|
+
* const layout = tree.getLayout(root);
|
|
1494
|
+
* const margin = layout.margin;
|
|
1495
|
+
* console.log(`Margin: ${margin.left} ${margin.right} ${margin.top} ${margin.bottom}`);
|
|
1496
|
+
* tree.free();
|
|
1497
|
+
* ```
|
|
1498
|
+
*/
|
|
1499
|
+
readonly margin: any;
|
|
1500
|
+
/**
|
|
1501
|
+
* Gets the padding as a Rect with left, right, top, bottom padding
|
|
1502
|
+
*
|
|
1503
|
+
* @returns - A Rect with padding values in pixels
|
|
1504
|
+
*
|
|
1505
|
+
* @example
|
|
1506
|
+
* ```typescript
|
|
1507
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1508
|
+
*
|
|
1509
|
+
* const tree = new TaffyTree();
|
|
1510
|
+
* const root = tree.newLeaf(new Style());
|
|
1511
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1512
|
+
* const layout = tree.getLayout(root);
|
|
1513
|
+
* const padding = layout.padding;
|
|
1514
|
+
* console.log(`Padding: ${padding.left} ${padding.right} ${padding.top} ${padding.bottom}`);
|
|
1515
|
+
* tree.free();
|
|
1516
|
+
* ```
|
|
1517
|
+
*/
|
|
1518
|
+
readonly padding: any;
|
|
1519
|
+
/**
|
|
1520
|
+
* Gets the position as a Point with x and y coordinates
|
|
1521
|
+
*
|
|
1522
|
+
* @returns - A Point with x and y coordinates in pixels
|
|
1523
|
+
*
|
|
1524
|
+
* @example
|
|
1525
|
+
* ```typescript
|
|
1526
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1527
|
+
*
|
|
1528
|
+
* const tree = new TaffyTree();
|
|
1529
|
+
* const root = tree.newLeaf(new Style());
|
|
1530
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1531
|
+
* const layout = tree.getLayout(root);
|
|
1532
|
+
* const pos = layout.position;
|
|
1533
|
+
* console.log(`Position: (${pos.x}, ${pos.y})`);
|
|
1534
|
+
* tree.free();
|
|
1535
|
+
* ```
|
|
1536
|
+
*/
|
|
1537
|
+
readonly position: any;
|
|
1275
1538
|
}
|
|
1276
1539
|
|
|
1277
1540
|
/**
|
|
@@ -1966,15 +2229,17 @@ export class TaffyTree {
|
|
|
1966
2229
|
*
|
|
1967
2230
|
* @param node - The root node ID to print from
|
|
1968
2231
|
*
|
|
2232
|
+
* @returns - A string representation of the tree structure
|
|
2233
|
+
*
|
|
1969
2234
|
* @example
|
|
1970
2235
|
* ```typescript
|
|
1971
2236
|
* const tree = new TaffyTree();
|
|
1972
2237
|
* const rootId = tree.newLeaf(new Style());
|
|
1973
|
-
* tree.printTree(rootId);
|
|
1974
|
-
*
|
|
2238
|
+
* const output = tree.printTree(rootId);
|
|
2239
|
+
* console.log(output);
|
|
1975
2240
|
* ```
|
|
1976
2241
|
*/
|
|
1977
|
-
printTree(node: bigint):
|
|
2242
|
+
printTree(node: bigint): string;
|
|
1978
2243
|
/**
|
|
1979
2244
|
* Gets the number of children of a node
|
|
1980
2245
|
*
|
|
@@ -2676,24 +2941,32 @@ export interface InitOutput {
|
|
|
2676
2941
|
readonly __wbg_style_free: (a: number, b: number) => void;
|
|
2677
2942
|
readonly __wbg_taffyerror_free: (a: number, b: number) => void;
|
|
2678
2943
|
readonly __wbg_taffytree_free: (a: number, b: number) => void;
|
|
2944
|
+
readonly layout_border: (a: number) => any;
|
|
2679
2945
|
readonly layout_borderBottom: (a: number) => number;
|
|
2680
2946
|
readonly layout_borderLeft: (a: number) => number;
|
|
2681
2947
|
readonly layout_borderRight: (a: number) => number;
|
|
2682
2948
|
readonly layout_borderTop: (a: number) => number;
|
|
2683
2949
|
readonly layout_contentHeight: (a: number) => number;
|
|
2950
|
+
readonly layout_contentSize: (a: number) => any;
|
|
2684
2951
|
readonly layout_contentWidth: (a: number) => number;
|
|
2952
|
+
readonly layout_get: (a: number, b: number, c: number) => any;
|
|
2685
2953
|
readonly layout_height: (a: number) => number;
|
|
2954
|
+
readonly layout_margin: (a: number) => any;
|
|
2686
2955
|
readonly layout_marginBottom: (a: number) => number;
|
|
2687
2956
|
readonly layout_marginLeft: (a: number) => number;
|
|
2688
2957
|
readonly layout_marginRight: (a: number) => number;
|
|
2689
2958
|
readonly layout_marginTop: (a: number) => number;
|
|
2690
2959
|
readonly layout_order: (a: number) => number;
|
|
2960
|
+
readonly layout_padding: (a: number) => any;
|
|
2691
2961
|
readonly layout_paddingBottom: (a: number) => number;
|
|
2692
2962
|
readonly layout_paddingLeft: (a: number) => number;
|
|
2693
2963
|
readonly layout_paddingRight: (a: number) => number;
|
|
2694
2964
|
readonly layout_paddingTop: (a: number) => number;
|
|
2965
|
+
readonly layout_position: (a: number) => any;
|
|
2695
2966
|
readonly layout_scrollbarHeight: (a: number) => number;
|
|
2967
|
+
readonly layout_scrollbarSize: (a: number) => any;
|
|
2696
2968
|
readonly layout_scrollbarWidth: (a: number) => number;
|
|
2969
|
+
readonly layout_size: (a: number) => any;
|
|
2697
2970
|
readonly layout_width: (a: number) => number;
|
|
2698
2971
|
readonly layout_x: (a: number) => number;
|
|
2699
2972
|
readonly layout_y: (a: number) => number;
|
|
@@ -2860,7 +3133,7 @@ export interface InitOutput {
|
|
|
2860
3133
|
readonly taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
|
|
2861
3134
|
readonly taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
|
|
2862
3135
|
readonly taffytree_parent: (a: number, b: bigint) => [number, bigint];
|
|
2863
|
-
readonly taffytree_printTree: (a: number, b: bigint) =>
|
|
3136
|
+
readonly taffytree_printTree: (a: number, b: bigint) => [number, number];
|
|
2864
3137
|
readonly taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
|
|
2865
3138
|
readonly taffytree_removeChild: (a: number, b: bigint, c: bigint) => [bigint, number, number];
|
|
2866
3139
|
readonly taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
|
package/pkg/taffy_wasm.js
CHANGED
|
@@ -723,6 +723,32 @@ export class Layout {
|
|
|
723
723
|
const ret = wasm.layout_borderRight(this.__wbg_ptr);
|
|
724
724
|
return ret;
|
|
725
725
|
}
|
|
726
|
+
/**
|
|
727
|
+
* Gets the content size as a Size with contentWidth and contentHeight
|
|
728
|
+
*
|
|
729
|
+
* If the node has overflow content, this represents the total size of all content
|
|
730
|
+
* (may exceed the node's width/height).
|
|
731
|
+
*
|
|
732
|
+
* @returns - A Size with contentWidth and contentHeight in pixels
|
|
733
|
+
*
|
|
734
|
+
* @example
|
|
735
|
+
* ```typescript
|
|
736
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
737
|
+
*
|
|
738
|
+
* const tree = new TaffyTree();
|
|
739
|
+
* const root = tree.newLeaf(new Style());
|
|
740
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
741
|
+
* const layout = tree.getLayout(root);
|
|
742
|
+
* const contentSize = layout.contentSize;
|
|
743
|
+
* console.log(`Content: ${contentSize.width} x ${contentSize.height}`);
|
|
744
|
+
* tree.free();
|
|
745
|
+
* ```
|
|
746
|
+
* @returns {any}
|
|
747
|
+
*/
|
|
748
|
+
get contentSize() {
|
|
749
|
+
const ret = wasm.layout_contentSize(this.__wbg_ptr);
|
|
750
|
+
return ret;
|
|
751
|
+
}
|
|
726
752
|
/**
|
|
727
753
|
* Gets the right margin
|
|
728
754
|
*
|
|
@@ -809,6 +835,31 @@ export class Layout {
|
|
|
809
835
|
const ret = wasm.layout_paddingBottom(this.__wbg_ptr);
|
|
810
836
|
return ret;
|
|
811
837
|
}
|
|
838
|
+
/**
|
|
839
|
+
* Gets the scrollbar size as a Size with scrollbarWidth and scrollbarHeight
|
|
840
|
+
*
|
|
841
|
+
* When overflow is set to scroll, this indicates the space reserved for scrollbars.
|
|
842
|
+
*
|
|
843
|
+
* @returns - A Size with scrollbarWidth and scrollbarHeight in pixels
|
|
844
|
+
*
|
|
845
|
+
* @example
|
|
846
|
+
* ```typescript
|
|
847
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
848
|
+
*
|
|
849
|
+
* const tree = new TaffyTree();
|
|
850
|
+
* const root = tree.newLeaf(new Style());
|
|
851
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
852
|
+
* const layout = tree.getLayout(root);
|
|
853
|
+
* const scrollbarSize = layout.scrollbarSize;
|
|
854
|
+
* console.log(`Scrollbar: ${scrollbarSize.width} x ${scrollbarSize.height}`);
|
|
855
|
+
* tree.free();
|
|
856
|
+
* ```
|
|
857
|
+
* @returns {any}
|
|
858
|
+
*/
|
|
859
|
+
get scrollbarSize() {
|
|
860
|
+
const ret = wasm.layout_scrollbarSize(this.__wbg_ptr);
|
|
861
|
+
return ret;
|
|
862
|
+
}
|
|
812
863
|
/**
|
|
813
864
|
* Gets the width of the vertical scrollbar
|
|
814
865
|
*
|
|
@@ -861,6 +912,68 @@ export class Layout {
|
|
|
861
912
|
const ret = wasm.layout_y(this.__wbg_ptr);
|
|
862
913
|
return ret;
|
|
863
914
|
}
|
|
915
|
+
/**
|
|
916
|
+
* Reads multiple layout properties in a single WASM call.
|
|
917
|
+
*
|
|
918
|
+
* Supports both compound properties and individual flat properties.
|
|
919
|
+
*
|
|
920
|
+
* @throws Error if any property key is unknown.
|
|
921
|
+
*
|
|
922
|
+
* @param keys - Property keys to read
|
|
923
|
+
* @returns - Single value if one key, array of values if multiple keys
|
|
924
|
+
*
|
|
925
|
+
* @example
|
|
926
|
+
* ```typescript
|
|
927
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
928
|
+
*
|
|
929
|
+
* const tree = new TaffyTree();
|
|
930
|
+
* const root = tree.newLeaf(new Style());
|
|
931
|
+
* tree.computeLayout(root, { width: 800, height: 600 });
|
|
932
|
+
* const layout = tree.getLayout(root);
|
|
933
|
+
*
|
|
934
|
+
* // Read single property
|
|
935
|
+
* const width = layout.get("width");
|
|
936
|
+
*
|
|
937
|
+
* // Read compound property
|
|
938
|
+
* const pos = layout.get("position");
|
|
939
|
+
*
|
|
940
|
+
* // Read multiple properties with destructuring
|
|
941
|
+
* const [position, size] = layout.get("position", "size");
|
|
942
|
+
*
|
|
943
|
+
* tree.free();
|
|
944
|
+
* ```
|
|
945
|
+
* @param {...string[]} keys
|
|
946
|
+
* @returns {any}
|
|
947
|
+
*/
|
|
948
|
+
get(...keys) {
|
|
949
|
+
const ptr0 = passArrayJsValueToWasm0(keys, wasm.__wbindgen_malloc);
|
|
950
|
+
const len0 = WASM_VECTOR_LEN;
|
|
951
|
+
const ret = wasm.layout_get(this.__wbg_ptr, ptr0, len0);
|
|
952
|
+
return ret;
|
|
953
|
+
}
|
|
954
|
+
/**
|
|
955
|
+
* Gets the size as a Size with width and height
|
|
956
|
+
*
|
|
957
|
+
* @returns - A Size with width and height in pixels
|
|
958
|
+
*
|
|
959
|
+
* @example
|
|
960
|
+
* ```typescript
|
|
961
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
962
|
+
*
|
|
963
|
+
* const tree = new TaffyTree();
|
|
964
|
+
* const root = tree.newLeaf(new Style());
|
|
965
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
966
|
+
* const layout = tree.getLayout(root);
|
|
967
|
+
* const size = layout.size;
|
|
968
|
+
* console.log(`Size: ${size.width} x ${size.height}`);
|
|
969
|
+
* tree.free();
|
|
970
|
+
* ```
|
|
971
|
+
* @returns {any}
|
|
972
|
+
*/
|
|
973
|
+
get size() {
|
|
974
|
+
const ret = wasm.layout_size(this.__wbg_ptr);
|
|
975
|
+
return ret;
|
|
976
|
+
}
|
|
864
977
|
/**
|
|
865
978
|
* Gets the rendering order of the node
|
|
866
979
|
*
|
|
@@ -887,6 +1000,29 @@ export class Layout {
|
|
|
887
1000
|
const ret = wasm.layout_width(this.__wbg_ptr);
|
|
888
1001
|
return ret;
|
|
889
1002
|
}
|
|
1003
|
+
/**
|
|
1004
|
+
* Gets the border as a Rect with left, right, top, bottom border widths
|
|
1005
|
+
*
|
|
1006
|
+
* @returns - A Rect with border widths in pixels
|
|
1007
|
+
*
|
|
1008
|
+
* @example
|
|
1009
|
+
* ```typescript
|
|
1010
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1011
|
+
*
|
|
1012
|
+
* const tree = new TaffyTree();
|
|
1013
|
+
* const root = tree.newLeaf(new Style());
|
|
1014
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1015
|
+
* const layout = tree.getLayout(root);
|
|
1016
|
+
* const border = layout.border;
|
|
1017
|
+
* console.log(`Border: ${border.left} ${border.right} ${border.top} ${border.bottom}`);
|
|
1018
|
+
* tree.free();
|
|
1019
|
+
* ```
|
|
1020
|
+
* @returns {any}
|
|
1021
|
+
*/
|
|
1022
|
+
get border() {
|
|
1023
|
+
const ret = wasm.layout_border(this.__wbg_ptr);
|
|
1024
|
+
return ret;
|
|
1025
|
+
}
|
|
890
1026
|
/**
|
|
891
1027
|
* Gets the computed height of the node
|
|
892
1028
|
*
|
|
@@ -900,6 +1036,75 @@ export class Layout {
|
|
|
900
1036
|
const ret = wasm.layout_height(this.__wbg_ptr);
|
|
901
1037
|
return ret;
|
|
902
1038
|
}
|
|
1039
|
+
/**
|
|
1040
|
+
* Gets the margin as a Rect with left, right, top, bottom margins
|
|
1041
|
+
*
|
|
1042
|
+
* @returns - A Rect with margin values in pixels
|
|
1043
|
+
*
|
|
1044
|
+
* @example
|
|
1045
|
+
* ```typescript
|
|
1046
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1047
|
+
*
|
|
1048
|
+
* const tree = new TaffyTree();
|
|
1049
|
+
* const root = tree.newLeaf(new Style());
|
|
1050
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1051
|
+
* const layout = tree.getLayout(root);
|
|
1052
|
+
* const margin = layout.margin;
|
|
1053
|
+
* console.log(`Margin: ${margin.left} ${margin.right} ${margin.top} ${margin.bottom}`);
|
|
1054
|
+
* tree.free();
|
|
1055
|
+
* ```
|
|
1056
|
+
* @returns {any}
|
|
1057
|
+
*/
|
|
1058
|
+
get margin() {
|
|
1059
|
+
const ret = wasm.layout_margin(this.__wbg_ptr);
|
|
1060
|
+
return ret;
|
|
1061
|
+
}
|
|
1062
|
+
/**
|
|
1063
|
+
* Gets the padding as a Rect with left, right, top, bottom padding
|
|
1064
|
+
*
|
|
1065
|
+
* @returns - A Rect with padding values in pixels
|
|
1066
|
+
*
|
|
1067
|
+
* @example
|
|
1068
|
+
* ```typescript
|
|
1069
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1070
|
+
*
|
|
1071
|
+
* const tree = new TaffyTree();
|
|
1072
|
+
* const root = tree.newLeaf(new Style());
|
|
1073
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1074
|
+
* const layout = tree.getLayout(root);
|
|
1075
|
+
* const padding = layout.padding;
|
|
1076
|
+
* console.log(`Padding: ${padding.left} ${padding.right} ${padding.top} ${padding.bottom}`);
|
|
1077
|
+
* tree.free();
|
|
1078
|
+
* ```
|
|
1079
|
+
* @returns {any}
|
|
1080
|
+
*/
|
|
1081
|
+
get padding() {
|
|
1082
|
+
const ret = wasm.layout_padding(this.__wbg_ptr);
|
|
1083
|
+
return ret;
|
|
1084
|
+
}
|
|
1085
|
+
/**
|
|
1086
|
+
* Gets the position as a Point with x and y coordinates
|
|
1087
|
+
*
|
|
1088
|
+
* @returns - A Point with x and y coordinates in pixels
|
|
1089
|
+
*
|
|
1090
|
+
* @example
|
|
1091
|
+
* ```typescript
|
|
1092
|
+
* import { TaffyTree, Style } from "taffy-layout";
|
|
1093
|
+
*
|
|
1094
|
+
* const tree = new TaffyTree();
|
|
1095
|
+
* const root = tree.newLeaf(new Style());
|
|
1096
|
+
* tree.computeLayout(root, { width: 100, height: 100 });
|
|
1097
|
+
* const layout = tree.getLayout(root);
|
|
1098
|
+
* const pos = layout.position;
|
|
1099
|
+
* console.log(`Position: (${pos.x}, ${pos.y})`);
|
|
1100
|
+
* tree.free();
|
|
1101
|
+
* ```
|
|
1102
|
+
* @returns {any}
|
|
1103
|
+
*/
|
|
1104
|
+
get position() {
|
|
1105
|
+
const ret = wasm.layout_position(this.__wbg_ptr);
|
|
1106
|
+
return ret;
|
|
1107
|
+
}
|
|
903
1108
|
}
|
|
904
1109
|
if (Symbol.dispose) Layout.prototype[Symbol.dispose] = Layout.prototype.free;
|
|
905
1110
|
|
|
@@ -3072,17 +3277,29 @@ export class TaffyTree {
|
|
|
3072
3277
|
*
|
|
3073
3278
|
* @param node - The root node ID to print from
|
|
3074
3279
|
*
|
|
3280
|
+
* @returns - A string representation of the tree structure
|
|
3281
|
+
*
|
|
3075
3282
|
* @example
|
|
3076
3283
|
* ```typescript
|
|
3077
3284
|
* const tree = new TaffyTree();
|
|
3078
3285
|
* const rootId = tree.newLeaf(new Style());
|
|
3079
|
-
* tree.printTree(rootId);
|
|
3080
|
-
*
|
|
3286
|
+
* const output = tree.printTree(rootId);
|
|
3287
|
+
* console.log(output);
|
|
3081
3288
|
* ```
|
|
3082
3289
|
* @param {bigint} node
|
|
3290
|
+
* @returns {string}
|
|
3083
3291
|
*/
|
|
3084
3292
|
printTree(node) {
|
|
3085
|
-
|
|
3293
|
+
let deferred1_0;
|
|
3294
|
+
let deferred1_1;
|
|
3295
|
+
try {
|
|
3296
|
+
const ret = wasm.taffytree_printTree(this.__wbg_ptr, node);
|
|
3297
|
+
deferred1_0 = ret[0];
|
|
3298
|
+
deferred1_1 = ret[1];
|
|
3299
|
+
return getStringFromWasm0(ret[0], ret[1]);
|
|
3300
|
+
} finally {
|
|
3301
|
+
wasm.__wbindgen_free(deferred1_0, deferred1_1, 1);
|
|
3302
|
+
}
|
|
3086
3303
|
}
|
|
3087
3304
|
/**
|
|
3088
3305
|
* Gets the number of children of a node
|
package/pkg/taffy_wasm_bg.wasm
CHANGED
|
Binary file
|
|
@@ -5,24 +5,32 @@ export const __wbg_layout_free: (a: number, b: number) => void;
|
|
|
5
5
|
export const __wbg_style_free: (a: number, b: number) => void;
|
|
6
6
|
export const __wbg_taffyerror_free: (a: number, b: number) => void;
|
|
7
7
|
export const __wbg_taffytree_free: (a: number, b: number) => void;
|
|
8
|
+
export const layout_border: (a: number) => any;
|
|
8
9
|
export const layout_borderBottom: (a: number) => number;
|
|
9
10
|
export const layout_borderLeft: (a: number) => number;
|
|
10
11
|
export const layout_borderRight: (a: number) => number;
|
|
11
12
|
export const layout_borderTop: (a: number) => number;
|
|
12
13
|
export const layout_contentHeight: (a: number) => number;
|
|
14
|
+
export const layout_contentSize: (a: number) => any;
|
|
13
15
|
export const layout_contentWidth: (a: number) => number;
|
|
16
|
+
export const layout_get: (a: number, b: number, c: number) => any;
|
|
14
17
|
export const layout_height: (a: number) => number;
|
|
18
|
+
export const layout_margin: (a: number) => any;
|
|
15
19
|
export const layout_marginBottom: (a: number) => number;
|
|
16
20
|
export const layout_marginLeft: (a: number) => number;
|
|
17
21
|
export const layout_marginRight: (a: number) => number;
|
|
18
22
|
export const layout_marginTop: (a: number) => number;
|
|
19
23
|
export const layout_order: (a: number) => number;
|
|
24
|
+
export const layout_padding: (a: number) => any;
|
|
20
25
|
export const layout_paddingBottom: (a: number) => number;
|
|
21
26
|
export const layout_paddingLeft: (a: number) => number;
|
|
22
27
|
export const layout_paddingRight: (a: number) => number;
|
|
23
28
|
export const layout_paddingTop: (a: number) => number;
|
|
29
|
+
export const layout_position: (a: number) => any;
|
|
24
30
|
export const layout_scrollbarHeight: (a: number) => number;
|
|
31
|
+
export const layout_scrollbarSize: (a: number) => any;
|
|
25
32
|
export const layout_scrollbarWidth: (a: number) => number;
|
|
33
|
+
export const layout_size: (a: number) => any;
|
|
26
34
|
export const layout_width: (a: number) => number;
|
|
27
35
|
export const layout_x: (a: number) => number;
|
|
28
36
|
export const layout_y: (a: number) => number;
|
|
@@ -189,7 +197,7 @@ export const taffytree_newLeaf: (a: number, b: number) => [bigint, number, numbe
|
|
|
189
197
|
export const taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
|
|
190
198
|
export const taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
|
|
191
199
|
export const taffytree_parent: (a: number, b: bigint) => [number, bigint];
|
|
192
|
-
export const taffytree_printTree: (a: number, b: bigint) =>
|
|
200
|
+
export const taffytree_printTree: (a: number, b: bigint) => [number, number];
|
|
193
201
|
export const taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
|
|
194
202
|
export const taffytree_removeChild: (a: number, b: bigint, c: bigint) => [bigint, number, number];
|
|
195
203
|
export const taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
|