castle-web-cli 0.4.75 → 0.4.77

package/kits/basic-3d/editors/ModelEditor.jsx

@@ -1,400 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import * as THREE from 'three';
-import { basename, formatJson, parseJsonFile } from '../engine/files';
-import {
-  buildModelGroup,
-  defaultModelPart,
-  disposeObject3D,
-  fitRendererToCanvas,
-  geometryKinds,
-  radiansToDegrees,
-} from '../engine/threeUtil';
-import { roundUnits } from '../engine/scene';
-import { ThreeCanvas } from '../engine/SceneViewport';
-import {
-  cx,
-  EditorBody,
-  EditorHeader,
-  IconButton,
-  Panel,
-  SelectField,
-  SheetGrabHandle,
-  styles,
-  useMobileSheet,
-} from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import { useEditHistory } from './editorHistory';
-import { createPreviewScene, createViewportRig, GIZMO_MODES } from './viewportRig';
-
-const CLICK_THRESHOLD_PX = 5;
-
-// Authoring editor for `.model` files -- a list of primitive parts, the 3d
-// analog of the 2d kit's pixel DrawingEditor. Left-drag orbits, click selects
-// a part, the gizmo moves/rotates it, exact values live in the inspector.
-export function ModelEditor({ path, text, onChange, onToggleFiles, filesOpen }) {
-  const [selectedPartIndex, setSelectedPartIndex] = useState(-1);
-  const [gizmoMode, setGizmoMode] = useState('translate');
-  const [inspectorOpen, setInspectorOpen] = useState(true);
-  const history = useEditHistory(text, onChange);
-  const inspectorSheet = useInspectorSheet(inspectorOpen);
-  const { value: model, error } = parseJsonFile(path, text);
-  const parts = model?.parts ?? [];
-  const viewport = useModelViewport({
-    model,
-    text,
-    selectedPartIndex,
-    gizmoMode,
-    applyModel: (next) => onChange(formatJson(next)),
-    recordSnapshot: history.recordSnapshot,
-  });
-  const clickSelect = usePartClickSelect(viewport, setSelectedPartIndex);
-  function commitModel(nextModel) {
-    history.commit(formatJson(nextModel));
-  }
-  function updatePart(index, nextProps) {
-    if (!model || !model.parts?.[index]) return;
-    const next = structuredClone(model);
-    next.parts[index] = { ...next.parts[index], ...nextProps };
-    commitModel(next);
-  }
-  function addPart(geometry) {
-    if (!model) return;
-    const next = structuredClone(model);
-    next.parts = next.parts ?? [];
-    next.parts.push({ ...defaultModelPart, geometry });
-    commitModel(next);
-    setSelectedPartIndex(next.parts.length - 1);
-  }
-  function duplicatePart(index) {
-    if (!model || !model.parts?.[index]) return;
-    const next = structuredClone(model);
-    const copy = structuredClone(next.parts[index]);
-    copy.x = roundUnits((copy.x ?? 0) + 0.5);
-    copy.z = roundUnits((copy.z ?? 0) + 0.5);
-    next.parts.splice(index + 1, 0, copy);
-    commitModel(next);
-    setSelectedPartIndex(index + 1);
-  }
-  function removePart(index) {
-    if (!model || !model.parts?.[index]) return;
-    const next = structuredClone(model);
-    next.parts.splice(index, 1);
-    commitModel(next);
-    setSelectedPartIndex(-1);
-  }
-  const sharedActionButtons = (
-    <>
-      <IconButton icon="undo" label="Undo" onClick={history.undo} disabled={!history.canUndo} />
-      <IconButton icon="redo" label="Redo" onClick={history.redo} disabled={!history.canRedo} />
-    </>
-  );
-  const gizmoButtons = (
-    <>
-      {GIZMO_MODES.filter((mode) => mode.key !== 'scale').map((mode) => (
-        <IconButton
-          key={mode.key}
-          icon={mode.icon}
-          label={mode.label}
-          active={gizmoMode === mode.key}
-          onClick={() => setGizmoMode(mode.key)}
-        />
-      ))}
-    </>
-  );
-  return (
-    <>
-      <EditorHeader
-        title={basename(path)}
-        subtitle={model ? `${parts.length} part${parts.length === 1 ? '' : 's'}` : error}
-        right={
-          <span className={styles.mobileOnly}>
-            {sharedActionButtons}
-            <IconButton
-              icon="palette"
-              label="Tools"
-              active={inspectorOpen}
-              onClick={() => setInspectorOpen((previous) => !previous)}
-            />
-          </span>
-        }
-        onToggleFiles={onToggleFiles}
-        filesOpen={filesOpen}
-      />
-      <EditorBody>
-        <div className={cx(styles.sceneWorkspace)}>
-          <div className={styles.sceneTools}>
-            <div className={styles.sceneToolsGroup}>{gizmoButtons}</div>
-            <div className={styles.sceneToolsGroup}>{sharedActionButtons}</div>
-            <span aria-hidden="true" />
-          </div>
-          <div className={cx(styles.stageWrap, styles.stageWrapFull)}>
-            <div className={styles.stageCard}>
-              <ThreeCanvas
-                onSetup={viewport.onSetup}
-                onFrame={viewport.onFrame}
-                className={styles.stageCanvas}
-                onContextMenu={(event) => event.preventDefault()}
-                onPointerDown={clickSelect.onPointerDown}
-                onPointerUp={clickSelect.onPointerUp}
-              />
-            </div>
-          </div>
-          <ModelInspector
-            sheet={inspectorSheet}
-            parts={parts}
-            selectedPartIndex={selectedPartIndex}
-            onSelectPart={setSelectedPartIndex}
-            onAddPart={addPart}
-            onDuplicatePart={duplicatePart}
-            onRemovePart={removePart}
-            onUpdatePart={updatePart}
-          />
-        </div>
-      </EditorBody>
-    </>
-  );
-}
-
-// Preview scene + camera rig + gizmo lifecycle for the model being edited.
-function useModelViewport(args) {
-  const argsRef = useRef(args);
-  argsRef.current = args;
-  const sceneRef = useRef(null);
-  const groupRef = useRef(null);
-  const rigRef = useRef(null);
-  const gizmoDraggingRef = useRef(false);
-  const gizmoRecordedRef = useRef(false);
-  if (!sceneRef.current) sceneRef.current = createPreviewScene();
-  const rebuildGroup = useCallback(() => {
-    const scene = sceneRef.current;
-    if (groupRef.current) {
-      scene.remove(groupRef.current);
-      disposeObject3D(groupRef.current);
-      groupRef.current = null;
-    }
-    const model = argsRef.current.model;
-    if (model) {
-      groupRef.current = buildModelGroup(model, null);
-      scene.add(groupRef.current);
-    }
-  }, []);
-  // Rebuild the preview on text changes -- except mid-gizmo-drag, where the
-  // attached mesh is the live source of truth and a rebuild would orphan it.
-  useEffect(() => {
-    if (gizmoDraggingRef.current) return;
-    rebuildGroup();
-    attachGizmoToSelection(rigRef.current, groupRef.current, argsRef.current);
-  }, [args.text, rebuildGroup]);
-  useEffect(() => {
-    attachGizmoToSelection(rigRef.current, groupRef.current, argsRef.current);
-  }, [args.selectedPartIndex, args.gizmoMode]);
-  useEffect(() => {
-    return () => {
-      if (groupRef.current) disposeObject3D(groupRef.current);
-    };
-  }, []);
-  const onSetup = ({ canvas }) => {
-    const rig = createViewportRig({
-      canvas,
-      scene: sceneRef.current,
-      onGizmoChange: (gizmo) => writeGizmoPart(gizmo, argsRef, gizmoRecordedRef),
-      onGizmoDraggingChanged: (dragging) => {
-        gizmoDraggingRef.current = dragging;
-        if (dragging) {
-          gizmoRecordedRef.current = false;
-        } else {
-          rebuildGroup();
-          attachGizmoToSelection(rigRef.current, groupRef.current, argsRef.current);
-        }
-      },
-    });
-    rig.setNavMode(true);
-    rigRef.current = rig;
-    attachGizmoToSelection(rig, groupRef.current, argsRef.current);
-    return () => {
-      rig.dispose();
-      rigRef.current = null;
-    };
-  };
-  const onFrame = ({ canvas, renderer }) => {
-    const rig = rigRef.current;
-    if (!rig) return;
-    if (!fitRendererToCanvas(renderer, rig.camera, canvas)) return;
-    rig.orbit.update();
-    renderer.render(sceneRef.current, rig.camera);
-  };
-  return { onSetup, onFrame, sceneRef, groupRef, rigRef };
-}
-
-function attachGizmoToSelection(rig, group, args) {
-  if (!rig) return;
-  const mesh = group?.children.find((child) => child.userData.partIndex === args.selectedPartIndex);
-  if (mesh) {
-    rig.gizmo.attach(mesh);
-    rig.gizmo.setMode(args.gizmoMode);
-  } else {
-    rig.gizmo.detach();
-  }
-}
-
-// Gizmo drag write-back for the selected part (position + rotation; size is
-// numeric-only in the inspector).
-function writeGizmoPart(gizmo, argsRef, gizmoRecordedRef) {
-  const current = argsRef.current;
-  const mesh = gizmo.object;
-  const index = mesh?.userData.partIndex;
-  if (!mesh || index == null || !current.model?.parts?.[index]) return;
-  if (!gizmoRecordedRef.current) {
-    current.recordSnapshot();
-    gizmoRecordedRef.current = true;
-  }
-  const next = structuredClone(current.model);
-  next.parts[index] = {
-    ...next.parts[index],
-    x: roundUnits(mesh.position.x),
-    y: roundUnits(mesh.position.y),
-    z: roundUnits(mesh.position.z),
-    rotationX: roundUnits(radiansToDegrees(mesh.rotation.x)),
-    rotationY: roundUnits(radiansToDegrees(mesh.rotation.y)),
-    rotationZ: roundUnits(radiansToDegrees(mesh.rotation.z)),
-  };
-  current.applyModel(next);
-}
-
-// Click (press + release without drag) selects the part under the pointer;
-// empty space deselects. Orbit owns actual drags.
-function usePartClickSelect(viewport, setSelectedPartIndex) {
-  const downRef = useRef(null);
-  const onPointerDown = useCallback(
-    (event) => {
-      if (event.button !== 0 || viewport.rigRef.current?.gizmoBusy()) return;
-      downRef.current = { x: event.clientX, y: event.clientY };
-    },
-    [viewport.rigRef]
-  );
-  const onPointerUp = useCallback(
-    (event) => {
-      const down = downRef.current;
-      downRef.current = null;
-      if (!down || viewport.rigRef.current?.gizmoBusy()) return;
-      if (Math.hypot(event.clientX - down.x, event.clientY - down.y) > CLICK_THRESHOLD_PX) return;
-      const rig = viewport.rigRef.current;
-      const group = viewport.groupRef.current;
-      if (!rig || !group) return;
-      const index = raycastPartIndex(event, rig.camera, group);
-      setSelectedPartIndex(index);
-    },
-    [viewport, setSelectedPartIndex]
-  );
-  return { onPointerDown, onPointerUp };
-}
-
-function raycastPartIndex(event, camera, group) {
-  const canvas = event.currentTarget;
-  const rect = canvas.getBoundingClientRect();
-  const ndc = {
-    x: ((event.clientX - rect.left) / rect.width) * 2 - 1,
-    y: -(((event.clientY - rect.top) / rect.height) * 2 - 1),
-  };
-  const raycaster = new THREE.Raycaster();
-  raycaster.setFromCamera(ndc, camera);
-  const hits = raycaster.intersectObjects(group.children, false);
-  return hits.length ? (hits[0].object.userData.partIndex ?? -1) : -1;
-}
-
-function useInspectorSheet(inspectorOpen) {
-  const [snap, setSnap] = useState('high');
-  useEffect(() => {
-    if (inspectorOpen) setSnap('high');
-  }, [inspectorOpen]);
-  const effectiveSnap = inspectorOpen ? snap : 'hidden';
-  return useMobileSheet({
-    snap: effectiveSnap,
-    baseClassName: styles.inspector,
-    onTransition: (direction) => {
-      if (!inspectorOpen) return;
-      if (direction === 'tap') setSnap((previous) => (previous === 'high' ? 'low' : 'high'));
-      else if (direction === 'down') setSnap('low');
-      else if (direction === 'up') setSnap('high');
-    },
-  });
-}
-
-function ModelInspector({
-  sheet,
-  parts,
-  selectedPartIndex,
-  onSelectPart,
-  onAddPart,
-  onDuplicatePart,
-  onRemovePart,
-  onUpdatePart,
-}) {
-  const selectedPart = parts[selectedPartIndex];
-  return (
-    <aside {...sheet.rootProps}>
-      <div {...sheet.grabProps}>
-        <SheetGrabHandle
-          label="Inspector"
-          hint={selectedPart ? `part ${selectedPartIndex}` : `${parts.length} parts`}
-        />
-      </div>
-      <div className={cx(styles.sheetBody, styles.inspectorBody)}>
-        <Panel title="Parts">
-          <div className={styles.actorList}>
-            {parts.map((part, index) => (
-              <button
-                key={index}
-                type="button"
-                className={cx(
-                  styles.actorRow,
-                  index === selectedPartIndex && styles.actorRowSelected
-                )}
-                onClick={() => onSelectPart(index === selectedPartIndex ? -1 : index)}>
-                {index}: {part.geometry ?? 'box'}
-              </button>
-            ))}
-          </div>
-          <div style={{ paddingTop: 8 }}>
-            <SelectField
-              label="Add part"
-              value=""
-              onChange={(geometry) => {
-                if (geometry) onAddPart(geometry);
-              }}
-              options={['', ...geometryKinds]}
-            />
-          </div>
-        </Panel>
-        {selectedPart ? (
-          <Panel title={`Part ${selectedPartIndex}`}>
-            <SelectField
-              label="Geometry"
-              value={selectedPart.geometry ?? 'box'}
-              onChange={(geometry) => onUpdatePart(selectedPartIndex, { geometry })}
-              options={geometryKinds}
-            />
-            <AutoFields
-              defaultProps={defaultModelPart}
-              component={selectedPart}
-              setComponent={(nextProps) => onUpdatePart(selectedPartIndex, nextProps)}
-              exclude={['geometry']}
-            />
-            <div style={{ display: 'flex', gap: 8, paddingBottom: 12 }}>
-              <IconButton
-                icon="clone"
-                label="Duplicate part"
-                onClick={() => onDuplicatePart(selectedPartIndex)}
-              />
-              <IconButton
-                icon="trash"
-                label="Remove part"
-                onClick={() => onRemovePart(selectedPartIndex)}
-              />
-            </div>
-          </Panel>
-        ) : null}
-      </div>
-    </aside>
-  );
-}

package/kits/basic-3d/editors/PlayOnly.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Lifecycle } from 'castle-web-sdk';
-import { initialFiles, parseJsonFile, parseModels } from '../engine/files';
-import { ScenePlayer } from '../engine/ScenePlayer';
-import { behaviorClasses } from './behaviorRegistry';
-// Play-mode entry point. Intentionally thin: it locates the start scene and
-// hands it to the engine's `ScenePlayer`, which owns the runtime and input.
-// Deck/game logic belongs in `scenes/` and `behaviors/`, not here.
-export function PlayOnly() {
-  const sceneText = initialFiles['scenes/main.scene'] ?? '';
-  const { value: sceneData } = parseJsonFile('scenes/main.scene', sceneText);
-  if (!sceneData) return null;
-  const models = parseModels(initialFiles);
-  return (
-    <ScenePlayer
-      sceneData={sceneData}
-      models={models}
-      behaviorClasses={behaviorClasses}
-      onFirstFrame={Lifecycle.ready}
-    />
-  );
-}