From e88cd7e795441bf9c996df88fc9f77192a89a84e Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Fri, 3 Apr 2026 01:25:41 +0200
Subject: [PATCH] Refactor ViewportCanvas component by removing unused
 functions and optimizing overlay rendering logic

---
 src/viewport-three/ViewportCanvas.tsx | 53 ++++++++-------------------
 1 file changed, 15 insertions(+), 38 deletions(-)

diff --git a/src/viewport-three/ViewportCanvas.tsx b/src/viewport-three/ViewportCanvas.tsx
index 53db4abb..4b7e4e2c 100644
--- a/src/viewport-three/ViewportCanvas.tsx
+++ b/src/viewport-three/ViewportCanvas.tsx
@@ -11,8 +11,6 @@ import type { WorldSettings } from "../document/world-settings";
 import { createWorldBackgroundStyle } from "../shared-ui/world-background-style";
 import { getViewportPanelLabel, type ViewportDisplayMode, type ViewportLayoutMode, type ViewportPanelId } from "./viewport-layout";
 import {
-  getViewportViewModeControlHint,
-  getViewportViewModeGridPlaneLabel,
   getViewportViewModeLabel,
   type ViewportViewMode
 } from "./viewport-view-modes";
@@ -41,27 +39,6 @@ interface ViewportCanvasProps {
   onToolPreviewChange(toolPreview: ViewportToolPreview): void;
 }
 
-function formatVec3(vector: Vec3): string {
-  return `${vector.x}, ${vector.y}, ${vector.z}`;
-}
-
-function getViewportOverlayText(
-  toolMode: ToolMode,
-  viewMode: ViewportViewMode,
-  displayMode: ViewportDisplayMode,
-  layoutMode: ViewportLayoutMode
-): string | null {
-  if (layoutMode === "quad") {
-    return null;
-  }
-
-  if (toolMode === "create") {
-    return `Hover the ${getViewportViewModeGridPlaneLabel(viewMode)} grid to position the creation preview. Click to commit it. ${getViewportViewModeControlHint(viewMode)}`;
-  }
-
-  return `${displayMode === "authoring" ? "Authoring view" : `${getViewportViewModeLabel(viewMode)} view`} on the ${getViewportViewModeGridPlaneLabel(viewMode)} grid. ${getViewportViewModeControlHint(viewMode)}`;
-}
-
 export function ViewportCanvas({
   panelId,
   world,
@@ -178,8 +155,9 @@ export function ViewportCanvas({
     hostRef.current?.focusSelection(sceneDocument, focusSelection);
   }, [focusRequestId, focusSelection, sceneDocument]);
 
-  const overlayText = getViewportOverlayText(toolMode, viewMode, displayMode, layoutMode);
   const previewVisible = toolMode === "create" && toolPreview.kind === "create" && toolPreview.center !== null;
+  const showViewModeOverlay = layoutMode === "quad";
+  const showOverlay = showViewModeOverlay || previewVisible;
 
   return (
     <div
@@ -197,21 +175,20 @@ export function ViewportCanvas({
           : createWorldBackgroundStyle(world.background, world.background.mode === "image" ? loadedImageAssets[world.background.assetId]?.sourceUrl ?? null : null)
       }
     >
-      <div className="viewport-canvas__overlay" data-testid={`viewport-overlay-${panelId}`}>
-        <div className="viewport-canvas__overlay-badges">
-          <div className="viewport-canvas__overlay-badge">{toolMode === "create" ? "Create" : "Select"}</div>
-          <div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--view">{getViewportViewModeLabel(viewMode)}</div>
-          <div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--display">
-            {displayMode === "authoring" ? "Authoring" : "Lit"}
-          </div>
+      {!showOverlay ? null : (
+        <div className="viewport-canvas__overlay" data-testid={`viewport-overlay-${panelId}`}>
+          {!showViewModeOverlay ? null : (
+            <div className="viewport-canvas__overlay-badges">
+              <div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--view">{getViewportViewModeLabel(viewMode)}</div>
+            </div>
+          )}
+          {!previewVisible ? null : (
+            <div className="viewport-canvas__overlay-preview" data-testid={`viewport-snap-preview-${panelId}`}>
+              Preview: {(toolPreview.center as Vec3).x}, {(toolPreview.center as Vec3).y}, {(toolPreview.center as Vec3).z}
+            </div>
+          )}
         </div>
-        {overlayText === null ? null : <div className="viewport-canvas__overlay-text">{overlayText}</div>}
-        {!previewVisible ? null : (
-          <div className="viewport-canvas__overlay-preview" data-testid={`viewport-snap-preview-${panelId}`}>
-            Preview: {toolPreview.center === null ? "..." : formatVec3(toolPreview.center)}
-          </div>
-        )}
-      </div>
+      )}
 
       {viewportMessage === null ? null : (
         <div className="viewport-canvas__fallback" role="status">