@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/tools/SectionPanel.tsx

@@ -0,0 +1,183 @@
+/* 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/. */
+
+/**
+ * Section plane controls panel
+ */
+
+import React, { useCallback, useState } from 'react';
+import { X, Slice, ChevronDown, FileImage } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useViewerStore } from '@/store';
+import { AXIS_INFO } from './sectionConstants';
+import { SectionPlaneVisualization } from './SectionVisualization';
+
+export function SectionOverlay() {
+  const sectionPlane = useViewerStore((s) => s.sectionPlane);
+  const setSectionPlaneAxis = useViewerStore((s) => s.setSectionPlaneAxis);
+  const setSectionPlanePosition = useViewerStore((s) => s.setSectionPlanePosition);
+  const toggleSectionPlane = useViewerStore((s) => s.toggleSectionPlane);
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
+  const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
+  const drawingPanelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
+  const clearDrawing = useViewerStore((s) => s.clearDrawing2D);
+  const [isPanelCollapsed, setIsPanelCollapsed] = useState(true);
+
+  const handleClose = useCallback(() => {
+    setActiveTool('select');
+  }, [setActiveTool]);
+
+  const handleAxisChange = useCallback((axis: 'down' | 'front' | 'side') => {
+    setSectionPlaneAxis(axis);
+  }, [setSectionPlaneAxis]);
+
+  const handlePositionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value);
+    if (!Number.isNaN(value)) {
+      setSectionPlanePosition(value);
+    }
+  }, [setSectionPlanePosition]);
+
+  const togglePanel = useCallback(() => {
+    setIsPanelCollapsed(prev => !prev);
+  }, []);
+
+  const handleView2D = useCallback(() => {
+    // Clear existing drawing to force regeneration with current settings
+    clearDrawing();
+    setDrawingPanelVisible(true);
+  }, [clearDrawing, setDrawingPanelVisible]);
+
+  return (
+    <>
+      {/* Compact Section Tool Panel - matches Measure tool style */}
+      <div className="pointer-events-auto absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg z-30">
+        {/* Header - always visible */}
+        <div className="flex items-center justify-between gap-2 p-2">
+          <button
+            onClick={togglePanel}
+            className="flex items-center gap-2 hover:bg-accent/50 rounded px-2 py-1 transition-colors"
+          >
+            <Slice className="h-4 w-4 text-primary" />
+            <span className="font-medium text-sm">Section</span>
+            {sectionPlane.enabled && (
+              <span className="text-xs text-primary font-mono">
+                {AXIS_INFO[sectionPlane.axis].label} <span className="inline-block w-12 text-right tabular-nums">{sectionPlane.position.toFixed(1)}%</span>
+              </span>
+            )}
+            <ChevronDown className={`h-3 w-3 transition-transform ${isPanelCollapsed ? '-rotate-90' : ''}`} />
+          </button>
+          <div className="flex items-center gap-1">
+            {/* Only show 2D button when panel is closed */}
+            {!drawingPanelVisible && (
+              <Button variant="ghost" size="icon-sm" onClick={handleView2D} title="Open 2D Drawing Panel">
+                <FileImage className="h-3 w-3" />
+              </Button>
+            )}
+            <Button variant="ghost" size="icon-sm" onClick={handleClose} title="Close">
+              <X className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Expandable content */}
+        {!isPanelCollapsed && (
+          <div className="border-t px-3 pb-3 min-w-64">
+            {/* Direction Selection */}
+            <div className="mt-3">
+              <label className="text-xs text-muted-foreground mb-2 block">Direction</label>
+              <div className="flex gap-1">
+                {(['down', 'front', 'side'] as const).map((axis) => (
+                  <Button
+                    key={axis}
+                    variant={sectionPlane.axis === axis ? 'default' : 'outline'}
+                    size="sm"
+                    className="flex-1 flex-col h-auto py-1.5"
+                    onClick={() => handleAxisChange(axis)}
+                  >
+                    <span className="text-xs font-medium">{AXIS_INFO[axis].label}</span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Position Slider */}
+            <div className="mt-3">
+              <div className="flex items-center justify-between mb-1">
+                <label className="text-xs text-muted-foreground">Position</label>
+                <input
+                  type="number"
+                  min="0"
+                  max="100"
+                  step="0.1"
+                  value={sectionPlane.position}
+                  onChange={handlePositionChange}
+                  className="w-16 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                />
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                step="0.1"
+                value={sectionPlane.position}
+                onChange={handlePositionChange}
+                className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
+              />
+            </div>
+
+            {/* Show 2D panel button - only when panel is closed */}
+            {!drawingPanelVisible && (
+              <div className="mt-3 pt-3 border-t">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full"
+                  onClick={handleView2D}
+                >
+                  <FileImage className="h-4 w-4 mr-2" />
+                  Open 2D Drawing
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Instruction hint - brutalist style matching Measure tool */}
+      <div
+        className="pointer-events-auto absolute bottom-16 left-1/2 -translate-x-1/2 z-30 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 px-3 py-1.5 border-2 border-zinc-900 dark:border-zinc-100 transition-shadow duration-150"
+        style={{
+          boxShadow: sectionPlane.enabled
+            ? '4px 4px 0px 0px #03A9F4' // Light blue shadow when active
+            : '3px 3px 0px 0px rgba(0,0,0,0.3)'
+        }}
+      >
+        <span className="font-mono text-xs uppercase tracking-wide">
+          {sectionPlane.enabled
+            ? `Cutting ${AXIS_INFO[sectionPlane.axis].label.toLowerCase()} at ${sectionPlane.position.toFixed(1)}%`
+            : 'Preview mode'}
+        </span>
+      </div>
+
+      {/* Enable toggle - brutalist style matching Measure tool */}
+      <div className="pointer-events-auto absolute bottom-4 left-1/2 -translate-x-1/2 z-30">
+        <button
+          onClick={toggleSectionPlane}
+          className={`px-2 py-1 font-mono text-[10px] uppercase tracking-wider border-2 transition-colors ${
+            sectionPlane.enabled
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-zinc-100 dark:bg-zinc-900 text-zinc-500 border-zinc-300 dark:border-zinc-700'
+          }`}
+          title="Toggle section plane"
+        >
+          {sectionPlane.enabled ? 'Cutting' : 'Preview'}
+        </button>
+      </div>
+
+      {/* Section plane visualization overlay */}
+      <SectionPlaneVisualization axis={sectionPlane.axis} enabled={sectionPlane.enabled} />
+    </>
+  );
+}

package/src/components/viewer/tools/SectionVisualization.tsx

@@ -0,0 +1,78 @@
+/* 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/. */
+
+/**
+ * Section plane visual indicator/gizmo
+ */
+
+import { AXIS_INFO } from './sectionConstants';
+
+interface SectionPlaneVisualizationProps {
+  axis: 'down' | 'front' | 'side';
+  enabled: boolean;
+}
+
+// Section plane visual indicator component
+export function SectionPlaneVisualization({ axis, enabled }: SectionPlaneVisualizationProps) {
+  // Get the axis color
+  const axisColors = {
+    down: '#03A9F4',  // Light blue for horizontal cuts
+    front: '#4CAF50', // Green for front cuts
+    side: '#FF9800',  // Orange for side cuts
+  };
+
+  const color = axisColors[axis];
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-20"
+      style={{ overflow: 'visible', pointerEvents: 'none' }}
+    >
+      <defs>
+        <filter id="section-glow">
+          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+          <feMerge>
+            <feMergeNode in="coloredBlur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+        {/* Animated dash pattern */}
+        <pattern id="section-pattern" patternUnits="userSpaceOnUse" width="10" height="10">
+          <line x1="0" y1="0" x2="10" y2="10" stroke={color} strokeWidth="1" strokeOpacity="0.5"/>
+        </pattern>
+      </defs>
+
+      {/* Axis indicator in corner */}
+      <g transform="translate(24, 24)">
+        <circle cx="20" cy="20" r="18" fill={color} fillOpacity={enabled ? 0.2 : 0.1} stroke={color} strokeWidth={enabled ? 3 : 2} filter="url(#section-glow)"/>
+        <text
+          x="20"
+          y="20"
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill={color}
+          fontFamily="monospace"
+          fontSize="11"
+          fontWeight="bold"
+        >
+          {AXIS_INFO[axis].label.toUpperCase()}
+        </text>
+        {/* Active indicator */}
+        {enabled && (
+          <text
+            x="20"
+            y="32"
+            textAnchor="middle"
+            fill={color}
+            fontFamily="monospace"
+            fontSize="7"
+            fontWeight="bold"
+          >
+            CUT
+          </text>
+        )}
+      </g>
+    </svg>
+  );
+}

package/src/components/viewer/tools/formatDistance.ts

@@ -0,0 +1,18 @@
+/* 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/. */
+
+/**
+ * Format a distance in meters to a human-readable string with appropriate units
+ */
+export function formatDistance(meters: number): string {
+  if (meters < 0.01) {
+    return `${(meters * 1000).toFixed(1)} mm`;
+  } else if (meters < 1) {
+    return `${(meters * 100).toFixed(1)} cm`;
+  } else if (meters < 1000) {
+    return `${meters.toFixed(3)} m`;
+  } else {
+    return `${(meters / 1000).toFixed(2)} km`;
+  }
+}

package/src/components/viewer/tools/sectionConstants.ts

@@ -0,0 +1,14 @@
+/* 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/. */
+
+/**
+ * Shared constants for section tool components
+ */
+
+// Axis display info for semantic names
+export const AXIS_INFO = {
+  down: { label: 'Down', description: 'Horizontal cut (floor plan view)', icon: '\u2193' },
+  front: { label: 'Front', description: 'Vertical cut (elevation view)', icon: '\u2192' },
+  side: { label: 'Side', description: 'Vertical cut (side elevation)', icon: '\u2299' },
+} as const;

package/src/components/viewer/useAnimationLoop.ts

@@ -0,0 +1,166 @@
+/* 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/. */
+
+/**
+ * Animation loop hook for the 3D viewport
+ * Handles requestAnimationFrame loop, camera update, ViewCube sync
+ */
+
+import { useEffect, type MutableRefObject, type RefObject } from 'react';
+import type { Renderer } from '@ifc-lite/renderer';
+import type { SectionPlane } from '@/store';
+
+export interface UseAnimationLoopParams {
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  rendererRef: MutableRefObject<Renderer | null>;
+  isInitialized: boolean;
+  animationFrameRef: MutableRefObject<number | null>;
+  lastFrameTimeRef: MutableRefObject<number>;
+  mouseIsDraggingRef: MutableRefObject<boolean>;
+  activeToolRef: MutableRefObject<string>;
+  hiddenEntitiesRef: MutableRefObject<Set<number>>;
+  isolatedEntitiesRef: MutableRefObject<Set<number> | null>;
+  selectedEntityIdRef: MutableRefObject<number | null>;
+  selectedModelIndexRef: MutableRefObject<number | undefined>;
+  clearColorRef: MutableRefObject<[number, number, number, number]>;
+  sectionPlaneRef: MutableRefObject<SectionPlane>;
+  sectionRangeRef: MutableRefObject<{ min: number; max: number } | null>;
+  lastCameraStateRef: MutableRefObject<{
+    position: { x: number; y: number; z: number };
+    rotation: { azimuth: number; elevation: number };
+    distance: number;
+    canvasWidth: number;
+    canvasHeight: number;
+  } | null>;
+  updateCameraRotationRealtime: (rotation: { azimuth: number; elevation: number }) => void;
+  calculateScale: () => void;
+  updateMeasurementScreenCoords: (projector: (worldPos: { x: number; y: number; z: number }) => { x: number; y: number } | null) => void;
+  hasPendingMeasurements: () => boolean;
+}
+
+export function useAnimationLoop(params: UseAnimationLoopParams): void {
+  const {
+    canvasRef,
+    rendererRef,
+    isInitialized,
+    animationFrameRef,
+    lastFrameTimeRef,
+    mouseIsDraggingRef,
+    activeToolRef,
+    hiddenEntitiesRef,
+    isolatedEntitiesRef,
+    selectedEntityIdRef,
+    selectedModelIndexRef,
+    clearColorRef,
+    sectionPlaneRef,
+    sectionRangeRef,
+    lastCameraStateRef,
+    updateCameraRotationRealtime,
+    calculateScale,
+    updateMeasurementScreenCoords,
+    hasPendingMeasurements,
+  } = params;
+
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    const canvas = canvasRef.current;
+    if (!renderer || !canvas || !isInitialized) return;
+
+    const camera = renderer.getCamera();
+    let aborted = false;
+
+    // Animation loop - update ViewCube in real-time
+    let lastRotationUpdate = 0;
+    let lastScaleUpdate = 0;
+    const animate = (currentTime: number) => {
+      if (aborted) return;
+
+      const deltaTime = currentTime - lastFrameTimeRef.current;
+      lastFrameTimeRef.current = currentTime;
+
+      const isAnimating = camera.update(deltaTime);
+      if (isAnimating) {
+        renderer.render({
+          hiddenIds: hiddenEntitiesRef.current,
+          isolatedIds: isolatedEntitiesRef.current,
+          selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
+          clearColor: clearColorRef.current,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
+        });
+        // Update ViewCube during camera animation (e.g., preset view transitions)
+        updateCameraRotationRealtime(camera.getRotation());
+        calculateScale();
+      } else if (!mouseIsDraggingRef.current && currentTime - lastRotationUpdate > 500) {
+        // Update camera rotation for ViewCube when not dragging (throttled to every 500ms when idle)
+        updateCameraRotationRealtime(camera.getRotation());
+        lastRotationUpdate = currentTime;
+      }
+
+      // Update scale bar (throttled to every 500ms - scale rarely needs frequent updates)
+      if (currentTime - lastScaleUpdate > 500) {
+        calculateScale();
+        lastScaleUpdate = currentTime;
+      }
+
+      // Update measurement screen coordinates only when:
+      // 1. Measure tool is active (not in other modes)
+      // 2. Measurements exist
+      // 3. Camera actually changed
+      // This prevents unnecessary store updates and re-renders when not measuring
+      if (activeToolRef.current === 'measure') {
+        if (hasPendingMeasurements()) {
+          const cameraPos = camera.getPosition();
+          const cameraRot = camera.getRotation();
+          const cameraDist = camera.getDistance();
+          const currentCameraState = {
+            position: cameraPos,
+            rotation: cameraRot,
+            distance: cameraDist,
+            canvasWidth: canvas.width,
+            canvasHeight: canvas.height,
+          };
+
+          // Check if camera state changed
+          const lastState = lastCameraStateRef.current;
+          const cameraChanged =
+            !lastState ||
+            lastState.position.x !== currentCameraState.position.x ||
+            lastState.position.y !== currentCameraState.position.y ||
+            lastState.position.z !== currentCameraState.position.z ||
+            lastState.rotation.azimuth !== currentCameraState.rotation.azimuth ||
+            lastState.rotation.elevation !== currentCameraState.rotation.elevation ||
+            lastState.distance !== currentCameraState.distance ||
+            lastState.canvasWidth !== currentCameraState.canvasWidth ||
+            lastState.canvasHeight !== currentCameraState.canvasHeight;
+
+          if (cameraChanged) {
+            lastCameraStateRef.current = currentCameraState;
+            updateMeasurementScreenCoords((worldPos) => {
+              return camera.projectToScreen(worldPos, canvas.width, canvas.height);
+            });
+          }
+        }
+      }
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+    lastFrameTimeRef.current = performance.now();
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      aborted = true;
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [isInitialized]);
+}
+
+export default useAnimationLoop;