babylon.quarks-editor 0.17.7

package/src/react/GradientEditor.tsx

@@ -0,0 +1,127 @@
+import React, {useRef, useState} from 'react';
+import {GradientStop, hexToRgb, rgbToHex, stopsToCssGradient} from '../core/colors';
+import {NumberField, Row} from './fields';
+import {buttonStyle, theme} from './theme';
+
+const BAR_WIDTH = 218;
+
+/** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
+export function GradientEditor(props: {stops: GradientStop[]; onChange: (stops: GradientStop[]) => void}) {
+    const [selected, setSelected] = useState(0);
+    const barRef = useRef<HTMLDivElement>(null);
+    const dragging = useRef(false);
+
+    const stops = props.stops;
+    const current = stops[Math.min(selected, stops.length - 1)];
+
+    const posFromEvent = (clientX: number) => {
+        const rect = barRef.current!.getBoundingClientRect();
+        return Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    };
+
+    const updateStop = (index: number, patch: Partial<GradientStop>) => {
+        const next = stops.map((s, i) => (i === index ? {...s, ...patch} : s));
+        props.onChange(next);
+    };
+
+    return (
+        <div>
+            <div
+                ref={barRef}
+                className="qe-hover"
+                style={{
+                    position: 'relative',
+                    width: BAR_WIDTH,
+                    height: 20,
+                    borderRadius: 6,
+                    border: `1px solid ${theme.border}`,
+                    background: `${stopsToCssGradient(stops)}, repeating-conic-gradient(#333 0% 25%, #555 0% 50%) 0 0 / 10px 10px`,
+                    cursor: 'copy',
+                }}
+                onPointerDown={(e) => {
+                    if (e.target !== barRef.current) {
+                        return;
+                    }
+                    const pos = posFromEvent(e.clientX);
+                    const base = current ?? {r: 1, g: 1, b: 1, a: 1, pos: 0};
+                    const next = [...stops, {...base, pos}];
+                    props.onChange(next);
+                    setSelected(next.length - 1);
+                }}
+                onPointerMove={(e) => {
+                    if (dragging.current) {
+                        updateStop(selected, {pos: posFromEvent(e.clientX)});
+                    }
+                }}
+                onPointerUp={() => {
+                    dragging.current = false;
+                }}
+            >
+                {stops.map((stop, i) => (
+                    <div
+                        key={i}
+                        className="qe-hover"
+                        style={{
+                            position: 'absolute',
+                            left: `calc(${stop.pos * 100}% - 6px)`,
+                            top: -4,
+                            width: 12,
+                            height: 26,
+                            borderRadius: 4,
+                            background: rgbToHex(stop.r, stop.g, stop.b),
+                            border: `2px solid ${i === selected ? theme.accent : '#0a1020'}`,
+                            cursor: 'ew-resize',
+                            boxSizing: 'border-box',
+                        }}
+                        onPointerDown={(e) => {
+                            e.stopPropagation();
+                            setSelected(i);
+                            dragging.current = true;
+                            (e.currentTarget as Element).setPointerCapture(e.pointerId);
+                        }}
+                        onPointerMove={(e) => {
+                            if (dragging.current && i === selected) {
+                                updateStop(i, {pos: posFromEvent(e.clientX)});
+                            }
+                        }}
+                        onPointerUp={(e) => {
+                            dragging.current = false;
+                            (e.currentTarget as Element).releasePointerCapture(e.pointerId);
+                        }}
+                    />
+                ))}
+            </div>
+            {current && (
+                <>
+                    <Row label="Stop color">
+                        <input
+                            type="color"
+                            className="qe-hover"
+                            value={rgbToHex(current.r, current.g, current.b)}
+                            onChange={(e) => updateStop(selected, hexToRgb(e.target.value))}
+                            style={{width: 42, height: 24, border: 'none', background: 'transparent', padding: 0, cursor: 'pointer'}}
+                        />
+                    </Row>
+                    <Row label="Stop alpha">
+                        <NumberField value={current.a} min={0} step={0.05} onChange={(a) => updateStop(selected, {a: Math.min(1, a)})} />
+                    </Row>
+                    <Row label="Stop position">
+                        <NumberField value={current.pos} min={0} step={0.05} onChange={(pos) => updateStop(selected, {pos: Math.min(1, pos)})} />
+                    </Row>
+                    {stops.length > 2 && (
+                        <button
+                            className="qe-hover"
+                            style={{...buttonStyle, marginTop: 6}}
+                            onClick={() => {
+                                props.onChange(stops.filter((_, i) => i !== selected));
+                                setSelected(0);
+                            }}
+                        >
+                            Remove stop
+                        </button>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}

package/src/react/ModuleSection.tsx

@@ -0,0 +1,54 @@
+import React, {useState} from 'react';
+import {theme} from './theme';
+
+/** Unity-style module foldout with an optional enable checkbox. */
+export function ModuleSection(props: {
+    title: string;
+    children: React.ReactNode;
+    enabled?: boolean;
+    onToggle?: (enabled: boolean) => void;
+    defaultOpen?: boolean;
+}) {
+    const [open, setOpen] = useState(props.defaultOpen ?? true);
+    const toggleable = props.onToggle !== undefined;
+    const dimmed = toggleable && props.enabled === false;
+    return (
+        <section
+            style={{
+                border: `1px solid ${theme.border}`,
+                borderRadius: 10,
+                background: theme.sectionBg,
+                marginTop: 8,
+                overflow: 'hidden',
+            }}
+        >
+            <header
+                className="qe-hover"
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '7px 10px',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    background: 'rgba(20, 30, 60, 0.5)',
+                }}
+                onClick={() => setOpen(!open)}
+            >
+                <span style={{color: theme.accent, fontSize: 10, width: 10}}>{open ? '▼' : '►'}</span>
+                {toggleable && (
+                    <input
+                        type="checkbox"
+                        className="qe-hover"
+                        checked={props.enabled}
+                        onClick={(e) => e.stopPropagation()}
+                        onChange={(e) => props.onToggle?.(e.target.checked)}
+                        style={{width: 14, height: 14, accentColor: '#78a5ff', cursor: 'pointer'}}
+                    />
+                )}
+                <span style={{color: dimmed ? theme.textDim : theme.text, fontSize: 13, fontWeight: 600}}>{props.title}</span>
+            </header>
+            {open && !dimmed && <div style={{padding: '4px 10px 10px'}}>{props.children}</div>}
+        </section>
+    );
+}

package/src/react/PromptDialog.tsx

@@ -0,0 +1,85 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {buttonStyle, inputStyle, theme} from './theme';
+
+export interface PromptDialogProps {
+    title: string;
+    defaultValue?: string;
+    placeholder?: string;
+    confirmLabel?: string;
+    /** Rejects empty/whitespace-only input by default (matches the old prompt() behavior). */
+    allowEmpty?: boolean;
+    onSubmit: (value: string) => void;
+    onCancel: () => void;
+}
+
+/** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on
+ * Enter, cancels on Escape or backdrop click. */
+export function PromptDialog(props: PromptDialogProps): React.ReactElement {
+    const {title, defaultValue = '', placeholder, confirmLabel = 'OK', allowEmpty = false, onSubmit, onCancel} = props;
+    const [value, setValue] = useState(defaultValue);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+
+    const submit = () => {
+        const trimmed = value.trim();
+        if (trimmed || allowEmpty) {
+            onSubmit(trimmed);
+        } else {
+            onCancel();
+        }
+    };
+
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                inset: 0,
+                background: 'rgba(3, 5, 12, 0.6)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 1000,
+                fontFamily: theme.font,
+            }}
+            onClick={onCancel}
+        >
+            <div
+                style={{
+                    background: theme.panelBg,
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 10,
+                    padding: 16,
+                    minWidth: 300,
+                    boxShadow: '0 12px 32px rgba(0, 0, 0, 0.5)',
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div style={{fontSize: 13, color: theme.text, marginBottom: 10}}>{title}</div>
+                <input
+                    ref={inputRef}
+                    className="qe-hover"
+                    style={{...inputStyle, marginBottom: 14}}
+                    value={value}
+                    placeholder={placeholder}
+                    onChange={(e) => setValue(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') submit();
+                        if (e.key === 'Escape') onCancel();
+                    }}
+                />
+                <div style={{display: 'flex', justifyContent: 'flex-end', gap: 8}}>
+                    <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}>
+                        {confirmLabel}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/react/SubEmittersModule.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {EmitSubParticleSystem, SubParticleEmitMode} from 'babylon.quarks';
+import type {ParticleEmitter, ParticleSystem} from 'babylon.quarks';
+import {EffectBinding} from '../core/binding';
+import {findBehavior} from '../core/colors';
+import {createChildSystem} from '../core/systems';
+import {ModuleSection} from './ModuleSection';
+import {CheckboxField, NumberField, Row, SelectField} from './fields';
+import {theme} from './theme';
+
+/**
+ * Sub Emitters module for the currently selected system. The spawned target lives as a
+ * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).
+ */
+export function SubEmittersModule(props: {binding: EffectBinding; rootBinding: EffectBinding}) {
+    const {binding, rootBinding} = props;
+    const system = binding.system;
+    const behavior = findBehavior<EmitSubParticleSystem>(system.behaviors, 'EmitSubParticleSystem');
+    const target = (behavior?.subParticleSystem as ParticleEmitter | undefined)?.system as ParticleSystem | undefined;
+
+    return (
+        <ModuleSection
+            title="Sub Emitters"
+            enabled={!!behavior}
+            defaultOpen={false}
+            onToggle={(enabled) =>
+                binding.apply((s) => {
+                    for (let i = s.behaviors.length - 1; i >= 0; i--) {
+                        if ((s.behaviors[i] as {type?: string}).type === 'EmitSubParticleSystem') {
+                            s.behaviors.splice(i, 1);
+                        }
+                    }
+                    if (enabled) {
+                        const sub = createChildSystem(s, {oneShot: true});
+                        s._renderer?.addSystem(sub);
+                        rootBinding.addSubSystem(sub);
+                        s.addBehavior(new EmitSubParticleSystem(s, false, sub.emitter, SubParticleEmitMode.Death, 1));
+                    } else if (target) {
+                        s._renderer?.deleteSystem(target);
+                        target.dispose();
+                        rootBinding.removeSubSystem(target);
+                    }
+                })
+            }
+        >
+            {behavior && (
+                <>
+                    <Row label="Trigger">
+                        <SelectField
+                            value={behavior.mode}
+                            options={[
+                                {value: SubParticleEmitMode.Death, label: 'On death'},
+                                {value: SubParticleEmitMode.Birth, label: 'On birth'},
+                                {value: SubParticleEmitMode.Frame, label: 'Every frame'},
+                            ]}
+                            onChange={(mode) => binding.apply(() => (behavior.mode = mode))}
+                        />
+                    </Row>
+                    <Row label="Probability">
+                        <NumberField
+                            value={behavior.emitProbability}
+                            min={0}
+                            step={0.05}
+                            onChange={(v) => binding.apply(() => (behavior.emitProbability = Math.min(1, v)))}
+                        />
+                    </Row>
+                    <Row label="Use velocity">
+                        <CheckboxField
+                            value={behavior.useVelocityAsBasis}
+                            onChange={(v) => binding.apply(() => (behavior.useVelocityAsBasis = v))}
+                        />
+                    </Row>
+                    <p style={{margin: '8px 0 2px', color: theme.textDim, fontSize: 11.5}}>
+                        Spawns “{target?.emitter.name ?? 'sub-emitter'}” — select it in the hierarchy above to edit it.
+                    </p>
+                </>
+            )}
+        </ModuleSection>
+    );
+}