|
@@ -13,6 +13,7 @@ interface ImageOperationButtonProps {
|
|
|
iconName: string;
|
|
iconName: string;
|
|
|
onClick: () => void;
|
|
onClick: () => void;
|
|
|
disabled?: boolean;
|
|
disabled?: boolean;
|
|
|
|
|
+ state?:string;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const ImageOperationButton: React.FC<ImageOperationButtonProps> = ({
|
|
const ImageOperationButton: React.FC<ImageOperationButtonProps> = ({
|
|
@@ -20,6 +21,7 @@ const ImageOperationButton: React.FC<ImageOperationButtonProps> = ({
|
|
|
iconName,
|
|
iconName,
|
|
|
onClick,
|
|
onClick,
|
|
|
disabled = false,
|
|
disabled = false,
|
|
|
|
|
+ state='normal'
|
|
|
}) => {
|
|
}) => {
|
|
|
const themeType = useAppSelector((state) => state.theme.themeType);
|
|
const themeType = useAppSelector((state) => state.theme.themeType);
|
|
|
|
|
|
|
@@ -34,7 +36,7 @@ const ImageOperationButton: React.FC<ImageOperationButtonProps> = ({
|
|
|
userId="base"
|
|
userId="base"
|
|
|
theme={themeType}
|
|
theme={themeType}
|
|
|
size="2x"
|
|
size="2x"
|
|
|
- state="normal"
|
|
|
|
|
|
|
+ state={state??"normal"}
|
|
|
/>
|
|
/>
|
|
|
}
|
|
}
|
|
|
style={{
|
|
style={{
|
|
@@ -50,6 +52,8 @@ const ImageOperationButton: React.FC<ImageOperationButtonProps> = ({
|
|
|
|
|
|
|
|
const ImageOperationPanel: React.FC = () => {
|
|
const ImageOperationPanel: React.FC = () => {
|
|
|
const dispatch = useDispatch();
|
|
const dispatch = useDispatch();
|
|
|
|
|
+ // 监听工具模式状态
|
|
|
|
|
+ const toolMode = useAppSelector(state => state.print.toolMode);
|
|
|
// 工具模式切换处理函数
|
|
// 工具模式切换处理函数
|
|
|
const handleToggleToolMode = (mode: ToolMode) => {
|
|
const handleToggleToolMode = (mode: ToolMode) => {
|
|
|
dispatch(toggleToolMode(mode));
|
|
dispatch(toggleToolMode(mode));
|
|
@@ -62,11 +66,13 @@ const ImageOperationPanel: React.FC = () => {
|
|
|
<ImageOperationButton
|
|
<ImageOperationButton
|
|
|
title="缩放图像"
|
|
title="缩放图像"
|
|
|
iconName="Zoom"
|
|
iconName="Zoom"
|
|
|
|
|
+ state={toolMode==='zoom'?'down':'normal'}
|
|
|
onClick={() => handleToggleToolMode('zoom')}
|
|
onClick={() => handleToggleToolMode('zoom')}
|
|
|
/>
|
|
/>
|
|
|
<ImageOperationButton
|
|
<ImageOperationButton
|
|
|
title="漫游图像"
|
|
title="漫游图像"
|
|
|
iconName="Pan"
|
|
iconName="Pan"
|
|
|
|
|
+ state={toolMode==='pan'?'down':'normal'}
|
|
|
onClick={() => handleToggleToolMode('pan')}
|
|
onClick={() => handleToggleToolMode('pan')}
|
|
|
/>
|
|
/>
|
|
|
<ImageOperationButton
|
|
<ImageOperationButton
|
|
@@ -112,6 +118,7 @@ const ImageOperationPanel: React.FC = () => {
|
|
|
<ImageOperationButton
|
|
<ImageOperationButton
|
|
|
title="鼠标调节亮度和对比度"
|
|
title="鼠标调节亮度和对比度"
|
|
|
iconName="btn_BrightnessContrast"
|
|
iconName="btn_BrightnessContrast"
|
|
|
|
|
+ state={toolMode==='windowLevel'?'down':'normal'}
|
|
|
onClick={() => handleToggleToolMode('windowLevel')}
|
|
onClick={() => handleToggleToolMode('windowLevel')}
|
|
|
/>
|
|
/>
|
|
|
<ImageOperationButton
|
|
<ImageOperationButton
|