Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Enable user to zoom beyond image size #5949

Merged
merged 9 commits into from
Nov 3, 2022
Merged

Enable user to zoom beyond image size #5949

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
70c2e22
Enable user to zoom beyond image size and add cleanup functions to im…
jaiwanth-v Apr 30, 2021
96eea27
Modify cursor icon and display zoom in and out buttons for smaller im…
jaiwanth-v Apr 30, 2021
88770a8
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
jaiwanth-v Aug 9, 2022
846be61
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
jaiwanth-v Aug 9, 2022
3001f2b
Fix indentation
jaiwanth-v Aug 9, 2022
54e8353
Merge branch 'develop' into image-view-increased-zoom
t3chguy Sep 29, 2022
ccf11db
Merge branch 'develop' into image-view-increased-zoom
turt2live Oct 13, 2022
fba5dca
Merge branch 'develop' into image-view-increased-zoom
Oct 20, 2022
9f46344
Merge branch 'develop' into image-view-increased-zoom
turt2live Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 21 additions & 24 deletions src/components/views/elements/ImageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,8 @@ export default class ImageView extends React.Component<IProps, IState> {

private zoom(zoomLevel: number, anchorX?: number, anchorY?: number) {
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) {
// Zoom out fully
this.setState({
Expand Down Expand Up @@ -355,9 +355,12 @@ export default class ImageView extends React.Component<IProps, IState> {
// other button than the left one
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) {
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;
}

Expand Down Expand Up @@ -417,7 +420,6 @@ export default class ImageView extends React.Component<IProps, IState> {

render() {
const showEventMeta = !!this.props.mxEvent;
const zoomingDisabled = this.state.maxZoom === this.state.minZoom;

let transitionClassName;
if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
Expand All @@ -426,7 +428,6 @@ export default class ImageView extends React.Component<IProps, IState> {

let cursor;
if (this.state.moving) cursor = "grabbing";
else if (zoomingDisabled) cursor = "default";
else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
else cursor = "zoom-out";

Expand Down Expand Up @@ -516,24 +517,20 @@ export default class ImageView extends React.Component<IProps, IState> {
);
}

let zoomOutButton;
let zoomInButton;
if (!zoomingDisabled) {
zoomOutButton = (
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_zoomOut"
title={_t("Zoom out")}
onClick={this.onZoomOutClick}
/>
);
zoomInButton = (
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_zoomIn"
title={_t("Zoom in")}
onClick={this.onZoomInClick}
/>
);
}
const zoomOutButton = (
<AccessibleTooltipButton
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"
title={_t("Zoom in")}
onClick={this.onZoomInClick}
/>
);

let title: JSX.Element;
if (this.props.mxEvent?.getContent()) {
Expand Down