fix(3D rendering): disabled light sliders when shade is off (#4631)

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx

@@ -5,6 +5,7 @@ export function VolumeLighting({
   servicesManager,
   commandsManager,
   viewportId,
+  hasShade,
 }: VolumeLightingProps): ReactElement {
   const { cornerstoneViewportService } = servicesManager.services;
   const [ambient, setAmbient] = useState(null);
@@ -38,9 +39,13 @@ export function VolumeLighting({
     setDiffuse(diffuse);
     setSpecular(specular);
   }, [viewportId, cornerstoneViewportService]);
+  const disableOption = hasShade ? '' : 'ohif-disabled !opacity-40';
+  const disableSlider = !hasShade;
   return (
     <>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
+      <div
+        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
+      >
         <label
           className="block text-white"
           htmlFor="ambient"
@@ -56,6 +61,7 @@ export function VolumeLighting({
               onAmbientChange();
             }}
             id="ambient"
+            disabled={disableSlider}
             max={1}
             min={0}
             type="range"
@@ -68,7 +74,9 @@ export function VolumeLighting({
           />
         )}
       </div>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
+      <div
+        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
+      >
         <label
           className="block text-white"
           htmlFor="diffuse"
@@ -83,6 +91,7 @@ export function VolumeLighting({
               setDiffuse(e.target.value);
               onDiffuseChange();
             }}
+            disabled={disableSlider}
             id="diffuse"
             max={1}
             min={0}
@@ -97,7 +106,9 @@ export function VolumeLighting({
         )}
       </div>
 
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
+      <div
+        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
+      >
         <label
           className="block text-white"
           htmlFor="specular"
@@ -108,6 +119,7 @@ export function VolumeLighting({
           <input
             className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
             value={specular}
+            disabled={disableSlider}
             onChange={e => {
               setSpecular(e.target.value);
               onSpecularChange();

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingOptions.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { AllInOneMenu } from '@ohif/ui';
 import { VolumeRenderingOptionsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingQuality } from './VolumeRenderingQuality';
@@ -11,6 +11,7 @@ export function VolumeRenderingOptions({
   volumeRenderingQualityRange,
   servicesManager,
 }: VolumeRenderingOptionsProps): ReactElement {
+  const [hasShade, setShade] = useState(false);
   return (
     <AllInOneMenu.ItemPanel>
       <VolumeRenderingQuality
@@ -34,12 +35,14 @@ export function VolumeRenderingOptions({
           commandsManager={commandsManager}
           servicesManager={servicesManager}
           viewportId={viewportId}
+          onClickShade={setShade}
         />
       </div>
       <VolumeLighting
         viewportId={viewportId}
         commandsManager={commandsManager}
         servicesManager={servicesManager}
+        hasShade={hasShade}
       />
     </AllInOneMenu.ItemPanel>
   );

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShade.tsx

@@ -6,6 +6,7 @@ export function VolumeShade({
   commandsManager,
   viewportId,
   servicesManager,
+  onClickShade = bool => {},
 }: VolumeShadeProps): ReactElement {
   const { cornerstoneViewportService } = servicesManager.services;
   const [shade, setShade] = useState(true);
@@ -22,6 +23,7 @@ export function VolumeShade({
     const { actor } = viewport.getActors()[0];
     const shade = actor.getProperty().getShade();
     setShade(shade);
+    onClickShade(shade);
     setKey(key + 1);
   }, [viewportId, cornerstoneViewportService]);
 
@@ -32,6 +34,7 @@ export function VolumeShade({
       checked={shade}
       onChange={() => {
         setShade(!shade);
+        onClickShade(!shade);
         onShadeChange(!shade);
       }}
     />

extensions/cornerstone/src/types/ViewportPresets.ts

@@ -57,10 +57,12 @@ export type VolumeShadeProps = {
   viewportId: string;
   commandsManager: CommandsManager;
   servicesManager: AppTypes.ServicesManager;
+  onClickShade?: (bool: boolean) => void;
 };
 
 export type VolumeLightingProps = {
   viewportId: string;
   commandsManager: CommandsManager;
   servicesManager: AppTypes.ServicesManager;
+  hasShade: boolean;
 };