Add auto-width to zoom options

src/common/components/layouts/pages/inspect/Inspect.js

@@ -8,6 +8,7 @@ import _ from 'lodash';
 import AppPages from '../../../AppPages';
 import { JOB_STATUS, TASK_STATUS } from '../../../../store/constants';
 import { WARNING_MESSAGES } from '../../../../services/constants';
+import { scaleOptions } from './constants';
 import { getTreeIds, setRulesTreeIds, getAvailableGroups } from '../../../../services/treeService';
 import { lockApp, resetOnFileUpload, unlockApp } from '../../../../store/application/actions';
 import { getJobStatus, getTaskStatus } from '../../../../store/job/selectors';
@@ -37,18 +38,11 @@ function Inspect({ tagsNames, jobStatus, taskStatus, ruleSummaries, lockApp, unl
     const [ruleSummariesFiltered, setRuleSummariesFiltered] = useState(ruleSummaries);
     const [errorsMap, setErrorsMap] = useState({});
     const [scale, setScale] = useState('1');
+    const [scaleMode, setScaleMode] = useState('');
     const [isTreeShow, setIsTreeShow] = useState(false);
     const [treeData, setTreeData] = useState({});
     const [roleMap, setRoleMap] = useState(false);
-    const scaleOptions = [
-        { label: '50%', value: '0.5' },
-        { label: '75%', value: '0.75' },
-        { label: '100%', value: '1' },
-        { label: '150%', value: '1.5' },
-        { label: '200%', value: '2' },
-        { label: '250%', value: '2.5' },
-        { label: '300%', value: '3' },
-    ];
+
     const onDocumentReady = useCallback(
         eMap => {
             setErrorsMap(eMap);
@@ -133,7 +127,14 @@ function Inspect({ tagsNames, jobStatus, taskStatus, ruleSummaries, lockApp, unl
                     showStructure: isTreeShow,
                 })}
             >
-                <Toolbar name={pdfName} scale={scale} scaleOptions={scaleOptions} onScaleChanged={setScale} />
+                <Toolbar
+                    name={pdfName}
+                    scale={scale}
+                    mode={scaleMode}
+                    scaleOptions={scaleOptions}
+                    onScaleChanged={setScale}
+                    onModeChanged={setScaleMode}
+                />
                 <Tree
                     selectedCheck={selectedCheck}
                     setSelectedCheck={setSelectedCheck}
@@ -163,6 +164,8 @@ function Inspect({ tagsNames, jobStatus, taskStatus, ruleSummaries, lockApp, unl
                     initTree={initTree}
                     ruleSummariesFiltered={ruleSummariesFiltered}
                     scale={scale}
+                    scaleMode={scaleMode}
+                    setScale={setScale}
                 />
                 <Structure
                     tree={treeData.tree}

src/common/components/layouts/pages/inspect/constants.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { getRange } from '../../../../services/treeService';
 import errorTags from './validationErrorTags.json';
 
 export const GROUPS = _.keys(errorTags);
@@ -7,3 +8,22 @@ export const TAGS = _.chain(errorTags)
     .flatten()
     .value();
 export const TAGS_NAMES = _.map(TAGS, ({ name }) => name);
+
+export const scaleOptions = {
+    advanced: [
+        { label: 'Page fit', value: 'page-fit' },
+        { label: 'Page width', value: 'page-width' },
+    ],
+    basic: [
+        { label: '50%', value: '0.5' },
+        { label: '75%', value: '0.75' },
+        { label: '100%', value: '1' },
+        { label: '150%', value: '1.5' },
+        { label: '200%', value: '2' },
+        { label: '250%', value: '2.5' },
+        { label: '300%', value: '3' },
+    ],
+};
+export const scaleBasicValues = scaleOptions.basic.map(({ value }) => value);
+export const scaleAdvancedValues = scaleOptions.advanced.map(({ value }) => value);
+export const scaleAutoValues = getRange(+scaleBasicValues[0], +scaleBasicValues.at(-1), 0.025, 3);

src/common/components/layouts/pages/inspect/pdfDocument/PdfDocument.js

@@ -4,13 +4,16 @@ import PropTypes from 'prop-types';
 import PdfViewer from 'verapdf-js-viewer';
 import _ from 'lodash';
 
+import { useDebouncedResizeObserver } from '../../../../../hooks/useDebouncedResizeObserver';
 import { getFileName, getPdfFiles } from '../../../../../store/pdfFiles/selectors';
 import { getRuleSummaries } from '../../../../../store/job/result/selectors';
 import { convertContextToPath, findAllMcid, getCheckId } from '../../../../../services/pdfService';
+import { findNearToOneIndexInSortArray } from '../../../../../services/treeService';
 import { getPage, isFileUploadMode } from '../../../../../store/application/selectors';
 import { setNumPages, setPage } from '../../../../../store/application/actions';
 import { getItem } from '../../../../../services/localStorageService';
 import { LS_ERROR_MESSAGES_LANGUAGE } from '../../../../../store/constants';
+import { scaleAdvancedValues, scaleAutoValues } from '../constants';
 import { getProfile } from '../../../../../store/job/settings/selectors';
 import { getFileNameLink } from '../../../../../store/pdfLink/selectors';
 import { errorMessagesMap, errorProfiles, languageEnum } from '../tree/Tree';
@@ -39,10 +42,12 @@ PdfDocument.propTypes = {
     isTreeShow: PropTypes.bool.isRequired,
     expandedRules: PropTypes.arrayOf(PropTypes.number).isRequired,
     scale: PropTypes.string.isRequired,
+    scaleMode: PropTypes.string.isRequired,
     page: PropTypes.number.isRequired,
     initTree: PropTypes.func.isRequired,
     setSelectedCheck: PropTypes.func.isRequired,
     setSelectedNodeId: PropTypes.func.isRequired,
+    setScale: PropTypes.func.isRequired,
     setPdfName: PropTypes.func.isRequired,
     onPageChange: PropTypes.func.isRequired,
     setNumPages: PropTypes.func.isRequired,
@@ -109,6 +114,7 @@ function getTitleDescription({ specification, clause, testNumber }, errorMessage
 }
 
 function PdfDocument(props) {
+    const { ref, width: wrapperWidth, height: wrapperHeight } = useDebouncedResizeObserver(500);
     const [structureTree, setStructureTree] = useState({});
     const [mapOfErrors, setMapOfErrors] = useState({});
     const [indicesOfVisibleErrors, setIndicesOfVisibleErrors] = useState(null);
@@ -255,9 +261,42 @@ function PdfDocument(props) {
         });
         setIndicesOfVisibleErrors(indicesOfVisibleBboxes);
     }, [createMapOfErrors, props.ruleSummariesFiltered, structureTree, mapOfErrors]);
+    useEffect(() => {
+        if (!scaleAdvancedValues.includes(props.scaleMode)) {
+            return;
+        }
+
+        const pdfPage = document.querySelector('.pdf-page');
+
+        if (!_.isNil(wrapperWidth) && !_.isNil(wrapperHeight) && !_.isNil(pdfPage)) {
+            const { width: pageWidth, height: pageHeight } = pdfPage.getBoundingClientRect();
+            let ratio;
+
+            switch (props.scaleMode) {
+                case scaleAdvancedValues[0]: {
+                    ratio = Math.max(pageWidth / wrapperWidth, pageHeight / wrapperHeight);
+                    break;
+                }
+                case scaleAdvancedValues[1]: {
+                    ratio = pageWidth / wrapperWidth;
+                    break;
+                }
+                default: {
+                    ratio = 1;
+                    break;
+                }
+            }
+
+            props.setScale(prev => {
+                const index = findNearToOneIndexInSortArray(scaleAutoValues.map(value => (ratio * value) / prev));
+                return scaleAutoValues[index] ?? prev;
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.scaleMode, wrapperWidth, wrapperHeight]);
 
     return (
-        <div className="pdf-viewer__wrapper" role="button" tabIndex={0}>
+        <div ref={ref} className="pdf-viewer__wrapper" role="button" tabIndex={0}>
             {props.warningMessage && (
                 <Alert severity="warning">
                     {props.warningMessage}

src/common/components/layouts/pages/inspect/structure/Structure.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import useResizeObserver from 'use-resize-observer';
 import _ from 'lodash';
 
-import useResizeObserver from 'use-resize-observer';
 import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';

src/common/components/layouts/pages/inspect/toolbar/Toolbar.js

@@ -2,12 +2,13 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import _ from 'lodash';
+
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import _ from 'lodash';
 
 import AppPages from '../../../../AppPages';
 import { getJobId } from '../../../../../store/job/selectors';
@@ -16,23 +17,26 @@ import Select from '../../../../shared/select/Select';
 import Pagination from '../../../../shared/pagination/Pagination';
 import { getNumPages, getPage } from '../../../../../store/application/selectors';
 import { setPage } from '../../../../../store/application/actions';
+import { scaleAdvancedValues } from '../constants';
 
 import './Toolbar.scss';
 
 const BACK = 'Back to summary';
 
-function Toolbar({ jobId, name, scale, scaleOptions, page, numPages, onScaleChanged, setPage }) {
+function Toolbar({ jobId, name, scale, mode, scaleOptions, page, numPages, onScaleChanged, onModeChanged, setPage }) {
     const history = useHistory();
+    const isAutozoom = useMemo(() => scaleAdvancedValues.includes(mode), [mode]);
     const onBackClick = useMemo(() => () => history.push(AppPages.RESULTS.url(jobId)), [history, jobId]);
-    const currentScaleIndex = useMemo(() => _.findIndex(scaleOptions, { value: scale }), [scaleOptions, scale]);
+    const currentScaleIndex = useMemo(() => _.findIndex(scaleOptions.basic, { value: scale }), [scaleOptions, scale]);
+
     const onZoomIn = useCallback(() => {
-        if (currentScaleIndex < scaleOptions.length - 1) {
-            onScaleChanged(scaleOptions[currentScaleIndex + 1].value);
+        if (currentScaleIndex < scaleOptions.basic.length - 1) {
+            onScaleChanged(scaleOptions.basic[currentScaleIndex + 1].value);
         }
     }, [scaleOptions, currentScaleIndex, onScaleChanged]);
     const onZoomOut = useCallback(() => {
         if (currentScaleIndex > 0) {
-            onScaleChanged(scaleOptions[currentScaleIndex - 1].value);
+            onScaleChanged(scaleOptions.basic[currentScaleIndex - 1].value);
         }
     }, [scaleOptions, currentScaleIndex, onScaleChanged]);
 
@@ -51,19 +55,25 @@ function Toolbar({ jobId, name, scale, scaleOptions, page, numPages, onScaleChan
             </section>
             <section className="toolbar__end">
                 <Pagination page={page} numPages={numPages} setPage={setPage} />
-                <IconButton onClick={onZoomOut} size="small" disabled={!currentScaleIndex}>
+                <IconButton onClick={onZoomOut} size="small" disabled={!currentScaleIndex || isAutozoom}>
                     <RemoveIcon />
                 </IconButton>
-                <IconButton onClick={onZoomIn} size="small" disabled={currentScaleIndex === scaleOptions.length - 1}>
+                <IconButton
+                    onClick={onZoomIn}
+                    size="small"
+                    disabled={currentScaleIndex === scaleOptions.basic.length - 1 || isAutozoom}
+                >
                     <AddIcon />
                 </IconButton>
                 <Select
                     width={30}
                     id="scaleSelect"
                     className="toolbar__select"
-                    options={scaleOptions}
+                    options={[...scaleOptions.advanced, ...scaleOptions.basic]}
                     value={scale}
+                    mode={mode}
                     onChange={onScaleChanged}
+                    onMode={onModeChanged}
                 />
             </section>
         </section>
@@ -74,10 +84,12 @@ Toolbar.propTypes = {
     name: PropTypes.string,
     jobId: PropTypes.string,
     scale: PropTypes.string.isRequired,
-    scaleOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
+    mode: PropTypes.string.isRequired,
+    scaleOptions: PropTypes.object.isRequired,
     page: PropTypes.number.isRequired,
     numPages: PropTypes.number.isRequired,
     onScaleChanged: PropTypes.func.isRequired,
+    onModeChanged: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {

src/common/components/shared/select/Select.js

@@ -1,19 +1,41 @@
-import React, { useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import MaterialSelect from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
 import MenuItem from '@material-ui/core/MenuItem';
+import { scaleAdvancedValues } from '../../layouts/pages/inspect/constants';
+
 import './Select.scss';
 
-function Select({ id, options, value, labelId, disabled, onChange }) {
-    const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
+function Select({ id, options, value, mode, labelId, disabled, onChange, onMode }) {
+    const [selectValue, setSelectValue] = useState(value);
+
+    const handleChange = useCallback(
+        ({ target: { value: newValue } }) => {
+            if (scaleAdvancedValues.includes(newValue)) {
+                onMode?.(newValue);
+                setSelectValue(newValue);
+            } else {
+                onMode?.('');
+                onChange(newValue);
+            }
+        },
+        [onMode, onChange]
+    );
+
+    useEffect(() => {
+        if (!scaleAdvancedValues.includes(mode)) {
+            setSelectValue(value);
+        }
+    }, [mode, value]);
 
     return (
         <FormControl className="select-form-controller" disabled={disabled}>
             <MaterialSelect
                 className="select-form-controller__select"
                 id={id}
-                value={value}
+                value={selectValue}
                 labelId={labelId}
                 onChange={handleChange}
                 MenuProps={{
@@ -40,10 +62,12 @@ Select.propTypes = {
     id: PropTypes.string.isRequired,
     options: PropTypes.arrayOf(OptionShape).isRequired,
     value: PropTypes.string,
+    mode: PropTypes.string,
     labelId: PropTypes.string,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
     onChange: PropTypes.func.isRequired,
+    onMode: PropTypes.func,
 };
 
 Select.defaultProps = {

src/common/hooks/useDebouncedResizeObserver.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import useResizeObserver from 'use-resize-observer';
+import _ from 'lodash';
+
+export const useDebouncedResizeObserver = delay => {
+    const [size, setSize] = React.useState({});
+    const onResize = React.useMemo(() => _.debounce(setSize, delay, { leading: true }), [delay]);
+    const { ref } = useResizeObserver({ onResize });
+    return { ref, ...size };
+};

src/common/services/treeService.js

@@ -47,6 +47,19 @@ const findIdByObjNumbers = (node, pathArray) => {
     return findIdByObjNumbers(nextNode, pathArray);
 };
 
+export const getRange = (start, stop, step, digits = 1) =>
+    Array.from({ length: (stop - start) / step + 1 }, (_, i) => (start + i * step).toFixed(digits));
+
+export const findNearToOneIndexInSortArray = arr => {
+    if (!Array.isArray(arr)) return null;
+    for (let i = 0; i < arr.length; i++) {
+        if (arr[i] < 1 && (arr[i + 1] > 1 || _.isNil(arr[i + 1]))) {
+            return i;
+        }
+    }
+    return null;
+};
+
 export const getTreeIds = (node, ids = []) => {
     if (_.isNil(node)) return ids;
     if (!node.hasOwnProperty('final')) ids.push(node.id);