|
@@ -53,6 +53,12 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
|
|
|
state.print.selectedCells.includes(cellId)
|
|
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> => {
|
|
const loadImage = async (targetImageId: string, source: 'props' | 'drag' = 'props'): Promise<boolean> => {
|
|
|
if (!stackViewport || !targetImageId) return false;
|
|
if (!stackViewport || !targetImageId) return false;
|
|
@@ -198,8 +204,9 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
|
|
|
if (stackViewport) {
|
|
if (stackViewport) {
|
|
|
try {
|
|
try {
|
|
|
// 清空 viewport 中的图像堆栈
|
|
// 清空 viewport 中的图像堆栈
|
|
|
- await stackViewport.setStack([], 0);
|
|
|
|
|
- stackViewport.render();
|
|
|
|
|
|
|
+ // await stackViewport.setStack([]);
|
|
|
|
|
+ // stackViewport.render();
|
|
|
|
|
+ renderingEngine.disableElement(viewportId);
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.warn(`[DcmCell] 清空 viewport 时出错: ${error}`);
|
|
console.warn(`[DcmCell] 清空 viewport 时出错: ${error}`);
|
|
|
}
|
|
}
|
|
@@ -213,6 +220,26 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
|
|
|
loadImageFromProps();
|
|
loadImageFromProps();
|
|
|
}, [imageId, stackViewport]);
|
|
}, [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) => {
|
|
const handleDrop = async (e) => {
|
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
@@ -273,8 +300,8 @@ const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: Vie
|
|
|
{/* Cornerstone 渲染挂载点 */}
|
|
{/* Cornerstone 渲染挂载点 */}
|
|
|
<div ref={viewportRef} style={{ width: '100%', height: '100%' }} />
|
|
<div ref={viewportRef} style={{ width: '100%', height: '100%' }} />
|
|
|
|
|
|
|
|
- {/* 拖拽提示文字 - 只在没有图像时显示 */}
|
|
|
|
|
- {!hasImage && (
|
|
|
|
|
|
|
+ {/* 拖拽提示文字 - 基于Redux状态判断是否显示 */}
|
|
|
|
|
+ {!currentCellImageId && !hasImage && (
|
|
|
<div style={{
|
|
<div style={{
|
|
|
position: 'absolute',
|
|
position: 'absolute',
|
|
|
top: '50%',
|
|
top: '50%',
|