@ifc-lite/viewer 1.17.6 → 1.18.0

package/src/components/viewer/schedule/GanttEmptyState.tsx

@@ -0,0 +1,97 @@
+/* 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/. */
+
+import { Calendar, CalendarClock, CalendarPlus, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface GanttEmptyStateProps {
+  loading: boolean;
+  hasModel: boolean;
+  /** When true, the active model has a spatial hierarchy — enables the CTA. */
+  canGenerate?: boolean;
+  /** Human-readable extraction error (last parser failure), if any. */
+  extractionError?: string | null;
+  onClose?: () => void;
+  onGenerate?: () => void;
+}
+
+export function GanttEmptyState({
+  loading,
+  hasModel,
+  canGenerate,
+  extractionError,
+  onClose,
+  onGenerate,
+}: GanttEmptyStateProps) {
+  return (
+    <div className="relative h-full w-full flex flex-col items-center justify-center text-center p-8 gap-3 text-muted-foreground">
+      {onClose && (
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          className="absolute top-2 right-2"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      )}
+      <div className="relative">
+        <Calendar className="h-12 w-12" strokeWidth={1} />
+        <CalendarClock className="h-6 w-6 absolute -bottom-1 -right-1 text-primary" strokeWidth={1.5} />
+      </div>
+      {!hasModel ? (
+        <>
+          <h3 className="text-sm font-semibold text-foreground">Load a model with IfcTasks</h3>
+          <p className="text-xs max-w-sm">
+            Open an IFC file containing <span className="font-mono">IfcTask</span> or
+            <span className="font-mono"> IfcWorkSchedule</span> entities to see the construction
+            schedule here.
+          </p>
+        </>
+      ) : loading ? (
+        <p className="text-xs">Extracting schedule…</p>
+      ) : extractionError ? (
+        <>
+          <h3 className="text-sm font-semibold text-destructive">Schedule extraction failed</h3>
+          <p className="text-xs max-w-md text-muted-foreground">
+            <span className="font-mono text-destructive">{extractionError}</span>
+            <br />
+            Re-open the model or inspect the browser console for details.
+          </p>
+          {canGenerate && onGenerate && (
+            <div className="flex flex-col items-center gap-2 pt-2">
+              <Button size="sm" variant="outline" onClick={onGenerate} className="gap-2">
+                <CalendarPlus className="h-4 w-4" />
+                Generate a schedule instead
+              </Button>
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <h3 className="text-sm font-semibold text-foreground">No schedule found</h3>
+          <p className="text-xs max-w-md">
+            This model doesn&apos;t define any <span className="font-mono">IfcTask</span>,
+            <span className="font-mono"> IfcWorkSchedule</span>, or
+            <span className="font-mono"> IfcRelSequence</span> entities. The Gantt panel powers
+            itself from those entities and the products they control via
+            <span className="font-mono"> IfcRelAssignsToProcess</span>.
+          </p>
+          {canGenerate && onGenerate && (
+            <div className="flex flex-col items-center gap-2 pt-2">
+              <Button size="sm" onClick={onGenerate} className="gap-2">
+                <CalendarPlus className="h-4 w-4" />
+                Generate schedule
+              </Button>
+              <p className="text-xs text-muted-foreground max-w-xs">
+                Build a schedule by storey, building, or element-Z height slice.
+              </p>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/viewer/schedule/GanttPanel.tsx

@@ -0,0 +1,295 @@
+/* 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/. */
+
+/**
+ * GanttPanel — 4D / IfcTask Gantt chart rendered in the viewer's bottom panel.
+ *
+ * Gantt ↔ 3D: selecting task rows highlights their products in the 3D
+ * viewport via the renderer's selection-highlight channel (no isolation,
+ * no hiding — highlight only). Clearing the selection removes the
+ * highlight. The 4D animator runs completely uninterrupted either way.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { extractScheduleOnDemand } from '@ifc-lite/parser';
+import { useViewerStore } from '@/store';
+import { resolveScheduleSourceModelId } from '@/store/slices/schedule-edit-helpers';
+import { useIfc } from '@/hooks/useIfc';
+import { GanttToolbar } from './GanttToolbar';
+import { GanttTaskTree } from './GanttTaskTree';
+import { GanttTimeline } from './GanttTimeline';
+import { GanttEmptyState } from './GanttEmptyState';
+import { GenerateScheduleDialog } from './GenerateScheduleDialog';
+import { flattenTaskTree } from './schedule-utils';
+import { canGenerateScheduleFrom, resolveActiveDataStore } from './generate-schedule';
+import { useConstructionSequence } from './useConstructionSequence';
+import { useGanttSelection3DHighlight } from './useGanttSelection3DHighlight';
+import { useOverlayCompositor } from './useOverlayCompositor';
+
+interface GanttPanelProps {
+  onClose?: () => void;
+}
+
+const LEFT_PANE_WIDTH = 320;
+
+export function GanttPanel({ onClose }: GanttPanelProps) {
+  const { ifcDataStore, models, loading, activeModelId } = useIfc();
+
+  // Resolve the active model once; shared by extraction + canGenerate.
+  const activeStore = useMemo(
+    () => resolveActiveDataStore(ifcDataStore, activeModelId, models),
+    [ifcDataStore, activeModelId, models],
+  );
+
+  const {
+    scheduleData,
+    scheduleRange,
+    activeWorkScheduleId,
+    expandedTaskGlobalIds,
+    hoveredTaskGlobalId,
+    selectedTaskGlobalIds,
+    ganttTimeScale,
+    playbackTime,
+    setScheduleData,
+    toggleTaskExpanded,
+    setHoveredTaskGlobalId,
+    setSelectedTaskGlobalIds,
+    seekSchedule,
+  } = useViewerStore(useShallow(s => ({
+    scheduleData: s.scheduleData,
+    scheduleRange: s.scheduleRange,
+    activeWorkScheduleId: s.activeWorkScheduleId,
+    expandedTaskGlobalIds: s.expandedTaskGlobalIds,
+    hoveredTaskGlobalId: s.hoveredTaskGlobalId,
+    selectedTaskGlobalIds: s.selectedTaskGlobalIds,
+    ganttTimeScale: s.ganttTimeScale,
+    playbackTime: s.playbackTime,
+    setScheduleData: s.setScheduleData,
+    toggleTaskExpanded: s.toggleTaskExpanded,
+    setHoveredTaskGlobalId: s.setHoveredTaskGlobalId,
+    setSelectedTaskGlobalIds: s.setSelectedTaskGlobalIds,
+    seekSchedule: s.seekSchedule,
+  })));
+
+  /** Last schedule-extraction error message (surfaced in the empty state). */
+  const [extractionError, setExtractionError] = useState<string | null>(null);
+
+  // Extract schedule data whenever the resolved data store changes.
+  useEffect(() => {
+    if (!activeStore) {
+      if (scheduleData) setScheduleData(null);
+      setExtractionError(null);
+      return;
+    }
+    try {
+      const extraction = extractScheduleOnDemand(activeStore);
+
+      // CRITICAL guard: do NOT overwrite an in-memory user-edited /
+      // generated schedule with null just because the underlying
+      // IfcDataStore reference shifted (this effect re-runs when
+      // geometry finishes streaming, spatial hierarchy rebuilds, or
+      // any other store mutation changes the activeStore identity).
+      // Earlier revisions did `setScheduleData(hasSchedule ? extraction
+      // : null)` unconditionally, which silently wiped the generated
+      // schedule moments before the user clicked Export — leading to
+      // an exported IFC with no task entities and an empty Gantt on
+      // re-import. Only replace when the extraction actually has data,
+      // or when we've previously had no schedule in memory.
+      const s = useViewerStore.getState();
+      const hasPendingSchedule = !!s.scheduleData && s.scheduleData.tasks.length > 0
+        && (s.scheduleIsEdited || s.scheduleData.tasks.some(t => !t.expressId || t.expressId <= 0));
+      if (extraction.hasSchedule) {
+        // New extraction wins — this is the "fresh file with a real
+        // schedule" case. Any generated tail in memory is replaced;
+        // that's intentional because we can't reconcile it with a
+        // different source.
+        setScheduleData(extraction);
+      } else if (!hasPendingSchedule) {
+        // No extraction + no pending edits → fine to clear.
+        setScheduleData(null);
+      } // else: keep whatever's in memory (generated / edited).
+      setExtractionError(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.warn('[GanttPanel] Failed to extract schedule', err);
+      setScheduleData(null);
+      setExtractionError(message);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeStore]);
+
+  // Single compositor — reads the overlay-layer registry and writes the
+  // composite into the renderer's legacy hiddenEntities / pendingColorUpdates
+  // channels. Must be mounted BEFORE any layer owner in the render tree so
+  // its first reconcile can observe their initial contributions.
+  useOverlayCompositor();
+
+  // Drive the 3D viewport's hidden-entity set from the playback clock.
+  // Registers the 'animation' overlay layer; the compositor above does
+  // the actual write.
+  useConstructionSequence();
+
+  // Highlight the current Gantt selection's products in 3D. Selection-only
+  // — no visibility changes — so it never interferes with the animator.
+  useGanttSelection3DHighlight();
+
+  // Flatten task tree honoring expand/collapse state.
+  const rows = useMemo(
+    () => flattenTaskTree(scheduleData, expandedTaskGlobalIds, activeWorkScheduleId || undefined),
+    [scheduleData, expandedTaskGlobalIds, activeWorkScheduleId],
+  );
+
+  // Shared scroll position between task list and timeline (so rows line up).
+  const [scrollTop, setScrollTop] = useState(0);
+  const leftRef = useRef<HTMLDivElement>(null);
+
+  // Generate-from-storeys dialog state lives in the slice so the command
+  // palette / hotkeys can open it without going through this component.
+  const generateOpen = useViewerStore(s => s.generateScheduleDialogOpen);
+  const setGenerateOpen = useViewerStore(s => s.setGenerateScheduleDialogOpen);
+  const canGenerate = useMemo(() => {
+    // Geometry-only models (no spatial hierarchy) can still generate via
+    // the Height strategy, so surface the button whenever EITHER a
+    // spatial tree OR meshes exist on the active source model.
+    const sourceModelId = resolveScheduleSourceModelId(models, activeModelId);
+    const meshes = sourceModelId ? models.get(sourceModelId)?.geometryResult?.meshes : undefined;
+    const ctx = meshes && meshes.length > 0
+      ? { meshes, idOffset: models.get(sourceModelId!)?.idOffset ?? 0 }
+      : undefined;
+    return canGenerateScheduleFrom(activeStore, ctx);
+  }, [activeStore, activeModelId, models]);
+
+  const handleSelect = (globalId: string, multi: boolean) => {
+    const current = new Set(selectedTaskGlobalIds);
+    if (multi) {
+      // Ctrl/Shift-click — toggle membership of the clicked row.
+      if (current.has(globalId)) current.delete(globalId);
+      else current.add(globalId);
+    } else {
+      // Plain click — toggle if it's the ONLY selected row (click again to
+      // deselect), otherwise replace the selection. This is what users
+      // expect from file-manager-style rows: one click selects, same click
+      // again clears.
+      const isSoleSelection = current.size === 1 && current.has(globalId);
+      if (isSoleSelection) {
+        current.clear();
+      } else {
+        current.clear();
+        current.add(globalId);
+      }
+    }
+    setSelectedTaskGlobalIds(Array.from(current));
+  };
+
+  /**
+   * Empty-space click (task-tree background, timeline background) clears
+   * the current Gantt selection. Matches the deselect ergonomics of every
+   * other list widget and gives the user a predictable "out" that doesn't
+   * require hunting the same row again.
+   */
+  const handleBackgroundClick = () => {
+    if (selectedTaskGlobalIds.size > 0) setSelectedTaskGlobalIds([]);
+  };
+
+  const showEmpty = !scheduleData || !scheduleRange || rows.length === 0;
+
+  // Keyboard shortcuts for schedule undo/redo — active only while the
+  // Gantt panel (or a descendant) has focus, so the shortcut doesn't
+  // steal Ctrl+Z from the script editor / text inputs elsewhere.
+  const onPanelKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const mod = e.ctrlKey || e.metaKey;
+    if (!mod) return;
+    // Ignore when the user is typing into an input/textarea — the
+    // browser's own undo history is usually what they want there.
+    const target = e.target as HTMLElement | null;
+    const tag = target?.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || target?.isContentEditable) return;
+
+    if (e.key === 'z' || e.key === 'Z') {
+      e.preventDefault();
+      if (e.shiftKey) useViewerStore.getState().redoScheduleEdit();
+      else useViewerStore.getState().undoScheduleEdit();
+    } else if (e.key === 'y' || e.key === 'Y') {
+      e.preventDefault();
+      useViewerStore.getState().redoScheduleEdit();
+    }
+  };
+
+  return (
+    <div
+      className="h-full w-full flex flex-col overflow-hidden bg-background outline-none"
+      tabIndex={-1}
+      onKeyDown={onPanelKeyDown}
+    >
+      <GanttToolbar
+        onClose={onClose}
+        onOpenGenerate={() => setGenerateOpen(true)}
+        canGenerate={canGenerate}
+      />
+
+      <GenerateScheduleDialog open={generateOpen} onOpenChange={setGenerateOpen} />
+
+      {showEmpty ? (
+        <GanttEmptyState
+          loading={loading}
+          hasModel={!!ifcDataStore || models.size > 0}
+          canGenerate={canGenerate}
+          extractionError={extractionError}
+          onGenerate={() => setGenerateOpen(true)}
+          onClose={onClose}
+        />
+      ) : (
+        <div className="flex-1 min-h-0 flex">
+          <div
+            ref={leftRef}
+            style={{ width: LEFT_PANE_WIDTH, flex: `0 0 ${LEFT_PANE_WIDTH}px` }}
+            className="relative"
+          >
+            <GanttTaskTree
+              rows={rows}
+              selectedGlobalIds={selectedTaskGlobalIds}
+              hoveredGlobalId={hoveredTaskGlobalId}
+              onToggleExpand={toggleTaskExpanded}
+              onSelect={handleSelect}
+              onBackgroundClick={handleBackgroundClick}
+              onReorder={(sourceGid, targetIdx) => {
+                // The target index is the flattened-rows position of the
+                // drop target. Map to the underlying tasks-array position
+                // via the row's globalId. With a single-level tree this
+                // is 1:1; nested children align because `rows` is a flat
+                // pre-order traversal.
+                const targetGid = rows[targetIdx]?.task.globalId;
+                if (!targetGid) return;
+                const store = useViewerStore.getState();
+                const allTasks = store.scheduleData?.tasks ?? [];
+                const newIdx = allTasks.findIndex(t => t.globalId === targetGid);
+                if (newIdx >= 0) store.moveTask(sourceGid, newIdx);
+              }}
+              onHover={setHoveredTaskGlobalId}
+              scrollTop={scrollTop}
+              onScroll={setScrollTop}
+            />
+          </div>
+          <div className="flex-1 min-w-0">
+            <GanttTimeline
+              rows={rows}
+              data={scheduleData}
+              range={scheduleRange}
+              scale={ganttTimeScale}
+              playbackTime={playbackTime}
+              selectedGlobalIds={selectedTaskGlobalIds}
+              hoveredGlobalId={hoveredTaskGlobalId}
+              onSelect={handleSelect}
+              onHover={setHoveredTaskGlobalId}
+              onScrubSeek={seekSchedule}
+              scrollTop={scrollTop}
+              onScroll={setScrollTop}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/viewer/schedule/GanttTaskBar.tsx

@@ -0,0 +1,199 @@
+/* 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/. */
+
+/**
+ * GanttTaskBar — renders a single Gantt row's bar (or diamond for milestones)
+ * plus its drag hit-zones and completion overlay. Extracted from
+ * GanttTimeline so the orchestrator there stays focused on layout / ticks /
+ * cursor / arrows.
+ *
+ * Memoized on its own props so panning the playback cursor across a
+ * schedule with hundreds of rows doesn't re-diff every bar every frame.
+ */
+
+import { memo } from 'react';
+import type { ScheduleTaskInfo } from '@ifc-lite/parser';
+import { timeToX, formatDateTime } from './schedule-utils';
+import { GANTT_ROW_HEIGHT } from './GanttTaskTree';
+
+export interface GanttTaskBarProps {
+  task: ScheduleTaskInfo;
+  rowIndex: number;
+  /** Task start as epoch ms (already parsed by the parent's taskEpochs map). */
+  start: number;
+  /** Task finish as epoch ms. */
+  finish: number;
+  rangeStart: number;
+  rangeEnd: number;
+  pixelWidth: number;
+  playbackTime: number;
+  isSelected: boolean;
+  isDragging: boolean;
+  onHover: (globalId: string | null) => void;
+  onSelect: (globalId: string, multi: boolean) => void;
+  onPointerDown: (
+    e: React.PointerEvent<SVGElement>,
+    taskGlobalId: string,
+    mode: 'shift' | 'resize-start' | 'resize-finish',
+  ) => void;
+}
+
+export const GanttTaskBar = memo(function GanttTaskBar({
+  task,
+  rowIndex,
+  start,
+  finish,
+  rangeStart,
+  rangeEnd,
+  pixelWidth,
+  playbackTime,
+  isSelected,
+  isDragging,
+  onHover,
+  onSelect,
+  onPointerDown,
+}: GanttTaskBarProps) {
+  const y = rowIndex * GANTT_ROW_HEIGHT;
+  const barX = timeToX(start, rangeStart, rangeEnd, pixelWidth);
+  const barX2 = timeToX(finish, rangeStart, rangeEnd, pixelWidth);
+  const barWidth = Math.max(task.isMilestone ? 0 : 2, barX2 - barX);
+
+  const isActive = playbackTime >= start && playbackTime <= finish;
+  const isDone = playbackTime > finish;
+  const isPending = !isActive && !isDone;
+  const isCritical = task.taskTime?.isCritical ?? false;
+
+  if (task.isMilestone) {
+    const cx = barX;
+    const cy = y + GANTT_ROW_HEIGHT / 2;
+    const s = 6;
+    return (
+      <g
+        onMouseEnter={() => onHover(task.globalId)}
+        onMouseLeave={() => onHover(null)}
+        onClick={(e) => {
+          e.stopPropagation();
+          onSelect(task.globalId, e.shiftKey || e.ctrlKey || e.metaKey);
+        }}
+        className="cursor-pointer"
+      >
+        <polygon
+          points={`${cx},${cy - s} ${cx + s},${cy} ${cx},${cy + s} ${cx - s},${cy}`}
+          fill={isDone ? '#f59e0b' : isActive ? '#fbbf24' : '#94a3b8'}
+          stroke={isSelected ? '#111827' : '#713f12'}
+          strokeWidth={isSelected ? 1.5 : 1}
+        />
+        <title>
+          {task.name || task.globalId}
+          {'\n'}
+          {formatDateTime(start)}
+        </title>
+      </g>
+    );
+  }
+
+  // Edge hit zones for resize. Minimum 4 px wide so we stay
+  // clickable even on very short bars; capped at 25 % of the
+  // bar width so on bars < 20 px the whole bar becomes a shift
+  // zone (you can still resize via the Inspector).
+  const edgeZone = Math.min(8, Math.max(4, Math.floor(barWidth * 0.25)));
+  const showEdgeHandles = barWidth >= edgeZone * 2 + 4;
+  const barTop = y + 6;
+  const barH = GANTT_ROW_HEIGHT - 12;
+
+  return (
+    <g
+      onMouseEnter={() => onHover(task.globalId)}
+      onMouseLeave={() => onHover(null)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelect(task.globalId, e.shiftKey || e.ctrlKey || e.metaKey);
+      }}
+    >
+      <rect
+        x={barX}
+        y={barTop}
+        width={Math.max(2, barWidth)}
+        height={barH}
+        rx={3}
+        ry={3}
+        fill={
+          isCritical
+            ? isDone
+              ? '#dc2626'
+              : isActive
+                ? '#ef4444'
+                : '#7f1d1d'
+            : isDone
+              ? '#6366f1'
+              : isActive
+                ? '#818cf8'
+                : '#c7d2fe'
+        }
+        fillOpacity={isPending ? 0.55 : 0.95}
+        stroke={isDragging ? '#0ea5e9' : isSelected ? '#111827' : 'transparent'}
+        strokeWidth={isDragging ? 2 : isSelected ? 1.5 : 0}
+      />
+      {task.taskTime?.completion !== undefined && (
+        <rect
+          x={barX}
+          y={barTop}
+          width={Math.max(0, barWidth) * Math.min(1, Math.max(0, task.taskTime.completion / 100))}
+          height={barH}
+          rx={3}
+          ry={3}
+          fill="#111827"
+          fillOpacity={0.28}
+          pointerEvents="none"
+        />
+      )}
+      {/* Shift hit-zone: the interior of the bar. Draws no fill
+          (the visible fill rect above handles that) but owns the
+          pointer events that map to drag-body. */}
+      <rect
+        x={showEdgeHandles ? barX + edgeZone : barX}
+        y={barTop}
+        width={
+          showEdgeHandles
+            ? Math.max(1, barWidth - edgeZone * 2)
+            : Math.max(2, barWidth)
+        }
+        height={barH}
+        fill="transparent"
+        className="cursor-move"
+        onPointerDown={(e) => onPointerDown(e, task.globalId, 'shift')}
+      />
+      {/* Edge resize hit-zones. Only render when the bar is wide
+          enough for separate zones — otherwise the whole bar is
+          a shift zone and resize goes through the Inspector. */}
+      {showEdgeHandles && (
+        <>
+          <rect
+            x={barX}
+            y={barTop}
+            width={edgeZone}
+            height={barH}
+            fill="transparent"
+            className="cursor-ew-resize"
+            onPointerDown={(e) => onPointerDown(e, task.globalId, 'resize-start')}
+          />
+          <rect
+            x={barX + barWidth - edgeZone}
+            y={barTop}
+            width={edgeZone}
+            height={barH}
+            fill="transparent"
+            className="cursor-ew-resize"
+            onPointerDown={(e) => onPointerDown(e, task.globalId, 'resize-finish')}
+          />
+        </>
+      )}
+      <title>
+        {task.name || task.globalId}
+        {'\n'}
+        {formatDateTime(start)} → {formatDateTime(finish)}
+      </title>
+    </g>
+  );
+});