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

Add conditional rendering based on layout mode and active panel status in ViewportCanvas

Browse Source
This commit is contained in:
Victor Giers
2026-04-07 10:53:29 +02:00
parent 47cdebf7f8
commit 802d3e026c
1 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/viewport-three/ViewportCanvas.js
View File

@@ -9,6 +9,7 @@ import { ViewportHost } from "./viewport-host";
export function ViewportCanvas({ panelId, world, sceneDocument, projectAssets, loadedModelAssets, loadedImageAssets, whiteboxSelectionMode, whiteboxSnapEnabled, whiteboxSnapStep, selection, toolMode, toolPreview, transformSession, cameraState, viewMode, displayMode, layoutMode, isActivePanel, focusRequestId, focusSelection, onSelectionChange, onCommitCreation, onCameraStateChange, onToolPreviewChange, onTransformSessionChange, onTransformCommit, onTransformCancel }) { export function ViewportCanvas({ panelId, world, sceneDocument, projectAssets, loadedModelAssets, loadedImageAssets, whiteboxSelectionMode, whiteboxSnapEnabled, whiteboxSnapStep, selection, toolMode, toolPreview, transformSession, cameraState, viewMode, displayMode, layoutMode, isActivePanel, focusRequestId, focusSelection, onSelectionChange, onCommitCreation, onCameraStateChange, onToolPreviewChange, onTransformSessionChange, onTransformCommit, onTransformCancel }) {
const containerRef = useRef(null); const containerRef = useRef(null);
const hostRef = useRef(null); const hostRef = useRef(null);
const shouldRenderPanel = layoutMode === "quad" || isActivePanel;
const [viewportMessage, setViewportMessage] = useState(null); const [viewportMessage, setViewportMessage] = useState(null);
const [hoveredWhiteboxLabel, setHoveredWhiteboxLabel] = useState(null); const [hoveredWhiteboxLabel, setHoveredWhiteboxLabel] = useState(null);
useEffect(() => { useEffect(() => {
@@ -20,6 +21,7 @@ export function ViewportCanvas({ panelId, world, sceneDocument, projectAssets, l
const viewportHost = new ViewportHost(); const viewportHost = new ViewportHost();
hostRef.current = viewportHost; hostRef.current = viewportHost;
viewportHost.setPanelId(panelId); viewportHost.setPanelId(panelId);
viewportHost.setRenderEnabled(shouldRenderPanel);
viewportHost.mount(container); viewportHost.mount(container);
setViewportMessage(null); setViewportMessage(null);
return () => { return () => {
@@ -33,6 +35,9 @@ export function ViewportCanvas({ panelId, world, sceneDocument, projectAssets, l
return; return;
} }
}, []); }, []);
useEffect(() => {
hostRef.current?.setRenderEnabled(shouldRenderPanel);
}, [shouldRenderPanel]);
useEffect(() => { useEffect(() => {
hostRef.current?.setPanelId(panelId); hostRef.current?.setPanelId(panelId);
}, [panelId]); }, [panelId]);