@vgai/editor 0.2.0

package/src/components/inspectors/PhysicsSection.tsx

@@ -0,0 +1,326 @@
+import type { SceneCollider, SceneEnvironment, ScenePhysics } from '@engine/scene/scene-types';
+import { useEditorStore } from '../../EditorContext';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Tooltip } from '../primitives/Tooltip';
+import { Vec3Input } from '../primitives/Vec3Input';
+import type { SectionProps } from './multi-edit-utils';
+import { commonBool, commonNum, commonStr, commonVec3 } from './multi-edit-utils';
+
+const bodyTypes: ScenePhysics['bodyType'][] = ['dynamic', 'fixed', 'kinematic'];
+const colliderTypes: SceneCollider['type'][] = ['cuboid', 'ball', 'capsule', 'trimesh'];
+
+export function PhysicsSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  if (!entities.every((e) => e.physics)) return null;
+
+  const multi = entities.length > 1;
+
+  const bodyType = commonStr(entities, (e) => e.physics?.bodyType);
+  const colliderType = commonStr(entities, (e) => e.physics?.collider.type);
+  const mass = commonNum(entities, (e) => e.physics?.mass ?? 1);
+  const friction = commonNum(entities, (e) => e.physics?.collider.friction ?? 0.5);
+  const restitution = commonNum(entities, (e) => e.physics?.collider.restitution ?? 0);
+  const density = commonNum(entities, (e) => e.physics?.collider.density ?? 1);
+  const sensor = commonBool(entities, (e) => e.physics?.collider.isSensor ?? false);
+  const offset = commonVec3(entities, (e) => e.physics?.collider.offset ?? [0, 0, 0]);
+
+  const selectStyle: React.CSSProperties = {
+    width: '100%',
+    background: '#1e1e1e',
+    color: '#c5c8ce',
+    border: '1px solid #333',
+    borderRadius: 2,
+    padding: '3px 4px',
+    fontSize: 12,
+  };
+
+  const mixedSelectStyle = (isMixed: boolean): React.CSSProperties => ({
+    ...selectStyle,
+    color: isMixed ? '#666' : '#c5c8ce',
+    fontStyle: isMixed ? 'italic' : 'normal',
+  });
+
+  const update = (partial: Partial<ScenePhysics>) => {
+    store.batchMutate(ids, (entity) => {
+      if (entity.physics) Object.assign(entity.physics, partial);
+    });
+  };
+
+  const updateCollider = (partial: Partial<SceneCollider>) => {
+    store.batchMutate(ids, (entity) => {
+      if (entity.physics) Object.assign(entity.physics.collider, partial);
+    });
+  };
+
+  return (
+    <SectionHeader label="Physics">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div>
+          <Tooltip
+            text="Dynamic: simulated, Fixed: immovable, Kinematic: scripted"
+            position="right"
+          >
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Body Type</div>
+          </Tooltip>
+          <select
+            value={bodyType ?? ''}
+            onChange={(e) => update({ bodyType: e.target.value as ScenePhysics['bodyType'] })}
+            style={mixedSelectStyle(bodyType === null)}
+          >
+            {bodyType === null && (
+              <option value="" disabled>
+                (mixed)
+              </option>
+            )}
+            {bodyTypes.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <Tooltip text="Weight for physics simulation" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Mass</div>
+          </Tooltip>
+          <NumberInput value={mass} onChange={(v) => update({ mass: v })} step={0.1} />
+        </div>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Collider Type</div>
+          <select
+            value={colliderType ?? ''}
+            onChange={(e) => updateCollider({ type: e.target.value as SceneCollider['type'] })}
+            style={mixedSelectStyle(colliderType === null)}
+          >
+            {colliderType === null && (
+              <option value="" disabled>
+                (mixed)
+              </option>
+            )}
+            {colliderTypes.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+        {colliderType === 'cuboid' && (
+          <div>
+            <Tooltip text="Half-size from center to edge" position="right">
+              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Half Extents</div>
+            </Tooltip>
+            <Vec3Input
+              value={commonVec3(
+                entities,
+                (e) => e.physics?.collider.halfExtents ?? [0.5, 0.5, 0.5],
+              )}
+              onChange={(v) => updateCollider({ halfExtents: v })}
+              onAxisChange={(axis, v) => {
+                store.batchMutate(ids, (entity) => {
+                  if (!entity.physics) return;
+                  const he = [...(entity.physics.collider.halfExtents ?? [0.5, 0.5, 0.5])] as [
+                    number,
+                    number,
+                    number,
+                  ];
+                  he[axis] = v;
+                  entity.physics.collider.halfExtents = he;
+                });
+              }}
+              step={0.05}
+            />
+          </div>
+        )}
+        {colliderType === 'ball' && (
+          <div>
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Radius</div>
+            <NumberInput
+              value={commonNum(entities, (e) => e.physics?.collider.radius ?? 0.5)}
+              onChange={(v) => updateCollider({ radius: v })}
+              step={0.05}
+            />
+          </div>
+        )}
+        {colliderType === 'capsule' && (
+          <>
+            <div>
+              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Radius</div>
+              <NumberInput
+                value={commonNum(entities, (e) => e.physics?.collider.radius ?? 0.25)}
+                onChange={(v) => updateCollider({ radius: v })}
+                step={0.05}
+              />
+            </div>
+            <div>
+              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Half Height</div>
+              <NumberInput
+                value={commonNum(entities, (e) => e.physics?.collider.halfHeight ?? 0.5)}
+                onChange={(v) => updateCollider({ halfHeight: v })}
+                step={0.05}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Physics material */}
+        <div>
+          <Tooltip text="Surface friction — 0 = ice, 1+ = sticky" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Friction</div>
+          </Tooltip>
+          <NumberInput
+            value={friction}
+            onChange={(v) => updateCollider({ friction: v })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <Tooltip text="Bounciness — 0 = no bounce, 1 = full bounce" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Restitution</div>
+          </Tooltip>
+          <NumberInput
+            value={restitution}
+            onChange={(v) => updateCollider({ restitution: v })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <Tooltip text="Mass per volume — overrides mass when set" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Density</div>
+          </Tooltip>
+          <NumberInput
+            value={density}
+            onChange={(v) => updateCollider({ density: v })}
+            step={0.1}
+          />
+        </div>
+        <div>
+          <Tooltip text="Local offset from body origin" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Collider Offset</div>
+          </Tooltip>
+          <Vec3Input
+            value={offset}
+            onChange={(v) => updateCollider({ offset: v })}
+            onAxisChange={(axis, v) => {
+              store.batchMutate(ids, (entity) => {
+                if (!entity.physics) return;
+                const off = [...(entity.physics.collider.offset ?? [0, 0, 0])] as [
+                  number,
+                  number,
+                  number,
+                ];
+                off[axis] = v;
+                entity.physics.collider.offset = off;
+              });
+            }}
+            step={0.05}
+          />
+        </div>
+
+        {/* Sensor / Trigger */}
+        <div>
+          <Tooltip text="Detect overlaps without physical blocking" position="right">
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <input
+                type="checkbox"
+                checked={sensor ?? false}
+                ref={(el) => {
+                  if (el) el.indeterminate = sensor === null;
+                }}
+                onChange={(e) => updateCollider({ isSensor: e.target.checked })}
+              />
+              <span style={{ fontSize: 11, color: '#c5c8ce' }}>Is Sensor (Trigger)</span>
+            </div>
+          </Tooltip>
+        </div>
+
+        {/* Collision Layers — single entity only */}
+        {!multi && entities[0]!.physics && (
+          <CollisionLayersUI
+            collider={entities[0]!.physics!.collider}
+            updateCollider={(partial) => {
+              store.updateEntity(ids[0]!, {
+                physics: {
+                  ...entities[0]!.physics!,
+                  collider: { ...entities[0]!.physics!.collider, ...partial },
+                },
+              });
+            }}
+            env={store.environment}
+          />
+        )}
+      </div>
+    </SectionHeader>
+  );
+}
+
+// --- Collision Layers ---
+
+const layerLabelStyle: React.CSSProperties = {
+  fontSize: 10,
+  color: '#8c8c8c',
+  marginBottom: 2,
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  marginTop: 4,
+};
+
+const layerCheckStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  fontSize: 10,
+  color: '#c5c8ce',
+};
+
+function CollisionLayersUI({
+  collider,
+  updateCollider,
+  env,
+}: {
+  collider: SceneCollider;
+  updateCollider: (partial: Partial<SceneCollider>) => void;
+  env: SceneEnvironment | undefined;
+}) {
+  const layerNames = env?.physics?.collisionLayers;
+  if (!layerNames || layerNames.length === 0) return null;
+
+  const groups = collider.collisionGroups ?? 0xffff;
+  const filter = collider.collisionFilter ?? 0xffff;
+
+  const toggleBit = (field: 'collisionGroups' | 'collisionFilter', bit: number) => {
+    const current = field === 'collisionGroups' ? groups : filter;
+    updateCollider({ [field]: current ^ (1 << bit) });
+  };
+
+  return (
+    <>
+      <div style={layerLabelStyle}>Member Of</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+        {layerNames.map((name, i) => (
+          <label key={`g-${name}`} style={layerCheckStyle}>
+            <input
+              type="checkbox"
+              checked={(groups & (1 << i)) !== 0}
+              onChange={() => toggleBit('collisionGroups', i)}
+            />
+            {name}
+          </label>
+        ))}
+      </div>
+      <div style={layerLabelStyle}>Collides With</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+        {layerNames.map((name, i) => (
+          <label key={`f-${name}`} style={layerCheckStyle}>
+            <input
+              type="checkbox"
+              checked={(filter & (1 << i)) !== 0}
+              onChange={() => toggleBit('collisionFilter', i)}
+            />
+            {name}
+          </label>
+        ))}
+      </div>
+    </>
+  );
+}