fix editor map reliability

src/features/editor/components/EditorControls.tsx

@@ -26,8 +26,8 @@ interface EditorControlsProps {
   onUndo: () => void;
   onRedo: () => void;
   onExportJson: () => void;
-  onSaveToServer?: () => void;
-  onPlayerMode?: () => void;
+  onSaveToServer?: (() => void | Promise<void>) | undefined;
+  onPlayerMode?: (() => void) | undefined;
   isPlayerMode?: boolean;
 }
 
@@ -47,20 +47,11 @@ export function EditorControls({
   onPlayerMode,
   isPlayerMode,
 }: EditorControlsProps): React.JSX.Element {
-  const cameraPosition = [0, 50, 100];
   const viewModeLabel = isPlayerMode ? "View locked" : "Lock view";
   const jsonPreview = getJsonPreview(mapNodes, selectedNodeIndex);
 
   return (
     <>
-      <div className="editor-camera-info">
-        <span>Camera</span>
-        <strong>
-          X {cameraPosition[0]!.toFixed(0)} · Y {cameraPosition[1]!.toFixed(0)}{" "}
-          · Z {cameraPosition[2]!.toFixed(0)}
-        </strong>
-      </div>
-
       <aside className="editor-controls-panel" aria-label="Editor controls">
         <header className="editor-panel-header">
           <span className="editor-panel-kicker">Map Editor</span>

src/features/editor/scene/EditorMap.tsx

@@ -64,6 +64,30 @@ function useRegisteredEditorNode(
   }, [node, objectRef]);
 }
 
+function disposeMaterial(material: THREE.Material | THREE.Material[]): void {
+  if (Array.isArray(material)) {
+    material.forEach((item) => item.dispose());
+    return;
+  }
+
+  material.dispose();
+}
+
+function cloneHighlightedMaterial(
+  material: THREE.Material | THREE.Material[],
+  color: string,
+): THREE.Material | THREE.Material[] {
+  if (Array.isArray(material)) {
+    return material.map((item) => cloneHighlightedMaterial(item, color)).flat();
+  }
+
+  const clone = material.clone();
+  if (clone instanceof THREE.MeshStandardMaterial) {
+    clone.color.set(color);
+  }
+  return clone;
+}
+
 export function EditorMap({
   sceneData,
   selectedNodeIndex,
@@ -194,6 +218,9 @@ function EditorModelNode({
   modelUrl: string;
 }) {
   const groupRef = useRef<THREE.Group>(null);
+  const originalMaterialsRef = useRef(
+    new Map<THREE.Mesh, THREE.Material | THREE.Material[]>(),
+  );
   const { scene } = useGLTF(modelUrl);
 
   const sceneInstance = useMemo(() => scene.clone(true), [scene]);
@@ -201,24 +228,59 @@ function EditorModelNode({
 
   useEffect(() => {
     if (!groupRef.current) return;
+    const highlightColor = isSelected
+      ? "#ffffff"
+      : isHovered
+        ? "#b8b8b8"
+        : null;
 
     groupRef.current.traverse((child) => {
       if (!(child instanceof THREE.Mesh)) {
         return;
       }
 
-      if (child.material instanceof THREE.MeshStandardMaterial) {
-        if (isSelected) {
-          child.material = child.material.clone();
-          child.material.color.set("#ffffff");
-        } else if (isHovered) {
-          child.material = child.material.clone();
-          child.material.color.set("#b8b8b8");
-        }
+      const originalMaterial = originalMaterialsRef.current.get(child);
+
+      if (!originalMaterial) {
+        originalMaterialsRef.current.set(child, child.material);
+      }
+
+      if (child.material !== originalMaterial && originalMaterial) {
+        disposeMaterial(child.material);
+      }
+
+      if (highlightColor) {
+        child.material = cloneHighlightedMaterial(
+          originalMaterial ?? child.material,
+          highlightColor,
+        );
+      } else if (originalMaterial) {
+        child.material = originalMaterial;
       }
     });
   }, [isSelected, isHovered]);
 
+  useEffect(() => {
+    const group = groupRef.current;
+    const originalMaterials = originalMaterialsRef.current;
+
+    return () => {
+      if (!group) return;
+
+      group.traverse((child) => {
+        if (!(child instanceof THREE.Mesh)) {
+          return;
+        }
+
+        const originalMaterial = originalMaterials.get(child);
+        if (originalMaterial && child.material !== originalMaterial) {
+          disposeMaterial(child.material);
+          child.material = originalMaterial;
+        }
+      });
+    };
+  }, []);
+
   return (
     <primitive
       ref={groupRef}

src/pages/editor/EditorPage.tsx

@@ -75,7 +75,7 @@ export function EditorPage(): React.JSX.Element {
     a.href = url;
     a.download = "map.json";
     a.click();
-    URL.revokeObjectURL(url);
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
   }, [sceneData]);
 
   const handlePlayerMode = useCallback(() => {
@@ -185,7 +185,7 @@ export function EditorPage(): React.JSX.Element {
           onUndo={handleUndo}
           onRedo={handleRedo}
           onExportJson={handleExportJson}
-          onSaveToServer={handleSaveToServer}
+          onSaveToServer={import.meta.env.DEV ? handleSaveToServer : undefined}
           onPlayerMode={handlePlayerMode}
           isPlayerMode={isPlayerMode}
         />

src/utils/loadMapSceneData.ts

@@ -22,28 +22,19 @@ async function createSceneData(mapNodes: MapNode[]): Promise<SceneData> {
 async function loadMapModelUrls(
   mapNodes: MapNode[],
 ): Promise<Map<string, string>> {
-  const models = new Map<string, string>();
   const uniqueModelNames = [...new Set(mapNodes.map((node) => node.name))];
+  const modelEntries = await Promise.all(
+    uniqueModelNames.map(async (modelName) => {
+      const modelUrl = `/models/${modelName}/${MODEL_FILE_NAME}`;
 
-  for (const modelName of uniqueModelNames) {
-    const modelUrl = `/models/${modelName}/${MODEL_FILE_NAME}`;
-
-    const modelResponse = await fetch(modelUrl);
-    if (!modelResponse.ok) continue;
-
-    const text = await modelResponse.text();
-    if (isGltfContent(text)) {
-      models.set(modelName, modelUrl);
-    }
-  }
-
-  return models;
-}
-
-function isGltfContent(text: string): boolean {
-  return (
-    text.includes('"glTF"') ||
-    text.includes('"scene"') ||
-    text.includes('"nodes"')
+      try {
+        const response = await fetch(modelUrl, { method: "HEAD" });
+        return response.ok ? ([modelName, modelUrl] as const) : null;
+      } catch {
+        return null;
+      }
+    }),
   );
+
+  return new Map(modelEntries.filter((entry) => entry !== null));
 }

src/world/GameMap.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 import * as THREE from "three";
 import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
@@ -57,6 +57,7 @@ function ModelInstance({ node }: { node: MapNode }): React.JSX.Element {
   const modelPath = `/models/${node.name}/model.gltf`;
   const groupRef = useRef<THREE.Group>(null);
   const { scene } = useGLTF(modelPath);
+  const sceneInstance = useMemo(() => scene.clone(true), [scene]);
   const { position, rotation, scale } = node;
 
   useEffect(() => {
@@ -70,7 +71,7 @@ function ModelInstance({ node }: { node: MapNode }): React.JSX.Element {
   return (
     <primitive
       ref={groupRef}
-      object={scene}
+      object={sceneInstance}
       position={position}
       rotation={rotation}
       scale={scale}