babylon.quarks-editor 0.26.0 → 0.28.0

package/src/react/host/BottomDocks.tsx

@@ -0,0 +1,178 @@
+import {ChevronDownIcon, ChevronUpIcon, MapPinIcon, XMarkIcon} from '@heroicons/react/24/solid';
+import React from 'react';
+import {AssetsPanel, type AssetsPanelProps} from '../AssetsPanel.js';
+import {iconStyle} from '../icons.js';
+import {buttonStyle, theme} from '../theme.js';
+import {
+    activeSquareButtonStyle,
+    dockIconButtonStyle,
+    dockTitleStyle,
+    DRAWER_HEIGHT,
+    TIMELINE_HEIGHT,
+} from './hostStyles.js';
+
+/** Props of {@link AssetsDrawer}. */
+export interface AssetsDrawerProps {
+    /** The drawer is shown. */
+    open: boolean;
+    /** The drawer is docked above the timeline instead of floating over the viewport. */
+    pinned: boolean;
+    /** Pin or unpin it (it stays open). */
+    onTogglePin(): void;
+    /** Close and unpin it. */
+    onClose(): void;
+    /** The Assets browser inside. */
+    panel: AssetsPanelProps;
+}
+
+/** The Assets browser, floating over the viewport or pinned above the timeline. */
+export function AssetsDrawer(props: AssetsDrawerProps): React.ReactElement {
+    const {open, pinned} = props;
+    return (
+        <div
+            aria-hidden={!open && !pinned}
+            style={{
+                height: DRAWER_HEIGHT,
+                display: 'flex',
+                flexDirection: 'column',
+                background: theme.panelBg,
+                borderTop: `1px solid ${theme.border}`,
+                ...(pinned
+                    ? {flexShrink: 0}
+                    : {
+                          position: 'absolute',
+                          left: 0,
+                          right: 0,
+                          bottom: 0,
+                          zIndex: 20,
+                          background: '#0a0f20',
+                          boxShadow: '0 -10px 30px rgba(0, 0, 0, 0.5)',
+                          transform: open ? 'none' : 'translateY(100%)',
+                          opacity: open ? 1 : 0,
+                          pointerEvents: open ? 'auto' : 'none',
+                          transition: 'transform 0.18s ease, opacity 0.18s ease',
+                      }),
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '4px 6px 4px 12px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }}
+            >
+                <span style={dockTitleStyle}>Assets</span>
+                <span style={{fontSize: 11, color: theme.textDim}}>Ctrl+Space</span>
+                <span style={{flex: 1}} />
+                <button
+                    type="button"
+                    className="qe-hover"
+                    title={pinned ? 'Unpin — float over the viewport again' : 'Pin — keep it docked above the timeline'}
+                    style={{...dockIconButtonStyle, ...(pinned ? activeSquareButtonStyle : {})}}
+                    onClick={props.onTogglePin}
+                >
+                    <MapPinIcon style={iconStyle(13)} />
+                </button>
+                <button
+                    type="button"
+                    className="qe-hover"
+                    title="Close (Esc)"
+                    style={dockIconButtonStyle}
+                    onClick={props.onClose}
+                >
+                    <XMarkIcon style={iconStyle(13)} />
+                </button>
+            </div>
+            <AssetsPanel {...props.panel} />
+        </div>
+    );
+}
+
+/** Props of {@link TimelineDock}. */
+export interface TimelineDockProps {
+    /** The timeline is collapsed to its header. */
+    collapsed: boolean;
+    /** Collapse or expand it. */
+    onToggleCollapsed(): void;
+    /** Name of the focused effect, if any. */
+    effectName?: string;
+    /** Assets in the project, counted on the Assets button. */
+    assetCount: number;
+    /** The Assets button shows as switched on. */
+    assetsActive: boolean;
+    /** The Assets button. */
+    onToggleAssets(): void;
+    /** The timeline, or `null` when nothing is focused. */
+    children: React.ReactNode;
+}
+
+/** The bottom dock: the focused effect's timeline, and the Assets button. */
+export function TimelineDock(props: TimelineDockProps): React.ReactElement {
+    const {collapsed} = props;
+    return (
+        <div
+            style={{
+                flexShrink: 0,
+                borderTop: `1px solid ${theme.border}`,
+                background: theme.panelBg,
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+        >
+            <div style={{display: 'flex', alignItems: 'center', gap: 6, padding: '3px 6px'}}>
+                <button
+                    type="button"
+                    className="qe-hover-bg"
+                    title={collapsed ? 'Expand timeline' : 'Collapse timeline'}
+                    style={{...dockIconButtonStyle, border: 'none', background: 'transparent'}}
+                    onClick={props.onToggleCollapsed}
+                >
+                    {collapsed ? <ChevronUpIcon style={iconStyle(13)} /> : <ChevronDownIcon style={iconStyle(13)} />}
+                </button>
+                <span style={dockTitleStyle}>Timeline</span>
+                {props.effectName !== undefined && (
+                    <span
+                        style={{
+                            fontSize: 12,
+                            color: theme.textDim,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        {props.effectName}
+                    </span>
+                )}
+                <span style={{flex: 1}} />
+                <button
+                    type="button"
+                    className="qe-hover"
+                    title="Assets (Ctrl+Space)"
+                    style={{
+                        ...buttonStyle,
+                        padding: '3px 10px',
+                        ...(props.assetsActive ? activeSquareButtonStyle : {}),
+                    }}
+                    onClick={props.onToggleAssets}
+                >
+                    Assets{props.assetCount > 0 ? ` · ${props.assetCount}` : ''}
+                </button>
+            </div>
+            <div
+                style={{
+                    height: TIMELINE_HEIGHT,
+                    display: collapsed ? 'none' : 'flex',
+                    borderTop: `1px solid ${theme.border}`,
+                }}
+            >
+                {props.children ?? (
+                    <div style={{padding: '14px', fontSize: 12, color: theme.textDim}}>
+                        Select an effect in the Scene to see its timeline.
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

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>
+    );
+}