@ifc-lite/viewer 1.0.0

package/src/components/viewer/AxisHelper.tsx

@@ -0,0 +1,125 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+/**
+ * Axis Helper component - shows XYZ coordinate system following IFC standard (Z-up)
+ * Note: While WebGL uses Y-up internally, IFC convention is Z-up, so we display
+ * the axes with Z pointing upward to match what users expect in IFC/BIM context.
+ */
+
+interface AxisHelperProps {
+  rotationX?: number;
+  rotationY?: number;
+}
+
+export function AxisHelper({ rotationX = -25, rotationY = 45 }: AxisHelperProps) {
+  const size = 50;
+  const axisLength = 20;
+  const labelOffset = 26;
+
+  // Convert from WebGL convention (Y-up) to IFC display convention (Z-up)
+  // In the viewer, Y is up in 3D space, but we relabel:
+  // - WebGL X -> Display X (right)
+  // - WebGL Y -> Display Z (up in IFC)
+  // - WebGL Z -> Display Y (forward in IFC)
+
+  return (
+    <div
+      className="relative select-none"
+      style={{
+        width: size,
+        height: size,
+        perspective: 200,
+      }}
+    >
+      <div
+        className="relative w-full h-full"
+        style={{
+          transformStyle: 'preserve-3d',
+          transform: `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`,
+        }}
+      >
+        {/* X Axis - Red (pointing right) */}
+        <div
+          className="absolute bg-red-500"
+          style={{
+            width: axisLength,
+            height: 2,
+            left: size / 2,
+            top: size / 2 - 1,
+            transformOrigin: 'left center',
+            transform: 'rotateY(0deg)',
+          }}
+        />
+        <div
+          className="absolute text-red-500 font-bold text-xs"
+          style={{
+            left: size / 2 + labelOffset,
+            top: size / 2 - 6,
+            transform: `rotateY(${-rotationY}deg) rotateX(${-rotationX}deg)`,
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          X
+        </div>
+
+        {/* Z Axis - Blue (pointing up in IFC) - this is WebGL Y */}
+        <div
+          className="absolute bg-blue-500"
+          style={{
+            width: 2,
+            height: axisLength,
+            left: size / 2 - 1,
+            top: size / 2 - axisLength,
+            transformOrigin: 'center bottom',
+          }}
+        />
+        <div
+          className="absolute text-blue-500 font-bold text-xs"
+          style={{
+            left: size / 2 - 4,
+            top: size / 2 - labelOffset - 6,
+            transform: `rotateY(${-rotationY}deg) rotateX(${-rotationX}deg)`,
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          Z
+        </div>
+
+        {/* Y Axis - Green (pointing into screen in IFC) - this is WebGL -Z */}
+        <div
+          className="absolute bg-green-500"
+          style={{
+            width: axisLength,
+            height: 2,
+            left: size / 2,
+            top: size / 2 - 1,
+            transformOrigin: 'left center',
+            transform: 'rotateY(-90deg)',
+          }}
+        />
+        <div
+          className="absolute text-green-500 font-bold text-xs"
+          style={{
+            left: size / 2 - 4,
+            top: size / 2 + 6,
+            transform: `translateZ(${labelOffset}px) rotateY(${-rotationY}deg) rotateX(${-rotationX}deg)`,
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          Y
+        </div>
+
+        {/* Origin point */}
+        <div
+          className="absolute w-2 h-2 bg-white rounded-full border border-gray-400"
+          style={{
+            left: size / 2 - 4,
+            top: size / 2 - 4,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/BoxSelectionOverlay.tsx

@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+/**
+ * Box selection overlay for drag-to-select
+ */
+
+import { useViewerStore } from '@/store';
+
+export function BoxSelectionOverlay() {
+  const boxSelect = useViewerStore((s) => s.boxSelect);
+
+  if (!boxSelect.isSelecting) {
+    return null;
+  }
+
+  // Calculate rectangle bounds
+  const left = Math.min(boxSelect.startX, boxSelect.currentX);
+  const top = Math.min(boxSelect.startY, boxSelect.currentY);
+  const width = Math.abs(boxSelect.currentX - boxSelect.startX);
+  const height = Math.abs(boxSelect.currentY - boxSelect.startY);
+
+  // Don't render if the box is too small
+  if (width < 5 && height < 5) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed pointer-events-none border-2 border-primary bg-primary/10 z-30"
+      style={{
+        left,
+        top,
+        width,
+        height,
+      }}
+    >
+      {/* Corner handles for visual feedback */}
+      <div className="absolute -left-1 -top-1 w-2 h-2 bg-primary rounded-full" />
+      <div className="absolute -right-1 -top-1 w-2 h-2 bg-primary rounded-full" />
+      <div className="absolute -left-1 -bottom-1 w-2 h-2 bg-primary rounded-full" />
+      <div className="absolute -right-1 -bottom-1 w-2 h-2 bg-primary rounded-full" />
+
+      {/* Dimensions label */}
+      {(width > 50 || height > 30) && (
+        <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded whitespace-nowrap">
+          {Math.round(width)} x {Math.round(height)}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/viewer/EntityContextMenu.tsx

@@ -0,0 +1,220 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+/**
+ * Context menu for entity interactions
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  Focus,
+  EyeOff,
+  Eye,
+  Layers,
+  Copy,
+  Maximize2,
+  Building2,
+} from 'lucide-react';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+
+export function EntityContextMenu() {
+  const contextMenu = useViewerStore((s) => s.contextMenu);
+  const closeContextMenu = useViewerStore((s) => s.closeContextMenu);
+  const isolateEntity = useViewerStore((s) => s.isolateEntity);
+  const hideEntity = useViewerStore((s) => s.hideEntity);
+  const showAll = useViewerStore((s) => s.showAll);
+  const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+  const setSelectedEntityIds = useViewerStore((s) => s.setSelectedEntityIds);
+  const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { ifcDataStore } = useIfc();
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        closeContextMenu();
+      }
+    };
+
+    if (contextMenu.isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [contextMenu.isOpen, closeContextMenu]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeContextMenu();
+      }
+    };
+
+    if (contextMenu.isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [contextMenu.isOpen, closeContextMenu]);
+
+  const handleZoomTo = useCallback(() => {
+    if (contextMenu.entityId) {
+      setSelectedEntityId(contextMenu.entityId);
+      cameraCallbacks.fitAll?.();
+    }
+    closeContextMenu();
+  }, [contextMenu.entityId, setSelectedEntityId, cameraCallbacks, closeContextMenu]);
+
+  const handleIsolate = useCallback(() => {
+    if (contextMenu.entityId) {
+      isolateEntity(contextMenu.entityId);
+    }
+    closeContextMenu();
+  }, [contextMenu.entityId, isolateEntity, closeContextMenu]);
+
+  const handleHide = useCallback(() => {
+    if (contextMenu.entityId) {
+      hideEntity(contextMenu.entityId);
+    }
+    closeContextMenu();
+  }, [contextMenu.entityId, hideEntity, closeContextMenu]);
+
+  const handleShowAll = useCallback(() => {
+    showAll();
+    closeContextMenu();
+  }, [showAll, closeContextMenu]);
+
+  const handleSelectSimilar = useCallback(() => {
+    if (!contextMenu.entityId || !ifcDataStore) {
+      closeContextMenu();
+      return;
+    }
+
+    // Get the type of the selected entity
+    const entity = ifcDataStore.entities;
+    let entityType: string | null = null;
+
+    for (let i = 0; i < entity.count; i++) {
+      if (entity.expressId[i] === contextMenu.entityId) {
+        entityType = entity.getTypeName(contextMenu.entityId);
+        break;
+      }
+    }
+
+    if (entityType) {
+      // Select all entities of the same type
+      const sameTypeIds: number[] = [];
+      for (let i = 0; i < entity.count; i++) {
+        if (entity.getTypeName(entity.expressId[i]) === entityType) {
+          sameTypeIds.push(entity.expressId[i]);
+        }
+      }
+      setSelectedEntityIds(sameTypeIds);
+    }
+
+    closeContextMenu();
+  }, [contextMenu.entityId, ifcDataStore, setSelectedEntityIds, closeContextMenu]);
+
+  const handleSelectSameStorey = useCallback(() => {
+    if (!contextMenu.entityId || !ifcDataStore?.spatialHierarchy) {
+      closeContextMenu();
+      return;
+    }
+
+    const storeyId = ifcDataStore.spatialHierarchy.elementToStorey.get(contextMenu.entityId);
+    if (storeyId) {
+      const storeyElements = ifcDataStore.spatialHierarchy.byStorey.get(storeyId);
+      if (storeyElements) {
+        setSelectedEntityIds(Array.from(storeyElements));
+      }
+    }
+
+    closeContextMenu();
+  }, [contextMenu.entityId, ifcDataStore, setSelectedEntityIds, closeContextMenu]);
+
+  const handleCopyId = useCallback(() => {
+    if (contextMenu.entityId && ifcDataStore) {
+      const globalId = ifcDataStore.entities.getGlobalId(contextMenu.entityId);
+      if (globalId) {
+        navigator.clipboard.writeText(globalId);
+      }
+    }
+    closeContextMenu();
+  }, [contextMenu.entityId, ifcDataStore, closeContextMenu]);
+
+  if (!contextMenu.isOpen) {
+    return null;
+  }
+
+  // Get entity info for display
+  let entityName = '';
+  let entityType = '';
+  if (contextMenu.entityId && ifcDataStore) {
+    entityName = ifcDataStore.entities.getName(contextMenu.entityId) || '';
+    entityType = ifcDataStore.entities.getTypeName(contextMenu.entityId) || '';
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 bg-popover border rounded-lg shadow-lg py-1 min-w-48"
+      style={{
+        left: contextMenu.screenX,
+        top: contextMenu.screenY,
+      }}
+    >
+      {contextMenu.entityId && (
+        <>
+          {/* Entity Header */}
+          <div className="px-3 py-2 border-b">
+            <div className="font-medium text-sm truncate">
+              {entityName || `${entityType} #${contextMenu.entityId}`}
+            </div>
+            <div className="text-xs text-muted-foreground">{entityType}</div>
+          </div>
+
+          <MenuItem icon={Maximize2} label="Zoom to" onClick={handleZoomTo} />
+          <MenuItem icon={Focus} label="Isolate" onClick={handleIsolate} />
+          <MenuItem icon={EyeOff} label="Hide" onClick={handleHide} />
+
+          <div className="h-px bg-border my-1" />
+
+          <MenuItem icon={Layers} label={`Select all ${entityType}`} onClick={handleSelectSimilar} />
+          <MenuItem icon={Building2} label="Select same storey" onClick={handleSelectSameStorey} />
+
+          <div className="h-px bg-border my-1" />
+
+          <MenuItem icon={Copy} label="Copy GlobalId" onClick={handleCopyId} />
+        </>
+      )}
+
+      {!contextMenu.entityId && (
+        <>
+          <MenuItem icon={Eye} label="Show all" onClick={handleShowAll} />
+        </>
+      )}
+    </div>
+  );
+}
+
+interface MenuItemProps {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+function MenuItem({ icon: Icon, label, onClick, disabled }: MenuItemProps) {
+  return (
+    <button
+      className="w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Icon className="h-4 w-4 text-muted-foreground" />
+      <span>{label}</span>
+    </button>
+  );
+}