@ifc-lite/viewer 1.6.0 → 1.7.0

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

@@ -0,0 +1,644 @@
+/* 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/. */
+
+/**
+ * SVG measurement overlay visualizations (lines, labels, snap indicators)
+ */
+
+import React, { useMemo } from 'react';
+import type { Measurement, SnapVisualization } from '@/store';
+import type { MeasurementConstraintEdge } from '@/store/types';
+import { SnapType, type SnapTarget } from '@ifc-lite/renderer';
+import { formatDistance } from './formatDistance';
+
+export interface MeasurementOverlaysProps {
+  measurements: Measurement[];
+  pending: { screenX: number; screenY: number } | null;
+  activeMeasurement: { start: { screenX: number; screenY: number; x: number; y: number; z: number }; current: { screenX: number; screenY: number }; distance: number } | null;
+  snapTarget: SnapTarget | null;
+  snapVisualization: SnapVisualization | null;
+  hoverPosition?: { x: number; y: number } | null;
+  projectToScreen?: (worldPos: { x: number; y: number; z: number }) => { x: number; y: number } | null;
+  constraintEdge?: MeasurementConstraintEdge | null;
+}
+
+export const MeasurementOverlays = React.memo(function MeasurementOverlays({ measurements, pending, activeMeasurement, snapTarget, snapVisualization, hoverPosition, projectToScreen, constraintEdge }: MeasurementOverlaysProps) {
+  // Determine snap indicator position
+  // Priority: activeMeasurement.current > snapTarget projected position > hoverPosition (fallback)
+  const snapIndicatorPos = useMemo(() => {
+    // During active measurement, use the measurement's current position
+    if (activeMeasurement) {
+      return { x: activeMeasurement.current.screenX, y: activeMeasurement.current.screenY };
+    }
+    // During hover, project the snap target's world position to screen
+    // This ensures the indicator is at the actual snap point, not the cursor
+    if (snapTarget && projectToScreen) {
+      const projected = projectToScreen(snapTarget.position);
+      if (projected) {
+        return projected;
+      }
+    }
+    // Fallback to hover position (cursor position)
+    return hoverPosition ?? null;
+  }, [
+    activeMeasurement?.current?.screenX,
+    activeMeasurement?.current?.screenY,
+    snapTarget?.position?.x,
+    snapTarget?.position?.y,
+    snapTarget?.position?.z,
+    projectToScreen,
+    hoverPosition?.x,
+    hoverPosition?.y,
+  ]);
+
+  return (
+    <>
+      {/* SVG filter definitions for glow effect */}
+      <svg className="absolute w-0 h-0 pointer-events-none" style={{ pointerEvents: 'none' }}>
+        <defs>
+          <filter id="glow">
+            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+            <feMerge>
+              <feMergeNode in="coloredBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+          <filter id="snap-glow">
+            <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+            <feMerge>
+              <feMergeNode in="coloredBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+      </svg>
+
+      {/* Completed measurements */}
+      {measurements.map((m) => (
+        <div key={m.id} className="pointer-events-none">
+          {/* Line connecting start and end */}
+          <svg
+            className="absolute inset-0 pointer-events-none z-20"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            <line
+              x1={m.start.screenX}
+              y1={m.start.screenY}
+              x2={m.end.screenX}
+              y2={m.end.screenY}
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              strokeDasharray="6,3"
+              filter="url(#glow)"
+            />
+            {/* Start point */}
+            <circle
+              cx={m.start.screenX}
+              cy={m.start.screenY}
+              r="5"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+            />
+            {/* End point */}
+            <circle
+              cx={m.end.screenX}
+              cy={m.end.screenY}
+              r="5"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+            />
+          </svg>
+
+          {/* Distance label at midpoint - brutalist style */}
+          <div
+            className="absolute pointer-events-none z-20 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 px-2 py-1 font-mono text-xs font-bold -translate-x-1/2 -translate-y-1/2 border-2 border-zinc-900 dark:border-zinc-100 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)]"
+            style={{
+              left: (m.start.screenX + m.end.screenX) / 2,
+              top: (m.start.screenY + m.end.screenY) / 2,
+            }}
+          >
+            {formatDistance(m.distance)}
+          </div>
+        </div>
+      ))}
+
+      {/* Active measurement (live preview while dragging) */}
+      {activeMeasurement && (
+        <div className="pointer-events-none">
+          <svg
+            className="absolute inset-0 pointer-events-none z-20"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            {/* Animated dashed line (marching ants effect) */}
+            <line
+              x1={activeMeasurement.start.screenX}
+              y1={activeMeasurement.start.screenY}
+              x2={activeMeasurement.current.screenX}
+              y2={activeMeasurement.current.screenY}
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              strokeDasharray="6,3"
+              strokeOpacity="0.7"
+              filter="url(#glow)"
+            />
+            {/* Start point */}
+            <circle
+              cx={activeMeasurement.start.screenX}
+              cy={activeMeasurement.start.screenY}
+              r="6"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              filter="url(#glow)"
+            />
+            {/* Current point (slightly larger, pulsing) */}
+            <circle
+              cx={activeMeasurement.current.screenX}
+              cy={activeMeasurement.current.screenY}
+              r="7"
+              fill="white"
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              filter="url(#glow)"
+              className="animate-pulse"
+            />
+          </svg>
+
+          {/* Live distance label - brutalist style */}
+          <div
+            className="absolute pointer-events-none z-20 bg-primary text-primary-foreground px-2.5 py-1 font-mono text-sm font-bold -translate-x-1/2 -translate-y-1/2 border-2 border-primary shadow-[3px_3px_0px_0px_rgba(0,0,0,0.2)]"
+            style={{
+              left: (activeMeasurement.start.screenX + activeMeasurement.current.screenX) / 2,
+              top: (activeMeasurement.start.screenY + activeMeasurement.current.screenY) / 2,
+            }}
+          >
+            {formatDistance(activeMeasurement.distance)}
+          </div>
+        </div>
+      )}
+
+      {/* Orthogonal constraint axes visualization */}
+      {activeMeasurement && constraintEdge?.activeAxis && projectToScreen && (() => {
+        const startWorld = activeMeasurement.start;
+        const startScreen = { x: startWorld.screenX, y: startWorld.screenY };
+
+        // Project axis endpoints to screen space
+        const axisLength = 2.0; // 2 meters in world space
+
+        const { axis1, axis2, axis3 } = constraintEdge.axes;
+        const colors = constraintEdge.colors;
+
+        // Calculate endpoints along each axis (positive and negative)
+        const axis1End = projectToScreen({
+          x: startWorld.x + axis1.x * axisLength,
+          y: startWorld.y + axis1.y * axisLength,
+          z: startWorld.z + axis1.z * axisLength,
+        });
+        const axis1Neg = projectToScreen({
+          x: startWorld.x - axis1.x * axisLength,
+          y: startWorld.y - axis1.y * axisLength,
+          z: startWorld.z - axis1.z * axisLength,
+        });
+        const axis2End = projectToScreen({
+          x: startWorld.x + axis2.x * axisLength,
+          y: startWorld.y + axis2.y * axisLength,
+          z: startWorld.z + axis2.z * axisLength,
+        });
+        const axis2Neg = projectToScreen({
+          x: startWorld.x - axis2.x * axisLength,
+          y: startWorld.y - axis2.y * axisLength,
+          z: startWorld.z - axis2.z * axisLength,
+        });
+        const axis3End = projectToScreen({
+          x: startWorld.x + axis3.x * axisLength,
+          y: startWorld.y + axis3.y * axisLength,
+          z: startWorld.z + axis3.z * axisLength,
+        });
+        const axis3Neg = projectToScreen({
+          x: startWorld.x - axis3.x * axisLength,
+          y: startWorld.y - axis3.y * axisLength,
+          z: startWorld.z - axis3.z * axisLength,
+        });
+
+        if (!axis1End || !axis1Neg || !axis2End || !axis2Neg || !axis3End || !axis3Neg) return null;
+
+        const activeAxis = constraintEdge.activeAxis;
+
+        return (
+          <svg
+            className="absolute inset-0 pointer-events-none z-25"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            {/* Axis 1 */}
+            <line
+              x1={axis1Neg.x}
+              y1={axis1Neg.y}
+              x2={axis1End.x}
+              y2={axis1End.y}
+              stroke={colors.axis1}
+              strokeWidth={activeAxis === 'axis1' ? 3 : 1.5}
+              strokeOpacity={activeAxis === 'axis1' ? 0.9 : 0.3}
+              strokeDasharray={activeAxis === 'axis1' ? 'none' : '4,4'}
+              strokeLinecap="round"
+            />
+            {/* Axis 2 */}
+            <line
+              x1={axis2Neg.x}
+              y1={axis2Neg.y}
+              x2={axis2End.x}
+              y2={axis2End.y}
+              stroke={colors.axis2}
+              strokeWidth={activeAxis === 'axis2' ? 3 : 1.5}
+              strokeOpacity={activeAxis === 'axis2' ? 0.9 : 0.3}
+              strokeDasharray={activeAxis === 'axis2' ? 'none' : '4,4'}
+              strokeLinecap="round"
+            />
+            {/* Axis 3 */}
+            <line
+              x1={axis3Neg.x}
+              y1={axis3Neg.y}
+              x2={axis3End.x}
+              y2={axis3End.y}
+              stroke={colors.axis3}
+              strokeWidth={activeAxis === 'axis3' ? 3 : 1.5}
+              strokeOpacity={activeAxis === 'axis3' ? 0.9 : 0.3}
+              strokeDasharray={activeAxis === 'axis3' ? 'none' : '4,4'}
+              strokeLinecap="round"
+            />
+            {/* Center origin dot */}
+            <circle
+              cx={startScreen.x}
+              cy={startScreen.y}
+              r="4"
+              fill="white"
+              stroke={colors[activeAxis]}
+              strokeWidth="2"
+            />
+          </svg>
+        );
+      })()}
+
+      {/* Edge highlight - draw full edge in 3D-projected screen space */}
+      {snapVisualization?.edgeLine3D && projectToScreen && (() => {
+        const start = projectToScreen(snapVisualization.edgeLine3D.v0);
+        const end = projectToScreen(snapVisualization.edgeLine3D.v1);
+        if (!start || !end) return null;
+
+        // Corner position (at v0 or v1)
+        const cornerPos = snapVisualization.cornerRings
+          ? (snapVisualization.cornerRings.atStart ? start : end)
+          : null;
+
+        return (
+          <svg
+            className="absolute inset-0 pointer-events-none z-30"
+            style={{ overflow: 'visible', pointerEvents: 'none' }}
+          >
+            {/* Edge line with snap color (orange for edges) */}
+            <line
+              x1={start.x}
+              y1={start.y}
+              x2={end.x}
+              y2={end.y}
+              stroke="#FF9800"
+              strokeWidth="4"
+              strokeOpacity="0.9"
+              strokeLinecap="round"
+              filter="url(#snap-glow)"
+            />
+            {/* Outer glow line for better visibility */}
+            <line
+              x1={start.x}
+              y1={start.y}
+              x2={end.x}
+              y2={end.y}
+              stroke="#FF9800"
+              strokeWidth="8"
+              strokeOpacity="0.3"
+              strokeLinecap="round"
+            />
+            {/* Edge endpoints */}
+            <circle cx={start.x} cy={start.y} r="4" fill="#FF9800" fillOpacity="0.6" />
+            <circle cx={end.x} cy={end.y} r="4" fill="#FF9800" fillOpacity="0.6" />
+
+            {/* Corner rings - shows strong attraction at corners */}
+            {cornerPos && snapVisualization.cornerRings && (
+              <>
+                {/* Outer pulsing ring */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="18"
+                  fill="none"
+                  stroke="#FFEB3B"
+                  strokeWidth="2"
+                  strokeOpacity="0.4"
+                  className="animate-pulse"
+                />
+                {/* Middle ring */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="12"
+                  fill="none"
+                  stroke="#FFEB3B"
+                  strokeWidth="2"
+                  strokeOpacity="0.6"
+                />
+                {/* Inner ring */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="6"
+                  fill="#FFEB3B"
+                  fillOpacity="0.8"
+                  stroke="white"
+                  strokeWidth="1"
+                />
+                {/* Center dot */}
+                <circle
+                  cx={cornerPos.x}
+                  cy={cornerPos.y}
+                  r="2"
+                  fill="white"
+                />
+                {/* Valence indicators (small dots around corner) */}
+                {snapVisualization.cornerRings.valence >= 3 && (
+                  <>
+                    <circle cx={cornerPos.x - 10} cy={cornerPos.y} r="2" fill="#FFEB3B" fillOpacity="0.7" />
+                    <circle cx={cornerPos.x + 10} cy={cornerPos.y} r="2" fill="#FFEB3B" fillOpacity="0.7" />
+                    <circle cx={cornerPos.x} cy={cornerPos.y - 10} r="2" fill="#FFEB3B" fillOpacity="0.7" />
+                  </>
+                )}
+              </>
+            )}
+          </svg>
+        );
+      })()}
+
+      {/* Plane indicator - subtle grid/cross for face snaps */}
+      {snapVisualization?.planeIndicator && (
+        <svg
+          className="absolute inset-0 pointer-events-none z-25"
+          style={{ overflow: 'visible', pointerEvents: 'none' }}
+        >
+          {/* Cross indicator */}
+          <line
+            x1={snapVisualization.planeIndicator.x - 20}
+            y1={snapVisualization.planeIndicator.y}
+            x2={snapVisualization.planeIndicator.x + 20}
+            y2={snapVisualization.planeIndicator.y}
+            stroke="hsl(var(--primary))"
+            strokeWidth="2"
+            strokeOpacity="0.4"
+          />
+          <line
+            x1={snapVisualization.planeIndicator.x}
+            y1={snapVisualization.planeIndicator.y - 20}
+            x2={snapVisualization.planeIndicator.x}
+            y2={snapVisualization.planeIndicator.y + 20}
+            stroke="hsl(var(--primary))"
+            strokeWidth="2"
+            strokeOpacity="0.4"
+          />
+          {/* Small circle at center */}
+          <circle
+            cx={snapVisualization.planeIndicator.x}
+            cy={snapVisualization.planeIndicator.y}
+            r="4"
+            fill="hsl(var(--primary))"
+            fillOpacity="0.6"
+          />
+        </svg>
+      )}
+
+      {/* Snap indicator */}
+      {snapTarget && snapIndicatorPos && (
+        <SnapIndicator
+          screenX={snapIndicatorPos.x}
+          screenY={snapIndicatorPos.y}
+          snapType={snapTarget.type}
+        />
+      )}
+
+      {/* Pending point (legacy - keep for backward compatibility) */}
+      {pending && !activeMeasurement && (
+        <svg
+          className="absolute inset-0 pointer-events-none z-20"
+          style={{ overflow: 'visible', pointerEvents: 'none' }}
+        >
+          <circle
+            cx={pending.screenX}
+            cy={pending.screenY}
+            r="5"
+            fill="none"
+            stroke="hsl(var(--primary))"
+            strokeWidth="1.5"
+          />
+          <circle
+            cx={pending.screenX}
+            cy={pending.screenY}
+            r="2.5"
+            fill="hsl(var(--primary))"
+          />
+        </svg>
+      )}
+    </>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent unnecessary re-renders
+  // Return true if props are equal (skip re-render), false if different (re-render)
+
+  // Compare measurements - check both IDs AND screen coordinates
+  if (prevProps.measurements.length !== nextProps.measurements.length) return false;
+  for (let i = 0; i < prevProps.measurements.length; i++) {
+    const prev = prevProps.measurements[i];
+    const next = nextProps.measurements[i];
+    if (!next || prev.id !== next.id) return false;
+    // Check screen coordinates for zoom/camera changes
+    if (prev.start.screenX !== next.start.screenX || prev.start.screenY !== next.start.screenY) return false;
+    if (prev.end.screenX !== next.end.screenX || prev.end.screenY !== next.end.screenY) return false;
+  }
+
+  // Compare activeMeasurement - check if it exists and if position changed
+  if (!!prevProps.activeMeasurement !== !!nextProps.activeMeasurement) return false;
+  if (prevProps.activeMeasurement && nextProps.activeMeasurement) {
+    if (
+      prevProps.activeMeasurement.current.screenX !== nextProps.activeMeasurement.current.screenX ||
+      prevProps.activeMeasurement.current.screenY !== nextProps.activeMeasurement.current.screenY ||
+      prevProps.activeMeasurement.start.screenX !== nextProps.activeMeasurement.start.screenX ||
+      prevProps.activeMeasurement.start.screenY !== nextProps.activeMeasurement.start.screenY
+    ) return false;
+  }
+
+  // Compare snapTarget - check type and position
+  if (!!prevProps.snapTarget !== !!nextProps.snapTarget) return false;
+  if (prevProps.snapTarget && nextProps.snapTarget) {
+    if (
+      prevProps.snapTarget.type !== nextProps.snapTarget.type ||
+      prevProps.snapTarget.position.x !== nextProps.snapTarget.position.x ||
+      prevProps.snapTarget.position.y !== nextProps.snapTarget.position.y ||
+      prevProps.snapTarget.position.z !== nextProps.snapTarget.position.z
+    ) return false;
+  }
+
+  // Compare snapVisualization
+  if (!!prevProps.snapVisualization !== !!nextProps.snapVisualization) return false;
+  if (prevProps.snapVisualization && nextProps.snapVisualization) {
+    // Compare edgeLine3D (3D world coordinates)
+    const prevEdge = prevProps.snapVisualization.edgeLine3D;
+    const nextEdge = nextProps.snapVisualization.edgeLine3D;
+    if (!!prevEdge !== !!nextEdge) return false;
+    if (prevEdge && nextEdge) {
+      if (
+        prevEdge.v0.x !== nextEdge.v0.x ||
+        prevEdge.v0.y !== nextEdge.v0.y ||
+        prevEdge.v0.z !== nextEdge.v0.z ||
+        prevEdge.v1.x !== nextEdge.v1.x ||
+        prevEdge.v1.y !== nextEdge.v1.y ||
+        prevEdge.v1.z !== nextEdge.v1.z
+      ) return false;
+    }
+    // Compare slidingDot (t parameter only)
+    const prevDot = prevProps.snapVisualization.slidingDot;
+    const nextDot = nextProps.snapVisualization.slidingDot;
+    if (!!prevDot !== !!nextDot) return false;
+    if (prevDot && nextDot) {
+      if (prevDot.t !== nextDot.t) return false;
+    }
+    // Compare cornerRings (atStart + valence)
+    const prevCorner = prevProps.snapVisualization.cornerRings;
+    const nextCorner = nextProps.snapVisualization.cornerRings;
+    if (!!prevCorner !== !!nextCorner) return false;
+    if (prevCorner && nextCorner) {
+      if (
+        prevCorner.atStart !== nextCorner.atStart ||
+        prevCorner.valence !== nextCorner.valence
+      ) return false;
+    }
+    const prevPlane = prevProps.snapVisualization.planeIndicator;
+    const nextPlane = nextProps.snapVisualization.planeIndicator;
+    if (!!prevPlane !== !!nextPlane) return false;
+    if (prevPlane && nextPlane) {
+      if (
+        prevPlane.x !== nextPlane.x ||
+        prevPlane.y !== nextPlane.y
+      ) return false;
+    }
+  }
+
+  // Compare projectToScreen (always re-render if it changes as we need it for projection)
+  if (prevProps.projectToScreen !== nextProps.projectToScreen) return false;
+
+  // Compare hoverPosition
+  if (prevProps.hoverPosition?.x !== nextProps.hoverPosition?.x ||
+      prevProps.hoverPosition?.y !== nextProps.hoverPosition?.y) return false;
+
+  // Compare pending
+  if (prevProps.pending?.screenX !== nextProps.pending?.screenX ||
+      prevProps.pending?.screenY !== nextProps.pending?.screenY) return false;
+
+  // Compare constraintEdge
+  if (!!prevProps.constraintEdge !== !!nextProps.constraintEdge) return false;
+  if (prevProps.constraintEdge && nextProps.constraintEdge) {
+    if (prevProps.constraintEdge.activeAxis !== nextProps.constraintEdge.activeAxis) return false;
+  }
+
+  return true; // All props are equal, skip re-render
+});
+
+interface SnapIndicatorProps {
+  screenX: number;
+  screenY: number;
+  snapType: SnapType;
+}
+
+function SnapIndicator({ screenX, screenY, snapType }: SnapIndicatorProps) {
+  // Distinct colors for each snap type - no labels needed, shapes are self-explanatory
+  const snapColors = {
+    [SnapType.VERTEX]: '#FFEB3B', // Yellow - circle = point
+    [SnapType.EDGE]: '#FF9800', // Orange - line = edge
+    [SnapType.FACE]: '#03A9F4', // Light Blue - square = face
+    [SnapType.FACE_CENTER]: '#00BCD4', // Cyan - square with dot = center
+  };
+
+  const color = snapColors[snapType];
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-25"
+      style={{ overflow: 'visible', pointerEvents: 'none' }}
+    >
+      {/* Outer glow ring - subtle pulsing indicator */}
+      <circle
+        cx={screenX}
+        cy={screenY}
+        r="10"
+        fill="none"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeOpacity="0.4"
+        filter="url(#snap-glow)"
+      />
+
+      {/* Vertex: filled circle (point) */}
+      {snapType === SnapType.VERTEX && (
+        <>
+          <circle cx={screenX} cy={screenY} r="5" fill={color} opacity="0.3" />
+          <circle cx={screenX} cy={screenY} r="2.5" fill={color} />
+        </>
+      )}
+
+      {/* Edge: horizontal line with center dot */}
+      {snapType === SnapType.EDGE && (
+        <>
+          <line
+            x1={screenX - 8}
+            y1={screenY}
+            x2={screenX + 8}
+            y2={screenY}
+            stroke={color}
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+          <circle cx={screenX} cy={screenY} r="2" fill={color} />
+        </>
+      )}
+
+      {/* Face: square outline */}
+      {snapType === SnapType.FACE && (
+        <>
+          <rect
+            x={screenX - 5}
+            y={screenY - 5}
+            width="10"
+            height="10"
+            fill={color}
+            fillOpacity="0.2"
+            stroke={color}
+            strokeWidth="1.5"
+          />
+        </>
+      )}
+
+      {/* Face Center: square with center dot */}
+      {snapType === SnapType.FACE_CENTER && (
+        <>
+          <rect
+            x={screenX - 5}
+            y={screenY - 5}
+            width="10"
+            height="10"
+            fill="none"
+            stroke={color}
+            strokeWidth="1.5"
+          />
+          <circle cx={screenX} cy={screenY} r="2" fill={color} />
+        </>
+      )}
+    </svg>
+  );
+}