@zylem/editor 0.7.4 → 0.8.8
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/LICENSE +1 -1
- package/README.md +92 -0
- package/dist/zylem-editor.d.ts +339 -339
- package/dist/zylem-editor.js +59 -5911
- package/package.json +46 -10
- package/dist/zylem-editor.js.map +0 -1
package/dist/zylem-editor.d.ts
CHANGED
|
@@ -1,112 +1,58 @@
|
|
|
1
|
-
import { Component } from 'solid-js';
|
|
2
|
-
import { LucideProps } from 'lucide-solid';
|
|
3
1
|
import * as _zylem_bridge from '@zylem/bridge';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* Editor Event Bus
|
|
8
|
-
*
|
|
9
|
-
* Wraps the shared zylemEventBus to provide backward-compatible API
|
|
10
|
-
* for the editor package. This allows external code to dispatch state
|
|
11
|
-
* updates to the editor using the familiar editorEvents API.
|
|
12
|
-
*/
|
|
2
|
+
import { BridgePose, BridgeVec3, BridgeQuat, SnapSettingsPayload, BridgeDebugTool, SceneOperationPayload, EntityTypeDescriptor } from '@zylem/bridge';
|
|
3
|
+
import { LucideProps } from 'lucide-solid';
|
|
4
|
+
import { Component } from 'solid-js';
|
|
13
5
|
|
|
14
|
-
|
|
15
|
-
interface EditorEvent<T = unknown> {
|
|
16
|
-
type: EditorEventType;
|
|
17
|
-
payload: T;
|
|
18
|
-
}
|
|
19
|
-
type EventHandler<T = unknown> = (event: EditorEvent<T>) => void;
|
|
20
|
-
/**
|
|
21
|
-
* Backward-compatible wrapper around zylemEventBus.
|
|
22
|
-
* Maintains the existing editorEvents.emit({ type, payload }) API
|
|
23
|
-
* while internally using the shared Mitt-based event bus.
|
|
24
|
-
*/
|
|
25
|
-
declare class EditorEventBusWrapper {
|
|
26
|
-
private legacyListeners;
|
|
27
|
-
/**
|
|
28
|
-
* Emit an event to all registered listeners of that type.
|
|
29
|
-
* Also emits to the global zylemEventBus for cross-package communication.
|
|
30
|
-
*/
|
|
31
|
-
emit<T>(event: EditorEvent<T>): void;
|
|
32
|
-
/**
|
|
33
|
-
* Subscribe to events of a specific type.
|
|
34
|
-
* Returns an unsubscribe function.
|
|
35
|
-
*/
|
|
36
|
-
on<T>(type: EditorEventType, handler: EventHandler<T>): () => void;
|
|
37
|
-
/**
|
|
38
|
-
* Remove all listeners (useful for cleanup).
|
|
39
|
-
*/
|
|
40
|
-
clear(): void;
|
|
41
|
-
}
|
|
6
|
+
declare const channel: _zylem_bridge.BridgeChannel;
|
|
42
7
|
/**
|
|
43
|
-
*
|
|
8
|
+
* Subscribe the editor stores to game→editor bridge messages and hydrate
|
|
9
|
+
* from the channel's retained state.
|
|
44
10
|
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
* ```
|
|
11
|
+
* Reference-counted: the game gates expensive editor-only work (thumbnails,
|
|
12
|
+
* entity summaries) on these subscriptions existing, so the last editor to
|
|
13
|
+
* unmount must actually release them, while any editor still mounted must
|
|
14
|
+
* keep them alive.
|
|
50
15
|
*
|
|
51
|
-
*
|
|
52
|
-
* ```ts
|
|
53
|
-
* editorEvents.on('debug', (e) => setDebugState(e.payload));
|
|
54
|
-
* ```
|
|
55
|
-
*/
|
|
56
|
-
declare const editorEvents: EditorEventBusWrapper;
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* Entities state for the entities section.
|
|
60
|
-
* Manages debug state and entity selection/hover.
|
|
16
|
+
* @returns A release function; safe to call more than once.
|
|
61
17
|
*/
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
* should turn the thing you were last working on, rather than nothing. Never
|
|
78
|
-
* cleared on deselect — only overwritten — and validated against the current
|
|
79
|
-
* entity list at the point of use, since the entity it names can be deleted
|
|
80
|
-
* or undone away.
|
|
81
|
-
*/
|
|
82
|
-
lastTouchedEntityId: string | null;
|
|
83
|
-
flags: Set<string>;
|
|
84
|
-
}
|
|
85
|
-
declare const debugState: DebugState;
|
|
86
|
-
|
|
18
|
+
declare function connectEditorBridge(): () => void;
|
|
19
|
+
/** Tear down all bridge subscriptions, ignoring the reference count. */
|
|
20
|
+
declare function disconnectEditorBridge(): void;
|
|
21
|
+
/** Toggle the game's debug mode. */
|
|
22
|
+
declare function sendDebugEnabled(enabled: boolean): void;
|
|
23
|
+
/** Switch the active editor tool in the game. */
|
|
24
|
+
declare function sendTool(tool: BridgeDebugTool): void;
|
|
25
|
+
/** Pause or resume the game loop. */
|
|
26
|
+
declare function sendPlayback(paused: boolean): void;
|
|
27
|
+
/** Select an entity in the game (null clears the selection). */
|
|
28
|
+
declare function sendEntitySelect(uuid: string | null): void;
|
|
29
|
+
/** Focus/frame the game debug camera on an entity. */
|
|
30
|
+
declare function sendEntityFocus(uuid: string): void;
|
|
31
|
+
/** Write a stage variable in the running game. */
|
|
32
|
+
declare function sendStageVariable(key: string, value: unknown): void;
|
|
87
33
|
/**
|
|
88
|
-
*
|
|
89
|
-
*
|
|
34
|
+
* Set an entity's transform absolutely.
|
|
35
|
+
*
|
|
36
|
+
* `quaternion` is authoritative when supplied; `rotation` is Euler radians for
|
|
37
|
+
* the numeric fields, and round-trips less cleanly.
|
|
90
38
|
*/
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}
|
|
109
|
-
declare const gameState: GameState;
|
|
39
|
+
declare function sendEntityTransform(uuid: string, transform: {
|
|
40
|
+
position?: BridgeVec3;
|
|
41
|
+
rotation?: BridgeVec3;
|
|
42
|
+
quaternion?: BridgeQuat;
|
|
43
|
+
scale?: BridgeVec3;
|
|
44
|
+
}): void;
|
|
45
|
+
/** Arm the game's add tool with a catalog type, or `null` to disarm it. */
|
|
46
|
+
declare function sendAddType(typeId: string | null, props?: Record<string, unknown>): void;
|
|
47
|
+
/** Spawn a catalog entity without a placement click. */
|
|
48
|
+
declare function sendEntityCreate(typeId: string, options?: {
|
|
49
|
+
props?: Record<string, unknown>;
|
|
50
|
+
pose?: BridgePose;
|
|
51
|
+
}): void;
|
|
52
|
+
/** Push snap increments to the game's gizmo. */
|
|
53
|
+
declare function sendSnapSettings(snap: SnapSettingsPayload): void;
|
|
54
|
+
/** Show or hide the game's construction-plane grid. */
|
|
55
|
+
declare function sendGridVisible(visible: boolean): void;
|
|
110
56
|
|
|
111
57
|
/**
|
|
112
58
|
* Shared types for the editor store.
|
|
@@ -153,13 +99,6 @@ interface StageStateInterface {
|
|
|
153
99
|
entities: Partial<BaseEntityInterface>[];
|
|
154
100
|
}
|
|
155
101
|
|
|
156
|
-
/**
|
|
157
|
-
* Stage state for the stages section.
|
|
158
|
-
* Manages stage configuration and entity list.
|
|
159
|
-
*/
|
|
160
|
-
|
|
161
|
-
declare const stageState: StageStateInterface;
|
|
162
|
-
|
|
163
102
|
/**
|
|
164
103
|
* Dock layout geometry.
|
|
165
104
|
*
|
|
@@ -210,6 +149,59 @@ interface DockLayoutOptions {
|
|
|
210
149
|
*/
|
|
211
150
|
declare const computeDockLayout: (registry: DockRegistry, viewport: Viewport, options?: DockLayoutOptions) => Record<DockPanelId, DockRect>;
|
|
212
151
|
|
|
152
|
+
/**
|
|
153
|
+
* Entities state for the entities section.
|
|
154
|
+
* Manages debug state and entity selection/hover.
|
|
155
|
+
*/
|
|
156
|
+
type DebugTools = 'select' | 'translate' | 'rotate' | 'scale' | 'delete' | 'add' | 'none';
|
|
157
|
+
interface DebugState {
|
|
158
|
+
paused: boolean;
|
|
159
|
+
tool: DebugTools;
|
|
160
|
+
selectedEntityId: string | null;
|
|
161
|
+
/**
|
|
162
|
+
* Full selection, mirroring the game. `selectedEntityId` is its first entry,
|
|
163
|
+
* kept so single-select consumers need no change.
|
|
164
|
+
*/
|
|
165
|
+
selectedEntityIds: string[];
|
|
166
|
+
hoveredEntityId: string | null;
|
|
167
|
+
/**
|
|
168
|
+
* Most recently selected or created entity, kept after it is deselected.
|
|
169
|
+
*
|
|
170
|
+
* What the gizmo tools fall back to: pressing Rotate with nothing selected
|
|
171
|
+
* should turn the thing you were last working on, rather than nothing. Never
|
|
172
|
+
* cleared on deselect — only overwritten — and validated against the current
|
|
173
|
+
* entity list at the point of use, since the entity it names can be deleted
|
|
174
|
+
* or undone away.
|
|
175
|
+
*/
|
|
176
|
+
lastTouchedEntityId: string | null;
|
|
177
|
+
flags: Set<string>;
|
|
178
|
+
}
|
|
179
|
+
declare const debugState: DebugState;
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* Game state for the game section.
|
|
183
|
+
* Manages global game variables and state.
|
|
184
|
+
*/
|
|
185
|
+
/** Game config state from game-lib */
|
|
186
|
+
interface GameConfigState {
|
|
187
|
+
id: string;
|
|
188
|
+
aspectRatio: number;
|
|
189
|
+
fullscreen: boolean;
|
|
190
|
+
bodyBackground: string | undefined;
|
|
191
|
+
internalResolution: {
|
|
192
|
+
width: number;
|
|
193
|
+
height: number;
|
|
194
|
+
} | undefined;
|
|
195
|
+
debug: boolean;
|
|
196
|
+
}
|
|
197
|
+
interface GameState {
|
|
198
|
+
id: string;
|
|
199
|
+
globals: Record<string, unknown>;
|
|
200
|
+
time: number;
|
|
201
|
+
config: GameConfigState | null;
|
|
202
|
+
}
|
|
203
|
+
declare const gameState: GameState;
|
|
204
|
+
|
|
213
205
|
/** Registry id of the main editor panel; detached sections use their panel id. */
|
|
214
206
|
declare const MAIN_PANEL_ID = "main";
|
|
215
207
|
interface DetachedPanelState {
|
|
@@ -258,200 +250,69 @@ declare const dockPanelToSide: (panelId: DockPanelId, side: DockSide, index?: nu
|
|
|
258
250
|
declare const undockPanelFromSides: (panelId: DockPanelId) => void;
|
|
259
251
|
declare const getDockedSide: (panelId: DockPanelId) => DockSide | null;
|
|
260
252
|
|
|
261
|
-
type EditorLauncherMode = 'floating' | 'hidden';
|
|
262
|
-
|
|
263
253
|
/**
|
|
264
|
-
*
|
|
254
|
+
* Editor Event Bus
|
|
255
|
+
*
|
|
256
|
+
* Wraps the shared zylemEventBus to provide backward-compatible API
|
|
257
|
+
* for the editor package. This allows external code to dispatch state
|
|
258
|
+
* updates to the editor using the familiar editorEvents API.
|
|
265
259
|
*/
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
debugState?: any;
|
|
272
|
-
/**
|
|
273
|
-
* External game state to sync with.
|
|
274
|
-
*/
|
|
275
|
-
gameState?: any;
|
|
276
|
-
/**
|
|
277
|
-
* External stage state to sync with.
|
|
278
|
-
*/
|
|
279
|
-
stageState?: any;
|
|
280
|
-
/**
|
|
281
|
-
* Whether to include default styles.
|
|
282
|
-
* @default true
|
|
283
|
-
*/
|
|
284
|
-
includeStyles?: boolean;
|
|
285
|
-
/**
|
|
286
|
-
* Controls whether the internal floating launcher is rendered.
|
|
287
|
-
* @default 'floating'
|
|
288
|
-
*/
|
|
289
|
-
launcherMode?: EditorLauncherMode;
|
|
290
|
-
/**
|
|
291
|
-
* Dock layout to seed the first time the editor runs in this browser, keyed
|
|
292
|
-
* by viewport edge. Use `'main'` for the editor panel itself; any other id is
|
|
293
|
-
* a section (for example `'console'`), which gets detached from the accordion
|
|
294
|
-
* so it can hold a dock slot.
|
|
295
|
-
*
|
|
296
|
-
* Ignored once the user has a saved layout, so it sets a starting point
|
|
297
|
-
* rather than forcing one.
|
|
298
|
-
*/
|
|
299
|
-
defaultDocks?: EditorDockDefaults;
|
|
300
|
-
/**
|
|
301
|
-
* Whether the editor claims cmd/ctrl+z for its own undo stack.
|
|
302
|
-
*
|
|
303
|
-
* Disable it when embedding the editor in an app with its own history, and
|
|
304
|
-
* call the exported `undo()` / `redo()` from that app's handler instead.
|
|
305
|
-
* @default true
|
|
306
|
-
*/
|
|
307
|
-
enableUndoShortcut?: boolean;
|
|
308
|
-
/**
|
|
309
|
-
* Whether Escape disarms the active tool.
|
|
310
|
-
* @default true
|
|
311
|
-
*/
|
|
312
|
-
enableEscapeShortcut?: boolean;
|
|
260
|
+
|
|
261
|
+
type EditorEventType = 'debug' | 'game' | 'stage' | 'entities';
|
|
262
|
+
interface EditorEvent<T = unknown> {
|
|
263
|
+
type: EditorEventType;
|
|
264
|
+
payload: T;
|
|
313
265
|
}
|
|
266
|
+
type EventHandler<T = unknown> = (event: EditorEvent<T>) => void;
|
|
314
267
|
/**
|
|
315
|
-
*
|
|
316
|
-
*
|
|
317
|
-
*
|
|
318
|
-
* It can be imported and used in any project without additional CSS configuration.
|
|
319
|
-
*
|
|
320
|
-
* @example
|
|
321
|
-
* ```html
|
|
322
|
-
* <!-- Standalone usage -->
|
|
323
|
-
* <zylem-editor></zylem-editor>
|
|
324
|
-
* ```
|
|
325
|
-
*
|
|
326
|
-
* @example
|
|
327
|
-
* ```js
|
|
328
|
-
* // Configured usage
|
|
329
|
-
* const editor = document.querySelector('zylem-editor');
|
|
330
|
-
* editor.config = {
|
|
331
|
-
* debugState: myGame.debugState,
|
|
332
|
-
* gameState: myGame.gameState,
|
|
333
|
-
* stageState: myGame.stageState,
|
|
334
|
-
* };
|
|
335
|
-
* ```
|
|
336
|
-
*
|
|
337
|
-
* @example
|
|
338
|
-
* ```js
|
|
339
|
-
* // Manual registration in another project
|
|
340
|
-
* import { ZylemEditorElement } from '@zylem/editor';
|
|
341
|
-
*
|
|
342
|
-
* // Optionally customize before registering
|
|
343
|
-
* customElements.define('my-editor', ZylemEditorElement);
|
|
344
|
-
* ```
|
|
268
|
+
* Backward-compatible wrapper around zylemEventBus.
|
|
269
|
+
* Maintains the existing editorEvents.emit({ type, payload }) API
|
|
270
|
+
* while internally using the shared Mitt-based event bus.
|
|
345
271
|
*/
|
|
346
|
-
declare class
|
|
347
|
-
private
|
|
348
|
-
private _config;
|
|
349
|
-
private _initialized;
|
|
350
|
-
private controller;
|
|
351
|
-
/** Releases this element's bridge subscription (reference-counted). */
|
|
352
|
-
private releaseBridge;
|
|
353
|
-
/** Keyboard shortcuts and the snap/grid mirror, torn down with the element. */
|
|
354
|
-
private teardownHooks;
|
|
355
|
-
constructor();
|
|
356
|
-
/**
|
|
357
|
-
* Set configuration for the editor.
|
|
358
|
-
* Must be set before the element is connected to the DOM, or call `reinitialize()` after.
|
|
359
|
-
*/
|
|
360
|
-
set config(value: ZylemEditorConfig);
|
|
361
|
-
get config(): ZylemEditorConfig;
|
|
362
|
-
set launcherMode(value: EditorLauncherMode);
|
|
363
|
-
get launcherMode(): EditorLauncherMode;
|
|
272
|
+
declare class EditorEventBusWrapper {
|
|
273
|
+
private legacyListeners;
|
|
364
274
|
/**
|
|
365
|
-
*
|
|
275
|
+
* Emit an event to all registered listeners of that type.
|
|
276
|
+
* Also emits to the global zylemEventBus for cross-package communication.
|
|
366
277
|
*/
|
|
367
|
-
|
|
368
|
-
attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
|
|
369
|
-
connectedCallback(): void;
|
|
370
|
-
private initialize;
|
|
371
|
-
openPanel(): void;
|
|
372
|
-
closePanel(): void;
|
|
373
|
-
togglePanel(): void;
|
|
278
|
+
emit<T>(event: EditorEvent<T>): void;
|
|
374
279
|
/**
|
|
375
|
-
*
|
|
376
|
-
*
|
|
280
|
+
* Subscribe to events of a specific type.
|
|
281
|
+
* Returns an unsubscribe function.
|
|
377
282
|
*/
|
|
378
|
-
|
|
283
|
+
on<T>(type: EditorEventType, handler: EventHandler<T>): () => void;
|
|
379
284
|
/**
|
|
380
|
-
*
|
|
381
|
-
* Call this after changing the `config` property if the element is already connected.
|
|
285
|
+
* Remove all listeners (useful for cleanup).
|
|
382
286
|
*/
|
|
383
|
-
|
|
384
|
-
disconnectedCallback(): void;
|
|
385
|
-
private teardown;
|
|
287
|
+
clear(): void;
|
|
386
288
|
}
|
|
387
289
|
/**
|
|
388
|
-
*
|
|
389
|
-
* Call this function to use the default 'zylem-editor' tag name.
|
|
290
|
+
* Global editor event bus instance.
|
|
390
291
|
*
|
|
391
|
-
*
|
|
392
|
-
* ```
|
|
393
|
-
* import {
|
|
394
|
-
*
|
|
395
|
-
* // Now you can use <zylem-editor> in your HTML
|
|
292
|
+
* Usage from game-lib:
|
|
293
|
+
* ```ts
|
|
294
|
+
* import { editorEvents } from '@zylem/editor';
|
|
295
|
+
* editorEvents.emit({ type: 'debug', payload: { enabled: true } });
|
|
396
296
|
* ```
|
|
397
|
-
*/
|
|
398
|
-
declare function registerZylemEditor(tagName?: string): void;
|
|
399
|
-
|
|
400
|
-
interface IconProps extends LucideProps {
|
|
401
|
-
icon: Component<LucideProps>;
|
|
402
|
-
}
|
|
403
|
-
declare const Icon: Component<IconProps>;
|
|
404
|
-
|
|
405
|
-
declare const channel: _zylem_bridge.BridgeChannel;
|
|
406
|
-
/**
|
|
407
|
-
* Subscribe the editor stores to game→editor bridge messages and hydrate
|
|
408
|
-
* from the channel's retained state.
|
|
409
297
|
*
|
|
410
|
-
*
|
|
411
|
-
*
|
|
412
|
-
*
|
|
413
|
-
*
|
|
414
|
-
*
|
|
415
|
-
* @returns A release function; safe to call more than once.
|
|
298
|
+
* Usage from editor components:
|
|
299
|
+
* ```ts
|
|
300
|
+
* editorEvents.on('debug', (e) => setDebugState(e.payload));
|
|
301
|
+
* ```
|
|
416
302
|
*/
|
|
417
|
-
declare
|
|
418
|
-
|
|
419
|
-
declare function disconnectEditorBridge(): void;
|
|
420
|
-
/** Toggle the game's debug mode. */
|
|
421
|
-
declare function sendDebugEnabled(enabled: boolean): void;
|
|
422
|
-
/** Switch the active editor tool in the game. */
|
|
423
|
-
declare function sendTool(tool: BridgeDebugTool): void;
|
|
424
|
-
/** Pause or resume the game loop. */
|
|
425
|
-
declare function sendPlayback(paused: boolean): void;
|
|
426
|
-
/** Select an entity in the game (null clears the selection). */
|
|
427
|
-
declare function sendEntitySelect(uuid: string | null): void;
|
|
428
|
-
/** Focus/frame the game debug camera on an entity. */
|
|
429
|
-
declare function sendEntityFocus(uuid: string): void;
|
|
430
|
-
/** Write a stage variable in the running game. */
|
|
431
|
-
declare function sendStageVariable(key: string, value: unknown): void;
|
|
303
|
+
declare const editorEvents: EditorEventBusWrapper;
|
|
304
|
+
|
|
432
305
|
/**
|
|
433
|
-
*
|
|
434
|
-
*
|
|
435
|
-
* `quaternion` is authoritative when supplied; `rotation` is Euler radians for
|
|
436
|
-
* the numeric fields, and round-trips less cleanly.
|
|
306
|
+
* Stage state for the stages section.
|
|
307
|
+
* Manages stage configuration and entity list.
|
|
437
308
|
*/
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
declare function sendAddType(typeId: string | null, props?: Record<string, unknown>): void;
|
|
446
|
-
/** Spawn a catalog entity without a placement click. */
|
|
447
|
-
declare function sendEntityCreate(typeId: string, options?: {
|
|
448
|
-
props?: Record<string, unknown>;
|
|
449
|
-
pose?: BridgePose;
|
|
450
|
-
}): void;
|
|
451
|
-
/** Push snap increments to the game's gizmo. */
|
|
452
|
-
declare function sendSnapSettings(snap: SnapSettingsPayload): void;
|
|
453
|
-
/** Show or hide the game's construction-plane grid. */
|
|
454
|
-
declare function sendGridVisible(visible: boolean): void;
|
|
309
|
+
|
|
310
|
+
declare const stageState: StageStateInterface;
|
|
311
|
+
|
|
312
|
+
interface IconProps extends LucideProps {
|
|
313
|
+
icon: Component<LucideProps>;
|
|
314
|
+
}
|
|
315
|
+
declare const Icon: Component<IconProps>;
|
|
455
316
|
|
|
456
317
|
/**
|
|
457
318
|
* Undo/redo history for scene edits.
|
|
@@ -498,6 +359,56 @@ declare function redo(): boolean;
|
|
|
498
359
|
*/
|
|
499
360
|
declare function clearHistory(): void;
|
|
500
361
|
|
|
362
|
+
/**
|
|
363
|
+
* Stage export.
|
|
364
|
+
*
|
|
365
|
+
* Edits are runtime-only: moving a crate in the editor does not rewrite the
|
|
366
|
+
* source that created it. Export is the bridge between the two — it dumps the
|
|
367
|
+
* current stage as JSON so the values can be pasted back into the code that
|
|
368
|
+
* authored the scene. Source write-back is a later problem; this makes the work
|
|
369
|
+
* recoverable in the meantime.
|
|
370
|
+
*
|
|
371
|
+
* Built from the editor's own bridge state rather than `@zylem/game-lib/schema`,
|
|
372
|
+
* because the editor has no game-lib dependency at runtime and the entity
|
|
373
|
+
* blueprint schema stores 2D positions, which would drop the Z of every
|
|
374
|
+
* transform this feature exists to preserve.
|
|
375
|
+
*/
|
|
376
|
+
|
|
377
|
+
interface StageExportEntity {
|
|
378
|
+
uuid: string;
|
|
379
|
+
name?: string;
|
|
380
|
+
type?: string;
|
|
381
|
+
position?: Vector3Like;
|
|
382
|
+
/** Euler angles in radians, matching the game's own representation. */
|
|
383
|
+
rotation?: Vector3Like;
|
|
384
|
+
scale?: Vector3Like;
|
|
385
|
+
}
|
|
386
|
+
interface StageExport {
|
|
387
|
+
/** Bumped when the shape changes, so an old file is recognisable. */
|
|
388
|
+
version: 1;
|
|
389
|
+
exportedAt: string;
|
|
390
|
+
stage: {
|
|
391
|
+
id: string;
|
|
392
|
+
backgroundColor: string;
|
|
393
|
+
backgroundImage: string | null;
|
|
394
|
+
gravity: Vector3Like;
|
|
395
|
+
variables: Record<string, unknown>;
|
|
396
|
+
} | null;
|
|
397
|
+
entities: StageExportEntity[];
|
|
398
|
+
}
|
|
399
|
+
/** Snapshot the current stage as a plain, serializable object. */
|
|
400
|
+
declare function buildStageExport(): StageExport;
|
|
401
|
+
/** The export as formatted JSON. */
|
|
402
|
+
declare function stageExportToString(): string;
|
|
403
|
+
/**
|
|
404
|
+
* Copy the export to the clipboard.
|
|
405
|
+
*
|
|
406
|
+
* @returns The serialized stage when the copy succeeded, or `null` when the
|
|
407
|
+
* clipboard was unavailable — over plain HTTP, or without a user gesture, the
|
|
408
|
+
* API is either missing or rejects, and the caller falls back to the console.
|
|
409
|
+
*/
|
|
410
|
+
declare function copyStageExport(): Promise<string | null>;
|
|
411
|
+
|
|
501
412
|
/**
|
|
502
413
|
* The placeable entity types the game offers, and which one the Add tool is
|
|
503
414
|
* armed with.
|
|
@@ -572,73 +483,144 @@ declare function setSnapEnabled(enabled: boolean): void;
|
|
|
572
483
|
declare function setSnapIncrements(increments: Partial<Pick<TransformState, 'translate' | 'rotate' | 'scale'>>): void;
|
|
573
484
|
declare function setGridVisible(visible: boolean): void;
|
|
574
485
|
|
|
575
|
-
|
|
576
|
-
* Host observation of committed scene edits.
|
|
577
|
-
*
|
|
578
|
-
* Every edit the editor records is also announced here, so an embedding app can
|
|
579
|
-
* react to it — persisting a layout, marking a document dirty, or eventually
|
|
580
|
-
* writing changes back to source. Kept in its own module so `editor-bridge` does
|
|
581
|
-
* not have to import the host surface (which imports the bridge), which would be
|
|
582
|
-
* circular.
|
|
583
|
-
*/
|
|
486
|
+
type EditorLauncherMode = 'floating' | 'hidden';
|
|
584
487
|
|
|
585
|
-
type SceneOperationListener = (op: SceneOperationPayload) => void;
|
|
586
488
|
/**
|
|
587
|
-
*
|
|
588
|
-
*
|
|
589
|
-
* @returns An unsubscribe function.
|
|
489
|
+
* Configuration options for the ZylemEditorElement
|
|
590
490
|
*/
|
|
591
|
-
|
|
592
|
-
|
|
491
|
+
interface ZylemEditorConfig {
|
|
492
|
+
/**
|
|
493
|
+
* External debug state to sync with.
|
|
494
|
+
* If provided, the editor will use this state instead of its internal state.
|
|
495
|
+
*/
|
|
496
|
+
debugState?: any;
|
|
497
|
+
/**
|
|
498
|
+
* External game state to sync with.
|
|
499
|
+
*/
|
|
500
|
+
gameState?: any;
|
|
501
|
+
/**
|
|
502
|
+
* External stage state to sync with.
|
|
503
|
+
*/
|
|
504
|
+
stageState?: any;
|
|
505
|
+
/**
|
|
506
|
+
* Whether to include default styles.
|
|
507
|
+
* @default true
|
|
508
|
+
*/
|
|
509
|
+
includeStyles?: boolean;
|
|
510
|
+
/**
|
|
511
|
+
* Controls whether the internal floating launcher is rendered.
|
|
512
|
+
* @default 'floating'
|
|
513
|
+
*/
|
|
514
|
+
launcherMode?: EditorLauncherMode;
|
|
515
|
+
/**
|
|
516
|
+
* Dock layout to seed the first time the editor runs in this browser, keyed
|
|
517
|
+
* by viewport edge. Use `'main'` for the editor panel itself; any other id is
|
|
518
|
+
* a section (for example `'console'`), which gets detached from the accordion
|
|
519
|
+
* so it can hold a dock slot.
|
|
520
|
+
*
|
|
521
|
+
* Ignored once the user has a saved layout, so it sets a starting point
|
|
522
|
+
* rather than forcing one.
|
|
523
|
+
*/
|
|
524
|
+
defaultDocks?: EditorDockDefaults;
|
|
525
|
+
/**
|
|
526
|
+
* Whether the editor claims cmd/ctrl+z for its own undo stack.
|
|
527
|
+
*
|
|
528
|
+
* Disable it when embedding the editor in an app with its own history, and
|
|
529
|
+
* call the exported `undo()` / `redo()` from that app's handler instead.
|
|
530
|
+
* @default true
|
|
531
|
+
*/
|
|
532
|
+
enableUndoShortcut?: boolean;
|
|
533
|
+
/**
|
|
534
|
+
* Whether Escape disarms the active tool.
|
|
535
|
+
* @default true
|
|
536
|
+
*/
|
|
537
|
+
enableEscapeShortcut?: boolean;
|
|
538
|
+
}
|
|
593
539
|
/**
|
|
594
|
-
*
|
|
540
|
+
* ZylemEditorElement - A web component that wraps the Zylem Editor.
|
|
595
541
|
*
|
|
596
|
-
*
|
|
597
|
-
*
|
|
598
|
-
* current stage as JSON so the values can be pasted back into the code that
|
|
599
|
-
* authored the scene. Source write-back is a later problem; this makes the work
|
|
600
|
-
* recoverable in the meantime.
|
|
542
|
+
* This component is fully self-contained with bundled styles.
|
|
543
|
+
* It can be imported and used in any project without additional CSS configuration.
|
|
601
544
|
*
|
|
602
|
-
*
|
|
603
|
-
*
|
|
604
|
-
*
|
|
605
|
-
*
|
|
545
|
+
* @example
|
|
546
|
+
* ```html
|
|
547
|
+
* <!-- Standalone usage -->
|
|
548
|
+
* <zylem-editor></zylem-editor>
|
|
549
|
+
* ```
|
|
550
|
+
*
|
|
551
|
+
* @example
|
|
552
|
+
* ```js
|
|
553
|
+
* // Configured usage
|
|
554
|
+
* const editor = document.querySelector('zylem-editor');
|
|
555
|
+
* editor.config = {
|
|
556
|
+
* debugState: myGame.debugState,
|
|
557
|
+
* gameState: myGame.gameState,
|
|
558
|
+
* stageState: myGame.stageState,
|
|
559
|
+
* };
|
|
560
|
+
* ```
|
|
561
|
+
*
|
|
562
|
+
* @example
|
|
563
|
+
* ```js
|
|
564
|
+
* // Manual registration in another project
|
|
565
|
+
* import { ZylemEditorElement } from '@zylem/editor';
|
|
566
|
+
*
|
|
567
|
+
* // Optionally customize before registering
|
|
568
|
+
* customElements.define('my-editor', ZylemEditorElement);
|
|
569
|
+
* ```
|
|
606
570
|
*/
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
571
|
+
declare class ZylemEditorElement extends HTMLElement {
|
|
572
|
+
private dispose;
|
|
573
|
+
private _config;
|
|
574
|
+
private _initialized;
|
|
575
|
+
private controller;
|
|
576
|
+
/** Releases this element's bridge subscription (reference-counted). */
|
|
577
|
+
private releaseBridge;
|
|
578
|
+
/** Keyboard shortcuts and the snap/grid mirror, torn down with the element. */
|
|
579
|
+
private teardownHooks;
|
|
580
|
+
constructor();
|
|
581
|
+
/**
|
|
582
|
+
* Set configuration for the editor.
|
|
583
|
+
* Must be set before the element is connected to the DOM, or call `reinitialize()` after.
|
|
584
|
+
*/
|
|
585
|
+
set config(value: ZylemEditorConfig);
|
|
586
|
+
get config(): ZylemEditorConfig;
|
|
587
|
+
set launcherMode(value: EditorLauncherMode);
|
|
588
|
+
get launcherMode(): EditorLauncherMode;
|
|
589
|
+
/**
|
|
590
|
+
* Observed attributes for the web component
|
|
591
|
+
*/
|
|
592
|
+
static get observedAttributes(): string[];
|
|
593
|
+
attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
|
|
594
|
+
connectedCallback(): void;
|
|
595
|
+
private initialize;
|
|
596
|
+
openPanel(): void;
|
|
597
|
+
closePanel(): void;
|
|
598
|
+
togglePanel(): void;
|
|
599
|
+
/**
|
|
600
|
+
* Dock a panel to a viewport edge, or pass `null` to float it again.
|
|
601
|
+
* Defaults to the main editor panel.
|
|
602
|
+
*/
|
|
603
|
+
dockPanel(side: DockSide | null, panelId?: DockPanelId): void;
|
|
604
|
+
/**
|
|
605
|
+
* Reinitialize the editor with new configuration.
|
|
606
|
+
* Call this after changing the `config` property if the element is already connected.
|
|
607
|
+
*/
|
|
608
|
+
reinitialize(): void;
|
|
609
|
+
disconnectedCallback(): void;
|
|
610
|
+
private teardown;
|
|
629
611
|
}
|
|
630
|
-
/** Snapshot the current stage as a plain, serializable object. */
|
|
631
|
-
declare function buildStageExport(): StageExport;
|
|
632
|
-
/** The export as formatted JSON. */
|
|
633
|
-
declare function stageExportToString(): string;
|
|
634
612
|
/**
|
|
635
|
-
*
|
|
613
|
+
* Register the ZylemEditorElement as a custom element.
|
|
614
|
+
* Call this function to use the default 'zylem-editor' tag name.
|
|
636
615
|
*
|
|
637
|
-
* @
|
|
638
|
-
*
|
|
639
|
-
*
|
|
616
|
+
* @example
|
|
617
|
+
* ```js
|
|
618
|
+
* import { registerZylemEditor } from '@zylem/editor';
|
|
619
|
+
* registerZylemEditor();
|
|
620
|
+
* // Now you can use <zylem-editor> in your HTML
|
|
621
|
+
* ```
|
|
640
622
|
*/
|
|
641
|
-
declare function
|
|
623
|
+
declare function registerZylemEditor(tagName?: string): void;
|
|
642
624
|
|
|
643
625
|
/**
|
|
644
626
|
* Editor Host Helpers
|
|
@@ -756,4 +738,22 @@ interface MountedZylemEditor extends EditorStateBridge {
|
|
|
756
738
|
*/
|
|
757
739
|
declare function mountZylemEditor(options?: MountZylemEditorOptions): MountedZylemEditor;
|
|
758
740
|
|
|
741
|
+
/**
|
|
742
|
+
* Host observation of committed scene edits.
|
|
743
|
+
*
|
|
744
|
+
* Every edit the editor records is also announced here, so an embedding app can
|
|
745
|
+
* react to it — persisting a layout, marking a document dirty, or eventually
|
|
746
|
+
* writing changes back to source. Kept in its own module so `editor-bridge` does
|
|
747
|
+
* not have to import the host surface (which imports the bridge), which would be
|
|
748
|
+
* circular.
|
|
749
|
+
*/
|
|
750
|
+
|
|
751
|
+
type SceneOperationListener = (op: SceneOperationPayload) => void;
|
|
752
|
+
/**
|
|
753
|
+
* Observe committed scene operations.
|
|
754
|
+
*
|
|
755
|
+
* @returns An unsubscribe function.
|
|
756
|
+
*/
|
|
757
|
+
declare function onSceneOperation(listener: SceneOperationListener): () => void;
|
|
758
|
+
|
|
759
759
|
export { type CatalogState, DEFAULT_ROTATE_SNAP, DOCK_SIDES, type DockPanelId, type DockRect, type DockRegistry, type DockSide, type DockZoneState, type EditorDockDefaults, type EditorEvent, type EditorEventType, type EditorStateBridge, type EditorStateBridgeOptions, type EditorUpdatePayload, type HistoryState, Icon, MAIN_PANEL_ID, MAX_HISTORY_DEPTH, type MountZylemEditorOptions, type MountedZylemEditor, type SceneOperationListener, type StageExport, type StageExportEntity, type TransformState, type TransformToolGuardOptions, type ZylemEditorConfig, ZylemEditorElement, attachEditorStateBridge, channel as bridgeChannel, buildStageExport, canRedo, canUndo, catalogState, clearHistory, computeDockLayout, connectEditorBridge, copyStageExport, debugState, debugStore, disarmTools, disconnectEditorBridge, dispatchEditorUpdate, dispatchToEditor, dockPanelToSide, editorEvents, findDockedSide, gameState, getDockedSide, historyState, installTransformToolGuard, mountZylemEditor, onSceneOperation, redo, redoLabel, registerZylemEditor, releaseOrphanedTransformTool, sendAddType, sendDebugEnabled, sendEntityCreate, sendEntityFocus, sendEntitySelect, sendEntityTransform, sendGridVisible, sendPlayback, sendSnapSettings, sendStageVariable, sendTool, setArmedType, setEntityCatalog, setGridVisible, setSnapEnabled, setSnapIncrements, stageExportToString, stageState, transformState, undo, undoLabel, undockPanelFromSides };
|