taffy-layout 0.1.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.md +262 -0
- package/dist/index.d.ts +39 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +66 -0
- package/dist/index.js.map +1 -0
- package/package.json +81 -0
- package/pkg/README.md +262 -0
- package/pkg/package-lock.json +13 -0
- package/pkg/package.json +24 -0
- package/pkg/taffy_wasm.d.ts +2480 -0
- package/pkg/taffy_wasm.js +3504 -0
- package/pkg/taffy_wasm_bg.wasm +0 -0
- package/pkg/taffy_wasm_bg.wasm.d.ts +150 -0
|
@@ -0,0 +1,2480 @@
|
|
|
1
|
+
/* tslint:disable */
|
|
2
|
+
/* eslint-disable */
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Available space constraint for layout computation.
|
|
6
|
+
*
|
|
7
|
+
* Specifies how much space is available for a node during layout calculation.
|
|
8
|
+
* This is passed to `computeLayout()` to define the container constraints.
|
|
9
|
+
*
|
|
10
|
+
* @remarks
|
|
11
|
+
* - Use `number` when you have a fixed container size
|
|
12
|
+
* - Use `"min-content"` to shrink-wrap to the minimum content size
|
|
13
|
+
* - Use `"max-content"` to expand to fit all content without wrapping
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```typescript
|
|
17
|
+
* import init, { TaffyTree, Style, type AvailableSpace, type Size } from 'taffy-layout';
|
|
18
|
+
*
|
|
19
|
+
* await init();
|
|
20
|
+
* const tree = new TaffyTree();
|
|
21
|
+
* const root: bigint = tree.newLeaf(new Style());
|
|
22
|
+
*
|
|
23
|
+
* // Fixed size container with type annotation
|
|
24
|
+
* const fixedSpace: Size<AvailableSpace> = {
|
|
25
|
+
* width: 800,
|
|
26
|
+
* height: 600
|
|
27
|
+
* };
|
|
28
|
+
* tree.computeLayout(root, fixedSpace);
|
|
29
|
+
*
|
|
30
|
+
* // Flexible width, fixed height
|
|
31
|
+
* const flexibleSpace: Size<AvailableSpace> = {
|
|
32
|
+
* width: "max-content",
|
|
33
|
+
* height: 400
|
|
34
|
+
* };
|
|
35
|
+
* tree.computeLayout(root, flexibleSpace);
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export type AvailableSpace = number | "min-content" | "max-content";
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Generic size type with width and height.
|
|
42
|
+
*
|
|
43
|
+
* A two-dimensional container for width and height values. The type parameter `T`
|
|
44
|
+
* determines what kind of values are stored.
|
|
45
|
+
*
|
|
46
|
+
* @typeParam T - The type of each dimension (e.g., `number`, `Dimension`, `AvailableSpace`)
|
|
47
|
+
*
|
|
48
|
+
* @property width - The horizontal dimension value
|
|
49
|
+
* @property height - The vertical dimension value
|
|
50
|
+
*
|
|
51
|
+
* @example
|
|
52
|
+
* ```typescript
|
|
53
|
+
* import type { Size, Dimension, AvailableSpace } from 'taffy-layout';
|
|
54
|
+
*
|
|
55
|
+
* // Size with explicit type parameters
|
|
56
|
+
* const pixelSize: Size<number> = { width: 200, height: 100 };
|
|
57
|
+
*
|
|
58
|
+
* const dimensionSize: Size<Dimension> = {
|
|
59
|
+
* width: 200,
|
|
60
|
+
* height: "50%"
|
|
61
|
+
* };
|
|
62
|
+
*
|
|
63
|
+
* const availableSize: Size<AvailableSpace> = {
|
|
64
|
+
* width: 800,
|
|
65
|
+
* height: "max-content"
|
|
66
|
+
* };
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
export type Size<T> = {
|
|
70
|
+
/** The horizontal dimension value */
|
|
71
|
+
width: T;
|
|
72
|
+
/** The vertical dimension value */
|
|
73
|
+
height: T;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Custom measure function for leaf nodes with text or other dynamic content.
|
|
78
|
+
*
|
|
79
|
+
* This callback is invoked during layout computation for leaf nodes that need
|
|
80
|
+
* custom sizing based on their content (e.g., text nodes that need text measurement).
|
|
81
|
+
*
|
|
82
|
+
* @param knownDimensions - Dimensions already determined by constraints. Each dimension
|
|
83
|
+
* is `number` if known, or `undefined` if needs to be measured.
|
|
84
|
+
* @param availableSpace - The available space constraints for the node. Can be definite
|
|
85
|
+
* pixels, "min-content", or "max-content".
|
|
86
|
+
* @param node - The node ID (`bigint`) of the node being measured
|
|
87
|
+
* @param context - User-provided context attached to the node via `newLeafWithContext()`
|
|
88
|
+
* @param style - The node's current Style configuration
|
|
89
|
+
*
|
|
90
|
+
* @returns - The measured size of the content in pixels
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```typescript
|
|
94
|
+
* import init, { TaffyTree, Style, type MeasureFunction, type Size } from 'taffy-layout';
|
|
95
|
+
*
|
|
96
|
+
* interface TextContext {
|
|
97
|
+
* text: string;
|
|
98
|
+
* fontSize: number;
|
|
99
|
+
* }
|
|
100
|
+
*
|
|
101
|
+
* await init();
|
|
102
|
+
* const tree = new TaffyTree();
|
|
103
|
+
*
|
|
104
|
+
* const style = new Style();
|
|
105
|
+
* const context: TextContext = { text: "Hello, World!", fontSize: 16 };
|
|
106
|
+
* const textNode: bigint = tree.newLeafWithContext(style, context);
|
|
107
|
+
*
|
|
108
|
+
* // Helper function to measure text width
|
|
109
|
+
* const measureTextWidth = (text: string, fontSize: number) => text.length * fontSize * 0.6;
|
|
110
|
+
*
|
|
111
|
+
* // Typed measure function
|
|
112
|
+
* const measureText: MeasureFunction = (
|
|
113
|
+
* knownDimensions,
|
|
114
|
+
* availableSpace,
|
|
115
|
+
* node,
|
|
116
|
+
* context,
|
|
117
|
+
* style
|
|
118
|
+
* ): Size<number> => {
|
|
119
|
+
* const ctx = context as TextContext | undefined;
|
|
120
|
+
* if (!ctx?.text) return { width: 0, height: 0 };
|
|
121
|
+
*
|
|
122
|
+
* const width = knownDimensions.width ?? measureTextWidth(ctx.text, ctx.fontSize);
|
|
123
|
+
* const height = knownDimensions.height ?? ctx.fontSize * 1.2;
|
|
124
|
+
*
|
|
125
|
+
* return { width, height };
|
|
126
|
+
* };
|
|
127
|
+
*
|
|
128
|
+
* tree.computeLayoutWithMeasure(
|
|
129
|
+
* textNode,
|
|
130
|
+
* { width: 200, height: "max-content" },
|
|
131
|
+
* measureText
|
|
132
|
+
* );
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
135
|
+
export type MeasureFunction = (
|
|
136
|
+
knownDimensions: Size<number | undefined>,
|
|
137
|
+
availableSpace: Size<AvailableSpace>,
|
|
138
|
+
node: bigint,
|
|
139
|
+
context: any,
|
|
140
|
+
style: Style,
|
|
141
|
+
) => Size<number>;
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Dimension type supporting length, percentage, or auto values.
|
|
145
|
+
*
|
|
146
|
+
* Used for sizing properties like `width`, `height`, `flexBasis`, etc.
|
|
147
|
+
*
|
|
148
|
+
* @remarks
|
|
149
|
+
* - `number`: Fixed size in pixels
|
|
150
|
+
* - `"{number}%"`: Percentage of parent's size (0-100)
|
|
151
|
+
* - `"auto"`: Size determined by content or layout algorithm
|
|
152
|
+
*
|
|
153
|
+
* @example
|
|
154
|
+
* ```typescript
|
|
155
|
+
* import { Style, type Dimension, type Size } from 'taffy-layout';
|
|
156
|
+
*
|
|
157
|
+
* const style = new Style();
|
|
158
|
+
*
|
|
159
|
+
* // With explicit type annotations
|
|
160
|
+
* const fixedSize: Size<Dimension> = {
|
|
161
|
+
* width: 200,
|
|
162
|
+
* height: 100
|
|
163
|
+
* };
|
|
164
|
+
*
|
|
165
|
+
* const percentSize: Size<Dimension> = {
|
|
166
|
+
* width: "50%",
|
|
167
|
+
* height: "100%"
|
|
168
|
+
* };
|
|
169
|
+
*
|
|
170
|
+
* const autoSize: Size<Dimension> = {
|
|
171
|
+
* width: "auto",
|
|
172
|
+
* height: "auto"
|
|
173
|
+
* };
|
|
174
|
+
*
|
|
175
|
+
* style.size = fixedSize;
|
|
176
|
+
* ```
|
|
177
|
+
*/
|
|
178
|
+
export type Dimension = number | `${number}%` | "auto";
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Length or percentage value (no auto support).
|
|
182
|
+
*
|
|
183
|
+
* Used for properties that require explicit values, such as `padding`, `border`, and `gap`.
|
|
184
|
+
*
|
|
185
|
+
* @remarks
|
|
186
|
+
* - `number`: Fixed size in pixels
|
|
187
|
+
* - `"{number}%"`: Percentage of parent's size (0-100)
|
|
188
|
+
*
|
|
189
|
+
* @example
|
|
190
|
+
* ```typescript
|
|
191
|
+
* import { Style, type LengthPercentage, type Rect, type Size } from 'taffy-layout';
|
|
192
|
+
*
|
|
193
|
+
* const style = new Style();
|
|
194
|
+
*
|
|
195
|
+
* const padding: Rect<LengthPercentage> = {
|
|
196
|
+
* left: 10,
|
|
197
|
+
* right: 10,
|
|
198
|
+
* top: 5,
|
|
199
|
+
* bottom: 5
|
|
200
|
+
* };
|
|
201
|
+
*
|
|
202
|
+
* const gap: Size<LengthPercentage> = {
|
|
203
|
+
* width: "5%",
|
|
204
|
+
* height: "5%"
|
|
205
|
+
* };
|
|
206
|
+
*
|
|
207
|
+
* style.padding = padding;
|
|
208
|
+
* style.gap = gap;
|
|
209
|
+
* ```
|
|
210
|
+
*/
|
|
211
|
+
export type LengthPercentage = number | `${number}%`;
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* Length, percentage, or auto value.
|
|
215
|
+
*
|
|
216
|
+
* Used for properties that support auto values, such as `margin` and `inset`.
|
|
217
|
+
*
|
|
218
|
+
* @remarks
|
|
219
|
+
* - `number`: Fixed size in pixels
|
|
220
|
+
* - `"{number}%"`: Percentage of parent's size (0-100)
|
|
221
|
+
* - `"auto"`: Automatic value (behavior depends on property)
|
|
222
|
+
*
|
|
223
|
+
* @example
|
|
224
|
+
* ```typescript
|
|
225
|
+
* import { Style, type LengthPercentageAuto, type Rect } from 'taffy-layout';
|
|
226
|
+
*
|
|
227
|
+
* const style = new Style();
|
|
228
|
+
*
|
|
229
|
+
* // Auto margins for horizontal centering
|
|
230
|
+
* const centerMargin: Rect<LengthPercentageAuto> = {
|
|
231
|
+
* left: "auto",
|
|
232
|
+
* right: "auto",
|
|
233
|
+
* top: 0,
|
|
234
|
+
* bottom: 0
|
|
235
|
+
* };
|
|
236
|
+
*
|
|
237
|
+
* style.margin = centerMargin;
|
|
238
|
+
* ```
|
|
239
|
+
*/
|
|
240
|
+
export type LengthPercentageAuto = number | `${number}%` | "auto";
|
|
241
|
+
|
|
242
|
+
/**
|
|
243
|
+
* Point with x and y coordinates/values.
|
|
244
|
+
*
|
|
245
|
+
* Used for properties that have separate horizontal (x) and vertical (y) values,
|
|
246
|
+
* such as `overflow`.
|
|
247
|
+
*
|
|
248
|
+
* @typeParam T - The type of each coordinate
|
|
249
|
+
*
|
|
250
|
+
* @property x - The horizontal value
|
|
251
|
+
* @property y - The vertical value
|
|
252
|
+
*
|
|
253
|
+
* @example
|
|
254
|
+
* ```typescript
|
|
255
|
+
* import { Style, Overflow, type Point } from 'taffy-layout';
|
|
256
|
+
*
|
|
257
|
+
* const style = new Style();
|
|
258
|
+
*
|
|
259
|
+
* const overflow: Point<typeof Overflow[keyof typeof Overflow]> = {
|
|
260
|
+
* x: Overflow.Hidden,
|
|
261
|
+
* y: Overflow.Scroll
|
|
262
|
+
* };
|
|
263
|
+
*
|
|
264
|
+
* style.overflow = overflow;
|
|
265
|
+
* ```
|
|
266
|
+
*/
|
|
267
|
+
export type Point<T> = {
|
|
268
|
+
/** The horizontal (x-axis) value */
|
|
269
|
+
x: T;
|
|
270
|
+
/** The vertical (y-axis) value */
|
|
271
|
+
y: T;
|
|
272
|
+
};
|
|
273
|
+
|
|
274
|
+
/**
|
|
275
|
+
* Rectangle with left, right, top, and bottom values.
|
|
276
|
+
*
|
|
277
|
+
* Used for box model properties like `margin`, `padding`, `border`, and `inset`.
|
|
278
|
+
*
|
|
279
|
+
* @typeParam T - The type of each side value
|
|
280
|
+
*
|
|
281
|
+
* @property left - The left side value
|
|
282
|
+
* @property right - The right side value
|
|
283
|
+
* @property top - The top side value
|
|
284
|
+
* @property bottom - The bottom side value
|
|
285
|
+
*
|
|
286
|
+
* @example
|
|
287
|
+
* ```typescript
|
|
288
|
+
* import { Style, type Rect, type LengthPercentage, type LengthPercentageAuto } from 'taffy-layout';
|
|
289
|
+
*
|
|
290
|
+
* const style = new Style();
|
|
291
|
+
*
|
|
292
|
+
* // Typed padding
|
|
293
|
+
* const padding: Rect<LengthPercentage> = {
|
|
294
|
+
* left: 10,
|
|
295
|
+
* right: 10,
|
|
296
|
+
* top: 10,
|
|
297
|
+
* bottom: 10
|
|
298
|
+
* };
|
|
299
|
+
*
|
|
300
|
+
* // Typed margin with auto
|
|
301
|
+
* const margin: Rect<LengthPercentageAuto> = {
|
|
302
|
+
* left: "auto",
|
|
303
|
+
* right: "auto",
|
|
304
|
+
* top: 10,
|
|
305
|
+
* bottom: 30
|
|
306
|
+
* };
|
|
307
|
+
*
|
|
308
|
+
* style.padding = padding;
|
|
309
|
+
* style.margin = margin;
|
|
310
|
+
* ```
|
|
311
|
+
*/
|
|
312
|
+
export type Rect<T> = {
|
|
313
|
+
/** The left side value */
|
|
314
|
+
left: T;
|
|
315
|
+
/** The right side value */
|
|
316
|
+
right: T;
|
|
317
|
+
/** The top side value */
|
|
318
|
+
top: T;
|
|
319
|
+
/** The bottom side value */
|
|
320
|
+
bottom: T;
|
|
321
|
+
};
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* Detailed layout information (for grid layouts).
|
|
325
|
+
*
|
|
326
|
+
* Returned by `detailedLayoutInfo()` for nodes using CSS Grid layout.
|
|
327
|
+
* Contains detailed information about grid tracks and item placement.
|
|
328
|
+
*
|
|
329
|
+
* @remarks
|
|
330
|
+
* This is only available when the `detailed_layout_info` feature is enabled.
|
|
331
|
+
*
|
|
332
|
+
* @example
|
|
333
|
+
* ```typescript
|
|
334
|
+
* import { TaffyTree, Style, Display, type DetailedLayoutInfo, type DetailedGridInfo } from 'taffy-layout';
|
|
335
|
+
*
|
|
336
|
+
* const tree = new TaffyTree();
|
|
337
|
+
* const style = new Style();
|
|
338
|
+
* style.display = Display.Grid;
|
|
339
|
+
* const gridNode = tree.newLeaf(style);
|
|
340
|
+
* tree.computeLayout(gridNode, { width: 100, height: 100 });
|
|
341
|
+
*
|
|
342
|
+
* const info: DetailedLayoutInfo = tree.detailedLayoutInfo(gridNode);
|
|
343
|
+
*
|
|
344
|
+
* if (info && typeof info === 'object' && 'Grid' in info) {
|
|
345
|
+
* const grid = info.Grid as DetailedGridInfo;
|
|
346
|
+
* console.log('Rows:', grid.rows.sizes);
|
|
347
|
+
* console.log('Columns:', grid.columns.sizes);
|
|
348
|
+
* }
|
|
349
|
+
* ```
|
|
350
|
+
*/
|
|
351
|
+
export type DetailedLayoutInfo = DetailedGridInfo | undefined;
|
|
352
|
+
|
|
353
|
+
/**
|
|
354
|
+
* Detailed information about a grid layout.
|
|
355
|
+
*
|
|
356
|
+
* Contains information about grid rows, columns, and item placement.
|
|
357
|
+
*
|
|
358
|
+
* @property rows - Information about row tracks
|
|
359
|
+
* @property columns - Information about column tracks
|
|
360
|
+
* @property items - Array of item placement information
|
|
361
|
+
*/
|
|
362
|
+
export type DetailedGridInfo = {
|
|
363
|
+
/** Information about the grid's row tracks */
|
|
364
|
+
rows: DetailedGridTracksInfo;
|
|
365
|
+
/** Information about the grid's column tracks */
|
|
366
|
+
columns: DetailedGridTracksInfo;
|
|
367
|
+
/** Placement information for each grid item */
|
|
368
|
+
items: DetailedGridItemsInfo[];
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
/**
|
|
372
|
+
* Information about grid tracks (rows or columns).
|
|
373
|
+
*
|
|
374
|
+
* Provides detailed sizing and gutter information for a set of grid tracks.
|
|
375
|
+
*
|
|
376
|
+
* @property negativeImplicitTracks - Number of implicit tracks before explicit tracks
|
|
377
|
+
* @property explicitTracks - Number of explicitly defined tracks
|
|
378
|
+
* @property positiveImplicitTracks - Number of implicit tracks after explicit tracks
|
|
379
|
+
* @property gutters - Array of gutter sizes between tracks (in pixels)
|
|
380
|
+
* @property sizes - Array of track sizes (in pixels)
|
|
381
|
+
*/
|
|
382
|
+
export type DetailedGridTracksInfo = {
|
|
383
|
+
/** Number of implicit tracks before explicit tracks (for negative line numbers) */
|
|
384
|
+
negativeImplicitTracks: number;
|
|
385
|
+
/** Number of tracks explicitly defined in grid-template-rows/columns */
|
|
386
|
+
explicitTracks: number;
|
|
387
|
+
/** Number of implicit tracks created after explicit tracks */
|
|
388
|
+
positiveImplicitTracks: number;
|
|
389
|
+
/** Gap sizes between tracks in pixels */
|
|
390
|
+
gutters: number[];
|
|
391
|
+
/** Computed sizes of each track in pixels */
|
|
392
|
+
sizes: number[];
|
|
393
|
+
};
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Information about a grid item's placement.
|
|
397
|
+
*
|
|
398
|
+
* Specifies which grid lines the item spans on both axes.
|
|
399
|
+
* Line numbers are 1-indexed, with 1 being the first line.
|
|
400
|
+
*
|
|
401
|
+
* @property rowStart - Starting row line number (1-indexed)
|
|
402
|
+
* @property rowEnd - Ending row line number (exclusive)
|
|
403
|
+
* @property columnStart - Starting column line number (1-indexed)
|
|
404
|
+
* @property columnEnd - Ending column line number (exclusive)
|
|
405
|
+
*/
|
|
406
|
+
export type DetailedGridItemsInfo = {
|
|
407
|
+
/** Starting row line (1-indexed) */
|
|
408
|
+
rowStart: number;
|
|
409
|
+
/** Ending row line (exclusive) */
|
|
410
|
+
rowEnd: number;
|
|
411
|
+
/** Starting column line (1-indexed) */
|
|
412
|
+
columnStart: number;
|
|
413
|
+
/** Ending column line (exclusive) */
|
|
414
|
+
columnEnd: number;
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
/**
|
|
418
|
+
* Grid placement type for positioning grid items.
|
|
419
|
+
*
|
|
420
|
+
* Specifies how an item is placed on a grid track (row or column).
|
|
421
|
+
* Follows CSS `grid-row-start` / `grid-column-start` specification.
|
|
422
|
+
*
|
|
423
|
+
* @remarks
|
|
424
|
+
* - `"auto"`: Auto-placement using the grid's flow algorithm
|
|
425
|
+
* - `number`: Place at a specific line index (1-indexed, can be negative)
|
|
426
|
+
* - `{ span: number }`: Span a specified number of tracks
|
|
427
|
+
*
|
|
428
|
+
* @example
|
|
429
|
+
* ```typescript
|
|
430
|
+
* import type { GridPlacement, Line } from 'taffy-layout';
|
|
431
|
+
*
|
|
432
|
+
* // Line index (CSS: grid-row-start: 2)
|
|
433
|
+
* const lineIndex: GridPlacement = 2;
|
|
434
|
+
*
|
|
435
|
+
* // Auto placement (CSS: grid-row-start: auto)
|
|
436
|
+
* const auto: GridPlacement = "auto";
|
|
437
|
+
*
|
|
438
|
+
* // Span (CSS: grid-row-start: span 3)
|
|
439
|
+
* const span: GridPlacement = { span: 3 };
|
|
440
|
+
*
|
|
441
|
+
* // Named line (CSS: grid-row-start: header 2)
|
|
442
|
+
* const named: GridPlacement = { line: 2, ident: "header" };
|
|
443
|
+
*
|
|
444
|
+
* // Named span (CSS: grid-row-start: span 2 header)
|
|
445
|
+
* const namedSpan: GridPlacement = { span: 2, ident: "header" };
|
|
446
|
+
* ```
|
|
447
|
+
*/
|
|
448
|
+
export type GridPlacement = "auto" | number | {line: number; ident: string} | {span: number; ident?: string};
|
|
449
|
+
|
|
450
|
+
/**
|
|
451
|
+
* Line type representing start and end positions.
|
|
452
|
+
*
|
|
453
|
+
* A container for start and end values, used for CSS grid-row and grid-column
|
|
454
|
+
* shorthand properties.
|
|
455
|
+
*
|
|
456
|
+
* @typeParam T - The type of start and end values
|
|
457
|
+
*
|
|
458
|
+
* @property start - The starting line/position
|
|
459
|
+
* @property end - The ending line/position
|
|
460
|
+
*
|
|
461
|
+
* @example
|
|
462
|
+
* ```typescript
|
|
463
|
+
* import { Style, Display, type Line, type GridPlacement } from 'taffy-layout';
|
|
464
|
+
*
|
|
465
|
+
* const style = new Style();
|
|
466
|
+
* style.display = Display.Grid;
|
|
467
|
+
*
|
|
468
|
+
* // CSS: grid-row: 1 / 3
|
|
469
|
+
* style.gridRow = { start: 1, end: 3 };
|
|
470
|
+
*
|
|
471
|
+
* // CSS: grid-column: 1 / span 2
|
|
472
|
+
* style.gridColumn = { start: 1, end: { span: 2 } };
|
|
473
|
+
*
|
|
474
|
+
* // CSS: grid-row: auto / auto
|
|
475
|
+
* style.gridRow = { start: "auto", end: "auto" };
|
|
476
|
+
* ```
|
|
477
|
+
*/
|
|
478
|
+
export type Line<T> = {
|
|
479
|
+
/** The starting position (CSS: *-start) */
|
|
480
|
+
start: T;
|
|
481
|
+
/** The ending position (CSS: *-end) */
|
|
482
|
+
end: T;
|
|
483
|
+
}
|
|
484
|
+
/**
|
|
485
|
+
* Grid track repetition parameter.
|
|
486
|
+
*
|
|
487
|
+
* Defines how many times a track pattern should repeat.
|
|
488
|
+
*
|
|
489
|
+
* @remarks
|
|
490
|
+
* - `number`: Exact number of repetitions (e.g. `repeat(3, ...)`).
|
|
491
|
+
* - `"autoFill"`: Fills the container with as many tracks as possible.
|
|
492
|
+
* - `"autoFit"`: Fills the container, collapsing empty tracks.
|
|
493
|
+
*/
|
|
494
|
+
export type RepetitionCount = number | "auto-fill" | "auto-fit";
|
|
495
|
+
|
|
496
|
+
/**
|
|
497
|
+
* Minumum track sizing function.
|
|
498
|
+
*
|
|
499
|
+
* Defines the minimum size of a grid track.
|
|
500
|
+
*/
|
|
501
|
+
export type MinTrackSizingFunction = number | `${number}%` | "auto" | "min-content" | "max-content";
|
|
502
|
+
|
|
503
|
+
/**
|
|
504
|
+
* Maximum track sizing function.
|
|
505
|
+
*
|
|
506
|
+
* Defines the maximum size of a grid track.
|
|
507
|
+
*/
|
|
508
|
+
export type MaxTrackSizingFunction = number | `${number}%` | `${number}fr` | "auto" | "min-content" | "max-content" | "fit-content";
|
|
509
|
+
|
|
510
|
+
/**
|
|
511
|
+
* Track sizing function (min/max pair).
|
|
512
|
+
*
|
|
513
|
+
* Defines the size range for a single grid track.
|
|
514
|
+
*/
|
|
515
|
+
export type TrackSizingFunction = {min: MinTrackSizingFunction; max: MaxTrackSizingFunction};
|
|
516
|
+
|
|
517
|
+
/**
|
|
518
|
+
* Grid track repetition definition.
|
|
519
|
+
*/
|
|
520
|
+
export type GridTemplateRepetition = {
|
|
521
|
+
count: RepetitionCount;
|
|
522
|
+
tracks: TrackSizingFunction[];
|
|
523
|
+
lineNames?: string[][];
|
|
524
|
+
};
|
|
525
|
+
|
|
526
|
+
/**
|
|
527
|
+
* Grid track sizing definition.
|
|
528
|
+
*
|
|
529
|
+
* Can be a single track sizing function or a repetition of tracks.
|
|
530
|
+
*/
|
|
531
|
+
export type GridTemplateComponent = TrackSizingFunction | GridTemplateRepetition;
|
|
532
|
+
|
|
533
|
+
/**
|
|
534
|
+
* Named grid area definition.
|
|
535
|
+
*
|
|
536
|
+
* Defines a named area within the grid and its boundaries.
|
|
537
|
+
*/
|
|
538
|
+
export type GridTemplateArea = {
|
|
539
|
+
/** The name of the grid area */
|
|
540
|
+
name: string;
|
|
541
|
+
/** Start row line */
|
|
542
|
+
rowStart: number;
|
|
543
|
+
/** End row line */
|
|
544
|
+
rowEnd: number;
|
|
545
|
+
/** Start column line */
|
|
546
|
+
columnStart: number;
|
|
547
|
+
/** End column line */
|
|
548
|
+
columnEnd: number;
|
|
549
|
+
};
|
|
550
|
+
|
|
551
|
+
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* Multi-line content alignment enumeration
|
|
555
|
+
*
|
|
556
|
+
* Controls the distribution of space between and around content items along the cross axis
|
|
557
|
+
* in a multi-line flex container. This corresponds to the CSS `align-content` property.
|
|
558
|
+
*
|
|
559
|
+
* **Note**: This property only has effect when `flex-wrap` is set to `Wrap` or `WrapReverse`.
|
|
560
|
+
*
|
|
561
|
+
* @example
|
|
562
|
+
* ```typescript
|
|
563
|
+
* import { Style, AlignContent, FlexWrap } from 'taffy-layout';
|
|
564
|
+
*
|
|
565
|
+
* const style = new Style();
|
|
566
|
+
* style.flexWrap = FlexWrap.Wrap;
|
|
567
|
+
* style.alignContent = AlignContent.SpaceBetween; // Distribute lines evenly
|
|
568
|
+
* ```
|
|
569
|
+
*/
|
|
570
|
+
export enum AlignContent {
|
|
571
|
+
/**
|
|
572
|
+
* Lines packed toward the start of the cross axis
|
|
573
|
+
*/
|
|
574
|
+
Start = 0,
|
|
575
|
+
/**
|
|
576
|
+
* Lines packed toward the end of the cross axis
|
|
577
|
+
*/
|
|
578
|
+
End = 1,
|
|
579
|
+
/**
|
|
580
|
+
* Lines packed toward the start of the flex container
|
|
581
|
+
*/
|
|
582
|
+
FlexStart = 2,
|
|
583
|
+
/**
|
|
584
|
+
* Lines packed toward the end of the flex container
|
|
585
|
+
*/
|
|
586
|
+
FlexEnd = 3,
|
|
587
|
+
/**
|
|
588
|
+
* Lines centered within the container
|
|
589
|
+
*/
|
|
590
|
+
Center = 4,
|
|
591
|
+
/**
|
|
592
|
+
* Lines stretched to fill the container
|
|
593
|
+
*/
|
|
594
|
+
Stretch = 5,
|
|
595
|
+
/**
|
|
596
|
+
* Lines evenly distributed with first/last at edges
|
|
597
|
+
*/
|
|
598
|
+
SpaceBetween = 6,
|
|
599
|
+
/**
|
|
600
|
+
* Lines evenly distributed with equal space around each
|
|
601
|
+
*/
|
|
602
|
+
SpaceAround = 7,
|
|
603
|
+
/**
|
|
604
|
+
* Lines evenly distributed with equal space between each
|
|
605
|
+
*/
|
|
606
|
+
SpaceEvenly = 8,
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
/**
|
|
610
|
+
* Cross-axis alignment enumeration for all children
|
|
611
|
+
*
|
|
612
|
+
* Defines the default alignment for all flex/grid items along the cross axis.
|
|
613
|
+
* This corresponds to the CSS `align-items` property.
|
|
614
|
+
*
|
|
615
|
+
* @example
|
|
616
|
+
* ```typescript
|
|
617
|
+
* import { Style, AlignItems } from 'taffy-layout';
|
|
618
|
+
*
|
|
619
|
+
* const style = new Style();
|
|
620
|
+
* style.alignItems = AlignItems.Center; // Center items on cross axis
|
|
621
|
+
* style.alignItems = AlignItems.Stretch; // Stretch items to fill container
|
|
622
|
+
* ```
|
|
623
|
+
*/
|
|
624
|
+
export enum AlignItems {
|
|
625
|
+
/**
|
|
626
|
+
* Items aligned to the start of the cross axis
|
|
627
|
+
*/
|
|
628
|
+
Start = 0,
|
|
629
|
+
/**
|
|
630
|
+
* Items aligned to the end of the cross axis
|
|
631
|
+
*/
|
|
632
|
+
End = 1,
|
|
633
|
+
/**
|
|
634
|
+
* Items aligned to the start of the flex container
|
|
635
|
+
*/
|
|
636
|
+
FlexStart = 2,
|
|
637
|
+
/**
|
|
638
|
+
* Items aligned to the end of the flex container
|
|
639
|
+
*/
|
|
640
|
+
FlexEnd = 3,
|
|
641
|
+
/**
|
|
642
|
+
* Items centered along the cross axis
|
|
643
|
+
*/
|
|
644
|
+
Center = 4,
|
|
645
|
+
/**
|
|
646
|
+
* Items aligned to their text baselines
|
|
647
|
+
*/
|
|
648
|
+
Baseline = 5,
|
|
649
|
+
/**
|
|
650
|
+
* Items stretched to fill the container
|
|
651
|
+
*/
|
|
652
|
+
Stretch = 6,
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
/**
|
|
656
|
+
* Cross-axis alignment enumeration for a single element
|
|
657
|
+
*
|
|
658
|
+
* Overrides the parent's `align-items` value for a specific child element.
|
|
659
|
+
* This corresponds to the CSS `align-self` property.
|
|
660
|
+
*
|
|
661
|
+
* @example
|
|
662
|
+
* ```typescript
|
|
663
|
+
* import { Style, AlignSelf } from 'taffy-layout';
|
|
664
|
+
*
|
|
665
|
+
* const style = new Style();
|
|
666
|
+
* style.alignSelf = AlignSelf.Auto; // Use parent's align-items
|
|
667
|
+
* style.alignSelf = AlignSelf.Center; // Override to center this item
|
|
668
|
+
* ```
|
|
669
|
+
*/
|
|
670
|
+
export enum AlignSelf {
|
|
671
|
+
/**
|
|
672
|
+
* Inherits the parent container's `align-items` value
|
|
673
|
+
*/
|
|
674
|
+
Auto = 0,
|
|
675
|
+
/**
|
|
676
|
+
* Item aligned to the start of the cross axis
|
|
677
|
+
*/
|
|
678
|
+
Start = 1,
|
|
679
|
+
/**
|
|
680
|
+
* Item aligned to the end of the cross axis
|
|
681
|
+
*/
|
|
682
|
+
End = 2,
|
|
683
|
+
/**
|
|
684
|
+
* Item aligned to the start of the flex container
|
|
685
|
+
*/
|
|
686
|
+
FlexStart = 3,
|
|
687
|
+
/**
|
|
688
|
+
* Item aligned to the end of the flex container
|
|
689
|
+
*/
|
|
690
|
+
FlexEnd = 4,
|
|
691
|
+
/**
|
|
692
|
+
* Item centered along the cross axis
|
|
693
|
+
*/
|
|
694
|
+
Center = 5,
|
|
695
|
+
/**
|
|
696
|
+
* Item aligned to its text baseline
|
|
697
|
+
*/
|
|
698
|
+
Baseline = 6,
|
|
699
|
+
/**
|
|
700
|
+
* Item stretched to fill the container
|
|
701
|
+
*/
|
|
702
|
+
Stretch = 7,
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
/**
|
|
706
|
+
* Box sizing enumeration
|
|
707
|
+
*
|
|
708
|
+
* Controls how the total width and height of an element is calculated.
|
|
709
|
+
* This corresponds to the CSS `box-sizing` property.
|
|
710
|
+
*
|
|
711
|
+
* @example
|
|
712
|
+
* ```typescript
|
|
713
|
+
* import { Style, BoxSizing } from 'taffy-layout';
|
|
714
|
+
*
|
|
715
|
+
* const style = new Style();
|
|
716
|
+
* style.boxSizing = BoxSizing.BorderBox; // Size includes padding and border
|
|
717
|
+
* style.boxSizing = BoxSizing.ContentBox; // Size is content only
|
|
718
|
+
* ```
|
|
719
|
+
*/
|
|
720
|
+
export enum BoxSizing {
|
|
721
|
+
/**
|
|
722
|
+
* The width and height properties include padding and border
|
|
723
|
+
*/
|
|
724
|
+
BorderBox = 0,
|
|
725
|
+
/**
|
|
726
|
+
* The width and height properties include only the content
|
|
727
|
+
*/
|
|
728
|
+
ContentBox = 1,
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
/**
|
|
732
|
+
* Display mode enumeration
|
|
733
|
+
*
|
|
734
|
+
* Controls the layout algorithm type for an element. This corresponds to the CSS `display` property
|
|
735
|
+
* and determines how an element and its children are laid out.
|
|
736
|
+
*
|
|
737
|
+
* @example
|
|
738
|
+
* ```typescript
|
|
739
|
+
* import { Style, Display } from 'taffy-layout';
|
|
740
|
+
*
|
|
741
|
+
* const style = new Style();
|
|
742
|
+
* style.display = Display.Flex; // Enable flexbox layout
|
|
743
|
+
* style.display = Display.Grid; // Enable grid layout
|
|
744
|
+
* style.display = Display.None; // Hide element from layout
|
|
745
|
+
* ```
|
|
746
|
+
*/
|
|
747
|
+
export enum Display {
|
|
748
|
+
/**
|
|
749
|
+
* Block-level layout where element takes the full available width
|
|
750
|
+
*/
|
|
751
|
+
Block = 0,
|
|
752
|
+
/**
|
|
753
|
+
* Flexbox layout for one-dimensional item arrangement
|
|
754
|
+
*/
|
|
755
|
+
Flex = 1,
|
|
756
|
+
/**
|
|
757
|
+
* CSS Grid layout for two-dimensional item arrangement
|
|
758
|
+
*/
|
|
759
|
+
Grid = 2,
|
|
760
|
+
/**
|
|
761
|
+
* Element is removed from layout calculation entirely
|
|
762
|
+
*/
|
|
763
|
+
None = 3,
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
/**
|
|
767
|
+
* Flex direction enumeration
|
|
768
|
+
*
|
|
769
|
+
* Defines the main axis direction for flex item layout. This corresponds to the CSS
|
|
770
|
+
* `flex-direction` property and determines how flex items are placed within the container.
|
|
771
|
+
*
|
|
772
|
+
* @example
|
|
773
|
+
* ```typescript
|
|
774
|
+
* import { Style, FlexDirection } from 'taffy-layout';
|
|
775
|
+
*
|
|
776
|
+
* const style = new Style();
|
|
777
|
+
* style.flexDirection = FlexDirection.Row; // Horizontal, left to right
|
|
778
|
+
* style.flexDirection = FlexDirection.Column; // Vertical, top to bottom
|
|
779
|
+
* ```
|
|
780
|
+
*/
|
|
781
|
+
export enum FlexDirection {
|
|
782
|
+
/**
|
|
783
|
+
* Main axis runs horizontally from left to right
|
|
784
|
+
*/
|
|
785
|
+
Row = 0,
|
|
786
|
+
/**
|
|
787
|
+
* Main axis runs vertically from top to bottom
|
|
788
|
+
*/
|
|
789
|
+
Column = 1,
|
|
790
|
+
/**
|
|
791
|
+
* Main axis runs horizontally from right to left
|
|
792
|
+
*/
|
|
793
|
+
RowReverse = 2,
|
|
794
|
+
/**
|
|
795
|
+
* Main axis runs vertically from bottom to top
|
|
796
|
+
*/
|
|
797
|
+
ColumnReverse = 3,
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
/**
|
|
801
|
+
* Flex wrap mode enumeration
|
|
802
|
+
*
|
|
803
|
+
* Controls whether flex items wrap onto multiple lines when they overflow the container.
|
|
804
|
+
* This corresponds to the CSS `flex-wrap` property.
|
|
805
|
+
*
|
|
806
|
+
* @example
|
|
807
|
+
* ```typescript
|
|
808
|
+
* import { Style, FlexWrap } from 'taffy-layout';
|
|
809
|
+
*
|
|
810
|
+
* const style = new Style();
|
|
811
|
+
* style.flexWrap = FlexWrap.NoWrap; // All items on single line
|
|
812
|
+
* style.flexWrap = FlexWrap.Wrap; // Items wrap to new lines
|
|
813
|
+
* ```
|
|
814
|
+
*/
|
|
815
|
+
export enum FlexWrap {
|
|
816
|
+
/**
|
|
817
|
+
* All flex items are placed on a single line
|
|
818
|
+
*/
|
|
819
|
+
NoWrap = 0,
|
|
820
|
+
/**
|
|
821
|
+
* Flex items wrap onto multiple lines from top to bottom
|
|
822
|
+
*/
|
|
823
|
+
Wrap = 1,
|
|
824
|
+
/**
|
|
825
|
+
* Flex items wrap onto multiple lines from bottom to top
|
|
826
|
+
*/
|
|
827
|
+
WrapReverse = 2,
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
/**
|
|
831
|
+
* Grid auto flow enumeration
|
|
832
|
+
*
|
|
833
|
+
* Controls whether grid items are placed row-wise or column-wise, and whether
|
|
834
|
+
* the sparse or dense packing algorithm is used.
|
|
835
|
+
*
|
|
836
|
+
* @example
|
|
837
|
+
* ```typescript
|
|
838
|
+
* import { Style, GridAutoFlow } from 'taffy-layout';
|
|
839
|
+
*
|
|
840
|
+
* const style = new Style();
|
|
841
|
+
* style.gridAutoFlow = GridAutoFlow.Row; // Fill rows first
|
|
842
|
+
* style.gridAutoFlow = GridAutoFlow.Column; // Fill columns first
|
|
843
|
+
* style.gridAutoFlow = GridAutoFlow.RowDense; // Fill rows, pack densely
|
|
844
|
+
* ```
|
|
845
|
+
*/
|
|
846
|
+
export enum GridAutoFlow {
|
|
847
|
+
/**
|
|
848
|
+
* Items are placed by filling each row in turn, adding new rows as necessary
|
|
849
|
+
*/
|
|
850
|
+
Row = 0,
|
|
851
|
+
/**
|
|
852
|
+
* Items are placed by filling each column in turn, adding new columns as necessary
|
|
853
|
+
*/
|
|
854
|
+
Column = 1,
|
|
855
|
+
/**
|
|
856
|
+
* Combines `Row` with the dense packing algorithm
|
|
857
|
+
*/
|
|
858
|
+
RowDense = 2,
|
|
859
|
+
/**
|
|
860
|
+
* Combines `Column` with the dense packing algorithm
|
|
861
|
+
*/
|
|
862
|
+
ColumnDense = 3,
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
/**
|
|
866
|
+
* Main axis alignment enumeration
|
|
867
|
+
*
|
|
868
|
+
* Defines how flex items are aligned and spaced along the main axis.
|
|
869
|
+
* This corresponds to the CSS `justify-content` property.
|
|
870
|
+
*
|
|
871
|
+
* @example
|
|
872
|
+
* ```typescript
|
|
873
|
+
* import { Style, JustifyContent } from 'taffy-layout';
|
|
874
|
+
*
|
|
875
|
+
* const style = new Style();
|
|
876
|
+
* style.justifyContent = JustifyContent.Center; // Center items
|
|
877
|
+
* style.justifyContent = JustifyContent.SpaceBetween; // Distribute evenly
|
|
878
|
+
* ```
|
|
879
|
+
*/
|
|
880
|
+
export enum JustifyContent {
|
|
881
|
+
/**
|
|
882
|
+
* Items packed toward the start of the main axis
|
|
883
|
+
*/
|
|
884
|
+
Start = 0,
|
|
885
|
+
/**
|
|
886
|
+
* Items packed toward the end of the main axis
|
|
887
|
+
*/
|
|
888
|
+
End = 1,
|
|
889
|
+
/**
|
|
890
|
+
* Items packed toward the start of the flex container
|
|
891
|
+
*/
|
|
892
|
+
FlexStart = 2,
|
|
893
|
+
/**
|
|
894
|
+
* Items packed toward the end of the flex container
|
|
895
|
+
*/
|
|
896
|
+
FlexEnd = 3,
|
|
897
|
+
/**
|
|
898
|
+
* Items centered along the main axis
|
|
899
|
+
*/
|
|
900
|
+
Center = 4,
|
|
901
|
+
/**
|
|
902
|
+
* Items stretched along the main axis
|
|
903
|
+
*/
|
|
904
|
+
Stretch = 5,
|
|
905
|
+
/**
|
|
906
|
+
* Items evenly distributed with first/last at edges
|
|
907
|
+
*/
|
|
908
|
+
SpaceBetween = 6,
|
|
909
|
+
/**
|
|
910
|
+
* Items evenly distributed with equal space around each
|
|
911
|
+
*/
|
|
912
|
+
SpaceAround = 7,
|
|
913
|
+
/**
|
|
914
|
+
* Items evenly distributed with equal space between each
|
|
915
|
+
*/
|
|
916
|
+
SpaceEvenly = 8,
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
/**
|
|
920
|
+
* Computed layout result containing position, size, and spacing values for a node.
|
|
921
|
+
*
|
|
922
|
+
* This class wraps the native [`taffy::Layout`] and provides read-only access
|
|
923
|
+
* to all computed layout values. All dimensions are in pixels.
|
|
924
|
+
*
|
|
925
|
+
* @example
|
|
926
|
+
* ```typescript
|
|
927
|
+
* const tree = new TaffyTree();
|
|
928
|
+
* const rootId = tree.newLeaf(new Style());
|
|
929
|
+
* const node = rootId;
|
|
930
|
+
*
|
|
931
|
+
* tree.computeLayout(rootId, { width: 800, height: 600 });
|
|
932
|
+
* const layout = tree.getLayout(node);
|
|
933
|
+
*
|
|
934
|
+
* console.log("Position:", layout.x, layout.y);
|
|
935
|
+
* console.log("Size:", layout.width, layout.height);
|
|
936
|
+
* console.log("Content:", layout.contentWidth, layout.contentHeight);
|
|
937
|
+
* console.log("Padding:", layout.paddingTop, layout.paddingRight, layout.paddingBottom, layout.paddingLeft);
|
|
938
|
+
* console.log("Border:", layout.borderTop, layout.borderRight, layout.borderBottom, layout.borderLeft);
|
|
939
|
+
* console.log("Margin:", layout.marginTop, layout.marginRight, layout.marginBottom, layout.marginLeft);
|
|
940
|
+
* console.log("Scrollbar:", layout.scrollbarWidth, layout.scrollbarHeight);
|
|
941
|
+
* console.log("Order:", layout.order);
|
|
942
|
+
* ```
|
|
943
|
+
*/
|
|
944
|
+
export class Layout {
|
|
945
|
+
private constructor();
|
|
946
|
+
free(): void;
|
|
947
|
+
[Symbol.dispose](): void;
|
|
948
|
+
/**
|
|
949
|
+
* Gets the top border width
|
|
950
|
+
*
|
|
951
|
+
* @returns - The computed top border width in pixels
|
|
952
|
+
*/
|
|
953
|
+
readonly borderTop: number;
|
|
954
|
+
/**
|
|
955
|
+
* Gets the top margin
|
|
956
|
+
*
|
|
957
|
+
* @returns - The computed top margin in pixels
|
|
958
|
+
*/
|
|
959
|
+
readonly marginTop: number;
|
|
960
|
+
/**
|
|
961
|
+
* Gets the left border width
|
|
962
|
+
*
|
|
963
|
+
* @returns - The computed left border width in pixels
|
|
964
|
+
*/
|
|
965
|
+
readonly borderLeft: number;
|
|
966
|
+
/**
|
|
967
|
+
* Gets the left margin
|
|
968
|
+
*
|
|
969
|
+
* @returns - The computed left margin in pixels
|
|
970
|
+
*/
|
|
971
|
+
readonly marginLeft: number;
|
|
972
|
+
/**
|
|
973
|
+
* Gets the top padding
|
|
974
|
+
*
|
|
975
|
+
* @returns - The computed top padding in pixels
|
|
976
|
+
*/
|
|
977
|
+
readonly paddingTop: number;
|
|
978
|
+
/**
|
|
979
|
+
* Gets the right border width
|
|
980
|
+
*
|
|
981
|
+
* @returns - The computed right border width in pixels
|
|
982
|
+
*/
|
|
983
|
+
readonly borderRight: number;
|
|
984
|
+
/**
|
|
985
|
+
* Gets the right margin
|
|
986
|
+
*
|
|
987
|
+
* @returns - The computed right margin in pixels
|
|
988
|
+
*/
|
|
989
|
+
readonly marginRight: number;
|
|
990
|
+
/**
|
|
991
|
+
* Gets the left padding
|
|
992
|
+
*
|
|
993
|
+
* @returns - The computed left padding in pixels
|
|
994
|
+
*/
|
|
995
|
+
readonly paddingLeft: number;
|
|
996
|
+
/**
|
|
997
|
+
* Gets the bottom border width
|
|
998
|
+
*
|
|
999
|
+
* @returns - The computed bottom border width in pixels
|
|
1000
|
+
*/
|
|
1001
|
+
readonly borderBottom: number;
|
|
1002
|
+
/**
|
|
1003
|
+
* Gets the width of the scrollable content
|
|
1004
|
+
*
|
|
1005
|
+
* If the node has overflow content, this represents the total
|
|
1006
|
+
* width of all content (may exceed `width`).
|
|
1007
|
+
*
|
|
1008
|
+
* @returns - The content width in pixels
|
|
1009
|
+
*/
|
|
1010
|
+
readonly contentWidth: number;
|
|
1011
|
+
/**
|
|
1012
|
+
* Gets the bottom margin
|
|
1013
|
+
*
|
|
1014
|
+
* @returns - The computed bottom margin in pixels
|
|
1015
|
+
*/
|
|
1016
|
+
readonly marginBottom: number;
|
|
1017
|
+
/**
|
|
1018
|
+
* Gets the right padding
|
|
1019
|
+
*
|
|
1020
|
+
* @returns - The computed right padding in pixels
|
|
1021
|
+
*/
|
|
1022
|
+
readonly paddingRight: number;
|
|
1023
|
+
/**
|
|
1024
|
+
* Gets the height of the scrollable content
|
|
1025
|
+
*
|
|
1026
|
+
* If the node has overflow content, this represents the total
|
|
1027
|
+
* height of all content (may exceed `height`).
|
|
1028
|
+
*
|
|
1029
|
+
* @returns - The content height in pixels
|
|
1030
|
+
*/
|
|
1031
|
+
readonly contentHeight: number;
|
|
1032
|
+
/**
|
|
1033
|
+
* Gets the bottom padding
|
|
1034
|
+
*
|
|
1035
|
+
* @returns - The computed bottom padding in pixels
|
|
1036
|
+
*/
|
|
1037
|
+
readonly paddingBottom: number;
|
|
1038
|
+
/**
|
|
1039
|
+
* Gets the width of the vertical scrollbar
|
|
1040
|
+
*
|
|
1041
|
+
* When overflow is set to scroll, this indicates the space
|
|
1042
|
+
* reserved for the vertical scrollbar.
|
|
1043
|
+
*
|
|
1044
|
+
* @returns - The scrollbar width in pixels (0 if no scrollbar)
|
|
1045
|
+
*/
|
|
1046
|
+
readonly scrollbarWidth: number;
|
|
1047
|
+
/**
|
|
1048
|
+
* Gets the height of the horizontal scrollbar
|
|
1049
|
+
*
|
|
1050
|
+
* When overflow is set to scroll, this indicates the space
|
|
1051
|
+
* reserved for the horizontal scrollbar.
|
|
1052
|
+
*
|
|
1053
|
+
* @returns - The scrollbar height in pixels (0 if no scrollbar)
|
|
1054
|
+
*/
|
|
1055
|
+
readonly scrollbarHeight: number;
|
|
1056
|
+
/**
|
|
1057
|
+
* Gets the X coordinate of the node's top-left corner
|
|
1058
|
+
*
|
|
1059
|
+
* This value is relative to the node's parent. For the root node,
|
|
1060
|
+
* this is always 0.
|
|
1061
|
+
*
|
|
1062
|
+
* @returns - The horizontal position in pixels
|
|
1063
|
+
*/
|
|
1064
|
+
readonly x: number;
|
|
1065
|
+
/**
|
|
1066
|
+
* Gets the Y coordinate of the node's top-left corner
|
|
1067
|
+
*
|
|
1068
|
+
* This value is relative to the node's parent. For the root node,
|
|
1069
|
+
* this is always 0.
|
|
1070
|
+
*
|
|
1071
|
+
* @returns - The vertical position in pixels
|
|
1072
|
+
*/
|
|
1073
|
+
readonly y: number;
|
|
1074
|
+
/**
|
|
1075
|
+
* Gets the rendering order of the node
|
|
1076
|
+
*
|
|
1077
|
+
* This value determines the z-order for overlapping elements.
|
|
1078
|
+
* Lower values are rendered first (behind higher values).
|
|
1079
|
+
*
|
|
1080
|
+
* @returns - The rendering order as an unsigned 32-bit integer
|
|
1081
|
+
*/
|
|
1082
|
+
readonly order: number;
|
|
1083
|
+
/**
|
|
1084
|
+
* Gets the computed width of the node
|
|
1085
|
+
*
|
|
1086
|
+
* This is the final width after layout computation, including
|
|
1087
|
+
* any constraints from min/max size or flex properties.
|
|
1088
|
+
*
|
|
1089
|
+
* @returns - The width in pixels
|
|
1090
|
+
*/
|
|
1091
|
+
readonly width: number;
|
|
1092
|
+
/**
|
|
1093
|
+
* Gets the computed height of the node
|
|
1094
|
+
*
|
|
1095
|
+
* This is the final height after layout computation, including
|
|
1096
|
+
* any constraints from min/max size or flex properties.
|
|
1097
|
+
*
|
|
1098
|
+
* @returns - The height in pixels
|
|
1099
|
+
*/
|
|
1100
|
+
readonly height: number;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
/**
|
|
1104
|
+
* Overflow handling enumeration
|
|
1105
|
+
*
|
|
1106
|
+
* Defines how content that exceeds the container boundaries is handled.
|
|
1107
|
+
* This corresponds to the CSS `overflow` property.
|
|
1108
|
+
*
|
|
1109
|
+
* @example
|
|
1110
|
+
* ```typescript
|
|
1111
|
+
* import { Style, Overflow } from 'taffy-layout';
|
|
1112
|
+
*
|
|
1113
|
+
* const style = new Style();
|
|
1114
|
+
* style.overflow = { x: Overflow.Hidden, y: Overflow.Scroll };
|
|
1115
|
+
* ```
|
|
1116
|
+
*/
|
|
1117
|
+
export enum Overflow {
|
|
1118
|
+
/**
|
|
1119
|
+
* Content is not clipped and may render outside the container
|
|
1120
|
+
*/
|
|
1121
|
+
Visible = 0,
|
|
1122
|
+
/**
|
|
1123
|
+
* Content is clipped at the container boundary, but unlike Hidden, this forbids all scrolling
|
|
1124
|
+
*/
|
|
1125
|
+
Clip = 1,
|
|
1126
|
+
/**
|
|
1127
|
+
* Content is clipped at the container boundary
|
|
1128
|
+
*/
|
|
1129
|
+
Hidden = 2,
|
|
1130
|
+
/**
|
|
1131
|
+
* Always display scrollbars for scrollable content
|
|
1132
|
+
*/
|
|
1133
|
+
Scroll = 3,
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
/**
|
|
1137
|
+
* Position mode enumeration
|
|
1138
|
+
*
|
|
1139
|
+
* Controls how an element is positioned within its parent container.
|
|
1140
|
+
* This corresponds to the CSS `position` property.
|
|
1141
|
+
*
|
|
1142
|
+
* @example
|
|
1143
|
+
* ```typescript
|
|
1144
|
+
* import { Style, Position } from 'taffy-layout';
|
|
1145
|
+
*
|
|
1146
|
+
* const style = new Style();
|
|
1147
|
+
* style.position = Position.Relative; // Normal document flow
|
|
1148
|
+
* style.position = Position.Absolute; // Removed from flow, uses inset values
|
|
1149
|
+
* ```
|
|
1150
|
+
*/
|
|
1151
|
+
export enum Position {
|
|
1152
|
+
/**
|
|
1153
|
+
* Element participates in normal document flow
|
|
1154
|
+
*/
|
|
1155
|
+
Relative = 0,
|
|
1156
|
+
/**
|
|
1157
|
+
* Element is positioned relative to its nearest positioned ancestor
|
|
1158
|
+
*/
|
|
1159
|
+
Absolute = 1,
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
/**
|
|
1163
|
+
* CSS layout configuration for a node, including flexbox, sizing, spacing, and alignment properties.
|
|
1164
|
+
*
|
|
1165
|
+
* This class holds all CSS layout properties for a node. Create an instance with
|
|
1166
|
+
* `new Style()` and configure properties before passing to `TaffyTree.newLeaf()`.
|
|
1167
|
+
*
|
|
1168
|
+
* @defaultValue
|
|
1169
|
+
* When created, all properties are set to their CSS default values:
|
|
1170
|
+
* - `display`: `Display.Block`
|
|
1171
|
+
* - `position`: `Position.Relative`
|
|
1172
|
+
* - `flexDirection`: `FlexDirection.Row`
|
|
1173
|
+
* - `flexWrap`: `FlexWrap.NoWrap`
|
|
1174
|
+
* - `flexGrow`: `0`
|
|
1175
|
+
* - `flexShrink`: `1`
|
|
1176
|
+
* - All alignment properties: `undefined` (use default behavior)
|
|
1177
|
+
* - All dimensions: `"auto"`
|
|
1178
|
+
* - All spacing: `0`
|
|
1179
|
+
*
|
|
1180
|
+
*/
|
|
1181
|
+
export class Style {
|
|
1182
|
+
free(): void;
|
|
1183
|
+
[Symbol.dispose](): void;
|
|
1184
|
+
/**
|
|
1185
|
+
* Creates a new Style instance with default values
|
|
1186
|
+
*
|
|
1187
|
+
* @returns - A new `Style` object with all properties set to CSS defaults
|
|
1188
|
+
*
|
|
1189
|
+
* @example
|
|
1190
|
+
* ```typescript
|
|
1191
|
+
* const style = new Style();
|
|
1192
|
+
* console.log(style.display); // Display.Block
|
|
1193
|
+
* ```
|
|
1194
|
+
*/
|
|
1195
|
+
constructor();
|
|
1196
|
+
/**
|
|
1197
|
+
* Gets the align-self property
|
|
1198
|
+
*
|
|
1199
|
+
* Overrides the parent's align-items for this specific element.
|
|
1200
|
+
*
|
|
1201
|
+
* @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set)
|
|
1202
|
+
*/
|
|
1203
|
+
alignSelf: AlignSelf | undefined;
|
|
1204
|
+
/**
|
|
1205
|
+
* Gets the box sizing mode
|
|
1206
|
+
*
|
|
1207
|
+
* Determines whether padding and border are included in dimensions.
|
|
1208
|
+
*
|
|
1209
|
+
* @returns - The current [`BoxSizing`](JsBoxSizing) value
|
|
1210
|
+
*
|
|
1211
|
+
* @defaultValue `BoxSizing.BorderBox`
|
|
1212
|
+
*/
|
|
1213
|
+
boxSizing: BoxSizing;
|
|
1214
|
+
/**
|
|
1215
|
+
* Gets the flex-basis
|
|
1216
|
+
*
|
|
1217
|
+
* The initial size of a flex item before growing/shrinking.
|
|
1218
|
+
*
|
|
1219
|
+
* @returns - A `Dimension` value (`number`, `\"{number}%\"`, or `\"auto\"`)
|
|
1220
|
+
*/
|
|
1221
|
+
flexBasis: Dimension;
|
|
1222
|
+
/**
|
|
1223
|
+
* Gets the border width
|
|
1224
|
+
*
|
|
1225
|
+
* Width of the element's border on each side.
|
|
1226
|
+
*
|
|
1227
|
+
* @returns - A `Rect<LengthPercentage>` with left, right, top, bottom border widths
|
|
1228
|
+
*/
|
|
1229
|
+
border: Rect<LengthPercentage>;
|
|
1230
|
+
/**
|
|
1231
|
+
* Gets the margin
|
|
1232
|
+
*
|
|
1233
|
+
* Outer spacing around the element.
|
|
1234
|
+
*
|
|
1235
|
+
* @returns - A `Rect<LengthPercentageAuto>` with left, right, top, bottom margins
|
|
1236
|
+
*/
|
|
1237
|
+
margin: Rect<LengthPercentageAuto>;
|
|
1238
|
+
/**
|
|
1239
|
+
* Gets the text-align property
|
|
1240
|
+
*
|
|
1241
|
+
* Used by block layout to implement legacy text alignment behavior.
|
|
1242
|
+
*
|
|
1243
|
+
* @returns - The current [`TextAlign`](JsTextAlign) value
|
|
1244
|
+
*
|
|
1245
|
+
* @defaultValue - `TextAlign.Auto`
|
|
1246
|
+
*/
|
|
1247
|
+
textAlign: TextAlign;
|
|
1248
|
+
/**
|
|
1249
|
+
* Gets the align-items property
|
|
1250
|
+
*
|
|
1251
|
+
* Defines the default alignment for all children on the cross axis.
|
|
1252
|
+
*
|
|
1253
|
+
* @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set
|
|
1254
|
+
*/
|
|
1255
|
+
alignItems: AlignItems | undefined;
|
|
1256
|
+
/**
|
|
1257
|
+
* Gets the flex shrink factor
|
|
1258
|
+
*
|
|
1259
|
+
* Determines how much the item shrinks relative to siblings when
|
|
1260
|
+
* there is insufficient space.
|
|
1261
|
+
*
|
|
1262
|
+
* @returns - The flex shrink factor (default: 1)
|
|
1263
|
+
*/
|
|
1264
|
+
flexShrink: number;
|
|
1265
|
+
/**
|
|
1266
|
+
* Gets the grid-column property
|
|
1267
|
+
*
|
|
1268
|
+
* Defines which column in the grid the item should start and end at.
|
|
1269
|
+
* Corresponds to CSS `grid-column` shorthand.
|
|
1270
|
+
*
|
|
1271
|
+
* @returns - A `Line<GridPlacement>` with start and end placements
|
|
1272
|
+
*/
|
|
1273
|
+
gridColumn: Line<GridPlacement>;
|
|
1274
|
+
/**
|
|
1275
|
+
* Gets the display mode
|
|
1276
|
+
*
|
|
1277
|
+
* Determines the layout algorithm used for this element and its children.
|
|
1278
|
+
*
|
|
1279
|
+
* @returns - The current [`Display`](JsDisplay) value
|
|
1280
|
+
*
|
|
1281
|
+
* @defaultValue - `Display.Block`
|
|
1282
|
+
*/
|
|
1283
|
+
display: Display;
|
|
1284
|
+
/**
|
|
1285
|
+
* Gets the padding
|
|
1286
|
+
*
|
|
1287
|
+
* Inner spacing between the element's border and content.
|
|
1288
|
+
*
|
|
1289
|
+
* @returns - A `Rect<LengthPercentage>` with left, right, top, bottom padding
|
|
1290
|
+
*/
|
|
1291
|
+
padding: Rect<LengthPercentage>;
|
|
1292
|
+
/**
|
|
1293
|
+
* Gets the aspect ratio
|
|
1294
|
+
*
|
|
1295
|
+
* The ratio of width to height. Used to maintain proportions.
|
|
1296
|
+
*
|
|
1297
|
+
* @returns - The aspect ratio value, or `undefined` if not set
|
|
1298
|
+
*/
|
|
1299
|
+
aspectRatio: number | undefined;
|
|
1300
|
+
/**
|
|
1301
|
+
* Gets the justify-self property
|
|
1302
|
+
*
|
|
1303
|
+
* Overrides the parent's justify-items for this specific element in the inline axis.
|
|
1304
|
+
*
|
|
1305
|
+
* @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set)
|
|
1306
|
+
*/
|
|
1307
|
+
justifySelf: AlignSelf | undefined;
|
|
1308
|
+
/**
|
|
1309
|
+
* Gets the grid-row property
|
|
1310
|
+
*
|
|
1311
|
+
* Defines which row in the grid the item should start and end at.
|
|
1312
|
+
* Corresponds to CSS `grid-row` shorthand.
|
|
1313
|
+
*
|
|
1314
|
+
* @returns - A `Line<GridPlacement>` with start and end placements
|
|
1315
|
+
*/
|
|
1316
|
+
gridRow: Line<GridPlacement>;
|
|
1317
|
+
/**
|
|
1318
|
+
* Gets the maximum size constraints
|
|
1319
|
+
*
|
|
1320
|
+
* @returns - A `Size<Dimension>` object with maximum width and height
|
|
1321
|
+
*/
|
|
1322
|
+
maxSize: Size<Dimension>;
|
|
1323
|
+
/**
|
|
1324
|
+
* Gets the minimum size constraints
|
|
1325
|
+
*
|
|
1326
|
+
* @returns - A `Size<Dimension>` object with minimum width and height
|
|
1327
|
+
*/
|
|
1328
|
+
minSize: Size<Dimension>;
|
|
1329
|
+
/**
|
|
1330
|
+
* Gets the overflow behavior
|
|
1331
|
+
*
|
|
1332
|
+
* Controls how content that exceeds the container is handled.
|
|
1333
|
+
*
|
|
1334
|
+
* @returns - A `Point<Overflow>` with `x` and `y` overflow settings
|
|
1335
|
+
*/
|
|
1336
|
+
overflow: Point<Overflow>;
|
|
1337
|
+
/**
|
|
1338
|
+
* Gets the position mode
|
|
1339
|
+
*
|
|
1340
|
+
* Determines how the element is positioned within its parent.
|
|
1341
|
+
*
|
|
1342
|
+
* @returns - The current [`Position`](JsPosition) value
|
|
1343
|
+
*
|
|
1344
|
+
* @defaultValue - `Position.Relative`
|
|
1345
|
+
*/
|
|
1346
|
+
position: Position;
|
|
1347
|
+
/**
|
|
1348
|
+
* Gets the align-content property
|
|
1349
|
+
*
|
|
1350
|
+
* Controls distribution of space between lines in a multi-line flex container.
|
|
1351
|
+
*
|
|
1352
|
+
* @returns - The current [`AlignContent`](JsAlignContent) value, or `undefined` if not set
|
|
1353
|
+
*/
|
|
1354
|
+
alignContent: AlignContent | undefined;
|
|
1355
|
+
/**
|
|
1356
|
+
* Gets whether this item is a table
|
|
1357
|
+
*
|
|
1358
|
+
* Table children are handled specially in block layout.
|
|
1359
|
+
*
|
|
1360
|
+
* @returns - Whether the item is treated as a table
|
|
1361
|
+
*
|
|
1362
|
+
* @defaultValue - `false`
|
|
1363
|
+
*/
|
|
1364
|
+
itemIsTable: boolean;
|
|
1365
|
+
/**
|
|
1366
|
+
* Gets the justify-items property
|
|
1367
|
+
*
|
|
1368
|
+
* Defines the default justify-self for all children in the inline axis.
|
|
1369
|
+
* This is primarily used for CSS Grid layout.
|
|
1370
|
+
*
|
|
1371
|
+
* @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set
|
|
1372
|
+
*/
|
|
1373
|
+
justifyItems: AlignItems | undefined;
|
|
1374
|
+
/**
|
|
1375
|
+
* Gets the flex grow factor
|
|
1376
|
+
*
|
|
1377
|
+
* Determines how much the item grows relative to siblings when
|
|
1378
|
+
* there is extra space available.
|
|
1379
|
+
*
|
|
1380
|
+
* @returns - The flex grow factor (default: 0)
|
|
1381
|
+
*/
|
|
1382
|
+
flexGrow: number;
|
|
1383
|
+
/**
|
|
1384
|
+
* Gets the flex wrap mode
|
|
1385
|
+
*
|
|
1386
|
+
* Controls whether flex items wrap to new lines.
|
|
1387
|
+
*
|
|
1388
|
+
* @returns - The current [`FlexWrap`](JsFlexWrap) value
|
|
1389
|
+
*
|
|
1390
|
+
* @defaultValue - `FlexWrap.NoWrap`
|
|
1391
|
+
*/
|
|
1392
|
+
flexWrap: FlexWrap;
|
|
1393
|
+
/**
|
|
1394
|
+
* Gets the flex direction
|
|
1395
|
+
*
|
|
1396
|
+
* Defines the main axis direction for flex items.
|
|
1397
|
+
*
|
|
1398
|
+
* @returns - The current [`FlexDirection`](JsFlexDirection) value
|
|
1399
|
+
*
|
|
1400
|
+
* @defaultValue - `FlexDirection.Row`
|
|
1401
|
+
*/
|
|
1402
|
+
flexDirection: FlexDirection;
|
|
1403
|
+
/**
|
|
1404
|
+
* Gets the grid-auto-flow property
|
|
1405
|
+
*
|
|
1406
|
+
* Controls how auto-placed items are inserted into the grid.
|
|
1407
|
+
*
|
|
1408
|
+
* @returns - The current [`GridAutoFlow`](JsGridAutoFlow) value
|
|
1409
|
+
*
|
|
1410
|
+
* @defaultValue - `GridAutoFlow.Row`
|
|
1411
|
+
*/
|
|
1412
|
+
gridAutoFlow: GridAutoFlow;
|
|
1413
|
+
/**
|
|
1414
|
+
* Gets the grid-auto-rows property
|
|
1415
|
+
*
|
|
1416
|
+
* Defines the size of implicitly created rows.
|
|
1417
|
+
*
|
|
1418
|
+
* @returns - An array of track sizing functions
|
|
1419
|
+
*/
|
|
1420
|
+
gridAutoRows: TrackSizingFunction[];
|
|
1421
|
+
/**
|
|
1422
|
+
* Gets the justify-content property
|
|
1423
|
+
*
|
|
1424
|
+
* Defines alignment and spacing of items along the main axis.
|
|
1425
|
+
*
|
|
1426
|
+
* @returns - The current [`JustifyContent`](JsJustifyContent) value, or `undefined` if not set
|
|
1427
|
+
*/
|
|
1428
|
+
justifyContent: JustifyContent | undefined;
|
|
1429
|
+
/**
|
|
1430
|
+
* Gets the scrollbar width
|
|
1431
|
+
*
|
|
1432
|
+
* The width of the scrollbar gutter when `overflow` is set to `Scroll`.
|
|
1433
|
+
*
|
|
1434
|
+
* @returns - The scrollbar width in pixels
|
|
1435
|
+
*
|
|
1436
|
+
* @defaultValue - `0`
|
|
1437
|
+
*/
|
|
1438
|
+
scrollbarWidth: number;
|
|
1439
|
+
/**
|
|
1440
|
+
* Gets whether this item is a replaced element
|
|
1441
|
+
*
|
|
1442
|
+
* Replaced elements have special sizing behavior (e.g., `<img>`, `<video>`).
|
|
1443
|
+
*
|
|
1444
|
+
* @returns - Whether the item is a replaced element
|
|
1445
|
+
*
|
|
1446
|
+
* @defaultValue - `false`
|
|
1447
|
+
*/
|
|
1448
|
+
itemIsReplaced: boolean;
|
|
1449
|
+
/**
|
|
1450
|
+
* Gets the grid-auto-columns property
|
|
1451
|
+
*
|
|
1452
|
+
* Defines the size of implicitly created columns.
|
|
1453
|
+
*
|
|
1454
|
+
* @returns - An array of track sizing functions
|
|
1455
|
+
*/
|
|
1456
|
+
gridAutoColumns: TrackSizingFunction[];
|
|
1457
|
+
/**
|
|
1458
|
+
* Gets the grid-template-rows property
|
|
1459
|
+
*
|
|
1460
|
+
* Defines the track sizing functions (heights) of the grid rows.
|
|
1461
|
+
*
|
|
1462
|
+
* @returns - An array of `GridTrack` values
|
|
1463
|
+
*/
|
|
1464
|
+
gridTemplateRows: GridTemplateComponent[];
|
|
1465
|
+
/**
|
|
1466
|
+
* Gets the grid-template-areas property
|
|
1467
|
+
*
|
|
1468
|
+
* Defines named grid areas that can be referenced by grid items.
|
|
1469
|
+
*
|
|
1470
|
+
* @returns - An array of `GridArea` values
|
|
1471
|
+
*/
|
|
1472
|
+
gridTemplateAreas: GridTemplateArea[];
|
|
1473
|
+
/**
|
|
1474
|
+
* Gets the grid-template-columns property
|
|
1475
|
+
*
|
|
1476
|
+
* Defines the track sizing functions (widths) of the grid columns.
|
|
1477
|
+
*
|
|
1478
|
+
* @returns - An array of `GridTrack` values
|
|
1479
|
+
*/
|
|
1480
|
+
gridTemplateColumns: GridTemplateComponent[];
|
|
1481
|
+
/**
|
|
1482
|
+
* Gets the grid-template-row-names property
|
|
1483
|
+
*
|
|
1484
|
+
* Defines the named lines between the rows.
|
|
1485
|
+
*
|
|
1486
|
+
* @returns - An array of arrays of line names
|
|
1487
|
+
*/
|
|
1488
|
+
gridTemplateRowNames: string[][];
|
|
1489
|
+
/**
|
|
1490
|
+
* Gets the grid-template-column-names property
|
|
1491
|
+
*
|
|
1492
|
+
* Defines the named lines between the columns.
|
|
1493
|
+
*
|
|
1494
|
+
* @returns - An array of arrays of line names
|
|
1495
|
+
*/
|
|
1496
|
+
gridTemplateColumnNames: string[][];
|
|
1497
|
+
/**
|
|
1498
|
+
* Gets the gap
|
|
1499
|
+
*
|
|
1500
|
+
* Spacing between flex/grid items.
|
|
1501
|
+
*
|
|
1502
|
+
* @returns - A `Size<LengthPercentage>` with column (width) and row (height) gaps
|
|
1503
|
+
*/
|
|
1504
|
+
gap: Size<LengthPercentage>;
|
|
1505
|
+
/**
|
|
1506
|
+
* Gets the size (width and height)
|
|
1507
|
+
*
|
|
1508
|
+
* @returns - A `Size<Dimension>` object with `width` and `height` properties
|
|
1509
|
+
*/
|
|
1510
|
+
size: Size<Dimension>;
|
|
1511
|
+
/**
|
|
1512
|
+
* Gets the inset
|
|
1513
|
+
*
|
|
1514
|
+
* Positioning offsets for absolutely positioned elements.
|
|
1515
|
+
*
|
|
1516
|
+
* @returns - A `Rect<LengthPercentageAuto>` with left, right, top, bottom offsets
|
|
1517
|
+
*/
|
|
1518
|
+
inset: Rect<LengthPercentageAuto>;
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
/**
|
|
1522
|
+
* Error class thrown when a Taffy operation fails, containing a human-readable error message.
|
|
1523
|
+
*
|
|
1524
|
+
* This class wraps the native [`taffy::TaffyError`] type and exposes it to JavaScript
|
|
1525
|
+
* with a readable error message. It is thrown as a JavaScript exception on failure.
|
|
1526
|
+
*
|
|
1527
|
+
* @example
|
|
1528
|
+
* ```typescript
|
|
1529
|
+
* try {
|
|
1530
|
+
* const tree = new TaffyTree();
|
|
1531
|
+
* const node = tree.newLeaf(new Style());
|
|
1532
|
+
* tree.remove(node);
|
|
1533
|
+
* } catch (e) {
|
|
1534
|
+
* if (e instanceof TaffyError) {
|
|
1535
|
+
* console.error(e.message);
|
|
1536
|
+
* }
|
|
1537
|
+
* }
|
|
1538
|
+
* ```
|
|
1539
|
+
*
|
|
1540
|
+
* @remarks
|
|
1541
|
+
* The underlying Taffy errors include:
|
|
1542
|
+
* - `InvalidInputNode`: Node ID doesn't exist in the tree
|
|
1543
|
+
* - `InvalidParentNode`: Specified parent node doesn't exist
|
|
1544
|
+
* - `ChildIndexOutOfBounds`: Child index exceeds available children
|
|
1545
|
+
*/
|
|
1546
|
+
export class TaffyError {
|
|
1547
|
+
private constructor();
|
|
1548
|
+
free(): void;
|
|
1549
|
+
[Symbol.dispose](): void;
|
|
1550
|
+
/**
|
|
1551
|
+
* Gets the human-readable error message
|
|
1552
|
+
*
|
|
1553
|
+
* @returns - A string describing what went wrong.
|
|
1554
|
+
*
|
|
1555
|
+
* @remarks
|
|
1556
|
+
* Examples:
|
|
1557
|
+
* - "Node with id 1234 is not present in the Taffy tree"
|
|
1558
|
+
* - "Index 5 is out of bounds for node with 3 children"
|
|
1559
|
+
*/
|
|
1560
|
+
readonly message: string;
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
/**
|
|
1564
|
+
* The main layout tree class for creating nodes, computing layouts, and managing a tree of styled elements.
|
|
1565
|
+
*
|
|
1566
|
+
* TaffyTree is the entry point for the Taffy layout engine. It manages
|
|
1567
|
+
* a tree of nodes and computes their layouts using CSS Flexbox and Grid algorithms.
|
|
1568
|
+
*
|
|
1569
|
+
*/
|
|
1570
|
+
export class TaffyTree {
|
|
1571
|
+
free(): void;
|
|
1572
|
+
[Symbol.dispose](): void;
|
|
1573
|
+
/**
|
|
1574
|
+
* Marks a node as dirty (requiring re-layout)
|
|
1575
|
+
*
|
|
1576
|
+
* Use this when a node's content has changed but its style hasn't.
|
|
1577
|
+
* For example, when text content changes and needs remeasuring.
|
|
1578
|
+
*
|
|
1579
|
+
* @param node - The node ID to mark dirty
|
|
1580
|
+
*
|
|
1581
|
+
* @throws `TaffyError` if the node does not exist
|
|
1582
|
+
*
|
|
1583
|
+
* @example
|
|
1584
|
+
* ```typescript
|
|
1585
|
+
* const tree = new TaffyTree();
|
|
1586
|
+
* const rootId = tree.newLeaf(new Style());
|
|
1587
|
+
* const nodeId = rootId;
|
|
1588
|
+
* const availableSpace = { width: 100, height: 100 };
|
|
1589
|
+
*
|
|
1590
|
+
* // After updating text content
|
|
1591
|
+
* tree.setNodeContext(nodeId, { text: "Updated text" });
|
|
1592
|
+
* tree.markDirty(nodeId);
|
|
1593
|
+
* tree.computeLayout(rootId, availableSpace);
|
|
1594
|
+
* ```
|
|
1595
|
+
*/
|
|
1596
|
+
markDirty(node: bigint): void;
|
|
1597
|
+
/**
|
|
1598
|
+
* Prints the tree structure to the console (for debugging)
|
|
1599
|
+
*
|
|
1600
|
+
* Outputs a text representation of the tree structure starting from
|
|
1601
|
+
* the given node. Useful for debugging layout issues.
|
|
1602
|
+
*
|
|
1603
|
+
* @param node - The root node ID to print from
|
|
1604
|
+
*
|
|
1605
|
+
* @example
|
|
1606
|
+
* ```typescript
|
|
1607
|
+
* const tree = new TaffyTree();
|
|
1608
|
+
* const rootId = tree.newLeaf(new Style());
|
|
1609
|
+
* tree.printTree(rootId);
|
|
1610
|
+
* // Output appears in browser console
|
|
1611
|
+
* ```
|
|
1612
|
+
*/
|
|
1613
|
+
printTree(node: bigint): void;
|
|
1614
|
+
/**
|
|
1615
|
+
* Gets the number of children of a node
|
|
1616
|
+
*
|
|
1617
|
+
* @param parent - The parent node ID
|
|
1618
|
+
*
|
|
1619
|
+
* @returns - The number of direct children
|
|
1620
|
+
*
|
|
1621
|
+
* @throws `TaffyError` if the node does not exist
|
|
1622
|
+
*
|
|
1623
|
+
* @example
|
|
1624
|
+
* ```typescript
|
|
1625
|
+
* const tree = new TaffyTree();
|
|
1626
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1627
|
+
* const count: number = tree.childCount(parentId);
|
|
1628
|
+
* ```
|
|
1629
|
+
*/
|
|
1630
|
+
childCount(parent: bigint): number;
|
|
1631
|
+
/**
|
|
1632
|
+
* Removes a specific child from a parent
|
|
1633
|
+
*
|
|
1634
|
+
* @param parent - The parent node ID
|
|
1635
|
+
* @param child - The child node ID to remove
|
|
1636
|
+
*
|
|
1637
|
+
* @returns - The removed child ID (`bigint`)
|
|
1638
|
+
*
|
|
1639
|
+
* @throws `TaffyError` if the parent or child node does not exist
|
|
1640
|
+
*
|
|
1641
|
+
* @example
|
|
1642
|
+
* ```typescript
|
|
1643
|
+
* const tree = new TaffyTree();
|
|
1644
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1645
|
+
* const childId = tree.newLeaf(new Style());
|
|
1646
|
+
* tree.addChild(parentId, childId);
|
|
1647
|
+
* tree.removeChild(parentId, childId);
|
|
1648
|
+
* ```
|
|
1649
|
+
*/
|
|
1650
|
+
removeChild(parent: bigint, child: bigint): bigint;
|
|
1651
|
+
/**
|
|
1652
|
+
* Replaces all children of a node
|
|
1653
|
+
*
|
|
1654
|
+
* Any existing children are removed and replaced with the new array.
|
|
1655
|
+
*
|
|
1656
|
+
* @param parent - The parent node ID
|
|
1657
|
+
* @param children - Array of new child node IDs
|
|
1658
|
+
*
|
|
1659
|
+
* @throws `TaffyError` if the parent node does not exist
|
|
1660
|
+
*
|
|
1661
|
+
* @example
|
|
1662
|
+
* ```typescript
|
|
1663
|
+
* const tree = new TaffyTree();
|
|
1664
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1665
|
+
* const child1 = tree.newLeaf(new Style());
|
|
1666
|
+
* const child2 = tree.newLeaf(new Style());
|
|
1667
|
+
* const child3 = tree.newLeaf(new Style());
|
|
1668
|
+
* const children = BigUint64Array.from([child1, child2, child3]);
|
|
1669
|
+
* tree.setChildren(parentId, children);
|
|
1670
|
+
* ```
|
|
1671
|
+
*/
|
|
1672
|
+
setChildren(parent: bigint, children: BigUint64Array): void;
|
|
1673
|
+
/**
|
|
1674
|
+
* Creates a new TaffyTree with pre-allocated capacity
|
|
1675
|
+
*
|
|
1676
|
+
* Use this when you know approximately how many nodes will be in the tree.
|
|
1677
|
+
* This can improve performance by reducing memory reallocations.
|
|
1678
|
+
*
|
|
1679
|
+
* @param capacity - The number of nodes to pre-allocate space for
|
|
1680
|
+
*
|
|
1681
|
+
* @example
|
|
1682
|
+
* ```typescript
|
|
1683
|
+
* const tree: TaffyTree = TaffyTree.withCapacity(1000);
|
|
1684
|
+
* ```
|
|
1685
|
+
*/
|
|
1686
|
+
static withCapacity(capacity: number): TaffyTree;
|
|
1687
|
+
/**
|
|
1688
|
+
* Computes the layout for a subtree
|
|
1689
|
+
*
|
|
1690
|
+
* This is the main layout computation method. Call this on the root node
|
|
1691
|
+
* to compute layouts for all nodes in the tree.
|
|
1692
|
+
*
|
|
1693
|
+
* @param node - The root node ID to compute layout for
|
|
1694
|
+
* @param availableSpace - The available space constraints
|
|
1695
|
+
*
|
|
1696
|
+
* @example
|
|
1697
|
+
* ```typescript
|
|
1698
|
+
* const tree = new TaffyTree();
|
|
1699
|
+
* const rootId = tree.newLeaf(new Style());
|
|
1700
|
+
*
|
|
1701
|
+
* // Fixed size container
|
|
1702
|
+
* tree.computeLayout(rootId, { width: 800, height: 600 });
|
|
1703
|
+
*
|
|
1704
|
+
* // Flexible width, fixed height
|
|
1705
|
+
* tree.computeLayout(rootId, { width: "max-content", height: 600 });
|
|
1706
|
+
*
|
|
1707
|
+
* // Minimum content size
|
|
1708
|
+
* tree.computeLayout(rootId, { width: "min-content", height: "min-content" });
|
|
1709
|
+
* ```
|
|
1710
|
+
*
|
|
1711
|
+
* @throws `TaffyError` if the node does not exist or available space is invalid
|
|
1712
|
+
*
|
|
1713
|
+
* @example
|
|
1714
|
+
* ```typescript
|
|
1715
|
+
* const tree = new TaffyTree();
|
|
1716
|
+
* const rootId = tree.newLeaf(new Style());
|
|
1717
|
+
* tree.computeLayout(rootId, { width: 800, height: 600 });
|
|
1718
|
+
* ```
|
|
1719
|
+
*/
|
|
1720
|
+
computeLayout(node: bigint, availableSpace: Size<AvailableSpace>): void;
|
|
1721
|
+
/**
|
|
1722
|
+
* Enables rounding of layout values to whole pixels
|
|
1723
|
+
*
|
|
1724
|
+
* When enabled (default), computed layout values like position and size
|
|
1725
|
+
* are rounded to the nearest integer. This prevents sub-pixel rendering
|
|
1726
|
+
* issues in most rendering contexts.
|
|
1727
|
+
*
|
|
1728
|
+
* @example
|
|
1729
|
+
* ```typescript
|
|
1730
|
+
* const tree = new TaffyTree();
|
|
1731
|
+
* tree.enableRounding();
|
|
1732
|
+
* ```
|
|
1733
|
+
*/
|
|
1734
|
+
enableRounding(): void;
|
|
1735
|
+
/**
|
|
1736
|
+
* Disables rounding of layout values
|
|
1737
|
+
*
|
|
1738
|
+
* When disabled, computed layout values retain their fractional precision.
|
|
1739
|
+
* Use this when you need sub-pixel accuracy or when performing custom
|
|
1740
|
+
* rounding.
|
|
1741
|
+
*
|
|
1742
|
+
* @example
|
|
1743
|
+
* ```typescript
|
|
1744
|
+
* const tree = new TaffyTree();
|
|
1745
|
+
* const node = tree.newLeaf(new Style());
|
|
1746
|
+
* tree.disableRounding();
|
|
1747
|
+
* const layout = tree.getLayout(node);
|
|
1748
|
+
* console.log(layout.x);
|
|
1749
|
+
* ```
|
|
1750
|
+
*/
|
|
1751
|
+
disableRounding(): void;
|
|
1752
|
+
/**
|
|
1753
|
+
* Gets the context value for a node
|
|
1754
|
+
*
|
|
1755
|
+
* @param node - The node ID
|
|
1756
|
+
*
|
|
1757
|
+
* @returns - The attached context value, or `undefined` if none is set
|
|
1758
|
+
*
|
|
1759
|
+
* @example
|
|
1760
|
+
* ```typescript
|
|
1761
|
+
* const tree = new TaffyTree();
|
|
1762
|
+
* const nodeId = tree.newLeaf(new Style());
|
|
1763
|
+
* interface Context { text: string };
|
|
1764
|
+
* const context = tree.getNodeContext(nodeId) as Context | undefined;
|
|
1765
|
+
* if (context) {
|
|
1766
|
+
* console.log(context.text);
|
|
1767
|
+
* }
|
|
1768
|
+
* ```
|
|
1769
|
+
*/
|
|
1770
|
+
getNodeContext(node: bigint): any;
|
|
1771
|
+
/**
|
|
1772
|
+
* Sets a context value for a node
|
|
1773
|
+
*
|
|
1774
|
+
* The context can be any JavaScript value and is passed to the measure
|
|
1775
|
+
* function during layout computation.
|
|
1776
|
+
*
|
|
1777
|
+
* @param node - The node ID
|
|
1778
|
+
* @param context - Any JavaScript value to attach
|
|
1779
|
+
*
|
|
1780
|
+
* @throws `TaffyError` if the node does not exist
|
|
1781
|
+
*
|
|
1782
|
+
* @example
|
|
1783
|
+
* ```typescript
|
|
1784
|
+
* const tree = new TaffyTree();
|
|
1785
|
+
* const nodeId = tree.newLeaf(new Style());
|
|
1786
|
+
* interface Context { text: string };
|
|
1787
|
+
* tree.setNodeContext(nodeId, { text: "Updated text" } as Context);
|
|
1788
|
+
* ```
|
|
1789
|
+
*/
|
|
1790
|
+
setNodeContext(node: bigint, context: any): void;
|
|
1791
|
+
/**
|
|
1792
|
+
* Gets the total number of nodes in the tree
|
|
1793
|
+
*
|
|
1794
|
+
* @returns - The total count of all nodes
|
|
1795
|
+
*
|
|
1796
|
+
* @example
|
|
1797
|
+
* ```typescript
|
|
1798
|
+
* const tree = new TaffyTree();
|
|
1799
|
+
* const count: number = tree.totalNodeCount();
|
|
1800
|
+
* ```
|
|
1801
|
+
*/
|
|
1802
|
+
totalNodeCount(): number;
|
|
1803
|
+
/**
|
|
1804
|
+
* Gets the unrounded (fractional) layout for a node
|
|
1805
|
+
*
|
|
1806
|
+
* Returns the raw computed values before any rounding is applied.
|
|
1807
|
+
* Useful when you need sub-pixel precision.
|
|
1808
|
+
*
|
|
1809
|
+
* @param node - The node ID
|
|
1810
|
+
*
|
|
1811
|
+
* @returns - The unrounded `Layout`
|
|
1812
|
+
*
|
|
1813
|
+
* @example
|
|
1814
|
+
* ```typescript
|
|
1815
|
+
* const tree = new TaffyTree();
|
|
1816
|
+
* const nodeId = tree.newLeaf(new Style());
|
|
1817
|
+
* const layout: Layout = tree.unroundedLayout(nodeId);
|
|
1818
|
+
* console.log(`Exact width: ${layout.width}`);
|
|
1819
|
+
* ```
|
|
1820
|
+
*/
|
|
1821
|
+
unroundedLayout(node: bigint): Layout;
|
|
1822
|
+
/**
|
|
1823
|
+
* Creates a new node with the given children
|
|
1824
|
+
*
|
|
1825
|
+
* Use this to create container nodes that have child elements.
|
|
1826
|
+
* The children must already exist in the tree.
|
|
1827
|
+
*
|
|
1828
|
+
* @param style - The style configuration for the node
|
|
1829
|
+
* @param children - Array of child node IDs (as BigUint64Array)
|
|
1830
|
+
*
|
|
1831
|
+
* @returns - The node ID (`bigint`)
|
|
1832
|
+
*
|
|
1833
|
+
* @throws `TaffyError` if the node cannot be created
|
|
1834
|
+
*
|
|
1835
|
+
* @example
|
|
1836
|
+
* ```typescript
|
|
1837
|
+
* const tree = new TaffyTree();
|
|
1838
|
+
* const containerStyle = new Style();
|
|
1839
|
+
* containerStyle.display = Display.Flex;
|
|
1840
|
+
*
|
|
1841
|
+
* const child1: bigint = tree.newLeaf(new Style());
|
|
1842
|
+
* const child2: bigint = tree.newLeaf(new Style());
|
|
1843
|
+
*
|
|
1844
|
+
* const container: bigint = tree.newWithChildren(
|
|
1845
|
+
* containerStyle,
|
|
1846
|
+
* BigUint64Array.from([child1, child2])
|
|
1847
|
+
* );
|
|
1848
|
+
* ```
|
|
1849
|
+
*/
|
|
1850
|
+
newWithChildren(style: Style, children: BigUint64Array): bigint;
|
|
1851
|
+
/**
|
|
1852
|
+
* Gets the child at a specific index
|
|
1853
|
+
*
|
|
1854
|
+
* @param parent - The parent node ID
|
|
1855
|
+
* @param index - The index of the child (0-based)
|
|
1856
|
+
*
|
|
1857
|
+
* @returns - The child node ID (`bigint`)
|
|
1858
|
+
*
|
|
1859
|
+
* @throws `TaffyError` if the parent node does not exist or index is out of bounds
|
|
1860
|
+
*
|
|
1861
|
+
* @example
|
|
1862
|
+
* ```typescript
|
|
1863
|
+
* const tree = new TaffyTree();
|
|
1864
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1865
|
+
* const childId = tree.newLeaf(new Style());
|
|
1866
|
+
* tree.addChild(parentId, childId);
|
|
1867
|
+
* const firstChild: bigint = tree.getChildAtIndex(parentId, 0);
|
|
1868
|
+
* ```
|
|
1869
|
+
*/
|
|
1870
|
+
getChildAtIndex(parent: bigint, index: number): bigint;
|
|
1871
|
+
/**
|
|
1872
|
+
* Gets detailed layout information for grid layouts
|
|
1873
|
+
*
|
|
1874
|
+
* @note
|
|
1875
|
+
* This method is only available when the `detailed_layout_info`
|
|
1876
|
+
* feature is enabled.
|
|
1877
|
+
*
|
|
1878
|
+
* @param node - The node ID
|
|
1879
|
+
*
|
|
1880
|
+
* @returns - Detailed grid info or "None" for non-grid nodes
|
|
1881
|
+
*
|
|
1882
|
+
* @throws `TaffyError` if the node does not exist
|
|
1883
|
+
*/
|
|
1884
|
+
detailedLayoutInfo(node: bigint): any;
|
|
1885
|
+
/**
|
|
1886
|
+
* Gets a mutable reference to the context value for a node
|
|
1887
|
+
*
|
|
1888
|
+
* In JavaScript, this behaves the same as `getNodeContext()` since
|
|
1889
|
+
* JavaScript objects are always passed by reference.
|
|
1890
|
+
*
|
|
1891
|
+
* @param node - The node ID
|
|
1892
|
+
*
|
|
1893
|
+
* @returns - The attached context value, or `undefined` if none is set
|
|
1894
|
+
*/
|
|
1895
|
+
getNodeContextMut(node: bigint): any;
|
|
1896
|
+
/**
|
|
1897
|
+
* Inserts a child at a specific index
|
|
1898
|
+
*
|
|
1899
|
+
* @param parent - The parent node ID
|
|
1900
|
+
* @param index - The position to insert at (0-based)
|
|
1901
|
+
* @param child - The child node ID to insert
|
|
1902
|
+
*
|
|
1903
|
+
* @throws `TaffyError` if the parent or child node does not exist, or index is out of bounds
|
|
1904
|
+
*
|
|
1905
|
+
* @example
|
|
1906
|
+
* ```typescript
|
|
1907
|
+
* const tree = new TaffyTree();
|
|
1908
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1909
|
+
* const childId = tree.newLeaf(new Style());
|
|
1910
|
+
* tree.insertChildAtIndex(parentId, 0, childId);
|
|
1911
|
+
* ```
|
|
1912
|
+
*/
|
|
1913
|
+
insertChildAtIndex(parent: bigint, index: number, child: bigint): void;
|
|
1914
|
+
/**
|
|
1915
|
+
* Creates a new leaf node with an attached context value
|
|
1916
|
+
*
|
|
1917
|
+
* The context can be any JavaScript value and is passed to the measure
|
|
1918
|
+
* function during layout computation. This is useful for storing
|
|
1919
|
+
* references to text content or other dynamic data.
|
|
1920
|
+
*
|
|
1921
|
+
* @param style - The style configuration for the node
|
|
1922
|
+
* @param context - Any JavaScript value to attach to the node
|
|
1923
|
+
* @returns - The node ID (`bigint`)
|
|
1924
|
+
* @throws `TaffyError` if the node cannot be created
|
|
1925
|
+
*
|
|
1926
|
+
* @example
|
|
1927
|
+
* ```typescript
|
|
1928
|
+
* interface TextContext { text: string; isBold: boolean; }
|
|
1929
|
+
*
|
|
1930
|
+
* const tree = new TaffyTree();
|
|
1931
|
+
* const style = new Style();
|
|
1932
|
+
* const context: TextContext = { text: "Hello, World!", isBold: true };
|
|
1933
|
+
* const nodeId: bigint = tree.newLeafWithContext(style, context);
|
|
1934
|
+
* ```
|
|
1935
|
+
*/
|
|
1936
|
+
newLeafWithContext(style: Style, context: any): bigint;
|
|
1937
|
+
/**
|
|
1938
|
+
* Removes a child at a specific index
|
|
1939
|
+
*
|
|
1940
|
+
* @param parent - The parent node ID
|
|
1941
|
+
* @param index - The index of the child to remove (0-based)
|
|
1942
|
+
*
|
|
1943
|
+
* @returns - The removed child ID (`bigint`)
|
|
1944
|
+
*
|
|
1945
|
+
* @throws `TaffyError` if the parent node does not exist or index is out of bounds
|
|
1946
|
+
*
|
|
1947
|
+
* @example
|
|
1948
|
+
* ```typescript
|
|
1949
|
+
* const tree = new TaffyTree();
|
|
1950
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1951
|
+
* const childId = tree.newLeaf(new Style());
|
|
1952
|
+
* tree.addChild(parentId, childId);
|
|
1953
|
+
* const removedId: bigint = tree.removeChildAtIndex(parentId, 0);
|
|
1954
|
+
* ```
|
|
1955
|
+
*/
|
|
1956
|
+
removeChildAtIndex(parent: bigint, index: number): bigint;
|
|
1957
|
+
/**
|
|
1958
|
+
* Removes a range of children
|
|
1959
|
+
*
|
|
1960
|
+
* Removes children from `start_index` (inclusive) to `end_index` (exclusive).
|
|
1961
|
+
*
|
|
1962
|
+
* @param parent - The parent node ID
|
|
1963
|
+
* @param startIndex - Start of range (inclusive)
|
|
1964
|
+
* @param endIndex - End of range (exclusive)
|
|
1965
|
+
*
|
|
1966
|
+
* @throws `TaffyError` if the parent node does not exist or range is invalid
|
|
1967
|
+
*
|
|
1968
|
+
* @example
|
|
1969
|
+
* ```typescript
|
|
1970
|
+
* const tree = new TaffyTree();
|
|
1971
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1972
|
+
* const child1 = tree.newLeaf(new Style());
|
|
1973
|
+
* const child2 = tree.newLeaf(new Style());
|
|
1974
|
+
* const child3 = tree.newLeaf(new Style());
|
|
1975
|
+
* tree.setChildren(parentId, BigUint64Array.from([child1, child2, child3]));
|
|
1976
|
+
*
|
|
1977
|
+
* tree.removeChildrenRange(parentId, 1, 3);
|
|
1978
|
+
* ```
|
|
1979
|
+
*/
|
|
1980
|
+
removeChildrenRange(parent: bigint, startIndex: number, endIndex: number): void;
|
|
1981
|
+
/**
|
|
1982
|
+
* Replaces a child at a specific index
|
|
1983
|
+
*
|
|
1984
|
+
* @param parent - The parent node ID
|
|
1985
|
+
* @param index - The index of the child to replace (0-based)
|
|
1986
|
+
* @param newChild - The new child node ID
|
|
1987
|
+
*
|
|
1988
|
+
* @returns - The replaced (old) child ID (`bigint`)
|
|
1989
|
+
*
|
|
1990
|
+
* @throws `TaffyError` if the parent node does not exist or index is out of bounds
|
|
1991
|
+
*
|
|
1992
|
+
* @example
|
|
1993
|
+
* ```typescript
|
|
1994
|
+
* const tree = new TaffyTree();
|
|
1995
|
+
* const parentId = tree.newLeaf(new Style());
|
|
1996
|
+
* const oldChild = tree.newLeaf(new Style());
|
|
1997
|
+
* const newChildId = tree.newLeaf(new Style());
|
|
1998
|
+
* tree.addChild(parentId, oldChild);
|
|
1999
|
+
* const child = tree.newLeaf(new Style()); // filler child at index 0 if needed, but index 1 implies 2 children
|
|
2000
|
+
* tree.insertChildAtIndex(parentId, 0, child);
|
|
2001
|
+
*
|
|
2002
|
+
* const oldChildId: bigint = tree.replaceChildAtIndex(parentId, 1, newChildId);
|
|
2003
|
+
* ```
|
|
2004
|
+
*/
|
|
2005
|
+
replaceChildAtIndex(parent: bigint, index: number, newChild: bigint): bigint;
|
|
2006
|
+
/**
|
|
2007
|
+
* Computes layout with a custom measure function for leaf nodes
|
|
2008
|
+
*
|
|
2009
|
+
* Use this when you have leaf nodes with dynamic content (like text)
|
|
2010
|
+
* that needs to be measured during layout. The measure function is
|
|
2011
|
+
* called for each leaf node that needs measurement.
|
|
2012
|
+
*
|
|
2013
|
+
* @param node - The root node ID to compute layout for
|
|
2014
|
+
* @param availableSpace - The available space constraints
|
|
2015
|
+
* @param measureFunc - A function that measures leaf node content
|
|
2016
|
+
*
|
|
2017
|
+
* @throws `TaffyError` if the node does not exist or available space is invalid
|
|
2018
|
+
*
|
|
2019
|
+
* @example
|
|
2020
|
+
* ```typescript
|
|
2021
|
+
* const tree = new TaffyTree();
|
|
2022
|
+
* const rootId = tree.newLeaf(new Style());
|
|
2023
|
+
*
|
|
2024
|
+
* const measureText = (text: string, width: number) => ({ width: 0, height: 0 });
|
|
2025
|
+
*
|
|
2026
|
+
* tree.computeLayoutWithMeasure(
|
|
2027
|
+
* rootId,
|
|
2028
|
+
* { width: 800, height: "max-content" },
|
|
2029
|
+
* (known, available, node, context, style) => {
|
|
2030
|
+
* if (context?.text) {
|
|
2031
|
+
* const measured = measureText(context.text, available.width as number);
|
|
2032
|
+
* return { width: measured.width, height: measured.height };
|
|
2033
|
+
* }
|
|
2034
|
+
* return { width: 0, height: 0 };
|
|
2035
|
+
* }
|
|
2036
|
+
* );
|
|
2037
|
+
* ```
|
|
2038
|
+
*/
|
|
2039
|
+
computeLayoutWithMeasure(node: bigint, availableSpace: Size<AvailableSpace>, measureFunc: MeasureFunction): void;
|
|
2040
|
+
/**
|
|
2041
|
+
* Gets context values for multiple nodes at once
|
|
2042
|
+
*
|
|
2043
|
+
* This is more efficient than calling `getNodeContext()` multiple times
|
|
2044
|
+
* when you need to access contexts for many nodes.
|
|
2045
|
+
*
|
|
2046
|
+
* @param children - Array of node IDs
|
|
2047
|
+
*
|
|
2048
|
+
* @returns - Array of context values (undefined for nodes without context)
|
|
2049
|
+
*
|
|
2050
|
+
* @example
|
|
2051
|
+
* ```typescript
|
|
2052
|
+
* const tree = new TaffyTree();
|
|
2053
|
+
* const id1 = tree.newLeaf(new Style());
|
|
2054
|
+
* const id2 = tree.newLeaf(new Style());
|
|
2055
|
+
* const nodes = BigUint64Array.from([id1, id2]);
|
|
2056
|
+
* const contexts = tree.getDisjointNodeContextMut(nodes);
|
|
2057
|
+
* ```
|
|
2058
|
+
*/
|
|
2059
|
+
getDisjointNodeContextMut(children: BigUint64Array): any[];
|
|
2060
|
+
/**
|
|
2061
|
+
* Creates a new empty TaffyTree
|
|
2062
|
+
*
|
|
2063
|
+
* The tree starts with no nodes. Use `newLeaf()` or `newWithChildren()`
|
|
2064
|
+
* to add nodes.
|
|
2065
|
+
*
|
|
2066
|
+
* @example
|
|
2067
|
+
* ```typescript
|
|
2068
|
+
* const tree: TaffyTree = new TaffyTree();
|
|
2069
|
+
* ```
|
|
2070
|
+
*/
|
|
2071
|
+
constructor();
|
|
2072
|
+
/**
|
|
2073
|
+
* Removes all nodes from the tree
|
|
2074
|
+
*
|
|
2075
|
+
* This clears the entire tree, removing all nodes and their relationships.
|
|
2076
|
+
* Use this to reset the tree for reuse.
|
|
2077
|
+
*
|
|
2078
|
+
* @example
|
|
2079
|
+
* ```typescript
|
|
2080
|
+
* const tree = new TaffyTree();
|
|
2081
|
+
* tree.clear();
|
|
2082
|
+
* console.log(tree.totalNodeCount());
|
|
2083
|
+
* ```
|
|
2084
|
+
*/
|
|
2085
|
+
clear(): void;
|
|
2086
|
+
/**
|
|
2087
|
+
* Checks if a node is dirty (needs re-layout)
|
|
2088
|
+
*
|
|
2089
|
+
* A node is dirty if its style or content has changed since the last
|
|
2090
|
+
* layout computation.
|
|
2091
|
+
*
|
|
2092
|
+
* @param node - The node ID to check
|
|
2093
|
+
*
|
|
2094
|
+
* @returns - true if dirty, false otherwise
|
|
2095
|
+
*
|
|
2096
|
+
* @throws `TaffyError` if the node does not exist
|
|
2097
|
+
*
|
|
2098
|
+
* @example
|
|
2099
|
+
* ```typescript
|
|
2100
|
+
* const tree = new TaffyTree();
|
|
2101
|
+
* const rootId = tree.newLeaf(new Style());
|
|
2102
|
+
* const nodeId = rootId;
|
|
2103
|
+
* const availableSpace = { width: 100, height: 100 };
|
|
2104
|
+
*
|
|
2105
|
+
* if (tree.dirty(nodeId)) {
|
|
2106
|
+
* tree.computeLayout(rootId, availableSpace);
|
|
2107
|
+
* }
|
|
2108
|
+
* ```
|
|
2109
|
+
*/
|
|
2110
|
+
dirty(node: bigint): boolean;
|
|
2111
|
+
/**
|
|
2112
|
+
* Gets the style for a node
|
|
2113
|
+
*
|
|
2114
|
+
* @param node - The node ID
|
|
2115
|
+
*
|
|
2116
|
+
* @returns - The node's `Style`
|
|
2117
|
+
*
|
|
2118
|
+
* @throws `TaffyError` if the node does not exist
|
|
2119
|
+
*
|
|
2120
|
+
* @example
|
|
2121
|
+
* ```typescript
|
|
2122
|
+
* const tree = new TaffyTree();
|
|
2123
|
+
* const nodeId = tree.newLeaf(new Style());
|
|
2124
|
+
* const style: Style = tree.getStyle(nodeId);
|
|
2125
|
+
* console.log('Flex grow:', style.flexGrow);
|
|
2126
|
+
* ```
|
|
2127
|
+
*/
|
|
2128
|
+
getStyle(node: bigint): Style;
|
|
2129
|
+
/**
|
|
2130
|
+
* Gets the computed layout for a node
|
|
2131
|
+
*
|
|
2132
|
+
* Call this after `computeLayout()` to retrieve the computed position
|
|
2133
|
+
* and size for a node.
|
|
2134
|
+
*
|
|
2135
|
+
* @param node - The node ID
|
|
2136
|
+
*
|
|
2137
|
+
* @returns - The computed `Layout`
|
|
2138
|
+
*
|
|
2139
|
+
* @throws `TaffyError` if the node does not exist
|
|
2140
|
+
*
|
|
2141
|
+
* @example
|
|
2142
|
+
* ```typescript
|
|
2143
|
+
* const tree = new TaffyTree();
|
|
2144
|
+
* const style = new Style();
|
|
2145
|
+
* style.size = { width: 100, height: 100 };
|
|
2146
|
+
* const rootId = tree.newLeaf(style);
|
|
2147
|
+
* const nodeId = rootId;
|
|
2148
|
+
*
|
|
2149
|
+
* tree.computeLayout(rootId, { width: 800, height: 600 });
|
|
2150
|
+
* const layout: Layout = tree.getLayout(nodeId);
|
|
2151
|
+
* console.log(`Position: (${layout.x}, ${layout.y}), Size: ${layout.width}x${layout.height}`);
|
|
2152
|
+
* ```
|
|
2153
|
+
*/
|
|
2154
|
+
getLayout(node: bigint): Layout;
|
|
2155
|
+
/**
|
|
2156
|
+
* Gets the parent of a node
|
|
2157
|
+
*
|
|
2158
|
+
* @param child - The child node ID
|
|
2159
|
+
*
|
|
2160
|
+
* @returns - The parent node ID, or `undefined` if the node has no parent
|
|
2161
|
+
*
|
|
2162
|
+
* @example
|
|
2163
|
+
* ```typescript
|
|
2164
|
+
* const tree = new TaffyTree();
|
|
2165
|
+
* const parentId = tree.newLeaf(new Style());
|
|
2166
|
+
* const childId = tree.newLeaf(new Style());
|
|
2167
|
+
* tree.addChild(parentId, childId);
|
|
2168
|
+
* const parent: bigint | undefined = tree.parent(childId);
|
|
2169
|
+
* ```
|
|
2170
|
+
*/
|
|
2171
|
+
parent(child: bigint): bigint | undefined;
|
|
2172
|
+
/**
|
|
2173
|
+
* Removes a node from the tree
|
|
2174
|
+
*
|
|
2175
|
+
* The node and all its descendants are removed. If the node has a parent,
|
|
2176
|
+
* it is automatically removed from the parent's children.
|
|
2177
|
+
*
|
|
2178
|
+
* @param node - The node ID to remove
|
|
2179
|
+
*
|
|
2180
|
+
* @returns - The removed node ID (`bigint`)
|
|
2181
|
+
*
|
|
2182
|
+
* @throws `TaffyError` if the node does not exist
|
|
2183
|
+
*
|
|
2184
|
+
* @example
|
|
2185
|
+
* ```typescript
|
|
2186
|
+
* const tree = new TaffyTree();
|
|
2187
|
+
* const nodeId = tree.newLeaf(new Style());
|
|
2188
|
+
* try {
|
|
2189
|
+
* const removedId: bigint = tree.remove(nodeId);
|
|
2190
|
+
* } catch (e) {
|
|
2191
|
+
* console.error("Node doesn't exist");
|
|
2192
|
+
* }
|
|
2193
|
+
* ```
|
|
2194
|
+
*/
|
|
2195
|
+
remove(node: bigint): bigint;
|
|
2196
|
+
/**
|
|
2197
|
+
* Gets all children of a node
|
|
2198
|
+
*
|
|
2199
|
+
* @param parent - The parent node ID
|
|
2200
|
+
*
|
|
2201
|
+
* @returns - Array of child node IDs (`BigUint64Array`)
|
|
2202
|
+
*
|
|
2203
|
+
* @throws `TaffyError` if the parent node does not exist
|
|
2204
|
+
*
|
|
2205
|
+
* @example
|
|
2206
|
+
* ```typescript
|
|
2207
|
+
* const tree = new TaffyTree();
|
|
2208
|
+
* const parentId = tree.newLeaf(new Style());
|
|
2209
|
+
* const children: BigUint64Array = tree.children(parentId);
|
|
2210
|
+
* ```
|
|
2211
|
+
*/
|
|
2212
|
+
children(parent: bigint): BigUint64Array;
|
|
2213
|
+
/**
|
|
2214
|
+
* Creates a new leaf node with the given style
|
|
2215
|
+
*
|
|
2216
|
+
* A leaf node has no children. Use this for elements that contain
|
|
2217
|
+
* content (like text) rather than other elements.
|
|
2218
|
+
*
|
|
2219
|
+
* @param style - The style configuration for the node
|
|
2220
|
+
* @returns - The node ID (`bigint`)
|
|
2221
|
+
* @throws `TaffyError` if the node cannot be created
|
|
2222
|
+
*
|
|
2223
|
+
* @example
|
|
2224
|
+
* ```typescript
|
|
2225
|
+
* const tree = new TaffyTree();
|
|
2226
|
+
* const style = new Style();
|
|
2227
|
+
* style.size = { width: 100, height: 50 };
|
|
2228
|
+
* const nodeId: bigint = tree.newLeaf(style);
|
|
2229
|
+
* ```
|
|
2230
|
+
*/
|
|
2231
|
+
newLeaf(style: Style): bigint;
|
|
2232
|
+
/**
|
|
2233
|
+
* Appends a child node to a parent
|
|
2234
|
+
*
|
|
2235
|
+
* The child is added as the last child of the parent.
|
|
2236
|
+
*
|
|
2237
|
+
* @param parent - The parent node ID
|
|
2238
|
+
* @param child - The child node ID to add
|
|
2239
|
+
*
|
|
2240
|
+
* @throws `TaffyError` if the parent or child node does not exist
|
|
2241
|
+
*
|
|
2242
|
+
* @example
|
|
2243
|
+
* ```typescript
|
|
2244
|
+
* const tree = new TaffyTree();
|
|
2245
|
+
* const parentId = tree.newLeaf(new Style());
|
|
2246
|
+
* const childId = tree.newLeaf(new Style());
|
|
2247
|
+
* tree.addChild(parentId, childId);
|
|
2248
|
+
* ```
|
|
2249
|
+
*/
|
|
2250
|
+
addChild(parent: bigint, child: bigint): void;
|
|
2251
|
+
/**
|
|
2252
|
+
* Sets the style for an existing node
|
|
2253
|
+
*
|
|
2254
|
+
* This replaces the node's current style with the provided one.
|
|
2255
|
+
* The node will be marked as dirty and require re-layout.
|
|
2256
|
+
*
|
|
2257
|
+
* @param node - The node ID
|
|
2258
|
+
* @param style - The new style configuration
|
|
2259
|
+
*
|
|
2260
|
+
* @throws `TaffyError` if the node does not exist
|
|
2261
|
+
*
|
|
2262
|
+
* @example
|
|
2263
|
+
* ```typescript
|
|
2264
|
+
* const tree = new TaffyTree();
|
|
2265
|
+
* const nodeId = tree.newLeaf(new Style());
|
|
2266
|
+
* const newStyle = new Style();
|
|
2267
|
+
* newStyle.flexGrow = 2;
|
|
2268
|
+
* tree.setStyle(nodeId, newStyle);
|
|
2269
|
+
* ```
|
|
2270
|
+
*/
|
|
2271
|
+
setStyle(node: bigint, style: Style): void;
|
|
2272
|
+
}
|
|
2273
|
+
|
|
2274
|
+
/**
|
|
2275
|
+
* Text alignment enumeration (for block layout)
|
|
2276
|
+
*
|
|
2277
|
+
* Used by block layout to implement the legacy behaviour of `<center>` and
|
|
2278
|
+
* `<div align="left | right | center">`.
|
|
2279
|
+
*
|
|
2280
|
+
* @example
|
|
2281
|
+
* ```typescript
|
|
2282
|
+
* import { Style, TextAlign } from 'taffy-layout';
|
|
2283
|
+
*
|
|
2284
|
+
* const style = new Style();
|
|
2285
|
+
* style.textAlign = TextAlign.LegacyCenter; // Center block children
|
|
2286
|
+
* ```
|
|
2287
|
+
*/
|
|
2288
|
+
export enum TextAlign {
|
|
2289
|
+
/**
|
|
2290
|
+
* No special legacy text align behaviour
|
|
2291
|
+
*/
|
|
2292
|
+
Auto = 0,
|
|
2293
|
+
/**
|
|
2294
|
+
* Corresponds to `-webkit-left` or `-moz-left` in browsers
|
|
2295
|
+
*/
|
|
2296
|
+
LegacyLeft = 1,
|
|
2297
|
+
/**
|
|
2298
|
+
* Corresponds to `-webkit-right` or `-moz-right` in browsers
|
|
2299
|
+
*/
|
|
2300
|
+
LegacyRight = 2,
|
|
2301
|
+
/**
|
|
2302
|
+
* Corresponds to `-webkit-center` or `-moz-center` in browsers
|
|
2303
|
+
*/
|
|
2304
|
+
LegacyCenter = 3,
|
|
2305
|
+
}
|
|
2306
|
+
|
|
2307
|
+
export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
|
|
2308
|
+
|
|
2309
|
+
export interface InitOutput {
|
|
2310
|
+
readonly memory: WebAssembly.Memory;
|
|
2311
|
+
readonly __wbg_layout_free: (a: number, b: number) => void;
|
|
2312
|
+
readonly __wbg_style_free: (a: number, b: number) => void;
|
|
2313
|
+
readonly __wbg_taffyerror_free: (a: number, b: number) => void;
|
|
2314
|
+
readonly __wbg_taffytree_free: (a: number, b: number) => void;
|
|
2315
|
+
readonly layout_borderBottom: (a: number) => number;
|
|
2316
|
+
readonly layout_borderLeft: (a: number) => number;
|
|
2317
|
+
readonly layout_borderRight: (a: number) => number;
|
|
2318
|
+
readonly layout_borderTop: (a: number) => number;
|
|
2319
|
+
readonly layout_contentHeight: (a: number) => number;
|
|
2320
|
+
readonly layout_contentWidth: (a: number) => number;
|
|
2321
|
+
readonly layout_height: (a: number) => number;
|
|
2322
|
+
readonly layout_marginBottom: (a: number) => number;
|
|
2323
|
+
readonly layout_marginLeft: (a: number) => number;
|
|
2324
|
+
readonly layout_marginRight: (a: number) => number;
|
|
2325
|
+
readonly layout_marginTop: (a: number) => number;
|
|
2326
|
+
readonly layout_order: (a: number) => number;
|
|
2327
|
+
readonly layout_paddingBottom: (a: number) => number;
|
|
2328
|
+
readonly layout_paddingLeft: (a: number) => number;
|
|
2329
|
+
readonly layout_paddingRight: (a: number) => number;
|
|
2330
|
+
readonly layout_paddingTop: (a: number) => number;
|
|
2331
|
+
readonly layout_scrollbarHeight: (a: number) => number;
|
|
2332
|
+
readonly layout_scrollbarWidth: (a: number) => number;
|
|
2333
|
+
readonly layout_width: (a: number) => number;
|
|
2334
|
+
readonly layout_x: (a: number) => number;
|
|
2335
|
+
readonly layout_y: (a: number) => number;
|
|
2336
|
+
readonly style_alignContent: (a: number) => number;
|
|
2337
|
+
readonly style_alignItems: (a: number) => number;
|
|
2338
|
+
readonly style_alignSelf: (a: number) => number;
|
|
2339
|
+
readonly style_aspectRatio: (a: number) => number;
|
|
2340
|
+
readonly style_border: (a: number) => any;
|
|
2341
|
+
readonly style_boxSizing: (a: number) => number;
|
|
2342
|
+
readonly style_display: (a: number) => number;
|
|
2343
|
+
readonly style_flexBasis: (a: number) => any;
|
|
2344
|
+
readonly style_flexDirection: (a: number) => number;
|
|
2345
|
+
readonly style_flexGrow: (a: number) => number;
|
|
2346
|
+
readonly style_flexShrink: (a: number) => number;
|
|
2347
|
+
readonly style_flexWrap: (a: number) => number;
|
|
2348
|
+
readonly style_gap: (a: number) => any;
|
|
2349
|
+
readonly style_gridAutoColumns: (a: number) => any;
|
|
2350
|
+
readonly style_gridAutoFlow: (a: number) => number;
|
|
2351
|
+
readonly style_gridAutoRows: (a: number) => any;
|
|
2352
|
+
readonly style_gridColumn: (a: number) => any;
|
|
2353
|
+
readonly style_gridRow: (a: number) => any;
|
|
2354
|
+
readonly style_gridTemplateAreas: (a: number) => any;
|
|
2355
|
+
readonly style_gridTemplateColumnNames: (a: number) => any;
|
|
2356
|
+
readonly style_gridTemplateColumns: (a: number) => any;
|
|
2357
|
+
readonly style_gridTemplateRowNames: (a: number) => any;
|
|
2358
|
+
readonly style_gridTemplateRows: (a: number) => any;
|
|
2359
|
+
readonly style_inset: (a: number) => any;
|
|
2360
|
+
readonly style_itemIsReplaced: (a: number) => number;
|
|
2361
|
+
readonly style_itemIsTable: (a: number) => number;
|
|
2362
|
+
readonly style_justifyContent: (a: number) => number;
|
|
2363
|
+
readonly style_justifyItems: (a: number) => number;
|
|
2364
|
+
readonly style_justifySelf: (a: number) => number;
|
|
2365
|
+
readonly style_margin: (a: number) => any;
|
|
2366
|
+
readonly style_maxSize: (a: number) => any;
|
|
2367
|
+
readonly style_minSize: (a: number) => any;
|
|
2368
|
+
readonly style_new: () => number;
|
|
2369
|
+
readonly style_overflow: (a: number) => any;
|
|
2370
|
+
readonly style_padding: (a: number) => any;
|
|
2371
|
+
readonly style_position: (a: number) => number;
|
|
2372
|
+
readonly style_scrollbarWidth: (a: number) => number;
|
|
2373
|
+
readonly style_set_alignContent: (a: number, b: any) => void;
|
|
2374
|
+
readonly style_set_alignItems: (a: number, b: any) => void;
|
|
2375
|
+
readonly style_set_alignSelf: (a: number, b: any) => void;
|
|
2376
|
+
readonly style_set_aspectRatio: (a: number, b: any) => void;
|
|
2377
|
+
readonly style_set_border: (a: number, b: any) => void;
|
|
2378
|
+
readonly style_set_boxSizing: (a: number, b: number) => void;
|
|
2379
|
+
readonly style_set_display: (a: number, b: number) => void;
|
|
2380
|
+
readonly style_set_flexBasis: (a: number, b: any) => void;
|
|
2381
|
+
readonly style_set_flexDirection: (a: number, b: number) => void;
|
|
2382
|
+
readonly style_set_flexGrow: (a: number, b: number) => void;
|
|
2383
|
+
readonly style_set_flexShrink: (a: number, b: number) => void;
|
|
2384
|
+
readonly style_set_flexWrap: (a: number, b: number) => void;
|
|
2385
|
+
readonly style_set_gap: (a: number, b: any) => void;
|
|
2386
|
+
readonly style_set_gridAutoColumns: (a: number, b: any) => void;
|
|
2387
|
+
readonly style_set_gridAutoFlow: (a: number, b: number) => void;
|
|
2388
|
+
readonly style_set_gridAutoRows: (a: number, b: any) => void;
|
|
2389
|
+
readonly style_set_gridColumn: (a: number, b: any) => void;
|
|
2390
|
+
readonly style_set_gridRow: (a: number, b: any) => void;
|
|
2391
|
+
readonly style_set_gridTemplateAreas: (a: number, b: any) => void;
|
|
2392
|
+
readonly style_set_gridTemplateColumnNames: (a: number, b: any) => void;
|
|
2393
|
+
readonly style_set_gridTemplateColumns: (a: number, b: any) => void;
|
|
2394
|
+
readonly style_set_gridTemplateRowNames: (a: number, b: any) => void;
|
|
2395
|
+
readonly style_set_gridTemplateRows: (a: number, b: any) => void;
|
|
2396
|
+
readonly style_set_inset: (a: number, b: any) => void;
|
|
2397
|
+
readonly style_set_itemIsReplaced: (a: number, b: number) => void;
|
|
2398
|
+
readonly style_set_itemIsTable: (a: number, b: number) => void;
|
|
2399
|
+
readonly style_set_justifyContent: (a: number, b: any) => void;
|
|
2400
|
+
readonly style_set_justifyItems: (a: number, b: any) => void;
|
|
2401
|
+
readonly style_set_justifySelf: (a: number, b: any) => void;
|
|
2402
|
+
readonly style_set_margin: (a: number, b: any) => void;
|
|
2403
|
+
readonly style_set_maxSize: (a: number, b: any) => void;
|
|
2404
|
+
readonly style_set_minSize: (a: number, b: any) => void;
|
|
2405
|
+
readonly style_set_overflow: (a: number, b: any) => void;
|
|
2406
|
+
readonly style_set_padding: (a: number, b: any) => void;
|
|
2407
|
+
readonly style_set_position: (a: number, b: number) => void;
|
|
2408
|
+
readonly style_set_scrollbarWidth: (a: number, b: number) => void;
|
|
2409
|
+
readonly style_set_size: (a: number, b: any) => void;
|
|
2410
|
+
readonly style_set_textAlign: (a: number, b: number) => void;
|
|
2411
|
+
readonly style_size: (a: number) => any;
|
|
2412
|
+
readonly style_textAlign: (a: number) => number;
|
|
2413
|
+
readonly taffyerror_message: (a: number) => [number, number];
|
|
2414
|
+
readonly taffytree_addChild: (a: number, b: bigint, c: bigint) => [number, number];
|
|
2415
|
+
readonly taffytree_childCount: (a: number, b: bigint) => number;
|
|
2416
|
+
readonly taffytree_children: (a: number, b: bigint) => [number, number, number, number];
|
|
2417
|
+
readonly taffytree_clear: (a: number) => void;
|
|
2418
|
+
readonly taffytree_computeLayout: (a: number, b: bigint, c: any) => [number, number];
|
|
2419
|
+
readonly taffytree_computeLayoutWithMeasure: (a: number, b: bigint, c: any, d: any) => [number, number];
|
|
2420
|
+
readonly taffytree_detailedLayoutInfo: (a: number, b: bigint) => [number, number, number];
|
|
2421
|
+
readonly taffytree_dirty: (a: number, b: bigint) => [number, number, number];
|
|
2422
|
+
readonly taffytree_disableRounding: (a: number) => void;
|
|
2423
|
+
readonly taffytree_enableRounding: (a: number) => void;
|
|
2424
|
+
readonly taffytree_getChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
|
|
2425
|
+
readonly taffytree_getDisjointNodeContextMut: (a: number, b: number, c: number) => [number, number, number, number];
|
|
2426
|
+
readonly taffytree_getLayout: (a: number, b: bigint) => [number, number, number];
|
|
2427
|
+
readonly taffytree_getNodeContext: (a: number, b: bigint) => [number, number, number];
|
|
2428
|
+
readonly taffytree_getNodeContextMut: (a: number, b: bigint) => [number, number, number];
|
|
2429
|
+
readonly taffytree_getStyle: (a: number, b: bigint) => [number, number, number];
|
|
2430
|
+
readonly taffytree_insertChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [number, number];
|
|
2431
|
+
readonly taffytree_markDirty: (a: number, b: bigint) => [number, number];
|
|
2432
|
+
readonly taffytree_new: () => number;
|
|
2433
|
+
readonly taffytree_newLeaf: (a: number, b: number) => [bigint, number, number];
|
|
2434
|
+
readonly taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
|
|
2435
|
+
readonly taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
|
|
2436
|
+
readonly taffytree_parent: (a: number, b: bigint) => [number, bigint];
|
|
2437
|
+
readonly taffytree_printTree: (a: number, b: bigint) => void;
|
|
2438
|
+
readonly taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
|
|
2439
|
+
readonly taffytree_removeChild: (a: number, b: bigint, c: bigint) => [bigint, number, number];
|
|
2440
|
+
readonly taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
|
|
2441
|
+
readonly taffytree_removeChildrenRange: (a: number, b: bigint, c: number, d: number) => [number, number];
|
|
2442
|
+
readonly taffytree_replaceChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [bigint, number, number];
|
|
2443
|
+
readonly taffytree_setChildren: (a: number, b: bigint, c: number, d: number) => [number, number];
|
|
2444
|
+
readonly taffytree_setNodeContext: (a: number, b: bigint, c: any) => [number, number];
|
|
2445
|
+
readonly taffytree_setStyle: (a: number, b: bigint, c: number) => [number, number];
|
|
2446
|
+
readonly taffytree_totalNodeCount: (a: number) => number;
|
|
2447
|
+
readonly taffytree_unroundedLayout: (a: number, b: bigint) => number;
|
|
2448
|
+
readonly taffytree_withCapacity: (a: number) => number;
|
|
2449
|
+
readonly __wbindgen_malloc: (a: number, b: number) => number;
|
|
2450
|
+
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
|
|
2451
|
+
readonly __wbindgen_exn_store: (a: number) => void;
|
|
2452
|
+
readonly __externref_table_alloc: () => number;
|
|
2453
|
+
readonly __wbindgen_externrefs: WebAssembly.Table;
|
|
2454
|
+
readonly __wbindgen_free: (a: number, b: number, c: number) => void;
|
|
2455
|
+
readonly __externref_table_dealloc: (a: number) => void;
|
|
2456
|
+
readonly __externref_drop_slice: (a: number, b: number) => void;
|
|
2457
|
+
readonly __wbindgen_start: () => void;
|
|
2458
|
+
}
|
|
2459
|
+
|
|
2460
|
+
export type SyncInitInput = BufferSource | WebAssembly.Module;
|
|
2461
|
+
|
|
2462
|
+
/**
|
|
2463
|
+
* Instantiates the given `module`, which can either be bytes or
|
|
2464
|
+
* a precompiled `WebAssembly.Module`.
|
|
2465
|
+
*
|
|
2466
|
+
* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
|
|
2467
|
+
*
|
|
2468
|
+
* @returns {InitOutput}
|
|
2469
|
+
*/
|
|
2470
|
+
export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
|
|
2471
|
+
|
|
2472
|
+
/**
|
|
2473
|
+
* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
|
|
2474
|
+
* for everything else, calls `WebAssembly.instantiate` directly.
|
|
2475
|
+
*
|
|
2476
|
+
* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
|
|
2477
|
+
*
|
|
2478
|
+
* @returns {Promise<InitOutput>}
|
|
2479
|
+
*/
|
|
2480
|
+
export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;
|