babylon.quarks-editor 0.19.0 → 0.20.0

package/dist/react/ContextMenu.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { theme } from './theme';
+/** Right-click menu at the pointer; closes on outside click, Escape, scroll or window blur. */
+export function ContextMenu(props) {
+    const { x, y, items, onClose } = props;
+    const ref = useRef(null);
+    const [position, setPosition] = useState({ left: x, top: y });
+    // Keep the menu on screen near the right/bottom edges.
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const { width, height } = el.getBoundingClientRect();
+        setPosition({
+            left: Math.max(4, Math.min(x, window.innerWidth - width - 4)),
+            top: Math.max(4, Math.min(y, window.innerHeight - height - 4)),
+        });
+    }, [x, y]);
+    useEffect(() => {
+        const onPointerDown = (e) => {
+            if (!ref.current?.contains(e.target))
+                onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('pointerdown', onPointerDown, true);
+        window.addEventListener('keydown', onKey);
+        window.addEventListener('wheel', onClose, true);
+        window.addEventListener('blur', onClose);
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown, true);
+            window.removeEventListener('keydown', onKey);
+            window.removeEventListener('wheel', onClose, true);
+            window.removeEventListener('blur', onClose);
+        };
+    }, [onClose]);
+    return createPortal(_jsx("div", { ref: ref, role: "menu", onContextMenu: (e) => e.preventDefault(), style: {
+            position: 'fixed',
+            left: position.left,
+            top: position.top,
+            zIndex: 1000,
+            minWidth: 170,
+            padding: 4,
+            background: '#0c1226',
+            border: `1px solid ${theme.border}`,
+            borderRadius: 8,
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45)',
+            fontFamily: theme.font,
+        }, children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: "qe-hover-bg", disabled: item.disabled, style: {
+                display: 'block',
+                width: '100%',
+                textAlign: 'left',
+                border: 'none',
+                borderRadius: 5,
+                background: 'transparent',
+                color: item.danger ? '#ff8a8a' : theme.text,
+                opacity: item.disabled ? 0.45 : 1,
+                padding: '6px 10px',
+                fontSize: 12.5,
+                cursor: item.disabled ? 'default' : 'pointer',
+                fontFamily: theme.font,
+            }, onClick: () => {
+                onClose();
+                item.onSelect();
+            }, children: item.label }, item.label))) }), document.body);
+}

package/dist/react/EditorWorkspace.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ProjectStore } from '../core/projectStore';
+import { type EffectEditorHostProps } from './EffectEditorHost';
+export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'project' | 'onExitProject' | 'effectJson'> {
+    /** Where projects are kept; defaults to the browser's IndexedDB. */
+    store?: ProjectStore;
+    /** Project to open right away (e.g. from the url); the projects page is shown otherwise. */
+    projectId?: string | null;
+    /** Called when a project is opened or closed — e.g. to mirror it in the url. */
+    onProjectChange?: (projectId: string | null) => void;
+}
+/** Projects page → editor for the chosen project, with assets and scene saved in `store`. */
+export declare function EditorWorkspace(props: EditorWorkspaceProps): React.ReactElement;
+/** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
+export declare const QuarksEditorWorkspace: {
+    Show(options: EditorWorkspaceProps & {
+        hostElement: HTMLElement;
+    }): {
+        dispose: () => void;
+    };
+};

package/dist/react/EditorWorkspace.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { IndexedDbProjectStore } from '../core/indexedDbProjectStore';
+import { EffectEditorHost } from './EffectEditorHost';
+import { ProjectsPage } from './ProjectsPage';
+import { theme } from './theme';
+/** Projects page → editor for the chosen project, with assets and scene saved in `store`. */
+export function EditorWorkspace(props) {
+    const { store: storeProp, projectId, onProjectChange, ...hostProps } = props;
+    const store = useMemo(() => storeProp ?? new IndexedDbProjectStore(), [storeProp]);
+    const [project, setProject] = useState(null);
+    const [resolving, setResolving] = useState(Boolean(projectId));
+    useEffect(() => {
+        if (!projectId) {
+            setResolving(false);
+            return;
+        }
+        let cancelled = false;
+        void store.getProject(projectId).then((meta) => {
+            if (cancelled)
+                return;
+            setProject(meta);
+            setResolving(false);
+            if (!meta)
+                onProjectChange?.(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // Only the initial project id is honoured; later navigation goes through onProjectChange.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store]);
+    if (resolving) {
+        return (_jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: '#070b16',
+                color: theme.textDim,
+                fontFamily: theme.font,
+                padding: 24,
+            }, children: "Opening project\u2026" }));
+    }
+    if (!project) {
+        return (_jsx(ProjectsPage, { store: store, title: hostProps.title, onOpen: (meta) => {
+                setProject(meta);
+                onProjectChange?.(meta.id);
+            } }));
+    }
+    return (_jsx(EffectEditorHost, { ...hostProps, project: { store, id: project.id, name: project.name }, onExitProject: () => {
+            setProject(null);
+            onProjectChange?.(null);
+        } }, project.id));
+}
+/** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
+export const QuarksEditorWorkspace = {
+    Show(options) {
+        const { hostElement, ...props } = options;
+        const root = createRoot(hostElement);
+        root.render(_jsx(EditorWorkspace, { ...props }));
+        return { dispose: () => root.unmount() };
+    },
+};

package/dist/react/EffectEditor.d.ts

@@ -22,4 +22,4 @@ export interface EffectEditorProps {
  * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
  * Module order mirrors Unity's Particle System inspector.
  */
-export declare function EffectEditor(props: EffectEditorProps): React.JSX.Element;
+export declare const EffectEditor: React.NamedExoticComponent<EffectEditorProps>;

package/dist/react/EffectEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useSyncExternalStore } from 'react';
+import React, { useEffect, useSyncExternalStore } from 'react';
 import { EffectBinding } from '../core/binding';
 import { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
 import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
@@ -11,7 +11,7 @@ import { theme } from './theme';
  * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
  * Module order mirrors Unity's Particle System inspector.
  */
-export function EffectEditor(props) {
+export const EffectEditor = React.memo(function EffectEditor(props) {
     useSyncExternalStore((onStoreChange) => props.binding.subscribe(onStoreChange), () => props.binding.getRevision());
     const allSystems = [props.binding.system, ...props.binding.subSystems];
     // Selection survives re-renders but falls back to root if the system was removed/replaced.
@@ -26,7 +26,10 @@ export function EffectEditor(props) {
         nested.onBeforeChange = () => props.binding.onBeforeChange?.();
         return nested;
     }, [props.binding, activeSystem]);
+    // A sub-system edit is a change of the whole effect: the host's undo buttons, timeline and
+    // wireframes all listen to the root binding.
+    useEffect(() => (binding === props.binding ? undefined : binding.subscribe(() => props.binding.markChanged())), [binding, props.binding]);
     useSyncExternalStore((onStoreChange) => binding.subscribe(onStoreChange), () => binding.getRevision());
     const gizmoTargetIsEmitter = allSystems.some((s) => s.emitter === props.gizmoTargetNode);
-    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
-}
+    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel, onBeforeChange: () => props.binding.onBeforeChange?.(), onChanged: () => props.binding.markChanged() }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
+});

package/dist/react/EffectEditorHost.d.ts

@@ -3,14 +3,18 @@ import { BatchedRenderer } from 'babylon.quarks';
 import React from 'react';
 import { EffectBinding } from '../core/binding';
 import { EffectHistory } from '../core/history';
+import type { ProjectStore } from '../core/projectStore';
 import type { GeometryData, GeometryOption, TextureOption } from './modules';
 export interface EffectEditorHostHandle {
     binding: EffectBinding;
     history: EffectHistory;
     scene: Scene;
     renderer: BatchedRenderer;
+    /** Replaces the scene with this effect (it is also added to Assets). */
     importJson: (json: unknown) => void;
-    /** Loads many JSON effects at once and appends them to the gallery catalog. */
+    /** Imports effect files (and the texture/geometry files they reference) into Assets. */
+    importAssets: (files: FileList | File[]) => Promise<void>;
+    /** @deprecated Renamed to `importAssets`. */
     importGallery: (files: FileList | File[]) => Promise<void>;
     exportJson: () => string;
 }
@@ -33,9 +37,22 @@ export interface EffectEditorHostProps {
         href: string;
         label: string;
     };
+    /**
+     * Project to edit: its assets load from and save to `store`, and the scene is saved with
+     * Save / Ctrl+S. Without it the editor works in memory only.
+     */
+    project?: {
+        store: ProjectStore;
+        id: string;
+        name: string;
+    };
+    /** Shows a "← Projects" button; called once unsaved scene changes are dealt with. */
+    onExitProject?: () => void;
 }
 /**
- * Self-contained effect editor: live Babylon preview + hierarchy/inspector sidebar.
+ * Self-contained effect editor: live Babylon preview, a Scene list of the effects placed in it,
+ * an inspector, and a bottom dock with the timeline and the Assets browser. Assets are effect
+ * files; dragging one into the viewport instantiates an independent copy, as many times as needed.
  * Designed for embedding — see QuarksEffectEditor.Show for the NME-style entry point.
  */
 export declare function EffectEditorHost(props: EffectEditorHostProps): React.JSX.Element;