castle-web-cli 0.4.128 → 0.4.130

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

@@ -0,0 +1,618 @@
+// The 3d scene editor: the 2d kit's SceneEditor structure ported to a 3d
+// stage. Same chrome and flows -- the BlueprintLibrary hotbar (tap to inspect,
+// drag onto the stage to place), the floating selection toolbar, the docked
+// behavior-panel inspector, text-level undo/redo -- with the 2d canvas
+// replaced by the orbit + gizmo editor world. The FILE is the source of truth;
+// every edit lands as sparse JSON through the shared history + debounced save.
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { onSaveReloadState, takeReloadState } from 'castle-web-sdk';
+import { parseJsonFile, formatJson, basename } from '@imports/castle.physics-2d/engine/files';
+import { useLiveDeckFiles3D, useStableSprites } from './modelFiles';
+import {
+  behaviorClasses,
+  findBehaviorClass,
+} from '@imports/castle.physics-2d/editors/behaviorRegistry';
+import { useEditHistory } from '@imports/castle.physics-2d/editors/editorHistory';
+import { BlueprintLibrary } from '@imports/castle.physics-2d/editors/BlueprintLibrary';
+import {
+  EditorBody,
+  MainEditor,
+  SheetGrabHandle,
+  cx,
+  styles,
+  useMobileSheet,
+} from '@imports/castle.physics-2d/engine/ui';
+import {
+  cascadeDeleteBlueprint,
+  getBlueprintTemplate,
+  isBlueprintPath,
+  setBlueprintName,
+  setBlueprintTemplateComponents,
+  setInstanceComponent,
+} from '@imports/castle.physics-2d/engine/blueprint';
+import {
+  makeScene,
+  removeActorComponent,
+  removeActors,
+  setActorComponent,
+} from '@imports/castle.physics-2d/engine/scene';
+import {
+  createEditorWorld,
+  setEditorScene,
+  disposeEditorWorld,
+  raycastGroundPoint,
+} from './editorWorld';
+import {
+  TEMPLATE_ACTOR_ID,
+  withTemplateId,
+  stripTemplateId,
+  placeBlueprintInstance3D,
+  duplicateActors3D,
+  addActorWithBlueprint3D,
+  transformPatch,
+} from './editor3dData';
+import {
+  ActorInspector3D,
+  BlueprintInspector3D,
+  MultiSelectInspector3D,
+  SceneInspector3D,
+  initialBehaviorProps,
+} from './editor3dInspector';
+import { THUMB_PREFIX, thumbArtFor, withThumbRef } from './thumbnails';
+import { StageCanvas, StageControls, useEditorShortcuts, useFileSaver3D } from './editorChrome';
+
+export function Scene3DEditor({ path }) {
+  const stashKey = `scene3d-editor:${path}`;
+  const [stash] = useState(() => takeReloadState(stashKey));
+  const saver = useFileSaver3D();
+  const { files, setFiles, dataVersion } = useLiveDeckFiles3D({
+    shouldSkipPath: saver.hasPending,
+  });
+  const text = files[path] ?? '';
+  const onChangeText = (next) => {
+    setFiles((current) => ({ ...current, [path]: next }));
+    saver.schedule(path, next);
+  };
+  const onChangeFile = (filePath, nextText) => {
+    setFiles((current) => ({ ...current, [filePath]: nextText }));
+    saver.schedule(filePath, nextText);
+  };
+  const history = useEditHistory(text, onChangeText, path);
+  const isBlueprintFile = isBlueprintPath(path);
+
+  const [selectedActorIds, setSelectedActorIdsRaw] = useState(stash?.selectedActorIds ?? []);
+  const [selectedBlueprintPath, setSelectedBlueprintPath] = useState(
+    stash?.selectedBlueprintPath ?? null
+  );
+  const [mode, setMode] = useState('move');
+  const onSelectActorIds = (ids) => {
+    setSelectedBlueprintPath(null);
+    setSelectedActorIdsRaw(ids);
+  };
+  const onSelectBlueprint = (blueprintPath) => {
+    setSelectedActorIdsRaw([]);
+    setSelectedBlueprintPath(blueprintPath);
+  };
+  useEffect(
+    () => onSaveReloadState(stashKey, () => ({ selectedActorIds, selectedBlueprintPath })),
+    [stashKey, selectedActorIds, selectedBlueprintPath]
+  );
+  // A blueprint file edits its single template actor; keep it selected.
+  useEffect(() => {
+    if (isBlueprintFile && selectedActorIds.length === 0) {
+      setSelectedActorIdsRaw([TEMPLATE_ACTOR_ID]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isBlueprintFile]);
+
+  const { value: parsedRaw, error } = parseJsonFile(path, text);
+  // A freshly-created (empty) scene file edits as an empty scene; the first
+  // commit writes it out for real.
+  const parsed = parsedRaw ?? (text.trim() === '' ? { name: 'Scene', actors: [] } : null);
+  const sceneData = withTemplateId(parsed, isBlueprintFile);
+  const sprites = useStableSprites(files);
+  const previewSceneData = sceneData
+    ? makeScene(sceneData, behaviorClasses, sprites, files).data
+    : null;
+  const serialize = (next) => formatJson(isBlueprintFile ? stripTemplateId(next) : next);
+  const commitScene = (next, options) => history.commit(serialize(next), options);
+
+  const canvasRef = useRef(null);
+  const edRef = useRef(null);
+  const callbacks = {
+    onPick: (hits, additive) => {
+      if (additive) {
+        const firstNew = hits.find((id) => !selectedActorIds.includes(id));
+        if (firstNew) onSelectActorIds([...selectedActorIds, firstNew]);
+        return;
+      }
+      if (hits.length === 0) return onSelectActorIds([]);
+      const current = hits.findIndex((id) => selectedActorIds.includes(id));
+      const next = current === -1 ? 0 : (current + 1) % hits.length;
+      onSelectActorIds([hits[next]]);
+    },
+    onCommitTransforms: (changes) => {
+      if (!sceneData) return;
+      const next = structuredClone(sceneData);
+      for (const change of changes) {
+        const actor = next.actors?.find((candidate) => candidate.id === change.id);
+        if (!actor) continue;
+        actor.components = {
+          ...(actor.components ?? {}),
+          Transform: transformPatch(actor.components?.Transform, change),
+        };
+      }
+      commitScene(next);
+    },
+    onAddAt: () => {},
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const ed = createEditorWorld(canvas, callbacks);
+    edRef.current = ed;
+    return () => {
+      disposeEditorWorld(ed);
+      edRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    const ed = edRef.current;
+    if (ed) ed.callbacks = callbacks;
+  });
+  useEffect(() => {
+    const ed = edRef.current;
+    if (!ed || !sceneData || ed.gizmoDragging) return;
+    if (ed.lastAppliedText === text && ed.lastDataVersion === dataVersion) return;
+    ed.lastAppliedText = text;
+    ed.lastDataVersion = dataVersion;
+    setEditorScene(ed, sceneData, behaviorClasses, sprites, files);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, dataVersion]);
+  useEffect(() => {
+    if (edRef.current) edRef.current.mode = mode;
+  }, [mode]);
+  useEffect(() => {
+    if (edRef.current) edRef.current.selection = selectedActorIds;
+  }, [selectedActorIds]);
+
+  const actions = makeActions({
+    files,
+    sceneData,
+    previewSceneData,
+    sprites,
+    commitScene,
+    selectedActorIds,
+    onSelectActorIds,
+    isBlueprintFile,
+  });
+  const dragPlace = useDragPlace({
+    edRef,
+    sceneData,
+    files,
+    serialize,
+    history,
+    onChangeText,
+    onSelectActorIds,
+  });
+  useEditorShortcuts({
+    history,
+    setMode,
+    onDuplicate: actions.duplicateSelection,
+    onDelete: actions.deleteSelection,
+    onEscape: () => onSelectActorIds([]),
+  });
+
+  // What the imported hotbar sees: the 2d kit's own blueprints hidden (they
+  // mean nothing to a 3d scene), and each remaining blueprint's text rewritten
+  // so its `Sprite.file` points at a virtual `@thumb/` ref backed by a live 3d
+  // corner-view render of the template (see engine3d/thumbnails.js).
+  const hotbarInjectRef = useRef(new Map());
+  const { hotbarFiles, hotbarSprites } = useMemo(() => {
+    const outFiles = {};
+    const outSprites = { ...sprites };
+    for (const [filePath, fileText] of Object.entries(files)) {
+      if (filePath.startsWith('imports/') && filePath.includes('/blueprints/')) continue;
+      if (/^blueprints\/[^/]+\.scene$/.test(filePath)) {
+        let cached = hotbarInjectRef.current.get(filePath);
+        if (!cached || cached.text !== fileText) {
+          let injected = fileText;
+          try {
+            const json = JSON.parse(fileText);
+            if (json.actors?.[0]) {
+              json.actors[0].components = {
+                ...(json.actors[0].components ?? {}),
+                Sprite: { file: `${THUMB_PREFIX}${filePath}` },
+              };
+              injected = JSON.stringify(json);
+            }
+          } catch {
+            // unparsable blueprint: hand it through untouched
+          }
+          cached = { text: fileText, injected };
+          hotbarInjectRef.current.set(filePath, cached);
+        }
+        outFiles[filePath] = cached.injected;
+        const template = getBlueprintTemplate(files, filePath);
+        if (template) {
+          outSprites[`${THUMB_PREFIX}${filePath}`] = thumbArtFor(
+            filePath,
+            template,
+            sprites,
+            files
+          );
+        }
+      } else {
+        outFiles[filePath] = fileText;
+      }
+    }
+    return { hotbarFiles: outFiles, hotbarSprites: outSprites };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [files, sprites]);
+
+  if (!sceneData) {
+    return (
+      <div className={styles.panelBare}>
+        <MainEditor>
+          <EditorBody>
+            <div className={styles.inspector}>{error}</div>
+          </EditorBody>
+        </MainEditor>
+      </div>
+    );
+  }
+
+  const rawSelectedActor =
+    selectedActorIds.length === 1
+      ? sceneData.actors.find((actor) => actor.id === selectedActorIds[0])
+      : undefined;
+  const selectedActor =
+    selectedActorIds.length === 1
+      ? previewSceneData.actors.find((actor) => actor.id === selectedActorIds[0])
+      : undefined;
+  const selectedBlueprintTemplate = rawSelectedActor?.blueprint
+    ? getBlueprintTemplate(files, rawSelectedActor.blueprint)
+    : undefined;
+  const selectedBlueprintName = rawSelectedActor?.blueprint
+    ? (selectedBlueprintTemplate?.name ?? basename(rawSelectedActor.blueprint))
+    : undefined;
+  const hotbarBlueprint =
+    !isBlueprintFile && selectedBlueprintPath
+      ? getBlueprintTemplate(files, selectedBlueprintPath)
+      : null;
+  const showMulti = !isBlueprintFile && selectedActorIds.length > 1;
+
+  const blueprintActions = makeBlueprintActions({
+    files,
+    selectedBlueprintPath,
+    hotbarBlueprint,
+    onChangeFile,
+    sprites,
+  });
+  const onAddActor = () => {
+    const { sceneData: next, newId, blueprintFile } = addActorWithBlueprint3D(sceneData, files);
+    onChangeFile(blueprintFile.path, blueprintFile.text);
+    commitScene(next);
+    onSelectActorIds([newId]);
+  };
+  const onDeleteBlueprint = (blueprintPath) => {
+    for (const write of cascadeDeleteBlueprint(files, blueprintPath)) {
+      if (write.path === path) history.commit(write.text);
+      else onChangeFile(write.path, write.text);
+    }
+    onSelectActorIds([]);
+  };
+
+  return (
+    <div className={styles.panelBare}>
+      <MainEditor>
+        <EditorBody>
+          <div className={styles.sceneWorkspace}>
+            <div className={styles.sceneTools}>
+              {isBlueprintFile ? null : (
+                <BlueprintLibrary
+                  files={hotbarFiles}
+                  sprites={hotbarSprites}
+                  canvasRef={canvasRef}
+                  editCameraRef={{ current: { x: 0, y: 0 } }}
+                  isPlaying={false}
+                  selectedBlueprintPath={selectedBlueprintPath}
+                  instanceBlueprintPath={rawSelectedActor?.blueprint ?? null}
+                  onSelectBlueprint={onSelectBlueprint}
+                  onAddActor={onAddActor}
+                  dragPlace={dragPlace}
+                  onDeleteBlueprint={onDeleteBlueprint}
+                />
+              )}
+            </div>
+            <div className={styles.stageWrap} style={{ padding: 0, position: 'relative' }}>
+              <StageCanvas ref={canvasRef} />
+              <StageControls
+                history={history}
+                mode={mode}
+                setMode={setMode}
+                onDuplicate={isBlueprintFile ? undefined : actions.duplicateSelection}
+                onDelete={isBlueprintFile ? undefined : actions.deleteSelection}
+                actionsDisabled={selectedActorIds.length === 0}
+              />
+            </div>
+            <InspectorPane
+              hotbarBlueprint={
+                hotbarBlueprint ? withThumbRef(hotbarBlueprint, selectedBlueprintPath) : null
+              }
+              selectedBlueprintPath={selectedBlueprintPath}
+              blueprintActions={blueprintActions}
+              showMulti={showMulti}
+              selectedActorIds={selectedActorIds}
+              onSelectActorIds={onSelectActorIds}
+              selectedActor={selectedActor}
+              rawSelectedActor={rawSelectedActor}
+              selectedBlueprintName={selectedBlueprintName}
+              selectedBlueprintTemplate={
+                selectedBlueprintTemplate && rawSelectedActor?.blueprint
+                  ? withThumbRef(selectedBlueprintTemplate, rawSelectedActor.blueprint)
+                  : selectedBlueprintTemplate
+              }
+              isBlueprintFile={isBlueprintFile}
+              sprites={hotbarSprites}
+              files={files}
+              actions={actions}
+              sceneData={sceneData}
+              commitScene={commitScene}
+              onSelectBlueprint={onSelectBlueprint}
+            />
+          </div>
+        </EditorBody>
+      </MainEditor>
+    </div>
+  );
+}
+
+function makeActions({
+  files,
+  sceneData,
+  previewSceneData,
+  sprites,
+  commitScene,
+  selectedActorIds,
+  onSelectActorIds,
+  isBlueprintFile,
+}) {
+  return {
+    updateComponent: (actorId, behaviorName, nextProps) =>
+      commitScene(
+        setInstanceComponent(files, behaviorClasses, sceneData, actorId, behaviorName, nextProps),
+        { coalesceKey: `${actorId}:${behaviorName}:${Object.keys(nextProps).sort().join(',')}` }
+      ),
+    addBehavior: (actorId, behaviorName) => {
+      const Behavior = findBehaviorClass(behaviorName);
+      if (!Behavior) return;
+      const resolved = previewSceneData?.actors.find((actor) => actor.id === actorId);
+      commitScene(
+        setActorComponent(
+          sceneData,
+          actorId,
+          behaviorName,
+          initialBehaviorProps(Behavior, resolved, sprites)
+        )
+      );
+    },
+    removeBehavior: (actorId, behaviorName) =>
+      commitScene(removeActorComponent(sceneData, actorId, behaviorName)),
+    deleteSelection: () => {
+      if (isBlueprintFile || selectedActorIds.length === 0) return;
+      commitScene(removeActors(sceneData, selectedActorIds));
+      onSelectActorIds([]);
+    },
+    duplicateSelection: () => {
+      if (isBlueprintFile || selectedActorIds.length === 0) return;
+      const { sceneData: next, newIds } = duplicateActors3D(
+        sceneData,
+        selectedActorIds,
+        previewSceneData?.actors
+      );
+      commitScene(next);
+      if (newIds.length) onSelectActorIds(newIds);
+    },
+  };
+}
+
+// Template edits from the hotbar sidebar write the BLUEPRINT file, not this
+// scene -- optimistic files fold + debounced save, same as the 2d editor.
+function makeBlueprintActions({
+  files,
+  selectedBlueprintPath,
+  hotbarBlueprint,
+  onChangeFile,
+  sprites,
+}) {
+  const updateTemplate = (mutate) => {
+    if (!selectedBlueprintPath || !hotbarBlueprint) return;
+    const components = structuredClone(hotbarBlueprint.components);
+    mutate(components);
+    const nextText = setBlueprintTemplateComponents(files, selectedBlueprintPath, components);
+    if (nextText != null) onChangeFile(selectedBlueprintPath, nextText);
+  };
+  return {
+    setComponent: (behaviorName, nextProps) =>
+      updateTemplate((components) => {
+        components[behaviorName] = { ...(components[behaviorName] ?? {}), ...nextProps };
+      }),
+    addBehavior: (behaviorName) => {
+      const Behavior = findBehaviorClass(behaviorName);
+      if (!Behavior) return;
+      updateTemplate((components) => {
+        components[behaviorName] = initialBehaviorProps(Behavior, { components }, sprites);
+      });
+    },
+    removeBehavior: (behaviorName) =>
+      updateTemplate((components) => {
+        delete components[behaviorName];
+      }),
+    rename: (name) => {
+      if (!selectedBlueprintPath) return;
+      const nextText = setBlueprintName(files, selectedBlueprintPath, name);
+      if (nextText != null) onChangeFile(selectedBlueprintPath, nextText);
+    },
+  };
+}
+
+// Drag-out from the hotbar places a REAL instance the moment the pointer
+// enters the stage (the imported BlueprintLibrary drives enter/move/leave/
+// drop; its 2d stage coordinates are ignored -- the drop point comes from a
+// ground-plane raycast under the live pointer).
+function useDragPlace({
+  edRef,
+  sceneData,
+  files,
+  serialize,
+  history,
+  onChangeText,
+  onSelectActorIds,
+}) {
+  const pointerRef = useRef({ x: 0, y: 0 });
+  useEffect(() => {
+    const onPointerMove = (event) => {
+      pointerRef.current = { x: event.clientX, y: event.clientY };
+    };
+    window.addEventListener('pointermove', onPointerMove, { passive: true });
+    return () => window.removeEventListener('pointermove', onPointerMove);
+  }, []);
+  const dragRef = useRef(null);
+  const groundPoint = () =>
+    edRef.current
+      ? raycastGroundPoint(edRef.current, pointerRef.current.x, pointerRef.current.y)
+      : null;
+  return {
+    enter: (blueprintPath) => {
+      const point = groundPoint();
+      if (!point || !sceneData) return;
+      history.recordSnapshot();
+      const { sceneData: next, newId } = placeBlueprintInstance3D(
+        sceneData,
+        files,
+        blueprintPath,
+        point
+      );
+      dragRef.current = { actorId: newId, sceneData: next };
+      onChangeText(serialize(next));
+      onSelectActorIds([newId]);
+    },
+    move: () => {
+      const drag = dragRef.current;
+      const point = drag ? groundPoint() : null;
+      if (!drag || !point) return;
+      const next = structuredClone(drag.sceneData);
+      const actor = next.actors.find((candidate) => candidate.id === drag.actorId);
+      if (!actor) return;
+      actor.components.Transform = {
+        ...actor.components.Transform,
+        x: Math.round(point.x * 10) / 10,
+        z: Math.round(point.z * 10) / 10,
+      };
+      drag.sceneData = next;
+      onChangeText(serialize(next));
+    },
+    leave: () => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      dragRef.current = null;
+      onChangeText(serialize(removeActors(drag.sceneData, [drag.actorId])));
+      onSelectActorIds([]);
+    },
+    drop: () => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      dragRef.current = null;
+      onSelectActorIds([drag.actorId]);
+    },
+  };
+}
+
+function InspectorPane(props) {
+  const inspectorSheet = useMobileSheet({
+    open: true,
+    baseClassName: styles.inspector,
+    storageKey: 'scene3d-inspector',
+  });
+  const {
+    hotbarBlueprint,
+    selectedBlueprintPath,
+    blueprintActions,
+    showMulti,
+    selectedActorIds,
+    onSelectActorIds,
+    selectedActor,
+    rawSelectedActor,
+    selectedBlueprintName,
+    selectedBlueprintTemplate,
+    isBlueprintFile,
+    sprites,
+    files,
+    actions,
+    sceneData,
+    commitScene,
+    onSelectBlueprint,
+  } = props;
+  let body;
+  if (hotbarBlueprint) {
+    body = (
+      <BlueprintInspector3D
+        name={hotbarBlueprint.name}
+        template={hotbarBlueprint}
+        sprites={sprites}
+        blueprintPath={selectedBlueprintPath}
+        files={files}
+        actions={blueprintActions}
+      />
+    );
+  } else if (showMulti) {
+    body = (
+      <MultiSelectInspector3D
+        count={selectedActorIds.length}
+        onDeselectAll={() => onSelectActorIds([])}
+      />
+    );
+  } else if (selectedActor) {
+    body = (
+      <ActorInspector3D
+        key={selectedActor.id}
+        selectedActor={selectedActor}
+        rawActor={rawSelectedActor}
+        blueprintName={selectedBlueprintName}
+        blueprintTemplate={selectedBlueprintTemplate}
+        sprites={sprites}
+        files={files}
+        showAddBehavior={isBlueprintFile}
+        onSetComponent={actions.updateComponent}
+        onAddBehavior={actions.addBehavior}
+        onRemoveBehavior={actions.removeBehavior}
+        onEditBlueprint={
+          isBlueprintFile || !rawSelectedActor?.blueprint
+            ? undefined
+            : () => onSelectBlueprint(rawSelectedActor.blueprint)
+        }
+      />
+    );
+  } else {
+    body = (
+      <SceneInspector3D
+        sceneData={sceneData}
+        onChangeScene={(patch) => commitScene({ ...sceneData, ...patch })}
+        onChangeGround={(patch) =>
+          commitScene({ ...sceneData, ground: { ...(sceneData.ground ?? {}), ...patch } })
+        }
+      />
+    );
+  }
+  return (
+    <aside {...inspectorSheet.rootProps}>
+      <div {...inspectorSheet.grabProps}>
+        <SheetGrabHandle />
+      </div>
+      <div className={cx(styles.sheetBody, styles.inspectorBody)}>{body}</div>
+    </aside>
+  );
+}