From dad7a2205522df484a967741f6601c834f254ab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 08:03:39 +0200 Subject: [PATCH 01/18] Initial code for dynamic minZoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_ImageView.scss | 3 +-- src/components/views/elements/ImageView.tsx | 29 ++++++++++++++++++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index 93ebcc2d56..71035dadc3 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -31,8 +31,7 @@ limitations under the License. .mx_ImageView_image { pointer-events: all; - max-width: 95%; - max-height: 95%; + flex-shrink: 0; } .mx_ImageView_panel { diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index cbced07bfe..208a6d995b 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -36,13 +36,15 @@ import {normalizeWheelEvent} from "../../../utils/Mouse"; const MIN_ZOOM = 100; const MAX_ZOOM = 300; +// Max scale to keep gaps around the image +const MAX_SCALE = 0.95; // This is used for the buttons const ZOOM_STEP = 10; // This is used for mouse wheel events const ZOOM_COEFFICIENT = 0.5; // If we have moved only this much we can zoom const ZOOM_DISTANCE = 10; - +const IMAGE_WRAPPER_CLASS = "mx_ImageView_image_wrapper"; interface IProps { src: string, // the source of the image being displayed @@ -62,8 +64,9 @@ interface IProps { } interface IState { - rotation: number, zoom: number, + minZoom: number, + rotation: number, translationX: number, translationY: number, moving: boolean, @@ -75,8 +78,9 @@ export default class ImageView extends React.Component { constructor(props) { super(props); this.state = { + zoom: 0, + minZoom: 100, rotation: 0, - zoom: MIN_ZOOM, translationX: 0, translationY: 0, moving: false, @@ -99,12 +103,29 @@ export default class ImageView extends React.Component { // We have to use addEventListener() because the listener // needs to be passive in order to work with Chromium this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); + window.addEventListener("resize", this.onWindowResize); + this.calculateMinZoom(); } componentWillUnmount() { this.focusLock.current.removeEventListener('wheel', this.onWheel); } + private onWindowResize = (ev) => { + this.calculateMinZoom(); + } + + private calculateMinZoom() { + // TODO: What if we don't have width and height props? + const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; + const zoomX = (imageWrapper.clientWidth / this.props.width) * 100; + const zoomY = (imageWrapper.clientHeight / this.props.height) * 100; + const zoom = Math.min(zoomX, zoomY) * MAX_SCALE; + + if (this.state.zoom <= this.state.minZoom) this.setState({zoom: zoom}); + this.setState({minZoom: zoom}); + } + private onKeyDown = (ev: KeyboardEvent) => { if (ev.key === Key.ESCAPE) { ev.stopPropagation(); @@ -427,7 +448,7 @@ export default class ImageView extends React.Component { {this.renderContextMenu()} -
+
Date: Sat, 24 Apr 2021 08:32:28 +0200 Subject: [PATCH 02/18] Add dynamic maxZoom and wire it all up MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 50 ++++++++++++--------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 208a6d995b..ecc4303764 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -34,8 +34,6 @@ import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks" import {MatrixEvent} from "matrix-js-sdk/src/models/event"; import {normalizeWheelEvent} from "../../../utils/Mouse"; -const MIN_ZOOM = 100; -const MAX_ZOOM = 300; // Max scale to keep gaps around the image const MAX_SCALE = 0.95; // This is used for the buttons @@ -66,6 +64,7 @@ interface IProps { interface IState { zoom: number, minZoom: number, + maxZoom: number, rotation: number, translationX: number, translationY: number, @@ -79,7 +78,8 @@ export default class ImageView extends React.Component { super(props); this.state = { zoom: 0, - minZoom: 100, + minZoom: MAX_SCALE, + maxZoom: 100, rotation: 0, translationX: 0, translationY: 0, @@ -100,11 +100,12 @@ export default class ImageView extends React.Component { private previousY = 0; componentDidMount() { + console.log("LOG calculating", this.props.width, this.props.height); // We have to use addEventListener() because the listener // needs to be passive in order to work with Chromium this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); window.addEventListener("resize", this.onWindowResize); - this.calculateMinZoom(); + this.calculateZoom(); } componentWillUnmount() { @@ -112,18 +113,23 @@ export default class ImageView extends React.Component { } private onWindowResize = (ev) => { - this.calculateMinZoom(); + this.calculateZoom(); } - private calculateMinZoom() { - // TODO: What if we don't have width and height props? + private calculateZoom() { + // TODO: What if we don't have width and height props? + const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; const zoomX = (imageWrapper.clientWidth / this.props.width) * 100; const zoomY = (imageWrapper.clientHeight / this.props.height) * 100; - const zoom = Math.min(zoomX, zoomY) * MAX_SCALE; + const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE; + const maxZoom = minZoom >= 100 ? minZoom : 100; - if (this.state.zoom <= this.state.minZoom) this.setState({zoom: zoom}); - this.setState({minZoom: zoom}); + if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom}); + this.setState({ + minZoom: minZoom, + maxZoom: maxZoom, + }); } private onKeyDown = (ev: KeyboardEvent) => { @@ -141,16 +147,16 @@ export default class ImageView extends React.Component { const {deltaY} = normalizeWheelEvent(ev); const newZoom = this.state.zoom - (deltaY * ZOOM_COEFFICIENT); - if (newZoom <= MIN_ZOOM) { + if (newZoom <= this.state.minZoom) { this.setState({ - zoom: MIN_ZOOM, + zoom: this.state.minZoom, translationX: 0, translationY: 0, }); return; } - if (newZoom >= MAX_ZOOM) { - this.setState({zoom: MAX_ZOOM}); + if (newZoom >= this.state.maxZoom) { + this.setState({zoom: this.state.maxZoom}); return; } @@ -172,8 +178,8 @@ export default class ImageView extends React.Component { }; private onZoomInClick = () => { - if (this.state.zoom >= MAX_ZOOM) { - this.setState({zoom: MAX_ZOOM}); + if (this.state.zoom >= this.state.maxZoom) { + this.setState({zoom: this.state.maxZoom}); return; } @@ -183,9 +189,9 @@ export default class ImageView extends React.Component { }; private onZoomOutClick = () => { - if (this.state.zoom <= MIN_ZOOM) { + if (this.state.zoom <= this.state.minZoom) { this.setState({ - zoom: MIN_ZOOM, + zoom: this.state.minZoom, translationX: 0, translationY: 0, }); @@ -238,8 +244,8 @@ export default class ImageView extends React.Component { if (ev.button !== 0) return; // Zoom in if we are completely zoomed out - if (this.state.zoom === MIN_ZOOM) { - this.setState({zoom: MAX_ZOOM}); + if (this.state.zoom === this.state.minZoom) { + this.setState({zoom: this.state.maxZoom}); return; } @@ -272,7 +278,7 @@ export default class ImageView extends React.Component { Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE ) { this.setState({ - zoom: MIN_ZOOM, + zoom: this.state.minZoom, translationX: 0, translationY: 0, }); @@ -311,7 +317,7 @@ export default class ImageView extends React.Component { let cursor; if (this.state.moving) { cursor= "grabbing"; - } else if (this.state.zoom === MIN_ZOOM) { + } else if (this.state.zoom === this.state.minZoom) { cursor = "zoom-in"; } else { cursor = "zoom-out"; From f8af9831a9ab79591568c78e192848ed5d72b682 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 08:35:45 +0200 Subject: [PATCH 03/18] Don't use percanteages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I was an idiot to use them in the first place Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index ecc4303764..68567257f7 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -120,10 +120,10 @@ export default class ImageView extends React.Component { // TODO: What if we don't have width and height props? const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; - const zoomX = (imageWrapper.clientWidth / this.props.width) * 100; - const zoomY = (imageWrapper.clientHeight / this.props.height) * 100; + const zoomX = imageWrapper.clientWidth / this.props.width; + const zoomY = imageWrapper.clientHeight / this.props.height; const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE; - const maxZoom = minZoom >= 100 ? minZoom : 100; + const maxZoom = minZoom >= 1 ? minZoom : 1; if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom}); this.setState({ @@ -323,7 +323,7 @@ export default class ImageView extends React.Component { cursor = "zoom-out"; } const rotationDegrees = this.state.rotation + "deg"; - const zoomPercentage = this.state.zoom/100; + const zoom = this.state.zoom; const translatePixelsX = this.state.translationX + "px"; const translatePixelsY = this.state.translationY + "px"; // The order of the values is important! @@ -335,7 +335,7 @@ export default class ImageView extends React.Component { transition: this.state.moving ? null : "transform 200ms ease 0s", transform: `translateX(${translatePixelsX}) translateY(${translatePixelsY}) - scale(${zoomPercentage}) + scale(${zoom}) rotate(${rotationDegrees})`, }; From 57b34f8dbc9e8999ffa5c3f2b5b3427a60de9d45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 08:37:51 +0200 Subject: [PATCH 04/18] Get rid of onWindowResize() MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 68567257f7..cca4b34ad6 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -104,7 +104,7 @@ export default class ImageView extends React.Component { // We have to use addEventListener() because the listener // needs to be passive in order to work with Chromium this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); - window.addEventListener("resize", this.onWindowResize); + window.addEventListener("resize", this.calculateZoom); this.calculateZoom(); } @@ -112,11 +112,7 @@ export default class ImageView extends React.Component { this.focusLock.current.removeEventListener('wheel', this.onWheel); } - private onWindowResize = (ev) => { - this.calculateZoom(); - } - - private calculateZoom() { + private calculateZoom = () => { // TODO: What if we don't have width and height props? const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; From e0e9ccbf959bcaea693552bd239cbffbe441f441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 08:38:13 +0200 Subject: [PATCH 05/18] Remove logline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index cca4b34ad6..543828dc55 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -100,7 +100,6 @@ export default class ImageView extends React.Component { private previousY = 0; componentDidMount() { - console.log("LOG calculating", this.props.width, this.props.height); // We have to use addEventListener() because the listener // needs to be passive in order to work with Chromium this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); From dcc060f6f70b2e36656f91f0a547b4323c10112d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 09:00:15 +0200 Subject: [PATCH 06/18] Use correct cursor when we can't zoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 543828dc55..0db7d9401c 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -312,6 +312,8 @@ export default class ImageView extends React.Component { let cursor; if (this.state.moving) { cursor= "grabbing"; + } else if (this.state.maxZoom === this.state.minZoom) { + cursor = "pointer"; } else if (this.state.zoom === this.state.minZoom) { cursor = "zoom-in"; } else { From 9b7a9fc865f108c07e7759f33fcf40ca5c42cd46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 09:24:25 +0200 Subject: [PATCH 07/18] Use MAX_SCALE for maxZoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 0db7d9401c..a836409d4d 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -79,7 +79,7 @@ export default class ImageView extends React.Component { this.state = { zoom: 0, minZoom: MAX_SCALE, - maxZoom: 100, + maxZoom: MAX_SCALE, rotation: 0, translationX: 0, translationY: 0, From bcc6e5c5d5658b8959ab3112c98ee4b9e7f03724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 09:41:46 +0200 Subject: [PATCH 08/18] Add some comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index a836409d4d..1679c40e76 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -115,9 +115,18 @@ export default class ImageView extends React.Component { // TODO: What if we don't have width and height props? const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; + const zoomX = imageWrapper.clientWidth / this.props.width; const zoomY = imageWrapper.clientHeight / this.props.height; + // We set minZoom to the min of the zoomX and zoomY to avoid overflow in + // any direction. We also multiply by MAX_SCALE to get a gap around the + // image by default const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE; + // If minZoom is bigger or equal to 1, it means we scaling the image up + // to fit the viewport and therefore we want to disable zooming, so we + // set the maxZoom to be the same as the minZoom. Otherwise, we are + // scaling the image down - we want the user to be allowed to zoom to + // 100% const maxZoom = minZoom >= 1 ? minZoom : 1; if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom}); From 90f2423eb72bb9839e067aef0bdcd3b6d34275a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 10:35:25 +0200 Subject: [PATCH 09/18] Fix zoom step and coeficient MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 1679c40e76..af379a08e1 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -37,9 +37,9 @@ import {normalizeWheelEvent} from "../../../utils/Mouse"; // Max scale to keep gaps around the image const MAX_SCALE = 0.95; // This is used for the buttons -const ZOOM_STEP = 10; +const ZOOM_STEP = 0.10; // This is used for mouse wheel events -const ZOOM_COEFFICIENT = 0.5; +const ZOOM_COEFFICIENT = 0.0025; // If we have moved only this much we can zoom const ZOOM_DISTANCE = 10; const IMAGE_WRAPPER_CLASS = "mx_ImageView_image_wrapper"; From 0e312977e3f49e38d26302a549f24c57282bed0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 10:36:53 +0200 Subject: [PATCH 10/18] Rework zooming MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 65 +++++++++------------ 1 file changed, 26 insertions(+), 39 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index af379a08e1..e5878d5c0e 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -136,20 +136,8 @@ export default class ImageView extends React.Component { }); } - private onKeyDown = (ev: KeyboardEvent) => { - if (ev.key === Key.ESCAPE) { - ev.stopPropagation(); - ev.preventDefault(); - this.props.onFinished(); - } - }; - - private onWheel = (ev: WheelEvent) => { - ev.stopPropagation(); - ev.preventDefault(); - - const {deltaY} = normalizeWheelEvent(ev); - const newZoom = this.state.zoom - (deltaY * ZOOM_COEFFICIENT); + private zoom(delta: number) { + const newZoom = this.state.zoom + delta; if (newZoom <= this.state.minZoom) { this.setState({ @@ -167,6 +155,30 @@ export default class ImageView extends React.Component { this.setState({ zoom: newZoom, }); + } + + private onWheel = (ev: WheelEvent) => { + ev.stopPropagation(); + ev.preventDefault(); + + const {deltaY} = normalizeWheelEvent(ev); + this.zoom(-(deltaY * ZOOM_COEFFICIENT)); + }; + + private onZoomInClick = () => { + this.zoom(ZOOM_STEP); + }; + + private onZoomOutClick = () => { + this.zoom(-ZOOM_STEP); + }; + + private onKeyDown = (ev: KeyboardEvent) => { + if (ev.key === Key.ESCAPE) { + ev.stopPropagation(); + ev.preventDefault(); + this.props.onFinished(); + } }; private onRotateCounterClockwiseClick = () => { @@ -181,31 +193,6 @@ export default class ImageView extends React.Component { this.setState({ rotation: rotationDegrees }); }; - private onZoomInClick = () => { - if (this.state.zoom >= this.state.maxZoom) { - this.setState({zoom: this.state.maxZoom}); - return; - } - - this.setState({ - zoom: this.state.zoom + ZOOM_STEP, - }); - }; - - private onZoomOutClick = () => { - if (this.state.zoom <= this.state.minZoom) { - this.setState({ - zoom: this.state.minZoom, - translationX: 0, - translationY: 0, - }); - return; - } - this.setState({ - zoom: this.state.zoom - ZOOM_STEP, - }); - }; - private onDownloadClick = () => { const a = document.createElement("a"); a.href = this.props.src; From c1a4204ad30fd8071665e9524aa2010759bdde27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Apr 2021 13:11:41 +0200 Subject: [PATCH 11/18] Use a ref instead of that ugly thing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sometimes I do really weird things and don't know why :D Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index e5878d5c0e..fd559fd3cc 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -42,7 +42,6 @@ const ZOOM_STEP = 0.10; const ZOOM_COEFFICIENT = 0.0025; // If we have moved only this much we can zoom const ZOOM_DISTANCE = 10; -const IMAGE_WRAPPER_CLASS = "mx_ImageView_image_wrapper"; interface IProps { src: string, // the source of the image being displayed @@ -91,6 +90,7 @@ export default class ImageView extends React.Component { // XXX: Refs to functional components private contextMenuButton = createRef(); private focusLock = createRef(); + private imageWrapper = createRef(); private initX = 0; private initY = 0; @@ -114,7 +114,7 @@ export default class ImageView extends React.Component { private calculateZoom = () => { // TODO: What if we don't have width and height props? - const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; + const imageWrapper = this.imageWrapper.current; const zoomX = imageWrapper.clientWidth / this.props.width; const zoomY = imageWrapper.clientHeight / this.props.height; @@ -447,7 +447,9 @@ export default class ImageView extends React.Component { {this.renderContextMenu()}
-
+
Date: Mon, 26 Apr 2021 13:30:14 +0200 Subject: [PATCH 12/18] Fall back to natural height and width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index fd559fd3cc..ee89dabc8e 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -91,6 +91,7 @@ export default class ImageView extends React.Component { private contextMenuButton = createRef(); private focusLock = createRef(); private imageWrapper = createRef(); + private image = createRef(); private initX = 0; private initY = 0; @@ -103,8 +104,10 @@ export default class ImageView extends React.Component { // We have to use addEventListener() because the listener // needs to be passive in order to work with Chromium this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); + // We want to recalculate zoom whenever the windows size changes window.addEventListener("resize", this.calculateZoom); - this.calculateZoom(); + // After the image loads for the first time we want to calculate the zoom + this.image.current.addEventListener("load", this.calculateZoom); } componentWillUnmount() { @@ -112,12 +115,14 @@ export default class ImageView extends React.Component { } private calculateZoom = () => { - // TODO: What if we don't have width and height props? - + const image = this.image.current; const imageWrapper = this.imageWrapper.current; - const zoomX = imageWrapper.clientWidth / this.props.width; - const zoomY = imageWrapper.clientHeight / this.props.height; + const width = this.props.width || image.naturalWidth; + const height = this.props.height || image.naturalHeight; + + const zoomX = imageWrapper.clientWidth / width; + const zoomY = imageWrapper.clientHeight / height; // We set minZoom to the min of the zoomX and zoomY to avoid overflow in // any direction. We also multiply by MAX_SCALE to get a gap around the // image by default @@ -454,6 +459,7 @@ export default class ImageView extends React.Component { src={this.props.src} title={this.props.name} style={style} + ref={this.image} className="mx_ImageView_image" draggable={true} onMouseDown={this.onStartMoving} From b741b3112a7a6801cb9d7fed9f3aa33de8ecfbcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Apr 2021 13:47:06 +0200 Subject: [PATCH 13/18] If the image is small don't scale MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index ee89dabc8e..e815e3be92 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -123,21 +123,26 @@ export default class ImageView extends React.Component { const zoomX = imageWrapper.clientWidth / width; const zoomY = imageWrapper.clientHeight / height; + + // If the image is smaller in both dimensions set its the zoom to 1 to + // display it in its original size + if (zoomX >= 1 && zoomY >= 1) { + this.setState({ + zoom: 1, + minZoom: 1, + maxZoom: 1, + }); + return; + } // We set minZoom to the min of the zoomX and zoomY to avoid overflow in // any direction. We also multiply by MAX_SCALE to get a gap around the // image by default const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE; - // If minZoom is bigger or equal to 1, it means we scaling the image up - // to fit the viewport and therefore we want to disable zooming, so we - // set the maxZoom to be the same as the minZoom. Otherwise, we are - // scaling the image down - we want the user to be allowed to zoom to - // 100% - const maxZoom = minZoom >= 1 ? minZoom : 1; if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom}); this.setState({ minZoom: minZoom, - maxZoom: maxZoom, + maxZoom: 1, }); } From dbca370497ceb7897a26f0869a4bc828512f0e98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Apr 2021 13:48:14 +0200 Subject: [PATCH 14/18] Try to precalculate the zoom from width and height props MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index e815e3be92..0ad8435ef5 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -108,6 +108,8 @@ export default class ImageView extends React.Component { window.addEventListener("resize", this.calculateZoom); // After the image loads for the first time we want to calculate the zoom this.image.current.addEventListener("load", this.calculateZoom); + // Try to precalculate the zoom from width and height props + this.calculateZoom(); } componentWillUnmount() { From e374fcfe9113fb77856bd76b7a9c6e993a4aaa1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Apr 2021 13:49:29 +0200 Subject: [PATCH 15/18] Fix spelling --- src/components/views/elements/ImageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 0ad8435ef5..459b192b43 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -104,7 +104,7 @@ export default class ImageView extends React.Component { // We have to use addEventListener() because the listener // needs to be passive in order to work with Chromium this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); - // We want to recalculate zoom whenever the windows size changes + // We want to recalculate zoom whenever the window's size changes window.addEventListener("resize", this.calculateZoom); // After the image loads for the first time we want to calculate the zoom this.image.current.addEventListener("load", this.calculateZoom); From 3547d1f93b16d25fb9e0b5ce368138774f76c24e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Apr 2021 15:01:06 +0200 Subject: [PATCH 16/18] Change cursor to default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 0ad8435ef5..be5ea72d2c 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -321,7 +321,7 @@ export default class ImageView extends React.Component { if (this.state.moving) { cursor= "grabbing"; } else if (this.state.maxZoom === this.state.minZoom) { - cursor = "pointer"; + cursor = "default"; } else if (this.state.zoom === this.state.minZoom) { cursor = "zoom-in"; } else { From 1fcad1a634b56ffc864a736f9414a98f5aee230b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Apr 2021 15:47:58 +0200 Subject: [PATCH 17/18] Show zoom buttons only if zooming is enabled MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 34 ++++++++++++++------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index f037168b63..fcacae2d39 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -316,11 +316,12 @@ export default class ImageView extends React.Component { render() { const showEventMeta = !!this.props.mxEvent; + const zoomingDisabled = this.state.maxZoom === this.state.minZoom; let cursor; if (this.state.moving) { cursor= "grabbing"; - } else if (this.state.maxZoom === this.state.minZoom) { + } else if (zoomingDisabled) { cursor = "default"; } else if (this.state.zoom === this.state.minZoom) { cursor = "zoom-in"; @@ -412,6 +413,25 @@ export default class ImageView extends React.Component { ); } + let zoomOutButton; + let zoomInButton; + if (!zoomingDisabled) { + zoomOutButton = ( + + + ); + zoomInButton = ( + + + ); + } + return ( { title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }> - - - - + {zoomOutButton} + {zoomInButton} Date: Mon, 26 Apr 2021 15:51:56 +0200 Subject: [PATCH 18/18] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f1b700540f..4d5a9a4f43 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1923,10 +1923,10 @@ "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s", "%(count)s people you know have already joined|other": "%(count)s people you know have already joined", "%(count)s people you know have already joined|one": "%(count)s person you know has already joined", - "Rotate Right": "Rotate Right", - "Rotate Left": "Rotate Left", "Zoom out": "Zoom out", "Zoom in": "Zoom in", + "Rotate Right": "Rotate Right", + "Rotate Left": "Rotate Left", "Download": "Download", "Information": "Information", "View message": "View message",