haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-18 00:00:00 +00:00
Code Issues Releases Wiki Activity

fix rotate image in metadata table view (#6851)

Browse Source
This commit is contained in:
Michael An
2024-09-26 12:25:02 +08:00
committed by GitHub
parent 4fea5d13c1
commit f1f400499f
3 changed files with 47 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/dialog/image-dialog.js
View File

@@ -18,11 +18,9 @@ class ImageDialog extends React.Component {
downloadImage = (imageSrc) => {
let downloadUrl = imageSrc;
if (document.getElementById('downloadFrame')) {
document.body.removeChild(document.getElementById('downloadFrame'));
}
let iframe = document.createElement('iframe');
iframe.setAttribute('id', 'downloadFrame');
iframe.style.display = 'none';
@@ -31,36 +29,24 @@ class ImageDialog extends React.Component {
};
onViewOriginal = () => {
const imageSrc = this.props.imageItems[this.props.imageIndex].url;
window.open(imageSrc, '_blank');
};
onRotateImage = (angle) => {
if (this.props.onRotateImage) {
this.props.onRotateImage(this.props.imageIndex, angle);
}
window.open(this.props.imageItems[this.props.imageIndex].url, '_blank');
};
render() {
const { imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage } = this.props;
const { imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage } = this.props;
const imageItemsLength = imageItems.length;
if (imageItemsLength === 0) return null;
const name = imageItems[imageIndex].name;
const imageTitle = `${name} (${imageIndex + 1}/${imageItemsLength})`;
const mainImg = imageItems[imageIndex];
const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
const prevImg = imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength];
const mainSrc = mainImg.thumbnail || mainImg.src;
const nextSrc = nextImg.thumbnail || nextImg.src;
const prevSrc = prevImg.thumbnail || prevImg.src;
return (
<Lightbox
wrapperClassName='custom-image-previewer'
imageTitle={imageTitle}
mainSrc={mainSrc}
nextSrc={nextSrc}
prevSrc={prevSrc}
imageTitle={`${name} (${imageIndex + 1}/${imageItemsLength})`}
mainSrc={mainImg.thumbnail || mainImg.src}
nextSrc={nextImg.thumbnail || nextImg.src}
prevSrc={prevImg.thumbnail || prevImg.src}
onCloseRequest={closeImagePopup}
onMovePrevRequest={moveToPrevImage}
onMoveNextRequest={moveToNextImage}
@@ -73,10 +59,10 @@ class ImageDialog extends React.Component {
zoomOutLabel={gettext('Zoom out')}
enableRotate={true}
onClickDownload={() => this.downloadImage(imageItems[imageIndex].url)}
onClickDelete={onDeleteImage ? () => onDeleteImage(imageItems[imageIndex].name) : null}
onClickDelete={onDeleteImage ? () => onDeleteImage(name) : null}
onViewOriginal={this.onViewOriginal}
viewOriginalImageLabel={gettext('View original image')}
onRotateImage={this.onRotateImage}
onRotateImage={onRotateImage ? (angle) => onRotateImage(imageIndex, angle) : null}
/>
);
}

44
frontend/src/metadata/components/cell-editors/file-name-editor.js
View File

@@ -3,16 +3,20 @@ import PropTypes from 'prop-types';
import { ModalPortal } from '@seafile/sf-metadata-ui-component';
import { Utils } from '../../../utils/utils';
import ImageDialog from '../../../components/dialog/image-dialog';
import { siteRoot, thumbnailSizeForOriginal, fileServerRoot } from '../../../utils/constants';
import { siteRoot, thumbnailSizeForOriginal, fileServerRoot, thumbnailDefaultSize } from '../../../utils/constants';
import { PRIVATE_COLUMN_KEY } from '../../constants';
import imageAPI from '../../../utils/image-api';
import { seafileAPI } from '../../../utils/seafile-api';
import toaster from '../../../components/toast';
const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
const [imageIndex, setImageIndex] = useState(0);
const [imageItems, setImageItems] = useState([]);
const imageItems = useMemo(() => {
useEffect(() => {
const repoID = window.sfMetadataContext.getSetting('repoID');
return table.rows
const repoInfo = window.sfMetadataContext.getSetting('repoInfo');
const newImageItems = table.rows
.filter(row => Utils.imageCheck(row[PRIVATE_COLUMN_KEY.FILE_NAME]))
.map(item => {
const fileName = item[PRIVATE_COLUMN_KEY.FILE_NAME];
@@ -20,10 +24,9 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
const path = Utils.encodePath(Utils.joinPath(parentDir, fileName));
const fileExt = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
const isGIF = fileExt === 'gif';
const useThumbnail = window.sfMetadataContext.getSetting('repoInfo')?.encrypted;
const useThumbnail = repoInfo?.encrypted;
const basePath = `${siteRoot}${useThumbnail && !isGIF ? 'thumbnail' : 'repo'}/${repoID}`;
const src = `${basePath}/${useThumbnail && !isGIF ? thumbnailSizeForOriginal : 'raw'}${path}`;
return {
name: fileName,
url: `${siteRoot}lib/${repoID}/file${path}`,
@@ -32,6 +35,7 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
downloadURL: `${fileServerRoot}repos/${repoID}/files${path}/?op=download`,
};
});
setImageItems(newImageItems);
}, [table]);
useEffect(() => {
@@ -48,8 +52,7 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
}, [record]);
const fileName = useMemo(() => {
const { key } = column;
return record[key];
return record[column.key];
}, [column, record]);
const fileType = useMemo(() => {
@@ -75,6 +78,30 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
};
const rotateImage = (imageIndex, angle) => {
if (imageIndex >= 0 && angle !== 0) {
const repoID = window.sfMetadataContext.getSetting('repoID');
const imageItem = imageItems[imageIndex];
const path = imageItem.url.slice(imageItem.url.indexOf('/file/') + 5);
imageAPI.rotateImage(repoID, path, 360 - angle).then((res) => {
if (res.data?.success) {
seafileAPI.createThumbnail(repoID, path, thumbnailDefaultSize).then((res) => {
if (res.data?.encoded_thumbnail_src) {
const cacheBuster = new Date().getTime();
const newThumbnailSrc = `${res.data.encoded_thumbnail_src}?t=${cacheBuster}`;
imageItems[imageIndex].src = newThumbnailSrc;
setImageItems(imageItems);
}
}).catch(error => {
toaster.danger(Utils.getErrorMsg(error));
});
}
}).catch(error => {
toaster.danger(Utils.getErrorMsg(error));
});
}
};
if (fileType === 'image') {
return (
<ModalPortal>
@@ -84,6 +111,7 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
closeImagePopup={onCommitCancel}
moveToPrevImage={moveToPrevImage}
moveToNextImage={moveToNextImage}
onRotateImage={rotateImage}
/>
</ModalPortal>
);

4
frontend/src/metadata/views/gallery/gallery-main.js
View File

@@ -9,7 +9,7 @@ const GalleryMain = ({ groups, overScan, columns, size, gap, selectedImages, onI
const imageHeight = useMemo(() => size + gap, [size, gap]);
const renderDisplayGroup = useCallback((group, groupIndex) => {
const renderDisplayGroup = useCallback((group) => {
const { top: overScanTop, bottom: overScanBottom } = overScan;
const { name, children, height, top, paddingTop } = group;
@@ -47,7 +47,7 @@ const GalleryMain = ({ groups, overScan, columns, size, gap, selectedImages, onI
paddingBottom: (children.length - 1 - childrenEndIndex) * imageHeight,
}}
>
{children.slice(childrenStartIndex, childrenEndIndex + 1).map((row, rowIndex) => {
{children.slice(childrenStartIndex, childrenEndIndex + 1).map((row) => {
return row.children.map((img) => {
const isSelected = selectedImages.includes(img);
return (