@jamesyong42/infinite-canvas 1.0.0 → 1.2.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 +170 -9
- package/dist/SelectionRenderer-CR2PBQwx.d.cts +105 -0
- package/dist/SelectionRenderer-CR2PBQwx.d.cts.map +1 -0
- package/dist/SelectionRenderer-DlsBstAq.d.mts +105 -0
- package/dist/SelectionRenderer-DlsBstAq.d.mts.map +1 -0
- package/dist/WebGLWidgetLayer-BBMuwzHq.cjs +3560 -0
- package/dist/WebGLWidgetLayer-BBMuwzHq.cjs.map +1 -0
- package/dist/WebGLWidgetLayer-C3p1tnpm.mjs +3375 -0
- package/dist/WebGLWidgetLayer-C3p1tnpm.mjs.map +1 -0
- package/dist/advanced.cjs +110 -165
- package/dist/advanced.cjs.map +1 -1
- package/dist/advanced.d.cts +58 -40
- package/dist/advanced.d.cts.map +1 -0
- package/dist/advanced.d.mts +99 -0
- package/dist/advanced.d.mts.map +1 -0
- package/dist/advanced.mjs +105 -0
- package/dist/advanced.mjs.map +1 -0
- package/dist/devtools.cjs +654 -0
- package/dist/devtools.cjs.map +1 -0
- package/dist/devtools.d.cts +23 -0
- package/dist/devtools.d.cts.map +1 -0
- package/dist/devtools.d.mts +23 -0
- package/dist/devtools.d.mts.map +1 -0
- package/dist/devtools.mjs +652 -0
- package/dist/devtools.mjs.map +1 -0
- package/dist/engine-BfbvWXSk.d.mts +982 -0
- package/dist/engine-BfbvWXSk.d.mts.map +1 -0
- package/dist/engine-CCjuFMC-.d.cts +982 -0
- package/dist/engine-CCjuFMC-.d.cts.map +1 -0
- package/dist/hooks-BwY7rRHg.mjs +425 -0
- package/dist/hooks-BwY7rRHg.mjs.map +1 -0
- package/dist/hooks-DHShH86C.cjs +707 -0
- package/dist/hooks-DHShH86C.cjs.map +1 -0
- package/dist/index.cjs +909 -803
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +199 -67
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +258 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +855 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +47 -15
- package/dist/SelectionRenderer-CeWSNZT8.d.cts +0 -891
- package/dist/SelectionRenderer-CeWSNZT8.d.ts +0 -891
- package/dist/advanced.d.ts +0 -81
- package/dist/advanced.js +0 -124
- package/dist/advanced.js.map +0 -1
- package/dist/chunk-VSHXWTJH.cjs +0 -3228
- package/dist/chunk-VSHXWTJH.cjs.map +0 -1
- package/dist/chunk-Z6JQQOWL.js +0 -3142
- package/dist/chunk-Z6JQQOWL.js.map +0 -1
- package/dist/index.d.ts +0 -126
- package/dist/index.js +0 -602
- package/dist/index.js.map +0 -1
|
@@ -1,891 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import * as _jamesyong42_reactive_ecs from '@jamesyong42/reactive-ecs';
|
|
3
|
-
import { EntityId, ComponentInit, TagType, World, ComponentType, SystemDef, Unsubscribe } from '@jamesyong42/reactive-ecs';
|
|
4
|
-
import * as THREE from 'three';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* An archetype is a recipe for creating an entity: it declares which components
|
|
8
|
-
* and tags the entity should have on spawn. Archetypes may reference a widget
|
|
9
|
-
* type (for visible entities) or stand alone (for logic-only entities).
|
|
10
|
-
*
|
|
11
|
-
* The engine auto-generates a default archetype for every registered widget
|
|
12
|
-
* that does not have an explicit one — so simple widgets don't need to ship
|
|
13
|
-
* an archetype at all. Write an archetype only when you need to bundle extra
|
|
14
|
-
* behaviour (Container, Locked, custom components) with a widget.
|
|
15
|
-
*/
|
|
16
|
-
interface Archetype {
|
|
17
|
-
/** Unique archetype id. Pass this to `engine.spawn(id, ...)`. */
|
|
18
|
-
id: string;
|
|
19
|
-
/**
|
|
20
|
-
* The widget type this archetype renders as. Required for visible entities;
|
|
21
|
-
* omit for logic-only entities that have no view.
|
|
22
|
-
*/
|
|
23
|
-
widget?: string;
|
|
24
|
-
/** Extra components added on spawn, beyond Transform2D / Widget / WidgetData / ZIndex. */
|
|
25
|
-
components?: ComponentInit[];
|
|
26
|
-
/** Extra tags added on spawn, beyond the interactive defaults. */
|
|
27
|
-
tags?: TagType[];
|
|
28
|
-
/**
|
|
29
|
-
* Whether the entity is user-interactive (Selectable + Draggable + Resizable).
|
|
30
|
-
* Default: true. Set `false` for backdrops, decorations, or locked entities.
|
|
31
|
-
*/
|
|
32
|
-
interactive?: boolean;
|
|
33
|
-
/** Overrides the widget's defaultSize. */
|
|
34
|
-
defaultSize?: {
|
|
35
|
-
width: number;
|
|
36
|
-
height: number;
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Options for `engine.spawn(archetypeId, opts)`.
|
|
41
|
-
* All fields are optional — defaults come from the archetype + widget.
|
|
42
|
-
*/
|
|
43
|
-
interface SpawnOptions {
|
|
44
|
-
/** World-space position. Defaults to { x: 0, y: 0 }. */
|
|
45
|
-
at?: {
|
|
46
|
-
x: number;
|
|
47
|
-
y: number;
|
|
48
|
-
};
|
|
49
|
-
/** World-space size. Falls back to archetype.defaultSize → widget.defaultSize. */
|
|
50
|
-
size?: {
|
|
51
|
-
width: number;
|
|
52
|
-
height: number;
|
|
53
|
-
};
|
|
54
|
-
/** Initial rotation in radians. Default 0. */
|
|
55
|
-
rotation?: number;
|
|
56
|
-
/** Data patch merged into the widget's defaultData. */
|
|
57
|
-
data?: Record<string, unknown>;
|
|
58
|
-
/** Z-order. Default 0. */
|
|
59
|
-
zIndex?: number;
|
|
60
|
-
/** Parent entity for hierarchy nesting. */
|
|
61
|
-
parent?: EntityId;
|
|
62
|
-
}
|
|
63
|
-
/** Simple in-memory archetype registry. */
|
|
64
|
-
interface ArchetypeRegistry {
|
|
65
|
-
register(archetype: Archetype): void;
|
|
66
|
-
get(id: string): Archetype | null;
|
|
67
|
-
getAll(): Archetype[];
|
|
68
|
-
}
|
|
69
|
-
declare function createArchetypeRegistry(archetypes?: Archetype[]): ArchetypeRegistry;
|
|
70
|
-
|
|
71
|
-
interface Command {
|
|
72
|
-
execute(world: World): void;
|
|
73
|
-
undo(world: World): void;
|
|
74
|
-
}
|
|
75
|
-
declare class CommandBuffer {
|
|
76
|
-
private undoStack;
|
|
77
|
-
private redoStack;
|
|
78
|
-
private currentGroup;
|
|
79
|
-
/** Start grouping commands (e.g., on pointerdown). All commands until endGroup() are one undo step. */
|
|
80
|
-
beginGroup(): void;
|
|
81
|
-
/** Execute a command and record it for undo. */
|
|
82
|
-
execute(command: Command, world: World): void;
|
|
83
|
-
/** Close the current group — all commands since beginGroup() become one undo step. */
|
|
84
|
-
endGroup(): void;
|
|
85
|
-
/** Undo the last command group. */
|
|
86
|
-
undo(world: World): boolean;
|
|
87
|
-
/** Redo the last undone command group. */
|
|
88
|
-
redo(world: World): boolean;
|
|
89
|
-
canUndo(): boolean;
|
|
90
|
-
canRedo(): boolean;
|
|
91
|
-
clear(): void;
|
|
92
|
-
get undoSize(): number;
|
|
93
|
-
get redoSize(): number;
|
|
94
|
-
}
|
|
95
|
-
declare class MoveCommand implements Command {
|
|
96
|
-
private entityIds;
|
|
97
|
-
private dx;
|
|
98
|
-
private dy;
|
|
99
|
-
private transformType;
|
|
100
|
-
private beforePositions;
|
|
101
|
-
private afterPositions;
|
|
102
|
-
private captured;
|
|
103
|
-
constructor(entityIds: EntityId[], dx: number, dy: number, transformType: ComponentType<{
|
|
104
|
-
x: number;
|
|
105
|
-
y: number;
|
|
106
|
-
}>);
|
|
107
|
-
execute(world: World): void;
|
|
108
|
-
undo(world: World): void;
|
|
109
|
-
}
|
|
110
|
-
declare class ResizeCommand implements Command {
|
|
111
|
-
private entityId;
|
|
112
|
-
private before;
|
|
113
|
-
private after;
|
|
114
|
-
private transformType;
|
|
115
|
-
constructor(entityId: EntityId, before: {
|
|
116
|
-
x: number;
|
|
117
|
-
y: number;
|
|
118
|
-
width: number;
|
|
119
|
-
height: number;
|
|
120
|
-
}, after: {
|
|
121
|
-
x: number;
|
|
122
|
-
y: number;
|
|
123
|
-
width: number;
|
|
124
|
-
height: number;
|
|
125
|
-
}, transformType: ComponentType<{
|
|
126
|
-
x: number;
|
|
127
|
-
y: number;
|
|
128
|
-
width: number;
|
|
129
|
-
height: number;
|
|
130
|
-
}>);
|
|
131
|
-
execute(world: World): void;
|
|
132
|
-
undo(world: World): void;
|
|
133
|
-
}
|
|
134
|
-
declare class SetComponentCommand<T> implements Command {
|
|
135
|
-
private entityId;
|
|
136
|
-
private type;
|
|
137
|
-
private before;
|
|
138
|
-
private after;
|
|
139
|
-
constructor(entityId: EntityId, type: ComponentType<T>, before: Partial<T>, after: Partial<T>);
|
|
140
|
-
execute(world: World): void;
|
|
141
|
-
undo(world: World): void;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/** Position, size, and rotation of an entity in local coordinates (world units). */
|
|
145
|
-
declare const Transform2D: _jamesyong42_reactive_ecs.ComponentType<{
|
|
146
|
-
x: number;
|
|
147
|
-
y: number;
|
|
148
|
-
width: number;
|
|
149
|
-
height: number;
|
|
150
|
-
rotation: number;
|
|
151
|
-
}>;
|
|
152
|
-
/** Computed world-space bounding box. Read-only -- updated by the transform propagation system. */
|
|
153
|
-
declare const WorldBounds: _jamesyong42_reactive_ecs.ComponentType<{
|
|
154
|
-
worldX: number;
|
|
155
|
-
worldY: number;
|
|
156
|
-
worldWidth: number;
|
|
157
|
-
worldHeight: number;
|
|
158
|
-
}>;
|
|
159
|
-
/** Rendering and hit-test ordering. Higher values render on top. */
|
|
160
|
-
declare const ZIndex: _jamesyong42_reactive_ecs.ComponentType<{
|
|
161
|
-
value: number;
|
|
162
|
-
}>;
|
|
163
|
-
/** Parent entity reference. Used for nested containers and handle sync. */
|
|
164
|
-
declare const Parent: _jamesyong42_reactive_ecs.ComponentType<{
|
|
165
|
-
id: EntityId;
|
|
166
|
-
}>;
|
|
167
|
-
/** Child entity IDs. Used for nested containers and handle sync. */
|
|
168
|
-
declare const Children: _jamesyong42_reactive_ecs.ComponentType<{
|
|
169
|
-
ids: EntityId[];
|
|
170
|
-
}>;
|
|
171
|
-
/** Marks an entity as a renderable widget with a type identifier and rendering surface. */
|
|
172
|
-
declare const Widget$1: _jamesyong42_reactive_ecs.ComponentType<{
|
|
173
|
-
surface: "dom" | "webgl" | "webview";
|
|
174
|
-
type: string;
|
|
175
|
-
}>;
|
|
176
|
-
/** Arbitrary application data attached to a widget entity. Access via useWidgetData(). */
|
|
177
|
-
declare const WidgetData: _jamesyong42_reactive_ecs.ComponentType<{
|
|
178
|
-
data: Record<string, unknown>;
|
|
179
|
-
}>;
|
|
180
|
-
/** Computed responsive breakpoint based on screen-space size. Read-only. */
|
|
181
|
-
declare const WidgetBreakpoint: _jamesyong42_reactive_ecs.ComponentType<{
|
|
182
|
-
current: "micro" | "compact" | "normal" | "expanded" | "detailed";
|
|
183
|
-
screenWidth: number;
|
|
184
|
-
screenHeight: number;
|
|
185
|
-
}>;
|
|
186
|
-
/** Marks an entity as an enterable container (double-click/double-tap to enter). */
|
|
187
|
-
declare const Container: _jamesyong42_reactive_ecs.ComponentType<{
|
|
188
|
-
enterable: boolean;
|
|
189
|
-
}>;
|
|
190
|
-
/** Resize handle positions — 4 edges + 4 corners. */
|
|
191
|
-
type ResizeHandlePos = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
|
|
192
|
-
/**
|
|
193
|
-
* Rectangular interactable region anchored relative to the parent entity's WorldBounds.
|
|
194
|
-
* Anchor values are in 0..1 space: 0 = parent min edge, 1 = parent max edge.
|
|
195
|
-
* Widget bodies do NOT need Hitbox — their WorldBounds is already their hit area.
|
|
196
|
-
* Hitbox is only for sub-entities (handles, ports) whose position is parent-relative.
|
|
197
|
-
*/
|
|
198
|
-
declare const Hitbox: _jamesyong42_reactive_ecs.ComponentType<{
|
|
199
|
-
anchorX: number;
|
|
200
|
-
anchorY: number;
|
|
201
|
-
width: number;
|
|
202
|
-
height: number;
|
|
203
|
-
}>;
|
|
204
|
-
/** Discriminated union of interaction roles an entity can fulfil. */
|
|
205
|
-
type InteractionRoleType = {
|
|
206
|
-
type: 'drag';
|
|
207
|
-
} | {
|
|
208
|
-
type: 'select';
|
|
209
|
-
} | {
|
|
210
|
-
type: 'resize';
|
|
211
|
-
handle: ResizeHandlePos;
|
|
212
|
-
} | {
|
|
213
|
-
type: 'rotate';
|
|
214
|
-
} | {
|
|
215
|
-
type: 'connect';
|
|
216
|
-
} | {
|
|
217
|
-
type: 'canvas';
|
|
218
|
-
};
|
|
219
|
-
type InteractionRoleData = {
|
|
220
|
-
/** Hit-test priority — higher wins when multiple entities contain the point. */
|
|
221
|
-
layer: number;
|
|
222
|
-
/** Discriminated role + role-specific data. */
|
|
223
|
-
role: InteractionRoleType;
|
|
224
|
-
};
|
|
225
|
-
/**
|
|
226
|
-
* Declares what happens when this entity is hit, plus its hit-test priority.
|
|
227
|
-
* Canonical layers: 0=canvas, 5=widget body, 10=edge handles, 15=corner handles, 20=reserved.
|
|
228
|
-
*/
|
|
229
|
-
declare const InteractionRole: _jamesyong42_reactive_ecs.ComponentType<InteractionRoleData>;
|
|
230
|
-
/** Data shape for the HandleSet component. */
|
|
231
|
-
type HandleSetData = {
|
|
232
|
-
ids: EntityId[];
|
|
233
|
-
};
|
|
234
|
-
/**
|
|
235
|
-
* Component on the parent entity listing the EntityIds of its spawned handle children.
|
|
236
|
-
* Enables O(1) cascade destroy without a reverse-index scan of Parent components.
|
|
237
|
-
*/
|
|
238
|
-
declare const HandleSet: _jamesyong42_reactive_ecs.ComponentType<HandleSetData>;
|
|
239
|
-
/** CSS cursor values the canvas may request. */
|
|
240
|
-
type CSSCursor = 'default' | 'grab' | 'grabbing' | 'crosshair' | 'n-resize' | 's-resize' | 'e-resize' | 'w-resize' | 'ne-resize' | 'nw-resize' | 'se-resize' | 'sw-resize';
|
|
241
|
-
type CursorHintData = {
|
|
242
|
-
/** Cursor when this entity is hovered in idle state. */
|
|
243
|
-
hover: CSSCursor;
|
|
244
|
-
/** Cursor while this entity is being dragged/resized. */
|
|
245
|
-
active: CSSCursor;
|
|
246
|
-
};
|
|
247
|
-
/** Declares the cursor this entity requests when hovered and when active. */
|
|
248
|
-
declare const CursorHint: _jamesyong42_reactive_ecs.ComponentType<CursorHintData>;
|
|
249
|
-
/** Marks an entity as selectable by click or marquee. */
|
|
250
|
-
declare const Selectable: _jamesyong42_reactive_ecs.TagType;
|
|
251
|
-
/** Marks an entity as draggable via pointer interaction. */
|
|
252
|
-
declare const Draggable: _jamesyong42_reactive_ecs.TagType;
|
|
253
|
-
/** Marks an entity as resizable via edge/corner handles. */
|
|
254
|
-
declare const Resizable: _jamesyong42_reactive_ecs.TagType;
|
|
255
|
-
/** Prevents an entity from being moved or resized. */
|
|
256
|
-
declare const Locked: _jamesyong42_reactive_ecs.TagType;
|
|
257
|
-
/** Indicates the entity is currently selected. */
|
|
258
|
-
declare const Selected: _jamesyong42_reactive_ecs.TagType;
|
|
259
|
-
/** Indicates the entity is currently being interacted with (drag, resize). */
|
|
260
|
-
declare const Active: _jamesyong42_reactive_ecs.TagType;
|
|
261
|
-
/** Indicates the entity is within the visible viewport. Set by the cull system. */
|
|
262
|
-
declare const Visible: _jamesyong42_reactive_ecs.TagType;
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* Performance profiler with User Timing API integration.
|
|
266
|
-
* Zero-cost when disabled — all methods are no-ops.
|
|
267
|
-
* When enabled, data shows in Chrome DevTools Performance tab.
|
|
268
|
-
*/
|
|
269
|
-
interface FrameSample {
|
|
270
|
-
tick: number;
|
|
271
|
-
timestamp: number;
|
|
272
|
-
/** Total tick duration (ms) */
|
|
273
|
-
totalMs: number;
|
|
274
|
-
/** Per-system durations (ms) */
|
|
275
|
-
systems: Record<string, number>;
|
|
276
|
-
/** Visible entity computation (ms) */
|
|
277
|
-
visibilityMs: number;
|
|
278
|
-
/** Entity counts at this frame */
|
|
279
|
-
entityCount: number;
|
|
280
|
-
visibleCount: number;
|
|
281
|
-
}
|
|
282
|
-
interface ProfilerStats {
|
|
283
|
-
/** Frames per second (based on tick rate, not rAF) */
|
|
284
|
-
fps: number;
|
|
285
|
-
/** Frame time stats (ms) */
|
|
286
|
-
frameTime: {
|
|
287
|
-
avg: number;
|
|
288
|
-
p50: number;
|
|
289
|
-
p95: number;
|
|
290
|
-
p99: number;
|
|
291
|
-
max: number;
|
|
292
|
-
};
|
|
293
|
-
/** Per-system average time (ms) */
|
|
294
|
-
systemAvg: Record<string, number>;
|
|
295
|
-
/** Per-system p95 time (ms) */
|
|
296
|
-
systemP95: Record<string, number>;
|
|
297
|
-
/** Frame budget utilization at 60fps (%) */
|
|
298
|
-
budgetUsed: number;
|
|
299
|
-
/** Total samples in buffer */
|
|
300
|
-
sampleCount: number;
|
|
301
|
-
}
|
|
302
|
-
declare class Profiler {
|
|
303
|
-
private enabled;
|
|
304
|
-
private ring;
|
|
305
|
-
private writeIdx;
|
|
306
|
-
private filled;
|
|
307
|
-
private frameStart;
|
|
308
|
-
private currentSystems;
|
|
309
|
-
private visibilityMs;
|
|
310
|
-
private currentTick;
|
|
311
|
-
/** Enable/disable profiling. When disabled, all methods are no-ops. */
|
|
312
|
-
setEnabled(on: boolean): void;
|
|
313
|
-
isEnabled(): boolean;
|
|
314
|
-
/** Call at the start of engine.tick() */
|
|
315
|
-
beginFrame(tick: number): void;
|
|
316
|
-
/** Call around each system execution */
|
|
317
|
-
beginSystem(name: string): void;
|
|
318
|
-
endSystem(name: string): void;
|
|
319
|
-
/** Call around the visibility computation phase */
|
|
320
|
-
beginVisibility(): void;
|
|
321
|
-
endVisibility(): void;
|
|
322
|
-
/** Call at the end of engine.tick() */
|
|
323
|
-
endFrame(entityCount: number, visibleCount: number): void;
|
|
324
|
-
/** Get the last N frame samples (newest first) */
|
|
325
|
-
getSamples(count?: number): FrameSample[];
|
|
326
|
-
/** Compute rolling statistics from the ring buffer */
|
|
327
|
-
getStats(): ProfilerStats;
|
|
328
|
-
/** Clear all collected data */
|
|
329
|
-
clear(): void;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* Minimal Standard Schema v1 type definition.
|
|
334
|
-
*
|
|
335
|
-
* Compatible with Zod 3.24+, Valibot, ArkType, and any other library that
|
|
336
|
-
* implements the spec at https://standardschema.dev. We do not depend on any
|
|
337
|
-
* validator — users bring their own.
|
|
338
|
-
*
|
|
339
|
-
* Today we only carry the type parameter for `T`. Runtime validation via
|
|
340
|
-
* `validate()` is wired in by features that need it (inspector, serialization).
|
|
341
|
-
*/
|
|
342
|
-
interface StandardSchemaV1<Input = unknown, Output = Input> {
|
|
343
|
-
readonly '~standard': StandardSchemaV1.Props<Input, Output>;
|
|
344
|
-
}
|
|
345
|
-
declare namespace StandardSchemaV1 {
|
|
346
|
-
interface Props<Input = unknown, Output = Input> {
|
|
347
|
-
readonly version: 1;
|
|
348
|
-
readonly vendor: string;
|
|
349
|
-
readonly validate: (value: unknown) => Result<Output> | Promise<Result<Output>>;
|
|
350
|
-
readonly types?: Types<Input, Output>;
|
|
351
|
-
}
|
|
352
|
-
type Result<Output> = SuccessResult<Output> | FailureResult;
|
|
353
|
-
interface SuccessResult<Output> {
|
|
354
|
-
readonly value: Output;
|
|
355
|
-
readonly issues?: undefined;
|
|
356
|
-
}
|
|
357
|
-
interface FailureResult {
|
|
358
|
-
readonly issues: ReadonlyArray<Issue>;
|
|
359
|
-
}
|
|
360
|
-
interface Issue {
|
|
361
|
-
readonly message: string;
|
|
362
|
-
readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
|
|
363
|
-
}
|
|
364
|
-
interface PathSegment {
|
|
365
|
-
readonly key: PropertyKey;
|
|
366
|
-
}
|
|
367
|
-
interface Types<Input = unknown, Output = Input> {
|
|
368
|
-
readonly input: Input;
|
|
369
|
-
readonly output: Output;
|
|
370
|
-
}
|
|
371
|
-
type InferOutput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['output'];
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
/** Rendering surface for a widget. */
|
|
375
|
-
type WidgetSurface = 'dom' | 'webgl';
|
|
376
|
-
/** Props passed to every DOM widget component. */
|
|
377
|
-
interface DomWidgetProps {
|
|
378
|
-
entityId: EntityId;
|
|
379
|
-
}
|
|
380
|
-
/** Props passed to every R3F widget component. Rendered in local coords. */
|
|
381
|
-
interface R3FWidgetProps {
|
|
382
|
-
entityId: EntityId;
|
|
383
|
-
/** Widget width in world units. */
|
|
384
|
-
width: number;
|
|
385
|
-
/** Widget height in world units. */
|
|
386
|
-
height: number;
|
|
387
|
-
}
|
|
388
|
-
interface WidgetBase<T> {
|
|
389
|
-
/** Unique widget type id. Matches `Widget { type }` on spawned entities. */
|
|
390
|
-
type: string;
|
|
391
|
-
/**
|
|
392
|
-
* Standard Schema v1-compatible schema for the widget's data.
|
|
393
|
-
* Use Zod 3.24+, Valibot, ArkType, or any other conforming validator.
|
|
394
|
-
* The schema's output type drives the widget's data type.
|
|
395
|
-
*/
|
|
396
|
-
schema: StandardSchemaV1<any, T>;
|
|
397
|
-
/** Default data shape for new instances. Merged with user-supplied data at spawn. */
|
|
398
|
-
defaultData: T;
|
|
399
|
-
/** Default world-space size at spawn. */
|
|
400
|
-
defaultSize: {
|
|
401
|
-
width: number;
|
|
402
|
-
height: number;
|
|
403
|
-
};
|
|
404
|
-
/** Minimum world-space size when resizing. */
|
|
405
|
-
minSize?: {
|
|
406
|
-
width: number;
|
|
407
|
-
height: number;
|
|
408
|
-
};
|
|
409
|
-
}
|
|
410
|
-
/** A DOM-rendered widget. The component is wrapped in a sized div — size via CSS. */
|
|
411
|
-
interface DomWidget<T = Record<string, unknown>> extends WidgetBase<T> {
|
|
412
|
-
surface?: 'dom';
|
|
413
|
-
component: React.ComponentType<DomWidgetProps>;
|
|
414
|
-
}
|
|
415
|
-
/** An R3F (React Three Fiber) widget. The component receives local-space width/height. */
|
|
416
|
-
interface R3FWidget<T = Record<string, unknown>> extends WidgetBase<T> {
|
|
417
|
-
surface: 'webgl';
|
|
418
|
-
component: React.ComponentType<R3FWidgetProps>;
|
|
419
|
-
}
|
|
420
|
-
/** Either kind of widget. */
|
|
421
|
-
type Widget<T = Record<string, unknown>> = DomWidget<T> | R3FWidget<T>;
|
|
422
|
-
interface WidgetRegistry {
|
|
423
|
-
register(def: Widget): void;
|
|
424
|
-
get(type: string): Widget | null;
|
|
425
|
-
getAll(): Widget[];
|
|
426
|
-
}
|
|
427
|
-
declare function createWidgetRegistry(defs?: Widget[]): WidgetRegistry;
|
|
428
|
-
/** Narrows to the R3F variant. */
|
|
429
|
-
declare function isR3FWidget<T>(widget: Widget<T>): widget is R3FWidget<T>;
|
|
430
|
-
|
|
431
|
-
/** A single frame in the navigation stack, capturing the container and camera state. */
|
|
432
|
-
interface NavigationFrame {
|
|
433
|
-
containerId: EntityId | null;
|
|
434
|
-
camera: {
|
|
435
|
-
x: number;
|
|
436
|
-
y: number;
|
|
437
|
-
zoom: number;
|
|
438
|
-
};
|
|
439
|
-
}
|
|
440
|
-
/** Data shape for the CursorResource. */
|
|
441
|
-
type CursorResourceData = {
|
|
442
|
-
cursor: CSSCursor;
|
|
443
|
-
};
|
|
444
|
-
/**
|
|
445
|
-
* Output sink for the cursor system. Written by cursorSystem each tick;
|
|
446
|
-
* read by the RAF loop to apply style.cursor on the root container div.
|
|
447
|
-
*/
|
|
448
|
-
declare const CursorResource: _jamesyong42_reactive_ecs.ResourceType<CursorResourceData>;
|
|
449
|
-
/** Camera state: world-space position (x, y) and zoom level. Updated by pan/zoom gestures. */
|
|
450
|
-
declare const CameraResource: _jamesyong42_reactive_ecs.ResourceType<{
|
|
451
|
-
x: number;
|
|
452
|
-
y: number;
|
|
453
|
-
zoom: number;
|
|
454
|
-
}>;
|
|
455
|
-
/** Viewport dimensions in CSS pixels and device pixel ratio. Updated on resize. */
|
|
456
|
-
declare const ViewportResource: _jamesyong42_reactive_ecs.ResourceType<{
|
|
457
|
-
width: number;
|
|
458
|
-
height: number;
|
|
459
|
-
dpr: number;
|
|
460
|
-
}>;
|
|
461
|
-
/** Minimum and maximum zoom levels. */
|
|
462
|
-
declare const ZoomConfigResource: _jamesyong42_reactive_ecs.ResourceType<{
|
|
463
|
-
min: number;
|
|
464
|
-
max: number;
|
|
465
|
-
}>;
|
|
466
|
-
/** Screen-space pixel thresholds for responsive breakpoints (micro/compact/normal/expanded/detailed). */
|
|
467
|
-
declare const BreakpointConfigResource: _jamesyong42_reactive_ecs.ResourceType<{
|
|
468
|
-
micro: number;
|
|
469
|
-
compact: number;
|
|
470
|
-
normal: number;
|
|
471
|
-
expanded: number;
|
|
472
|
-
}>;
|
|
473
|
-
/** Navigation stack for hierarchical container traversal. */
|
|
474
|
-
declare const NavigationStackResource: _jamesyong42_reactive_ecs.ResourceType<{
|
|
475
|
-
frames: NavigationFrame[];
|
|
476
|
-
changed: boolean;
|
|
477
|
-
}>;
|
|
478
|
-
/** Responsive breakpoint name derived from a widget's screen-space size. */
|
|
479
|
-
type Breakpoint = 'micro' | 'compact' | 'normal' | 'expanded' | 'detailed';
|
|
480
|
-
|
|
481
|
-
/**
|
|
482
|
-
* Snap guide computation for alignment during drag operations.
|
|
483
|
-
* Implements Figma-style snapping:
|
|
484
|
-
* 1. Edge/center alignment guides
|
|
485
|
-
* 2. Equal spacing snap + indicators
|
|
486
|
-
*/
|
|
487
|
-
interface SnapGuide {
|
|
488
|
-
/** Axis this guide aligns on */
|
|
489
|
-
axis: 'x' | 'y';
|
|
490
|
-
/** World-space coordinate of the alignment line */
|
|
491
|
-
position: number;
|
|
492
|
-
/** What kind of alignment */
|
|
493
|
-
type: 'edge' | 'center';
|
|
494
|
-
}
|
|
495
|
-
interface EqualSpacingIndicator {
|
|
496
|
-
/** Axis along which the equal gaps run */
|
|
497
|
-
axis: 'x' | 'y';
|
|
498
|
-
/** The equal gap value (world units) */
|
|
499
|
-
gap: number;
|
|
500
|
-
/** Pairs of (from, to) marking each equal gap segment */
|
|
501
|
-
segments: {
|
|
502
|
-
from: number;
|
|
503
|
-
to: number;
|
|
504
|
-
}[];
|
|
505
|
-
/** Position on the perpendicular axis (for rendering) */
|
|
506
|
-
perpPosition: number;
|
|
507
|
-
}
|
|
508
|
-
interface SnapResult {
|
|
509
|
-
/** Snap-corrected delta (world units). Apply to entity position. */
|
|
510
|
-
snapDx: number;
|
|
511
|
-
snapDy: number;
|
|
512
|
-
/** Active alignment guide lines to render */
|
|
513
|
-
guides: SnapGuide[];
|
|
514
|
-
/** Equal spacing indicators */
|
|
515
|
-
spacings: EqualSpacingIndicator[];
|
|
516
|
-
}
|
|
517
|
-
interface EntityBounds {
|
|
518
|
-
x: number;
|
|
519
|
-
y: number;
|
|
520
|
-
width: number;
|
|
521
|
-
height: number;
|
|
522
|
-
}
|
|
523
|
-
/**
|
|
524
|
-
* Compute snap guides for a dragged entity against reference entities.
|
|
525
|
-
*/
|
|
526
|
-
declare function computeSnapGuides(dragged: EntityBounds, references: EntityBounds[], threshold: number): SnapResult;
|
|
527
|
-
|
|
528
|
-
interface Vec2 {
|
|
529
|
-
x: number;
|
|
530
|
-
y: number;
|
|
531
|
-
}
|
|
532
|
-
interface Rect {
|
|
533
|
-
x: number;
|
|
534
|
-
y: number;
|
|
535
|
-
width: number;
|
|
536
|
-
height: number;
|
|
537
|
-
}
|
|
538
|
-
interface AABB {
|
|
539
|
-
minX: number;
|
|
540
|
-
minY: number;
|
|
541
|
-
maxX: number;
|
|
542
|
-
maxY: number;
|
|
543
|
-
}
|
|
544
|
-
/** Convert WorldBounds-shaped data to AABB */
|
|
545
|
-
declare function worldBoundsToAABB(wb: {
|
|
546
|
-
worldX: number;
|
|
547
|
-
worldY: number;
|
|
548
|
-
worldWidth: number;
|
|
549
|
-
worldHeight: number;
|
|
550
|
-
}): AABB;
|
|
551
|
-
/** Test if two AABBs overlap */
|
|
552
|
-
declare function intersectsAABB(a: AABB, b: AABB): boolean;
|
|
553
|
-
/** Test if a point is inside an AABB */
|
|
554
|
-
declare function pointInAABB(px: number, py: number, a: AABB): boolean;
|
|
555
|
-
/** Convert screen coordinates to world coordinates */
|
|
556
|
-
declare function screenToWorld(screenX: number, screenY: number, camera: {
|
|
557
|
-
x: number;
|
|
558
|
-
y: number;
|
|
559
|
-
zoom: number;
|
|
560
|
-
}): Vec2;
|
|
561
|
-
/** Convert world coordinates to screen coordinates */
|
|
562
|
-
declare function worldToScreen(worldX: number, worldY: number, camera: {
|
|
563
|
-
x: number;
|
|
564
|
-
y: number;
|
|
565
|
-
zoom: number;
|
|
566
|
-
}): Vec2;
|
|
567
|
-
/** Clamp a value between min and max */
|
|
568
|
-
declare function clamp(value: number, min: number, max: number): number;
|
|
569
|
-
|
|
570
|
-
interface SpatialEntry extends AABB {
|
|
571
|
-
entityId: EntityId;
|
|
572
|
-
}
|
|
573
|
-
/**
|
|
574
|
-
* Spatial index backed by an R-tree (rbush).
|
|
575
|
-
* Stores world-space AABBs for fast viewport culling and hit testing.
|
|
576
|
-
*/
|
|
577
|
-
declare class SpatialIndex {
|
|
578
|
-
private tree;
|
|
579
|
-
private entries;
|
|
580
|
-
upsert(entityId: EntityId, bounds: AABB): void;
|
|
581
|
-
remove(entityId: EntityId): void;
|
|
582
|
-
/** Query all entries intersecting the given AABB */
|
|
583
|
-
search(bounds: AABB): SpatialEntry[];
|
|
584
|
-
/** Find the topmost entity at a point (by z-order — caller sorts) */
|
|
585
|
-
searchPoint(x: number, y: number, tolerance?: number): SpatialEntry[];
|
|
586
|
-
clear(): void;
|
|
587
|
-
get size(): number;
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
/** ECS resource holding the SpatialIndex instance for viewport culling and hit testing. */
|
|
591
|
-
declare const SpatialIndexResource: _jamesyong42_reactive_ecs.ResourceType<{
|
|
592
|
-
instance: SpatialIndex | null;
|
|
593
|
-
}>;
|
|
594
|
-
/** Directive returned by pointer handlers indicating how the canvas should handle capture. */
|
|
595
|
-
type PointerDirective = {
|
|
596
|
-
action: 'passthrough';
|
|
597
|
-
} | {
|
|
598
|
-
action: 'passthrough-track-drag';
|
|
599
|
-
} | {
|
|
600
|
-
action: 'capture-drag';
|
|
601
|
-
} | {
|
|
602
|
-
action: 'capture-resize';
|
|
603
|
-
handle: ResizeHandlePos;
|
|
604
|
-
} | {
|
|
605
|
-
action: 'capture-marquee';
|
|
606
|
-
};
|
|
607
|
-
|
|
608
|
-
/** Keyboard modifier state captured alongside pointer events. */
|
|
609
|
-
interface Modifiers {
|
|
610
|
-
shift: boolean;
|
|
611
|
-
ctrl: boolean;
|
|
612
|
-
alt: boolean;
|
|
613
|
-
meta: boolean;
|
|
614
|
-
}
|
|
615
|
-
/** A visible entity with its computed world-space bounds and display metadata. */
|
|
616
|
-
interface VisibleEntity {
|
|
617
|
-
entityId: EntityId;
|
|
618
|
-
worldX: number;
|
|
619
|
-
worldY: number;
|
|
620
|
-
worldWidth: number;
|
|
621
|
-
worldHeight: number;
|
|
622
|
-
breakpoint: Breakpoint;
|
|
623
|
-
zIndex: number;
|
|
624
|
-
surface: string;
|
|
625
|
-
widgetType: string;
|
|
626
|
-
}
|
|
627
|
-
/** Per-frame change flags indicating what changed during the last tick. */
|
|
628
|
-
interface FrameChanges {
|
|
629
|
-
/** Entities whose world-space position or size changed. */
|
|
630
|
-
positionsChanged: EntityId[];
|
|
631
|
-
/** Entities whose responsive breakpoint changed. */
|
|
632
|
-
breakpointsChanged: EntityId[];
|
|
633
|
-
/** Entities that entered the visible viewport. */
|
|
634
|
-
entered: EntityId[];
|
|
635
|
-
/** Entities that exited the visible viewport. */
|
|
636
|
-
exited: EntityId[];
|
|
637
|
-
/** Whether the camera position or zoom changed. */
|
|
638
|
-
cameraChanged: boolean;
|
|
639
|
-
/** Whether the navigation stack changed (entered/exited container). */
|
|
640
|
-
navigationChanged: boolean;
|
|
641
|
-
/** Whether the selection set changed. */
|
|
642
|
-
selectionChanged: boolean;
|
|
643
|
-
}
|
|
644
|
-
/** Configuration options for `createLayoutEngine()`. */
|
|
645
|
-
interface LayoutEngineConfig {
|
|
646
|
-
/** Maximum entity count (default: 10000). */
|
|
647
|
-
maxEntities?: number;
|
|
648
|
-
/** Minimum and maximum zoom levels. */
|
|
649
|
-
zoom?: {
|
|
650
|
-
min: number;
|
|
651
|
-
max: number;
|
|
652
|
-
};
|
|
653
|
-
/** Screen-space pixel thresholds for responsive breakpoints. */
|
|
654
|
-
breakpoints?: {
|
|
655
|
-
micro: number;
|
|
656
|
-
compact: number;
|
|
657
|
-
normal: number;
|
|
658
|
-
expanded: number;
|
|
659
|
-
};
|
|
660
|
-
/** Snap alignment configuration. */
|
|
661
|
-
snap?: {
|
|
662
|
-
/** Whether snapping is enabled initially. */
|
|
663
|
-
enabled?: boolean;
|
|
664
|
-
/** Snap distance threshold in screen pixels. */
|
|
665
|
-
threshold?: number;
|
|
666
|
-
};
|
|
667
|
-
/** Widget definitions available to `spawn()`. */
|
|
668
|
-
widgets?: Widget[];
|
|
669
|
-
/** Archetype definitions available to `spawn()`. */
|
|
670
|
-
archetypes?: Archetype[];
|
|
671
|
-
}
|
|
672
|
-
/**
|
|
673
|
-
* The core layout engine. Manages the ECS world, camera, input, undo/redo,
|
|
674
|
-
* spatial indexing, and frame lifecycle for an infinite canvas.
|
|
675
|
-
*/
|
|
676
|
-
interface LayoutEngine {
|
|
677
|
-
/** The underlying ECS world. Use for direct component/tag/resource access. */
|
|
678
|
-
readonly world: World;
|
|
679
|
-
/** Creates a bare entity with optional initial components/tags. Low-level escape hatch. */
|
|
680
|
-
createEntity(inits?: ComponentInit[]): EntityId;
|
|
681
|
-
/**
|
|
682
|
-
* Spawns a new entity from a registered archetype or widget type.
|
|
683
|
-
* If `id` matches a registered archetype, that archetype is used.
|
|
684
|
-
* Otherwise, if `id` matches a registered widget, a default archetype is synthesized.
|
|
685
|
-
* Otherwise, a bare default archetype with type=`id` is used (useful in tests).
|
|
686
|
-
*/
|
|
687
|
-
spawn(id: string, opts?: SpawnOptions): EntityId;
|
|
688
|
-
/** Removes an entity and cleans up all components, tags, and spatial index entries. */
|
|
689
|
-
destroyEntity(id: EntityId): void;
|
|
690
|
-
/** Registers a widget definition. Auto-creates a matching default archetype if none exists. */
|
|
691
|
-
registerWidget(widget: Widget): void;
|
|
692
|
-
/** Returns a registered widget by type, or null. */
|
|
693
|
-
getWidget(type: string): Widget | null;
|
|
694
|
-
/** Returns all registered widgets. */
|
|
695
|
-
getWidgets(): Widget[];
|
|
696
|
-
/** Registers a custom archetype. */
|
|
697
|
-
registerArchetype(archetype: Archetype): void;
|
|
698
|
-
/** Returns a registered archetype by id, or null. */
|
|
699
|
-
getArchetype(id: string): Archetype | null;
|
|
700
|
-
/** Reads a component from an entity. Returns undefined if not present. */
|
|
701
|
-
get<T>(entity: EntityId, type: ComponentType<T>): T | undefined;
|
|
702
|
-
/** Updates a component on an entity (partial merge). */
|
|
703
|
-
set<T>(entity: EntityId, type: ComponentType<T>, data: Partial<T>): void;
|
|
704
|
-
/** Checks if an entity has a component or tag. */
|
|
705
|
-
has(entity: EntityId, type: ComponentType | TagType): boolean;
|
|
706
|
-
/** Registers a custom ECS system to run each tick. */
|
|
707
|
-
registerSystem(system: SystemDef): void;
|
|
708
|
-
/** Removes a registered system by name. */
|
|
709
|
-
removeSystem(name: string): void;
|
|
710
|
-
/** Returns the current camera state {x, y, zoom}. */
|
|
711
|
-
getCamera(): {
|
|
712
|
-
x: number;
|
|
713
|
-
y: number;
|
|
714
|
-
zoom: number;
|
|
715
|
-
};
|
|
716
|
-
/** Moves the camera by the specified screen-space delta. */
|
|
717
|
-
panBy(dx: number, dy: number): void;
|
|
718
|
-
/** Moves the camera to the specified world coordinates. */
|
|
719
|
-
panTo(worldX: number, worldY: number): void;
|
|
720
|
-
/** Adjusts zoom level anchored at a screen point. Delta is a multiplier offset. */
|
|
721
|
-
zoomAtPoint(screenX: number, screenY: number, delta: number): void;
|
|
722
|
-
/** Sets the zoom level directly. */
|
|
723
|
-
zoomTo(zoom: number): void;
|
|
724
|
-
/** Adjusts camera to fit all entities (or specified entities) in the viewport. */
|
|
725
|
-
zoomToFit(entityIds?: EntityId[], padding?: number): void;
|
|
726
|
-
/** Updates the viewport dimensions. Called automatically by InfiniteCanvas on resize. */
|
|
727
|
-
setViewport(width: number, height: number, dpr?: number): void;
|
|
728
|
-
/** Pointer-down handler. Returns a directive for how the canvas should capture the pointer. */
|
|
729
|
-
handlePointerDown(screenX: number, screenY: number, button: number, modifiers: Modifiers): PointerDirective;
|
|
730
|
-
/** Pointer-move handler. Returns a directive reflecting the current interaction. */
|
|
731
|
-
handlePointerMove(screenX: number, screenY: number, modifiers: Modifiers): PointerDirective;
|
|
732
|
-
/** Pointer-up handler. Commits drags/resizes and returns a directive. */
|
|
733
|
-
handlePointerUp(): PointerDirective;
|
|
734
|
-
/** Cancels the current pointer interaction without committing changes. */
|
|
735
|
-
handlePointerCancel(): void;
|
|
736
|
-
/** Returns IDs of all currently selected entities. */
|
|
737
|
-
getSelectedEntities(): EntityId[];
|
|
738
|
-
/** Returns the entity currently under the pointer, or null. */
|
|
739
|
-
getHoveredEntity(): EntityId | null;
|
|
740
|
-
/** Navigates into a container entity, pushing the current camera onto the navigation stack. */
|
|
741
|
-
enterContainer(entity: EntityId): void;
|
|
742
|
-
/** Navigates out of the current container, restoring the previous camera state. */
|
|
743
|
-
exitContainer(): void;
|
|
744
|
-
/** Returns the entity ID of the currently active container, or null if at root. */
|
|
745
|
-
getActiveContainer(): EntityId | null;
|
|
746
|
-
/** Returns the current navigation depth (0 = root). */
|
|
747
|
-
getNavigationDepth(): number;
|
|
748
|
-
/** Executes a command and pushes it onto the undo stack. */
|
|
749
|
-
execute(command: Command): void;
|
|
750
|
-
/** Begins a command group -- subsequent commands are bundled into one undo step. */
|
|
751
|
-
beginCommandGroup(): void;
|
|
752
|
-
/** Ends the current command group. */
|
|
753
|
-
endCommandGroup(): void;
|
|
754
|
-
/** Undoes the last command or command group. Returns true if anything was undone. */
|
|
755
|
-
undo(): boolean;
|
|
756
|
-
/** Redoes the last undone command. Returns true if anything was redone. */
|
|
757
|
-
redo(): boolean;
|
|
758
|
-
/** Returns whether there is a command to undo. */
|
|
759
|
-
canUndo(): boolean;
|
|
760
|
-
/** Returns whether there is a command to redo. */
|
|
761
|
-
canRedo(): boolean;
|
|
762
|
-
/** Schedules a tick on the next animation frame. Call after programmatic changes. */
|
|
763
|
-
markDirty(): void;
|
|
764
|
-
/** Runs one frame: executes all ECS systems, updates spatial index, emits frame events. */
|
|
765
|
-
tick(): void;
|
|
766
|
-
/** Ticks only if dirty. Returns true if a tick was performed. */
|
|
767
|
-
flushIfDirty(): boolean;
|
|
768
|
-
/** Returns visible entities with their world-space bounds, breakpoint, and surface info. */
|
|
769
|
-
getVisibleEntities(): VisibleEntity[];
|
|
770
|
-
/** Returns per-frame change flags from the last tick. */
|
|
771
|
-
getFrameChanges(): FrameChanges;
|
|
772
|
-
/** Returns the spatial index used for viewport culling and hit testing. */
|
|
773
|
-
getSpatialIndex(): SpatialIndex;
|
|
774
|
-
/** Returns active snap guide lines from the last tick. */
|
|
775
|
-
getSnapGuides(): SnapGuide[];
|
|
776
|
-
/** Returns equal-spacing indicators from the last tick. */
|
|
777
|
-
getEqualSpacing(): EqualSpacingIndicator[];
|
|
778
|
-
/** Enables or disables snap alignment. */
|
|
779
|
-
setSnapEnabled(on: boolean): void;
|
|
780
|
-
/** Sets the snap distance threshold in world pixels. */
|
|
781
|
-
setSnapThreshold(worldPx: number): void;
|
|
782
|
-
/** Performance profiler for measuring system execution times. */
|
|
783
|
-
readonly profiler: Profiler;
|
|
784
|
-
/** Registers a callback invoked after each tick. Returns an unsubscribe function. */
|
|
785
|
-
onFrame(handler: () => void): Unsubscribe;
|
|
786
|
-
/** Destroys the engine, releasing all resources and subscriptions. */
|
|
787
|
-
destroy(): void;
|
|
788
|
-
}
|
|
789
|
-
/**
|
|
790
|
-
* Creates a new LayoutEngine instance with the given configuration.
|
|
791
|
-
* This is the main entry point for the infinite canvas library.
|
|
792
|
-
*/
|
|
793
|
-
declare function createLayoutEngine(config?: LayoutEngineConfig): LayoutEngine;
|
|
794
|
-
|
|
795
|
-
declare const EngineProvider: react.Provider<LayoutEngine | null>;
|
|
796
|
-
declare const ContainerRefProvider: react.Provider<react.RefObject<HTMLDivElement | null> | null>;
|
|
797
|
-
declare function useContainerRef(): React.RefObject<HTMLDivElement | null> | null;
|
|
798
|
-
/**
|
|
799
|
-
* Returns the LayoutEngine instance from the nearest InfiniteCanvas context.
|
|
800
|
-
* Throws if used outside an InfiniteCanvas provider.
|
|
801
|
-
*/
|
|
802
|
-
declare function useLayoutEngine(): LayoutEngine;
|
|
803
|
-
|
|
804
|
-
/**
|
|
805
|
-
* Discriminated resolution of a widget by type. The surface determines which
|
|
806
|
-
* layer renders the component and with what prop shape.
|
|
807
|
-
*/
|
|
808
|
-
type ResolvedWidget = {
|
|
809
|
-
surface: 'dom';
|
|
810
|
-
component: React.ComponentType<DomWidgetProps>;
|
|
811
|
-
} | {
|
|
812
|
-
surface: 'webgl';
|
|
813
|
-
component: React.ComponentType<R3FWidgetProps>;
|
|
814
|
-
};
|
|
815
|
-
type WidgetResolver = (entityId: EntityId, widgetType: string) => ResolvedWidget | null;
|
|
816
|
-
declare const WidgetResolverProvider: react.Provider<WidgetResolver | null>;
|
|
817
|
-
declare function useWidgetResolver(): WidgetResolver | null;
|
|
818
|
-
|
|
819
|
-
interface GridConfig {
|
|
820
|
-
/** World-unit spacings for up to 3 grid levels [fine, medium, coarse]. */
|
|
821
|
-
spacings: [number, number, number];
|
|
822
|
-
/** Dot RGB color as [r, g, b] in 0–1 range. */
|
|
823
|
-
dotColor: [number, number, number];
|
|
824
|
-
/** Base dot opacity multiplier (0–1). */
|
|
825
|
-
dotAlpha: number;
|
|
826
|
-
/** CSS-pixel range where a grid level fades in: [start, end]. */
|
|
827
|
-
fadeIn: [number, number];
|
|
828
|
-
/** CSS-pixel range where a grid level fades out: [start, end]. */
|
|
829
|
-
fadeOut: [number, number];
|
|
830
|
-
/** Dot radius range in CSS pixels [min, max]. Scaled by DPR internally. */
|
|
831
|
-
dotRadius: [number, number];
|
|
832
|
-
/** Per-level opacity weight: level i gets (base + i * step). */
|
|
833
|
-
levelWeight: [number, number];
|
|
834
|
-
}
|
|
835
|
-
declare const DEFAULT_GRID_CONFIG: GridConfig;
|
|
836
|
-
declare class GridRenderer {
|
|
837
|
-
private renderer;
|
|
838
|
-
private scene;
|
|
839
|
-
private camera;
|
|
840
|
-
private material;
|
|
841
|
-
private mesh;
|
|
842
|
-
constructor(canvas: HTMLCanvasElement);
|
|
843
|
-
/** Apply a (partial) grid config. Only provided fields are updated. */
|
|
844
|
-
setConfig(config: Partial<GridConfig>): void;
|
|
845
|
-
setSize(width: number, height: number, dpr?: number): void;
|
|
846
|
-
render(cameraX: number, cameraY: number, zoom: number): void;
|
|
847
|
-
dispose(): void;
|
|
848
|
-
/** Expose for future WebGL widget rendering */
|
|
849
|
-
getWebGLRenderer(): THREE.WebGLRenderer;
|
|
850
|
-
}
|
|
851
|
-
|
|
852
|
-
interface SelectionConfig {
|
|
853
|
-
/** Selection outline color [r,g,b] 0-1. Default: Figma blue. */
|
|
854
|
-
outlineColor: [number, number, number];
|
|
855
|
-
/** Selection outline width in screen px. */
|
|
856
|
-
outlineWidth: number;
|
|
857
|
-
/** Hover outline color [r,g,b] 0-1. */
|
|
858
|
-
hoverColor: [number, number, number];
|
|
859
|
-
/** Hover outline width in screen px. */
|
|
860
|
-
hoverWidth: number;
|
|
861
|
-
/** Handle size in screen px. */
|
|
862
|
-
handleSize: number;
|
|
863
|
-
/** Handle fill color [r,g,b] 0-1 (white). */
|
|
864
|
-
handleFill: [number, number, number];
|
|
865
|
-
/** Handle border color [r,g,b] 0-1 (same as outline). */
|
|
866
|
-
handleBorder: [number, number, number];
|
|
867
|
-
/** Handle border width in screen px. */
|
|
868
|
-
handleBorderWidth: number;
|
|
869
|
-
/** Group bbox dash length in screen px (0 = solid). */
|
|
870
|
-
groupDash: number;
|
|
871
|
-
}
|
|
872
|
-
declare const DEFAULT_SELECTION_CONFIG: SelectionConfig;
|
|
873
|
-
interface SelectionBounds {
|
|
874
|
-
x: number;
|
|
875
|
-
y: number;
|
|
876
|
-
width: number;
|
|
877
|
-
height: number;
|
|
878
|
-
}
|
|
879
|
-
declare class SelectionRenderer {
|
|
880
|
-
private material;
|
|
881
|
-
private mesh;
|
|
882
|
-
private scene;
|
|
883
|
-
private camera;
|
|
884
|
-
constructor();
|
|
885
|
-
setConfig(config: Partial<SelectionConfig>): void;
|
|
886
|
-
setSize(resolution: THREE.Vector2, dpr: number): void;
|
|
887
|
-
render(renderer: THREE.WebGLRenderer, cameraX: number, cameraY: number, zoom: number, selected: SelectionBounds[], hovered: SelectionBounds | null, guides?: SnapGuide[], spacings?: EqualSpacingIndicator[]): void;
|
|
888
|
-
dispose(): void;
|
|
889
|
-
}
|
|
890
|
-
|
|
891
|
-
export { type R3FWidget as $, type AABB as A, type Breakpoint as B, ContainerRefProvider as C, DEFAULT_GRID_CONFIG as D, EngineProvider as E, type FrameSample as F, GridRenderer as G, type EqualSpacingIndicator as H, type FrameChanges as I, HandleSet as J, type HandleSetData as K, type LayoutEngine as L, Hitbox as M, type NavigationFrame as N, InteractionRole as O, Profiler as P, type InteractionRoleData as Q, type ResolvedWidget as R, SelectionRenderer as S, type InteractionRoleType as T, type LayoutEngineConfig as U, Locked as V, type Modifiers as W, MoveCommand as X, NavigationStackResource as Y, Parent as Z, type PointerDirective as _, type R3FWidgetProps as a, type Rect as a0, Resizable as a1, ResizeCommand as a2, type ResizeHandlePos as a3, Selectable as a4, Selected as a5, type SelectionBounds as a6, SetComponentCommand as a7, type SnapGuide as a8, type SnapResult as a9, useLayoutEngine as aA, useWidgetResolver as aB, worldBoundsToAABB as aC, worldToScreen as aD, type SpawnOptions as aa, StandardSchemaV1 as ab, Transform2D as ac, type Vec2 as ad, ViewportResource as ae, Visible as af, type VisibleEntity as ag, Widget$1 as ah, WidgetBreakpoint as ai, WidgetData as aj, type Widget as ak, type WidgetRegistry as al, WidgetResolverProvider as am, type WidgetSurface as an, WorldBounds as ao, ZIndex as ap, ZoomConfigResource as aq, clamp as ar, createArchetypeRegistry as as, createLayoutEngine as at, createWidgetRegistry as au, intersectsAABB as av, isR3FWidget as aw, pointInAABB as ax, screenToWorld as ay, useContainerRef as az, type ProfilerStats as b, SpatialIndex as c, SpatialIndexResource as d, computeSnapGuides as e, type GridConfig as f, type SelectionConfig as g, Active as h, type Archetype as i, type ArchetypeRegistry as j, BreakpointConfigResource as k, type CSSCursor as l, CameraResource as m, Children as n, type Command as o, CommandBuffer as p, Container as q, CursorHint as r, type CursorHintData as s, CursorResource as t, type CursorResourceData as u, DEFAULT_SELECTION_CONFIG as v, type DomWidget as w, type DomWidgetProps as x, Draggable as y, type EntityBounds as z };
|