@ifc-lite/viewer 1.21.0 → 1.22.1

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

@@ -0,0 +1,322 @@
+/* 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/. */
+
+/**
+ * Move gizmo for the selected entity. Renders three SVG axis arrows
+ * (X red, Y green, Z blue — IFC Z-up convention) anchored to the
+ * entity's bounding-box center. Dragging an arrow translates the
+ * entity along that axis via `MutationSlice.translateEntity`.
+ *
+ * Render conditions:
+ *   - `editEnabled` is on
+ *   - `activeTool === 'select'` (so the gizmo doesn't fight measure /
+ *     section / addElement)
+ *   - exactly one entity is selected
+ *   - the selection has a placement chain that can be translated
+ *     (`resolvePlacementChain` returns non-null)
+ *
+ * Coordinate spaces:
+ *   The renderer is Y-up. IFC is Z-up. We project two world points
+ *   per axis (origin and origin + 1m in the chosen direction in
+ *   renderer frame) to screen. The screen-space vector between them
+ *   IS our "1 metre" delta projection — so the per-frame drag math
+ *   reduces to a single dot product against the cursor's screen
+ *   delta. No camera matrix inversion required; we lean entirely on
+ *   the existing `projectToScreen` callback.
+ *
+ * The drag commits a single `translateEntity` call per frame (no
+ * batching). Each call lands as one mutation on the undo stack,
+ * which is intentionally coarse — fine for v1; if it gets noisy we
+ * can collapse runs in a later pass.
+ */
+
+import { useMemo, useRef } from 'react';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+import { useCameraTickSubscription } from '@/hooks/useCameraTickSubscription';
+import { getEntityCenter } from '@/utils/viewportUtils';
+
+type Vec2 = { x: number; y: number };
+type Vec3 = { x: number; y: number; z: number };
+type Project = (worldPos: Vec3) => Vec2 | null;
+type Axis = 'x' | 'y' | 'z';
+
+const AXIS_COLORS: Record<Axis, string> = {
+  x: '#ef4444', // red — IFC X
+  y: '#10b981', // green — IFC Y
+  z: '#3b82f6', // blue — IFC Z (up)
+};
+
+/** Renderer-frame unit vector for each IFC axis. */
+const AXIS_RENDERER_OFFSET: Record<Axis, Vec3> = {
+  // IFC +X = renderer +X
+  x: { x: 1, y: 0, z: 0 },
+  // IFC +Y = renderer -Z (renderer Z is forward; IFC Y is plan-forward)
+  y: { x: 0, y: 0, z: -1 },
+  // IFC +Z = renderer +Y (Z-up vs Y-up)
+  z: { x: 0, y: 1, z: 0 },
+};
+
+function pickViewerOrigin(meshes: import('@ifc-lite/geometry').MeshData[] | null, globalId: number): Vec3 | null {
+  return getEntityCenter(meshes ?? null, globalId);
+}
+
+export function GizmoOverlay() {
+  const editEnabled = useViewerStore((s) => s.editEnabled);
+  const activeTool = useViewerStore((s) => s.activeTool);
+  const selectedEntity = useViewerStore((s) => s.selectedEntity);
+  const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
+  const projectToScreen = useViewerStore((s) => s.cameraCallbacks.projectToScreen);
+  const getViewpoint = useViewerStore((s) => s.cameraCallbacks.getViewpoint);
+  const translateEntity = useViewerStore((s) => s.translateEntity);
+  const readEntityPosition = useViewerStore((s) => s.readEntityPosition);
+  const mutationVersion = useViewerStore((s) => s.mutationVersion);
+  const { models, geometryResult } = useIfc();
+
+  // Drag state — refs instead of state to avoid re-render thrashing.
+  const dragRef = useRef<{
+    axis: Axis;
+    originScreen: Vec2;
+    axisScreenPerMeter: Vec2; // dx/dy in pixels for a +1m world move
+    accumulatedDelta: Vec3; // IFC-frame delta applied so far this drag
+    cursorStart: Vec2;
+    batchId: string; // shared by every per-frame translate so one Ctrl+Z reverts the whole drag
+  } | null>(null);
+
+  // Decide whether the gizmo is renderable at all this frame. The
+  // movability gate is `readEntityPosition` (slice action that
+  // lazily creates the StoreEditor) so the arrows surface on the
+  // user's first selection — no need to wait for an unrelated
+  // mutation to prime the editor cache.
+  const ready = useMemo(() => {
+    if (!editEnabled) return null;
+    if (activeTool !== 'select') return null;
+    if (!selectedEntity || selectedEntityId === null) return null;
+    if (!projectToScreen) return null;
+
+    const model = models.get(selectedEntity.modelId);
+    if (!model?.ifcDataStore) return null;
+
+    const coords = readEntityPosition(selectedEntity.modelId, selectedEntity.expressId);
+    if (!coords) return null;
+
+    // Origin in renderer frame — bbox center of the entity's meshes.
+    const meshes = (model.geometryResult ?? geometryResult)?.meshes ?? null;
+    const origin = pickViewerOrigin(meshes, selectedEntityId);
+    if (!origin) return null;
+    return { origin, modelId: selectedEntity.modelId, expressId: selectedEntity.expressId };
+    // mutationVersion is a dep so the origin re-resolves after edits.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    editEnabled,
+    activeTool,
+    selectedEntity,
+    selectedEntityId,
+    models,
+    geometryResult,
+    projectToScreen,
+    readEntityPosition,
+    mutationVersion,
+  ]);
+
+  // Camera-tick subscription — wakes the gizmo on real viewport
+  // motion (camera tick bypasses React renders for perf, see
+  // `Viewport.tsx` `updateCameraRotationRealtime`). Skipped when
+  // the gizmo isn't visible.
+  void useCameraTickSubscription(getViewpoint, ready !== null);
+
+  if (!ready) return null;
+
+  const project = projectToScreen as Project;
+  const originScreen = project(ready.origin);
+  if (!originScreen) return null;
+
+  // Axis tip screen positions. Each axis is scaled so its
+  // projected arrow lands at a constant target length in pixels,
+  // regardless of camera distance — fixed-world-length arrows
+  // shrink to invisibility from far away. The per-axis scale
+  // also handles the foreshortening case (an axis pointing
+  // straight at the camera projects to ~0 px; we cap the world
+  // length so the math doesn't blow up).
+  //
+  // For drag math we still want a "screen pixels per metre" basis
+  // along each axis. We compute that with a probe at 1 m world
+  // length, THEN re-project at the final scaled length so the
+  // visible arrow matches the cursor mapping.
+  const TARGET_SCREEN_PX = 80;
+  const MAX_WORLD_LENGTH = 1_000; // cap for near-parallel axes
+
+  const axisTips: Partial<Record<Axis, Vec2>> = {};
+  const axisPerMeter: Partial<Record<Axis, Vec2>> = {};
+  const axisWorldLengths: Partial<Record<Axis, number>> = {};
+  for (const axis of ['x', 'y', 'z'] as const) {
+    const off = AXIS_RENDERER_OFFSET[axis];
+    // Probe at 1 metre to measure pixels-per-metre along this
+    // axis. If the axis is nearly parallel to the camera view
+    // direction the projected length is tiny — we clamp the
+    // resulting world length so the arrow stays bounded.
+    const probeTip: Vec3 = {
+      x: ready.origin.x + off.x,
+      y: ready.origin.y + off.y,
+      z: ready.origin.z + off.z,
+    };
+    const probeScreen = project(probeTip);
+    if (!probeScreen) continue;
+    const probeDx = probeScreen.x - originScreen.x;
+    const probeDy = probeScreen.y - originScreen.y;
+    const probePx = Math.hypot(probeDx, probeDy);
+    if (probePx < 1e-3) {
+      // Axis is parallel to view direction — skip arrow; the
+      // user can rotate to grab it.
+      continue;
+    }
+    const worldLength = Math.min(MAX_WORLD_LENGTH, TARGET_SCREEN_PX / probePx);
+    axisWorldLengths[axis] = worldLength;
+    const tipWorld: Vec3 = {
+      x: ready.origin.x + off.x * worldLength,
+      y: ready.origin.y + off.y * worldLength,
+      z: ready.origin.z + off.z * worldLength,
+    };
+    const tipScreen = project(tipWorld);
+    if (!tipScreen) continue;
+    axisTips[axis] = tipScreen;
+    // Pixels per metre along this axis = probe pixels (probe was
+    // exactly 1 metre, so the ratio is the probe length itself).
+    axisPerMeter[axis] = { x: probeDx, y: probeDy };
+  }
+  void axisWorldLengths; // surfaced for future use (e.g. rotate-ring radius)
+
+  const startDrag = (axis: Axis, e: React.PointerEvent<SVGElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const perMetre = axisPerMeter[axis];
+    if (!perMetre) return;
+    (e.target as SVGElement).setPointerCapture(e.pointerId);
+    dragRef.current = {
+      axis,
+      originScreen,
+      axisScreenPerMeter: perMetre,
+      accumulatedDelta: { x: 0, y: 0, z: 0 },
+      cursorStart: { x: e.clientX, y: e.clientY },
+      batchId: `gizmo_drag_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`,
+    };
+  };
+
+  const onDragMove = (e: React.PointerEvent<SVGElement>) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const cursorDelta: Vec2 = {
+      x: e.clientX - drag.cursorStart.x,
+      y: e.clientY - drag.cursorStart.y,
+    };
+    // Scalar projection of the cursor delta onto the on-screen axis
+    // direction. |axisScreenPerMeter|^2 is the squared pixel length
+    // of a 1m world segment along this axis — dividing by it converts
+    // pixels back into metres.
+    const ax = drag.axisScreenPerMeter;
+    const denom = ax.x * ax.x + ax.y * ax.y;
+    if (denom < 1e-6) return;
+    const metres = (cursorDelta.x * ax.x + cursorDelta.y * ax.y) / denom;
+    // Delta since the LAST frame of this drag.
+    const previous = drag.accumulatedDelta;
+    const delta: [number, number, number] = [0, 0, 0];
+    const idx = drag.axis === 'x' ? 0 : drag.axis === 'y' ? 1 : 2;
+    delta[idx] = metres - (drag.axis === 'x' ? previous.x : drag.axis === 'y' ? previous.y : previous.z);
+    if (Math.abs(delta[idx]) < 1e-6) return;
+    // Only advance the per-axis accumulator if the mutation actually
+    // landed. If `translateEntity` rejects (placement chain doesn't
+    // resolve, missing data store, etc.) the model state didn't
+    // change, so leaving the accumulator at its previous value means
+    // the next pointer-move frame retries the full delta instead of
+    // silently dropping it. Keeps drag state and model state in sync.
+    const result = translateEntity(ready.modelId, ready.expressId, delta, drag.batchId);
+    if (!result.ok) return;
+    if (drag.axis === 'x') previous.x = metres;
+    else if (drag.axis === 'y') previous.y = metres;
+    else previous.z = metres;
+  };
+
+  const onDragEnd = (e: React.PointerEvent<SVGElement>) => {
+    if (!dragRef.current) return;
+    try {
+      (e.target as SVGElement).releasePointerCapture(e.pointerId);
+    } catch {
+      /* pointer already released — safe to ignore */
+    }
+    dragRef.current = null;
+  };
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-30"
+      style={{ overflow: 'visible' }}
+    >
+      <defs>
+        {(['x', 'y', 'z'] as const).map((axis) => (
+          <marker
+            key={axis}
+            id={`gizmo-arrow-${axis}`}
+            viewBox="0 0 10 10"
+            refX="9"
+            refY="5"
+            markerWidth="6"
+            markerHeight="6"
+            orient="auto"
+          >
+            <path d="M 0 0 L 10 5 L 0 10 z" fill={AXIS_COLORS[axis]} />
+          </marker>
+        ))}
+      </defs>
+
+      {/* Outer hit area (transparent, wider) on top of each visible arrow
+          so the user can grab without pixel precision. Pointer events
+          on the SVG itself are off — the per-handle layer turns them
+          back on. */}
+      {(['x', 'y', 'z'] as const).map((axis) => {
+        const tip = axisTips[axis];
+        if (!tip) return null;
+        const colour = AXIS_COLORS[axis];
+        return (
+          <g key={axis} style={{ pointerEvents: 'auto' }}>
+            <line
+              x1={originScreen.x}
+              y1={originScreen.y}
+              x2={tip.x}
+              y2={tip.y}
+              stroke="transparent"
+              strokeWidth={14}
+              style={{ cursor: 'grab' }}
+              onPointerDown={(e) => startDrag(axis, e)}
+              onPointerMove={onDragMove}
+              onPointerUp={onDragEnd}
+              onPointerCancel={onDragEnd}
+            />
+            <line
+              x1={originScreen.x}
+              y1={originScreen.y}
+              x2={tip.x}
+              y2={tip.y}
+              stroke={colour}
+              strokeWidth={3}
+              strokeLinecap="round"
+              markerEnd={`url(#gizmo-arrow-${axis})`}
+              pointerEvents="none"
+            />
+          </g>
+        );
+      })}
+
+      {/* Origin handle — small dot that hints "this is what you're moving". */}
+      <circle
+        cx={originScreen.x}
+        cy={originScreen.y}
+        r={4}
+        fill="#fff"
+        stroke="#71717a"
+        strokeWidth={1.5}
+        pointerEvents="none"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,225 @@
+/* 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/. */
+
+/**
+ * Numeric input panel for the Split tool. Mounted by ToolOverlays
+ * alongside SplitOverlay while `activeTool === 'split'`. Surfaces
+ * a small floating input near the hover preview that lets the user
+ * type a precise distance (metres) or percent (0..100) instead of
+ * relying on cursor positioning.
+ *
+ * Renders only for the single-click element types (wall, beam,
+ * column, member) — slabs use a two-click cut line that doesn't
+ * map to a single scalar. The panel disappears between hovers so
+ * it doesn't compete with the cursor.
+ *
+ * Behaviour:
+ *
+ *   - Tab into the panel from anywhere (or Cmd+/ to focus) and
+ *     type a number; the live preview updates as you type.
+ *   - Enter commits at the typed distance (or, if blank, at the
+ *     current cursor distance — same as a click).
+ *   - Esc returns focus to the canvas without committing.
+ *   - Quick snap buttons: 25% / 50% / 75% jump the distance to
+ *     fractions of the element length — common gesture and the
+ *     panel stays useful even without numeric input.
+ *
+ * The panel is positioned next to the cursor via cameraCallbacks
+ * .projectToScreen(splitHoverPoint); it tracks the camera the same
+ * way SplitOverlay does, via splitHoverPoint updates.
+ */
+
+import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from 'react';
+import { useViewerStore } from '@/store';
+import { toast } from '@/components/ui/toast';
+
+const ACCENT = '#a855f7'; // purple-500
+const PANEL_OFFSET_PX = 32;
+
+export function SplitNumericInput() {
+  const activeTool = useViewerStore((s) => s.activeTool);
+  const splitMode = useViewerStore((s) => s.splitMode);
+  const splitHoverPoint = useViewerStore((s) => s.splitHoverPoint);
+  const splitHoverDistance = useViewerStore((s) => s.splitHoverDistance);
+  const splitHoverLength = useViewerStore((s) => s.splitHoverLength);
+  const splitTargetModelId = useViewerStore((s) => s.splitTargetModelId);
+  const splitTargetExpressId = useViewerStore((s) => s.splitTargetExpressId);
+  const projectToScreen = useViewerStore((s) => s.cameraCallbacks.projectToScreen);
+  const splitWallAtDistance = useViewerStore((s) => s.splitWallAtDistance);
+  const splitLinearElementAtDistance = useViewerStore((s) => s.splitLinearElementAtDistance);
+  const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+  const clearSplitHover = useViewerStore((s) => s.clearSplitHover);
+
+  const [inputValue, setInputValue] = useState('');
+  const [inputMode, setInputMode] = useState<'metres' | 'percent'>('metres');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // Reset the input whenever the target wall changes — sticky
+  // input across targets would be confusing.
+  useEffect(() => {
+    setInputValue('');
+  }, [splitTargetExpressId]);
+
+  // Only render in the single-click element flow. Slab two-click
+  // flow has its own pathway (no scalar input).
+  const eligible =
+    activeTool === 'split' &&
+    splitMode === 'aiming' &&
+    splitHoverPoint !== null &&
+    splitHoverLength !== null &&
+    splitHoverLength > 0;
+  if (!eligible || !projectToScreen) return null;
+
+  const cutScreen = projectToScreen({
+    x: splitHoverPoint[0],
+    y: splitHoverPoint[1],
+    z: splitHoverPoint[2],
+  });
+  if (!cutScreen) return null;
+
+  const commitAt = (distance: number) => {
+    if (splitTargetModelId === null || splitTargetExpressId === null) return;
+    if (!Number.isFinite(distance) || distance <= 0 || distance >= splitHoverLength) {
+      toast.error(`Distance must be between 0 and ${splitHoverLength.toFixed(2)} m`);
+      return;
+    }
+    const wallTry = splitWallAtDistance(splitTargetModelId, splitTargetExpressId, distance);
+    if (wallTry.ok) {
+      clearSplitHover();
+      setSelectedEntityId(wallTry.right.globalId);
+      const op = wallTry.openings;
+      const opSummary =
+        op.toLeft + op.toRight > 0
+          ? ` (${op.toLeft + op.toRight} opening${op.toLeft + op.toRight === 1 ? '' : 's'} reassigned)`
+          : '';
+      toast.success(`Wall split${opSummary} — Ctrl+Z to undo`);
+      return;
+    }
+    const linearTry = splitLinearElementAtDistance(splitTargetModelId, splitTargetExpressId, distance);
+    if (linearTry.ok) {
+      clearSplitHover();
+      setSelectedEntityId(linearTry.right.globalId);
+      toast.success('Element split — Ctrl+Z to undo');
+      return;
+    }
+    const reason = linearTry.ok === false ? linearTry.reason : wallTry.reason;
+    toast.error(`Couldn't split: ${reason}`);
+  };
+
+  const parsedDistance = (): number => {
+    const raw = parseFloat(inputValue);
+    if (!Number.isFinite(raw)) return splitHoverDistance ?? 0;
+    return inputMode === 'metres' ? raw : (raw / 100) * (splitHoverLength ?? 0);
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitAt(parsedDistance());
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      (e.target as HTMLInputElement).blur();
+      // Move focus back to the viewport canvas so keyboard
+      // shortcuts (K, R, V, …) keep working — without this, the
+      // input field still has focus from the browser's
+      // perspective and global keyboard listeners ignore the
+      // event because it's targeted at the input.
+      const canvas = document.querySelector<HTMLElement>('[data-viewport="main"]');
+      canvas?.focus();
+    }
+  };
+
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const snapTo = (fraction: number) => {
+    commitAt(fraction * (splitHoverLength ?? 0));
+  };
+
+  return (
+    <div
+      className="absolute z-30 pointer-events-auto"
+      style={{
+        left: cutScreen.x + PANEL_OFFSET_PX,
+        top: cutScreen.y + PANEL_OFFSET_PX,
+      }}
+    >
+      <div
+        className="bg-white dark:bg-zinc-900 border-2 shadow-lg rounded-md
+          flex flex-col gap-1.5 p-2 text-xs"
+        style={{ borderColor: ACCENT, minWidth: 200 }}
+      >
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => setInputMode('metres')}
+            className={`px-2 py-0.5 rounded text-[10px] font-mono uppercase
+              ${inputMode === 'metres'
+                ? 'bg-purple-600 text-white'
+                : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400'}`}
+          >
+            m
+          </button>
+          <button
+            type="button"
+            onClick={() => setInputMode('percent')}
+            className={`px-2 py-0.5 rounded text-[10px] font-mono uppercase
+              ${inputMode === 'percent'
+                ? 'bg-purple-600 text-white'
+                : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400'}`}
+          >
+            %
+          </button>
+          <span className="flex-1" />
+          <span className="text-[10px] font-mono text-zinc-500">
+            of {splitHoverLength?.toFixed(2)}m
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <input
+            ref={inputRef}
+            type="number"
+            step="any"
+            value={inputValue}
+            placeholder={
+              inputMode === 'metres'
+                ? splitHoverDistance?.toFixed(2)
+                : (((splitHoverDistance ?? 0) / (splitHoverLength ?? 1)) * 100).toFixed(1)
+            }
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            className="flex-1 px-2 py-1 border border-zinc-300 dark:border-zinc-700
+              bg-white dark:bg-zinc-950 text-xs font-mono rounded
+              focus:outline-none focus:ring-1 focus:ring-purple-500"
+          />
+          <button
+            type="button"
+            onClick={() => commitAt(parsedDistance())}
+            className="px-2 py-1 bg-purple-600 text-white text-[10px]
+              font-medium rounded hover:bg-purple-700"
+          >
+            Cut
+          </button>
+        </div>
+        <div className="flex items-center gap-1 text-[10px]">
+          <span className="text-zinc-500">Snap</span>
+          {[0.25, 0.5, 0.75].map((f) => (
+            <button
+              key={f}
+              type="button"
+              onClick={() => snapTo(f)}
+              className="px-1.5 py-0.5 rounded
+                bg-zinc-100 dark:bg-zinc-800
+                hover:bg-purple-100 dark:hover:bg-purple-950
+                text-zinc-700 dark:text-zinc-300 font-mono"
+            >
+              {(f * 100).toFixed(0)}%
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}