@ifc-lite/viewer 1.6.1 → 1.7.0

package/src/components/viewer/ViewerLayout.tsx

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { MainToolbar } from './MainToolbar';
@@ -17,6 +17,12 @@ import { EntityContextMenu } from './EntityContextMenu';
 import { HoverTooltip } from './HoverTooltip';
 import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
+import { LensPanel } from './LensPanel';
+import { ListPanel } from './lists/ListPanel';
+
+const BOTTOM_PANEL_MIN_HEIGHT = 120;
+const BOTTOM_PANEL_DEFAULT_HEIGHT = 300;
+const BOTTOM_PANEL_MAX_RATIO = 0.7; // max 70% of container
 
 export function ViewerLayout() {
   // Initialize keyboard shortcuts
@@ -35,6 +41,60 @@ export function ViewerLayout() {
   const setBcfPanelVisible = useViewerStore((s) => s.setBcfPanelVisible);
   const idsPanelVisible = useViewerStore((s) => s.idsPanelVisible);
   const setIdsPanelVisible = useViewerStore((s) => s.setIdsPanelVisible);
+  const listPanelVisible = useViewerStore((s) => s.listPanelVisible);
+  const setListPanelVisible = useViewerStore((s) => s.setListPanelVisible);
+  const lensPanelVisible = useViewerStore((s) => s.lensPanelVisible);
+  const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
+
+  // Bottom panel resize state (pixel height, persisted in ref to avoid re-renders during drag)
+  const [bottomHeight, setBottomHeight] = useState(BOTTOM_PANEL_DEFAULT_HEIGHT);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDraggingRef = useRef(false);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  // Cleanup drag listeners on unmount
+  useEffect(() => {
+    return () => { cleanupRef.current?.(); };
+  }, []);
+
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDraggingRef.current = true;
+
+    const startY = e.clientY;
+    const startHeight = bottomHeight;
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      if (!isDraggingRef.current) return;
+      const container = containerRef.current;
+      if (!container) return;
+
+      const maxHeight = container.clientHeight * BOTTOM_PANEL_MAX_RATIO;
+      const delta = startY - moveEvent.clientY;
+      const newHeight = Math.min(
+        maxHeight,
+        Math.max(BOTTOM_PANEL_MIN_HEIGHT, startHeight + delta)
+      );
+      setBottomHeight(newHeight);
+    };
+
+    const cleanup = () => {
+      isDraggingRef.current = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      cleanupRef.current = null;
+    };
+
+    const onMouseUp = () => { cleanup(); };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+    cleanupRef.current = cleanup;
+  }, [bottomHeight]);
 
   // Detect mobile viewport
   useEffect(() => {
@@ -79,50 +139,71 @@ export function ViewerLayout() {
 
         {/* Main Content Area - Desktop Layout */}
         {!isMobile && (
-          <PanelGroup orientation="horizontal" className="flex-1 min-h-0">
-            {/* Left Panel - Hierarchy */}
-            <Panel
-              id="left-panel"
-              defaultSize={20}
-              minSize={10}
-              collapsible
-              collapsedSize={0}
-            >
-              <div className="h-full w-full overflow-hidden">
-                <HierarchyPanel />
-              </div>
-            </Panel>
+          <div ref={containerRef} className="flex-1 min-h-0 flex flex-col">
+            {/* Top: horizontal split (hierarchy | viewport | properties) */}
+            <div className="flex-1 min-h-0">
+              <PanelGroup orientation="horizontal" className="h-full">
+                {/* Left Panel - Hierarchy */}
+                <Panel
+                  id="left-panel"
+                  defaultSize={20}
+                  minSize={10}
+                  collapsible
+                  collapsedSize={0}
+                >
+                  <div className="h-full w-full overflow-hidden">
+                    <HierarchyPanel />
+                  </div>
+                </Panel>
 
-            <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
+                <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={58} minSize={30}>
-              <div className="h-full w-full overflow-hidden">
-                <ViewportContainer />
-              </div>
-            </Panel>
-
-            <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
-
-            {/* Right Panel - Properties, BCF, or IDS */}
-            <Panel
-              id="right-panel"
-              defaultSize={22}
-              minSize={15}
-              collapsible
-              collapsedSize={0}
-            >
-              <div className="h-full w-full overflow-hidden">
-                {idsPanelVisible ? (
-                  <IDSPanel onClose={() => setIdsPanelVisible(false)} />
-                ) : bcfPanelVisible ? (
-                  <BCFPanel onClose={() => setBcfPanelVisible(false)} />
-                ) : (
-                  <PropertiesPanel />
-                )}
+                {/* Center - Viewport */}
+                <Panel id="viewport-panel" defaultSize={58} minSize={30}>
+                  <div className="h-full w-full overflow-hidden">
+                    <ViewportContainer />
+                  </div>
+                </Panel>
+
+                <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
+
+                {/* Right Panel - Properties, BCF, or IDS */}
+                <Panel
+                  id="right-panel"
+                  defaultSize={22}
+                  minSize={15}
+                  collapsible
+                  collapsedSize={0}
+                >
+                  <div className="h-full w-full overflow-hidden">
+                    {lensPanelVisible ? (
+                      <LensPanel onClose={() => setLensPanelVisible(false)} />
+                    ) : idsPanelVisible ? (
+                      <IDSPanel onClose={() => setIdsPanelVisible(false)} />
+                    ) : bcfPanelVisible ? (
+                      <BCFPanel onClose={() => setBcfPanelVisible(false)} />
+                    ) : (
+                      <PropertiesPanel />
+                    )}
+                  </div>
+                </Panel>
+              </PanelGroup>
+            </div>
+
+            {/* Bottom Panel - Lists (custom resizable, outside PanelGroup) */}
+            {listPanelVisible && (
+              <div style={{ height: bottomHeight, flexShrink: 0 }} className="relative">
+                {/* Drag handle */}
+                <div
+                  className="absolute inset-x-0 top-0 h-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-row-resize z-10"
+                  onMouseDown={handleResizeStart}
+                />
+                <div className="h-full w-full overflow-hidden border-t pt-1.5">
+                  <ListPanel onClose={() => setListPanelVisible(false)} />
+                </div>
               </div>
-            </Panel>
-          </PanelGroup>
+            )}
+          </div>
         )}
 
         {/* Main Content Area - Mobile Layout */}
@@ -154,18 +235,20 @@ export function ViewerLayout() {
               </div>
             )}
 
-            {/* Mobile Bottom Sheet - Properties, BCF, or IDS */}
+            {/* Mobile Bottom Sheet - Properties, BCF, IDS, or Lists */}
             {!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">
-                    {idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                    {listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
                   </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
                     onClick={() => {
                       setRightPanelCollapsed(true);
+                      if (listPanelVisible) setListPanelVisible(false);
                       if (bcfPanelVisible) setBcfPanelVisible(false);
+                      if (lensPanelVisible) setLensPanelVisible(false);
                       if (idsPanelVisible) setIdsPanelVisible(false);
                     }}
                   >
@@ -176,7 +259,11 @@ export function ViewerLayout() {
                   </button>
                 </div>
                 <div className="h-[calc(50vh-48px)] overflow-auto">
-                  {idsPanelVisible ? (
+                  {listPanelVisible ? (
+                    <ListPanel onClose={() => setListPanelVisible(false)} />
+                  ) : lensPanelVisible ? (
+                    <LensPanel onClose={() => setLensPanelVisible(false)} />
+                  ) : idsPanelVisible ? (
                     <IDSPanel onClose={() => setIdsPanelVisible(false)} />
                   ) : bcfPanelVisible ? (
                     <BCFPanel onClose={() => setBcfPanelVisible(false)} />