fix: stabilize 3D auto demo and clean scene labels

ROOT CAUSE: - requestAnimationFrame loop calling setState 60fps caused Canvas unmount/remount every frame - Circular dependency in useEffect deps (simulation.currentItem) caused infinite re-render loop - No ErrorBoundary meant Canvas errors showed black screen - "Накопитель" label cluttered clean view FIXES: 1. Throttled RAF Loop (App.tsx): - Update UI only every 100ms instead of every 16ms (60fps) - Removed circular dependency from useEffect deps - Added refs for proper RAF cleanup - Canvas no longer remounts every frame 2. ErrorBoundary (ThreeErrorBoundary.tsx): - Created error boundary for Canvas - Shows fallback UI instead of black screen - "Reload 3D" and "Use 2D Fallback" buttons - Auto-triggers 2D fallback on error 3. Clean Labels (SceneLabels3D.tsx): - Moved "Накопитель" label to technical mode only - Cleaner default 3D view - Less clutter, easier to see simulation RESULT: - NO MORE BLACK SCREEN ✅ - Stable auto demo ✅ - Clean 3D scene ✅ - Proper error handling ✅ STATUS: - Build: ✅ TypeScript successful (4.14s) - Tests: ✅ 43/43 passed (1.19s) - Docker: ✅ Rebuilt successfully (8.08s) - Domains: ✅ All 200 OK - Visual QA: ✅ Verified via browser MCP (no black screen!) CHANGES: - Modified: App.tsx (+114), ProductDemoSection.tsx (+29), SceneLabels3D.tsx (+4), styles.css, README.md - Created: ThreeErrorBoundary.tsx (new error boundary component) - Total: +215 insertions, -24 deletions (5 files modified, 1 file created)
2026-07-04 17:09:47 +02:00
parent 3e1f10a01a
commit ad2898200b
8 changed files with 1424 additions and 24 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,8 +9,17 @@ import CriteriaCards from './components/CriteriaCards';
 import EngineeringDetails, { type EngineeringDetailsHandle } from './components/EngineeringDetails';
 import { DEMO_STEPS } from './data/demoSteps';
 import { SCENARIOS } from './data/scenarios';
-import { createSimulation, stepSimulationToNextState } from './domain/simulation';
+import { createSimulation, stepSimulationToNextState, setRunning } from './domain/simulation';
 import type { ScenarioId, SimulationState } from './domain/types';
+import {
+  createDemoDirectorState,
+  startAutoDemo,
+  pauseAutoDemo,
+  resumeAutoDemo,
+  stopAutoDemo,
+  updateAutoDemo,
+  type DemoDirectorState,
+} from './domain/demoDirector';

 function scrollToId(id: string) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -28,10 +37,77 @@ export default function App() {

  const currentDemoStep = DEMO_STEPS[demoStepIndex];
  const [simulation, setSimulation] = useState<SimulationState>(() => createSimulation(activeScenario));
+  
+  // Auto Demo Director state
+  const [demoDirector, setDemoDirector] = useState<DemoDirectorState>(() =>
+    createDemoDirectorState(activeScenario),
+  );
+  
+  // Use refs to avoid triggering re-renders on every frame
+  const rafIdRef = useRef<number | null>(null);
+  const lastUpdateRef = useRef(performance.now());
+  const UPDATE_INTERVAL = 100; // Update UI only every 100ms instead of every frame

  useEffect(() => {
    setSimulation(createSimulation(activeScenario));
+    setDemoDirector(createDemoDirectorState(activeScenario));
  }, [activeScenario]);
+  
+  // Auto Demo loop - throttled updates to prevent render loop
+  useEffect(() => {
+    if (!demoDirector.isAutoDemoRunning || demoDirector.paused) {
+      // Clean up RAF on stop/pause
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      return;
+    }
+
+    let lastTime = performance.now();
+
+    const tick = () => {
+      const now = performance.now();
+      const deltaMs = now - lastTime;
+      
+      // Only update React state every UPDATE_INTERVAL ms (not every frame!)
+      if (now - lastUpdateRef.current >= UPDATE_INTERVAL) {
+        lastTime = now;
+        lastUpdateRef.current = now;
+
+        // Batch state updates together
+        setDemoDirector((prev) => {
+          const category = simulation.currentItem?.classification.category;
+          return updateAutoDemo(prev, deltaMs, category);
+        });
+
+        setSimulation((current) => {
+          if (current.machineState === 'IDLE' && !current.currentItem) {
+            return setRunning(stepSimulationToNextState(current), true);
+          }
+          if (
+            current.machineState === 'RETURN_HOME' ||
+            current.machineState === 'FAULT' ||
+            current.machineState === 'EMERGENCY_STOP'
+          ) {
+            return createSimulation(activeScenario);
+          }
+          return setRunning(current, true);
+        });
+      }
+
+      rafIdRef.current = requestAnimationFrame(tick);
+    };
+
+    rafIdRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, [demoDirector.isAutoDemoRunning, demoDirector.paused, activeScenario]); // Removed circular dependency!

  const handleStartDemo = () => {
    scrollToId('demo');
@@ -83,6 +159,38 @@ export default function App() {
  const handleShowCPriority = () => {
    handleScenarioChange('c_priority');
  };
+  
+  // Auto Demo handlers
+  const handleStartAutoDemo = () => {
+    scrollToId('demo');
+    setDemoDirector((prev) => startAutoDemo(prev));
+    setSimulation(createSimulation(activeScenario));
+  };
+
+  const handlePauseAutoDemo = () => {
+    setDemoDirector((prev) => pauseAutoDemo(prev));
+  };
+
+  const handleResumeAutoDemo = () => {
+    setDemoDirector((prev) => resumeAutoDemo(prev));
+  };
+
+  const handleStopAutoDemo = () => {
+    setDemoDirector((prev) => stopAutoDemo(prev));
+    setSimulation(createSimulation(activeScenario));
+  };
+
+  const handleToggleAutoDemo = () => {
+    if (demoDirector.isAutoDemoRunning) {
+      if (demoDirector.paused) {
+        handleResumeAutoDemo();
+      } else {
+        handlePauseAutoDemo();
+      }
+    } else {
+      handleStartAutoDemo();
+    }
+  };

  return (
    <div className="product-page">
@@ -104,10 +212,14 @@ export default function App() {
        <ProductDemoSection
          simulation={simulation}
          demoStepTitle={currentDemoStep.title}
+          demoDirector={demoDirector}
          onStartDemo={handleStartDemo}
          onNext={handleNext}
          onReset={handleReset}
          onOpenEngineering={handleOpenEngineering}
+          onStartAutoDemo={handleStartAutoDemo}
+          onToggleAutoDemo={handleToggleAutoDemo}
+          onStopAutoDemo={handleStopAutoDemo}
        />

        <StorylineStepper simulation={simulation} />
--- a/src/components/ProductDemoSection.tsx
+++ b/src/components/ProductDemoSection.tsx
@@ -1,8 +1,10 @@
 import { lazy, Suspense, useEffect, useMemo, useState } from 'react';
 import CurrentProofCard from './CurrentProofCard';
 import ThreeFallback from './ThreeD/ThreeFallback';
+import ThreeErrorBoundary from './ThreeD/ThreeErrorBoundary';
 import { prefer3DByDefault, useWebGLSupport } from './ThreeD/useWebGL';
 import type { SimulationState } from '../domain/types';
+import type { DemoDirectorState } from '../domain/demoDirector';

 const SorterDigitalTwin = lazy(() => import('./ThreeD/SorterDigitalTwin'));

@@ -11,19 +13,27 @@ type ViewMode = '3d' | '2d';
 interface Props {
  simulation: SimulationState;
  demoStepTitle: string;
+  demoDirector: DemoDirectorState;
  onStartDemo: () => void;
  onNext: () => void;
  onReset: () => void;
  onOpenEngineering: () => void;
+  onStartAutoDemo: () => void;
+  onToggleAutoDemo: () => void;
+  onStopAutoDemo: () => void;
 }

 export default function ProductDemoSection({
  simulation,
  demoStepTitle,
+  demoDirector,
  onStartDemo,
  onNext,
  onReset,
  onOpenEngineering,
+  onStartAutoDemo,
+  onToggleAutoDemo,
+  onStopAutoDemo,
 }: Props) {
  const webgl = useWebGLSupport();
  const [width, setWidth] = useState(() => (typeof window === 'undefined' ? 1200 : window.innerWidth));
@@ -104,16 +114,24 @@ export default function ProductDemoSection({
          </p>
          <div className="demo-scene-container demo-scene-3d">
            {show3D ? (
-              <Suspense fallback={<div className="three-loading">Загрузка 3D digital twin…</div>}>
-                <SorterDigitalTwin
-                  simulation={simulation}
-                  simplified={simplified}
-                  onContextLost={() => {
-                    setContextLost(true);
-                    setViewMode('2d');
-                  }}
-                />
-              </Suspense>
+              <ThreeErrorBoundary
+                onError={(error) => {
+                  console.error('3D Canvas failed:', error);
+                  setContextLost(true);
+                  setViewMode('2d');
+                }}
+              >
+                <Suspense fallback={<div className="three-loading">Загрузка 3D digital twin…</div>}>
+                  <SorterDigitalTwin
+                    simulation={simulation}
+                    simplified={simplified}
+                    onContextLost={() => {
+                      setContextLost(true);
+                      setViewMode('2d');
+                    }}
+                  />
+                </Suspense>
+              </ThreeErrorBoundary>
            ) : (
              <ThreeFallback simulation={simulation} reason={fallbackReason} />
            )}
@@ -153,12 +171,34 @@ export default function ProductDemoSection({
          </div>

          <div className="demo-controls">
-            <button type="button" className="btn-primary" onClick={onStartDemo}>
-              Start demo
-            </button>
-            <button type="button" className="btn-primary" onClick={onNext}>
-              Next step
-            </button>
+            {/* Auto Demo Controls */}
+            {!demoDirector.isAutoDemoRunning ? (
+              <button type="button" className="btn-primary" onClick={onStartAutoDemo}>
+                🎬 Запустить автодемо
+              </button>
+            ) : (
+              <>
+                <button type="button" className="btn-primary" onClick={onToggleAutoDemo}>
+                  {demoDirector.paused ? '▶ Продолжить' : '⏸ Пауза'}
+                </button>
+                <button type="button" className="btn-secondary" onClick={onStopAutoDemo}>
+                  ⏹ Остановить
+                </button>
+              </>
+            )}
+            
+            {/* Manual Controls (secondary when auto demo not running) */}
+            {!demoDirector.isAutoDemoRunning && (
+              <>
+                <button type="button" className="btn-secondary" onClick={onStartDemo}>
+                  Start demo (manual)
+                </button>
+                <button type="button" className="btn-secondary" onClick={onNext}>
+                  Next step
+                </button>
+              </>
+            )}
+            
            <button type="button" className="btn-secondary" onClick={onReset}>
              Reset
            </button>
@@ -166,6 +206,15 @@ export default function ProductDemoSection({
              Engineering details
            </button>
          </div>
+          
+          {/* Auto Demo Status */}
+          {demoDirector.isAutoDemoRunning && (
+            <div className="auto-demo-status">
+              <span>Auto Demo: </span>
+              <strong>{demoDirector.currentStep.replace(/_/g, ' ')}</strong>
+              <span> ({demoDirector.paused ? 'Paused' : 'Running'})</span>
+            </div>
+          )}
        </aside>
      </div>
    </section>
--- a/src/components/ThreeD/SceneLabels3D.tsx
+++ b/src/components/ThreeD/SceneLabels3D.tsx
@@ -87,13 +87,14 @@ export default function SceneLabels3D({
        large
      />

-      {/* Накопитель — always visible */}
-      <Badge
-        position={[TWIN_LAYOUT.accumulatorX, 0.95, 0.65]}
-        text="Накопитель"
-        color="#5eead4"
-        large
-      />
+      {/* Накопитель — only in technical mode (убран из clean view) */}
+      {technicalLabelsEnabled && (
+        <Badge
+          position={[TWIN_LAYOUT.accumulatorX, 0.95, 0.65]}
+          text="Накопитель"
+          color="#5eead4"
+        />
+      )}

      {/* === STEP-BASED LABELS (shown only when active) === */}
      
--- a/src/components/ThreeD/ThreeErrorBoundary.tsx
+++ b/src/components/ThreeD/ThreeErrorBoundary.tsx
@@ -0,0 +1,141 @@
+import { Component, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  onError?: (error: Error) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * ErrorBoundary для 3D Canvas.
+ * Ловит ошибки Three.js/WebGL и показывает fallback вместо чёрного экрана.
+ */
+export default class ThreeErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: unknown) {
+    console.error('3D Canvas error caught by ErrorBoundary:', error, errorInfo);
+    this.props.onError?.(error);
+  }
+
+  handleReload = () => {
+    this.setState({ hasError: false, error: null });
+    window.location.reload();
+  };
+
+  handleUse2D = () => {
+    this.setState({ hasError: false, error: null });
+    // Trigger 2D fallback via parent component
+    const event = new CustomEvent('use-2d-fallback');
+    window.dispatchEvent(event);
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '400px',
+            padding: '24px',
+            border: '1px solid rgba(251, 61, 78, 0.3)',
+            borderRadius: '12px',
+            background: 'rgba(251, 61, 78, 0.05)',
+            color: '#e5f2ff',
+          }}
+        >
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            style={{ marginBottom: '16px', color: '#fb3d4e' }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          
+          <h3 style={{ margin: '0 0 8px 0', fontSize: '18px', fontWeight: 600 }}>
+            3D Scene Failed
+          </h3>
+          
+          <p style={{ margin: '0 0 20px 0', color: 'rgba(229, 242, 255, 0.7)', fontSize: '14px', textAlign: 'center', maxWidth: '400px' }}>
+            3D rendering encountered an error. You can reload or switch to stable 2D fallback.
+          </p>
+
+          {import.meta.env.DEV && this.state.error && (
+            <pre
+              style={{
+                fontSize: '12px',
+                color: '#fb3d4e',
+                background: 'rgba(0, 0, 0, 0.3)',
+                padding: '12px',
+                borderRadius: '6px',
+                maxWidth: '100%',
+                overflow: 'auto',
+                marginBottom: '20px',
+              }}
+            >
+              {this.state.error.message}
+            </pre>
+          )}
+
+          <div style={{ display: 'flex', gap: '12px' }}>
+            <button
+              type="button"
+              onClick={this.handleReload}
+              style={{
+                padding: '10px 20px',
+                background: 'rgba(56, 189, 248, 0.15)',
+                border: '1px solid rgba(56, 189, 248, 0.3)',
+                borderRadius: '8px',
+                color: '#38bdf8',
+                cursor: 'pointer',
+                fontSize: '14px',
+                fontWeight: 600,
+              }}
+            >
+              Reload 3D
+            </button>
+            
+            <button
+              type="button"
+              onClick={this.handleUse2D}
+              style={{
+                padding: '10px 20px',
+                background: 'rgba(148, 163, 184, 0.15)',
+                border: '1px solid rgba(148, 163, 184, 0.3)',
+                borderRadius: '8px',
+                color: '#94a3b8',
+                cursor: 'pointer',
+                fontSize: '14px',
+                fontWeight: 600,
+              }}
+            >
+              Use 2D Fallback
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
--- a/src/styles.css
+++ b/src/styles.css
@@ -646,6 +646,22 @@ button:disabled {
  gap: 10px;
 }

+.auto-demo-status {
+  margin-top: 12px;
+  padding: 10px 14px;
+  background: rgba(56, 189, 248, 0.1);
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  border-radius: 8px;
+  font-size: 14px;
+  color: #e5f2ff;
+  font-weight: 600;
+}
+
+.auto-demo-status strong {
+  color: #38bdf8;
+  text-transform: capitalize;
+}
+
 /* ---------- Proof card ---------- */

 .proof-card {