Merge branch 'main' of https://gitea.mysuperlab.netcraze.pro/Danilka/Art-gallery

2026-07-22 23:14:09 +03:00
parent cc39c2b138 5ddc3fd7f0
commit 77befd94b2
482 changed files with 19800 additions and 1037 deletions
@@ -1,4 +1,5 @@
-import { useRef, useState, useEffect, useMemo, Suspense, useCallback } from 'react';
+import { useRef, useState, useEffect, useMemo, Suspense, useCallback, createContext, useContext, Component } from 'react';
+import type { ReactNode } from 'react';
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { Text, Environment } from '@react-three/drei';
 import * as THREE from 'three';
@@ -9,8 +10,9 @@ import type {
  ArtistPeriod,
  ArtistNavigation,
  MovementArtistGroup,
+  TourGalleryDetail,
 } from '../types';
-import { galleryImageUrlWithRevision, imageUrl, api, preloadArtistImages } from '../api/client';
+import { galleryImageUrlWithRevision, imageUrl, api } from '../api/client';
 import { comparePaintingsChronological, paintingHasInfluenceLinks, paintingWallCaption } from '../utils/paintingUtils';
 import { cloneSurfaceTexture, getSurfaceTexture } from '../utils/galleryProceduralTextures';
 import { resolveMovementInteriorStyle, type MovementInteriorStyle, type GalleryWindowSpec } from '../data/movement-interior-styles';
@@ -24,6 +26,36 @@ import {
  type MovementHallLayout,
 } from '../utils/movementHallLayout';
 import './VirtualGallery.css';
+import GalleryLoadingMarker from './GalleryLoadingMarker';
+
+const GalleryTextureLoadContext = createContext<{
+  begin: () => void;
+  end: () => void;
+} | null>(null);
+
+/**
+ * Keeps a single failing subtree (e.g. the network-loaded HDR environment map)
+ * from unmounting the whole 3D scene and leaving a dark window.
+ */
+class SceneErrorBoundary extends Component<
+  { children: ReactNode; fallback?: ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown) {
+    console.warn('Gallery scene subtree failed, continuing without it.', error);
+  }
+
+  render() {
+    if (this.state.hasError) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+}

 interface BaseGalleryProps {
  imageRevisions?: Record<number, number>;
@@ -44,7 +76,12 @@ interface MovementGalleryProps extends BaseGalleryProps {
  data: MovementGalleryDetail;
 }

-type Props = ArtistGalleryProps | MovementGalleryProps;
+interface TourGalleryProps extends BaseGalleryProps {
+  mode: 'tour';
+  data: TourGalleryDetail;
+}
+
+type Props = ArtistGalleryProps | MovementGalleryProps | TourGalleryProps;

 const WALL_HEIGHT = 4.2;
 const WALL_THICKNESS = 0.18;
@@ -66,9 +103,6 @@ const MAX_FRAME_H = 1.35;
 const MIN_HALL_SIZE = 9;
 const ROW_GAP = 0.2;
 const WALL_PADDING = 1.4;
-/** Above this count, use a long corridor (short back wall, extended side walls). */
-const CORRIDOR_CATALOG_THRESHOLD = 15;
-const BACK_WALL_MAX_PAINTINGS = 8;
 /** Every wall shows at most one row; side-wall depth grows to fit the catalog. */
 const MAX_WALL_ROWS = 1;
 const DOOR_WIDTH = 2.4;
@@ -259,36 +293,18 @@ function minSpanForWall(paintings: Painting[], maxRows: number = paintings.lengt
  return Math.max(MIN_HALL_SIZE, best);
 }

-/** Left → right on each wall: later works on the left, earlier works on the right. */
-function orderPaintingsForWallDisplay(paintings: Painting[]) {
-  return [...paintings].sort(comparePaintingsChronological).reverse();
-}
-
+/**
+ * Visit order along the side walls: first half on the left (starting at the
+ * entrance, left of the opening view), second half on the right (ending at the
+ * entrance). Back wall stays empty so first/last always sit on left/right.
+ */
 function distributePaintingsAcrossWalls(paintings: Painting[]) {
-  const sorted = [...paintings].sort(comparePaintingsChronological);
-  const back: Painting[] = [];
-  const left: Painting[] = [];
-  const right: Painting[] = [];
-
-  if (sorted.length <= CORRIDOR_CATALOG_THRESHOLD) {
-    sorted.forEach((p, i) => {
-      if (i % 3 === 0) back.push(p);
-      else if (i % 3 === 1) left.push(p);
-      else right.push(p);
-    });
-  } else {
-    const backCount = Math.min(BACK_WALL_MAX_PAINTINGS, Math.max(4, Math.ceil(sorted.length * 0.12)));
-    back.push(...sorted.slice(0, backCount));
-    sorted.slice(backCount).forEach((p, i) => {
-      if (i % 2 === 0) left.push(p);
-      else right.push(p);
-    });
-  }
-
+  const ordered = [...paintings].sort(comparePaintingsChronological);
+  const mid = Math.ceil(ordered.length / 2);
  return [
-    orderPaintingsForWallDisplay(back),
-    orderPaintingsForWallDisplay(left),
-    orderPaintingsForWallDisplay(right),
+    [] as Painting[],
+    ordered.slice(0, mid),
+    ordered.slice(mid),
  ];
 }

@@ -346,12 +362,13 @@ function layoutWallSlots(
          position: [s.offset, y, -halfD + inset + WALL_STANDOFF + BACK_WALL_EXTRA],
        });
      } else if (side === 'left') {
+        // Flip along-wall offset so index 0 is at the entrance (+Z), left of view.
        slots.push({
          maxW: s.maxW,
          maxH: s.maxH,
          rotationY: Math.PI / 2,
          side,
-          position: [-halfW + inset + WALL_STANDOFF, y, s.offset],
+          position: [-halfW + inset + WALL_STANDOFF, y, -s.offset],
        });
      } else {
        slots.push({
@@ -550,6 +567,7 @@ function CanvasCover({
 function usePaintingTexture(url: string | null) {
  const [texture, setTexture] = useState<THREE.Texture | null>(null);
  const [failed, setFailed] = useState(!url);
+  const textureLoad = useContext(GalleryTextureLoadContext);

  useEffect(() => {
    if (!url) {
@@ -561,11 +579,21 @@ function usePaintingTexture(url: string | null) {
    setFailed(false);
    let disposed = false;
    let loaded: THREE.Texture | null = null;
+    let settled = false;
    const loader = new THREE.TextureLoader();
    loader.setCrossOrigin('anonymous');
+
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      textureLoad?.end();
+    };
+
+    textureLoad?.begin();
    loader.load(
      url,
      (tex) => {
+        finish();
        if (disposed) {
          tex.dispose();
          return;
@@ -583,16 +611,18 @@ function usePaintingTexture(url: string | null) {
      },
      undefined,
      () => {
+        finish();
        if (!disposed) setFailed(true);
      }
    );

    return () => {
      disposed = true;
+      finish();
      loaded?.dispose();
      setTexture(null);
    };
-  }, [url]);
+  }, [url, textureLoad]);

  return { texture, failed };
 }
@@ -1488,6 +1518,14 @@ function levelHorizontalView(pos: THREE.Vector3, target: THREE.Vector3) {
  target.y = EYE_HEIGHT;
 }

+function FrameloopSync({ active }: { active: boolean }) {
+  const { invalidate } = useThree();
+  useEffect(() => {
+    if (active) invalidate();
+  }, [active, invalidate]);
+  return null;
+}
+
 function CameraController({
  position,
  target,
@@ -1638,16 +1676,38 @@ export default function VirtualGallery(props: Props) {
  } = props;

  const isMovement = props.mode === 'movement';
-  const hallKey = isMovement ? props.data.movement.id : props.data.artist.id;
-  const hallTitle = isMovement ? props.data.movement.name : props.data.artist.name;
-  const movementColor = isMovement ? props.data.movement.color : props.data.artist.movement_color;
+  const isTour = props.mode === 'tour';
+  const isWingedHall = isMovement || isTour;
+  const hallKey = isTour
+    ? props.data.tour.id
+    : isMovement
+      ? props.data.movement.id
+      : props.data.artist.id;
+  const hallTitle = isTour
+    ? props.data.tour.title
+    : isMovement
+      ? props.data.movement.name
+      : props.data.artist.name;
+  const movementColor = isTour
+    ? DEFAULT_MOVEMENT_COLOR
+    : isMovement
+      ? props.data.movement.color
+      : props.data.artist.movement_color;
  const initialPaintings = useMemo(() => {
    if (props.mode === 'movement') {
      return [...props.data.paintings].sort(comparePaintingsChronological);
    }
    return props.data.paintings;
-  }, [props]);
-  const initialPeriods = isMovement ? [] : props.data.periods;
+  }, [
+    props.mode,
+    props.mode === 'tour'
+      ? props.data.tour.id
+      : props.mode === 'movement'
+        ? props.data.movement.id
+        : props.data.artist.id,
+    props.data.paintings,
+  ]);
+  const initialPeriods = props.mode === 'artist' ? props.data.periods : [];

  const [paintings, setPaintings] = useState(initialPaintings);
  const [periods, setPeriods] = useState(initialPeriods);
@@ -1658,6 +1718,44 @@ export default function VirtualGallery(props: Props) {
  const [nearExit, setNearExit] = useState(false);
  const [nearPassage, setNearPassage] = useState(false);
  const [isLooking, setIsLooking] = useState(false);
+  const [texturesPending, setTexturesPending] = useState(0);
+  const [canvasReady, setCanvasReady] = useState(false);
+  const [glEpoch, setGlEpoch] = useState(0);
+  const [glLost, setGlLost] = useState(false);
+
+  const textureLoad = useMemo(
+    () => ({
+      begin: () => setTexturesPending((n) => n + 1),
+      end: () => setTexturesPending((n) => Math.max(0, n - 1)),
+    }),
+    []
+  );
+
+  const handleCanvasCreated = useCallback((state: { gl: THREE.WebGLRenderer }) => {
+    const canvas = state.gl.domElement;
+    // A freshly created canvas has a healthy context, so clear any lingering
+    // "restoring" state from a previous loss/remount.
+    setGlLost(false);
+    setCanvasReady(true);
+    const onLost = (event: Event) => {
+      // Prevent the default so the browser can restore the context, and
+      // force a clean remount to obtain a fresh WebGL context if it does not.
+      event.preventDefault();
+      setGlLost(true);
+      window.setTimeout(() => {
+        setGlLost((stillLost) => {
+          if (stillLost) setGlEpoch((n) => n + 1);
+          return stillLost;
+        });
+      }, 600);
+    };
+    const onRestored = () => {
+      setGlLost(false);
+      setGlEpoch((n) => n + 1);
+    };
+    canvas.addEventListener('webglcontextlost', onLost as EventListener, false);
+    canvas.addEventListener('webglcontextrestored', onRestored as EventListener, false);
+  }, []);

  useEffect(() => {
    setPaintings(initialPaintings);
@@ -1675,32 +1773,13 @@ export default function VirtualGallery(props: Props) {
      return;
    }

-    let cancelled = false;
-    const artistId = props.data.artist.id;
-    (async () => {
-      try {
-        setSyncStatus('Syncing images…');
-        const timeout = new Promise<void>((resolve) => setTimeout(resolve, 2000));
-        await Promise.race([preloadArtistImages(artistId), timeout]);
-        const fresh = await api.getArtist(artistId);
-        if (!cancelled) {
-          setPaintings(fresh.paintings);
-          setPeriods(fresh.periods);
-          const withImg = fresh.paintings.filter((p) => p.image_path || p.thumbnail_path).length;
-          setSyncStatus(
-            withImg < fresh.paintings.length
-              ? `${withImg} of ${fresh.paintings.length} works have images`
-              : ''
-          );
-        }
-      } catch {
-        if (!cancelled) setSyncStatus('');
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [hallKey, props.mode, initialPaintings.length, props.mode === 'artist' ? props.data.artist.id : null]);
+    const withImg = initialPaintings.filter((p) => p.image_path || p.thumbnail_path).length;
+    setSyncStatus(
+      withImg < initialPaintings.length
+        ? `${withImg} of ${initialPaintings.length} works have images`
+        : ''
+    );
+  }, [hallKey, props.mode, initialPaintings]);

  const interiorStyle = useMemo(
    () => (isMovement ? resolveMovementInteriorStyle(props.data.movement) : undefined),
@@ -1708,8 +1787,8 @@ export default function VirtualGallery(props: Props) {
  );

  const movementHalls = useMemo(
-    () => (isMovement ? buildAllMovementHallLayouts(paintings) : []),
-    [isMovement, paintings]
+    () => (isWingedHall ? buildAllMovementHallLayouts(paintings) : []),
+    [isWingedHall, paintings]
  );

  const [hallIndex, setHallIndex] = useState(0);
@@ -1719,18 +1798,26 @@ export default function VirtualGallery(props: Props) {
  }, [hallKey]);

  const layout = useMemo(() => {
-    if (isMovement && movementHalls.length > 0) {
+    if (isWingedHall && movementHalls.length > 0) {
      return movementHalls[Math.min(hallIndex, movementHalls.length - 1)];
    }
    return buildHallLayout(paintings, periods);
-  }, [isMovement, movementHalls, hallIndex, paintings, periods]);
+  }, [isWingedHall, movementHalls, hallIndex, paintings, periods]);
+
+  const gallerySceneLoading = active && !glLost && (!canvasReady || texturesPending > 0);
+
+  const galleryLoadingMessage = !canvasReady
+    ? 'Loading gallery…'
+    : texturesPending > 0
+      ? 'Loading paintings…'
+      : 'Loading gallery…';

  const computedWindows = useMemo(() => {
    if (!isMovement || !interiorStyle || !('hallIndex' in layout)) return undefined;
    return computeSideWallWindows(layout as MovementHallLayout, interiorStyle);
  }, [isMovement, interiorStyle, layout]);

-  const hasNextHall = isMovement && movementHalls.length > 1 && hallIndex < movementHalls.length - 1;
+  const hasNextHall = isWingedHall && movementHalls.length > 1 && hallIndex < movementHalls.length - 1;

  const halfW = layout.width / 2 - 0.55;
  const halfD = layout.depth / 2 - 0.35;
@@ -1790,7 +1877,7 @@ export default function VirtualGallery(props: Props) {
  }, [hallKey, initialPos, initialTarget]);

  const openExitNav = useCallback(async () => {
-    if (isMovement) {
+    if (isWingedHall) {
      setShowExitNav(true);
      return;
    }
@@ -1804,9 +1891,9 @@ export default function VirtualGallery(props: Props) {
    } finally {
      setNavLoading(false);
    }
-  }, [isMovement, onBack, isMovement ? undefined : props.data.artist.id]);
+  }, [isWingedHall, onBack, !isWingedHall ? props.data.artist.id : undefined]);

-  const backExitZ = isMovement ? -layout.depth / 2 + 0.55 : layout.depth / 2 - 0.55;
+  const backExitZ = isWingedHall ? -layout.depth / 2 + 0.55 : layout.depth / 2 - 0.55;
  const frontPassageZ = layout.depth / 2 - 0.55;

  const moveCamera = useCallback(
@@ -1831,7 +1918,7 @@ export default function VirtualGallery(props: Props) {
      pos.x = Math.max(-halfW, Math.min(halfW, pos.x));
      target.x = Math.max(-halfW, Math.min(halfW, target.x));

-      if (isMovement) {
+      if (isWingedHall) {
        pos.z = Math.max(-halfD, Math.min(halfD, pos.z));
        target.z = Math.max(-halfD, Math.min(halfD, target.z));
        const atBackExit = pos.z < backExitZ + 0.8 && Math.abs(pos.x) < DOOR_WIDTH / 2 + 0.6;
@@ -1851,7 +1938,7 @@ export default function VirtualGallery(props: Props) {
      setCamPos(pos);
      setCamTarget(target);
    },
-    [halfW, halfD, exitZ, isMovement, backExitZ, frontPassageZ, hasNextHall]
+    [halfW, halfD, exitZ, isWingedHall, backExitZ, frontPassageZ, hasNextHall]
  );

  useEffect(() => {
@@ -1868,7 +1955,7 @@ export default function VirtualGallery(props: Props) {
    const onKeyDown = (e: KeyboardEvent) => {
      keysPressed.current.add(e.key);
      if ((e.key === 'e' || e.key === 'E') && !showExitNav) {
-        if (isMovement && nearPassage && hasNextHall) {
+        if (isWingedHall && nearPassage && hasNextHall) {
          goToNextHall();
        } else {
          openExitNav();
@@ -1896,15 +1983,19 @@ export default function VirtualGallery(props: Props) {
      window.removeEventListener('keyup', onKeyUp);
      clearInterval(interval);
    };
-  }, [active, moveCamera, showExitNav, openExitNav, isMovement, nearPassage, hasNextHall, goToNextHall]);
+  }, [active, moveCamera, showExitNav, openExitNav, isWingedHall, nearPassage, hasNextHall, goToNextHall]);

  const handleNavigate = (artistId: number) => {
-    if (isMovement) return;
+    if (isWingedHall) return;
    setShowExitNav(false);
    props.onNavigateArtist(artistId);
  };

-  const subtitle = isMovement
+  const subtitle = isTour
+    ? `Guided tour · ${paintings.length} works${
+        movementHalls.length > 1 ? ` · Wing ${hallIndex + 1}/${movementHalls.length}` : ''
+      }`
+    : isMovement
    ? interiorStyle
      ? `${interiorStyle.subtitle} · ${paintings.length} works${
          movementHalls.length > 1
@@ -1950,7 +2041,7 @@ export default function VirtualGallery(props: Props) {
    }
  };

-  const exitHint = isMovement ? (
+  const exitHint = isWingedHall ? (
    <>
      Back wall: <kbd>E</kbd> for wing navigator · Front arch: next wing
      {movementHalls.length > 1 ? ` (${hallIndex + 1}/${movementHalls.length})` : ''}
@@ -1960,11 +2051,15 @@ export default function VirtualGallery(props: Props) {
  );

  const hallSubtitle =
-    isMovement && 'yearLabel' in layout
-      ? `Wing ${hallIndex + 1} of ${movementHalls.length} · ${(layout as MovementHallLayout).yearLabel}`
+    isWingedHall && 'yearLabel' in layout
+      ? `Wing ${hallIndex + 1} of ${movementHalls.length}${
+          isMovement ? ` · ${(layout as MovementHallLayout).yearLabel}` : ''
+        }`
      : undefined;

-  const instructionsTitle = isMovement
+  const instructionsTitle = isTour
+    ? `${hallTitle} · Guided tour`
+    : isMovement
    ? interiorStyle
      ? `${hallTitle} · ${interiorStyle.label}`
      : `${hallTitle} Gallery`
@@ -1980,9 +2075,9 @@ export default function VirtualGallery(props: Props) {
        </div>
        <div className="gallery-header-meta">
          <button type="button" className="gallery-exit-btn" onClick={openExitNav}>
-            {isMovement ? 'Wings / Exit →' : 'Exit →'}
+            {isWingedHall ? 'Wings / Exit →' : 'Exit →'}
          </button>
-          {!isMovement && (
+          {!isWingedHall && (
            <button className="gallery-bio-btn" onClick={props.onBioClick}>Biography</button>
          )}
        </div>
@@ -1996,7 +2091,13 @@ export default function VirtualGallery(props: Props) {
        onPointerLeave={endCanvasDrag}
        onPointerCancel={endCanvasDrag}
      >
-        {syncStatus && (
+        {active && (gallerySceneLoading || glLost) && (
+          <GalleryLoadingMarker
+            overlay
+            message={glLost ? 'Restoring gallery…' : galleryLoadingMessage}
+          />
+        )}
+        {syncStatus && !gallerySceneLoading && !glLost && (
          <div className="gallery-loading-overlay gallery-sync-badge">
            <p>{syncStatus}</p>
          </div>
@@ -2005,10 +2106,14 @@ export default function VirtualGallery(props: Props) {
          <div className="gallery-exit-hint">{exitHint}</div>
        )}
        <Canvas
+          key={`${hallKey}-${glEpoch}`}
          shadows
          frameloop={active ? 'always' : 'never'}
+          gl={{ preserveDrawingBuffer: true, powerPreference: 'high-performance' }}
          camera={{ fov: 58, position: [0, EYE_HEIGHT, 2], near: 0.1, far: 80 }}
+          onCreated={handleCanvasCreated}
        >
+          <FrameloopSync active={active} />
          <color attach="background" args={[sceneBackground]} />
          <fog attach="fog" args={[sceneFog, 18, fogFar]} />
          <ambientLight intensity={ambientIntensity} />
@@ -2017,36 +2122,40 @@ export default function VirtualGallery(props: Props) {
            intensity={interiorStyle ? 0.85 : 0.65}
            color={interiorStyle?.sunLight ?? '#fff8f0'}
            castShadow
-            shadow-mapSize={[2048, 2048]}
+            shadow-mapSize={[1024, 1024]}
          />
-          <Suspense fallback={null}>
-            <Environment
-              preset={interiorStyle?.details === 'modern' || interiorStyle?.details === 'industrial' ? 'city' : 'warehouse'}
-              environmentIntensity={interiorStyle ? 0.35 : 0.15}
-            />
-          </Suspense>
-          <ArtistHall
+          <SceneErrorBoundary fallback={null}>
+            <Suspense fallback={null}>
+              <Environment
+                preset={interiorStyle?.details === 'modern' || interiorStyle?.details === 'industrial' ? 'city' : 'warehouse'}
+                environmentIntensity={interiorStyle ? 0.35 : 0.15}
+              />
+            </Suspense>
+          </SceneErrorBoundary>
+          <GalleryTextureLoadContext.Provider value={textureLoad}>
+            <ArtistHall
            layout={layout}
            hallTitle={hallTitle}
            hallSubtitle={hallSubtitle}
            movementColor={movementColor}
            interiorStyle={interiorStyle}
            imageRevisions={imageRevisions}
-            showCaptions={isMovement}
+            showCaptions={isWingedHall}
            onPaintingClick={onPaintingClick}
            onExitActivate={openExitNav}
            nearExit={nearExit}
-            movementMode={isMovement}
+            movementMode={isWingedHall}
            computedWindows={computedWindows}
            hasNextHall={hasNextHall}
            onNextHall={goToNextHall}
            nearPassage={nearPassage}
          />
+          </GalleryTextureLoadContext.Provider>
          <CameraController position={camPos} target={camTarget} />
        </Canvas>
      </div>

-      {!isMovement && showExitNav && (
+      {!isWingedHall && showExitNav && (
        <NavigationPanel
          navigation={navigation}
          loading={navLoading}
@@ -2055,7 +2164,7 @@ export default function VirtualGallery(props: Props) {
        />
      )}

-      {isMovement && showExitNav && (
+      {isWingedHall && showExitNav && (
        <MovementHallNavPanel
          movementName={hallTitle}
          halls={movementHalls}
@@ -2083,8 +2192,8 @@ export default function VirtualGallery(props: Props) {
            <li><kbd>A</kbd> / <kbd>←</kbd> / <kbd>Q</kbd> Turn left</li>
            <li><kbd>D</kbd> / <kbd>→</kbd> Turn right</li>
            <li>Drag on the view to look around</li>
-            <li>Click a painting to view details and influences</li>
-            {isMovement ? (
+            <li>Click a painting to view details{isTour ? ' and tour notes' : ' and influences'}</li>
+            {isWingedHall ? (
              <>
                <li>Date and artist labels appear below each frame</li>
                <li>Works hang on left &amp; right walls — up to ~55 per wing</li>