babylon.quarks-editor 0.17.7

package/src/react/fields.tsx

@@ -0,0 +1,76 @@
+import React, {useEffect, useState} from 'react';
+import {inputStyle, labelStyle, rowStyle} from './theme';
+
+export function Row(props: {label: string; children: React.ReactNode}) {
+    return (
+        <div style={rowStyle}>
+            <span style={labelStyle} title={props.label}>
+                {props.label}
+            </span>
+            {props.children}
+        </div>
+    );
+}
+
+/** Number input that keeps focus-friendly local text state and commits parsed values. */
+export function NumberField(props: {value: number; onChange: (value: number) => void; step?: number; min?: number}) {
+    const [text, setText] = useState(String(round(props.value)));
+    useEffect(() => {
+        setText(String(round(props.value)));
+    }, [props.value]);
+    return (
+        <input
+            type="number"
+            className="qe-hover"
+            style={inputStyle}
+            value={text}
+            step={props.step ?? 0.1}
+            min={props.min}
+            onChange={(e) => {
+                setText(e.target.value);
+                const parsed = parseFloat(e.target.value);
+                if (!Number.isNaN(parsed)) {
+                    props.onChange(props.min !== undefined ? Math.max(props.min, parsed) : parsed);
+                }
+            }}
+        />
+    );
+}
+
+export function CheckboxField(props: {value: boolean; onChange: (value: boolean) => void}) {
+    return (
+        <input
+            type="checkbox"
+            className="qe-hover"
+            checked={props.value}
+            onChange={(e) => props.onChange(e.target.checked)}
+            style={{justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer'}}
+        />
+    );
+}
+
+export function SelectField<T extends string | number>(props: {
+    value: T;
+    options: Array<{value: T; label: string}>;
+    onChange: (value: T) => void;
+}) {
+    const numeric = typeof props.value === 'number';
+    return (
+        <select
+            className="qe-hover"
+            style={{...inputStyle, cursor: 'pointer'}}
+            value={String(props.value)}
+            onChange={(e) => props.onChange((numeric ? Number(e.target.value) : e.target.value) as T)}
+        >
+            {props.options.map((o) => (
+                <option key={String(o.value)} value={String(o.value)}>
+                    {o.label}
+                </option>
+            ))}
+        </select>
+    );
+}
+
+function round(v: number): number {
+    return Math.round(v * 1000) / 1000;
+}

package/src/react/index.ts

@@ -0,0 +1,43 @@
+export {EffectEditor} from './EffectEditor';
+export type {EffectEditorProps} from './EffectEditor';
+export {
+    SpeedOverLifeModule,
+    LimitSpeedOverLifeModule,
+    ForceOverLifeModule,
+    GravityModule,
+    RotationOverLifeModule,
+    NoiseModule,
+    TurbulenceModule,
+    CollisionModule,
+    EmitDirectionModule,
+    TextureSheetModule,
+    ColorBySpeedModule,
+    SizeBySpeedModule,
+    RotationBySpeedModule,
+    OrbitOverLifeModule,
+    WidthOverTrailModule,
+} from './behaviorModules';
+export type {TextureOption, GeometryOption, GeometryData} from './modules';
+export {SubEmittersModule} from './SubEmittersModule';
+export {TimelinePanel} from './TimelinePanel';
+export type {TimelinePanelProps, PlaybackState} from './TimelinePanel';
+export {TimelineTrackRow} from './TimelineTrackRow';
+export type {TimelineTrackRowProps} from './TimelineTrackRow';
+export {ModuleSection} from './ModuleSection';
+export {PromptDialog} from './PromptDialog';
+export type {PromptDialogProps} from './PromptDialog';
+export {CurveEditor} from './CurveEditor';
+export {GradientEditor} from './GradientEditor';
+export {ValueField} from './ValueField';
+export {Row, NumberField, CheckboxField, SelectField} from './fields';
+export {
+    MainModule,
+    EmissionModule,
+    ShapeModule,
+    SizeOverLifeModule,
+    ColorOverLifeModule,
+    RendererModule,
+} from './modules';
+export {theme, inputStyle, rowStyle, labelStyle, buttonStyle} from './theme';
+export {EffectEditorHost, QuarksEffectEditor} from './EffectEditorHost';
+export type {EffectEditorHostProps, EffectEditorHostHandle} from './EffectEditorHost';