babylon.quarks-editor 0.17.7 → 0.17.8

package/src/react/GradientEditor.tsx

@@ -1,127 +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>
-    );
-}
+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

@@ -1,54 +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>
-    );
-}
+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/ObjectModule.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {Quaternion} from '@babylonjs/core/Maths/math.vector';
+import {ModuleSection} from './ModuleSection';
+import {NumberField, Row} from './fields';
+
+const RAD_TO_DEG = 180 / Math.PI;
+const DEG_TO_RAD = Math.PI / 180;
+
+function getEulerDegrees(node: TransformNode): {x: number; y: number; z: number} {
+    const euler = node.rotationQuaternion ? node.rotationQuaternion.toEulerAngles() : node.rotation;
+    return {x: euler.x * RAD_TO_DEG, y: euler.y * RAD_TO_DEG, z: euler.z * RAD_TO_DEG};
+}
+
+function setEulerDegreeAxis(node: TransformNode, axis: 'x' | 'y' | 'z', degrees: number): void {
+    const euler = node.rotationQuaternion ? node.rotationQuaternion.toEulerAngles() : node.rotation.clone();
+    euler[axis] = degrees * DEG_TO_RAD;
+    if (node.rotationQuaternion) {
+        node.rotationQuaternion = Quaternion.FromEulerVector(euler);
+    } else {
+        node.rotation = euler;
+    }
+}
+
+function AxisRow(props: {label: string; values: {x: number; y: number; z: number}; step: number; onChange: (axis: 'x' | 'y' | 'z', value: number) => void}) {
+    return (
+        <Row label={props.label}>
+            <div style={{display: 'flex', gap: 4}}>
+                <NumberField value={props.values.x} step={props.step} onChange={(v) => props.onChange('x', v)} />
+                <NumberField value={props.values.y} step={props.step} onChange={(v) => props.onChange('y', v)} />
+                <NumberField value={props.values.z} step={props.step} onChange={(v) => props.onChange('z', v)} />
+            </div>
+        </Row>
+    );
+}
+
+export function ObjectModule(props: {node: TransformNode; label: string}) {
+    const {node} = props;
+    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)} />
+            <AxisRow label="Rotation" values={euler} step={1} onChange={(axis, v) => setEulerDegreeAxis(node, axis, v)} />
+            <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)} />
+        </ModuleSection>
+    );
+}

package/src/react/PromptDialog.tsx

@@ -1,85 +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>
-    );
-}
+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>
+    );
+}