fix: restaurar altura e expansao total do viewport 3D e ferramentas no Visualizador3D
This commit is contained in:
@@ -49,7 +49,7 @@ export const Layout = ({ children }: LayoutProps) => {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
{/* Conteúdo principal */}
|
{/* Conteúdo principal */}
|
||||||
<div className="flex-1 overflow-auto">
|
<div className="flex-1 overflow-auto flex flex-col min-h-0">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -235,11 +235,12 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
|
|||||||
};
|
};
|
||||||
animate();
|
animate();
|
||||||
|
|
||||||
// 8. Resize Handler
|
// 8. Resize Handler com ResizeObserver para garantir cálculo perfeito de dimensões
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
if (!canvasContainerRef.current || !rendererRef.current) return;
|
if (!canvasContainerRef.current || !rendererRef.current) return;
|
||||||
const w = canvasContainerRef.current.clientWidth;
|
const w = canvasContainerRef.current.clientWidth;
|
||||||
const h = canvasContainerRef.current.clientHeight;
|
const h = canvasContainerRef.current.clientHeight;
|
||||||
|
if (w <= 0 || h <= 0) return;
|
||||||
|
|
||||||
perspCamera.aspect = w / h;
|
perspCamera.aspect = w / h;
|
||||||
perspCamera.updateProjectionMatrix();
|
perspCamera.updateProjectionMatrix();
|
||||||
@@ -255,9 +256,17 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
|
|||||||
};
|
};
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
|
handleResize();
|
||||||
|
});
|
||||||
|
if (canvasContainerRef.current) {
|
||||||
|
resizeObserver.observe(canvasContainerRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
cancelAnimationFrame(animationFrameId);
|
cancelAnimationFrame(animationFrameId);
|
||||||
window.removeEventListener('resize', handleResize);
|
window.removeEventListener('resize', handleResize);
|
||||||
|
resizeObserver.disconnect();
|
||||||
themeObserver.disconnect();
|
themeObserver.disconnect();
|
||||||
renderer.dispose();
|
renderer.dispose();
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -501,7 +501,7 @@ export default function Visualizador3D() {
|
|||||||
const hasSavedModel = Boolean(currentOFInfo?.ifc_url);
|
const hasSavedModel = Boolean(currentOFInfo?.ifc_url);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 min-h-0 p-4 md:p-6 space-y-4 max-w-[1920px] mx-auto overflow-hidden">
|
<div className="flex flex-col flex-1 h-[calc(100vh-var(--hub-banner-height,0px)-4rem)] min-h-[600px] w-full p-4 md:p-6 space-y-4 max-w-[1920px] mx-auto">
|
||||||
{/* Top Header Bar */}
|
{/* Top Header Bar */}
|
||||||
<div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-slate-900/90 backdrop-blur-md border border-slate-200 dark:border-slate-800 rounded-2xl shadow-lg dark:shadow-xl">
|
<div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-slate-900/90 backdrop-blur-md border border-slate-200 dark:border-slate-800 rounded-2xl shadow-lg dark:shadow-xl">
|
||||||
{/* Left: Title, OF Selector & Phase Filter */}
|
{/* Left: Title, OF Selector & Phase Filter */}
|
||||||
@@ -695,7 +695,7 @@ export default function Visualizador3D() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main 3D Viewport */}
|
{/* Main 3D Viewport */}
|
||||||
<div className="relative flex-1 w-full bg-slate-100 dark:bg-slate-950 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl dark:shadow-2xl">
|
<div className="relative flex-1 min-h-[480px] w-full bg-slate-100 dark:bg-slate-950 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl dark:shadow-2xl">
|
||||||
{isLoadingModel && (
|
{isLoadingModel && (
|
||||||
<div className="absolute inset-0 z-30 flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-950/90 backdrop-blur-md text-slate-900 dark:text-white space-y-4">
|
<div className="absolute inset-0 z-30 flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-950/90 backdrop-blur-md text-slate-900 dark:text-white space-y-4">
|
||||||
<div className="p-4 bg-cyan-100 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-400 rounded-2xl border border-cyan-300 dark:border-cyan-500/40 animate-pulse">
|
<div className="p-4 bg-cyan-100 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-400 rounded-2xl border border-cyan-300 dark:border-cyan-500/40 animate-pulse">
|
||||||
|
|||||||
Reference in New Issue
Block a user