Fixed bug where layer slider in gcode viewer was broken

2026-09-29 18:51:43 +02:00 · 2025-12-16 12:35:53 +01:00
parent c8b9a8e3d6
commit e248b41fad
3 changed files with 95 additions and 80 deletions
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { WebGLPreview, init } from 'gcode-preview';
 import { Loader2, Layers, ChevronLeft, ChevronRight, FileWarning } from 'lucide-react';

@@ -18,6 +18,7 @@ interface GcodeViewerProps {
 export function GcodeViewer({ gcodeUrl, buildVolume = { x: 256, y: 256, z: 256 }, filamentColors, className = '' }: GcodeViewerProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const previewRef = useRef<WebGLPreview | null>(null);
+  const renderTimeoutRef = useRef<number | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [notSliced, setNotSliced] = useState(false);
@@ -134,17 +135,31 @@ export function GcodeViewer({ gcodeUrl, buildVolume = { x: 256, y: 256, z: 256 }

    return () => {
      window.removeEventListener('resize', handleResize);
+      if (renderTimeoutRef.current) {
+        cancelAnimationFrame(renderTimeoutRef.current);
+      }
      preview.dispose();
    };
  }, [gcodeUrl, buildVolume, filamentColors]);

-  const handleLayerChange = (layer: number) => {
+  // Debounce render to prevent freezing when dragging slider
+  const handleLayerChange = useCallback((layer: number) => {
    if (!previewRef.current) return;
    const newLayer = Math.max(1, Math.min(layer, totalLayers));
    setCurrentLayer(newLayer);
-    // Clear and re-render up to the specified layer
-    previewRef.current.render();
-  };
+
+    // Debounce the actual render to avoid freezing
+    if (renderTimeoutRef.current) {
+      cancelAnimationFrame(renderTimeoutRef.current);
+    }
+
+    renderTimeoutRef.current = requestAnimationFrame(() => {
+      if (previewRef.current) {
+        previewRef.current.endLayer = newLayer;
+        previewRef.current.render();
+      }
+    });
+  }, [totalLayers]);

  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    handleLayerChange(parseInt(e.target.value, 10));
@@ -23,7 +23,7 @@

    <!-- Splash screens for iOS -->
    <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-RbSkJqNe.js"></script>
+    <script type="module" crossorigin src="/assets/index-CaUem_u2.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CbCN6LSA.css">
  </head>
  <body>