From 6eef0142e2968d9e74eea50feb0b6d9dae694910 Mon Sep 17 00:00:00 2001 From: Victor Giers Date: Sat, 4 Apr 2026 19:06:33 +0200 Subject: [PATCH] Update preview group creation to handle wireframe display mode --- src/viewport-three/viewport-host.ts | 40 ++++++++++++++----- tests/domain/editor-store.test.ts | 4 +- .../serialization/local-draft-storage.test.ts | 2 + tests/unit/viewport-layout.test.ts | 1 + 4 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/viewport-three/viewport-host.ts b/src/viewport-three/viewport-host.ts index a1148f8c..2de1d3bf 100644 --- a/src/viewport-three/viewport-host.ts +++ b/src/viewport-three/viewport-host.ts @@ -2987,18 +2987,21 @@ export class ViewportHost { fallbackGroup.visible = false; return fallbackGroup; } - case "entity": + case "entity": { + let previewGroup: Group; + switch (toolPreview.target.entityKind) { case "pointLight": - return this.createPointLightGizmoRenderObjects( + previewGroup = this.createPointLightGizmoRenderObjects( "creation-preview", previewPosition, DEFAULT_POINT_LIGHT_DISTANCE, PLACEMENT_PREVIEW_COLOR_HEX, false ).group; + break; case "spotLight": - return this.createSpotLightGizmoRenderObjects( + previewGroup = this.createSpotLightGizmoRenderObjects( "creation-preview", previewPosition, DEFAULT_SPOT_LIGHT_DIRECTION, @@ -3007,8 +3010,9 @@ export class ViewportHost { PLACEMENT_PREVIEW_COLOR_HEX, false ).group; + break; case "playerStart": - return this.createPlayerStartRenderObjects( + previewGroup = this.createPlayerStartRenderObjects( "creation-preview", previewPosition, DEFAULT_PLAYER_START_YAW_DEGREES, @@ -3021,8 +3025,9 @@ export class ViewportHost { }, false ).group; + break; case "soundEmitter": - return this.createSoundEmitterRenderObjects( + previewGroup = this.createSoundEmitterRenderObjects( "creation-preview", previewPosition, DEFAULT_SOUND_EMITTER_REF_DISTANCE, @@ -3030,31 +3035,41 @@ export class ViewportHost { false, BOX_CREATE_PREVIEW_FILL ).group; + break; case "triggerVolume": - return this.createTriggerVolumeRenderObjects( + previewGroup = this.createTriggerVolumeRenderObjects( "creation-preview", previewPosition, DEFAULT_TRIGGER_VOLUME_SIZE, false, BOX_CREATE_PREVIEW_FILL ).group; + break; case "teleportTarget": - return this.createTeleportTargetRenderObjects( + previewGroup = this.createTeleportTargetRenderObjects( "creation-preview", previewPosition, DEFAULT_TELEPORT_TARGET_YAW_DEGREES, false, BOX_CREATE_PREVIEW_FILL ).group; + break; case "interactable": - return this.createInteractableRenderObjects( + previewGroup = this.createInteractableRenderObjects( "creation-preview", previewPosition, DEFAULT_INTERACTABLE_RADIUS, false, BOX_CREATE_PREVIEW_FILL ).group; + break; } + if (this.displayMode === "wireframe") { + this.applyWireframePresentation(previewGroup); + } + + return previewGroup; + } case "model-instance": { const asset = this.projectAssets[toolPreview.target.assetId]; const loadedAsset = this.loadedModelAssets[toolPreview.target.assetId]; @@ -3072,7 +3087,14 @@ export class ViewportHost { scale: DEFAULT_MODEL_INSTANCE_SCALE }); - return createModelInstanceRenderGroup(dummyModelInstance, asset, loadedAsset, false, BOX_CREATE_PREVIEW_FILL); + return createModelInstanceRenderGroup( + dummyModelInstance, + asset, + loadedAsset, + false, + BOX_CREATE_PREVIEW_FILL, + this.displayMode === "wireframe" ? "wireframe" : "normal" + ); } } diff --git a/tests/domain/editor-store.test.ts b/tests/domain/editor-store.test.ts index 05211ff2..25a45fe5 100644 --- a/tests/domain/editor-store.test.ts +++ b/tests/domain/editor-store.test.ts @@ -74,7 +74,7 @@ describe("EditorStore", () => { writerStore.setViewportLayoutMode("quad"); writerStore.setActiveViewportPanel("bottomRight"); writerStore.setViewportPanelViewMode("topLeft", "top"); - writerStore.setViewportPanelDisplayMode("topLeft", "authoring"); + writerStore.setViewportPanelDisplayMode("topLeft", "wireframe"); writerStore.setViewportPanelCameraState("topLeft", { target: { x: 6, @@ -107,7 +107,7 @@ describe("EditorStore", () => { expect(readerStore.getState().activeViewportPanelId).toBe("bottomRight"); expect(readerStore.getState().viewportPanels.topLeft).toMatchObject({ viewMode: "top", - displayMode: "authoring", + displayMode: "wireframe", cameraState: { target: { x: 6, diff --git a/tests/serialization/local-draft-storage.test.ts b/tests/serialization/local-draft-storage.test.ts index 8c3836e4..6c0730c5 100644 --- a/tests/serialization/local-draft-storage.test.ts +++ b/tests/serialization/local-draft-storage.test.ts @@ -126,6 +126,7 @@ describe("local draft storage", () => { viewportLayoutState.layoutMode = "quad"; viewportLayoutState.activePanelId = "bottomRight"; + viewportLayoutState.panels.topLeft.displayMode = "wireframe"; viewportLayoutState.panels.topLeft.cameraState.target = { x: 8, y: 3, @@ -151,6 +152,7 @@ describe("local draft storage", () => { activePanelId: "bottomRight", panels: { topLeft: { + displayMode: "wireframe", cameraState: { target: { x: 8, diff --git a/tests/unit/viewport-layout.test.ts b/tests/unit/viewport-layout.test.ts index 8c98e0a8..0ec13e00 100644 --- a/tests/unit/viewport-layout.test.ts +++ b/tests/unit/viewport-layout.test.ts @@ -39,6 +39,7 @@ describe("viewport layout", () => { 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"); }); });