castle-web-cli 0.4.128 → 0.4.130

package/kits/physics-3d/engine3d/PxModelEditor.jsx

@@ -0,0 +1,619 @@
+// The `.pxmodel` editor: the model on an orbit stage with part picking and
+// move/rotate gizmos, a parts-list + part-fields inspector in the shared
+// design system, add/duplicate/delete parts, a walk-preview toggle, and
+// text-level undo/redo with debounced saves. The FILE is the source of truth;
+// every edit round-trips through parse -> mutate -> sparse serialize.
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ColorField,
+  EditorBody,
+  MainEditor,
+  NumberField,
+  Panel,
+  SelectField,
+  SheetGrabHandle,
+  TextField,
+  cx,
+  styles,
+  useMobileSheet,
+} from '@imports/castle.physics-2d/engine/ui';
+import { useEditHistory } from '@imports/castle.physics-2d/editors/editorHistory';
+import { useLiveDeckFiles3D, useStableSprites, fetchMissingFile } from './modelFiles';
+import { parseModelCached, parseModel, serializeModel, STARTER_MODEL_TEXT } from './pxmodel';
+import { boxMesh, extrudeFace, roundMeshInPlace } from './meshops';
+import {
+  createModelEditorWorld,
+  setEditorModel,
+  disposeModelEditorWorld,
+} from './modelEditorWorld';
+import {
+  HotbarButton,
+  StageCanvas,
+  StageControls,
+  useEditorShortcuts,
+  useFileSaver3D,
+} from './editorChrome';
+
+const KIND_OPTIONS = [
+  { value: 'box', label: 'Box', icon: 'square' },
+  { value: 'sphere', label: 'Sphere', icon: 'circle' },
+  { value: 'cylinder', label: 'Cylinder', glyph: 'cylinder' },
+  { value: 'capsule', label: 'Capsule', glyph: 'capsule' },
+];
+
+function dedupePartId(parts, base) {
+  const taken = new Set(parts.map((part) => part.id));
+  if (!taken.has(base)) return base;
+  for (let n = 2; ; n++) {
+    if (!taken.has(`${base}-${n}`)) return `${base}-${n}`;
+  }
+}
+
+function descendantIds(parts, rootId) {
+  const out = new Set([rootId]);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const part of parts) {
+      if (part.parent && out.has(part.parent) && !out.has(part.id)) {
+        out.add(part.id);
+        grew = true;
+      }
+    }
+  }
+  return out;
+}
+
+export function PxModelEditor({ path }) {
+  const saver = useFileSaver3D();
+  const { files, setFiles, dataVersion } = useLiveDeckFiles3D({
+    shouldSkipPath: saver.hasPending,
+  });
+  const text = files[path];
+  useEffect(() => {
+    if (text === undefined) void fetchMissingFile(path, setFiles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text === undefined]);
+  const onChangeText = (next) => {
+    setFiles((current) => ({ ...current, [path]: next }));
+    saver.schedule(path, next);
+  };
+  const history = useEditHistory(text ?? '', onChangeText, path);
+  const sprites = useStableSprites(files);
+  // A brand-new (empty) file edits as the starter model; the first commit
+  // writes it out for real.
+  const model =
+    text && text.trim()
+      ? parseModelCached(text)
+      : text !== undefined
+        ? parseModel(STARTER_MODEL_TEXT)
+        : null;
+
+  const [mode, setMode] = useState('move');
+  const [selectedPartId, setSelectedPartId] = useState(null);
+  const [meshEdit, setMeshEdit] = useState(null); // { partId, mode: 'face'|'vertex', selection: [] }
+  const [walk, setWalk] = useState(false);
+  const canvasRef = useRef(null);
+  const medRef = useRef(null);
+
+  const commitModel = (mutate, options) => {
+    if (!model) return;
+    const next = structuredClone(model);
+    mutate(next);
+    history.commit(serializeModel(next), options);
+  };
+
+  const callbacks = {
+    onPickPart: (partId) => setSelectedPartId(partId),
+    onEditPick: (index, additive) =>
+      setMeshEdit((current) => {
+        if (!current) return current;
+        if (index == null) return { ...current, selection: additive ? current.selection : [] };
+        const has = current.selection.includes(index);
+        const selection = additive
+          ? has
+            ? current.selection.filter((candidate) => candidate !== index)
+            : [...current.selection, index]
+          : [index];
+        return { ...current, selection };
+      }),
+    onCommitMeshVertices: (partId, vertices) =>
+      commitModel((next) => {
+        const part = next.parts.find((candidate) => candidate.id === partId);
+        if (part) part.vertices = vertices;
+      }),
+    onCommitPart: (partId, patch) =>
+      commitModel((next) => {
+        const part = next.parts.find((candidate) => candidate.id === partId);
+        if (part) Object.assign(part, patch);
+      }),
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const med = createModelEditorWorld(canvas, callbacks);
+    medRef.current = med;
+    return () => {
+      disposeModelEditorWorld(med);
+      medRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (medRef.current) medRef.current.callbacks = callbacks;
+  });
+  useEffect(() => {
+    const med = medRef.current;
+    if (!med || !model || med.gizmoDragging) return;
+    setEditorModel(med, model, sprites);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, dataVersion]);
+  useEffect(() => {
+    const med = medRef.current;
+    if (!med) return;
+    med.mode = mode;
+    med.selectedPartId = selectedPartId;
+    med.edit = meshEdit;
+    med.walk = walk;
+  }, [mode, selectedPartId, walk, meshEdit]);
+
+  const addPart = (kind) => {
+    let id;
+    commitModel((next) => {
+      id = dedupePartId(next.parts, kind);
+      const part = { id, kind, position: [0, 0.5, 0] };
+      if (kind === 'sphere') part.radius = 0.4;
+      if (kind === 'cylinder' || kind === 'capsule') {
+        part.radius = 0.3;
+        part.height = 0.9;
+      }
+      if (kind === 'box') part.size = [0.6, 0.6, 0.6];
+      next.parts.push(part);
+    });
+    if (id) setSelectedPartId(id);
+  };
+  const duplicatePart = () => {
+    if (!selectedPartId) return;
+    let id;
+    commitModel((next) => {
+      const source = next.parts.find((part) => part.id === selectedPartId);
+      if (!source) return;
+      const copy = structuredClone(source);
+      id = dedupePartId(next.parts, source.id.replace(/-\d+$/, ''));
+      copy.id = id;
+      copy.position = [...copy.position];
+      copy.position[0] += 0.2;
+      next.parts.push(copy);
+    });
+    if (id) setSelectedPartId(id);
+  };
+  const deletePart = () => {
+    if (!selectedPartId) return;
+    commitModel((next) => {
+      const removed = next.parts.find((part) => part.id === selectedPartId);
+      if (!removed) return;
+      next.parts = next.parts.filter((part) => part.id !== selectedPartId);
+      for (const part of next.parts) {
+        if (part.parent === selectedPartId) {
+          // Keep the child where it was: fold the removed pivot into it.
+          part.parent = removed.parent ?? '';
+          part.position = part.position.map((v, i) => v + removed.position[i]);
+        }
+      }
+    });
+    setSelectedPartId(null);
+  };
+
+  const selectedPart = model?.parts.find((candidate) => candidate.id === selectedPartId);
+  const enterMeshEdit = () => {
+    if (selectedPart?.kind !== 'mesh') return;
+    setMeshEdit({ partId: selectedPart.id, mode: 'face', selection: [] });
+    setMode('move');
+  };
+  const exitMeshEdit = () => setMeshEdit(null);
+  const convertToMesh = () => {
+    if (selectedPart?.kind !== 'box') return;
+    commitModel((next) => {
+      const part = next.parts.find((candidate) => candidate.id === selectedPartId);
+      if (!part) return;
+      const { vertices, faces } = boxMesh(part.size);
+      part.kind = 'mesh';
+      part.vertices = vertices;
+      part.faces = faces;
+    });
+  };
+  const extrudeSelection = () => {
+    if (!meshEdit || meshEdit.mode !== 'face' || meshEdit.selection.length === 0) return;
+    commitModel((next) => {
+      const part = next.parts.find((candidate) => candidate.id === meshEdit.partId);
+      if (!part) return;
+      for (const faceIndex of meshEdit.selection) extrudeFace(part, faceIndex, 0.25);
+      roundMeshInPlace(part);
+    });
+  };
+
+  useEditorShortcuts({
+    history,
+    setMode,
+    onDuplicate: meshEdit ? undefined : duplicatePart,
+    onDelete: meshEdit ? undefined : deletePart,
+    onEscape: () => (meshEdit ? exitMeshEdit() : setSelectedPartId(null)),
+  });
+
+  const toggleWalk = () => {
+    const next = !walk;
+    setWalk(next);
+    const med = medRef.current;
+    if (!next && med && model) {
+      med.walkClock = 0;
+      setEditorModel(med, model, sprites); // restore the authored pose
+    }
+  };
+
+  if (!model) {
+    return (
+      <div className={styles.panelBare}>
+        <MainEditor>
+          <EditorBody>
+            <div className={styles.inspector}>
+              {text === undefined ? 'loading…' : `${path}: not a valid .pxmodel`}
+            </div>
+          </EditorBody>
+        </MainEditor>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.panelBare}>
+      <MainEditor>
+        <EditorBody>
+          <div className={styles.sceneWorkspace}>
+            <div className={styles.sceneTools}>
+              <div className={styles.bpHotbar}>
+                {KIND_OPTIONS.map((option) => (
+                  <HotbarButton
+                    key={option.value}
+                    icon={option.icon}
+                    glyph={option.glyph}
+                    label={option.label}
+                    title={`Add a ${option.label.toLowerCase()} part`}
+                    onClick={() => addPart(option.value)}
+                  />
+                ))}
+                <span style={{ width: 10 }} />
+                {selectedPart?.kind === 'box' && !meshEdit ? (
+                  <HotbarButton icon="object-group" label="To mesh" onClick={convertToMesh} />
+                ) : null}
+                {selectedPart?.kind === 'mesh' && !meshEdit ? (
+                  <HotbarButton icon="pencil" label="Edit mesh" onClick={enterMeshEdit} />
+                ) : null}
+                {meshEdit ? (
+                  <>
+                    <HotbarButton
+                      glyph="face"
+                      label="Faces"
+                      active={meshEdit.mode === 'face'}
+                      onClick={() => setMeshEdit({ ...meshEdit, mode: 'face', selection: [] })}
+                    />
+                    <HotbarButton
+                      glyph="vertices"
+                      label="Vertices"
+                      active={meshEdit.mode === 'vertex'}
+                      onClick={() => setMeshEdit({ ...meshEdit, mode: 'vertex', selection: [] })}
+                    />
+                    <HotbarButton
+                      glyph="extrude"
+                      label="Extrude"
+                      disabled={meshEdit.mode !== 'face' || meshEdit.selection.length === 0}
+                      onClick={extrudeSelection}
+                    />
+                    <HotbarButton icon="check" label="Done" onClick={exitMeshEdit} />
+                  </>
+                ) : null}
+                {model.parts.some((part) =>
+                  ['legL', 'legR', 'armL', 'armR', 'torso'].includes(part.id)
+                ) ? (
+                  <>
+                    <span style={{ width: 10 }} />
+                    <HotbarButton
+                      icon="play"
+                      label="Walk"
+                      title="Preview the walk animation (parts named legL/legR/armL/armR/torso)"
+                      active={walk}
+                      onClick={toggleWalk}
+                    />
+                  </>
+                ) : null}
+              </div>
+            </div>
+            <div className={styles.stageWrap} style={{ padding: 0, position: 'relative' }}>
+              <StageCanvas ref={canvasRef} />
+              <StageControls
+                history={history}
+                mode={mode}
+                setMode={setMode}
+                onDuplicate={duplicatePart}
+                onDelete={deletePart}
+                actionsDisabled={!selectedPartId}
+              />
+            </div>
+            <ModelInspectorPane
+              model={model}
+              selectedPartId={selectedPartId}
+              onSelectPart={setSelectedPartId}
+              commitModel={commitModel}
+              setSelectedPartId={setSelectedPartId}
+            />
+          </div>
+        </EditorBody>
+      </MainEditor>
+    </div>
+  );
+}
+
+function partDepth(parts, part) {
+  let depth = 0;
+  let current = part;
+  while (current?.parent) {
+    depth += 1;
+    current = parts.find((candidate) => candidate.id === current.parent);
+    if (depth > 8) break;
+  }
+  return depth;
+}
+
+function PartList({ model, selectedPartId, onSelectPart }) {
+  return (
+    <Panel title="Parts">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '4px 0' }}>
+        {model.parts.map((part) => (
+          <button
+            key={part.id}
+            type="button"
+            onClick={() => onSelectPart(part.id)}
+            style={{
+              textAlign: 'left',
+              padding: '5px 10px',
+              paddingLeft: 10 + partDepth(model.parts, part) * 14,
+              border: 'none',
+              borderRadius: 5,
+              background:
+                part.id === selectedPartId ? 'var(--castle-inspector-divider)' : 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              fontSize: 13,
+              cursor: 'pointer',
+            }}>
+            {part.id}
+            <span style={{ opacity: 0.55 }}> · {part.kind}</span>
+          </button>
+        ))}
+      </div>
+    </Panel>
+  );
+}
+
+function PartPlacementFields({ part, patchPart }) {
+  const triplet = (key, label, step) => (
+    <>
+      {[0, 1, 2].map((axis) => (
+        <NumberField
+          key={`${key}${axis}`}
+          label={`${label} ${'XYZ'[axis]}`}
+          value={part[key][axis]}
+          step={step}
+          onChange={(value) => {
+            const next = [...part[key]];
+            next[axis] = value;
+            patchPart({ [key]: next }, `${key}${axis}`);
+          }}
+        />
+      ))}
+    </>
+  );
+  return (
+    <Panel title="Placement">
+      {triplet('position', 'Position', 0.05)}
+      {triplet('rotation', 'Rotation', 5)}
+      {triplet('offset', 'Offset', 0.05)}
+    </Panel>
+  );
+}
+
+function PartShapeFields({ part, patchPart }) {
+  return (
+    <Panel title="Geometry">
+      <SelectField
+        label="Kind"
+        value={part.kind}
+        options={KIND_OPTIONS}
+        onChange={(kind) => patchPart({ kind })}
+      />
+      {part.kind === 'box' ? (
+        [0, 1, 2].map((axis) => (
+          <NumberField
+            key={axis}
+            label={`Size ${'XYZ'[axis]}`}
+            value={part.size[axis]}
+            min={0.01}
+            step={0.05}
+            onChange={(value) => {
+              const next = [...part.size];
+              next[axis] = value;
+              patchPart({ size: next }, `size${axis}`);
+            }}
+          />
+        ))
+      ) : (
+        <>
+          <NumberField
+            label="Radius"
+            value={part.radius}
+            min={0.01}
+            step={0.05}
+            onChange={(radius) => patchPart({ radius }, 'radius')}
+          />
+          {part.kind !== 'sphere' ? (
+            <NumberField
+              label="Height"
+              value={part.height}
+              min={0.01}
+              step={0.05}
+              onChange={(height) => patchPart({ height }, 'height')}
+            />
+          ) : null}
+        </>
+      )}
+    </Panel>
+  );
+}
+
+function PartMaterialFields({ part, patchPart }) {
+  const number = (key, label, max) => (
+    <NumberField
+      label={label}
+      value={part[key]}
+      min={0}
+      max={max}
+      step={0.05}
+      onChange={(value) => patchPart({ [key]: value }, key)}
+    />
+  );
+  return (
+    <Panel title="Material">
+      <ColorField
+        label="Color"
+        value={part.color}
+        onChange={(color) => patchPart({ color }, 'color')}
+      />
+      {typeof part.art === 'object' && part.art !== null ? (
+        <TextField label="Art" value="(per-face art -- edit as JSON)" onChange={() => {}} />
+      ) : (
+        <TextField label="Art" value={part.art} onChange={(art) => patchPart({ art }, 'art')} />
+      )}
+      {number('roughness', 'Roughness', 1)}
+      {number('metalness', 'Metalness', 1)}
+      {number('clearcoat', 'Clearcoat', 1)}
+      <ColorField
+        label="Emissive"
+        value={part.emissive}
+        onChange={(emissive) => patchPart({ emissive }, 'emissive')}
+      />
+      {number('emissiveIntensity', 'Emissive Intensity', 4)}
+    </Panel>
+  );
+}
+
+function PartIdentityFields({ model, part, commitModel, setSelectedPartId }) {
+  const excluded = descendantIds(model.parts, part.id);
+  const parentOptions = [
+    { value: '', label: '(none)' },
+    ...model.parts
+      .filter((candidate) => !excluded.has(candidate.id))
+      .map((candidate) => ({ value: candidate.id, label: candidate.id })),
+  ];
+  return (
+    <Panel title="Part">
+      <TextField
+        label="Id"
+        value={part.id}
+        onChange={(nextId) => {
+          if (!nextId) return;
+          commitModel(
+            (next) => {
+              const target = next.parts.find((candidate) => candidate.id === part.id);
+              if (!target) return;
+              const unique = dedupePartId(
+                next.parts.filter((candidate) => candidate !== target),
+                nextId
+              );
+              for (const candidate of next.parts) {
+                if (candidate.parent === target.id) candidate.parent = unique;
+              }
+              target.id = unique;
+              setSelectedPartId(unique);
+            },
+            { coalesceKey: `rename:${part.id}` }
+          );
+        }}
+      />
+      <SelectField
+        label="Parent"
+        value={part.parent}
+        options={parentOptions}
+        onChange={(parent) =>
+          commitModel((next) => {
+            const target = next.parts.find((candidate) => candidate.id === part.id);
+            if (target) target.parent = parent;
+          })
+        }
+      />
+    </Panel>
+  );
+}
+
+function ModelInspectorPane({
+  model,
+  selectedPartId,
+  onSelectPart,
+  commitModel,
+  setSelectedPartId,
+}) {
+  const sheet = useMobileSheet({
+    open: true,
+    baseClassName: styles.inspector,
+    storageKey: 'pxmodel-inspector',
+  });
+  const part = model.parts.find((candidate) => candidate.id === selectedPartId);
+  const patchPart = (patch, coalesceField) =>
+    commitModel(
+      (next) => {
+        const target = next.parts.find((candidate) => candidate.id === selectedPartId);
+        if (target) Object.assign(target, patch);
+      },
+      coalesceField ? { coalesceKey: `part:${selectedPartId}:${coalesceField}` } : undefined
+    );
+  return (
+    <aside {...sheet.rootProps}>
+      <div {...sheet.grabProps}>
+        <SheetGrabHandle />
+      </div>
+      <div className={cx(styles.sheetBody, styles.inspectorBody)}>
+        <Panel title="Model">
+          <TextField
+            label="Name"
+            value={model.name}
+            onChange={(name) =>
+              commitModel(
+                (next) => {
+                  next.name = name;
+                },
+                { coalesceKey: 'model-name' }
+              )
+            }
+          />
+        </Panel>
+        <PartList model={model} selectedPartId={selectedPartId} onSelectPart={onSelectPart} />
+        {part ? (
+          <>
+            <PartIdentityFields
+              model={model}
+              part={part}
+              commitModel={commitModel}
+              setSelectedPartId={setSelectedPartId}
+            />
+            <PartPlacementFields part={part} patchPart={patchPart} />
+            <PartShapeFields part={part} patchPart={patchPart} />
+            <PartMaterialFields part={part} patchPart={patchPart} />
+          </>
+        ) : (
+          <div style={{ padding: '12px 16px', fontSize: 13, opacity: 0.7 }}>
+            click a part on the stage or in the list to edit it
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}