|
@@ -1,350 +1,97 @@
|
|
|
import React from 'react';
|
|
|
-import { Button, Row, Col } from 'antd';
|
|
|
+import { Button, Flex } from 'antd';
|
|
|
+import { DeleteOutlined } from '@ant-design/icons';
|
|
|
import '@/themes/truncateText.css';
|
|
|
import { useDispatch } from 'react-redux';
|
|
|
import { setAction } from '@/states/view/functionAreaSlice';
|
|
|
|
|
|
-const FunctionArea = () => {
|
|
|
+const FunctionButton = ({
|
|
|
+ title,
|
|
|
+ action,
|
|
|
+}: {
|
|
|
+ title: string;
|
|
|
+ action: string;
|
|
|
+}) => {
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
- const handleButtonClick = (action: string) => {
|
|
|
+ const handleButtonClick = () => {
|
|
|
dispatch(setAction(action));
|
|
|
- // dispatch(clearAction());
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
- <Row gutter={[8, 8]} style={{ overflowY: 'auto' }}>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Add L Mark')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Add L Mark"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Add L Mark
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Add R Mark')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Add R Mark"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Add R Mark
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Delete Selected Mark')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Delete Selected Mark"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Delete Selected Mark
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Horizontal Flip')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Horizontal Flip"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Horizontal Flip
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Vertical Flip')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Vertical Flip"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Vertical Flip
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Rotate Counterclockwise 90')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Rotate Counterclockwise 90°"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Rotate Counterclockwise 90°
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Rotate Clockwise 90')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Rotate Clockwise 90°"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Rotate Clockwise 90°
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Rotate Any Angle')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Rotate Any Angle"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Rotate Any Angle
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('AddMask')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Add Mask"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Add Mask
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Delete Digital Mask')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Delete Digital Mask"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Delete Digital Mask
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Adjust Brightness and Contrast')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Adjust Brightness and Contrast"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Adjust Brightness and Contrast
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Crop Selected Area')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Crop Selected Area"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Crop Selected Area
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Delete Mask')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Delete Mask"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Delete Mask
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Image Comparison')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Image Comparison"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Image Comparison
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Invert Contrast')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Invert Contrast"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Invert Contrast
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('1x1 Layout')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="1x1 Layout"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- 1x1 Layout
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('1x2 Layout')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="1x2 Layout"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- 1x2 Layout
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('2x2 Layout')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="2x2 Layout"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- 2x2 Layout
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('4x4 Layout')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="4x4 Layout"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- 4x4 Layout
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Magnifier')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Magnifier"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Magnifier
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Fit Size')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Fit Size"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Fit Size
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Original Size')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Original Size"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Original Size
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Zoom Image')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Zoom Image"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Zoom Image
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Reset Cursor')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Reset Cursor"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Reset Cursor
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Pan')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Pan"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Pan
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Invert Image')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Invert Image"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Invert Image
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Reset Image')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Reset Image"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Reset Image
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Snapshot')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Snapshot"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Snapshot
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Advanced Processing')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Advanced Processing"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Advanced Processing
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Musician')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Musician"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Musician
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Image Measurement')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Image Measurement"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Image Measurement
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('More')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="More"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- More
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <Button
|
|
|
- onClick={() => handleButtonClick('Apply Colormap')}
|
|
|
- style={{ width: '44px', height: '44px' }}
|
|
|
- title="Apply Colormap"
|
|
|
- className="truncate-text"
|
|
|
- >
|
|
|
- Apply Colormap
|
|
|
- </Button>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
+ <Button
|
|
|
+ onClick={handleButtonClick}
|
|
|
+ icon={<DeleteOutlined />}
|
|
|
+ style={{
|
|
|
+ width: '1.5rem',
|
|
|
+ height: '1.5rem',
|
|
|
+ padding: 0, // 关键
|
|
|
+ //minWidth: 44, // 保险
|
|
|
+ //overflow: 'hidden', // 超出的文字裁掉
|
|
|
+ }}
|
|
|
+ title={title}
|
|
|
+ className="truncate-text"
|
|
|
+ >
|
|
|
+ {/* {title} */}
|
|
|
+ </Button>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const FunctionArea = () => {
|
|
|
+ return (
|
|
|
+ <Flex wrap gap="small" align="center" justify="start" className="p-1">
|
|
|
+ <FunctionButton title="Add L Mark" action="Add L Mark" />
|
|
|
+ <FunctionButton title="Add R Mark" action="Add R Mark" />
|
|
|
+ <FunctionButton
|
|
|
+ title="Delete Selected Mark"
|
|
|
+ action="Delete Selected Mark"
|
|
|
+ />
|
|
|
+ <FunctionButton title="Horizontal Flip" action="Horizontal Flip" />
|
|
|
+ <FunctionButton title="Vertical Flip" action="Vertical Flip" />
|
|
|
+ <FunctionButton
|
|
|
+ title="Rotate Counterclockwise 90°"
|
|
|
+ action="Rotate Counterclockwise 90"
|
|
|
+ />
|
|
|
+ <FunctionButton
|
|
|
+ title="Rotate Clockwise 90°"
|
|
|
+ action="Rotate Clockwise 90"
|
|
|
+ />
|
|
|
+ <FunctionButton title="Rotate Any Angle" action="Rotate Any Angle" />
|
|
|
+ <FunctionButton title="Add Mask" action="AddMask" />
|
|
|
+ <FunctionButton
|
|
|
+ title="Delete Digital Mask"
|
|
|
+ action="Delete Digital Mask"
|
|
|
+ />
|
|
|
+ <FunctionButton
|
|
|
+ title="Adjust Brightness and Contrast"
|
|
|
+ action="Adjust Brightness and Contrast"
|
|
|
+ />
|
|
|
+ <FunctionButton title="Crop Selected Area" action="Crop Selected Area" />
|
|
|
+ <FunctionButton title="Delete Mask" action="Delete Mask" />
|
|
|
+ <FunctionButton title="Image Comparison" action="Image Comparison" />
|
|
|
+ <FunctionButton title="Invert Contrast" action="Invert Contrast" />
|
|
|
+ <FunctionButton title="1x1 Layout" action="1x1 Layout" />
|
|
|
+ <FunctionButton title="1x2 Layout" action="1x2 Layout" />
|
|
|
+ <FunctionButton title="2x2 Layout" action="2x2 Layout" />
|
|
|
+ <FunctionButton title="4x4 Layout" action="4x4 Layout" />
|
|
|
+ <FunctionButton title="Magnifier" action="Magnifier" />
|
|
|
+ <FunctionButton title="Fit Size" action="Fit Size" />
|
|
|
+ <FunctionButton title="Original Size" action="Original Size" />
|
|
|
+ <FunctionButton title="Zoom Image" action="Zoom Image" />
|
|
|
+ <FunctionButton title="Reset Cursor" action="Reset Cursor" />
|
|
|
+ <FunctionButton title="Pan" action="Pan" />
|
|
|
+ <FunctionButton title="Invert Image" action="Invert Image" />
|
|
|
+ <FunctionButton title="Reset Image" action="Reset Image" />
|
|
|
+ <FunctionButton title="Snapshot" action="Snapshot" />
|
|
|
+ <FunctionButton
|
|
|
+ title="Advanced Processing"
|
|
|
+ action="Advanced Processing"
|
|
|
+ />
|
|
|
+ <FunctionButton title="Musician" action="Musician" />
|
|
|
+ <FunctionButton title="Image Measurement" action="Image Measurement" />
|
|
|
+ <FunctionButton title="More" action="More" />
|
|
|
+ <FunctionButton title="Apply Colormap" action="Apply Colormap" />
|
|
|
+ </Flex>
|
|
|
);
|
|
|
};
|
|
|
|