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

Change rotate image in list mode (#6839)

Browse Source 
* fix grid mode rotateImage

* list mode

* dir column nav
This commit is contained in:
Michael An
2024-09-24 11:27:47 +08:00
committed by GitHub
parent 9ba319c128
commit 1229577a12
4 changed files with 88 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/dir-view-mode/dir-column-nav.js
View File

@@ -9,12 +9,15 @@ import Move from '../../components/dialog/move-dirent-dialog';
import CreateFolder from '../../components/dialog/create-folder-dialog';
import CreateFile from '../../components/dialog/create-file-dialog';
import ImageDialog from '../../components/dialog/image-dialog';
import { fileServerRoot, gettext, siteRoot, thumbnailSizeForOriginal } from '../../utils/constants';
import { fileServerRoot, gettext, siteRoot, thumbnailSizeForOriginal, thumbnailDefaultSize } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import TextTranslation from '../../utils/text-translation';
import TreeSection from '../../components/tree-section';
import DirViews from './dir-views';
import DirOthers from './dir-others';
import imageAPI from '../../utils/image-api';
import { seafileAPI } from '../../utils/seafile-api';
import toaster from '../toast';
import './dir-column-nav.css';
@@ -40,6 +43,7 @@ const propTypes = {
selectedDirentList: PropTypes.array.isRequired,
onItemsMove: PropTypes.func.isRequired,
getMenuContainerSize: PropTypes.func,
updateDirent: PropTypes.func,
direntList: PropTypes.array
};
@@ -319,6 +323,37 @@ class DirColumnNav extends React.Component {
}
};
handleError = (error) => {
toaster.danger(Utils.getErrorMsg(error));
};
rotateImage = (imageIndex, angle) => {
if (imageIndex >= 0 && angle !== 0) {
let { repoID } = this.props;
let imageName = this.state.imageNodeItems[imageIndex].name;
let path = this.state.opNode.path;
imageAPI.rotateImage(repoID, path, 360 - angle).then((res) => {
seafileAPI.createThumbnail(repoID, path, thumbnailDefaultSize).then((res) => {
// Generate a unique query parameter to bust the cache
const cacheBuster = new Date().getTime();
const newThumbnailSrc = `${res.data.encoded_thumbnail_src}?t=${cacheBuster}`;
this.setState((prevState) => {
const updatedImageItems = [...prevState.imageNodeItems];
updatedImageItems[imageIndex].src = newThumbnailSrc;
return { imageNodeItems: updatedImageItems };
});
// Update the thumbnail URL with the cache-busting query parameter
const item = this.props.direntList.find((item) => item.name === imageName);
this.props.updateDirent(item, 'encoded_thumbnail_src', newThumbnailSrc);
}).catch(error => {
this.handleError(error);
});
}).catch(error => {
this.handleError(error);
});
}
};
stopTreeScrollPropagation = (e) => {
e.stopPropagation();
};
@@ -457,6 +492,7 @@ class DirColumnNav extends React.Component {
moveToPrevImage={this.moveToPrevImage}
moveToNextImage={this.moveToNextImage}
onDeleteImage={this.deleteImage}
onRotateImage={this.rotateImage}
/>
</ModalPortal>
)}

1
frontend/src/components/dir-view-mode/dir-column-view.js
View File

@@ -175,6 +175,7 @@ class DirColumnView extends React.Component {
onItemsMove={this.props.onItemsMove}
getMenuContainerSize={this.getMenuContainerSize}
direntList={this.props.direntList}
updateDirent={this.props.updateDirent}
/>
<ResizeBar
resizeBarRef={this.resizeBarRef}

31
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -514,6 +514,10 @@ class DirentGridView extends React.Component {
this.setState({ isPermissionDialogOpen: !this.state.isPermissionDialogOpen });
};
handleError = (error) => {
toaster.danger(Utils.getErrorMsg(error));
};
onLockItem = (currentObject) => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(currentObject);
@@ -523,8 +527,7 @@ class DirentGridView extends React.Component {
let lockName = username.split('@');
this.props.updateDirent(currentObject, 'lock_owner_name', lockName[0]);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
this.handleError(error);
});
};
@@ -538,8 +541,7 @@ class DirentGridView extends React.Component {
let lockName = username.split('@');
this.props.updateDirent(currentObject, 'lock_owner_name', lockName[0]);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
this.handleError(error);
});
};
@@ -551,8 +553,7 @@ class DirentGridView extends React.Component {
this.props.updateDirent(currentObject, 'locked_by_me', false);
this.props.updateDirent(currentObject, 'lock_owner_name', '');
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
this.handleError(error);
});
};
@@ -646,29 +647,27 @@ class DirentGridView extends React.Component {
rotateImage = (imageIndex, angle) => {
if (imageIndex >= 0 && angle !== 0) {
const path = this.state.path === '/' ? this.props.path + this.state.imageItems[imageIndex].name : this.props.path + '/' + this.state.imageItems[imageIndex].name;
imageAPI.rotateImage(this.props.repoID, path, 360 - angle).then((res) => {
seafileAPI.createThumbnail(this.props.repoID, path, thumbnailDefaultSize).then((res) => {
let { repoID } = this.props;
let imageName = this.state.imageItems[imageIndex].name;
let path = Utils.joinPath(this.props.path, imageName);
imageAPI.rotateImage(repoID, path, 360 - angle).then((res) => {
seafileAPI.createThumbnail(repoID, path, thumbnailDefaultSize).then((res) => {
// Generate a unique query parameter to bust the cache
const cacheBuster = new Date().getTime();
const newThumbnailSrc = `${res.data.encoded_thumbnail_src}?t=${cacheBuster}`;
this.setState((prevState) => {
const updatedImageItems = [...prevState.imageItems];
updatedImageItems[imageIndex].src = newThumbnailSrc;
return { imageItems: updatedImageItems };
});
// Update the thumbnail URL with the cache-busting query parameter
const item = this.props.direntList.find((item) => item.name === this.state.imageItems[imageIndex].name);
const item = this.props.direntList.find((item) => item.name === imageName);
this.props.updateDirent(item, 'encoded_thumbnail_src', newThumbnailSrc);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
this.handleError(error);
});
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
this.handleError(error);
});
}
};

36
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { siteRoot, gettext, username, enableSeadoc, thumbnailSizeForOriginal, fileServerRoot } from '../../utils/constants';
import { siteRoot, gettext, username, enableSeadoc, thumbnailSizeForOriginal, thumbnailDefaultSize, fileServerRoot } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import TextTranslation from '../../utils/text-translation';
import URLDecorator from '../../utils/url-decorator';
@@ -19,6 +19,8 @@ import { hideMenu, showMenu } from '../context-menu/actions';
import DirentsDraggedPreview from '../draggable/dirents-dragged-preview';
import { EVENT_BUS_TYPE } from '../common/event-bus-type';
import EmptyTip from '../empty-tip';
import imageAPI from '../../utils/image-api';
import { seafileAPI } from '../../utils/seafile-api';
const propTypes = {
path: PropTypes.string.isRequired,
@@ -238,6 +240,37 @@ class DirentListView extends React.Component {
}));
};
handleError = (error) => {
toaster.danger(Utils.getErrorMsg(error));
};
rotateImage = (imageIndex, angle) => {
if (imageIndex >= 0 && angle !== 0) {
let { repoID } = this.props;
let imageName = this.state.imageItems[imageIndex].name;
let path = Utils.joinPath(this.props.path, imageName);
imageAPI.rotateImage(repoID, path, 360 - angle).then((res) => {
seafileAPI.createThumbnail(repoID, path, thumbnailDefaultSize).then((res) => {
// Generate a unique query parameter to bust the cache
const cacheBuster = new Date().getTime();
const newThumbnailSrc = `${res.data.encoded_thumbnail_src}?t=${cacheBuster}`;
this.setState((prevState) => {
const updatedImageItems = [...prevState.imageItems];
updatedImageItems[imageIndex].src = newThumbnailSrc;
return { imageItems: updatedImageItems };
});
// Update the thumbnail URL with the cache-busting query parameter
const item = this.props.direntList.find((item) => item.name === imageName);
this.props.updateDirent(item, 'encoded_thumbnail_src', newThumbnailSrc);
}).catch(error => {
this.handleError(error);
});
}).catch(error => {
this.handleError(error);
});
}
};
closeImagePopup = () => {
this.setState({ isImagePopupOpen: false });
};
@@ -772,6 +805,7 @@ class DirentListView extends React.Component {
moveToPrevImage={this.moveToPrevImage}
moveToNextImage={this.moveToNextImage}
onDeleteImage={this.deleteImage}
onRotateImage={this.rotateImage}
/>
</ModalPortal>
)}