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

Add preview visibility logic and update overlay text in ViewportCanvas

Browse Source
This commit is contained in:
Victor Giers
2026-04-02 23:53:27 +02:00
parent d84d13fe75
commit ef7eb5dfbe
1 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/viewport-three/ViewportCanvas.tsx
View File

@@ -201,6 +201,9 @@ export function ViewportCanvas({
}, [focusRequestId, focusSelection, sceneDocument]); }, [focusRequestId, focusSelection, sceneDocument]);
const overlayText = getViewportOverlayText(toolMode, viewMode, displayMode, layoutMode); const overlayText = getViewportOverlayText(toolMode, viewMode, displayMode, layoutMode);
const previewVisible =
(toolMode === "box-create" && toolPreview.kind === "box-create" && toolPreview.center !== null) ||
(toolMode === "place" && toolPreview.kind === "placement" && toolPreview.center !== null);
return ( return (
<div <div
@@ -219,14 +222,16 @@ export function ViewportCanvas({
> >
<div className="viewport-canvas__overlay" data-testid={`viewport-overlay-${panelId}`}> <div className="viewport-canvas__overlay" data-testid={`viewport-overlay-${panelId}`}>
<div className="viewport-canvas__overlay-badges"> <div className="viewport-canvas__overlay-badges">
<div className="viewport-canvas__overlay-badge">{toolMode === "box-create" ? "Box Create" : "Select"}</div> <div className="viewport-canvas__overlay-badge">
{toolMode === "box-create" ? "Box Create" : toolMode === "place" ? "Place" : "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--view">{getViewportViewModeLabel(viewMode)}</div>
<div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--display"> <div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--display">
{displayMode === "authoring" ? "Authoring" : "Lit"} {displayMode === "authoring" ? "Authoring" : "Lit"}
</div> </div>
</div> </div>
{overlayText === null ? null : <div className="viewport-canvas__overlay-text">{overlayText}</div>} {overlayText === null ? null : <div className="viewport-canvas__overlay-text">{overlayText}</div>}
{toolMode !== "box-create" || toolPreview.kind !== "box-create" || toolPreview.center === null ? null : ( {!previewVisible ? null : (
<div className="viewport-canvas__overlay-preview" data-testid={`viewport-snap-preview-${panelId}`}> <div className="viewport-canvas__overlay-preview" data-testid={`viewport-snap-preview-${panelId}`}>
Preview: {formatVec3(toolPreview.center)} Preview: {formatVec3(toolPreview.center)}
</div> </div>
@@ -236,15 +241,24 @@ export function ViewportCanvas({
{viewportMessage === null ? null : ( {viewportMessage === null ? null : (
<div className="viewport-canvas__fallback" role="status"> <div className="viewport-canvas__fallback" role="status">
<div className="viewport-canvas__fallback-title">Viewport Unavailable</div> <div className="viewport-canvas__fallback-title">Viewport Unavailable</div>
<div>{viewportMessage}</div> <div>{viewportMessage}</div>
{toolMode !== "box-create" ? null : ( {toolMode !== "box-create" && toolMode !== "place" ? null : (
<button <button
className="toolbar__button toolbar__button--accent" className="toolbar__button toolbar__button--accent"
type="button" type="button"
data-testid={`viewport-fallback-create-box-${panelId}`} data-testid={
onClick={() => onCreateBoxBrush(DEFAULT_BOX_BRUSH_CENTER)} toolMode === "place" ? `viewport-fallback-place-${panelId}` : `viewport-fallback-create-box-${panelId}`
}
onClick={() => {
if (toolMode === "place" && toolPreview.kind === "placement") {
onCommitPlacement(toolPreview);
return;
}
onCreateBoxBrush(DEFAULT_BOX_BRUSH_CENTER);
}}
> >
Create Default Box {toolMode === "place" ? "Place Preview at Default Position" : "Create Default Box"}
</button> </button>
)} )}
</div> </div>