OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Enable user to zoom beyond image size (#5949) 

* Enable user to zoom beyond image size and add cleanup functions to image view

Signed-off-by: Jaiwanth <jaiwanth2011@gmail.com>

* Modify cursor icon and display zoom in and out buttons for smaller images

* Fix indentation

Signed-off-by: Jaiwanth <jaiwanth2011@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Travis Ralston <travisr@matrix.org>
Co-authored-by: Kerry <kerrya@element.io>
pull/28788/head^2
Jaiwanth 2022-11-03 17:33:21 +05:30 committed by GitHub
parent f35d01f5df
commit 3330d5a634
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/views/elements/ImageView.tsx
View File

@ -221,8 +221,8 @@ export default class ImageView extends React.Component<IProps, IState> {
private zoom(zoomLevel: number, anchorX?: number, anchorY?: number) { private zoom(zoomLevel: number, anchorX?: number, anchorY?: number) {
const oldZoom = this.state.zoom; const oldZoom = this.state.zoom;
const newZoom = Math.min(zoomLevel, this.state.maxZoom); const maxZoom = this.state.maxZoom === this.state.minZoom ? 2 * this.state.maxZoom : this.state.maxZoom;
const newZoom = Math.min(zoomLevel, maxZoom);
if (newZoom <= this.state.minZoom) { if (newZoom <= this.state.minZoom) {
// Zoom out fully // Zoom out fully
this.setState({ this.setState({
@ -355,9 +355,12 @@ export default class ImageView extends React.Component<IProps, IState> {
// other button than the left one // other button than the left one
if (ev.button !== 0) return; if (ev.button !== 0) return;
// Zoom in if we are completely zoomed out // Zoom in if we are completely zoomed out and increase the zoom factor for images
// smaller than the viewport size
if (this.state.zoom === this.state.minZoom) { if (this.state.zoom === this.state.minZoom) {
this.zoom(this.state.maxZoom, ev.nativeEvent.offsetX, ev.nativeEvent.offsetY); this.zoom(this.state.maxZoom === this.state.minZoom
? 2 * this.state.maxZoom
: this.state.maxZoom, ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
return; return;
} }
@ -417,7 +420,6 @@ export default class ImageView extends React.Component<IProps, IState> {
render() { render() {
const showEventMeta = !!this.props.mxEvent; const showEventMeta = !!this.props.mxEvent;
const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
let transitionClassName; let transitionClassName;
if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading"; if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
@ -426,7 +428,6 @@ export default class ImageView extends React.Component<IProps, IState> {
let cursor; let cursor;
if (this.state.moving) cursor = "grabbing"; if (this.state.moving) cursor = "grabbing";
else if (zoomingDisabled) cursor = "default";
else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in"; else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
else cursor = "zoom-out"; else cursor = "zoom-out";
@ -516,24 +517,20 @@ export default class ImageView extends React.Component<IProps, IState> {
); );
} }
let zoomOutButton; const zoomOutButton = (
let zoomInButton; <AccessibleTooltipButton
if (!zoomingDisabled) { className="mx_ImageView_button mx_ImageView_button_zoomOut"
zoomOutButton = ( title={_t("Zoom out")}
<AccessibleTooltipButton onClick={this.onZoomOutClick}
className="mx_ImageView_button mx_ImageView_button_zoomOut" />
title={_t("Zoom out")} );
onClick={this.onZoomOutClick} const zoomInButton = (
/> <AccessibleTooltipButton
); className="mx_ImageView_button mx_ImageView_button_zoomIn"
zoomInButton = ( title={_t("Zoom in")}
<AccessibleTooltipButton onClick={this.onZoomInClick}
className="mx_ImageView_button mx_ImageView_button_zoomIn" />
title={_t("Zoom in")} );
onClick={this.onZoomInClick}
/>
);
}
let title: JSX.Element; let title: JSX.Element;
if (this.props.mxEvent?.getContent()) { if (this.props.mxEvent?.getContent()) {