giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-git:

Browse Source 
[add] playwright.config.js
 [add] src/app/App.js
 [add] src/app/editor-store.js
 [add] src/app/use-editor-store.js
 [add] src/assets/audio-assets.js
 [add] src/assets/gltf-model-import.js
 [add] src/assets/image-assets.js
 [add] src/assets/model-instance-labels.js
 [add] src/assets/model-instance-rendering.js
 [add] src/assets/model-instances.js
 [add] src/assets/project-asset-storage.js
 [add] src/assets/project-assets.js
 [add] src/commands/brush-command-helpers.js
 [add] src/commands/command-history.js
 [add] src/commands/command.js
 [add] src/commands/commit-transform-session-command.js
 [add] src/commands/create-box-brush-command.js
 [add] src/commands/delete-box-brush-command.js
 [add] src/commands/delete-entity-command.js
 [add] src/commands/delete-interaction-link-command.js
 [add] src/commands/delete-model-instance-command.js
 [add] src/commands/import-audio-asset-command.js
 [add] src/commands/import-background-image-asset-command.js
 [add] src/commands/import-model-asset-command.js
 [add] src/commands/move-box-brush-command.js
 [add] src/commands/resize-box-brush-command.js
 [add] src/commands/rotate-box-brush-command.js
 [add] src/commands/set-box-brush-face-material-command.js
 [add] src/commands/set-box-brush-face-uv-state-command.js
 [add] src/commands/set-box-brush-name-command.js
 [add] src/commands/set-box-brush-transform-command.js
 [add] src/commands/set-entity-name-command.js
 [add] src/commands/set-model-instance-name-command.js
 [add] src/commands/set-player-start-command.js
 [add] src/commands/set-scene-name-command.js
 [add] src/commands/set-world-settings-command.js
 [add] src/commands/upsert-entity-command.js
 [add] src/commands/upsert-interaction-link-command.js
 [add] src/commands/upsert-model-instance-command.js
 [add] src/core/ids.js
 [add] src/core/selection.js
 [add] src/core/tool-mode.js
 [add] src/core/transform-session.js
 [add] src/core/vector.js
 [add] src/core/whitebox-selection-feedback.js
 [add] src/core/whitebox-selection-mode.js
 [add] src/document/brushes.js
 [add] src/document/migrate-scene-document.js
 [add] src/document/scene-document-validation.js
 [add] src/document/scene-document.js
 [add] src/document/world-settings.js
 [add] src/entities/entity-instances.js
 [add] src/entities/entity-labels.js
 [add] src/geometry/box-brush-components.js
 [add] src/geometry/box-brush-mesh.js
 [add] src/geometry/box-brush.js
 [add] src/geometry/box-face-uvs.js
 [add] src/geometry/grid-snapping.js
 [add] src/geometry/model-instance-collider-debug-mesh.js
 [add] src/geometry/model-instance-collider-generation.js
 [add] src/interactions/interaction-links.js
 [add] src/main.js
 [add] src/materials/starter-material-library.js
 [add] src/materials/starter-material-textures.js
 [add] src/rendering/advanced-rendering.js
 [add] src/runner-web/RunnerCanvas.js
 [add] src/runtime-three/first-person-navigation-controller.js
 [add] src/runtime-three/navigation-controller.js
 [add] src/runtime-three/orbit-visitor-navigation-controller.js
 [add] src/runtime-three/player-collision.js
 [add] src/runtime-three/rapier-collision-world.js
 [add] src/runtime-three/runtime-audio-system.js
 [add] src/runtime-three/runtime-host.js
 [add] src/runtime-three/runtime-interaction-system.js
 [add] src/runtime-three/runtime-scene-build.js
 [add] src/runtime-three/runtime-scene-validation.js
 [add] src/serialization/local-draft-storage.js
 [add] src/serialization/scene-document-json.js
 [add] src/shared-ui/HierarchicalMenu.js
 [add] src/shared-ui/Panel.js
 [add] src/shared-ui/world-background-style.js
 [add] src/viewport-three/ViewportCanvas.js
 [add] src/viewport-three/ViewportPanel.js
 [add] src/viewport-three/viewport-entity-markers.js
 [add] src/viewport-three/viewport-focus.js
 [add] src/viewport-three/viewport-host.js
 [add] src/viewport-three/viewport-layout.js
 [add] src/viewport-three/viewport-transient-state.js
 [add] src/viewport-three/viewport-view-modes.js
 [add] tests/domain/box-brush-face-editing.command.test.js
 [add] tests/domain/build-runtime-scene.test.js
 [add] tests/domain/create-box-brush.command.test.js
 [add] tests/domain/create-empty-scene-document.test.js
 [add] tests/domain/editor-store.test.js
 [add] tests/domain/entity.command.test.js
 [add] tests/domain/interaction-links.validation.test.js
 [add] tests/domain/model-import.test.js
 [add] tests/domain/model-instance.command.test.js
 [add] tests/domain/player-start.command.test.js
 [add] tests/domain/rapier-collision-world.test.js
 [add] tests/domain/runtime-audio-system.test.js
 [add] tests/domain/runtime-interaction-system.test.js
 [add] tests/domain/runtime-scene-validation.test.js
 [add] tests/domain/scene-document-validation.test.js
 [add] tests/domain/transform-session.command.test.js
 [add] tests/domain/world-settings.command.test.js
 [add] tests/domain/world-settings.test.js
 [add] tests/e2e/app-smoke.e2e.js
 [add] tests/e2e/box-brush-authoring.e2e.js
 [add] tests/e2e/entities-foundation.e2e.js
 [add] tests/e2e/face-material-authoring.e2e.js
 [add] tests/e2e/first-room-workflow.e2e.js
 [add] tests/e2e/import-draco-model-asset.e2e.js
 [add] tests/e2e/import-external-model-asset.e2e.js
 [add] tests/e2e/import-model-asset.e2e.js
 [add] tests/e2e/local-lights-and-background.e2e.js
 [add] tests/e2e/orthographic-views.e2e.js
 [add] tests/e2e/runner-v1.e2e.js
 [add] tests/e2e/runtime-click-interaction.e2e.js
 [add] tests/e2e/runtime-trigger-teleport.e2e.js
 [add] tests/e2e/viewport-quad-layout.e2e.js
 [add] tests/e2e/viewport-test-helpers.js
 [add] tests/e2e/whitebox-component-selection.e2e.js
 [add] tests/e2e/world-environment.e2e.js
 [add] tests/geometry/box-brush-geometry.test.js
 [add] tests/geometry/box-face-uvs.test.js
 [add] tests/geometry/model-instance-collider-generation.test.js
 [add] tests/helpers/model-collider-fixtures.js
 [add] tests/serialization/local-draft-storage.test.js
 [add] tests/serialization/project-asset-storage.test.js
 [add] tests/serialization/scene-document-json.test.js
 [add] tests/setup/vitest.setup.js
 [add] tests/unit/audio-assets.test.js
 [add] tests/unit/entity-instances.test.js
 [add] tests/unit/package-scripts.test.js
 [add] tests/unit/transform-foundation.integration.test.js
 [add] tests/unit/viewport-canvas.test.js
 [add] tests/unit/viewport-entity-markers.test.js
 [add] tests/unit/viewport-focus.test.js
 [add] tests/unit/viewport-layout.test.js
 [add] tests/unit/viewport-view-modes.test.js
 [add] vite.config.js
 [add] vitest.config.js
This commit is contained in:
Victor Giers
2026-04-05 02:25:08 +02:00
parent b23cb0dd32
commit 0b54fa14c9
143 changed files with 26849 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
tests/unit/audio-assets.test.js Normal file
View File

@@ -0,0 +1,66 @@
import { afterEach, describe, expect, it, vi } from "vitest";
import { createInMemoryProjectAssetStorage } from "../../src/assets/project-asset-storage";
import { importAudioAssetFromFile, loadAudioAssetFromStorage } from "../../src/assets/audio-assets";
describe("audio asset import and storage", () => {
afterEach(() => {
vi.unstubAllGlobals();
});
it("persists audio through the generic project asset storage and reloads decoded buffers", async () => {
const decodedBuffer = {
duration: 2.5,
numberOfChannels: 2,
sampleRate: 44100
};
const decodeCalls = [];
const closeCalls = [];
class MockAudioContext {
state = "running";
async decodeAudioData(bytes) {
decodeCalls.push(bytes);
return decodedBuffer;
}
async close() {
closeCalls.push(1);
}
}
vi.stubGlobal("AudioContext", MockAudioContext);
vi.stubGlobal("webkitAudioContext", MockAudioContext);
const storage = createInMemoryProjectAssetStorage();
const fileBytes = new Uint8Array([1, 2, 3, 4]).buffer;
const file = {
name: "lobby-loop.ogg",
type: "audio/ogg",
webkitRelativePath: "",
arrayBuffer: async () => fileBytes
};
const importedAudio = await importAudioAssetFromFile(file, storage);
const storedAsset = await storage.getAsset(importedAudio.asset.storageKey);
const reloadedAudio = await loadAudioAssetFromStorage(storage, importedAudio.asset);
expect(importedAudio.asset).toMatchObject({
kind: "audio",
sourceName: "lobby-loop.ogg",
mimeType: "audio/ogg",
byteLength: fileBytes.byteLength
});
expect(importedAudio.asset.metadata).toMatchObject({
kind: "audio",
durationSeconds: 2.5,
channelCount: 2,
sampleRateHz: 44100
});
expect(storedAsset).toEqual({
files: {
"lobby-loop.ogg": {
bytes: fileBytes,
mimeType: "audio/ogg"
}
}
});
expect(reloadedAudio.assetId).toBe(importedAudio.asset.id);
expect(reloadedAudio.storageKey).toBe(importedAudio.asset.storageKey);
expect(reloadedAudio.metadata).toEqual(importedAudio.asset.metadata);
expect(reloadedAudio.buffer).toBe(decodedBuffer);
expect(decodeCalls).toHaveLength(2);
expect(closeCalls).toHaveLength(2);
});
});

85
tests/unit/entity-instances.test.js Normal file
View File

@@ -0,0 +1,85 @@
import { describe, expect, it } from "vitest";
import { DEFAULT_POINT_LIGHT_COLOR_HEX, DEFAULT_POINT_LIGHT_DISTANCE, DEFAULT_POINT_LIGHT_INTENSITY, DEFAULT_PLAYER_START_BOX_SIZE, DEFAULT_PLAYER_START_CAPSULE_HEIGHT, DEFAULT_PLAYER_START_CAPSULE_RADIUS, DEFAULT_PLAYER_START_EYE_HEIGHT, DEFAULT_SPOT_LIGHT_ANGLE_DEGREES, DEFAULT_SPOT_LIGHT_COLOR_HEX, DEFAULT_SPOT_LIGHT_DISTANCE, DEFAULT_SPOT_LIGHT_DIRECTION, DEFAULT_SPOT_LIGHT_INTENSITY, DEFAULT_INTERACTABLE_PROMPT, DEFAULT_SOUND_EMITTER_AUDIO_ASSET_ID, DEFAULT_SOUND_EMITTER_MAX_DISTANCE, DEFAULT_SOUND_EMITTER_REF_DISTANCE, DEFAULT_SOUND_EMITTER_VOLUME, DEFAULT_TRIGGER_VOLUME_SIZE, createPointLightEntity, createDefaultEntityInstance, createInteractableEntity, createSpotLightEntity, getEntityRegistryEntry } from "../../src/entities/entity-instances";
describe("entity registry defaults", () => {
it("creates explicit typed defaults for each supported entity kind", () => {
expect(createDefaultEntityInstance("playerStart")).toMatchObject({
kind: "playerStart",
position: { x: 0, y: 0, z: 0 },
yawDegrees: 0,
collider: {
mode: "capsule",
eyeHeight: DEFAULT_PLAYER_START_EYE_HEIGHT,
capsuleRadius: DEFAULT_PLAYER_START_CAPSULE_RADIUS,
capsuleHeight: DEFAULT_PLAYER_START_CAPSULE_HEIGHT,
boxSize: DEFAULT_PLAYER_START_BOX_SIZE
}
});
expect(createDefaultEntityInstance("pointLight")).toMatchObject({
kind: "pointLight",
position: { x: 0, y: 0, z: 0 },
colorHex: DEFAULT_POINT_LIGHT_COLOR_HEX,
intensity: DEFAULT_POINT_LIGHT_INTENSITY,
distance: DEFAULT_POINT_LIGHT_DISTANCE
});
expect(createDefaultEntityInstance("spotLight")).toMatchObject({
kind: "spotLight",
position: { x: 0, y: 0, z: 0 },
direction: DEFAULT_SPOT_LIGHT_DIRECTION,
colorHex: DEFAULT_SPOT_LIGHT_COLOR_HEX,
intensity: DEFAULT_SPOT_LIGHT_INTENSITY,
distance: DEFAULT_SPOT_LIGHT_DISTANCE,
angleDegrees: DEFAULT_SPOT_LIGHT_ANGLE_DEGREES
});
expect(createDefaultEntityInstance("soundEmitter")).toMatchObject({
kind: "soundEmitter",
position: { x: 0, y: 0, z: 0 },
audioAssetId: DEFAULT_SOUND_EMITTER_AUDIO_ASSET_ID,
volume: DEFAULT_SOUND_EMITTER_VOLUME,
refDistance: DEFAULT_SOUND_EMITTER_REF_DISTANCE,
maxDistance: DEFAULT_SOUND_EMITTER_MAX_DISTANCE,
autoplay: false,
loop: false
});
expect(createDefaultEntityInstance("triggerVolume")).toMatchObject({
kind: "triggerVolume",
position: { x: 0, y: 0, z: 0 },
size: DEFAULT_TRIGGER_VOLUME_SIZE,
triggerOnEnter: true,
triggerOnExit: false
});
expect(createDefaultEntityInstance("teleportTarget")).toMatchObject({
kind: "teleportTarget",
position: { x: 0, y: 0, z: 0 },
yawDegrees: 0
});
expect(createDefaultEntityInstance("interactable")).toMatchObject({
kind: "interactable",
position: { x: 0, y: 0, z: 0 },
radius: 1.5,
prompt: DEFAULT_INTERACTABLE_PROMPT,
enabled: true
});
});
it("keeps entity metadata and prompt validation explicit", () => {
expect(getEntityRegistryEntry("triggerVolume")).toMatchObject({
kind: "triggerVolume",
label: "Trigger Volume"
});
expect(createInteractableEntity({
prompt: " Open "
}).prompt).toBe("Open");
expect(() => createInteractableEntity({
prompt: " "
})).toThrow("Interactable prompt must be non-empty.");
expect(() => createPointLightEntity({
distance: 0
})).toThrow("Point Light distance must be a finite number greater than zero.");
expect(() => createSpotLightEntity({
direction: {
x: 0,
y: 0,
z: 0
}
})).toThrow("Spot Light direction must not be the zero vector.");
});
});

17
tests/unit/package-scripts.test.js Normal file
View File

@@ -0,0 +1,17 @@
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { describe, expect, it } from "vitest";
function readPackageManifest() {
return JSON.parse(readFileSync(resolve(process.cwd(), "package.json"), "utf8"));
}
describe("package scripts", () => {
it("exposes the expected verification script contract", () => {
const packageManifest = readPackageManifest();
expect(packageManifest.scripts).toBeDefined();
expect(packageManifest.scripts?.["test"]).toBeDefined();
expect(packageManifest.scripts?.["test:browser"]).toBeDefined();
expect(packageManifest.scripts?.["test:e2e"]).toBeDefined();
expect(packageManifest.scripts?.["typecheck"]).toBeDefined();
expect(packageManifest.scripts?.["test:typecheck"]).toBeDefined();
});
});

494
tests/unit/transform-foundation.integration.test.js Normal file
View File

@@ -0,0 +1,494 @@
import { jsx as _jsx } from "react/jsx-runtime";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { act } from "react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { App } from "../../src/app/App";
import { createEditorStore } from "../../src/app/editor-store";
import { createModelInstance } from "../../src/assets/model-instances";
import { createProjectAssetStorageKey } from "../../src/assets/project-assets";
import { createBoxBrush } from "../../src/document/brushes";
import { createEmptySceneDocument } from "../../src/document/scene-document";
import { createPlayerStartEntity } from "../../src/entities/entity-instances";
const { MockViewportHost, viewportHostInstances } = vi.hoisted(() => {
const viewportHostInstances = [];
class MockViewportHost {
panelId = null;
setPanelId = vi.fn((panelId) => {
this.panelId = panelId;
});
mount = vi.fn();
dispose = vi.fn();
updateWorld = vi.fn();
updateAssets = vi.fn();
updateDocument = vi.fn();
setViewMode = vi.fn();
setDisplayMode = vi.fn();
setCameraState = vi.fn();
setBrushSelectionChangeHandler = vi.fn();
setCameraStateChangeHandler = vi.fn();
setCreationPreviewChangeHandler = vi.fn();
setCreationCommitHandler = vi.fn();
setTransformSessionChangeHandler = vi.fn();
setTransformCommitHandler = vi.fn();
setTransformCancelHandler = vi.fn();
setWhiteboxHoverLabelChangeHandler = vi.fn();
setWhiteboxSelectionMode = vi.fn();
setWhiteboxSnapSettings = vi.fn();
setToolMode = vi.fn();
setCreationPreview = vi.fn();
setTransformSession = vi.fn();
focusSelection = vi.fn();
constructor() {
viewportHostInstances.push(this);
}
}
return {
MockViewportHost,
viewportHostInstances
};
});
vi.mock("../../src/viewport-three/viewport-host", () => ({
ViewportHost: MockViewportHost
}));
vi.mock("../../src/assets/project-asset-storage", () => ({
getBrowserProjectAssetStorageAccess: vi.fn(async () => ({
storage: null,
diagnostic: null
}))
}));
const modelAsset = {
id: "asset-model-transform-integration",
kind: "model",
sourceName: "transform-fixture.glb",
mimeType: "model/gltf-binary",
storageKey: createProjectAssetStorageKey("asset-model-transform-integration"),
byteLength: 64,
metadata: {
kind: "model",
format: "glb",
sceneName: "Transform Fixture",
nodeCount: 1,
meshCount: 1,
materialNames: [],
textureNames: [],
animationNames: [],
boundingBox: {
min: {
x: -0.5,
y: 0,
z: -0.5
},
max: {
x: 0.5,
y: 1,
z: 0.5
},
size: {
x: 1,
y: 1,
z: 1
}
},
warnings: []
}
};
function getTopLeftViewportHost() {
const viewportHost = viewportHostInstances.find((instance) => instance.panelId === "topLeft");
if (viewportHost === undefined) {
throw new Error("Top-left viewport host was not mounted.");
}
return viewportHost;
}
async function renderTransformFixtureApp() {
const brush = createBoxBrush({
id: "brush-transform-main",
name: "Brush Transform Fixture",
center: {
x: 0,
y: 1,
z: 0
}
});
const playerStart = createPlayerStartEntity({
id: "entity-player-start-transform",
name: "Player Start Fixture",
position: {
x: 2,
y: 0,
z: -2
},
yawDegrees: 0
});
const modelInstance = createModelInstance({
id: "model-instance-transform-main",
assetId: modelAsset.id,
name: "Model Transform Fixture",
position: {
x: -3,
y: 0,
z: 3
}
});
const store = createEditorStore({
initialDocument: {
...createEmptySceneDocument({ name: "Transform Fixture" }),
brushes: {
[brush.id]: brush
},
assets: {
[modelAsset.id]: modelAsset
},
entities: {
[playerStart.id]: playerStart
},
modelInstances: {
[modelInstance.id]: modelInstance
}
}
});
render(_jsx(App, { store: store }));
await waitFor(() => {
expect(viewportHostInstances.length).toBeGreaterThan(0);
expect(getTopLeftViewportHost().setTransformCommitHandler).toHaveBeenCalled();
});
return {
store,
brush,
playerStart,
modelInstance,
viewportHost: getTopLeftViewportHost()
};
}
async function renderQuadTransformFixtureApp() {
const fixture = await renderTransformFixtureApp();
act(() => {
fixture.store.setViewportLayoutMode("quad");
});
return fixture;
}
function getLatestTransformSession(store) {
const transformSession = store.getState().viewportTransientState.transformSession;
if (transformSession.kind !== "active") {
throw new Error("Expected an active transform session.");
}
return transformSession;
}
function emitTransformPreview(viewportHost, transformSession) {
const handler = viewportHost.setTransformSessionChangeHandler.mock.calls.at(-1)?.[0];
if (handler === undefined) {
throw new Error("Transform session change handler was not registered.");
}
act(() => {
handler(transformSession);
});
}
function commitTransform(viewportHost, transformSession) {
const handler = viewportHost.setTransformCommitHandler.mock.calls.at(-1)?.[0];
if (handler === undefined) {
throw new Error("Transform commit handler was not registered.");
}
act(() => {
handler(transformSession);
});
}
describe("transform foundation integration", () => {
beforeEach(() => {
viewportHostInstances.length = 0;
vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(() => ({}));
});
afterEach(() => {
vi.restoreAllMocks();
});
it("moves a whole brush through keyboard entry, axis constraint, and viewport commit", async () => {
const { store, brush, viewportHost } = await renderTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Brush Transform Fixture$/ }));
});
fireEvent.keyDown(window, {
key: "g",
code: "KeyG"
});
expect(store.getState().viewportTransientState.transformSession).toMatchObject({
kind: "active",
operation: "translate",
axisConstraint: null,
target: {
kind: "brush",
brushId: brush.id
}
});
fireEvent.keyDown(window, {
key: "x",
code: "KeyX"
});
expect(store.getState().viewportTransientState.transformSession).toMatchObject({
kind: "active",
axisConstraint: "x"
});
const previewSession = {
...getLatestTransformSession(store),
preview: {
kind: "brush",
center: {
x: 6,
y: brush.center.y,
z: brush.center.z
},
rotationDegrees: {
...brush.rotationDegrees
},
size: {
...brush.size
}
}
};
emitTransformPreview(viewportHost, previewSession);
commitTransform(viewportHost, previewSession);
expect(store.getState().viewportTransientState.transformSession).toEqual({
kind: "none"
});
expect(store.getState().document.brushes[brush.id].center).toEqual({
x: 6,
y: brush.center.y,
z: brush.center.z
});
});
it("rotates and scales a whole whitebox box through the shared transform controller", async () => {
const { store, brush, viewportHost } = await renderTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Brush Transform Fixture$/ }));
});
fireEvent.click(screen.getByTestId("transform-rotate-button"));
const rotatePreviewSession = {
...getLatestTransformSession(store),
preview: {
kind: "brush",
center: {
...brush.center
},
rotationDegrees: {
x: 0,
y: 37.5,
z: 12.5
},
size: {
...brush.size
}
}
};
emitTransformPreview(viewportHost, rotatePreviewSession);
commitTransform(viewportHost, rotatePreviewSession);
expect(store.getState().document.brushes[brush.id].rotationDegrees).toEqual({
x: 0,
y: 37.5,
z: 12.5
});
fireEvent.click(screen.getByTestId("transform-scale-button"));
const scalePreviewSession = {
...getLatestTransformSession(store),
preview: {
kind: "brush",
center: {
...brush.center
},
rotationDegrees: {
x: 0,
y: 37.5,
z: 12.5
},
size: {
x: 3.5,
y: 2.5,
z: 4.5
}
}
};
emitTransformPreview(viewportHost, scalePreviewSession);
commitTransform(viewportHost, scalePreviewSession);
expect(store.getState().document.brushes[brush.id]).toMatchObject({
rotationDegrees: {
x: 0,
y: 37.5,
z: 12.5
},
size: {
x: 3.5,
y: 2.5,
z: 4.5
}
});
});
it("keeps transform controls coherent across object and component modes", async () => {
const { store, brush } = await renderTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Brush Transform Fixture$/ }));
});
expect(screen.getByTestId("transform-translate-button")).not.toBeDisabled();
await act(async () => {
fireEvent.click(screen.getByTestId("whitebox-selection-mode-face"));
});
expect(store.getState().whiteboxSelectionMode).toBe("face");
expect(screen.getByTestId("transform-translate-button")).toBeDisabled();
expect(screen.getByTestId("transform-rotate-button")).toBeDisabled();
expect(screen.getByTestId("transform-scale-button")).toBeDisabled();
act(() => {
store.setSelection({
kind: "brushFace",
brushId: brush.id,
faceId: "posY"
});
});
expect(screen.getByTestId("transform-translate-button")).not.toBeDisabled();
expect(screen.getByTestId("transform-rotate-button")).not.toBeDisabled();
expect(screen.getByTestId("transform-scale-button")).not.toBeDisabled();
await act(async () => {
fireEvent.click(screen.getByTestId("whitebox-selection-mode-vertex"));
});
act(() => {
store.setSelection({
kind: "brushVertex",
brushId: brush.id,
vertexId: "posX_posY_posZ"
});
});
expect(screen.getByTestId("transform-translate-button")).not.toBeDisabled();
expect(screen.getByTestId("transform-rotate-button")).toBeDisabled();
expect(screen.getByTestId("transform-scale-button")).toBeDisabled();
await act(async () => {
fireEvent.click(screen.getByTestId("whitebox-selection-mode-object"));
});
expect(store.getState().whiteboxSelectionMode).toBe("object");
expect(store.getState().selection).toEqual({
kind: "brushes",
ids: [brush.id]
});
expect(screen.getByTestId("transform-translate-button")).not.toBeDisabled();
});
it("moves an entity through the shared transform controller", async () => {
const { store, playerStart, viewportHost } = await renderTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Player Start Fixture$/ }));
});
fireEvent.keyDown(window, {
key: "g",
code: "KeyG"
});
const previewSession = {
...getLatestTransformSession(store),
preview: {
kind: "entity",
position: {
x: 8,
y: 0,
z: -4
},
rotation: {
kind: "yaw",
yawDegrees: playerStart.yawDegrees
}
}
};
emitTransformPreview(viewportHost, previewSession);
commitTransform(viewportHost, previewSession);
expect(store.getState().document.entities[playerStart.id]).toMatchObject({
position: {
x: 8,
y: 0,
z: -4
}
});
});
it("cancels an active transform with Escape without committing preview changes", async () => {
const { store, playerStart, viewportHost } = await renderTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Player Start Fixture$/ }));
});
fireEvent.keyDown(window, {
key: "g",
code: "KeyG"
});
emitTransformPreview(viewportHost, {
...getLatestTransformSession(store),
preview: {
kind: "entity",
position: {
x: 12,
y: 0,
z: -6
},
rotation: {
kind: "yaw",
yawDegrees: playerStart.yawDegrees
}
}
});
fireEvent.keyDown(window, {
key: "Escape",
code: "Escape"
});
expect(store.getState().viewportTransientState.transformSession).toEqual({
kind: "none"
});
expect(store.getState().document.entities[playerStart.id]).toEqual(playerStart);
});
it("moves a model instance through the shared transform controller", async () => {
const { store, modelInstance, viewportHost } = await renderTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Model Transform Fixture$/ }));
});
fireEvent.keyDown(window, {
key: "g",
code: "KeyG"
});
const previewSession = {
...getLatestTransformSession(store),
preview: {
kind: "modelInstance",
position: {
x: -1,
y: 0,
z: 7
},
rotationDegrees: {
...modelInstance.rotationDegrees
},
scale: {
...modelInstance.scale
}
}
};
emitTransformPreview(viewportHost, previewSession);
commitTransform(viewportHost, previewSession);
expect(store.getState().document.modelInstances[modelInstance.id]).toMatchObject({
position: {
x: -1,
y: 0,
z: 7
}
});
});
it("uses the hovered quad viewport as the active transform panel for keyboard entry", async () => {
const { store, brush } = await renderQuadTransformFixtureApp();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /^Brush Transform Fixture$/ }));
});
fireEvent.pointerMove(screen.getByTestId("viewport-panel-bottomRight"), {
clientX: 24,
clientY: 24
});
fireEvent.keyDown(window, {
key: "g",
code: "KeyG"
});
expect(store.getState().activeViewportPanelId).toBe("bottomRight");
expect(store.getState().viewportTransientState.transformSession).toMatchObject({
kind: "active",
operation: "translate",
sourcePanelId: "bottomRight",
target: {
kind: "brush",
brushId: brush.id
}
});
});
});

92
tests/unit/viewport-canvas.test.js Normal file
View File

@@ -0,0 +1,92 @@
import { jsx as _jsx } from "react/jsx-runtime";
import { render, waitFor } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { createInactiveTransformSession } from "../../src/core/transform-session";
import { createEmptySceneDocument } from "../../src/document/scene-document";
import { ViewportCanvas } from "../../src/viewport-three/ViewportCanvas";
import { createDefaultViewportPanelCameraState } from "../../src/viewport-three/viewport-layout";
const { MockViewportHost, viewportHostInstances } = vi.hoisted(() => {
const viewportHostInstances = [];
class MockViewportHost {
mount = vi.fn();
dispose = vi.fn();
updateWorld = vi.fn();
updateAssets = vi.fn();
updateDocument = vi.fn();
setViewMode = vi.fn();
setDisplayMode = vi.fn();
setCameraState = vi.fn();
setBrushSelectionChangeHandler = vi.fn();
setCameraStateChangeHandler = vi.fn();
setCreationPreviewChangeHandler = vi.fn();
setCreationCommitHandler = vi.fn();
setTransformSessionChangeHandler = vi.fn();
setTransformCommitHandler = vi.fn();
setTransformCancelHandler = vi.fn();
setWhiteboxHoverLabelChangeHandler = vi.fn();
setWhiteboxSelectionMode = vi.fn();
setWhiteboxSnapSettings = vi.fn();
setToolMode = vi.fn();
setCreationPreview = vi.fn();
setTransformSession = vi.fn();
setPanelId = vi.fn();
focusSelection = vi.fn();
constructor() {
viewportHostInstances.push(this);
}
}
return {
MockViewportHost,
viewportHostInstances
};
});
vi.mock("../../src/viewport-three/viewport-host", () => ({
ViewportHost: MockViewportHost
}));
describe("ViewportCanvas", () => {
beforeEach(() => {
viewportHostInstances.length = 0;
vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(() => ({}));
});
afterEach(() => {
vi.restoreAllMocks();
});
it("wires the creation commit handler into the viewport host", async () => {
const sceneDocument = createEmptySceneDocument();
const cameraState = createDefaultViewportPanelCameraState();
const toolPreview = {
kind: "create",
sourcePanelId: "topLeft",
target: {
kind: "box-brush"
},
center: null
};
const onCommitCreation = vi.fn(() => true);
const onCameraStateChange = vi.fn((_cameraState) => undefined);
const onToolPreviewChange = vi.fn((_toolPreview) => undefined);
const onTransformSessionChange = vi.fn((_transformSession) => undefined);
const onTransformCommit = vi.fn((_transformSession) => undefined);
const onTransformCancel = vi.fn(() => undefined);
const onSelectionChange = vi.fn();
render(_jsx(ViewportCanvas, { panelId: "topLeft", world: sceneDocument.world, sceneDocument: sceneDocument, projectAssets: sceneDocument.assets, loadedModelAssets: {}, loadedImageAssets: {}, whiteboxSelectionMode: "object", whiteboxSnapEnabled: true, whiteboxSnapStep: 1, selection: { kind: "none" }, toolMode: "create", toolPreview: toolPreview, transformSession: createInactiveTransformSession(), cameraState: cameraState, viewMode: "perspective", displayMode: "authoring", layoutMode: "single", isActivePanel: true, focusRequestId: 0, focusSelection: { kind: "none" }, onSelectionChange: onSelectionChange, onCommitCreation: onCommitCreation, onCameraStateChange: onCameraStateChange, onToolPreviewChange: onToolPreviewChange, onTransformSessionChange: onTransformSessionChange, onTransformCommit: onTransformCommit, onTransformCancel: onTransformCancel }));
await waitFor(() => {
expect(viewportHostInstances).toHaveLength(1);
expect(viewportHostInstances[0].setCreationCommitHandler).toHaveBeenCalledTimes(1);
});
const registeredHandler = viewportHostInstances[0].setCreationCommitHandler.mock.calls[0][0];
expect(registeredHandler(toolPreview)).toBe(true);
expect(onCommitCreation).toHaveBeenCalledWith(toolPreview);
});
it("applies and subscribes to persisted camera state through the viewport host", async () => {
const sceneDocument = createEmptySceneDocument();
const cameraState = createDefaultViewportPanelCameraState();
const onCameraStateChange = vi.fn((_cameraState) => undefined);
render(_jsx(ViewportCanvas, { panelId: "topLeft", world: sceneDocument.world, sceneDocument: sceneDocument, projectAssets: sceneDocument.assets, loadedModelAssets: {}, loadedImageAssets: {}, whiteboxSelectionMode: "object", whiteboxSnapEnabled: true, whiteboxSnapStep: 1, selection: { kind: "none" }, toolMode: "select", toolPreview: { kind: "none" }, transformSession: createInactiveTransformSession(), cameraState: cameraState, viewMode: "perspective", displayMode: "normal", layoutMode: "single", isActivePanel: true, focusRequestId: 0, focusSelection: { kind: "none" }, onSelectionChange: vi.fn(), onCommitCreation: vi.fn(() => true), onCameraStateChange: onCameraStateChange, onToolPreviewChange: vi.fn(), onTransformSessionChange: vi.fn(), onTransformCommit: vi.fn(), onTransformCancel: vi.fn() }));
await waitFor(() => {
expect(viewportHostInstances).toHaveLength(1);
expect(viewportHostInstances[0].setCameraState).toHaveBeenCalledWith(cameraState);
expect(viewportHostInstances[0].setCameraStateChangeHandler).toHaveBeenCalledTimes(1);
});
});
});

23
tests/unit/viewport-entity-markers.test.js Normal file
View File

@@ -0,0 +1,23 @@
import { BoxGeometry, CylinderGeometry, SphereGeometry, TorusGeometry } from "three";
import { describe, expect, it } from "vitest";
import { createSoundEmitterMarkerMeshes } from "../../src/viewport-three/viewport-entity-markers";
describe("createSoundEmitterMarkerMeshes", () => {
it("builds a speaker-like marker instead of a sphere", () => {
const meshes = createSoundEmitterMarkerMeshes(0x72d7c9, false);
expect(meshes).toHaveLength(5);
expect(meshes[0].geometry).toBeInstanceOf(BoxGeometry);
expect(meshes[1].geometry).toBeInstanceOf(TorusGeometry);
expect(meshes[2].geometry).toBeInstanceOf(CylinderGeometry);
expect(meshes[3].geometry).toBeInstanceOf(TorusGeometry);
expect(meshes[4].geometry).toBeInstanceOf(CylinderGeometry);
expect(meshes.some((mesh) => mesh.geometry instanceof SphereGeometry)).toBe(false);
expect(meshes[0].position).toMatchObject({
x: 0,
y: 0,
z: 0
});
expect(meshes[1].position.y).toBeGreaterThan(meshes[3].position.y);
expect(meshes[1].position.z).toBeGreaterThan(0);
expect(meshes[3].position.z).toBeGreaterThan(0);
});
});

232
tests/unit/viewport-focus.test.js Normal file
View File

@@ -0,0 +1,232 @@
import { describe, expect, it } from "vitest";
import { createBoxBrush } from "../../src/document/brushes";
import { createEmptySceneDocument } from "../../src/document/scene-document";
import { createPointLightEntity, createPlayerStartEntity, createSpotLightEntity, createTriggerVolumeEntity } from "../../src/entities/entity-instances";
import { resolveViewportFocusTarget } from "../../src/viewport-three/viewport-focus";
describe("resolveViewportFocusTarget", () => {
it("frames the selected brush", () => {
const brush = createBoxBrush({
id: "brush-room",
center: {
x: 3,
y: 2,
z: -1
},
size: {
x: 6,
y: 4,
z: 2
}
});
const document = {
...createEmptySceneDocument(),
brushes: {
[brush.id]: brush
}
};
expect(resolveViewportFocusTarget(document, {
kind: "brushes",
ids: [brush.id]
})).toEqual({
center: {
x: 3,
y: 2,
z: -1
},
radius: Math.hypot(6, 4, 2) * 0.5
});
});
it("frames rotated whitebox boxes around their authored center with a stable object radius", () => {
const brush = createBoxBrush({
id: "brush-rotated-room",
center: {
x: 1.25,
y: 1.5,
z: -0.75
},
rotationDegrees: {
x: 0,
y: 45,
z: 0
},
size: {
x: 2,
y: 2,
z: 4
}
});
const document = {
...createEmptySceneDocument(),
brushes: {
[brush.id]: brush
}
};
expect(resolveViewportFocusTarget(document, {
kind: "brushes",
ids: [brush.id]
})).toEqual({
center: {
x: 1.25,
y: 1.5,
z: -0.75
},
radius: Math.hypot(2, 2, 4) * 0.5
});
});
it("frames the owning brush when a face is selected", () => {
const brush = createBoxBrush({
id: "brush-face-room"
});
const document = {
...createEmptySceneDocument(),
brushes: {
[brush.id]: brush
}
};
const focusTarget = resolveViewportFocusTarget(document, {
kind: "brushFace",
brushId: brush.id,
faceId: "posZ"
});
expect(focusTarget?.center).toEqual(brush.center);
expect(focusTarget?.radius).toBe(Math.hypot(2, 2, 2) * 0.5);
});
it("frames the selected Player Start helper", () => {
const playerStart = createPlayerStartEntity({
id: "entity-player-start-main",
position: {
x: 4,
y: 0,
z: -2
},
yawDegrees: 90
});
const document = {
...createEmptySceneDocument(),
entities: {
[playerStart.id]: playerStart
}
};
const focusTarget = resolveViewportFocusTarget(document, {
kind: "entities",
ids: [playerStart.id]
});
expect(focusTarget?.center).toEqual({
x: 4,
y: 0.3,
z: -2
});
expect(focusTarget?.radius).toBeGreaterThan(0.6);
});
it("frames the selected Point Light helper", () => {
const pointLight = createPointLightEntity({
id: "entity-point-light-main",
position: {
x: 2,
y: 3,
z: -1
},
distance: 8
});
const document = {
...createEmptySceneDocument(),
entities: {
[pointLight.id]: pointLight
}
};
const focusTarget = resolveViewportFocusTarget(document, {
kind: "entities",
ids: [pointLight.id]
});
expect(focusTarget).toEqual({
center: {
x: 2,
y: 3,
z: -1
},
radius: 8
});
});
it("frames the selected Spot Light helper", () => {
const spotLight = createSpotLightEntity({
id: "entity-spot-light-main",
position: {
x: -2,
y: 4,
z: 1
},
distance: 12
});
const document = {
...createEmptySceneDocument(),
entities: {
[spotLight.id]: spotLight
}
};
const focusTarget = resolveViewportFocusTarget(document, {
kind: "entities",
ids: [spotLight.id]
});
expect(focusTarget).toEqual({
center: {
x: -2,
y: 4,
z: 1
},
radius: 12
});
});
it("frames a selected Trigger Volume around its authored bounds", () => {
const triggerVolume = createTriggerVolumeEntity({
id: "entity-trigger-main",
position: {
x: 3,
y: 2,
z: -1
},
size: {
x: 4,
y: 6,
z: 2
}
});
const document = {
...createEmptySceneDocument(),
entities: {
[triggerVolume.id]: triggerVolume
}
};
const focusTarget = resolveViewportFocusTarget(document, {
kind: "entities",
ids: [triggerVolume.id]
});
expect(focusTarget).toEqual({
center: {
x: 3,
y: 2,
z: -1
},
radius: Math.hypot(2, 3, 1)
});
});
it("frames the authored scene when nothing is selected and returns null when the scene is empty", () => {
const brush = createBoxBrush({
id: "brush-room"
});
const populatedDocument = {
...createEmptySceneDocument(),
brushes: {
[brush.id]: brush
}
};
expect(resolveViewportFocusTarget(populatedDocument, { kind: "none" })).toEqual({
center: {
x: 0,
y: 1,
z: 0
},
radius: Math.hypot(2, 2, 2) * 0.5
});
expect(resolveViewportFocusTarget(createEmptySceneDocument(), { kind: "none" })).toBeNull();
});
});

36
tests/unit/viewport-layout.test.js Normal file
View File

@@ -0,0 +1,36 @@
import { describe, expect, it } from "vitest";
import { createDefaultViewportLayoutState, getViewportDisplayModeLabel, getViewportLayoutModeLabel, getViewportPanelLabel } from "../../src/viewport-three/viewport-layout";
describe("viewport layout", () => {
it("defaults to a quad-ready panel arrangement with orthographic authoring panes", () => {
const layout = createDefaultViewportLayoutState();
expect(layout.layoutMode).toBe("single");
expect(layout.activePanelId).toBe("topLeft");
expect(layout.panels.topLeft).toMatchObject({
viewMode: "perspective",
displayMode: "normal"
});
expect(layout.panels.topRight).toMatchObject({
viewMode: "top",
displayMode: "authoring"
});
expect(layout.panels.bottomLeft).toMatchObject({
viewMode: "front",
displayMode: "authoring"
});
expect(layout.panels.bottomRight).toMatchObject({
viewMode: "side",
displayMode: "authoring"
});
expect(layout.viewportQuadSplit).toEqual({
x: 0.5,
y: 0.5
});
});
it("exposes readable labels for the layout and panel chrome", () => {
expect(getViewportLayoutModeLabel("single")).toBe("Single View");
expect(getViewportLayoutModeLabel("quad")).toBe("4-Panel");
expect(getViewportDisplayModeLabel("authoring")).toBe("Authoring");
expect(getViewportDisplayModeLabel("wireframe")).toBe("Wireframe");
expect(getViewportPanelLabel("topRight")).toBe("Top Right");
});
});

61
tests/unit/viewport-view-modes.test.js Normal file
View File

@@ -0,0 +1,61 @@
import { describe, expect, it } from "vitest";
import { getViewportViewModeControlHint, getViewportViewModeDefinition, getViewportViewModeGridPlaneLabel, getViewportViewModeLabel } from "../../src/viewport-three/viewport-view-modes";
describe("viewport view modes", () => {
it("defines the orthographic axes and grid planes explicitly", () => {
expect(getViewportViewModeDefinition("top")).toMatchObject({
label: "Top",
cameraType: "orthographic",
cameraDirection: {
x: 0,
y: 1,
z: 0
},
cameraUp: {
x: 0,
y: 0,
z: -1
},
gridPlane: "xz",
snapAxis: "y"
});
expect(getViewportViewModeDefinition("front")).toMatchObject({
label: "Front",
cameraType: "orthographic",
cameraDirection: {
x: 0,
y: 0,
z: 1
},
cameraUp: {
x: 0,
y: 1,
z: 0
},
gridPlane: "xy",
snapAxis: "z"
});
expect(getViewportViewModeDefinition("side")).toMatchObject({
label: "Side",
cameraType: "orthographic",
cameraDirection: {
x: -1,
y: 0,
z: 0
},
cameraUp: {
x: 0,
y: 1,
z: 0
},
gridPlane: "yz",
snapAxis: "x"
});
});
it("exposes readable labels and grid hints for the UI", () => {
expect(getViewportViewModeLabel("perspective")).toBe("Perspective");
expect(getViewportViewModeLabel("top")).toBe("Top");
expect(getViewportViewModeGridPlaneLabel("front")).toBe("XY");
expect(getViewportViewModeControlHint("perspective")).toContain("orbits");
expect(getViewportViewModeControlHint("side")).toContain("pans");
});
});