@vgai/editor 0.2.0

package/src/components/inspectors/ParticleSection.tsx

@@ -0,0 +1,681 @@
+import type { SceneParticles } from '@engine/scene/scene-types';
+import type {
+  BehaviorJSON,
+  ColorGeneratorJSON,
+  EmitterShapeJSON,
+  ValueGeneratorJSON,
+} from '@engine/scene/schema/particles';
+import { useEditorStore } from '../../EditorContext';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import type { SectionProps } from './multi-edit-utils';
+
+const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+const subHeaderStyle: React.CSSProperties = {
+  fontSize: 10,
+  color: '#aaa',
+  fontWeight: 600,
+  textTransform: 'uppercase' as const,
+  marginTop: 4,
+  marginBottom: 4,
+};
+const selectStyle: React.CSSProperties = {
+  width: '100%',
+  background: '#1e1e1e',
+  color: '#c5c8ce',
+  border: '1px solid #333',
+  borderRadius: 2,
+  padding: '2px 4px',
+  fontSize: 11,
+};
+const rowStyle: React.CSSProperties = { display: 'flex', gap: 4, alignItems: 'center' };
+
+// --- Value Generator Editor ---
+
+function ValueGenEditor({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: ValueGeneratorJSON | undefined;
+  onChange: (v: ValueGeneratorJSON) => void;
+}) {
+  const gen = value ?? { type: 'ConstantValue' as const, value: 1 };
+
+  return (
+    <div>
+      <div style={labelStyle}>{label}</div>
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+        <select
+          value={gen.type}
+          onChange={(e) => {
+            const t = e.target.value;
+            if (t === 'ConstantValue') onChange({ type: 'ConstantValue', value: 1 });
+            else if (t === 'IntervalValue') onChange({ type: 'IntervalValue', a: 0.5, b: 1.5 });
+            else if (t === 'PiecewiseBezier')
+              onChange({
+                type: 'PiecewiseBezier',
+                functions: [{ function: { p0: 1, p1: 0.67, p2: 0.33, p3: 0 }, start: 0 }],
+              });
+          }}
+          style={{ ...selectStyle, width: 'auto', flex: '0 0 auto' }}
+        >
+          <option value="ConstantValue">Const</option>
+          <option value="IntervalValue">Range</option>
+          <option value="PiecewiseBezier">Curve</option>
+        </select>
+        <div style={{ flex: 1, display: 'flex', gap: 2 }}>
+          {gen.type === 'ConstantValue' && (
+            <NumberInput
+              value={gen.value}
+              onChange={(v) => onChange({ ...gen, value: v })}
+              step={0.1}
+            />
+          )}
+          {gen.type === 'IntervalValue' && (
+            <>
+              <NumberInput
+                value={gen.a}
+                onChange={(v) => onChange({ ...gen, a: v })}
+                step={0.1}
+                label="min"
+              />
+              <NumberInput
+                value={gen.b}
+                onChange={(v) => onChange({ ...gen, b: v })}
+                step={0.1}
+                label="max"
+              />
+            </>
+          )}
+          {gen.type === 'PiecewiseBezier' && (
+            <span style={{ fontSize: 10, color: '#666', padding: '2px 4px' }}>
+              {gen.functions.length} segment{gen.functions.length !== 1 ? 's' : ''}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- Color Generator Editor ---
+
+function ColorGenEditor({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: ColorGeneratorJSON | undefined;
+  onChange: (v: ColorGeneratorJSON) => void;
+}) {
+  const gen = value ?? { type: 'ConstantColor' as const, color: { r: 1, g: 1, b: 1, a: 1 } };
+
+  const toHex = (c: { r: number; g: number; b: number }) => {
+    const r = Math.round(c.r * 255)
+      .toString(16)
+      .padStart(2, '0');
+    const g = Math.round(c.g * 255)
+      .toString(16)
+      .padStart(2, '0');
+    const b = Math.round(c.b * 255)
+      .toString(16)
+      .padStart(2, '0');
+    return `#${r}${g}${b}`;
+  };
+
+  const fromHex = (hex: string) => {
+    const r = Number.parseInt(hex.slice(1, 3), 16) / 255;
+    const g = Number.parseInt(hex.slice(3, 5), 16) / 255;
+    const b = Number.parseInt(hex.slice(5, 7), 16) / 255;
+    return { r, g, b };
+  };
+
+  return (
+    <div>
+      <div style={labelStyle}>{label}</div>
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+        <select
+          value={gen.type}
+          onChange={(e) => {
+            const t = e.target.value;
+            if (t === 'ConstantColor')
+              onChange({ type: 'ConstantColor', color: { r: 1, g: 1, b: 1, a: 1 } });
+            else if (t === 'ColorRange')
+              onChange({
+                type: 'ColorRange',
+                a: { r: 1, g: 0.5, b: 0, a: 1 },
+                b: { r: 1, g: 0, b: 0, a: 1 },
+              });
+          }}
+          style={{ ...selectStyle, width: 'auto', flex: '0 0 auto' }}
+        >
+          <option value="ConstantColor">Solid</option>
+          <option value="ColorRange">Range</option>
+          <option value="Gradient">Gradient</option>
+          <option value="RandomColorBetweenGradient">Rnd Gradient</option>
+        </select>
+        <div style={{ flex: 1, display: 'flex', gap: 2, alignItems: 'center' }}>
+          {gen.type === 'ConstantColor' && (
+            <>
+              <input
+                type="color"
+                value={toHex(gen.color)}
+                onChange={(e) => {
+                  const rgb = fromHex(e.target.value);
+                  onChange({ ...gen, color: { ...rgb, a: gen.color.a } });
+                }}
+                style={{ width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' }}
+              />
+              <NumberInput
+                value={gen.color.a}
+                onChange={(v) => onChange({ ...gen, color: { ...gen.color, a: v } })}
+                step={0.05}
+                label="a"
+              />
+            </>
+          )}
+          {gen.type === 'ColorRange' && (
+            <>
+              <input
+                type="color"
+                value={toHex(gen.a)}
+                onChange={(e) => {
+                  const rgb = fromHex(e.target.value);
+                  onChange({ ...gen, a: { ...rgb, a: gen.a.a } });
+                }}
+                style={{ width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' }}
+              />
+              <input
+                type="color"
+                value={toHex(gen.b)}
+                onChange={(e) => {
+                  const rgb = fromHex(e.target.value);
+                  onChange({ ...gen, b: { ...rgb, a: gen.b.a } });
+                }}
+                style={{ width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' }}
+              />
+            </>
+          )}
+          {(gen.type === 'Gradient' || gen.type === 'RandomColorBetweenGradient') && (
+            <span style={{ fontSize: 10, color: '#666', padding: '2px 4px' }}>
+              (gradient editor)
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- Shape Editor ---
+
+const SHAPE_TYPES = [
+  'point',
+  'cone',
+  'sphere',
+  'hemisphere',
+  'circle',
+  'donut',
+  'rectangle',
+  'grid',
+] as const;
+
+function ShapeEditor({
+  value,
+  onChange,
+}: {
+  value: EmitterShapeJSON | undefined;
+  onChange: (v: EmitterShapeJSON) => void;
+}) {
+  const shape = value ?? { type: 'cone' as const };
+
+  return (
+    <div>
+      <div style={subHeaderStyle}>Shape</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div>
+          <div style={labelStyle}>Type</div>
+          <select
+            value={shape.type}
+            onChange={(e) => onChange({ type: e.target.value as EmitterShapeJSON['type'] })}
+            style={selectStyle}
+          >
+            {SHAPE_TYPES.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+        {shape.type !== 'point' && shape.type !== 'grid' && 'radius' in shape && (
+          <div>
+            <div style={labelStyle}>Radius</div>
+            <NumberInput
+              value={(shape as { radius?: number }).radius ?? 10}
+              onChange={(v) => onChange({ ...shape, radius: v } as EmitterShapeJSON)}
+              step={0.1}
+            />
+          </div>
+        )}
+        {shape.type === 'cone' && (
+          <div>
+            <div style={labelStyle}>Angle</div>
+            <NumberInput
+              value={shape.angle ?? 0.5236}
+              onChange={(v) => onChange({ ...shape, angle: v })}
+              step={0.05}
+            />
+          </div>
+        )}
+        {shape.type === 'donut' && (
+          <div>
+            <div style={labelStyle}>Donut Radius</div>
+            <NumberInput
+              value={shape.donutRadius ?? 2}
+              onChange={(v) => onChange({ ...shape, donutRadius: v })}
+              step={0.1}
+            />
+          </div>
+        )}
+        {(shape.type === 'rectangle' || shape.type === 'grid') && (
+          <div style={rowStyle}>
+            <NumberInput
+              value={(shape as { width?: number }).width ?? 10}
+              onChange={(v) => onChange({ ...shape, width: v } as EmitterShapeJSON)}
+              step={0.5}
+              label="W"
+            />
+            <NumberInput
+              value={(shape as { height?: number }).height ?? 10}
+              onChange={(v) => onChange({ ...shape, height: v } as EmitterShapeJSON)}
+              step={0.5}
+              label="H"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// --- Behavior list ---
+
+const BEHAVIOR_TYPES = [
+  'ApplyForce',
+  'ColorOverLife',
+  'SizeOverLife',
+  'SpeedOverLife',
+  'RotationOverLife',
+  'ForceOverLife',
+  'OrbitOverLife',
+  'Noise',
+  'TurbulenceField',
+  'FrameOverLife',
+  'LimitSpeedOverLife',
+  'ChangeEmitDirection',
+  'GravityForce',
+  'WidthOverLength',
+] as const;
+
+function defaultBehavior(type: string): BehaviorJSON {
+  switch (type) {
+    case 'ApplyForce':
+      return {
+        type: 'ApplyForce',
+        direction: [0, 1, 0],
+        magnitude: { type: 'ConstantValue', value: 2 },
+      };
+    case 'ColorOverLife':
+      return {
+        type: 'ColorOverLife',
+        color: {
+          type: 'Gradient',
+          color: {
+            type: 'CLinearFunction',
+            subType: 'Color',
+            keys: [
+              { value: { r: 1, g: 1, b: 1 }, pos: 0 },
+              { value: { r: 1, g: 0, b: 0 }, pos: 1 },
+            ],
+          },
+          alpha: {
+            type: 'CLinearFunction',
+            subType: 'Number',
+            keys: [
+              { value: 1, pos: 0 },
+              { value: 0, pos: 1 },
+            ],
+          },
+        },
+      };
+    case 'SizeOverLife':
+      return {
+        type: 'SizeOverLife',
+        size: {
+          type: 'PiecewiseBezier',
+          functions: [{ function: { p0: 1, p1: 0.67, p2: 0.33, p3: 0 }, start: 0 }],
+        },
+      };
+    case 'SpeedOverLife':
+      return {
+        type: 'SpeedOverLife',
+        speed: {
+          type: 'PiecewiseBezier',
+          functions: [{ function: { p0: 1, p1: 0.8, p2: 0.5, p3: 0.2 }, start: 0 }],
+        },
+      };
+    case 'RotationOverLife':
+      return { type: 'RotationOverLife', angularVelocity: { type: 'ConstantValue', value: 1 } };
+    case 'ForceOverLife':
+      return {
+        type: 'ForceOverLife',
+        x: { type: 'ConstantValue', value: 0 },
+        y: { type: 'ConstantValue', value: -9.8 },
+        z: { type: 'ConstantValue', value: 0 },
+      };
+    case 'Noise':
+      return {
+        type: 'Noise',
+        frequency: { type: 'ConstantValue', value: 1 },
+        power: { type: 'ConstantValue', value: 0.5 },
+      };
+    default:
+      return {
+        type: 'ApplyForce',
+        direction: [0, 1, 0],
+        magnitude: { type: 'ConstantValue', value: 1 },
+      };
+  }
+}
+
+function BehaviorListEditor({
+  behaviors,
+  onChange,
+}: {
+  behaviors: BehaviorJSON[];
+  onChange: (b: BehaviorJSON[]) => void;
+}) {
+  return (
+    <div>
+      <div
+        style={{
+          ...subHeaderStyle,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <span>Behaviors</span>
+        <select
+          value=""
+          onChange={(e) => {
+            if (e.target.value) {
+              onChange([...behaviors, defaultBehavior(e.target.value)]);
+              e.target.value = '';
+            }
+          }}
+          style={{ ...selectStyle, width: 'auto', fontSize: 10, padding: '1px 2px' }}
+        >
+          <option value="">+ Add</option>
+          {BEHAVIOR_TYPES.map((t) => (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          ))}
+        </select>
+      </div>
+      {behaviors.map((b, i) => (
+        <div
+          key={`${b.type}-${i}`}
+          style={{
+            background: '#1e1e1e',
+            borderRadius: 2,
+            padding: '4px 6px',
+            marginBottom: 3,
+            border: '1px solid #333',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: 2,
+            }}
+          >
+            <span style={{ fontSize: 10, color: '#aaa', fontWeight: 600 }}>{b.type}</span>
+            <button
+              type="button"
+              onClick={() => onChange(behaviors.filter((_, j) => j !== i))}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: '#666',
+                cursor: 'pointer',
+                fontSize: 12,
+                padding: '0 2px',
+              }}
+            >
+              ×
+            </button>
+          </div>
+          {/* Inline editing for common behaviors */}
+          {b.type === 'ApplyForce' && (
+            <div style={{ display: 'flex', gap: 2 }}>
+              <NumberInput
+                value={b.direction[0]}
+                onChange={(v) => {
+                  const next = {
+                    ...b,
+                    direction: [v, b.direction[1], b.direction[2]] as [number, number, number],
+                  };
+                  onChange(behaviors.map((x, j) => (j === i ? next : x)));
+                }}
+                step={0.1}
+                label="X"
+              />
+              <NumberInput
+                value={b.direction[1]}
+                onChange={(v) => {
+                  const next = {
+                    ...b,
+                    direction: [b.direction[0], v, b.direction[2]] as [number, number, number],
+                  };
+                  onChange(behaviors.map((x, j) => (j === i ? next : x)));
+                }}
+                step={0.1}
+                label="Y"
+              />
+              <NumberInput
+                value={b.direction[2]}
+                onChange={(v) => {
+                  const next = {
+                    ...b,
+                    direction: [b.direction[0], b.direction[1], v] as [number, number, number],
+                  };
+                  onChange(behaviors.map((x, j) => (j === i ? next : x)));
+                }}
+                step={0.1}
+                label="Z"
+              />
+            </div>
+          )}
+        </div>
+      ))}
+      {behaviors.length === 0 && (
+        <div style={{ fontSize: 10, color: '#555', padding: '2px 0' }}>No behaviors</div>
+      )}
+    </div>
+  );
+}
+
+// --- Main Section ---
+
+export function ParticleSection({ entities }: SectionProps) {
+  const store = useEditorStore();
+  if (entities.length !== 1) return null;
+  const entity = entities[0]!;
+  const particles = entity.particles;
+  if (!particles) return null;
+
+  const id = entity.id!;
+  const update = (partial: Partial<SceneParticles>) => {
+    store.updateEntity(id, { particles: { ...particles, ...partial } });
+  };
+
+  return (
+    <SectionHeader label="Particles">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {/* Lifecycle */}
+        <div style={rowStyle}>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              fontSize: 11,
+              color: '#c5c8ce',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={particles.looping !== false}
+              onChange={(e) => update({ looping: e.target.checked })}
+            />
+            Loop
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              fontSize: 11,
+              color: '#c5c8ce',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={particles.worldSpace ?? false}
+              onChange={(e) => update({ worldSpace: e.target.checked })}
+            />
+            World
+          </label>
+        </div>
+
+        <div>
+          <div style={labelStyle}>Duration</div>
+          <NumberInput
+            value={particles.duration ?? 1}
+            onChange={(v) => update({ duration: v })}
+            step={0.1}
+          />
+        </div>
+
+        {/* Emission */}
+        <ValueGenEditor
+          label="Emission Rate"
+          value={particles.emissionOverTime}
+          onChange={(v) => update({ emissionOverTime: v })}
+        />
+
+        {/* Shape */}
+        <ShapeEditor value={particles.shape} onChange={(v) => update({ shape: v })} />
+
+        {/* Initial values */}
+        <div style={subHeaderStyle}>Initial Values</div>
+        <ValueGenEditor
+          label="Lifetime"
+          value={particles.startLife}
+          onChange={(v) => update({ startLife: v })}
+        />
+        <ValueGenEditor
+          label="Speed"
+          value={particles.startSpeed}
+          onChange={(v) => update({ startSpeed: v })}
+        />
+        <ValueGenEditor
+          label="Size"
+          value={particles.startSize}
+          onChange={(v) => update({ startSize: v })}
+        />
+        <ColorGenEditor
+          label="Color"
+          value={particles.startColor}
+          onChange={(v) => update({ startColor: v })}
+        />
+
+        {/* Render mode */}
+        <div>
+          <div style={labelStyle}>Render Mode</div>
+          <select
+            value={particles.renderMode ?? 'billboard'}
+            onChange={(e) => update({ renderMode: e.target.value as SceneParticles['renderMode'] })}
+            style={selectStyle}
+          >
+            <option value="billboard">Billboard</option>
+            <option value="stretchedBillboard">Stretched</option>
+            <option value="horizontalBillboard">Horizontal</option>
+            <option value="verticalBillboard">Vertical</option>
+            <option value="mesh">Mesh</option>
+            <option value="trail">Trail</option>
+          </select>
+        </div>
+
+        {/* Material */}
+        <div style={subHeaderStyle}>Material</div>
+        <div>
+          <div style={labelStyle}>Blending</div>
+          <select
+            value={particles.material.blending ?? 'additive'}
+            onChange={(e) =>
+              update({
+                material: {
+                  ...particles.material,
+                  blending: e.target.value as 'normal' | 'additive',
+                },
+              })
+            }
+            style={selectStyle}
+          >
+            <option value="additive">Additive</option>
+            <option value="normal">Normal</option>
+          </select>
+        </div>
+        <div>
+          <div style={labelStyle}>Texture</div>
+          <input
+            value={particles.material.map ?? ''}
+            placeholder="path/to/sprite.png"
+            onChange={(e) => {
+              const mat = { ...particles.material };
+              if (e.target.value) {
+                mat.map = e.target.value;
+              } else {
+                delete mat.map;
+              }
+              update({ material: mat });
+            }}
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              color: '#c5c8ce',
+              border: '1px solid #333',
+              borderRadius: 2,
+              padding: '2px 4px',
+              fontSize: 11,
+            }}
+          />
+        </div>
+
+        {/* Behaviors */}
+        <BehaviorListEditor
+          behaviors={particles.behaviors ?? []}
+          onChange={(b) => update({ behaviors: b })}
+        />
+      </div>
+    </SectionHeader>
+  );
+}