From 3330d5a63492b8209289961c006d2624ecc07a5c Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Thu, 3 Nov 2022 17:33:21 +0530 Subject: [PATCH 1/2] 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 * Modify cursor icon and display zoom in and out buttons for smaller images * Fix indentation Signed-off-by: Jaiwanth Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Travis Ralston Co-authored-by: Kerry --- src/components/views/elements/ImageView.tsx | 45 ++++++++++----------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 9bb1b551d5..ae5522aa1c 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -221,8 +221,8 @@ export default class ImageView extends React.Component { 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({ @@ -355,9 +355,12 @@ export default class ImageView extends React.Component { // 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; } @@ -417,7 +420,6 @@ export default class ImageView extends React.Component { render() { const showEventMeta = !!this.props.mxEvent; - const zoomingDisabled = this.state.maxZoom === this.state.minZoom; let transitionClassName; if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading"; @@ -426,7 +428,6 @@ export default class ImageView extends React.Component { 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"; @@ -516,24 +517,20 @@ export default class ImageView extends React.Component { ); } - let zoomOutButton; - let zoomInButton; - if (!zoomingDisabled) { - zoomOutButton = ( - - ); - zoomInButton = ( - - ); - } + const zoomOutButton = ( + + ); + const zoomInButton = ( + + ); let title: JSX.Element; if (this.props.mxEvent?.getContent()) { From 5f540eb25c31d4524a9a1cbc2f706ed7dbadfa4b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 3 Nov 2022 12:50:07 +0000 Subject: [PATCH 2/2] Update types to match js-sdk --strict mode (#9528) Co-authored-by: Michael Weimann --- src/components/structures/InteractiveAuth.tsx | 4 ++-- src/components/structures/auth/Registration.tsx | 4 ++-- src/components/views/dialogs/DeactivateAccountDialog.tsx | 2 +- test/toasts/IncomingLegacyCallToast-test.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/structures/InteractiveAuth.tsx b/src/components/structures/InteractiveAuth.tsx index 4342355c74..c1f723c63a 100644 --- a/src/components/structures/InteractiveAuth.tsx +++ b/src/components/structures/InteractiveAuth.tsx @@ -64,7 +64,7 @@ interface IProps { continueText?: string; continueKind?: string; // callback - makeRequest(auth: IAuthData): Promise; + makeRequest(auth: IAuthData | null): Promise; // callback called when the auth process has finished, // successfully or unsuccessfully. // @param {boolean} status True if the operation requiring @@ -199,7 +199,7 @@ export default class InteractiveAuthComponent extends React.Component => { + private requestCallback = (auth: IAuthData | null, background: boolean): Promise => { // This wrapper just exists because the js-sdk passes a second // 'busy' param for backwards compat. This throws the tests off // so discard it here. diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index c155b5acc2..0ab90abb49 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { AuthType, createClient } from 'matrix-js-sdk/src/matrix'; +import { AuthType, createClient, IAuthData } from 'matrix-js-sdk/src/matrix'; import React, { Fragment, ReactNode } from 'react'; import { MatrixClient } from "matrix-js-sdk/src/client"; import classNames from "classnames"; @@ -443,7 +443,7 @@ export default class Registration extends React.Component { }); }; - private makeRegisterRequest = auth => { + private makeRegisterRequest = (auth: IAuthData | null) => { const registerParams = { username: this.state.formVals.username, password: this.state.formVals.password, diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx index 0eb81c932b..028c196c10 100644 --- a/src/components/views/dialogs/DeactivateAccountDialog.tsx +++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx @@ -115,7 +115,7 @@ export default class DeactivateAccountDialog extends React.Component { + private onUIAuthComplete = (auth: IAuthData | null): void => { // XXX: this should be returning a promise to maintain the state inside the state machine correct // but given that a deactivation is followed by a local logout and all object instances being thrown away // this isn't done. diff --git a/test/toasts/IncomingLegacyCallToast-test.tsx b/test/toasts/IncomingLegacyCallToast-test.tsx index a0fdfae56f..bdd2636094 100644 --- a/test/toasts/IncomingLegacyCallToast-test.tsx +++ b/test/toasts/IncomingLegacyCallToast-test.tsx @@ -39,7 +39,7 @@ describe('', () => { const mockRoom = new Room('!room:server.org', mockClient, userId); mockClient.deviceId = deviceId; - const call = new MatrixCall({ client: mockClient }); + const call = new MatrixCall({ client: mockClient, roomId: mockRoom.roomId }); const defaultProps = { call, };