babylon.quarks-editor 0.26.0 → 0.28.0

package/src/react/EditorWorkspace.tsx

@@ -1,11 +1,12 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import {IndexedDbProjectStore} from '../core/indexedDbProjectStore';
-import type {ProjectMeta, ProjectStore} from '../core/projectStore';
-import {EffectEditorHost, type EffectEditorHostProps} from './EffectEditorHost';
-import {ProjectsPage} from './ProjectsPage';
-import {theme} from './theme';
+import {IndexedDbProjectStore} from '../core/indexedDbProjectStore.js';
+import type {ProjectMeta, ProjectStore} from '../core/projectStore.js';
+import {EffectEditorHost, type EffectEditorHostProps} from './EffectEditorHost.js';
+import {ProjectsPage} from './ProjectsPage.js';
+import {theme} from './theme.js';
 
+/** Props of {@link EditorWorkspace}: the editor's, plus where projects live. */
 export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'project' | 'onExitProject' | 'effectJson'> {
     /** Where projects are kept; defaults to the browser's IndexedDB. */
     store?: ProjectStore;
@@ -23,10 +24,7 @@ export function EditorWorkspace(props: EditorWorkspaceProps): React.ReactElement
     const [resolving, setResolving] = useState(Boolean(projectId));
 
     useEffect(() => {
-        if (!projectId) {
-            setResolving(false);
-            return;
-        }
+        if (!projectId) return;
         let cancelled = false;
         void store.getProject(projectId).then((meta) => {
             if (cancelled) return;
@@ -87,7 +85,15 @@ export function EditorWorkspace(props: EditorWorkspaceProps): React.ReactElement
 
 /** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
 export const QuarksEditorWorkspace = {
-    Show(options: EditorWorkspaceProps & {hostElement: HTMLElement}): {dispose: () => void} {
+    /**
+     * Mounts an {@link EditorWorkspace} into `hostElement`.
+     *
+     * @returns A handle whose `dispose()` unmounts it.
+     */
+    Show(options: EditorWorkspaceProps & {hostElement: HTMLElement}): {
+        /** Unmounts the workspace. */
+        dispose: () => void;
+    } {
         const {hostElement, ...props} = options;
         const root = createRoot(hostElement);
         root.render(<EditorWorkspace {...props} />);

package/src/react/EffectEditor.tsx

@@ -1,8 +1,10 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {Texture} from '@babylonjs/core/Materials/Textures/texture.js';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import type {ParticleSystem} from 'babylon.quarks';
 import React, {useEffect, useSyncExternalStore} from 'react';
-import {EffectBinding} from '../core/binding';
+import {EffectBinding} from '../core/binding.js';
 import {
+    AttractorModule,
     CollisionModule,
     ColorBySpeedModule,
     EmitDirectionModule,
@@ -22,8 +24,8 @@ import {
     TurbulenceModule,
     VelocityOverLifeModule,
     WidthOverTrailModule,
-} from './behaviorModules';
-import type {GeometryData, GeometryOption, TextureOption} from './modules';
+} from './behaviorModules.js';
+import type {GeometryData, GeometryOption, TextureOption} from './modules.js';
 import {
     ColorOverLifeModule,
     EmissionModule,
@@ -31,22 +33,27 @@ import {
     RendererModule,
     ShapeModule,
     SizeOverLifeModule,
-} from './modules';
-import {ObjectModule} from './ObjectModule';
-import {SubEmittersModule} from './SubEmittersModule';
-import {theme} from './theme';
+} from './modules.js';
+import {ObjectModule} from './ObjectModule.js';
+import {SubEmittersModule} from './SubEmittersModule.js';
+import {theme} from './theme.js';
 
+/** Props of {@link EffectEditor}. */
 export interface EffectEditorProps {
+    /** The effect the modules edit. */
     binding: EffectBinding;
     /** Currently selected system, lifted up so the timeline panel and this module stack agree. */
     selectedSystem: ParticleSystem;
+    /** The node the Object module edits the transform of. */
     gizmoTargetNode: TransformNode;
+    /** The Object module's title for that node. */
     gizmoTargetLabel: string;
     /** Texture presets offered in the Renderer module (host supplies the loader). */
     textureOptions?: TextureOption[];
     /** Mesh presets offered for the Mesh render mode (host supplies the geometry buffers). */
     geometryOptions?: GeometryOption[];
-    resolveTexture?: (url: string) => unknown;
+    /** Host texture loader for picked URLs; a plain `Texture` is made without it. */
+    resolveTexture?: (url: string) => Texture | null | undefined;
     /** Host loader for "Load from file…" in the Mesh render mode (e.g. a GLB importer). */
     resolveGeometry?: (file: File) => Promise<GeometryData>;
 }
@@ -112,6 +119,7 @@ export const EffectEditor = React.memo(function EffectEditor(props: EffectEditor
             <InheritVelocityModule binding={binding} />
             <ForceOverLifeModule binding={binding} />
             <GravityModule binding={binding} />
+            <AttractorModule binding={binding} />
             <OrbitOverLifeModule binding={binding} />
             <ColorOverLifeModule binding={binding} />
             <ColorBySpeedModule binding={binding} />