math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix editor map reliability

Browse Source
This commit is contained in:
Tom Boullay
2026-04-28 11:06:09 +02:00
parent 7e067ecccd
commit ab21df18cb
7 changed files with 146 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/quality.yml
+4 -4
View File
@@ -74,12 +74,12 @@ jobs:
- name: 📏 Check bundle size
run: |
# Get bundle size in KB
SIZE=$(du -k dist | cut -f1)
# Check generated app assets only; public/ model files are runtime assets copied to dist.
SIZE=$(du -k dist/assets | cut -f1)
echo "Bundle size: ${SIZE}KB"
# Threshold: 1000KB (configurable)
THRESHOLD=1000
# Threshold: 5000KB (configurable)
THRESHOLD=5000
if [ "$SIZE" -gt "$THRESHOLD" ]; then
echo "❌ Bundle size ${SIZE}KB exceeds threshold ${THRESHOLD}KB"
src/features/editor/components/EditorControls.tsx
+2 -11
View File
@@ -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
+70 -8
View File
@@ -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
+2 -2
View File
@@ -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
+12 -21
View File
@@ -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
+3 -2
View File
@@ -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}
vite.config.ts
+53 -8
View File
@@ -3,18 +3,59 @@ import react from "@vitejs/plugin-react";
import path from "node:path";
import fs from "node:fs";
import { fileURLToPath } from "node:url";
import type { ServerResponse } from "node:http";
import type { Plugin } from "vite";
const __dirname = fileURLToPath(new URL(".", import.meta.url));
const MAX_MAP_PAYLOAD_BYTES = 1024 * 1024;
const JSON_HEADERS = { "Content-Type": "application/json" };
function sendJson(
res: ServerResponse,
status: number,
body: unknown,
headers: Record<string, string> = {},
): void {
res
.writeHead(status, { ...JSON_HEADERS, ...headers })
.end(JSON.stringify(body));
}
function isVector3(value: unknown): value is [number, number, number] {
return (
Array.isArray(value) &&
value.length === 3 &&
value.every((item) => typeof item === "number" && Number.isFinite(item))
);
}
function isMapNode(value: unknown): value is Record<string, unknown> {
if (typeof value !== "object" || value === null) {
return false;
}
const node = value as Record<string, unknown>;
return (
typeof node.name === "string" &&
typeof node.type === "string" &&
isVector3(node.position) &&
isVector3(node.rotation) &&
isVector3(node.scale)
);
}
function isMapPayload(value: unknown): boolean {
return Array.isArray(value) && value.every(isMapNode);
}
const saveMapPlugin = (): Plugin => ({
name: "save-map-api",
configureServer(server) {
server.middlewares.use("/api/save-map", async (req, res) => {
if (req.method !== "POST") {
res.writeHead(405).end(JSON.stringify({ error: "Method not allowed" }));
sendJson(res, 405, { error: "Method not allowed" }, { Allow: "POST" });
return;
}
@@ -22,30 +63,34 @@ const saveMapPlugin = (): Plugin => ({
let size = 0;
for await (const chunk of req) {
size += chunk.length;
const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
size += buffer.length;
if (size > MAX_MAP_PAYLOAD_BYTES) {
res
.writeHead(413)
.end(JSON.stringify({ error: "Payload too large" }));
sendJson(res, 413, { error: "Payload too large" });
req.destroy();
return;
}
chunks.push(chunk);
chunks.push(buffer);
}
try {
const data = JSON.parse(Buffer.concat(chunks).toString());
if (!isMapPayload(data)) {
sendJson(res, 400, { error: "Invalid map payload" });
return;
}
const mapPath = path.resolve(__dirname, "public/map.json");
await fs.promises.writeFile(
mapPath,
JSON.stringify(data, null, 2),
"utf8",
);
res.writeHead(200).end(JSON.stringify({ success: true }));
sendJson(res, 200, { success: true });
} catch (err) {
const status = err instanceof SyntaxError ? 400 : 500;
const message = err instanceof Error ? err.message : "Unknown error";
res.writeHead(status).end(JSON.stringify({ error: message }));
sendJson(res, status, { error: message });
}
});
},