@ifc-lite/viewer 1.14.2 → 1.14.4

package/src/components/viewer/CodeEditor.tsx

@@ -12,13 +12,14 @@
 
 import { useRef, useEffect } from 'react';
 import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection } from '@codemirror/view';
-import { EditorState, Compartment } from '@codemirror/state';
+import { EditorState, Compartment, Transaction } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
 import { autocompletion, type CompletionContext, type CompletionResult, type Completion } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap, indentWithTab, undo, redo, undoDepth, redoDepth } from '@codemirror/commands';
 import { syntaxHighlighting, defaultHighlightStyle, bracketMatching, indentOnInput } from '@codemirror/language';
 import { highlightSelectionMatches } from '@codemirror/search';
 import { NAMESPACE_SCHEMAS } from '@ifc-lite/sandbox/schema';
+import type { ScriptEditorSelection, ScriptEditorTextChange } from '@/lib/llm/types';
 
 /** Shared structural styles (mode-agnostic) */
 const baseTheme = EditorView.theme({
@@ -201,20 +202,44 @@ function bimCompletions(context: CompletionContext): CompletionResult | null {
 interface CodeEditorProps {
   value: string;
   onChange: (value: string) => void;
+  onSelectionChange?: (selection: ScriptEditorSelection) => void;
+  onHistoryChange?: (canUndo: boolean, canRedo: boolean) => void;
+  registerApplyAdapter?: ((adapter: {
+    apply: (
+      nextContent: string,
+      selection: ScriptEditorSelection,
+      options?: { userEvent?: string; changes?: ScriptEditorTextChange[] },
+    ) => void;
+    undo: () => void;
+    redo: () => void;
+  } | null) => void);
   onRun?: () => void;
   onSave?: () => void;
   className?: string;
 }
 
-export function CodeEditor({ value, onChange, onRun, onSave, className }: CodeEditorProps) {
+export function CodeEditor({
+  value,
+  onChange,
+  onSelectionChange,
+  onHistoryChange,
+  registerApplyAdapter,
+  onRun,
+  onSave,
+  className,
+}: CodeEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
   const onChangeRef = useRef(onChange);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  const onHistoryChangeRef = useRef(onHistoryChange);
   const onRunRef = useRef(onRun);
   const onSaveRef = useRef(onSave);
 
   // Keep callback refs up to date without recreating the editor
   onChangeRef.current = onChange;
+  onSelectionChangeRef.current = onSelectionChange;
+  onHistoryChangeRef.current = onHistoryChange;
   onRunRef.current = onRun;
   onSaveRef.current = onSave;
 
@@ -239,6 +264,16 @@ export function CodeEditor({ value, onChange, onRun, onSave, className }: CodeEd
       if (update.docChanged) {
         onChangeRef.current(update.state.doc.toString());
       }
+      if (update.selectionSet || update.docChanged) {
+        const main = update.state.selection.main;
+        onSelectionChangeRef.current?.({ from: main.from, to: main.to });
+      }
+      if (update.docChanged) {
+        onHistoryChangeRef.current?.(
+          undoDepth(update.state) > 0,
+          redoDepth(update.state) > 0,
+        );
+      }
     });
 
     const state = EditorState.create({
@@ -274,6 +309,35 @@ export function CodeEditor({ value, onChange, onRun, onSave, className }: CodeEd
     });
 
     viewRef.current = view;
+    const initialSelection = view.state.selection.main;
+    onSelectionChangeRef.current?.({ from: initialSelection.from, to: initialSelection.to });
+    onHistoryChangeRef.current?.(undoDepth(view.state) > 0, redoDepth(view.state) > 0);
+    registerApplyAdapter?.({
+      apply: (nextContent, selection, options) => {
+        const active = viewRef.current;
+        if (!active) return;
+        const safeFrom = Math.max(0, Math.min(selection.from, nextContent.length));
+        const safeTo = Math.max(safeFrom, Math.min(selection.to, nextContent.length));
+        const changes = options?.changes && options.changes.length > 0
+          ? options.changes
+          : [{ from: 0, to: active.state.doc.length, insert: nextContent }];
+        active.dispatch({
+          changes,
+          selection: { anchor: safeFrom, head: safeTo },
+          annotations: options?.userEvent ? [Transaction.userEvent.of(options.userEvent)] : undefined,
+        });
+      },
+      undo: () => {
+        const active = viewRef.current;
+        if (!active) return;
+        undo(active);
+      },
+      redo: () => {
+        const active = viewRef.current;
+        if (!active) return;
+        redo(active);
+      },
+    });
 
     // Watch for light/dark mode changes on <html> class
     const observer = new MutationObserver(() => {
@@ -282,13 +346,15 @@ export function CodeEditor({ value, onChange, onRun, onSave, className }: CodeEd
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
     return () => {
+      onHistoryChangeRef.current?.(false, false);
+      registerApplyAdapter?.(null);
       observer.disconnect();
       view.destroy();
       viewRef.current = null;
     };
     // Only create once — value is set via initial doc
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [registerApplyAdapter]);
 
   // Sync external value changes into the editor (e.g., loading a different script)
   const lastExternalValue = useRef(value);

package/src/components/viewer/CommandPalette.tsx

@@ -218,6 +218,7 @@ function activateBottomPanel(panel: 'script' | 'list') {
   s.setListPanelVisible(false);
 
   if (!isActive) {
+    s.setRightPanelCollapsed(false);
     if (panel === 'script') s.setScriptPanelVisible(true);
     else s.setListPanelVisible(true);
   }

package/src/components/viewer/HierarchyPanel.tsx

@@ -319,27 +319,42 @@ export function HierarchyPanel() {
           setStoreysSelection(storeyIds);
         }
       }
+    } else if (node.type === 'IfcSpace') {
+      const spaceId = node.expressIds[0];
+      const modelId = node.modelIds[0];
+      const globalId = node.globalIds[0] ?? spaceId;
+
+      setSelectedEntityIds([]);
+
+      if (modelId && modelId !== 'legacy') {
+        setSelectedEntityId(globalId);
+        setSelectedEntity({ modelId, expressId: spaceId });
+        setActiveModel(modelId);
+      } else {
+        setSelectedEntityId(globalId);
+        setSelectedEntity({ modelId: 'legacy', expressId: spaceId });
+      }
+
+      if (node.hasChildren) {
+        toggleExpand(node.id);
+      }
     } else if (node.type === 'element') {
       // Element click - select it
-      const elementId = node.expressIds[0];  // Original expressId
+      const elementId = node.expressIds[0];
       const modelId = node.modelIds[0];
+      const globalId = node.globalIds[0] ?? elementId;
 
       // Clear multi-selection (e.g. from a prior type-group click) so only
       // this single element is highlighted, matching Viewport pick behavior
       setSelectedEntityIds([]);
 
       if (modelId !== 'legacy') {
-        // Multi-model: need to convert to globalId for renderer
-        const model = models.get(modelId);
-        const globalId = elementId + (model?.idOffset ?? 0);
         setSelectedEntityId(globalId);
         setSelectedEntity({ modelId, expressId: elementId });
         setActiveModel(modelId);
       } else {
-        // Legacy single-model: expressId = globalId (offset is 0)
-        setSelectedEntityId(elementId);
-        // Also set selectedEntity for property panel (was missing, causing blank panel)
-        setSelectedEntity(resolveEntityRef(elementId));
+        setSelectedEntityId(globalId);
+        setSelectedEntity(resolveEntityRef(globalId));
       }
     }
   }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntityIds, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements, setHierarchyBasketSelection, toGlobalId]);
@@ -352,8 +367,8 @@ export function HierarchyPanel() {
       ? node.expressIds.some(id => selectedStoreys.has(id))
       : node.type === 'IfcBuildingStorey'
         ? selectedStoreys.has(node.expressIds[0])
-        : node.type === 'element'
-          ? selectedEntityId === node.expressIds[0]
+        : node.type === 'IfcSpace' || node.type === 'element'
+          ? selectedEntityId === (node.globalIds[0] ?? node.expressIds[0])
           : node.type === 'ifc-type'
             ? (() => {
                 const typeExpressId = node.entityExpressId;
@@ -369,8 +384,8 @@ export function HierarchyPanel() {
     // Compute visibility inline - for elements check directly, for storeys use getNodeElements
     let nodeHidden = false;
     if (node.type === 'element') {
-      nodeHidden = hiddenEntities.has(node.expressIds[0]);
-    } else if (node.type === 'IfcBuildingStorey' || node.type === 'unified-storey' ||
+      nodeHidden = hiddenEntities.has(node.globalIds[0] ?? node.expressIds[0]);
+    } else if (node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' ||
                node.type === 'type-group' || node.type === 'ifc-type' ||
                (node.type === 'model-header' && node.id.startsWith('contrib-'))) {
       const elements = getNodeElements(node);
@@ -385,7 +400,7 @@ export function HierarchyPanel() {
     }
 
     return { isSelected, nodeHidden, modelVisible };
-  }, [selectedStoreys, selectedEntityId, hiddenEntities, getNodeElements, models]);
+  }, [selectedStoreys, selectedEntityId, hiddenEntities, getNodeElements, models, toGlobalId]);
 
   if (!ifcDataStore && models.size === 0) {
     return (

package/src/components/viewer/MainToolbar.tsx

@@ -36,7 +36,9 @@ import {
   ClipboardCheck,
   Palette,
   Orbit,
+  Layout,
   LayoutTemplate,
+  FileCode2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -70,6 +72,7 @@ import { ThemeSwitch } from './ThemeSwitch';
 import { toast } from '@/components/ui/toast';
 
 type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
+type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens';
 
 // #region FIX: Move ToolButton OUTSIDE MainToolbar to prevent recreation on every render
 // This fixes Radix UI Tooltip's asChild prop becoming stale during re-renders
@@ -176,13 +179,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleTypeVisibility = useViewerStore((state) => state.toggleTypeVisibility);
   const resetViewerState = useViewerStore((state) => state.resetViewerState);
   const bcfPanelVisible = useViewerStore((state) => state.bcfPanelVisible);
-  const toggleBcfPanel = useViewerStore((state) => state.toggleBcfPanel);
   const setBcfPanelVisible = useViewerStore((state) => state.setBcfPanelVisible);
   const idsPanelVisible = useViewerStore((state) => state.idsPanelVisible);
-  const toggleIdsPanel = useViewerStore((state) => state.toggleIdsPanel);
   const setIdsPanelVisible = useViewerStore((state) => state.setIdsPanelVisible);
   const listPanelVisible = useViewerStore((state) => state.listPanelVisible);
-  const toggleListPanel = useViewerStore((state) => state.toggleListPanel);
+  const setListPanelVisible = useViewerStore((state) => state.setListPanelVisible);
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
   const projectionMode = useViewerStore((state) => state.projectionMode);
   const toggleProjectionMode = useViewerStore((state) => state.toggleProjectionMode);
@@ -193,8 +194,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleBasketPresentationVisible = useViewerStore((state) => state.toggleBasketPresentationVisible);
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
-  const toggleLensPanel = useViewerStore((state) => state.toggleLensPanel);
   const setLensPanelVisible = useViewerStore((state) => state.setLensPanelVisible);
+  const scriptPanelVisible = useViewerStore((state) => state.scriptPanelVisible);
+  const setScriptPanelVisible = useViewerStore((state) => state.setScriptPanelVisible);
 
   // Check which type geometries exist across ALL loaded models (federation-aware).
   // PERF: Use meshes.length as dep proxy instead of full geometryResult, and
@@ -361,6 +363,61 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     goHomeFromStore();
   }, []);
 
+  const handleToggleBottomPanel = useCallback((panel: 'script' | 'list') => {
+    const isScriptPanel = panel === 'script';
+    const nextScriptVisible = isScriptPanel ? !scriptPanelVisible : false;
+    const nextListVisible = isScriptPanel ? false : !listPanelVisible;
+
+    setScriptPanelVisible(nextScriptVisible);
+    setListPanelVisible(nextListVisible);
+
+    if (nextScriptVisible || nextListVisible) {
+      setRightPanelCollapsed(false);
+    }
+  }, [listPanelVisible, scriptPanelVisible, setListPanelVisible, setRightPanelCollapsed, setScriptPanelVisible]);
+
+  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens') => {
+    const nextBcfVisible = panel === 'bcf' ? !bcfPanelVisible : false;
+    const nextIdsVisible = panel === 'ids' ? !idsPanelVisible : false;
+    const nextLensVisible = panel === 'lens' ? !lensPanelVisible : false;
+
+    setBcfPanelVisible(nextBcfVisible);
+    setIdsPanelVisible(nextIdsVisible);
+    setLensPanelVisible(nextLensVisible);
+
+    if (nextBcfVisible || nextIdsVisible || nextLensVisible) {
+      setRightPanelCollapsed(false);
+    }
+  }, [
+    bcfPanelVisible,
+    idsPanelVisible,
+    lensPanelVisible,
+    setBcfPanelVisible,
+    setIdsPanelVisible,
+    setLensPanelVisible,
+    setRightPanelCollapsed,
+  ]);
+
+  const activeWorkspacePanels = useMemo(() => {
+    const panels = new Set<WorkspacePanel>();
+    if (scriptPanelVisible) panels.add('script');
+    if (listPanelVisible) panels.add('list');
+    if (bcfPanelVisible) panels.add('bcf');
+    if (idsPanelVisible) panels.add('ids');
+    if (lensPanelVisible) panels.add('lens');
+    return panels;
+  }, [bcfPanelVisible, idsPanelVisible, lensPanelVisible, listPanelVisible, scriptPanelVisible]);
+
+  const workspacePanelLabel = useMemo(() => {
+    if (activeWorkspacePanels.size === 0) return null;
+    if (activeWorkspacePanels.size > 1) return 'Multiple Panels';
+    if (activeWorkspacePanels.has('script')) return 'Script Editor';
+    if (activeWorkspacePanels.has('list')) return 'Lists';
+    if (activeWorkspacePanels.has('bcf')) return 'BCF Issues';
+    if (activeWorkspacePanels.has('ids')) return 'IDS Validation';
+    return 'Lens Rules';
+  }, [activeWorkspacePanels]);
+
   const handleExportGLB = useCallback(() => {
     if (!geometryResult) return;
     try {
@@ -624,76 +681,61 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <ExportChangesButton />
 
       {/* ── Panels ── */}
-      {/* BCF Issues Button */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={bcfPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              if (!bcfPanelVisible) {
-                // Close other right-panel content first, then expand
-                setIdsPanelVisible(false);
-                setLensPanelVisible(false);
-                setRightPanelCollapsed(false);
-              }
-              toggleBcfPanel();
-            }}
-            className={cn(bcfPanelVisible && 'bg-primary text-primary-foreground')}
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant={activeWorkspacePanels.size > 0 ? 'default' : 'ghost'}
+                size="icon-sm"
+                aria-label={workspacePanelLabel ? `Panels: ${workspacePanelLabel}` : 'Panels'}
+                className={cn(activeWorkspacePanels.size > 0 && 'bg-primary text-primary-foreground')}
+              >
+                <Layout className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>{workspacePanelLabel ? `Panels: ${workspacePanelLabel}` : 'Panels'}</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="start" className="w-56">
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('script')}
+            onCheckedChange={() => handleToggleBottomPanel('script')}
           >
-            <MessageSquare className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>BCF Issues</TooltipContent>
-      </Tooltip>
-
-      {/* IDS Validation Button */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={idsPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              if (!idsPanelVisible) {
-                // Close other right-panel content first, then expand
-                setBcfPanelVisible(false);
-                setLensPanelVisible(false);
-                setRightPanelCollapsed(false);
-              }
-              toggleIdsPanel();
-            }}
-            className={cn(idsPanelVisible && 'bg-primary text-primary-foreground')}
+            <FileCode2 className="h-4 w-4 mr-2" />
+            Script Editor
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('list')}
+            onCheckedChange={() => handleToggleBottomPanel('list')}
           >
-            <ClipboardCheck className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>IDS Validation</TooltipContent>
-      </Tooltip>
-
-      {/* Lists Button */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={listPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              // Close script panel (bottom-panel exclusivity)
-              useViewerStore.getState().setScriptPanelVisible(false);
-              if (!listPanelVisible) {
-                setRightPanelCollapsed(false);
-              }
-              toggleListPanel();
-            }}
-            className={cn(listPanelVisible && 'bg-primary text-primary-foreground')}
+            <FileSpreadsheet className="h-4 w-4 mr-2" />
+            Lists
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('bcf')}
+            onCheckedChange={() => handleToggleRightPanel('bcf')}
           >
-            <FileSpreadsheet className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Lists</TooltipContent>
-      </Tooltip>
+            <MessageSquare className="h-4 w-4 mr-2" />
+            BCF Issues
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('ids')}
+            onCheckedChange={() => handleToggleRightPanel('ids')}
+          >
+            <ClipboardCheck className="h-4 w-4 mr-2" />
+            IDS Validation
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('lens')}
+            onCheckedChange={() => handleToggleRightPanel('lens')}
+          >
+            <Palette className="h-4 w-4 mr-2" />
+            Lens Rules
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
@@ -821,30 +863,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* Lens (rule-based filtering) */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={lensPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              if (!lensPanelVisible) {
-                // Close other right-panel content first, then expand
-                setBcfPanelVisible(false);
-                setIdsPanelVisible(false);
-                setRightPanelCollapsed(false);
-              }
-              toggleLensPanel();
-            }}
-            className={cn(lensPanelVisible && 'bg-primary text-primary-foreground')}
-          >
-            <Palette className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Lens (Color Rules)</TooltipContent>
-      </Tooltip>
-
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* ── Camera & View ── */}