@ifc-lite/viewer 1.17.4 → 1.18.0

package/src/components/viewer/schedule/useGanttBarDrag.ts

@@ -0,0 +1,305 @@
+/* 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/. */
+
+/**
+ * useGanttBarDrag — direct-manipulation for task bars.
+ *
+ * Three drag modes:
+ *   • `shift` (body) — moves start+finish together, duration unchanged.
+ *   • `resize-start` (left edge) — anchors finish, updates start (and
+ *     therefore duration).
+ *   • `resize-finish` (right edge) — anchors start, updates finish
+ *     (and therefore duration).
+ *
+ * Snaps the live-dragged delta to a scale-appropriate unit (hour /
+ * day / week) unless the user holds Shift. Pointer capture keeps the
+ * drag alive outside the SVG. Esc aborts and restores the task to
+ * pre-drag state via `abortScheduleTransaction`.
+ *
+ * Transaction semantics: one `beginScheduleTransaction` at pointerdown
+ * means a 60-frame drag lands in the undo stack as ONE entry. End /
+ * abort close the window so the next edit opens a new entry.
+ *
+ * Playback: if the user was animating, we pause at drag start so the
+ * animator's hidden-id recompute doesn't fight the live `updateTaskTime`
+ * calls, then resume on successful release. Aborts don't resume (Esc
+ * is a rollback of everything the user did, including any implicit
+ * state changes).
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { useViewerStore } from '@/store';
+import type { GanttTimeScale, ScheduleTimeRange } from '@/store';
+
+export type BarDragMode = 'shift' | 'resize-start' | 'resize-finish';
+
+/** Snap granularity per timeline scale, in milliseconds. */
+const SNAP_MS_BY_SCALE: Record<GanttTimeScale, number> = {
+  hour: 15 * 60 * 1000,              // 15 minutes
+  day: 60 * 60 * 1000,               //  1 hour
+  week: 24 * 60 * 60 * 1000,         //  1 day
+  month: 24 * 60 * 60 * 1000,        //  1 day
+  year: 7 * 24 * 60 * 60 * 1000,     //  1 week
+};
+
+/** Snap `ms` to the nearest multiple of `unit`. `ms` is a delta, not an epoch.
+ *
+ *  Normalises negative zero to +0 — `Math.round(-0.4) === -0`, and -0 * X
+ *  stays -0 in JS, which then surfaces as a weird `-PT0S` duration in
+ *  downstream serialisers. The `|| 0` falls through for exact zero and
+ *  is a no-op for any finite non-zero result. */
+export function snapDeltaMs(deltaMs: number, unit: number): number {
+  if (unit <= 0) return deltaMs;
+  return (Math.round(deltaMs / unit) * unit) || 0;
+}
+
+/** Pixels per millisecond from the timeline's width and time span. */
+export function pxPerMs(pixelWidth: number, range: ScheduleTimeRange): number {
+  const span = range.end - range.start;
+  if (span <= 0 || pixelWidth <= 0) return 0;
+  return pixelWidth / span;
+}
+
+/** Convert epoch ms → ISO-8601 UTC with seconds (no ms), matching the parser. */
+function epochToIso(ms: number): string {
+  const d = new Date(ms);
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return (
+    `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T` +
+    `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`
+  );
+}
+
+function parseIso(iso?: string): number | undefined {
+  if (!iso) return undefined;
+  const hasTz = /Z$|[+-]\d{2}:?\d{2}$/.test(iso);
+  const t = Date.parse(hasTz ? iso : `${iso}Z`);
+  return Number.isNaN(t) ? undefined : t;
+}
+
+/** Milliseconds → ISO-8601 duration (same shape the animator / exporter emit). */
+function msToIsoDuration(ms: number): string {
+  const clamped = Math.max(0, Math.round(ms));
+  if (clamped === 0) return 'PT0S';
+  const days = Math.floor(clamped / 86_400_000);
+  const remAfterDays = clamped - days * 86_400_000;
+  const hours = Math.floor(remAfterDays / 3_600_000);
+  const remAfterHours = remAfterDays - hours * 3_600_000;
+  const mins = Math.floor(remAfterHours / 60_000);
+  let out = 'P';
+  if (days > 0) out += `${days}D`;
+  if (hours > 0 || mins > 0) {
+    out += 'T';
+    if (hours > 0) out += `${hours}H`;
+    if (mins > 0) out += `${mins}M`;
+  }
+  return out === 'P' ? 'P0D' : out;
+}
+
+interface DragSession {
+  taskGlobalId: string;
+  mode: BarDragMode;
+  /** Pointer screen-X where the drag started. */
+  startClientX: number;
+  /** Pixel-to-ms conversion captured at pointerdown — stays stable for the
+   *  whole drag even if the viewport resizes mid-drag (user would expect
+   *  the dragged bar to track the cursor, not re-scale). */
+  pxPerMs: number;
+  /** Original times so abort / resize anchors are authoritative. */
+  originalStartMs: number;
+  originalFinishMs: number;
+  /** Resume playback on release if it was on at begin. */
+  resumePlayback: boolean;
+  /** Live preview values so the floating tooltip can render without a
+   *  store round-trip on every mousemove frame. */
+  liveStartMs: number;
+  liveFinishMs: number;
+}
+
+export interface BarDragLive {
+  /** globalId of the task currently being dragged, or null if none. */
+  taskGlobalId: string | null;
+  mode: BarDragMode | null;
+  liveStartMs: number;
+  liveFinishMs: number;
+}
+
+export interface UseGanttBarDragOptions {
+  range: ScheduleTimeRange | null;
+  pixelWidth: number;
+  scale: GanttTimeScale;
+}
+
+export interface UseGanttBarDragResult {
+  /** Call on pointerdown on a bar or its edge hit-zone. */
+  onPointerDown: (
+    e: React.PointerEvent<SVGElement>,
+    taskGlobalId: string,
+    mode: BarDragMode,
+  ) => void;
+  /** Live drag state — render the floating tooltip from this. */
+  live: BarDragLive;
+}
+
+export function useGanttBarDrag(opts: UseGanttBarDragOptions): UseGanttBarDragResult {
+  const { range, pixelWidth, scale } = opts;
+  const sessionRef = useRef<DragSession | null>(null);
+  const [live, setLive] = useState<BarDragLive>({
+    taskGlobalId: null, mode: null, liveStartMs: 0, liveFinishMs: 0,
+  });
+
+  const endDrag = useCallback((commit: boolean) => {
+    const sess = sessionRef.current;
+    if (!sess) return;
+    const store = useViewerStore.getState();
+    if (commit) {
+      store.endScheduleTransaction();
+      if (sess.resumePlayback) store.playSchedule();
+    } else {
+      store.abortScheduleTransaction();
+      // Abort is a full rollback; don't resume playback even if it was
+      // on at begin — user may have hit Esc specifically because the
+      // animation was running and they wanted to stop editing.
+    }
+    sessionRef.current = null;
+    setLive({ taskGlobalId: null, mode: null, liveStartMs: 0, liveFinishMs: 0 });
+  }, []);
+
+  // Global handlers — attached once per session on pointerdown,
+  // detached on up / cancel / esc. Using window-level handlers (not
+  // React's pointermove on the svg) means a drag that exits the
+  // timeline bounds still tracks the cursor.
+  const onPointerMove = useCallback((e: PointerEvent) => {
+    const sess = sessionRef.current;
+    if (!sess) return;
+    const rawDelta = (e.clientX - sess.startClientX) / (sess.pxPerMs || 1);
+    // Shift disables snap for precise placement.
+    const unit = e.shiftKey ? 1 : (SNAP_MS_BY_SCALE[scale] ?? 60_000);
+    const snapped = snapDeltaMs(rawDelta, unit);
+
+    let liveStart = sess.originalStartMs;
+    let liveFinish = sess.originalFinishMs;
+    switch (sess.mode) {
+      case 'shift':
+        liveStart = sess.originalStartMs + snapped;
+        liveFinish = sess.originalFinishMs + snapped;
+        break;
+      case 'resize-start':
+        liveStart = sess.originalStartMs + snapped;
+        // Guard: start can't cross finish. Clamp to finish - 1 snap unit.
+        if (liveStart >= sess.originalFinishMs) {
+          liveStart = sess.originalFinishMs - unit;
+        }
+        break;
+      case 'resize-finish':
+        liveFinish = sess.originalFinishMs + snapped;
+        if (liveFinish <= sess.originalStartMs) {
+          liveFinish = sess.originalStartMs + unit;
+        }
+        break;
+    }
+
+    sess.liveStartMs = liveStart;
+    sess.liveFinishMs = liveFinish;
+
+    // Commit to the store — the transaction open at begin means this
+    // fires 60 times a second but lands as ONE undo entry.
+    const store = useViewerStore.getState();
+    store.updateTaskTime(sess.taskGlobalId, {
+      scheduleStart: epochToIso(liveStart),
+      scheduleFinish: epochToIso(liveFinish),
+      scheduleDuration: msToIsoDuration(liveFinish - liveStart),
+    });
+
+    setLive({
+      taskGlobalId: sess.taskGlobalId,
+      mode: sess.mode,
+      liveStartMs: liveStart,
+      liveFinishMs: liveFinish,
+    });
+  }, [scale]);
+
+  const onPointerUp = useCallback(() => {
+    detach();
+    endDrag(true);
+  }, [endDrag]);
+
+  const onPointerCancel = useCallback(() => {
+    detach();
+    endDrag(false);
+  }, [endDrag]);
+
+  const onKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      detach();
+      endDrag(false);
+    }
+  }, [endDrag]);
+
+  function detach() {
+    window.removeEventListener('pointermove', onPointerMove);
+    window.removeEventListener('pointerup', onPointerUp);
+    window.removeEventListener('pointercancel', onPointerCancel);
+    window.removeEventListener('keydown', onKeyDown);
+  }
+
+  const onPointerDown = useCallback((
+    e: React.PointerEvent<SVGElement>,
+    taskGlobalId: string,
+    mode: BarDragMode,
+  ) => {
+    if (!range || pixelWidth <= 0) return;
+    // Only primary button — avoid right-click hijack.
+    if (e.button !== 0) return;
+    const store = useViewerStore.getState();
+    const task = store.scheduleData?.tasks.find(t => t.globalId === taskGlobalId);
+    if (!task) return;
+    const origStart = parseIso(task.taskTime?.scheduleStart);
+    const origFinish = parseIso(task.taskTime?.scheduleFinish);
+    if (origStart === undefined || origFinish === undefined) return;
+    // Don't try to resize a zero-width bar: shift-only instead. Also
+    // milestones should never hit this path (caller gates them out) but
+    // we defend anyway.
+    if (origFinish <= origStart && mode !== 'shift') return;
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    const ratio = pxPerMs(pixelWidth, range);
+    const resumePlayback = store.playbackIsPlaying;
+    if (resumePlayback) store.pauseSchedule();
+
+    // Open a single undo transaction for the whole gesture.
+    const label =
+      mode === 'shift' ? 'Drag task'
+      : mode === 'resize-start' ? 'Resize task start'
+      : 'Resize task finish';
+    store.beginScheduleTransaction(label);
+
+    sessionRef.current = {
+      taskGlobalId,
+      mode,
+      startClientX: e.clientX,
+      pxPerMs: ratio,
+      originalStartMs: origStart,
+      originalFinishMs: origFinish,
+      resumePlayback,
+      liveStartMs: origStart,
+      liveFinishMs: origFinish,
+    };
+
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+    window.addEventListener('pointercancel', onPointerCancel);
+    window.addEventListener('keydown', onKeyDown);
+
+    setLive({
+      taskGlobalId, mode,
+      liveStartMs: origStart, liveFinishMs: origFinish,
+    });
+  }, [range, pixelWidth, onPointerMove, onPointerUp, onPointerCancel, onKeyDown]);
+
+  return { onPointerDown, live };
+}

package/src/components/viewer/schedule/useGanttSelection3DHighlight.ts

@@ -0,0 +1,152 @@
+/* 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/. */
+
+/**
+ * useGanttSelection3DHighlight — selecting Gantt row(s) **highlights** their
+ * products in the 3D viewport. No isolation, no hiding, no color overlay —
+ * purely the renderer's existing selection-highlight channel
+ * (`selectedEntityIds`), which paints a blue fresnel on top of whatever the
+ * object already looks like and leaves visibility untouched.
+ *
+ * This means:
+ *   • The 4D animator's `hiddenIds` / color overlays run completely
+ *     undisturbed during playback — the highlight only applies to whatever
+ *     is *currently visible* in that frame, because hidden entities aren't
+ *     drawn at all.
+ *   • Clearing the Gantt selection restores whatever viewport selection
+ *     the user had before we wrote. Ownership is tracked in a ref so a
+ *     user 3D-click in between is never clobbered on teardown.
+ *   • Unmount (Gantt panel closed) and schedule reload also restore.
+ *
+ * One-way only: viewport → Gantt sync is intentionally NOT implemented
+ * here. Simpler mental model: "I clicked a Gantt row → I see my task in
+ * 3D." Nothing else.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useViewerStore, toGlobalIdFromModels } from '@/store';
+import { resolveScheduleSourceModelId } from '@/store/slices/schedule-edit-helpers';
+import { collectProductLocalIdsForTasks } from './schedule-selection';
+
+interface OwnedHighlight {
+  /** Global IDs we wrote as viewport selection. */
+  owned: Set<number>;
+  /** User's viewport selection before we took over. Restored on clear. */
+  prior: Set<number>;
+  priorPrimary: number | null;
+}
+
+export function useGanttSelection3DHighlight(): void {
+  const scheduleData = useViewerStore(s => s.scheduleData);
+  const selectedTaskGlobalIds = useViewerStore(s => s.selectedTaskGlobalIds);
+
+  /** What we last wrote + the user's prior selection. null = we don't own. */
+  const ownedRef = useRef<OwnedHighlight | null>(null);
+
+  useEffect(() => {
+    const store = useViewerStore.getState();
+
+    /**
+     * Returns true iff the current viewport selection is byte-for-byte the
+     * set we last wrote. If the user has clicked in 3D since, we lost
+     * ownership and must not clobber their choice on teardown.
+     */
+    const weStillOwn = (owned: Set<number>): boolean => {
+      const current = store.selectedEntityIds;
+      if (current.size !== owned.size) return false;
+      for (const id of owned) if (!current.has(id)) return false;
+      return true;
+    };
+
+    const restorePrior = () => {
+      const owned = ownedRef.current;
+      if (!owned) return;
+      if (weStillOwn(owned.owned)) {
+        // Restore the user's prior selection (often empty — the common case).
+        store.setSelectedEntityIds(Array.from(owned.prior));
+        if (owned.priorPrimary !== null) {
+          store.setSelectedEntityId(owned.priorPrimary);
+        }
+      }
+      ownedRef.current = null;
+    };
+
+    // ── Gantt selection empty → release ownership and restore ─────────
+    if (!scheduleData || selectedTaskGlobalIds.size === 0) {
+      restorePrior();
+      return;
+    }
+
+    // ── Compute global IDs for every descendant product ───────────────
+    const localIds = collectProductLocalIdsForTasks(scheduleData, selectedTaskGlobalIds);
+    if (localIds.size === 0) {
+      // Selected tasks own no products — treat as "nothing to highlight"
+      // and restore rather than stranding the user with a stale highlight.
+      restorePrior();
+      return;
+    }
+
+    const models = store.models;
+    const activeModelId = store.activeModelId;
+    const sourceModelId = resolveScheduleSourceModelId(models, activeModelId);
+
+    const globalIds = new Set<number>();
+    for (const local of localIds) {
+      globalIds.add(toGlobalIdFromModels(models, sourceModelId, local));
+    }
+
+    // ── First write: capture the user's prior selection so we can restore ──
+    if (ownedRef.current === null) {
+      ownedRef.current = {
+        owned: globalIds,
+        prior: new Set(store.selectedEntityIds),
+        priorPrimary: store.selectedEntityId,
+      };
+      store.setSelectedEntityIds(Array.from(globalIds));
+      return;
+    }
+
+    // ── Subsequent writes: update only if the set actually changed ────
+    const prevOwned = ownedRef.current.owned;
+    let same = prevOwned.size === globalIds.size;
+    if (same) {
+      for (const id of globalIds) if (!prevOwned.has(id)) { same = false; break; }
+    }
+    if (!same) {
+      // Only overwrite if we still own — otherwise a user 3D-click took
+      // priority and we shouldn't clobber it. If they then change the
+      // Gantt selection again, we simply take ownership from scratch.
+      if (weStillOwn(prevOwned)) {
+        ownedRef.current = { ...ownedRef.current, owned: globalIds };
+        store.setSelectedEntityIds(Array.from(globalIds));
+      } else {
+        ownedRef.current = {
+          owned: globalIds,
+          prior: new Set(store.selectedEntityIds),
+          priorPrimary: store.selectedEntityId,
+        };
+        store.setSelectedEntityIds(Array.from(globalIds));
+      }
+    }
+  }, [scheduleData, selectedTaskGlobalIds]);
+
+  // Unmount teardown — release if we still own the selection.
+  useEffect(() => {
+    return () => {
+      const owned = ownedRef.current;
+      if (!owned) return;
+      const store = useViewerStore.getState();
+      const current = store.selectedEntityIds;
+      const stillOwn = current.size === owned.owned.size
+        && [...owned.owned].every(id => current.has(id));
+      if (stillOwn) {
+        store.setSelectedEntityIds(Array.from(owned.prior));
+        if (owned.priorPrimary !== null) {
+          store.setSelectedEntityId(owned.priorPrimary);
+        }
+      }
+      ownedRef.current = null;
+    };
+  }, []);
+}

package/src/components/viewer/schedule/useOverlayCompositor.ts

@@ -0,0 +1,108 @@
+/* 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/. */
+
+/**
+ * useOverlayCompositor — reconciles the registered overlay layers into the
+ * renderer's legacy channels (`hiddenEntities`, `pendingColorUpdates`).
+ *
+ * Responsibility split after P4:
+ *   • Layer owners (animation, future: gantt-selection, lens, user-isolation)
+ *     call `registerOverlayLayer(...)` / `removeOverlayLayer(id)` to declare
+ *     their desired contribution. They do NOT write to the legacy channels.
+ *   • This hook is the SINGLE writer to those legacy channels. It watches
+ *     the overlay registry, computes the composite, and writes a delta.
+ *
+ * Ownership tracking lives here exactly once — previously duplicated as
+ * `contributedHiddenRef` / `contributedColorsRef` inside every consumer.
+ *
+ * This hook must be mounted high in the viewer tree so it runs throughout
+ * the session. Mount it alongside the root viewport or the Gantt panel.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useViewerStore } from '@/store';
+
+export function useOverlayCompositor(): void {
+  // Each entry is a GLOBAL id we hid; flag = "was already hidden by user
+  // when we took over". On restore we only un-hide ids where `false`.
+  const contributedHiddenRef = useRef<Map<number, boolean>>(new Map());
+  // Global ids we last wrote as colour overrides. Used to know when we
+  // need to issue a clear (`setPendingColorUpdates(new Map())`).
+  const contributedColorsRef = useRef<Set<number>>(new Set());
+
+  const overlayLayers = useViewerStore((s) => s.overlayLayers);
+
+  useEffect(() => {
+    const store = useViewerStore.getState();
+
+    // Build composite hiddenIds + colorOverrides from the current layers.
+    // `composeLayers` is a pure function — the hook decides when to rerun.
+    const { hiddenIds: nextHidden, colorOverrides: nextColors } = store.computeCompositeOverlay();
+
+    // ── Reconcile hidden set ──────────────────────────────────────────
+    //
+    // Compare the new hidden set against what we last wrote, not against
+    // the store's current `hiddenEntities` (which includes user-isolated
+    // ids we don't own). `contributedHiddenRef` maps each id we last hid
+    // to a boolean: "was the user already hiding this before we wrote?".
+    // On restore, only un-hide ids whose flag is false.
+    const prev = contributedHiddenRef.current;
+    const toShow: number[] = [];
+    for (const [id, wasHidden] of prev) {
+      if (!nextHidden.has(id) && wasHidden === false) toShow.push(id);
+    }
+    const toHide: number[] = [];
+    const nextHiddenMap = new Map<number, boolean>();
+    const currentlyHidden = store.hiddenEntities ?? new Set<number>();
+    for (const id of nextHidden) {
+      if (prev.has(id)) {
+        // We still want this id hidden AND we already wrote it — preserve
+        // the "was already hidden" bit so we un-hide correctly later.
+        nextHiddenMap.set(id, prev.get(id)!);
+      } else {
+        // First time we see this id. Capture whether the user already had
+        // it hidden so we won't unhide their choice on teardown.
+        const wasHidden = currentlyHidden.has(id);
+        nextHiddenMap.set(id, wasHidden);
+        if (!wasHidden) toHide.push(id);
+      }
+    }
+    if (toShow.length > 0) store.showEntities(toShow);
+    if (toHide.length > 0) store.hideEntities(toHide);
+    contributedHiddenRef.current = nextHiddenMap;
+
+    // ── Reconcile colour overrides ────────────────────────────────────
+    //
+    // Colour overrides are all-or-nothing per call: `setPendingColorUpdates`
+    // replaces the full map. When the composite is empty and we had
+    // contributions, signal a clear with `new Map()`.
+    if (nextColors.size > 0) {
+      store.setPendingColorUpdates(nextColors);
+      contributedColorsRef.current = new Set(nextColors.keys());
+    } else if (contributedColorsRef.current.size > 0) {
+      store.setPendingColorUpdates(new Map());
+      contributedColorsRef.current = new Set();
+    }
+  }, [overlayLayers]);
+
+  // Unmount cleanup — restore every id we own, clear our colour overrides.
+  // Happens once at app teardown in practice.
+  useEffect(() => {
+    return () => {
+      const store = useViewerStore.getState();
+      if (contributedHiddenRef.current.size > 0) {
+        const toShow: number[] = [];
+        for (const [id, wasHidden] of contributedHiddenRef.current) {
+          if (wasHidden === false) toShow.push(id);
+        }
+        if (toShow.length > 0) store.showEntities(toShow);
+        contributedHiddenRef.current = new Map();
+      }
+      if (contributedColorsRef.current.size > 0) {
+        store.setPendingColorUpdates(new Map());
+        contributedColorsRef.current = new Set();
+      }
+    };
+  }, []);
+}