babylon.quarks-editor 0.18.0 → 0.19.0

package/src/react/InspectorInfoIcon.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
 import {InformationCircleIcon} from '@heroicons/react/24/solid';
+import React from 'react';
 import {iconStyle} from './icons';
 import {theme} from './theme';
 import {Tooltip} from './Tooltip';
 
 /** Small info icon with a themed inspector tooltip. */
-export function InspectorInfoIcon(props: {content: string; size?: number; onClick?: (e: React.MouseEvent) => void}): React.ReactElement {
+export function InspectorInfoIcon(props: {
+    content: string;
+    size?: number;
+    onClick?: (e: React.MouseEvent) => void;
+}): React.ReactElement {
     const size = props.size ?? 13;
     return (
         <Tooltip content={props.content}>

package/src/react/MessageDialog.tsx

@@ -39,7 +39,15 @@ export function MessageDialog(props: MessageDialogProps): React.ReactElement {
                 onClick={(e) => e.stopPropagation()}
             >
                 <div style={{fontSize: 14, fontWeight: 600, color: theme.text, marginBottom: 8}}>{title}</div>
-                <div style={{fontSize: 13, lineHeight: 1.5, color: theme.textDim, marginBottom: 14, whiteSpace: 'pre-wrap'}}>
+                <div
+                    style={{
+                        fontSize: 13,
+                        lineHeight: 1.5,
+                        color: theme.textDim,
+                        marginBottom: 14,
+                        whiteSpace: 'pre-wrap',
+                    }}
+                >
                     {message}
                 </div>
                 <div style={{display: 'flex', justifyContent: 'flex-end'}}>

package/src/react/ModuleSection.tsx

@@ -1,9 +1,9 @@
-import React, {useState} from 'react';
 import {ChevronDownIcon, ChevronRightIcon} from '@heroicons/react/24/solid';
+import React, {useState} from 'react';
+import {iconStyle} from './icons';
 import {getInspectorHint} from './inspectorHints';
 import {InspectorInfoIcon} from './InspectorInfoIcon';
 import {theme} from './theme';
-import {iconStyle} from './icons';
 
 /** Unity-style module foldout with an optional enable checkbox. */
 export function ModuleSection(props: {
@@ -58,7 +58,16 @@ export function ModuleSection(props: {
                         style={{width: 14, height: 14, accentColor: '#78a5ff', cursor: 'pointer'}}
                     />
                 )}
-                <span style={{color: dimmed ? theme.textDim : theme.text, fontSize: 13, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 5}}>
+                <span
+                    style={{
+                        color: dimmed ? theme.textDim : theme.text,
+                        fontSize: 13,
+                        fontWeight: 600,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 5,
+                    }}
+                >
                     {props.title}
                     {tooltip ? <InspectorInfoIcon content={tooltip} onClick={(e) => e.stopPropagation()} /> : null}
                 </span>

package/src/react/ObjectModule.tsx

@@ -1,6 +1,6 @@
-import React, {useSyncExternalStore} from 'react';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import {Quaternion} from '@babylonjs/core/Maths/math.vector';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {useSyncExternalStore} from 'react';
 import {getTransformRevision, notifyTransformChanged, subscribeTransform} from '../core/transformStore';
 import {ModuleSection} from './ModuleSection';
 import {NumberField, Row} from './fields';
@@ -23,7 +23,13 @@ function setEulerDegreeAxis(node: TransformNode, axis: 'x' | 'y' | 'z', degrees:
     }
 }
 
-function AxisRow(props: {label: string; hintKey?: string; values: {x: number; y: number; z: number}; step: number; onChange: (axis: 'x' | 'y' | 'z', value: number) => void}) {
+function AxisRow(props: {
+    label: string;
+    hintKey?: string;
+    values: {x: number; y: number; z: number};
+    step: number;
+    onChange: (axis: 'x' | 'y' | 'z', value: number) => void;
+}) {
     return (
         <Row label={props.label} hintKey={props.hintKey}>
             <div style={{display: 'flex', gap: 4}}>
@@ -41,18 +47,33 @@ export function ObjectModule(props: {node: TransformNode; label: string}) {
     const euler = getEulerDegrees(node);
     return (
         <ModuleSection title={`Object — ${props.label}`}>
-            <AxisRow label="Position" values={{x: node.position.x, y: node.position.y, z: node.position.z}} step={0.1} onChange={(axis, v) => {
-                node.position[axis] = v;
-                notifyTransformChanged();
-            }} />
-            <AxisRow label="Rotation" values={euler} step={1} onChange={(axis, v) => {
-                setEulerDegreeAxis(node, axis, v);
-                notifyTransformChanged();
-            }} />
-            <AxisRow label="Scale" values={{x: node.scaling.x, y: node.scaling.y, z: node.scaling.z}} step={0.1} onChange={(axis, v) => {
-                node.scaling[axis] = v;
-                notifyTransformChanged();
-            }} />
+            <AxisRow
+                label="Position"
+                values={{x: node.position.x, y: node.position.y, z: node.position.z}}
+                step={0.1}
+                onChange={(axis, v) => {
+                    node.position[axis] = v;
+                    notifyTransformChanged();
+                }}
+            />
+            <AxisRow
+                label="Rotation"
+                values={euler}
+                step={1}
+                onChange={(axis, v) => {
+                    setEulerDegreeAxis(node, axis, v);
+                    notifyTransformChanged();
+                }}
+            />
+            <AxisRow
+                label="Scale"
+                values={{x: node.scaling.x, y: node.scaling.y, z: node.scaling.z}}
+                step={0.1}
+                onChange={(axis, v) => {
+                    node.scaling[axis] = v;
+                    notifyTransformChanged();
+                }}
+            />
         </ModuleSection>
     );
 }

package/src/react/PromptDialog.tsx

@@ -75,7 +75,11 @@ export function PromptDialog(props: PromptDialogProps): React.ReactElement {
                     <button className="qe-hover" style={buttonStyle} onClick={onCancel}>
                         Cancel
                     </button>
-                    <button className="qe-hover" style={{...buttonStyle, background: theme.accent, color: '#0a1128', borderColor: theme.accent}} onClick={submit}>
+                    <button
+                        className="qe-hover"
+                        style={{...buttonStyle, background: theme.accent, color: '#0a1128', borderColor: theme.accent}}
+                        onClick={submit}
+                    >
                         {confirmLabel}
                     </button>
                 </div>

package/src/react/SubEmittersModule.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import {EmitSubParticleSystem, SubParticleEmitMode} from 'babylon.quarks';
 import type {ParticleEmitter, ParticleSystem} from 'babylon.quarks';
+import {EmitSubParticleSystem, SubParticleEmitMode} from 'babylon.quarks';
 import {EffectBinding} from '../core/binding';
 import {findBehavior} from '../core/colors';
 import {createChildSystem} from '../core/systems';

package/src/react/TimelinePanel.tsx

@@ -1,15 +1,10 @@
-import React, {useMemo, useRef, useState} from 'react';
-import {
-    ArrowPathIcon,
-    ForwardIcon,
-    PauseIcon,
-    PlayIcon,
-    RectangleGroupIcon,
-} from '@heroicons/react/24/solid';
-import type {ParticleSystem, BatchedRenderer} from 'babylon.quarks';
-import type {Scene} from '@babylonjs/core/scene';
 import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {Scene} from '@babylonjs/core/scene';
+import {ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon} from '@heroicons/react/24/solid';
+import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
+import React, {useMemo, useRef, useState} from 'react';
 import type {EffectBinding} from '../core/binding';
+import {groupNodes} from '../core/groups';
 import {
     clearFocusFinished,
     getFocusElapsed,
@@ -18,7 +13,6 @@ import {
     setFocusElapsed,
     type PlaybackState,
 } from '../core/playback';
-import {groupNodes} from '../core/groups';
 import {pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled} from '../core/scrub';
 import {computeTimelineRows, computeTimelineSpan} from '../core/timeline';
 import {TimelineTrackRow} from './TimelineTrackRow';
@@ -64,7 +58,21 @@ function pickTickInterval(pxPerSecond: number): number {
  * apply only to the focused effect without stopping other previews.
  */
 export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
-    const {binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed, playbackEnabled = true} = props;
+    const {
+        binding,
+        selectedNode,
+        onSelectNode,
+        scene,
+        renderer,
+        playbackRef,
+        playheadRef,
+        counterRef,
+        stagePlaying,
+        setStagePlaying,
+        speed,
+        setSpeed,
+        playbackEnabled = true,
+    } = props;
 
     const [bodyWidthPx, setBodyWidthPx] = useState(600);
     const [collapsedGroups, setCollapsedGroups] = useState<Set<TransformNode>>(() => new Set());
@@ -168,7 +176,18 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
         };
         raf = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(raf);
-    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, focusRootId, playbackEnabled, binding, scene, renderer]);
+    }, [
+        pxPerSecond,
+        timelineSpan,
+        anyLooping,
+        playbackRef,
+        playheadRef,
+        focusRootId,
+        playbackEnabled,
+        binding,
+        scene,
+        renderer,
+    ]);
 
     const visibleRows = useMemo(() => {
         let hideUntilDepth: number | null = null;
@@ -295,7 +314,15 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
                 color: theme.text,
             }}
         >
-            <div style={{display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', borderBottom: `1px solid ${theme.border}`}}>
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '6px 10px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }}
+            >
                 <button
                     className="qe-hover"
                     style={{...overlayButton, opacity: playbackEnabled ? 1 : 0.45}}
@@ -341,9 +368,23 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
                         </option>
                     ))}
                 </select>
-                <span ref={counterRef} style={{fontSize: 12, color: theme.textDim, fontVariantNumeric: 'tabular-nums', paddingLeft: 4, minWidth: 120}} />
+                <span
+                    ref={counterRef}
+                    style={{
+                        fontSize: 12,
+                        color: theme.textDim,
+                        fontVariantNumeric: 'tabular-nums',
+                        paddingLeft: 4,
+                        minWidth: 120,
+                    }}
+                />
                 {groupSelection.size >= 2 && (
-                    <button className="qe-hover" style={overlayButton} title="Group the checked rows" onClick={groupSelectedNodes}>
+                    <button
+                        className="qe-hover"
+                        style={overlayButton}
+                        title="Group the checked rows"
+                        onClick={groupSelectedNodes}
+                    >
                         <RectangleGroupIcon style={iconStyle(14)} />
                         Group ({groupSelection.size})
                     </button>
@@ -385,7 +426,12 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
                             <div style={{height: RULER_HEIGHT}} />
                             <div
                                 className="qe-hover-bg"
-                                style={{position: 'relative', height: RULER_HEIGHT, cursor: 'ew-resize', overflow: 'hidden'}}
+                                style={{
+                                    position: 'relative',
+                                    height: RULER_HEIGHT,
+                                    cursor: 'ew-resize',
+                                    overflow: 'hidden',
+                                }}
                                 onPointerDown={(e) => {
                                     playbackRef.current.scrubbing = true;
                                     (e.target as Element).setPointerCapture(e.pointerId);
@@ -400,7 +446,19 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
                                 }}
                             >
                                 {ticks.map((t) => (
-                                    <div key={t} style={{position: 'absolute', left: TIMELINE_INSET + t * pxPerSecond, top: 0, bottom: 0, borderLeft: `1px solid ${theme.border}`, fontSize: 10, color: theme.textDim, paddingLeft: 3}}>
+                                    <div
+                                        key={t}
+                                        style={{
+                                            position: 'absolute',
+                                            left: TIMELINE_INSET + t * pxPerSecond,
+                                            top: 0,
+                                            bottom: 0,
+                                            borderLeft: `1px solid ${theme.border}`,
+                                            fontSize: 10,
+                                            color: theme.textDim,
+                                            paddingLeft: 3,
+                                        }}
+                                    >
                                         {t}s
                                     </div>
                                 ))}
@@ -434,16 +492,31 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
                                         pxPerSecond={pxPerSecond}
                                         offsetPx={TIMELINE_INSET}
                                         collapsed={row.kind === 'group' && collapsedGroups.has(row.node)}
-                                        onToggleCollapse={row.kind === 'group' ? () => toggleCollapse(row.node) : undefined}
+                                        onToggleCollapse={
+                                            row.kind === 'group' ? () => toggleCollapse(row.node) : undefined
+                                        }
                                         hidden={row.kind === 'track' && hiddenSystems.has(row.system)}
-                                        onToggleVisible={row.kind === 'track' ? () => toggleVisible(row.system) : undefined}
+                                        onToggleVisible={
+                                            row.kind === 'track' ? () => toggleVisible(row.system) : undefined
+                                        }
                                         groupSelected={groupSelection.has(row.node)}
                                         onToggleGroupSelect={() => toggleGroupSelect(row.node)}
                                     />
                                 ))}
                             </div>
                         </div>
-                        <div style={{position: 'absolute', top: 0, bottom: 0, left: LABEL_WIDTH, width: 1, background: theme.border, pointerEvents: 'none', zIndex: 3}} />
+                        <div
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: LABEL_WIDTH,
+                                width: 1,
+                                background: theme.border,
+                                pointerEvents: 'none',
+                                zIndex: 3,
+                            }}
+                        />
                         <div
                             ref={playheadRef}
                             style={{

package/src/react/TimelineTrackRow.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import {
     CheckIcon,
     ChevronDownIcon,
@@ -12,11 +12,11 @@ import {
     XMarkIcon,
 } from '@heroicons/react/24/solid';
 import type {ParticleSystem} from 'babylon.quarks';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import React, {useState} from 'react';
 import type {EffectBinding} from '../core/binding';
 import {buildEffectTree, collectSystems} from '../core/effectTree';
-import {createChildSystem, removeSystems} from '../core/systems';
 import {ungroupNode} from '../core/groups';
+import {createChildSystem, removeSystems} from '../core/systems';
 import type {TimelineRow} from '../core/timeline';
 import {PromptDialog} from './PromptDialog';
 import {iconStyle} from './icons';
@@ -56,7 +56,20 @@ const checkboxButton: React.CSSProperties = {...iconButton, width: 12, height: 1
 
 /** One row of the timeline: a label cell (name + actions) and, for tracks, a bar cell. */
 export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactElement {
-    const {row, binding, selected, onSelectNode, pxPerSecond, offsetPx, collapsed, onToggleCollapse, hidden, onToggleVisible, groupSelected, onToggleGroupSelect} = props;
+    const {
+        row,
+        binding,
+        selected,
+        onSelectNode,
+        pxPerSecond,
+        offsetPx,
+        collapsed,
+        onToggleCollapse,
+        hidden,
+        onToggleVisible,
+        groupSelected,
+        onToggleGroupSelect,
+    } = props;
     const [renaming, setRenaming] = useState(false);
 
     const isRoot = row.node === binding.root;
@@ -100,7 +113,16 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                             {groupSelected ? (
                                 <CheckIcon style={iconStyle(12)} />
                             ) : (
-                                <span style={{width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, display: 'block', boxSizing: 'border-box'}} />
+                                <span
+                                    style={{
+                                        width: 10,
+                                        height: 10,
+                                        border: `1px solid currentColor`,
+                                        borderRadius: 2,
+                                        display: 'block',
+                                        boxSizing: 'border-box',
+                                    }}
+                                />
                             )}
                         </button>
                     )}
@@ -113,7 +135,11 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                             onToggleCollapse?.();
                         }}
                     >
-                        {collapsed ? <ChevronRightIcon style={iconStyle(12)} /> : <ChevronDownIcon style={iconStyle(12)} />}
+                        {collapsed ? (
+                            <ChevronRightIcon style={iconStyle(12)} />
+                        ) : (
+                            <ChevronDownIcon style={iconStyle(12)} />
+                        )}
                     </span>
                     <span style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis'}}>{row.name}</span>
                     <button
@@ -139,10 +165,15 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                         <PlusIcon style={iconStyle(13)} />
                     </button>
                     {!isRoot && (
-                        <button className="qe-hover" title="Rename" style={{...iconButton, color: theme.textDim}} onClick={(e) => {
-                            e.stopPropagation();
-                            setRenaming(true);
-                        }}>
+                        <button
+                            className="qe-hover"
+                            title="Rename"
+                            style={{...iconButton, color: theme.textDim}}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setRenaming(true);
+                            }}
+                        >
                             <PencilSquareIcon style={iconStyle(12)} />
                         </button>
                     )}
@@ -166,7 +197,9 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                             style={{...iconButton, color: '#e08c8c'}}
                             onClick={(e) => {
                                 e.stopPropagation();
-                                removeSystems(binding, collectSystems(buildEffectTree(row.node)), (s) => onSelectNode(s.emitter));
+                                removeSystems(binding, collectSystems(buildEffectTree(row.node)), (s) =>
+                                    onSelectNode(s.emitter)
+                                );
                                 binding.apply(() => row.node.dispose(true, false));
                             }}
                         >
@@ -174,7 +207,11 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                         </button>
                     )}
                 </div>
-                <div className="qe-hover-bg" style={{height: ROW_HEIGHT, borderTop: `1px solid ${theme.border}`}} onClick={() => onSelectNode(row.node)} />
+                <div
+                    className="qe-hover-bg"
+                    style={{height: ROW_HEIGHT, borderTop: `1px solid ${theme.border}`}}
+                    onClick={() => onSelectNode(row.node)}
+                />
                 {renaming && (
                     <PromptDialog
                         title="Rename"
@@ -214,7 +251,16 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                         {groupSelected ? (
                             <CheckIcon style={iconStyle(12)} />
                         ) : (
-                            <span style={{width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, display: 'block', boxSizing: 'border-box'}} />
+                            <span
+                                style={{
+                                    width: 10,
+                                    height: 10,
+                                    border: `1px solid currentColor`,
+                                    borderRadius: 2,
+                                    display: 'block',
+                                    boxSizing: 'border-box',
+                                }}
+                            />
                         )}
                     </button>
                 )}
@@ -237,10 +283,15 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                     {system.onlyUsedByOther ? ' (sub)' : ''}
                 </span>
                 {!isRoot && (
-                    <button className="qe-hover" title="Rename" style={{...iconButton, color: theme.textDim}} onClick={(e) => {
-                        e.stopPropagation();
-                        setRenaming(true);
-                    }}>
+                    <button
+                        className="qe-hover"
+                        title="Rename"
+                        style={{...iconButton, color: theme.textDim}}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setRenaming(true);
+                        }}
+                    >
                         <PencilSquareIcon style={iconStyle(12)} />
                     </button>
                 )}
@@ -306,7 +357,9 @@ export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactEleme
                     }}
                 >
                     {row.looping && (
-                        <span style={{position: 'absolute', right: 4, top: -1, fontSize: 10, color: theme.text}}>⟳</span>
+                        <span style={{position: 'absolute', right: 4, top: -1, fontSize: 10, color: theme.text}}>
+                            ⟳
+                        </span>
                     )}
                 </div>
             </div>

package/src/react/ValueField.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ScalarGenerator, ScalarValueState, buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
 import {CurveEditor} from './CurveEditor';
 import {NumberField, Row, SelectField} from './fields';