chat-layout 1.0.0-3 → 1.0.0-5
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 +36 -0
- package/example/chat.ts +13 -1
- package/index.d.mts +260 -4
- package/index.mjs +403 -13
- package/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,6 +50,42 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
|
|
|
50
50
|
- `MultilineText.align` uses logical values: `start`, `center`, `end`.
|
|
51
51
|
- `MultilineText.physicalAlign` uses physical values: `left`, `center`, `right`.
|
|
52
52
|
- `Text` and `MultilineText` preserve blank lines and edge whitespace by default. Use `whitespace: "trim-and-collapse"` if you want cleanup.
|
|
53
|
+
- `Text` supports `overflow: "ellipsis"` with `ellipsisPosition: "start" | "end" | "middle"` when measured under a finite `maxWidth`.
|
|
54
|
+
- `MultilineText` supports `overflow: "ellipsis"` together with `maxLines`; values below `1` are treated as `1`.
|
|
55
|
+
|
|
56
|
+
## Text ellipsis
|
|
57
|
+
|
|
58
|
+
Single-line `Text` can ellipsize at the start, end, or middle when a finite width constraint is present:
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
const title = new Text("Extremely long thread title that should not blow out the row", {
|
|
62
|
+
lineHeight: 20,
|
|
63
|
+
font: "16px system-ui",
|
|
64
|
+
style: "#111",
|
|
65
|
+
overflow: "ellipsis",
|
|
66
|
+
ellipsisPosition: "middle",
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Multi-line `MultilineText` can cap the visible line count and convert the last visible line to an end ellipsis:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
const preview = new MultilineText(reply.content, {
|
|
74
|
+
lineHeight: 16,
|
|
75
|
+
font: "13px system-ui",
|
|
76
|
+
style: "#444",
|
|
77
|
+
align: "start",
|
|
78
|
+
overflow: "ellipsis",
|
|
79
|
+
maxLines: 2,
|
|
80
|
+
});
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Notes:
|
|
84
|
+
|
|
85
|
+
- Ellipsis is only inserted when the node is measured under a finite `maxWidth` and content actually overflows that constraint.
|
|
86
|
+
- `MultilineText` only supports end ellipsis on the last visible line; start/middle ellipsis are intentionally single-line only.
|
|
87
|
+
- `maxLines` defaults to unlimited, and values below `1` are clamped to `1`.
|
|
88
|
+
- Current `measureMinContent()` behavior stays compatibility-first: ellipsis affects constrained measurement/drawing, but does not lower the min-content shrink floor by itself.
|
|
53
89
|
|
|
54
90
|
## Shrink behavior
|
|
55
91
|
|
package/example/chat.ts
CHANGED
|
@@ -215,6 +215,8 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
|
|
|
215
215
|
font: "13px system-ui",
|
|
216
216
|
style: () => (currentHover === item ? "#222" : "#444"),
|
|
217
217
|
align: "start",
|
|
218
|
+
overflow: "ellipsis",
|
|
219
|
+
maxLines: 2,
|
|
218
220
|
}),
|
|
219
221
|
],
|
|
220
222
|
{
|
|
@@ -312,7 +314,17 @@ const list = new ListState<ChatItem>([
|
|
|
312
314
|
content: randomText(8),
|
|
313
315
|
reply: {
|
|
314
316
|
sender: "B",
|
|
315
|
-
content:
|
|
317
|
+
content:
|
|
318
|
+
"测试aa中文aaa hello world chat layout message render bubble timeline virtualized canvas stream session update typing history",
|
|
319
|
+
},
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
sender: "B",
|
|
323
|
+
content: "这里是一条会展示回复预览省略效果的消息。",
|
|
324
|
+
reply: {
|
|
325
|
+
sender: "A",
|
|
326
|
+
content:
|
|
327
|
+
"这是一条非常长的回复预览,用来演示 MultilineText 在 chat example 里的末尾 ellipsis 能力。它应该被限制在两行之内,而不是把整个气泡一路撑到天花板。",
|
|
316
328
|
},
|
|
317
329
|
},
|
|
318
330
|
{ sender: "B", content: randomText(5) },
|
package/index.d.mts
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
//#region src/types.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* A value that can be provided directly or derived lazily from the active canvas context.
|
|
4
|
+
*/
|
|
2
5
|
type DynValue<C extends CanvasRenderingContext2D, T> = T extends Function ? never : T | ((context: C) => T);
|
|
6
|
+
/**
|
|
7
|
+
* Base renderer configuration.
|
|
8
|
+
*/
|
|
3
9
|
interface RendererOptions {}
|
|
10
|
+
/**
|
|
11
|
+
* Describes which items are currently visible after a render pass.
|
|
12
|
+
*/
|
|
4
13
|
interface RenderFeedback {
|
|
5
14
|
/** Smallest visible item index that contributes a positive visible height. */
|
|
6
15
|
minIdx: number;
|
|
@@ -11,65 +20,153 @@ interface RenderFeedback {
|
|
|
11
20
|
/** Largest visible continuous item position, expressed in item coordinates rather than pixels. */
|
|
12
21
|
max: number;
|
|
13
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* The main axis direction used by flex containers.
|
|
25
|
+
*/
|
|
14
26
|
type Axis = "row" | "column";
|
|
27
|
+
/**
|
|
28
|
+
* Distribution modes for free space along the main axis.
|
|
29
|
+
*/
|
|
15
30
|
type MainAxisAlignment = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
|
|
31
|
+
/**
|
|
32
|
+
* Alignment modes along the cross axis.
|
|
33
|
+
*/
|
|
16
34
|
type CrossAxisAlignment = "start" | "center" | "end" | "stretch";
|
|
35
|
+
/**
|
|
36
|
+
* Controls whether a flex container fills the available main-axis size or shrink-wraps its content.
|
|
37
|
+
*/
|
|
17
38
|
type MainAxisSize = "fill" | "fit-content";
|
|
39
|
+
/**
|
|
40
|
+
* Logical inline alignment.
|
|
41
|
+
*/
|
|
18
42
|
type TextAlign = "start" | "center" | "end";
|
|
43
|
+
/**
|
|
44
|
+
* Physical inline alignment.
|
|
45
|
+
*/
|
|
19
46
|
type PhysicalTextAlign = "left" | "center" | "right";
|
|
47
|
+
/**
|
|
48
|
+
* Whitespace normalization mode for text measurement and layout.
|
|
49
|
+
*/
|
|
20
50
|
type TextWhitespaceMode = "preserve" | "trim-and-collapse";
|
|
51
|
+
/**
|
|
52
|
+
* Text overflow behavior when content exceeds a finite width constraint.
|
|
53
|
+
*/
|
|
54
|
+
type TextOverflowMode = "clip" | "ellipsis";
|
|
55
|
+
/**
|
|
56
|
+
* Placement of the ellipsis glyph for single-line text.
|
|
57
|
+
*/
|
|
58
|
+
type TextEllipsisPosition = "start" | "end" | "middle";
|
|
59
|
+
/**
|
|
60
|
+
* Shared text styling options for text nodes.
|
|
61
|
+
*/
|
|
21
62
|
interface TextStyleOptions<C extends CanvasRenderingContext2D> {
|
|
63
|
+
/** Height of each rendered line in CSS pixels. */
|
|
22
64
|
lineHeight: number;
|
|
65
|
+
/** Canvas font string used for measurement and drawing. */
|
|
23
66
|
font: string;
|
|
67
|
+
/** Fill style or resolver used when drawing the text. */
|
|
24
68
|
style: DynValue<C, string>;
|
|
25
69
|
/** Default: preserve input whitespace, including blank lines and edge spaces. */
|
|
26
70
|
whitespace?: TextWhitespaceMode;
|
|
27
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* Options for multi-line text nodes.
|
|
74
|
+
*/
|
|
28
75
|
interface MultilineTextOptions<C extends CanvasRenderingContext2D> extends TextStyleOptions<C> {
|
|
29
76
|
/** Logical alignment that matches `Place.align`. */
|
|
30
77
|
align?: TextAlign;
|
|
31
78
|
/** Explicit physical alignment when left/right semantics are required. */
|
|
32
79
|
physicalAlign?: PhysicalTextAlign;
|
|
33
|
-
|
|
34
|
-
|
|
80
|
+
/** Default: clip hidden overflow; `ellipsis` only applies when `maxLines` truncates visible lines. */
|
|
81
|
+
overflow?: TextOverflowMode;
|
|
82
|
+
/** Maximum visible line count. Values below `1` are clamped to `1`. */
|
|
83
|
+
maxLines?: number;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Options for single-line text nodes.
|
|
87
|
+
*/
|
|
88
|
+
interface TextOptions<C extends CanvasRenderingContext2D> extends TextStyleOptions<C> {
|
|
89
|
+
/** Default: clip overflow to the constrained first line. */
|
|
90
|
+
overflow?: TextOverflowMode;
|
|
91
|
+
/** Default: place the ellipsis at the end of the visible text. */
|
|
92
|
+
ellipsisPosition?: TextEllipsisPosition;
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Optional layout bounds passed down during measurement and drawing.
|
|
96
|
+
*/
|
|
35
97
|
interface LayoutConstraints {
|
|
98
|
+
/** Minimum width the node should occupy. */
|
|
36
99
|
minWidth?: number;
|
|
100
|
+
/** Maximum width the node may occupy. */
|
|
37
101
|
maxWidth?: number;
|
|
102
|
+
/** Minimum height the node should occupy. */
|
|
38
103
|
minHeight?: number;
|
|
104
|
+
/** Maximum height the node may occupy. */
|
|
39
105
|
maxHeight?: number;
|
|
40
106
|
}
|
|
107
|
+
/**
|
|
108
|
+
* Per-child flex behavior overrides.
|
|
109
|
+
*/
|
|
41
110
|
interface FlexItemOptions {
|
|
111
|
+
/** Share of positive free space assigned to this item. */
|
|
42
112
|
grow?: number;
|
|
43
113
|
/** Compatibility-first default: 0 (opt-in shrink). */
|
|
44
114
|
shrink?: number;
|
|
115
|
+
/** Cross-axis alignment override for this item. */
|
|
45
116
|
alignSelf?: CrossAxisAlignment | "auto";
|
|
46
117
|
}
|
|
118
|
+
/**
|
|
119
|
+
* Configuration for a flex container node.
|
|
120
|
+
*/
|
|
47
121
|
interface FlexContainerOptions {
|
|
122
|
+
/** Main axis direction. Defaults to `"row"`. */
|
|
48
123
|
direction?: Axis;
|
|
124
|
+
/** Gap inserted between adjacent items. */
|
|
49
125
|
gap?: number;
|
|
126
|
+
/** Main-axis distribution of free space. */
|
|
50
127
|
justifyContent?: MainAxisAlignment;
|
|
128
|
+
/** Default cross-axis alignment for children. */
|
|
51
129
|
alignItems?: CrossAxisAlignment;
|
|
130
|
+
/** Whether children should be laid out in reverse order. */
|
|
52
131
|
reverse?: boolean;
|
|
132
|
+
/** Whether the container fills or shrink-wraps the main axis. */
|
|
53
133
|
mainAxisSize?: MainAxisSize;
|
|
54
134
|
}
|
|
135
|
+
/**
|
|
136
|
+
* Runtime services exposed to every node during layout, drawing, and hit-testing.
|
|
137
|
+
*/
|
|
55
138
|
interface Context<C extends CanvasRenderingContext2D> {
|
|
139
|
+
/** The backing canvas rendering context. */
|
|
56
140
|
graphics: C;
|
|
57
|
-
/**
|
|
141
|
+
/** Active layout constraints for the current call stack. */
|
|
58
142
|
constraints?: LayoutConstraints;
|
|
143
|
+
/** Measures another node under optional constraints. */
|
|
59
144
|
measureNode(node: Node<C>, constraints?: LayoutConstraints): Box;
|
|
145
|
+
/** Invalidates cached measurements for a node and its ancestors. */
|
|
60
146
|
invalidateNode(node: Node<C>): void;
|
|
147
|
+
/** Resolves a dynamic value against the current graphics context. */
|
|
61
148
|
resolveDynValue<T>(value: DynValue<C, T>): T;
|
|
149
|
+
/** Saves the canvas state for the callback and restores it afterwards. */
|
|
62
150
|
with<T>(this: Context<C>, cb: (g: C) => T): T;
|
|
63
151
|
}
|
|
152
|
+
/**
|
|
153
|
+
* Width and height pair in CSS pixels.
|
|
154
|
+
*/
|
|
64
155
|
interface Box {
|
|
65
156
|
width: number;
|
|
66
157
|
height: number;
|
|
67
158
|
}
|
|
159
|
+
/**
|
|
160
|
+
* Pointer test input routed through the node tree.
|
|
161
|
+
*/
|
|
68
162
|
interface HitTest {
|
|
69
163
|
x: number;
|
|
70
164
|
y: number;
|
|
71
165
|
type: "click" | "auxclick" | "hover";
|
|
72
166
|
}
|
|
167
|
+
/**
|
|
168
|
+
* Fundamental layout node contract.
|
|
169
|
+
*/
|
|
73
170
|
interface Node<C extends CanvasRenderingContext2D> {
|
|
74
171
|
/** Measure the node under the current layout constraints. */
|
|
75
172
|
measure(ctx: Context<C>): Box;
|
|
@@ -78,18 +175,27 @@ interface Node<C extends CanvasRenderingContext2D> {
|
|
|
78
175
|
draw(ctx: Context<C>, x: number, y: number): boolean;
|
|
79
176
|
hittest(ctx: Context<C>, test: HitTest): boolean;
|
|
80
177
|
}
|
|
178
|
+
/**
|
|
179
|
+
* Rectangular region in local coordinates.
|
|
180
|
+
*/
|
|
81
181
|
interface LayoutRect {
|
|
82
182
|
x: number;
|
|
83
183
|
y: number;
|
|
84
184
|
width: number;
|
|
85
185
|
height: number;
|
|
86
186
|
}
|
|
187
|
+
/**
|
|
188
|
+
* Stored layout data for a single child node.
|
|
189
|
+
*/
|
|
87
190
|
interface ChildLayoutResult<C extends CanvasRenderingContext2D> {
|
|
88
191
|
node: Node<C>;
|
|
89
192
|
rect: LayoutRect;
|
|
90
193
|
contentBox: LayoutRect;
|
|
91
194
|
constraints?: LayoutConstraints;
|
|
92
195
|
}
|
|
196
|
+
/**
|
|
197
|
+
* Cached layout data for a container and its children.
|
|
198
|
+
*/
|
|
93
199
|
interface FlexLayoutResult<C extends CanvasRenderingContext2D> {
|
|
94
200
|
containerBox: LayoutRect;
|
|
95
201
|
contentBox: LayoutRect;
|
|
@@ -98,19 +204,37 @@ interface FlexLayoutResult<C extends CanvasRenderingContext2D> {
|
|
|
98
204
|
}
|
|
99
205
|
//#endregion
|
|
100
206
|
//#region src/nodes/base.d.ts
|
|
207
|
+
/**
|
|
208
|
+
* A node that owns an ordered list of child nodes.
|
|
209
|
+
*/
|
|
101
210
|
declare abstract class Group<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
102
211
|
#private;
|
|
212
|
+
/**
|
|
213
|
+
* @param children Initial child nodes, in layout order.
|
|
214
|
+
*/
|
|
103
215
|
constructor(children: Node<C>[]);
|
|
216
|
+
/** Child nodes managed by this group. */
|
|
104
217
|
get children(): readonly Node<C>[];
|
|
218
|
+
/**
|
|
219
|
+
* Replaces the full child list while updating parent links.
|
|
220
|
+
*/
|
|
105
221
|
replaceChildren(nextChildren: Node<C>[]): void;
|
|
106
222
|
abstract measure(ctx: Context<C>): Box;
|
|
107
223
|
abstract draw(ctx: Context<C>, x: number, y: number): boolean;
|
|
108
224
|
abstract hittest(ctx: Context<C>, test: HitTest): boolean;
|
|
109
225
|
}
|
|
226
|
+
/**
|
|
227
|
+
* A node that forwards layout and drawing to a single inner node.
|
|
228
|
+
*/
|
|
110
229
|
declare class Wrapper<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
111
230
|
#private;
|
|
231
|
+
/**
|
|
232
|
+
* @param inner Wrapped child node.
|
|
233
|
+
*/
|
|
112
234
|
constructor(inner: Node<C>);
|
|
235
|
+
/** The wrapped child node. */
|
|
113
236
|
get inner(): Node<C>;
|
|
237
|
+
/** Replaces the wrapped child node. */
|
|
114
238
|
set inner(newNode: Node<C>);
|
|
115
239
|
measure(ctx: Context<C>): Box;
|
|
116
240
|
measureMinContent(ctx: Context<C>): Box;
|
|
@@ -119,6 +243,9 @@ declare class Wrapper<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
|
119
243
|
}
|
|
120
244
|
//#endregion
|
|
121
245
|
//#region src/nodes/box.d.ts
|
|
246
|
+
/**
|
|
247
|
+
* Adds padding around a single child node.
|
|
248
|
+
*/
|
|
122
249
|
declare class PaddingBox<C extends CanvasRenderingContext2D> extends Wrapper<C> {
|
|
123
250
|
#private;
|
|
124
251
|
readonly padding: {
|
|
@@ -127,6 +254,10 @@ declare class PaddingBox<C extends CanvasRenderingContext2D> extends Wrapper<C>
|
|
|
127
254
|
left?: number;
|
|
128
255
|
right?: number;
|
|
129
256
|
};
|
|
257
|
+
/**
|
|
258
|
+
* @param inner Wrapped child node.
|
|
259
|
+
* @param padding Padding in CSS pixels on each side.
|
|
260
|
+
*/
|
|
130
261
|
constructor(inner: Node<C>, padding?: {
|
|
131
262
|
top?: number;
|
|
132
263
|
bottom?: number;
|
|
@@ -138,9 +269,16 @@ declare class PaddingBox<C extends CanvasRenderingContext2D> extends Wrapper<C>
|
|
|
138
269
|
draw(ctx: Context<C>, x: number, y: number): boolean;
|
|
139
270
|
hittest(ctx: Context<C>, test: HitTest): boolean;
|
|
140
271
|
}
|
|
272
|
+
/**
|
|
273
|
+
* A leaf node with a fixed size and no drawing behavior.
|
|
274
|
+
*/
|
|
141
275
|
declare class Fixed<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
142
276
|
readonly width: number;
|
|
143
277
|
readonly height: number;
|
|
278
|
+
/**
|
|
279
|
+
* @param width Fixed width in CSS pixels.
|
|
280
|
+
* @param height Fixed height in CSS pixels.
|
|
281
|
+
*/
|
|
144
282
|
constructor(width: number, height: number);
|
|
145
283
|
measure(_ctx: Context<C>): Box;
|
|
146
284
|
measureMinContent(_ctx: Context<C>): Box;
|
|
@@ -149,12 +287,26 @@ declare class Fixed<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
|
149
287
|
}
|
|
150
288
|
//#endregion
|
|
151
289
|
//#region src/nodes/flex.d.ts
|
|
290
|
+
/**
|
|
291
|
+
* Wraps a child node with per-item flex options.
|
|
292
|
+
*/
|
|
152
293
|
declare class FlexItem<C extends CanvasRenderingContext2D> extends Wrapper<C> {
|
|
153
294
|
readonly item: FlexItemOptions;
|
|
295
|
+
/**
|
|
296
|
+
* @param inner Wrapped child node.
|
|
297
|
+
* @param item Flex behavior overrides for the child.
|
|
298
|
+
*/
|
|
154
299
|
constructor(inner: Node<C>, item?: FlexItemOptions);
|
|
155
300
|
}
|
|
301
|
+
/**
|
|
302
|
+
* Lays out children in a single flex row or column.
|
|
303
|
+
*/
|
|
156
304
|
declare class Flex<C extends CanvasRenderingContext2D> extends Group<C> {
|
|
157
305
|
readonly options: FlexContainerOptions;
|
|
306
|
+
/**
|
|
307
|
+
* @param children Child nodes in visual order.
|
|
308
|
+
* @param options Flex container configuration.
|
|
309
|
+
*/
|
|
158
310
|
constructor(children: Node<C>[], options?: FlexContainerOptions);
|
|
159
311
|
measure(ctx: Context<C>): Box;
|
|
160
312
|
measureMinContent(ctx: Context<C>): Box;
|
|
@@ -163,11 +315,18 @@ declare class Flex<C extends CanvasRenderingContext2D> extends Group<C> {
|
|
|
163
315
|
}
|
|
164
316
|
//#endregion
|
|
165
317
|
//#region src/nodes/place.d.ts
|
|
318
|
+
/**
|
|
319
|
+
* Aligns a single child horizontally within the available width.
|
|
320
|
+
*/
|
|
166
321
|
declare class Place<C extends CanvasRenderingContext2D> extends Wrapper<C> {
|
|
167
322
|
readonly options: {
|
|
168
323
|
align?: TextAlign;
|
|
169
324
|
expand?: boolean;
|
|
170
325
|
};
|
|
326
|
+
/**
|
|
327
|
+
* @param inner Wrapped child node.
|
|
328
|
+
* @param options Alignment behavior for the child.
|
|
329
|
+
*/
|
|
171
330
|
constructor(inner: Node<C>, options?: {
|
|
172
331
|
align?: TextAlign;
|
|
173
332
|
expand?: boolean;
|
|
@@ -179,9 +338,16 @@ declare class Place<C extends CanvasRenderingContext2D> extends Wrapper<C> {
|
|
|
179
338
|
}
|
|
180
339
|
//#endregion
|
|
181
340
|
//#region src/nodes/text.d.ts
|
|
341
|
+
/**
|
|
342
|
+
* Draws wrapped text using the configured line height and alignment.
|
|
343
|
+
*/
|
|
182
344
|
declare class MultilineText<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
183
345
|
readonly text: string;
|
|
184
346
|
readonly options: MultilineTextOptions<C>;
|
|
347
|
+
/**
|
|
348
|
+
* @param text Source text to measure and draw.
|
|
349
|
+
* @param options Text layout and drawing options.
|
|
350
|
+
*/
|
|
185
351
|
constructor(text: string, options: MultilineTextOptions<C>);
|
|
186
352
|
measure(ctx: Context<C>): Box;
|
|
187
353
|
measureMinContent(ctx: Context<C>): Box;
|
|
@@ -192,9 +358,16 @@ declare class MultilineText<C extends CanvasRenderingContext2D> implements Node<
|
|
|
192
358
|
type: "click" | "auxclick" | "hover";
|
|
193
359
|
}): boolean;
|
|
194
360
|
}
|
|
361
|
+
/**
|
|
362
|
+
* Draws a single line of text, clipped logically by measurement width.
|
|
363
|
+
*/
|
|
195
364
|
declare class Text<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
196
365
|
readonly text: string;
|
|
197
366
|
readonly options: TextOptions<C>;
|
|
367
|
+
/**
|
|
368
|
+
* @param text Source text to measure and draw.
|
|
369
|
+
* @param options Text layout and drawing options.
|
|
370
|
+
*/
|
|
198
371
|
constructor(text: string, options: TextOptions<C>);
|
|
199
372
|
measure(ctx: Context<C>): Box;
|
|
200
373
|
measureMinContent(ctx: Context<C>): Box;
|
|
@@ -207,49 +380,105 @@ declare class Text<C extends CanvasRenderingContext2D> implements Node<C> {
|
|
|
207
380
|
}
|
|
208
381
|
//#endregion
|
|
209
382
|
//#region src/renderer/base.d.ts
|
|
383
|
+
/**
|
|
384
|
+
* Base renderer that provides measurement, layout caching, and drawing helpers.
|
|
385
|
+
*/
|
|
210
386
|
declare class BaseRenderer<C extends CanvasRenderingContext2D, O extends {} = {}> {
|
|
211
387
|
#private;
|
|
212
388
|
readonly options: RendererOptions & O;
|
|
389
|
+
/** Canvas rendering context used by this renderer. */
|
|
213
390
|
graphics: C;
|
|
214
391
|
protected get context(): Context<C>;
|
|
392
|
+
/**
|
|
393
|
+
* @param graphics Canvas rendering context used for all layout and drawing.
|
|
394
|
+
* @param options Renderer-specific options.
|
|
395
|
+
*/
|
|
215
396
|
constructor(graphics: C, options: RendererOptions & O);
|
|
216
397
|
protected getRootConstraints(): LayoutConstraints;
|
|
217
398
|
protected getRootContext(): Context<C>;
|
|
218
399
|
protected measureRootNode(node: Node<C>): Box;
|
|
219
400
|
protected drawRootNode(node: Node<C>, x?: number, y?: number): boolean;
|
|
220
401
|
protected hittestRootNode(node: Node<C>, test: HitTest): boolean;
|
|
402
|
+
/**
|
|
403
|
+
* Drops cached measurements for a node and every ancestor that depends on it.
|
|
404
|
+
*/
|
|
221
405
|
invalidateNode(node: Node<C>): void;
|
|
406
|
+
/**
|
|
407
|
+
* Returns the cached layout result for a node under the given constraints, if available.
|
|
408
|
+
*/
|
|
222
409
|
getLayoutResult(node: Node<C>, constraints?: LayoutConstraints): FlexLayoutResult<C> | undefined;
|
|
410
|
+
/**
|
|
411
|
+
* Stores a layout result for later draw and hit-test passes.
|
|
412
|
+
*/
|
|
223
413
|
setLayoutResult(node: Node<C>, result: FlexLayoutResult<C>, constraints?: LayoutConstraints): void;
|
|
224
414
|
protected getTextLayout<T>(node: Node<C>, key: string): T | undefined;
|
|
225
415
|
protected setTextLayout<T>(node: Node<C>, key: string, layout: T): void;
|
|
416
|
+
/**
|
|
417
|
+
* Measures a node under optional constraints, using cached results when possible.
|
|
418
|
+
*/
|
|
226
419
|
measureNode(node: Node<C>, constraints?: LayoutConstraints): Box;
|
|
227
420
|
}
|
|
421
|
+
/**
|
|
422
|
+
* Immediate-mode renderer for a single root node.
|
|
423
|
+
*/
|
|
228
424
|
declare class DebugRenderer<C extends CanvasRenderingContext2D> extends BaseRenderer<C> {
|
|
425
|
+
/**
|
|
426
|
+
* Clears the viewport and draws the provided root node.
|
|
427
|
+
*/
|
|
229
428
|
draw(node: Node<C>): boolean;
|
|
429
|
+
/**
|
|
430
|
+
* Hit-tests the provided root node using viewport-relative coordinates.
|
|
431
|
+
*/
|
|
230
432
|
hittest(node: Node<C>, test: HitTest): boolean;
|
|
231
433
|
}
|
|
232
434
|
//#endregion
|
|
233
435
|
//#region src/renderer/list-state.d.ts
|
|
436
|
+
/**
|
|
437
|
+
* Mutable list state shared with virtualized renderers.
|
|
438
|
+
*/
|
|
234
439
|
declare class ListState<T extends {}> {
|
|
440
|
+
/** Pixel offset from the anchored item edge. */
|
|
235
441
|
offset: number;
|
|
442
|
+
/** Anchor item index, or `undefined` to use the renderer default. */
|
|
236
443
|
position: number | undefined;
|
|
444
|
+
/** Items currently managed by the renderer. */
|
|
237
445
|
items: T[];
|
|
446
|
+
/**
|
|
447
|
+
* @param items Initial list items.
|
|
448
|
+
*/
|
|
238
449
|
constructor(items?: T[]);
|
|
450
|
+
/** Prepends one or more items. */
|
|
239
451
|
unshift(...items: T[]): void;
|
|
452
|
+
/** Prepends an array of items. */
|
|
240
453
|
unshiftAll(items: T[]): void;
|
|
454
|
+
/** Appends one or more items. */
|
|
241
455
|
push(...items: T[]): void;
|
|
456
|
+
/** Appends an array of items. */
|
|
242
457
|
pushAll(items: T[]): void;
|
|
458
|
+
/**
|
|
459
|
+
* Sets the current anchor item and pixel offset.
|
|
460
|
+
*/
|
|
243
461
|
setAnchor(position: number, offset?: number): void;
|
|
462
|
+
/**
|
|
463
|
+
* Replaces all items and clears scroll state.
|
|
464
|
+
*/
|
|
244
465
|
reset(items?: T[]): void;
|
|
466
|
+
/** Clears the current scroll anchor while keeping the items. */
|
|
245
467
|
resetScroll(): void;
|
|
468
|
+
/** Applies a relative pixel scroll delta. */
|
|
246
469
|
applyScroll(delta: number): void;
|
|
247
470
|
}
|
|
248
471
|
//#endregion
|
|
249
472
|
//#region src/renderer/memo.d.ts
|
|
473
|
+
/**
|
|
474
|
+
* Memoizes `renderItem` by object identity.
|
|
475
|
+
*/
|
|
250
476
|
declare function memoRenderItem<C extends CanvasRenderingContext2D, T extends object>(renderItem: (item: T) => Node<C>): ((item: T) => Node<C>) & {
|
|
251
477
|
reset: (key: T) => boolean;
|
|
252
478
|
};
|
|
479
|
+
/**
|
|
480
|
+
* Memoizes `renderItem` by a caller-provided cache key.
|
|
481
|
+
*/
|
|
253
482
|
declare function memoRenderItemBy<C extends CanvasRenderingContext2D, T, K>(keyOf: (item: T) => K, renderItem: (item: T) => Node<C>): ((item: T) => Node<C>) & {
|
|
254
483
|
reset: (item: T) => boolean;
|
|
255
484
|
resetKey: (key: K) => boolean;
|
|
@@ -276,12 +505,22 @@ interface VisibleWindow<T> {
|
|
|
276
505
|
}
|
|
277
506
|
//#endregion
|
|
278
507
|
//#region src/renderer/virtualized/base.d.ts
|
|
508
|
+
/**
|
|
509
|
+
* Options for programmatic scrolling to a target item.
|
|
510
|
+
*/
|
|
279
511
|
interface JumpToOptions {
|
|
512
|
+
/** Whether to animate the jump. Defaults to `true`. */
|
|
280
513
|
animated?: boolean;
|
|
514
|
+
/** Which edge of the item should align with the viewport. */
|
|
281
515
|
block?: "start" | "center" | "end";
|
|
516
|
+
/** Animation duration in milliseconds. */
|
|
282
517
|
duration?: number;
|
|
518
|
+
/** Called after the jump completes or finishes animating. */
|
|
283
519
|
onComplete?: () => void;
|
|
284
520
|
}
|
|
521
|
+
/**
|
|
522
|
+
* Shared base class for virtualized list renderers.
|
|
523
|
+
*/
|
|
285
524
|
declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T extends {}> extends BaseRenderer<C, {
|
|
286
525
|
renderItem: (item: T) => Node<C>;
|
|
287
526
|
list: ListState<T>;
|
|
@@ -290,13 +529,21 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
|
|
|
290
529
|
static readonly MIN_JUMP_DURATION = 160;
|
|
291
530
|
static readonly MAX_JUMP_DURATION = 420;
|
|
292
531
|
static readonly JUMP_DURATION_PER_ITEM = 28;
|
|
532
|
+
/** Current anchor item index. */
|
|
293
533
|
get position(): number | undefined;
|
|
534
|
+
/** Updates the current anchor item index. */
|
|
294
535
|
set position(value: number | undefined);
|
|
536
|
+
/** Pixel offset from the anchored item edge. */
|
|
295
537
|
get offset(): number;
|
|
538
|
+
/** Updates the pixel offset from the anchored item edge. */
|
|
296
539
|
set offset(value: number);
|
|
540
|
+
/** Items currently available to the renderer. */
|
|
297
541
|
get items(): T[];
|
|
542
|
+
/** Replaces the current item collection. */
|
|
298
543
|
set items(value: T[]);
|
|
544
|
+
/** Renders the current visible window. */
|
|
299
545
|
abstract render(feedback?: RenderFeedback): boolean;
|
|
546
|
+
/** Hit-tests the current visible window. */
|
|
300
547
|
abstract hittest(test: {
|
|
301
548
|
x: number;
|
|
302
549
|
y: number;
|
|
@@ -304,6 +551,9 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
|
|
|
304
551
|
}): boolean;
|
|
305
552
|
protected _readListState(): VisibleListState;
|
|
306
553
|
protected _commitListState(state: NormalizedListState): void;
|
|
554
|
+
/**
|
|
555
|
+
* Scrolls the viewport to the requested item index.
|
|
556
|
+
*/
|
|
307
557
|
jumpTo(index: number, options?: JumpToOptions): void;
|
|
308
558
|
protected _resetRenderFeedback(feedback?: RenderFeedback): void;
|
|
309
559
|
protected _accumulateRenderFeedback(feedback: RenderFeedback, idx: number, top: number, height: number): void;
|
|
@@ -327,6 +577,9 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
|
|
|
327
577
|
}
|
|
328
578
|
//#endregion
|
|
329
579
|
//#region src/renderer/virtualized/chat.d.ts
|
|
580
|
+
/**
|
|
581
|
+
* Virtualized renderer anchored to the bottom, suitable for chat-style UIs.
|
|
582
|
+
*/
|
|
330
583
|
declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
|
|
331
584
|
#private;
|
|
332
585
|
protected _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
|
|
@@ -339,6 +592,9 @@ declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> ext
|
|
|
339
592
|
}
|
|
340
593
|
//#endregion
|
|
341
594
|
//#region src/renderer/virtualized/timeline.d.ts
|
|
595
|
+
/**
|
|
596
|
+
* Virtualized renderer anchored to the top, suitable for timeline-style UIs.
|
|
597
|
+
*/
|
|
342
598
|
declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
|
|
343
599
|
#private;
|
|
344
600
|
protected _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
|
|
@@ -350,5 +606,5 @@ declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}>
|
|
|
350
606
|
hittest(test: HitTest): boolean;
|
|
351
607
|
}
|
|
352
608
|
//#endregion
|
|
353
|
-
export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, Text, TextAlign, TextOptions, TextStyleOptions, TextWhitespaceMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
|
|
609
|
+
export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, Text, TextAlign, TextEllipsisPosition, TextOptions, TextOverflowMode, TextStyleOptions, TextWhitespaceMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
|
|
354
610
|
//# sourceMappingURL=index.d.mts.map
|