PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use a ref instead of that ugly thing

Browse source 
Sometimes I do really weird things and don't know why :D

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-04-26 13:11:41 +02:00
parent 0e312977e3
commit c1a4204ad3
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/elements/ImageView.tsx
View file

@ -42,7 +42,6 @@ const ZOOM_STEP = 0.10;
const ZOOM_COEFFICIENT = 0.0025; const ZOOM_COEFFICIENT = 0.0025;
// If we have moved only this much we can zoom // If we have moved only this much we can zoom
const ZOOM_DISTANCE = 10; const ZOOM_DISTANCE = 10;
const IMAGE_WRAPPER_CLASS = "mx_ImageView_image_wrapper";
interface IProps { interface IProps {
src: string, // the source of the image being displayed src: string, // the source of the image being displayed
@ -91,6 +90,7 @@ export default class ImageView extends React.Component<IProps, IState> {
// XXX: Refs to functional components // XXX: Refs to functional components
private contextMenuButton = createRef<any>(); private contextMenuButton = createRef<any>();
private focusLock = createRef<any>(); private focusLock = createRef<any>();
private imageWrapper = createRef<HTMLDivElement>();
private initX = 0; private initX = 0;
private initY = 0; private initY = 0;
@ -114,7 +114,7 @@ export default class ImageView extends React.Component<IProps, IState> {
private calculateZoom = () => { private calculateZoom = () => {
// TODO: What if we don't have width and height props? // 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 zoomX = imageWrapper.clientWidth / this.props.width;
const zoomY = imageWrapper.clientHeight / this.props.height; const zoomY = imageWrapper.clientHeight / this.props.height;
@ -447,7 +447,9 @@ export default class ImageView extends React.Component<IProps, IState> {
{this.renderContextMenu()} {this.renderContextMenu()}
</div> </div>
</div> </div>
<div className={IMAGE_WRAPPER_CLASS}> <div
className="mx_ImageView_image_wrapper"
ref={this.imageWrapper}>
<img <img
src={this.props.src} src={this.props.src}
title={this.props.name} title={this.props.name}