babylon.quarks-editor 0.27.0 → 0.28.0

package/src/react/host/HostDialogs.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import type {EditorSession, PrefabInfo} from '../../core/editorSession.js';
+import type {SceneEntry} from '../../core/sceneEntries.js';
+import {ChoiceDialog} from '../ChoiceDialog.js';
+import {MessageDialog} from '../MessageDialog.js';
+import {PromptDialog} from '../PromptDialog.js';
+import {theme} from '../theme.js';
+
+/** Which prefab question is open: overwrite on save, save before leaving, or a new asset path. */
+export type PrefabDialog = 'overwrite' | 'exit' | 'saveAs' | null;
+
+/** The host's dialog and notice state, with its setters. */
+export interface HostDialogState {
+    /** Name of the project being opened, while it loads. */
+    loadingProject: string | null;
+    /** The short notice shown, if any. */
+    toast: string | null;
+    /** Entry being saved as a new asset. */
+    saveAsTarget: SceneEntry | null;
+    setSaveAsTarget(entry: SceneEntry | null): void;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab question. */
+    prefabDialog: PrefabDialog;
+    setPrefabDialog(dialog: PrefabDialog): void;
+    /** Asset waiting to replace an open prefab that has unsaved edits. */
+    prefabSwitch: {id: number; name: string} | null;
+    setPrefabSwitch(asset: {id: number; name: string} | null): void;
+    /** "Save changes to the scene?" before leaving the project. */
+    exitPrompt: boolean;
+    setExitPrompt(open: boolean): void;
+    /** The notice the user dismisses, if any. */
+    message: {title: string; message: string} | null;
+    setMessage(message: {title: string; message: string} | null): void;
+}
+
+/** Props of {@link HostDialogs}. */
+export interface HostDialogsProps extends HostDialogState {
+    /** The session the dialogs act on. */
+    session: EditorSession | null;
+    /** Leaves the project, once the scene is dealt with. */
+    onExitProject?: () => void;
+}
+
+/** The host's modal dialogs, the project loading screen and the toast. */
+export function HostDialogs(props: HostDialogsProps): React.ReactElement {
+    const {session, prefabInfo, prefabDialog, setPrefabDialog, prefabSwitch, setPrefabSwitch} = props;
+    return (
+        <>
+            {props.loadingProject !== null && (
+                <div
+                    style={{
+                        position: 'fixed',
+                        inset: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        background: 'rgba(7, 11, 22, 0.8)',
+                        zIndex: 900,
+                        color: theme.text,
+                        fontSize: 14,
+                    }}
+                >
+                    Opening {props.loadingProject}…
+                </div>
+            )}
+            {props.toast && (
+                <div
+                    role="status"
+                    style={{
+                        position: 'fixed',
+                        top: 16,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        zIndex: 950,
+                        background: '#13204a',
+                        border: `1px solid ${theme.borderActive}`,
+                        borderRadius: 8,
+                        padding: '8px 14px',
+                        fontSize: 12.5,
+                        color: theme.text,
+                        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+                        pointerEvents: 'none',
+                    }}
+                >
+                    {props.toast}
+                </div>
+            )}
+            {props.saveAsTarget && (
+                <PromptDialog
+                    title="Save as new asset — Folder/Name"
+                    defaultValue={props.saveAsTarget.name}
+                    placeholder="Fire/Big explosion"
+                    confirmLabel="Save"
+                    onSubmit={(path) => {
+                        const entry = props.saveAsTarget!;
+                        props.setSaveAsTarget(null);
+                        session?.saveEntryAsAsset(entry, path);
+                    }}
+                    onCancel={() => props.setSaveAsTarget(null)}
+                />
+            )}
+            {prefabDialog === 'overwrite' && prefabInfo && (
+                <ChoiceDialog
+                    title={`Overwrite prefab “${prefabInfo.name}”?`}
+                    message={(() => {
+                        const count = session?.prefabInstanceCount() ?? 0;
+                        return count > 0
+                            ? `The asset is replaced with your edits. The ${count} “${prefabInfo.name}” effect(s) already in the scene will not change.`
+                            : 'The asset is replaced with your edits. Effects already in the scene will not change.';
+                    })()}
+                    actions={[
+                        {label: 'Cancel', onSelect: () => setPrefabDialog(null)},
+                        {label: 'Save as new…', onSelect: () => setPrefabDialog('saveAs')},
+                        {
+                            label: 'Overwrite',
+                            primary: true,
+                            onSelect: () => {
+                                setPrefabDialog(null);
+                                session?.overwritePrefab();
+                            },
+                        },
+                    ]}
+                    onCancel={() => setPrefabDialog(null)}
+                />
+            )}
+            {prefabSwitch && prefabInfo && (
+                <ChoiceDialog
+                    title={`Save changes to prefab “${prefabInfo.name}”?`}
+                    message={`Before opening “${prefabSwitch.name}”. Saving overwrites the prefab asset; effects already in the scene will not change.`}
+                    actions={[
+                        {label: 'Cancel', onSelect: () => setPrefabSwitch(null)},
+                        {
+                            label: "Don't save",
+                            danger: true,
+                            onSelect: () => {
+                                setPrefabSwitch(null);
+                                session?.openPrefab(prefabSwitch.id, true);
+                            },
+                        },
+                        {
+                            label: 'Save',
+                            primary: true,
+                            onSelect: () => {
+                                setPrefabSwitch(null);
+                                session?.overwritePrefab();
+                                session?.openPrefab(prefabSwitch.id, true);
+                            },
+                        },
+                    ]}
+                    onCancel={() => setPrefabSwitch(null)}
+                />
+            )}
+            {prefabDialog === 'exit' && prefabInfo && (
+                <ChoiceDialog
+                    title={`Save changes to prefab “${prefabInfo.name}”?`}
+                    message="Saving overwrites the prefab asset. Effects already in the scene will not change."
+                    actions={[
+                        {label: 'Cancel', onSelect: () => setPrefabDialog(null)},
+                        {
+                            label: "Don't save",
+                            danger: true,
+                            onSelect: () => {
+                                setPrefabDialog(null);
+                                session?.closePrefab();
+                            },
+                        },
+                        {
+                            label: 'Save',
+                            primary: true,
+                            onSelect: () => {
+                                setPrefabDialog(null);
+                                session?.overwritePrefab();
+                                session?.closePrefab();
+                            },
+                        },
+                    ]}
+                    onCancel={() => setPrefabDialog(null)}
+                />
+            )}
+            {prefabDialog === 'saveAs' && prefabInfo && (
+                <PromptDialog
+                    title="Save prefab as new asset — Folder/Name"
+                    defaultValue={prefabInfo.path.replace(/\.json$/i, '')}
+                    confirmLabel="Save"
+                    onSubmit={(path) => {
+                        setPrefabDialog(null);
+                        session?.savePrefabAsNew(path);
+                    }}
+                    onCancel={() => setPrefabDialog(null)}
+                />
+            )}
+            {props.exitPrompt && (
+                <ChoiceDialog
+                    title="Save changes to the scene?"
+                    message="The scene has changes that are not saved. Assets are already saved."
+                    actions={[
+                        {label: 'Cancel', onSelect: () => props.setExitPrompt(false)},
+                        {
+                            label: "Don't save",
+                            danger: true,
+                            onSelect: () => {
+                                props.setExitPrompt(false);
+                                props.onExitProject?.();
+                            },
+                        },
+                        {
+                            label: 'Save',
+                            primary: true,
+                            onSelect: () => {
+                                props.setExitPrompt(false);
+                                void session?.saveScene().then((saved) => saved && props.onExitProject?.());
+                            },
+                        },
+                    ]}
+                    onCancel={() => props.setExitPrompt(false)}
+                />
+            )}
+            {props.message && (
+                <MessageDialog
+                    title={props.message.title}
+                    message={props.message.message}
+                    onClose={() => props.setMessage(null)}
+                />
+            )}
+        </>
+    );
+}

package/src/react/host/InspectorSidebar.tsx

@@ -0,0 +1,147 @@
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import type {ParticleSystem} from 'babylon.quarks';
+import React, {useState} from 'react';
+import type {EffectBinding} from '../../core/binding.js';
+import {EffectEditor, type EffectEditorProps} from '../EffectEditor.js';
+import {PromptDialog} from '../PromptDialog.js';
+import {buttonStyle, theme} from '../theme.js';
+import {INSPECTOR_WIDTH} from './hostStyles.js';
+
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+export function exportEffectJSON(binding: EffectBinding, warn: (message: string) => void): string {
+    const json = binding.exportJSON('EditorEffect');
+    if (json.includes('"blob:')) {
+        warn(
+            'This effect references blob: textures, which will not load after a reload. Re-pick them from a hosted URL.'
+        );
+    }
+    return json;
+}
+
+/** Props of {@link InspectorSidebar}. */
+export interface InspectorSidebarProps extends Pick<
+    EffectEditorProps,
+    'textureOptions' | 'geometryOptions' | 'resolveTexture' | 'resolveGeometry'
+> {
+    /** The focused effect, for the header and its actions. */
+    binding: EffectBinding | null;
+    /** The binding, system and node the inspector shows (they may lag a selection change). */
+    inspector: {binding: EffectBinding; system: ParticleSystem; node: TransformNode} | null;
+    /** Header shown when the effect has no name. */
+    title?: string;
+    /** Called after the effect is renamed. */
+    onRenamed(name: string): void;
+    /** Shows a Save button that receives the effect's JSON. */
+    onSave?: (json: string) => void;
+    /** A short notice. */
+    toast(text: string): void;
+}
+
+/** The editor's right column: the effect's name, Export and Save, and the module inspector. */
+export function InspectorSidebar(props: InspectorSidebarProps): React.ReactElement {
+    const {binding, inspector, onSave} = props;
+    const [renaming, setRenaming] = useState(false);
+    return (
+        <aside
+            style={{
+                width: INSPECTOR_WIDTH,
+                flexShrink: 0,
+                borderLeft: `1px solid ${theme.border}`,
+                background: theme.panelBg,
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 0,
+            }}
+        >
+            <div style={{padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}`}}>
+                <div
+                    style={{
+                        fontSize: 11,
+                        fontWeight: 600,
+                        color: theme.textDim,
+                        textTransform: 'uppercase',
+                        letterSpacing: 0.4,
+                        marginBottom: 6,
+                    }}
+                >
+                    Inspector
+                </div>
+                <div
+                    className="qe-hover-bg"
+                    title={binding ? 'Rename effect' : undefined}
+                    style={{
+                        fontSize: 16,
+                        fontWeight: 600,
+                        cursor: binding ? 'pointer' : 'default',
+                        borderRadius: 6,
+                        padding: '2px 4px',
+                        margin: '-2px -4px',
+                    }}
+                    onClick={() => binding && setRenaming(true)}
+                >
+                    {(binding?.root.name || props.title) ?? 'Effect editor'}
+                </div>
+                {renaming && binding && (
+                    <PromptDialog
+                        title="Rename effect"
+                        defaultValue={binding.root.name}
+                        onSubmit={(name) => {
+                            binding.apply(() => (binding.root.name = name));
+                            props.onRenamed(name);
+                            setRenaming(false);
+                        }}
+                        onCancel={() => setRenaming(false)}
+                    />
+                )}
+                <div style={{display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10}}>
+                    <button
+                        className="qe-hover"
+                        style={buttonStyle}
+                        disabled={!binding}
+                        onClick={() => {
+                            if (!binding) return;
+                            const blob = new Blob([exportEffectJSON(binding, props.toast)], {type: 'application/json'});
+                            const link = document.createElement('a');
+                            link.href = URL.createObjectURL(blob);
+                            link.download = `${binding.root.name || 'effect'}.json`;
+                            link.click();
+                            URL.revokeObjectURL(link.href);
+                        }}
+                    >
+                        Export
+                    </button>
+                    {onSave && (
+                        <button
+                            className="qe-hover"
+                            style={buttonStyle}
+                            disabled={!binding}
+                            onClick={() => binding && onSave(exportEffectJSON(binding, props.toast))}
+                        >
+                            Save
+                        </button>
+                    )}
+                </div>
+            </div>
+            <div style={{flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px'}}>
+                {inspector ? (
+                    <EffectEditor
+                        binding={inspector.binding}
+                        selectedSystem={inspector.system}
+                        gizmoTargetNode={inspector.node}
+                        gizmoTargetLabel={inspector.node.name || 'Node'}
+                        textureOptions={props.textureOptions}
+                        geometryOptions={props.geometryOptions}
+                        resolveTexture={props.resolveTexture}
+                        resolveGeometry={props.resolveGeometry}
+                    />
+                ) : (
+                    <div style={{fontSize: 13, color: theme.textDim, lineHeight: 1.5}}>No effect selected.</div>
+                )}
+            </div>
+        </aside>
+    );
+}

package/src/react/host/SceneSidebar.tsx

@@ -0,0 +1,227 @@
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import {ArrowLeftIcon} from '@heroicons/react/24/solid';
+import React from 'react';
+import type {PrefabInfo} from '../../core/editorSession.js';
+import type {SceneEntry} from '../../core/sceneEntries.js';
+import {EffectTreeView} from '../EffectTreeView.js';
+import {iconStyle} from '../icons.js';
+import {ScenePanel} from '../ScenePanel.js';
+import {buttonStyle, theme} from '../theme.js';
+import {dockIconButtonStyle, saveButtonStyle, SCENE_PANEL_WIDTH} from './hostStyles.js';
+
+/** Props of {@link SceneSidebar}. */
+export interface SceneSidebarProps {
+    /** The open project, for its header; none in memory-only mode. */
+    projectName?: string;
+    /** Shows the back button in the project header. */
+    canExitProject: boolean;
+    /** The scene has unsaved changes. */
+    sceneDirty: boolean;
+    /** The project's scene is still loading. */
+    projectLoading: boolean;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab has unsaved edits. */
+    prefabDirty: boolean;
+    /** The scene's entries. */
+    entries: SceneEntry[];
+    /** The focused entry's root. */
+    focusedRoot: TransformNode | null;
+    /** Shown entries, by root `uniqueId`. */
+    visibleRootIds: ReadonlySet<number>;
+    /** The entry shown alone, if any. */
+    soloRootId: number | null;
+    /** The node selected in the focused effect. */
+    selectedNode: TransformNode | null;
+    /** Back to the projects list. */
+    onExitProject(): void;
+    /** Save (the scene, or the open prefab). */
+    onSave(): void;
+    /** Back from the prefab to the scene. */
+    onExitPrefab(): void;
+    /** Save the open prefab. */
+    onSavePrefab(): void;
+    /** Focus an entry. */
+    onFocus(entry: SceneEntry): void;
+    /** Show or hide an entry. */
+    onToggleVisible(entry: SceneEntry): void;
+    /** Show an entry alone. */
+    onToggleSolo(entry: SceneEntry): void;
+    /** Save an entry as a new asset. */
+    onSaveAsAsset(entry: SceneEntry): void;
+    /** Remove an entry. */
+    onDelete(entry: SceneEntry): void;
+    /** Add a default effect. */
+    onCreateDefault(): void;
+    /** Select a node, focusing its entry first when needed. */
+    onSelectNode(entry: SceneEntry | null, node: TransformNode): void;
+}
+
+/** The editor's left column: the project header, then the Scene list or the open prefab. */
+export function SceneSidebar(props: SceneSidebarProps): React.ReactElement {
+    const {prefabInfo, prefabDirty, entries} = props;
+    return (
+        <aside
+            style={{
+                width: SCENE_PANEL_WIDTH,
+                flexShrink: 0,
+                borderRight: `1px solid ${theme.border}`,
+                background: theme.panelBg,
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 0,
+            }}
+        >
+            {props.projectName !== undefined && (
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        padding: '8px 10px',
+                        borderBottom: `1px solid ${theme.border}`,
+                    }}
+                >
+                    {props.canExitProject && (
+                        <button
+                            type="button"
+                            className="qe-hover"
+                            title="Back to projects"
+                            style={{...dockIconButtonStyle, width: 26, height: 26}}
+                            onClick={props.onExitProject}
+                        >
+                            <ArrowLeftIcon style={iconStyle(13)} />
+                        </button>
+                    )}
+                    <span
+                        title={props.projectName}
+                        style={{
+                            flex: 1,
+                            minWidth: 0,
+                            fontSize: 13,
+                            fontWeight: 600,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        {props.projectName}
+                        {props.sceneDirty ? ' *' : ''}
+                    </span>
+                    <button
+                        type="button"
+                        className="qe-hover"
+                        title="Save the scene (Ctrl+S) — assets are not changed"
+                        disabled={props.projectLoading}
+                        style={saveButtonStyle(props.sceneDirty, '4px 12px')}
+                        onClick={props.onSave}
+                    >
+                        Save
+                    </button>
+                </div>
+            )}
+            <div style={{padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}`}}>
+                <div style={{fontSize: 14, fontWeight: 600}}>
+                    {prefabInfo ? 'Prefab' : `Scene${entries.length > 0 ? ` · ${entries.length}` : ''}`}
+                </div>
+                <div style={{fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4}}>
+                    {prefabInfo
+                        ? 'The scene is set aside while you edit this asset'
+                        : 'Effects in the viewport · click to edit · eye shows/hides'}
+                </div>
+            </div>
+            <div
+                style={{
+                    flex: 1,
+                    minHeight: 0,
+                    overflow: 'hidden',
+                    padding: '8px 12px 14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+            >
+                {prefabInfo ? (
+                    <div style={{display: 'flex', flexDirection: 'column', gap: 10, flex: 1, minHeight: 0}}>
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 10,
+                                padding: 12,
+                                border: `1px solid ${theme.borderActive}`,
+                                borderRadius: 8,
+                                background: 'rgba(120, 165, 255, 0.08)',
+                                fontSize: 12,
+                                color: theme.textDim,
+                                lineHeight: 1.5,
+                            }}
+                        >
+                            <div style={{fontSize: 13, fontWeight: 600, color: theme.text}}>
+                                {prefabInfo.name}
+                                {prefabDirty ? ' *' : ''}
+                            </div>
+                            <div style={{wordBreak: 'break-all'}}>{prefabInfo.path}</div>
+                            <div>
+                                Save (Ctrl+S) overwrites this asset. Effects already placed in the scene keep their own
+                                copy and do not change.
+                            </div>
+                            <div style={{display: 'flex', gap: 6}}>
+                                <button
+                                    type="button"
+                                    className="qe-hover"
+                                    style={buttonStyle}
+                                    onClick={props.onExitPrefab}
+                                >
+                                    ← Scene
+                                </button>
+                                <button
+                                    type="button"
+                                    className="qe-hover"
+                                    style={buttonStyle}
+                                    onClick={props.onSavePrefab}
+                                >
+                                    Save prefab
+                                </button>
+                            </div>
+                        </div>
+                        {entries[0] && (
+                            <div
+                                style={{
+                                    flex: 1,
+                                    minHeight: 0,
+                                    overflowY: 'auto',
+                                    border: `1px solid ${theme.border}`,
+                                    borderRadius: 8,
+                                    background: theme.sectionBg,
+                                    padding: '4px 0',
+                                }}
+                            >
+                                <EffectTreeView
+                                    includeRoot
+                                    root={entries[0].root}
+                                    selectedNode={props.selectedNode}
+                                    onSelect={(node) => props.onSelectNode(null, node)}
+                                />
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <ScenePanel
+                        entries={entries}
+                        focusedRoot={props.focusedRoot}
+                        visibleRootIds={props.visibleRootIds}
+                        onFocus={props.onFocus}
+                        onToggleVisible={props.onToggleVisible}
+                        soloRootId={props.soloRootId}
+                        onToggleSolo={props.onToggleSolo}
+                        onSaveAsAsset={props.onSaveAsAsset}
+                        onDelete={props.onDelete}
+                        onCreateDefault={props.onCreateDefault}
+                        selectedNode={props.selectedNode}
+                        onSelectNode={props.onSelectNode}
+                    />
+                )}
+            </div>
+        </aside>
+    );
+}