Explorar el Código

界面上调整亮度和对比度时,会饮用调用本地wasm处理

dengdx hace 1 mes
padre
commit
baa2199423
Se han modificado 1 ficheros con 63 adiciones y 63 borrados
  1. 63 63
      src/pages/view/components/SliderAdjustmentPanel.tsx

+ 63 - 63
src/pages/view/components/SliderAdjustmentPanel.tsx

@@ -44,7 +44,7 @@ const { Option } = Select;
  */
 const SliderAdjustmentPanel = () => {
   const dispatch = useDispatch();
-  
+
   // 从 Redux 获取状态
   const parameters = useAppSelector(selectParameters);
   const selectedStyle = useAppSelector(selectSelectedStyle);
@@ -55,52 +55,52 @@ const SliderAdjustmentPanel = () => {
   const isInitialLoad = useAppSelector(selectIsInitialLoad);
   const error = useAppSelector(selectError);
   const currentImageId = useAppSelector(selectCurrentImageId);
-  
+
   // 获取处理模式配置
   const processingMode = useAppSelector(selectProcessingMode);
   const isWASMMode = processingMode === 'wasm';
-  
+
   // 初始化WASM SDK(仅在WASM模式下)
   const { sdk, isSDKReady, isInitializing, error: sdkError } = useImageEnhancementSDK({
     sopInstanceUid: currentImageId || '',
     enabled: isWASMMode,
   });
-  
+
   // 防抖定时器
   const saveTimerRef = useRef<NodeJS.Timeout | null>(null);
-  
+
   // 组件挂载时加载参数
   useEffect(() => {
     // 从当前选中的图像获取 sopInstanceUid
     // 
     const dcmUrls = store.getState().viewerContainer.selectedViewers;
     //正常情况下只会得到一个选中的图像,否则进入不了滑杆调参页面
-    if(dcmUrls.length !== 1){
+    if (dcmUrls.length !== 1) {
       console.error('没有选中的图像或者数量大于1,无法加载参数,异常现象');
       return;
     }
 
-    const sopInstanceUid = getSopInstanceUidFromUrl(dcmUrls[0]); 
-    
+    const sopInstanceUid = getSopInstanceUidFromUrl(dcmUrls[0]);
+
     if (sopInstanceUid) {
       dispatch(loadImageProcessingParams(sopInstanceUid) as any);
     }
   }, [dispatch]);
-  
+
   // 监听错误
   useEffect(() => {
     if (error) {
       message.error(error);
     }
   }, [error]);
-  
+
   /**
    * 返回上级面板
    */
   const handleReturn = () => {
     dispatch(switchToAdvancedProcessingPanel());
   };
-  
+
   /**
    * 传统模式:防抖更新预览图像URL
    */
@@ -110,12 +110,12 @@ const SliderAdjustmentPanel = () => {
       if (isInitialLoad) {
         return;
       }
-      
+
       // 清除之前的定时器
       if (saveTimerRef.current) {
         clearTimeout(saveTimerRef.current);
       }
-      
+
       // 设置新的定时器
       saveTimerRef.current = setTimeout(() => {
         if (currentImageId) {
@@ -127,7 +127,7 @@ const SliderAdjustmentPanel = () => {
               return;
             }
             const originalUrl = dcmUrls[0];
-            
+
             // 构建处理后的dcm URL(带参数)
             const processedUrl = buildProcessedDcmUrl(currentImageId, {
               contrast: params.contrast.toString(),
@@ -135,16 +135,16 @@ const SliderAdjustmentPanel = () => {
               latitude: params.latitude.toString(),
               noise: params.noise.toString(),
             });
-            
+
             // 更新viewer URL以触发重新渲染
             dispatch(updateViewerUrl({
               originalUrl,
               newUrl: `dicomweb:${processedUrl}`,
             }));
-            
+
             console.log('✅ [传统模式] 已更新预览图像URL:', processedUrl);
             console.log('参数:', params);
-            
+
           } catch (error) {
             console.error('更新预览图像失败:', error);
             message.error('更新预览图像失败');
@@ -154,7 +154,7 @@ const SliderAdjustmentPanel = () => {
     },
     [currentImageId, isInitialLoad, dispatch]
   );
-  
+
   /**
    * WASM模式:防抖更新预览
    */
@@ -163,24 +163,24 @@ const SliderAdjustmentPanel = () => {
       if (isInitialLoad || !sdk || !currentImageId) {
         return;
       }
-      
+
       // 清除之前的定时器
       if (saveTimerRef.current) {
         clearTimeout(saveTimerRef.current);
       }
-      
+
       // 设置新的定时器(WASM模式更短的防抖时间)
       saveTimerRef.current = setTimeout(async () => {
         try {
           console.log('🔧 [WASM模式] 开始应用参数...');
-          
+
           // 1. 更新SDK参数管理器
           sdk.parameterManager.updateParameters(params);
-          
+
           // 2. 生成唯一imageId(带时间戳强制重新加载)
           const timestamp = Date.now();
           const enhancedImageId = `${IMAGE_LOADER_PREFIX}${currentImageId}_${timestamp}`;
-          
+
           // 3. 获取原始URL
           const dcmUrls = store.getState().viewerContainer.selectedViewers;
           if (dcmUrls.length !== 1) {
@@ -188,16 +188,16 @@ const SliderAdjustmentPanel = () => {
             return;
           }
           const originalUrl = dcmUrls[0];
-          
+
           // 4. 更新viewer URL以触发重新加载
           dispatch(updateViewerUrl({
             originalUrl,
             newUrl: enhancedImageId,
           }));
-          
+
           console.log('✅ [WASM模式] WASM增强完成,图像已重新加载');
           console.log('参数:', params);
-          
+
         } catch (error) {
           console.error('❌ [WASM模式] 参数应用失败:', error);
           message.error('WASM参数应用失败');
@@ -206,18 +206,18 @@ const SliderAdjustmentPanel = () => {
     },
     [currentImageId, isInitialLoad, sdk, dispatch]
   );
-  
+
   /**
    * 参数变化处理(双模式支持)
    */
   const handleParameterChange = (name: keyof FullProcessingParams, value: number) => {
     dispatch(updateParameter({ name, value }));
-    
+
     // 触发防抖预览(仅后端参数触发预览)
     const newParams = { ...parameters, [name]: value };
-    
+
     // 只有后端参数(contrast, detail, latitude, noise)才触发预览
-    if (['contrast', 'detail', 'latitude', 'noise'].includes(name)) {
+    if (['contrast', 'detail', 'latitude', 'noise', 'brightness', 'sharpness'].includes(name)) {
       // 根据处理模式选择预览函数
       if (isWASMMode) {
         debouncedWASMPreview(newParams);
@@ -226,7 +226,7 @@ const SliderAdjustmentPanel = () => {
       }
     }
   };
-  
+
   /**
    * 风格变化处理
    */
@@ -250,28 +250,28 @@ const SliderAdjustmentPanel = () => {
       }, 100);
     }
   };
-  
+
   /**
    * 算法变化处理
    */
   const handleAlgorithmChange = (value: string) => {
     dispatch(setAlgorithm(value));
   };
-  
+
   /**
    * LUT 变化处理
    */
   const handleLUTChange = (value: LUTType) => {
     dispatch(setLUT(value));
   };
-  
+
   /**
    * 重置参数
    */
   const handleReset = () => {
     dispatch(resetToPreset());
     message.success('已重置为当前风格的默认参数');
-    
+
     // 重置后保存
     if (currentImageId) {
       setTimeout(() => {
@@ -289,7 +289,7 @@ const SliderAdjustmentPanel = () => {
       }, 100);
     }
   };
-  
+
   /**
    * 手动保存参数
    */
@@ -310,7 +310,7 @@ const SliderAdjustmentPanel = () => {
       });
     }
   };
-  
+
   // 清理定时器
   useEffect(() => {
     return () => {
@@ -319,7 +319,7 @@ const SliderAdjustmentPanel = () => {
       }
     };
   }, []);
-  
+
   return (
     <Layout className="h-full">
       {/* 顶部导航栏 */}
@@ -342,9 +342,9 @@ const SliderAdjustmentPanel = () => {
 
       {/* 主体内容 */}
       <Content
-        style={{ 
-          padding: '16px', 
-          maxHeight: '100%', 
+        style={{
+          padding: '16px',
+          maxHeight: '100%',
           overflowY: 'auto',
           position: 'relative',
         }}
@@ -353,19 +353,19 @@ const SliderAdjustmentPanel = () => {
         {isWASMMode && (
           <Alert
             message={
-              isInitializing 
-                ? "🔧 WASM模式初始化中..." 
-                : sdkError 
-                  ? "❌ WASM模式初始化失败" 
-                  : isSDKReady 
-                    ? "✅ WASM本地增强模式已启用" 
+              isInitializing
+                ? "🔧 WASM模式初始化中..."
+                : sdkError
+                  ? "❌ WASM模式初始化失败"
+                  : isSDKReady
+                    ? "✅ WASM本地增强模式已启用"
                     : "⏳ WASM模式准备中..."
             }
             description={
-              sdkError 
-                ? `错误: ${sdkError.message}。将使用传统模式。` 
-                : isSDKReady 
-                  ? "使用本地WASM算法处理16-bit原始数据,实时响应更快,质量更高。" 
+              sdkError
+                ? `错误: ${sdkError.message}。将使用传统模式。`
+                : isSDKReady
+                  ? "使用本地WASM算法处理16-bit原始数据,实时响应更快,质量更高。"
                   : "正在加载WASM模块和TIF数据..."
             }
             type={sdkError ? "error" : isSDKReady ? "success" : "info"}
@@ -373,7 +373,7 @@ const SliderAdjustmentPanel = () => {
             style={{ marginBottom: 16 }}
           />
         )}
-        
+
         {!isWASMMode && (
           <Alert
             message="📡 传统模式"
@@ -384,7 +384,7 @@ const SliderAdjustmentPanel = () => {
             style={{ marginBottom: 16 }}
           />
         )}
-        
+
         {isLoading && (
           <div
             style={{
@@ -398,7 +398,7 @@ const SliderAdjustmentPanel = () => {
             <Spin size="large" tip="加载参数中..." />
           </div>
         )}
-        
+
         <div style={{ opacity: isLoading ? 0.5 : 1 }}>
           {/* 增益滑块 */}
           <ParameterSlider
@@ -411,7 +411,7 @@ const SliderAdjustmentPanel = () => {
             onChange={(value) => handleParameterChange('contrast', value)}
             disabled={isLoading}
           />
-          
+
           {/* 细节滑块 */}
           <ParameterSlider
             label="细节"
@@ -423,7 +423,7 @@ const SliderAdjustmentPanel = () => {
             onChange={(value) => handleParameterChange('detail', value)}
             disabled={isLoading}
           />
-          
+
           {/* 动态范围滑块 */}
           <ParameterSlider
             label="动态范围"
@@ -435,7 +435,7 @@ const SliderAdjustmentPanel = () => {
             onChange={(value) => handleParameterChange('latitude', value)}
             disabled={isLoading}
           />
-          
+
           {/* 噪声模式滑块 */}
           <ParameterSlider
             label="噪声模式"
@@ -447,7 +447,7 @@ const SliderAdjustmentPanel = () => {
             onChange={(value) => handleParameterChange('noise', value)}
             disabled={isLoading}
           />
-          
+
           {/* 对比度滑块(前端维护) */}
           <ParameterSlider
             label="对比度"
@@ -459,7 +459,7 @@ const SliderAdjustmentPanel = () => {
             onChange={(value) => handleParameterChange('brightness', value)}
             disabled={isLoading}
           />
-          
+
           {/* 亮度滑块(前端维护) */}
           <ParameterSlider
             label="亮度"
@@ -471,7 +471,7 @@ const SliderAdjustmentPanel = () => {
             onChange={(value) => handleParameterChange('sharpness', value)}
             disabled={isLoading}
           />
-          
+
           {/* 算法选择 */}
           <div style={{ marginBottom: '16px' }}>
             <Typography.Text strong style={{ display: 'block', marginBottom: '8px' }}>
@@ -490,7 +490,7 @@ const SliderAdjustmentPanel = () => {
               ))}
             </Select>
           </div>
-          
+
           {/* LUT 选择 */}
           <div style={{ marginBottom: '16px' }}>
             <Typography.Text strong style={{ display: 'block', marginBottom: '8px' }}>
@@ -509,7 +509,7 @@ const SliderAdjustmentPanel = () => {
               ))}
             </Select>
           </div>
-          
+
           {/* 风格选择 */}
           <div style={{ marginBottom: '16px' }}>
             <Typography.Text strong style={{ display: 'block', marginBottom: '8px' }}>
@@ -527,7 +527,7 @@ const SliderAdjustmentPanel = () => {
               <Option value="骨骼">骨骼</Option>
             </Select>
           </div>
-          
+
           {/* 底部按钮 */}
           <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
             <Button