@ifc-lite/viewer 1.1.7 → 1.6.0

package/src/components/viewer/ViewerLayout.tsx

@@ -15,7 +15,8 @@ import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
 import { useViewerStore } from '@/store';
 import { EntityContextMenu } from './EntityContextMenu';
 import { HoverTooltip } from './HoverTooltip';
-import { BoxSelectionOverlay } from './BoxSelectionOverlay';
+import { BCFPanel } from './BCFPanel';
+import { IDSPanel } from './IDSPanel';
 
 export function ViewerLayout() {
   // Initialize keyboard shortcuts
@@ -30,6 +31,10 @@ export function ViewerLayout() {
   const rightPanelCollapsed = useViewerStore((s) => s.rightPanelCollapsed);
   const setLeftPanelCollapsed = useViewerStore((s) => s.setLeftPanelCollapsed);
   const setRightPanelCollapsed = useViewerStore((s) => s.setRightPanelCollapsed);
+  const bcfPanelVisible = useViewerStore((s) => s.bcfPanelVisible);
+  const setBcfPanelVisible = useViewerStore((s) => s.setBcfPanelVisible);
+  const idsPanelVisible = useViewerStore((s) => s.idsPanelVisible);
+  const setIdsPanelVisible = useViewerStore((s) => s.setIdsPanelVisible);
 
   // Detect mobile viewport
   useEffect(() => {
@@ -48,10 +53,17 @@ export function ViewerLayout() {
     return () => window.removeEventListener('resize', checkMobile);
   }, [setIsMobile, setLeftPanelCollapsed, setRightPanelCollapsed]);
 
+  // Initialize theme on mount and sync with store
+  useEffect(() => {
+    const currentTheme = useViewerStore.getState().theme;
+    document.documentElement.classList.toggle('dark', currentTheme === 'dark');
+  }, []);
+
   useEffect(() => {
     document.documentElement.classList.toggle('dark', theme === 'dark');
   }, [theme]);
 
+
   return (
     <TooltipProvider delayDuration={300}>
       <div className="flex flex-col h-screen w-screen overflow-hidden bg-background text-foreground">
@@ -61,7 +73,6 @@ export function ViewerLayout() {
         {/* Global Overlays */}
         <EntityContextMenu />
         <HoverTooltip />
-        <BoxSelectionOverlay />
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
@@ -85,7 +96,7 @@ export function ViewerLayout() {
             <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
 
             {/* Center - Viewport */}
-            <Panel id="viewport-panel" defaultSize={60} minSize={30}>
+            <Panel id="viewport-panel" defaultSize={58} minSize={30}>
               <div className="h-full w-full overflow-hidden">
                 <ViewportContainer />
               </div>
@@ -93,16 +104,22 @@ export function ViewerLayout() {
 
             <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
 
-            {/* Right Panel - Properties */}
+            {/* Right Panel - Properties, BCF, or IDS */}
             <Panel
               id="right-panel"
-              defaultSize={20}
-              minSize={10}
+              defaultSize={22}
+              minSize={15}
               collapsible
               collapsedSize={0}
             >
               <div className="h-full w-full overflow-hidden">
-                <PropertiesPanel />
+                {idsPanelVisible ? (
+                  <IDSPanel onClose={() => setIdsPanelVisible(false)} />
+                ) : bcfPanelVisible ? (
+                  <BCFPanel onClose={() => setBcfPanelVisible(false)} />
+                ) : (
+                  <PropertiesPanel />
+                )}
               </div>
             </Panel>
           </PanelGroup>
@@ -137,14 +154,20 @@ export function ViewerLayout() {
               </div>
             )}
 
-            {/* Mobile Bottom Sheet - Properties */}
+            {/* Mobile Bottom Sheet - Properties, BCF, or IDS */}
             {!rightPanelCollapsed && (
               <div className="absolute inset-x-0 bottom-0 h-[50vh] bg-background border-t rounded-t-xl shadow-xl z-40 animate-in slide-in-from-bottom">
                 <div className="flex items-center justify-between p-2 border-b">
-                  <span className="font-medium text-sm">Properties</span>
+                  <span className="font-medium text-sm">
+                    {idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                  </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
-                    onClick={() => setRightPanelCollapsed(true)}
+                    onClick={() => {
+                      setRightPanelCollapsed(true);
+                      if (bcfPanelVisible) setBcfPanelVisible(false);
+                      if (idsPanelVisible) setIdsPanelVisible(false);
+                    }}
                   >
                     <span className="sr-only">Close</span>
                     <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -153,7 +176,13 @@ export function ViewerLayout() {
                   </button>
                 </div>
                 <div className="h-[calc(50vh-48px)] overflow-auto">
-                  <PropertiesPanel />
+                  {idsPanelVisible ? (
+                    <IDSPanel onClose={() => setIdsPanelVisible(false)} />
+                  ) : bcfPanelVisible ? (
+                    <BCFPanel onClose={() => setBcfPanelVisible(false)} />
+                  ) : (
+                    <PropertiesPanel />
+                  )}
                 </div>
               </div>
             )}