Merge pull request #459 from gemini-testing/HERMIONE-782.up_scale_to_fit

feat: add diff mode '3-up scaled to fit'

Author: KuznetsovRoman

lib/constants/diff-modes.js

@@ -9,6 +9,11 @@ module.exports = {
         title: '3-up scaled',
         description: 'scaled images in row'
     },
+    THREE_UP_SCALED_TO_FIT: {
+        id: '3-up-scaled-to-fit',
+        title: '3-up scaled to fit',
+        description: 'scaled to browser height images in row'
+    },
     ONLY_DIFF: {
         id: 'only-diff',
         title: 'Only diff',

lib/static/components/controls/selects/index.styl

@@ -39,7 +39,7 @@
 
     &.diff-mode
         .select__dropdown.ui.dropdown
-            min-width: 90px
+            min-width: 95px
 
     &.select_type_group
         .select__dropdown.ui.dropdown

lib/static/components/state/screenshot/resized.js

@@ -17,7 +17,6 @@ class ResizedScreenshot extends Component {
     }
 
     static propTypes = {
-        noCache: PropTypes.bool,
         image: PropTypes.shape({
             path: PropTypes.string.isRequired,
             size: PropTypes.shape({
@@ -26,6 +25,7 @@ class ResizedScreenshot extends Component {
             })
         }).isRequired,
         diffClusters: PropTypes.array,
+        overrideWidth: PropTypes.number,
         // from withEncodeUri
         imageUrl: PropTypes.string.isRequired
     }
@@ -53,7 +53,7 @@ class ResizedScreenshot extends Component {
     }
 
     render() {
-        const {imageUrl, image: {size: imgSize}, diffClusters, style} = this.props;
+        const {imageUrl, image: {size: imgSize}, diffClusters, overrideWidth, style} = this.props;
         const cursorStyle = diffClusters ? {cursor: 'pointer'} : {};
 
         if (!imgSize) {
@@ -76,7 +76,7 @@ class ResizedScreenshot extends Component {
             <div
                 onClick={diffClusters && this._handleDiffClick(diffClusters)}
                 className="image-box__screenshot-container image-box__screenshot-container_fixed-size"
-                style={{width: imgSize.width, paddingTop: `${paddingTop}%`}}
+                style={{width: overrideWidth || imgSize.width, paddingTop: `${paddingTop}%`}}
             >
                 <img src={imageUrl} className={imgClassNames} style={{...style, ...cursorStyle}} />
             </div>

lib/static/components/state/state-fail/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React, {Component, Fragment} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,68 +9,102 @@ import SwipeDiff from './swipe-diff';
 import SwitchDiff from './switch-diff';
 import OnionSkinDiff from './onion-skin-diff';
 import diffModes from '../../../../constants/diff-modes';
+import {types} from '../../modals';
+import useFitImages from './useFitImages';
 
 import './index.styl';
 
-class StateFail extends Component {
-    static propTypes = {
-        image: PropTypes.shape({
-            expectedImg: PropTypes.object.isRequired,
-            actualImg: PropTypes.object.isRequired,
-            diffImg: PropTypes.object.isRequired,
-            diffClusters: PropTypes.array
-        }).isRequired,
-        // from store
-        diffMode: PropTypes.string
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.state = {diffMode: this.props.diffMode};
-    }
+const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened}) => {
+    const [diffMode, setDiffMode] = useState(diffModeProp);
+    const [fitWidths, {expectedRef, actualRef}] = useFitImages(image, isScreenshotAccepterOpened);
 
-    componentWillReceiveProps(nextProps) {
-        if (this.state.diffMode !== nextProps.diffMode) {
-            this.setState({diffMode: nextProps.diffMode});
-        }
-    }
+    useEffect(() => {
+        setDiffMode(diffModeProp);
+    }, [diffModeProp, setDiffMode]);
 
-    _handleDiffModeClick = (diffMode) => {
-        if (this.state.diffMode === diffMode) {
-            return;
-        }
+    const renderDiffModeItem = (mode) => {
+        const className = classNames(
+            'diff-modes__item',
+            {'diff-modes__active': diffMode === mode.id}
+        );
 
-        this.setState({diffMode});
-    }
+        return (
+            <li
+                key={mode.id}
+                title={mode.description}
+                className={className}
+                onClick={() => setDiffMode(mode.id)}
+            >
+                {mode.title}
+            </li>
+        );
+    };
 
-    _renderDiffModeItems() {
-        const diffModeItems = Object.values(diffModes).map((diffMode) => {
-            return this._renderDiffModeItem(diffMode);
-        });
+    const renderDiffModeItems = () => {
+        const diffModeItems = Object.values(diffModes).map(renderDiffModeItem);
 
         return (
             <ul className="diff-modes">
                 {diffModeItems}
             </ul>
         );
-    }
+    };
 
-    _renderDiffModeItem(diffMode) {
-        const className = classNames(
-            'diff-modes__item',
-            {'diff-modes__active': this.state.diffMode === diffMode.id}
+    const getLabelKey = () => {
+        const images = [image.expectedImg, image.actualImg];
+        const sizes = images.map(image => `${image.size.width}${image.size.height}`);
+        const key = sizes.join('');
+
+        return key;
+    };
+
+    const drawImageBox = (image, {label, diffClusters, width, ref} = {}) => {
+        const titleText = `${label} (${image.size.width}x${image.size.height})`;
+        const titleKey = getLabelKey();
+
+        return (
+            <div className="image-box__image" style={{flex: image.size.width}}>
+                {label && <div key={titleKey} ref={ref} className="image-box__title">{titleText}</div>}
+                <ResizedScreenshot
+                    image={image}
+                    diffClusters={diffClusters}
+                    overrideWidth={width}
+                />
+            </div>
         );
+    };
 
-        return <li key={diffMode.id} title={diffMode.description} className={className} onClick={() => this._handleDiffModeClick(diffMode.id)}>{diffMode.title}</li>;
-    }
+    const renderOnlyDiff = () => {
+        const {diffImg, diffClusters} = image;
+
+        return drawImageBox(diffImg, {diffClusters});
+    };
+
+    const drawExpectedAndActual = ({expectedImg, expectedWidth}, {actualImg, actualWidth}) => {
+        return (
+            <Fragment>
+                {drawImageBox(expectedImg, {label: 'Expected', width: expectedWidth, ref: expectedRef})}
+                {drawImageBox(actualImg, {label: 'Actual', width: actualWidth, ref: actualRef})}
+            </Fragment>
+        );
+    };
+
+    const renderThreeImages = (fitWidths = []) => {
+        const {expectedImg, actualImg, diffImg, diffClusters} = image;
+        const [expectedWidth, actualWidth, diffWidth] = fitWidths;
+
+        return <Fragment>
+            {drawExpectedAndActual({expectedImg, expectedWidth}, {actualImg, actualWidth})}
+            {drawImageBox(diffImg, {label: 'Diff', diffClusters, width: diffWidth})}
+        </Fragment>;
+    };
 
-    _renderImages() {
-        const {image: {expectedImg, actualImg}} = this.props;
+    const renderImages = () => {
+        const {expectedImg, actualImg} = image;
 
-        switch (this.state.diffMode) {
+        switch (diffMode) {
             case diffModes.ONLY_DIFF.id:
-                return this._renderOnlyDiff();
+                return renderOnlyDiff();
 
             case diffModes.SWITCH.id:
                 return <SwitchDiff image1={expectedImg} image2={actualImg} />;
@@ -83,60 +117,45 @@ class StateFail extends Component {
 
             case diffModes.THREE_UP_SCALED.id:
                 return <div className="image-box__scaled">
-                    {this._renderThreeImages()}
+                    {renderThreeImages()}
+                </div>;
+
+            case diffModes.THREE_UP_SCALED_TO_FIT.id:
+                return <div className="image-box__scaled">
+                    {renderThreeImages(fitWidths)}
                 </div>;
 
             case diffModes.THREE_UP.id:
             default:
-                return this._renderThreeImages();
+                return renderThreeImages();
         }
-    }
-
-    _renderOnlyDiff() {
-        const {image: {diffImg, diffClusters}} = this.props;
-
-        return this._drawImageBox(diffImg, {diffClusters});
-    }
-
-    _renderThreeImages() {
-        const {image: {expectedImg, actualImg, diffImg, diffClusters}} = this.props;
-
-        return <Fragment>
-            {this._drawExpectedAndActual(expectedImg, actualImg)}
-            {this._drawImageBox(diffImg, {label: 'Diff', diffClusters})}
-        </Fragment>;
-    }
-
-    render() {
-        return (
-            <Fragment>
-                {this._renderDiffModeItems()}
-                {this._renderImages()}
-            </Fragment>
-        );
-    }
-
-    _drawExpectedAndActual(expectedImg, actualImg) {
-        return (
-            <Fragment>
-                {this._drawImageBox(expectedImg, {label: 'Expected'})}
-                {this._drawImageBox(actualImg, {label: 'Actual'})}
-            </Fragment>
-        );
-    }
+    };
+
+    return (
+        <Fragment>
+            {renderDiffModeItems()}
+            {renderImages()}
+        </Fragment>
+    );
+};
+
+StateFail.propTypes = {
+    image: PropTypes.shape({
+        expectedImg: PropTypes.object.isRequired,
+        actualImg: PropTypes.object.isRequired,
+        diffImg: PropTypes.object.isRequired,
+        diffClusters: PropTypes.array
+    }).isRequired,
+    // from store
+    diffMode: PropTypes.string,
+    isScreenshotAccepterOpened: PropTypes.bool.isRequired
+};
 
-    _drawImageBox(image, {label, diffClusters} = {}) {
-        const text = `${label} (${image.size.width}x${image.size.height})`;
+export default connect(
+    ({modals, view}) => {
+        const diffMode = view.diffMode;
+        const isScreenshotAccepterOpened = modals.some(modal => modal.id === types.SCREENSHOT_ACCEPTER);
 
-        return (
-            <div className="image-box__image" style={{flex: image.size.width}}>
-                {label && <div className="image-box__title">{text}</div>}
-                <ResizedScreenshot image={image} diffClusters={diffClusters}/>
-            </div>
-        );
+        return {diffMode, isScreenshotAccepterOpened};
     }
-}
-
-export default connect(
-    ({view: {diffMode}}) => ({diffMode})
 )(StateFail);

lib/static/components/state/state-fail/index.styl

@@ -4,7 +4,7 @@
     border-bottom: 1px solid #ccc
     padding: 5px 0
     margin: 10px auto
-    width: 420px
+    width: 520px
 
     &__item
         display: inline-block

lib/static/components/state/state-fail/useFitImages.js

@@ -0,0 +1,63 @@
+import {useMemo} from 'react';
+import {clamp} from 'lodash';
+import useWindowSize from '../../../hooks/useWindowSize';
+import useElementSize from '../../../hooks/useElementSize';
+
+const TITLE_DEFAULT_TOP_OFFSET = 280;
+const MIN_SHRINK_RATIO = 1;
+const MAX_SHRINK_RATIO = 2;
+
+export default function useFitImages(image, isScreenshotAccepterOpened) {
+    const {height: windowHeight} = useWindowSize();
+    const [expectedRef, expectedPos] = useElementSize();
+    const [actualRef, actualPos] = useElementSize();
+
+    const imagesWidth = useMemo(() => {
+        return [image.expectedImg, image.actualImg, image.diffImg].map(img => img.size.width);
+    }, [image]);
+
+    const imagesHeight = useMemo(() => {
+        return [image.expectedImg, image.actualImg, image.diffImg].map(img => img.size.height);
+    }, [image]);
+
+    const sectionsWidth = useMemo(() => {
+        const expectedWidth = expectedPos.width;
+        const actualWidth = actualPos.width;
+        const diffWidth = Math.max(expectedWidth, actualWidth);
+
+        return [expectedWidth, actualWidth, diffWidth];
+    }, [expectedPos, actualPos]);
+
+    const displayedImagesWidth = useMemo(() => {
+        return sectionsWidth.map((sectionWidth, i) => Math.min(sectionWidth, imagesWidth[i]));
+    }, [sectionsWidth, imagesWidth]);
+
+    const displayedImagesHeight = useMemo(() => {
+        return imagesHeight.map((height, i) => height * displayedImagesWidth[i] / imagesWidth[i]);
+    }, [imagesHeight, imagesWidth, displayedImagesWidth]);
+
+    const topOffsets = useMemo(() => {
+        const expectedRightBorder = expectedPos.left + expectedPos.width;
+        const actualLeftBorder = actualPos.left;
+        const imageGap = (actualLeftBorder - expectedRightBorder) / 2;
+
+        const expectedTitleOffset = isScreenshotAccepterOpened ? expectedPos.top : TITLE_DEFAULT_TOP_OFFSET;
+        const actualTitleOffset = isScreenshotAccepterOpened ? actualPos.top : TITLE_DEFAULT_TOP_OFFSET;
+
+        const expectedImageOffset = expectedTitleOffset + expectedPos.height + imageGap;
+        const actualImageOffset = actualTitleOffset + actualPos.height + imageGap;
+        const diffImageOffset = Math.min(expectedImageOffset, actualImageOffset);
+
+        return [expectedImageOffset, actualImageOffset, diffImageOffset];
+    }, [expectedPos, actualPos, isScreenshotAccepterOpened]);
+
+    return useMemo(() => {
+        const availableHeights = topOffsets.map(offset => windowHeight - offset);
+        const shrinkCoef = displayedImagesHeight.reduce((acc, height, i) => {
+            return clamp(height / availableHeights[i], acc, MAX_SHRINK_RATIO);
+        }, MIN_SHRINK_RATIO);
+        const fitWidths = displayedImagesWidth.map((width) => width / shrinkCoef);
+
+        return [fitWidths, {expectedRef, actualRef}];
+    }, [topOffsets, displayedImagesWidth, windowHeight]);
+}

lib/static/hooks/useElementSize.js

@@ -2,7 +2,7 @@ import {useState, useCallback, useLayoutEffect} from 'react';
 
 import useEventListener from './useEventListener';
 
-export default function useElementSize() {
+export default function useElementSize({shouldListenResize = false} = {}) {
     const [ref, setRef] = useState(null);
     const [size, setSize] = useState({
         width: 0,
@@ -20,7 +20,7 @@ export default function useElementSize() {
         });
     }, [ref && ref.offsetHeight, ref && ref.offsetWidth, ref && ref.offsetLeft, ref && ref.offsetTop]);
 
-    useEventListener('resize', handlePosition);
+    shouldListenResize && useEventListener('resize', handlePosition);
 
     useLayoutEffect(() => {
         handlePosition();