Forráskód Böngészése

添加删除胶片上选中图像的功能

dengdx 1 hónapja
szülő
commit
40b47771cc
1 módosított fájl, 31 hozzáadás és 4 törlés
  1. 31 4
      src/pages/output/print/DcmCell.tsx

+ 31 - 4
src/pages/output/print/DcmCell.tsx

@@ -53,6 +53,12 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
     state.print.selectedCells.includes(cellId)
   );
 
+  // 监听Redux中当前格子的图像ID状态
+  const currentCellImageId = useAppSelector(state => {
+    const film = state.print.films.find(f => f.id === currentFilm.id);
+    return film?.images[indexOfCell] || null;
+  });
+
   // 统一的图像加载函数,供两种场景使用
   const loadImage = async (targetImageId: string, source: 'props' | 'drag' = 'props'): Promise<boolean> => {
     if (!stackViewport || !targetImageId) return false;
@@ -198,8 +204,9 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
         if (stackViewport) {
           try {
             // 清空 viewport 中的图像堆栈
-            await stackViewport.setStack([], 0);
-            stackViewport.render();
+            // await stackViewport.setStack([]);
+            // stackViewport.render();
+            renderingEngine.disableElement(viewportId);
           } catch (error) {
             console.warn(`[DcmCell] 清空 viewport 时出错: ${error}`);
           }
@@ -213,6 +220,26 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
     loadImageFromProps();
   }, [imageId, stackViewport]);
 
+  // 监听Redux状态变化,当图像被删除时清理viewport
+  useEffect(() => {
+    if (!stackViewport) return;
+    
+    // 如果Redux中的图像ID为null,但viewport还有图像,则清理
+    if (!currentCellImageId && hasImage) {
+      try {
+        // 清空viewport的图像栈
+        // stackViewport.setStack([]);
+        // stackViewport.render();
+        renderingEngine.disableElement(viewportId);
+        setHasImage(false);
+        setCurrentImageId(null);
+        console.log(`[DcmCell] 清理viewport: ${cellId} (图像已被删除)`);
+      } catch (error) {
+        console.warn(`[DcmCell] 清理viewport时出错:`, error);
+      }
+    }
+  }, [currentCellImageId, stackViewport, hasImage, cellId]);
+
   // 处理拖放事件(核心逻辑)
   const handleDrop = async (e) => {
     e.preventDefault();
@@ -273,8 +300,8 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
       {/* Cornerstone 渲染挂载点 */}
       <div ref={viewportRef} style={{ width: '100%', height: '100%' }} />
 
-      {/* 拖拽提示文字 - 只在没有图像时显示 */}
-      {!hasImage && (
+      {/* 拖拽提示文字 - 基于Redux状态判断是否显示 */}
+      {!currentCellImageId && !hasImage && (
         <div style={{
           position: 'absolute',
           top: '50%',