|
|
@@ -1,5 +1,6 @@
|
|
|
import React, { useState } from 'react';
|
|
|
import { Button, Flex, Divider } from 'antd';
|
|
|
+import { useIntl } from 'react-intl';
|
|
|
import '@/themes/truncateText.css';
|
|
|
import { useDispatch } from 'react-redux';
|
|
|
import { setAction } from '@/states/view/functionAreaSlice';
|
|
|
@@ -26,6 +27,7 @@ const FunctionButton = ({
|
|
|
action: string;
|
|
|
iconName: string;
|
|
|
}) => {
|
|
|
+ const intl = useIntl();
|
|
|
const dispatch = useDispatch();
|
|
|
const themeType = useAppSelector((state) => state.theme.themeType);
|
|
|
const activeTools = useAppSelector((state) => state.functionArea.activeTools);
|
|
|
@@ -117,7 +119,7 @@ const FunctionButton = ({
|
|
|
//minWidth: 44, // 保险
|
|
|
//overflow: 'hidden', // 超出的文字裁掉
|
|
|
}}
|
|
|
- title={disabled ? `${title} (多分格模式下不可用)` : title}
|
|
|
+ title={disabled ? `${title}${intl.formatMessage({ id: 'functionArea.disabledTooltipSuffix' })}` : title}
|
|
|
className="truncate-text"
|
|
|
>
|
|
|
{/* {title} */}
|
|
|
@@ -126,151 +128,153 @@ const FunctionButton = ({
|
|
|
};
|
|
|
|
|
|
const FunctionArea = () => {
|
|
|
+ const intl = useIntl();
|
|
|
+
|
|
|
return (
|
|
|
<Flex wrap gap="small" align="center" justify="start" className="p-1">
|
|
|
- <FunctionButton title="Add L Mark" action="Add L Mark" iconName="LMark" />
|
|
|
- <FunctionButton title="Add R Mark" action="Add R Mark" iconName="RMark" />
|
|
|
- <FunctionButton title="Add Mark" action="AddMark" iconName="AddMark" />
|
|
|
+ <FunctionButton title={intl.formatMessage({ id: "functionArea.addLMark" })} action="Add L Mark" iconName="LMark" />
|
|
|
+ <FunctionButton title={intl.formatMessage({ id: "functionArea.addRMark" })} action="Add R Mark" iconName="RMark" />
|
|
|
+ <FunctionButton title={intl.formatMessage({ id: "functionArea.addMark" })} action="AddMark" iconName="AddMark" />
|
|
|
<FunctionButton
|
|
|
- title="Delete Selected Mark"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.deleteSelectedMark" })}
|
|
|
action="Delete Selected Mark"
|
|
|
iconName="EraseMark"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Horizontal Flip"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.horizontalFlip" })}
|
|
|
action="Horizontal Flip"
|
|
|
iconName="HReverse"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Vertical Flip"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.verticalFlip" })}
|
|
|
action="Vertical Flip"
|
|
|
iconName="VReverse"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Rotate Counterclockwise 90°"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.rotateCounterclockwise90" })}
|
|
|
action="Rotate Counterclockwise 90"
|
|
|
iconName="RotateL90"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Rotate Clockwise 90°"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.rotateClockwise90" })}
|
|
|
action="Rotate Clockwise 90"
|
|
|
iconName="RotateR90"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Rotate Any Angle"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.rotateAnyAngle" })}
|
|
|
action="Rotate Any Angle"
|
|
|
iconName="RotateAnyDegree"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Crop Selected Area"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.cropSelectedArea" })}
|
|
|
action="Crop Selected Area"
|
|
|
iconName="Crop"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="删除数字遮线框"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.deleteDigitalMask" })}
|
|
|
action="Delete Digital Mask"
|
|
|
iconName="btn_RemoveCrop"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Adjust Brightness and Contrast"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.adjustBrightnessAndContrast" })}
|
|
|
action="Adjust Brightness and Contrast"
|
|
|
iconName="btn_BrightnessContrast"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Add Mask"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.addMask" })}
|
|
|
action="Add Mask"
|
|
|
iconName="AddMask"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Delete Mask"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.deleteMask" })}
|
|
|
action="Delete Mask"
|
|
|
iconName="DeleteMask"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Image Comparison"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.imageComparison" })}
|
|
|
action="Image Comparison"
|
|
|
iconName="btn_Compare"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="反色对比"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.invertContrast" })}
|
|
|
action="Invert Contrast"
|
|
|
iconName="btn_ReverseColour"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="1x1 Layout"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.1x1Layout" })}
|
|
|
action="1x1 Layout"
|
|
|
iconName="1x1_normal"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="1x2 Layout"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.1x2Layout" })}
|
|
|
action="1x2 Layout"
|
|
|
iconName="1x2_normal"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="2x2 Layout"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.2x2Layout" })}
|
|
|
action="2x2 Layout"
|
|
|
iconName="2x1_normal"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="4x4 Layout"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.4x4Layout" })}
|
|
|
action="4x4 Layout"
|
|
|
iconName="2x2_normal"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Magnifier"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.magnifier" })}
|
|
|
action="Magnifier"
|
|
|
iconName="Magnifier"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Fit Size"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.fitSize" })}
|
|
|
action="Fit Size"
|
|
|
iconName="FitInWindow"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Original Size"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.originalSize" })}
|
|
|
action="Original Size"
|
|
|
iconName="1by1_normal"
|
|
|
/>
|
|
|
- <FunctionButton title="Zoom Image" action="Zoom Image" iconName="Zoom" />
|
|
|
+ <FunctionButton title={intl.formatMessage({ id: "functionArea.zoomImage" })} action="Zoom Image" iconName="Zoom" />
|
|
|
<FunctionButton
|
|
|
- title="Reset Cursor"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.resetCursor" })}
|
|
|
action="Reset Cursor"
|
|
|
iconName="btn_pointer"
|
|
|
/>
|
|
|
- <FunctionButton title="Pan" action="Pan" iconName="Pan" />
|
|
|
+ <FunctionButton title={intl.formatMessage({ id: "functionArea.pan" })} action="Pan" iconName="Pan" />
|
|
|
<FunctionButton
|
|
|
- title="Invert Image"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.invertImage" })}
|
|
|
action="Invert Image"
|
|
|
iconName="Invert"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Reset Image"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.resetImage" })}
|
|
|
action="Reset Image"
|
|
|
iconName="Reset"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="Snapshot"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.snapshot" })}
|
|
|
action="Snapshot"
|
|
|
iconName="imgsnapshot"
|
|
|
/>
|
|
|
<Divider type="horizontal" style={{ height: 'auto', margin: '8px' }} />
|
|
|
<FunctionButton
|
|
|
- title="Advanced Processing"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.advancedProcessing" })}
|
|
|
action="Advanced Processing"
|
|
|
iconName="btn_Imageprocess"
|
|
|
/>
|
|
|
|
|
|
<FunctionButton
|
|
|
- title="Image Measurement"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.imageMeasurement" })}
|
|
|
action="Image Measurement"
|
|
|
iconName="btn_Measurements"
|
|
|
/>
|
|
|
<FunctionButton
|
|
|
- title="矩形裁剪"
|
|
|
+ title={intl.formatMessage({ id: "functionArea.rectangleCrop" })}
|
|
|
action="Rectangle Crop"
|
|
|
iconName="rectangle-crop"
|
|
|
/>
|
|
|
- <FunctionButton title="More" action="More" iconName="btn_OtherSetting" />
|
|
|
+ <FunctionButton title={intl.formatMessage({ id: "functionArea.more" })} action="More" iconName="btn_OtherSetting" />
|
|
|
</Flex>
|
|
|
);
|
|
|
};
|
dengdx