fix: Studio Visuals panel — background, high-res render, show cursor

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -3007,7 +3007,7 @@ function App() {
                             smoothSheetEnabled={ctrl.smoothSheetEnabled}
                             palette={colorPalette}
                             backgroundColor={
-                              (isStudioMode && recorder.session?.metadata?.settings?.backgroundColor)
+                              (isStudioMode && recorder.session?.metadata?.settings?.backgroundColor !== undefined)
                                 ? recorder.session.metadata.settings.backgroundColor
                                 : (ctrl.customBackgroundColor || (isLightMode ? 'white' : 'black'))
                             }
@@ -3057,6 +3057,16 @@ function App() {
                                 ? recorder.session.metadata.settings.ssao
                                 : settings.ssao
                             }
+                            pixelRatio={
+                              (isStudioMode && recorder.session?.metadata?.settings?.resolutionScale !== undefined)
+                                ? recorder.session.metadata.settings.resolutionScale
+                                : undefined
+                            }
+                            showCursor={
+                              isStudioMode
+                                ? (recorder.session?.metadata?.settings?.showCursor ?? true)
+                                : true
+                            }
                             resetCamera={ctrl.resetKey}
                             disableScroll={!isScrollEnabled} // Scroll Protection
 

src/components/ProteinViewer.tsx

@@ -56,6 +56,8 @@ export interface ProteinViewerProps {
     enableAmbientOcclusion?: boolean;
     smoothSheetEnabled?: boolean; // New toggle
     initialOrientation?: any; // New prop for setting start view
+    pixelRatio?: number; // High-Res Render (e.g. 2 for 2x)
+    showCursor?: boolean; // Show/hide cursor over viewer
 
 
 
@@ -193,7 +195,9 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
     isInteractive = true,
     annotations,
     onAddAnnotation,
-    remoteHoveredResidue
+    remoteHoveredResidue,
+    pixelRatio,
+    showCursor = true,
 }: ProteinViewerProps, ref: React.Ref<ProteinViewerRef>) => {
 
     const [isAlignmentOpen, setIsAlignmentOpen] = React.useState(false);
@@ -1670,6 +1674,20 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
         }
     }, [backgroundColor]);
 
+    // Apply device pixel ratio (High-Res Render)
+    useEffect(() => {
+        if (stageRef.current && pixelRatio !== undefined) {
+            stageRef.current.setParameters({ devicePixelRatio: pixelRatio });
+        }
+    }, [pixelRatio]);
+
+    // Apply cursor visibility
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.style.cursor = showCursor ? '' : 'none';
+        }
+    }, [showCursor]);
+
     useEffect(() => {
         isMounted.current = true;
         return () => { isMounted.current = false; };