docs: document editor architecture and user features

2026-04-28 09:43:51 +02:00
parent 7b38f04a0d
commit 8f40bb8133
21 changed files with 776 additions and 911 deletions
@@ -0,0 +1,139 @@
+import type { TransformMode } from "@/types/editor";
+
+interface EditorControlsProps {
+  transformMode: TransformMode;
+  onTransformModeChange: (mode: TransformMode) => void;
+  selectedNodeIndex: number | null;
+  nodesCount: number;
+  selectedNodeName: string | null;
+  undoCount: number;
+  redoCount: number;
+  onUndo: () => void;
+  onRedo: () => void;
+  onExportJson: () => void;
+  onSaveToServer?: () => void;
+  onPlayerMode?: () => void;
+  isPlayerMode?: boolean;
+}
+
+export function EditorControls({
+  transformMode,
+  onTransformModeChange,
+  selectedNodeIndex,
+  nodesCount,
+  selectedNodeName,
+  undoCount,
+  redoCount,
+  onUndo,
+  onRedo,
+  onExportJson,
+  onSaveToServer,
+  onPlayerMode,
+  isPlayerMode,
+}: EditorControlsProps): React.JSX.Element {
+  const cameraPosition = [0, 50, 100];
+
+  return (
+    <>
+      <div className="editor-camera-info">
+        <div>Camera Position:</div>
+        <div>X: {cameraPosition[0]!.toFixed(2)}</div>
+        <div>Y: {cameraPosition[1]!.toFixed(2)}</div>
+        <div>Z: {cameraPosition[2]!.toFixed(2)}</div>
+      </div>
+
+      <div className="editor-controls-panel">
+        <h3>Transform</h3>
+
+        <div className="editor-transform-buttons">
+          <button
+            className={`editor-transform-button ${transformMode === "translate" ? "active" : ""}`}
+            onClick={() => onTransformModeChange("translate")}
+          >
+            ✋ Translate (T)
+          </button>
+          <button
+            className={`editor-transform-button ${transformMode === "rotate" ? "active" : ""}`}
+            onClick={() => onTransformModeChange("rotate")}
+          >
+            🔄 Rotate (R)
+          </button>
+          <button
+            className={`editor-transform-button ${transformMode === "scale" ? "active" : ""}`}
+            onClick={() => onTransformModeChange("scale")}
+          >
+            📐 Scale (S)
+          </button>
+        </div>
+
+        <div className="editor-history-buttons">
+          <button
+            className="editor-history-button"
+            onClick={onUndo}
+            disabled={undoCount === 0}
+            style={{ color: undoCount > 0 ? "#00ff00" : "#555" }}
+          >
+            ↩ Undo ({undoCount})
+          </button>
+          <button
+            className="editor-history-button"
+            onClick={onRedo}
+            disabled={redoCount === 0}
+            style={{ color: redoCount > 0 ? "#00ff00" : "#555" }}
+          >
+            ↪ Redo ({redoCount})
+          </button>
+        </div>
+
+        <button className="editor-export-button" onClick={onExportJson}>
+          💾 Export JSON
+        </button>
+
+        {onSaveToServer && (
+          <button className="editor-save-button" onClick={onSaveToServer}>
+            💾 Save to Server
+          </button>
+        )}
+
+        <h3>View</h3>
+
+        {onPlayerMode && (
+          <button
+            className={`editor-player-button ${isPlayerMode ? "active" : ""}`}
+            onClick={onPlayerMode}
+          >
+            🎮 Player Controller
+          </button>
+        )}
+
+        <h3>Selection</h3>
+        {selectedNodeIndex !== null ? (
+          <div className="editor-selected-info">
+            <div className="editor-selected-name">
+              Selected:{" "}
+              <strong>
+                {selectedNodeName || `Node ${selectedNodeIndex + 1}`}
+              </strong>
+            </div>
+            <div className="editor-selected-index">
+              Index: {selectedNodeIndex + 1} / {nodesCount}
+            </div>
+          </div>
+        ) : (
+          <div className="editor-no-selection">No object selected</div>
+        )}
+
+        <h3>Controls</h3>
+        <div className="editor-controls-help">
+          <p>Click - Select object</p>
+          <p>T/R/S - Transform mode</p>
+          <p>Ctrl+Z - Undo</p>
+          <p>Ctrl+Y - Redo</p>
+          <p>ESC - Deselect</p>
+          <p>WASD/ZQSD - Move (Player mode)</p>
+          <p>Space - Jump (Player mode)</p>
+        </div>
+      </div>
+    </>
+  );
+}