mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-16 05:51:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix animation issues

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-23 13:52:29 +02:00
parent 8d5fd9306f
commit 91a11b6997
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
1 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -86,10 +86,10 @@ export default class ImageView extends React.Component<IProps, IState> {
constructor(props) { constructor(props) {
super(props); super(props);
const { thumbnailInfo, width } = this.props; const { thumbnailInfo } = this.props;
this.state = { this.state = {
zoom: thumbnailInfo?.width / width ?? 0, zoom: 0, // We default to 0 and override this in imageLoaded once we have naturalSize
minZoom: MAX_SCALE, minZoom: MAX_SCALE,
maxZoom: MAX_SCALE, maxZoom: MAX_SCALE,
rotation: 0, rotation: 0,
@ -120,7 +120,8 @@ export default class ImageView extends React.Component<IProps, IState> {
private previousX = 0; private previousX = 0;
private previousY = 0; private previousY = 0;
private loaded = false; private animatingLoading = false;
private imageIsLoaded = false;
componentDidMount() { componentDidMount() {
// We have to use addEventListener() because the listener // We have to use addEventListener() because the listener
@ -139,12 +140,25 @@ export default class ImageView extends React.Component<IProps, IState> {
} }
private imageLoaded = async () => { private imageLoaded = async () => {
// First, we calculate the zoom, so that the image has the same size as
// the thumbnail
const { thumbnailInfo } = this.props;
if (thumbnailInfo?.width) {
await this.setState({ zoom: thumbnailInfo.width / this.image.current.naturalWidth });
}
// Once the zoom is set, we the image is considered loaded and we can
// start animating it into the center of the screen
this.imageIsLoaded = true;
this.animatingLoading = true;
this.setZoomAndRotation(); this.setZoomAndRotation();
await this.setState({ await this.setState({
translationX: 0, translationX: 0,
translationY: 0, translationY: 0,
}); });
this.loaded = true;
// Once the position is set, there is no need to animate anymore
this.animatingLoading = false;
}; };
private recalculateZoom = () => { private recalculateZoom = () => {
@ -394,8 +408,8 @@ export default class ImageView extends React.Component<IProps, IState> {
const zoomingDisabled = this.state.maxZoom === this.state.minZoom; const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
let transition; let transition;
if (!this.loaded) transition = "transform 300ms ease 0s"; if (this.animatingLoading) transition = "transform 300ms ease 0s";
else if (this.state.moving) transition = null; else if (this.state.moving || !this.imageIsLoaded) transition = null;
else transition = "transform 200ms ease 0s"; else transition = "transform 200ms ease 0s";
let cursor; let cursor;