feat: Modal + ViewportDownloadForm (#1799)
* feat: Modal + ViewportDownloadForm * styles for image preview box * modal update & close handler * open modal for Learn More (search info) * change modal default alignment * Update platform/ui/src/components/InputNumber/InputNumber.mdx * nuke inputNumber and use inputText with refactor * make input more reusable * revert inputText "number" stuff * replace inputText to Input * fix input spacing + label * fix modal overlay classes * fix inline styles * fix onclick learn more * fix close icon * revert transition * remove inline styles * remove unecessary stuff
This commit is contained in:
Rodrigo Antinarelli
GitHub
parent
554b9a0db4
commit
edd4a4118c
@ -145,8 +145,4 @@ CornerstoneViewportDownloadForm.propTypes = {
|
||||
activeViewportIndex: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
// export default CornerstoneViewportDownloadForm;
|
||||
|
||||
export default function HelloWorld() {
|
||||
return <div>Hello World</div>;
|
||||
}
|
||||
export default CornerstoneViewportDownloadForm;
|
||||
|
||||
@ -33,7 +33,7 @@ const serviceImplementation = {
|
||||
function _show({
|
||||
content = null,
|
||||
contentProps = null,
|
||||
shouldCloseOnEsc = false,
|
||||
shouldCloseOnEsc = true,
|
||||
isOpen = true,
|
||||
closeButton = true,
|
||||
title = null,
|
||||
|
||||
@ -75,6 +75,7 @@ export {
|
||||
Typography,
|
||||
Viewport,
|
||||
ViewportActionBar,
|
||||
ViewportDownloadForm,
|
||||
ViewportGrid,
|
||||
ViewportPane,
|
||||
} from './src/components';
|
||||
|
||||
7
platform/ui/src/assets/icons/close.svg
Normal file
7
platform/ui/src/assets/icons/close.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
11
platform/ui/src/assets/icons/link.svg
Normal file
11
platform/ui/src/assets/icons/link.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-labelledby="title"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="m5.364 28.917c1.047 1.046 2.422 1.57 3.797 1.57 1.376 0 2.751-0.523 3.798-1.572l7.552-7.554c1.016-1.014 1.574-2.361 1.574-3.797 -0.001-1.432-0.558-2.781-1.574-3.796l-2.297-2.298 -2.009 2.009 2.297 2.298c0.478 0.478 0.741 1.113 0.741 1.788 0 0.674-0.264 1.309-0.741 1.786l-7.553 7.555c-0.987 0.985-2.59 0.985-3.576 0l-2.297-2.298c-0.987-0.985-0.987-2.589 0-3.576l3.775-3.776 -2.009-2.009 -3.776 3.776c-2.094 2.096-2.092 5.502 0 7.595l2.299 2.3zM26.695 2.992" />
|
||||
<path d="m26.695 2.992c-1.014-1.016-2.362-1.575-3.797-1.575 -0.001 0-0.001 0-0.002 0 -1.435 0-2.784 0.56-3.798 1.573l-7.551 7.553c-1.017 1.016-1.576 2.363-1.576 3.799 0 1.434 0.558 2.784 1.574 3.797l2.297 2.297 2.01-2.009 -2.298-2.297c-0.477-0.477-0.741-1.113-0.741-1.788 0-0.676 0.265-1.311 0.742-1.788l7.553-7.555c0.477-0.477 1.111-0.74 1.789-0.74 0 0 0 0 0.001 0 0.674 0 1.309 0.264 1.786 0.74l2.297 2.299c0.477 0.477 0.74 1.111 0.74 1.788 0 0.674-0.264 1.311-0.74 1.788l-3.776 3.777 2.009 2.009 3.776-3.777c1.014-1.013 1.573-2.363 1.574-3.797 0-1.435-0.56-2.784-1.574-3.797l-2.295-2.296z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
11
platform/ui/src/assets/icons/unlink.svg
Normal file
11
platform/ui/src/assets/icons/unlink.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-labelledby="unlink"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Unlink</title>
|
||||
<path d="M304.083 388.936c4.686 4.686 4.686 12.284 0 16.971l-65.057 65.056c-54.709 54.711-143.27 54.721-197.989 0-54.713-54.713-54.719-143.27 0-197.989l65.056-65.057c4.686-4.686 12.284-4.686 16.971 0l22.627 22.627c4.686 4.686 4.686 12.284 0 16.971L81.386 311.82c-34.341 34.341-33.451 88.269.597 120.866 32.577 31.187 84.788 31.337 117.445-1.32l65.057-65.056c4.686-4.686 12.284-4.686 16.971 0l22.627 22.626zm-56.568-243.245l64.304-64.304c34.346-34.346 88.286-33.453 120.882.612 31.18 32.586 31.309 84.785-1.335 117.43l-65.056 65.057c-4.686 4.686-4.686 12.284 0 16.971l22.627 22.627c4.686 4.686 12.284 4.686 16.971 0l65.056-65.057c54.711-54.709 54.721-143.271 0-197.99-54.71-54.711-143.27-54.72-197.989 0l-65.057 65.057c-4.686 4.686-4.686 12.284 0 16.971l22.627 22.627c4.685 4.685 12.283 4.685 16.97-.001zm238.343 362.794l22.627-22.627c4.686-4.686 4.686-12.284 0-16.971L43.112 3.515c-4.686-4.686-12.284-4.686-16.971 0L3.515 26.142c-4.686 4.686-4.686 12.284 0 16.971l465.373 465.373c4.686 4.686 12.284 4.686 16.97-.001z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -4,6 +4,7 @@ import React from 'react';
|
||||
import arrowDown from './../../assets/icons/arrow-down.svg';
|
||||
import calendar from './../../assets/icons/calendar.svg';
|
||||
import cancel from './../../assets/icons/cancel.svg';
|
||||
import close from './../../assets/icons/close.svg';
|
||||
import dottedCircle from './../../assets/icons/dotted-circle.svg';
|
||||
import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
|
||||
import chevronDown from './../../assets/icons/chevron-down.svg';
|
||||
@ -16,6 +17,7 @@ import info from './../../assets/icons/info.svg';
|
||||
import infoLink from './../../assets/icons/info-link.svg';
|
||||
import launchArrow from './../../assets/icons/launch-arrow.svg';
|
||||
import launchInfo from './../../assets/icons/launch-info.svg';
|
||||
import link from './../../assets/icons/link.svg';
|
||||
import listBullets from './../../assets/icons/list-bullets.svg';
|
||||
import lock from './../../assets/icons/lock.svg';
|
||||
import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
|
||||
@ -30,6 +32,7 @@ import sorting from './../../assets/icons/sorting.svg';
|
||||
import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
|
||||
import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
|
||||
import tracked from './../../assets/icons/tracked.svg';
|
||||
import unlink from './../../assets/icons/unlink.svg';
|
||||
|
||||
/** Tools */
|
||||
import toolZoom from './../../assets/icons/tool-zoom.svg';
|
||||
@ -47,6 +50,7 @@ const ICONS = {
|
||||
'arrow-down': arrowDown,
|
||||
calendar: calendar,
|
||||
cancel: cancel,
|
||||
close: close,
|
||||
'dotted-circle': dottedCircle,
|
||||
'circled-checkmark': circledCheckmark,
|
||||
'chevron-down': chevronDown,
|
||||
@ -59,6 +63,7 @@ const ICONS = {
|
||||
'info-link': infoLink,
|
||||
'launch-arrow': launchArrow,
|
||||
'launch-info': launchInfo,
|
||||
link: link,
|
||||
'list-bullets': listBullets,
|
||||
lock: lock,
|
||||
'logo-ohif-small': logoOhifSmall,
|
||||
@ -73,6 +78,7 @@ const ICONS = {
|
||||
'sorting-active-up': sortingActiveUp,
|
||||
sorting: sorting,
|
||||
tracked: tracked,
|
||||
unlink: unlink,
|
||||
|
||||
/** Tools */
|
||||
'tool-zoom': toolZoom,
|
||||
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const baseClasses =
|
||||
'text-center items-center justify-center outline-none font-bold focus:outline-none';
|
||||
'text-center items-center justify-center transition duration-300 ease-in-out outline-none font-bold focus:outline-none';
|
||||
|
||||
const roundedClasses = {
|
||||
none: '',
|
||||
@ -84,7 +84,7 @@ const IconButton = ({
|
||||
}) => {
|
||||
const buttonElement = useRef(null);
|
||||
|
||||
const handleOnClick = (e) => {
|
||||
const handleOnClick = e => {
|
||||
buttonElement.current.blur();
|
||||
onClick(e);
|
||||
};
|
||||
@ -113,7 +113,7 @@ const IconButton = ({
|
||||
};
|
||||
|
||||
IconButton.defaultProps = {
|
||||
onClick: () => { },
|
||||
onClick: () => {},
|
||||
color: 'default',
|
||||
disabled: false,
|
||||
fullWidth: false,
|
||||
|
||||
@ -4,11 +4,11 @@ import Label from '../Label';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const baseInputClasses =
|
||||
'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-white hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
|
||||
'shadow transition duration-300 appearance-none border border-primary-main hover:border-gray-500 focus:border-gray-500 focus:outline-none rounded w-full py-2 px-3 mt-2 text-sm text-white leading-tight focus:outline-none';
|
||||
|
||||
const transparentClasses = {
|
||||
true: 'bg-transparent',
|
||||
false: '',
|
||||
false: 'bg-black',
|
||||
};
|
||||
|
||||
const Input = ({
|
||||
@ -16,7 +16,7 @@ const Input = ({
|
||||
containerClassName = '',
|
||||
labelClassName = '',
|
||||
className = '',
|
||||
transparent = true,
|
||||
transparent = false,
|
||||
type = 'text',
|
||||
value,
|
||||
onChange,
|
||||
|
||||
@ -23,7 +23,7 @@ const InputText = ({
|
||||
type="text"
|
||||
containerClassName="mr-2"
|
||||
value={value}
|
||||
onChange={(event) => {
|
||||
onChange={event => {
|
||||
onChange(event.target.value);
|
||||
}}
|
||||
/>
|
||||
@ -33,15 +33,17 @@ const InputText = ({
|
||||
|
||||
InputText.defaultProps = {
|
||||
value: '',
|
||||
isSortable: false,
|
||||
onLabelClick: () => {},
|
||||
sortDirection: 'none',
|
||||
};
|
||||
|
||||
InputText.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
isSortable: PropTypes.bool.isRequired,
|
||||
sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
|
||||
.isRequired,
|
||||
onLabelClick: PropTypes.func.isRequired,
|
||||
value: PropTypes.string,
|
||||
isSortable: PropTypes.bool,
|
||||
sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
|
||||
onLabelClick: PropTypes.func,
|
||||
value: PropTypes.any,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
||||
3
platform/ui/src/components/Modal/Modal.css
Normal file
3
platform/ui/src/components/Modal/Modal.css
Normal file
@ -0,0 +1,3 @@
|
||||
.modal-content {
|
||||
max-height: calc(100vh - theme('spacing.250px'));
|
||||
}
|
||||
@ -1,22 +1,14 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactModal from 'react-modal';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const customStyle = {
|
||||
overlay: {
|
||||
zIndex: 1071,
|
||||
backgroundColor: 'rgb(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
};
|
||||
import './Modal.css';
|
||||
|
||||
import { Typography, useModal, IconButton, Icon } from '@ohif/ui';
|
||||
|
||||
ReactModal.setAppElement(document.getElementById('root'));
|
||||
|
||||
const Modal = ({
|
||||
className,
|
||||
closeButton,
|
||||
shouldCloseOnEsc,
|
||||
isOpen,
|
||||
@ -24,15 +16,27 @@ const Modal = ({
|
||||
onClose,
|
||||
children,
|
||||
}) => {
|
||||
const { hide } = useModal();
|
||||
|
||||
const handleClose = () => {
|
||||
hide();
|
||||
};
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
title && (
|
||||
<header>
|
||||
<h4>{title}</h4>
|
||||
<header className="mb-6 pb-4 border-b border-secondary-main">
|
||||
<Typography variant="h4">{title}</Typography>
|
||||
{closeButton && (
|
||||
<button data-cy="close-button" onClick={onClose}>
|
||||
×
|
||||
</button>
|
||||
<IconButton
|
||||
className="absolute top-0 right-0 focus:outline-none flex -mr-3 -mt-3"
|
||||
data-cy="close-button"
|
||||
color="primary"
|
||||
onClick={onClose}
|
||||
rounded="full"
|
||||
>
|
||||
<Icon name="close" className="text-white w-8 h-8" />
|
||||
</IconButton>
|
||||
)}
|
||||
</header>
|
||||
)
|
||||
@ -41,22 +45,26 @@ const Modal = ({
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
className={classNames(className)}
|
||||
className="relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded"
|
||||
overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16"
|
||||
shouldCloseOnEsc={shouldCloseOnEsc}
|
||||
onRequestClose={handleClose}
|
||||
isOpen={isOpen}
|
||||
title={title}
|
||||
style={customStyle}
|
||||
>
|
||||
<>
|
||||
{renderHeader()}
|
||||
<section>{children}</section>
|
||||
</>
|
||||
<div className="px-6">{renderHeader()}</div>
|
||||
<section className="ohif-scrollbar modal-content overflow-y-auto px-6">
|
||||
{children}
|
||||
</section>
|
||||
</ReactModal>
|
||||
);
|
||||
};
|
||||
|
||||
Modal.defaultProps = {
|
||||
shouldCloseOnEsc: true,
|
||||
};
|
||||
|
||||
Modal.propTypes = {
|
||||
className: PropTypes.string,
|
||||
closeButton: PropTypes.bool,
|
||||
shouldCloseOnEsc: PropTypes.bool,
|
||||
isOpen: PropTypes.bool,
|
||||
|
||||
@ -76,10 +76,9 @@ const Select = ({
|
||||
options={options}
|
||||
value={selectedOptions}
|
||||
onChange={(selectedOptions, { action }) => {
|
||||
const newSelection = !selectedOptions.length ? selectedOptions : selectedOptions.reduce(
|
||||
(acc, curr) => acc.concat([curr.value]),
|
||||
[]
|
||||
);
|
||||
const newSelection = !selectedOptions.length
|
||||
? selectedOptions
|
||||
: selectedOptions.reduce((acc, curr) => acc.concat([curr.value]), []);
|
||||
onChange(newSelection, action);
|
||||
}}
|
||||
></ReactSelect>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Button, Icon, Typography, InputGroup } from '@ohif/ui';
|
||||
import { Button, Icon, Typography, InputGroup, useModal } from '@ohif/ui';
|
||||
|
||||
const StudyListFilter = ({
|
||||
filtersMeta,
|
||||
@ -20,6 +20,16 @@ const StudyListFilter = ({
|
||||
});
|
||||
};
|
||||
const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
|
||||
const { show } = useModal();
|
||||
|
||||
const showLearnMoreContent = () => {
|
||||
const modalContent = () => <div>Search Instructions</div>;
|
||||
|
||||
show({
|
||||
content: modalContent,
|
||||
title: 'Learn More',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
@ -38,6 +48,7 @@ const StudyListFilter = ({
|
||||
color="inherit"
|
||||
className="text-primary-active"
|
||||
startIcon={<Icon name="info-link" className="w-2" />}
|
||||
onClick={showLearnMoreContent}
|
||||
>
|
||||
<span className="flex flex-col flex-1">
|
||||
<span>Learn more</span>
|
||||
|
||||
@ -0,0 +1,432 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
createRef,
|
||||
useRef,
|
||||
} from 'react';
|
||||
|
||||
import classnames from 'classnames';
|
||||
|
||||
import {
|
||||
Typography,
|
||||
Input,
|
||||
Tooltip,
|
||||
IconButton,
|
||||
Icon,
|
||||
Select,
|
||||
InputLabelWrapper,
|
||||
Button,
|
||||
} from '@ohif/ui';
|
||||
|
||||
const FILE_TYPE_OPTIONS = [
|
||||
{
|
||||
value: 'jpg',
|
||||
label: 'jpg',
|
||||
},
|
||||
{
|
||||
value: 'png',
|
||||
label: 'png',
|
||||
},
|
||||
];
|
||||
|
||||
const DEFAULT_FILENAME = 'image';
|
||||
const REFRESH_VIEWPORT_TIMEOUT = 1000;
|
||||
|
||||
const ViewportDownloadForm = ({
|
||||
activeViewport,
|
||||
onClose,
|
||||
updateViewportPreview,
|
||||
enableViewport,
|
||||
disableViewport,
|
||||
toggleAnnotations,
|
||||
loadImage,
|
||||
downloadBlob,
|
||||
defaultSize,
|
||||
minimumSize,
|
||||
maximumSize,
|
||||
canvasClass,
|
||||
}) => {
|
||||
const [filename, setFilename] = useState(DEFAULT_FILENAME);
|
||||
const [fileType, setFileType] = useState(['jpg']);
|
||||
|
||||
const [dimensions, setDimensions] = useState({
|
||||
width: defaultSize,
|
||||
height: defaultSize,
|
||||
});
|
||||
|
||||
const [showAnnotations, setShowAnnotations] = useState(true);
|
||||
|
||||
const [keepAspect, setKeepAspect] = useState(true);
|
||||
const [aspectMultiplier, setAspectMultiplier] = useState({
|
||||
width: 1,
|
||||
height: 1,
|
||||
});
|
||||
|
||||
const [viewportElement, setViewportElement] = useState();
|
||||
const [viewportElementDimensions, setViewportElementDimensions] = useState({
|
||||
width: defaultSize,
|
||||
height: defaultSize,
|
||||
});
|
||||
|
||||
const [downloadCanvas, setDownloadCanvas] = useState({
|
||||
ref: createRef(),
|
||||
width: defaultSize,
|
||||
height: defaultSize,
|
||||
});
|
||||
|
||||
const [viewportPreview, setViewportPreview] = useState({
|
||||
src: null,
|
||||
width: defaultSize,
|
||||
height: defaultSize,
|
||||
});
|
||||
|
||||
const [error, setError] = useState({
|
||||
width: false,
|
||||
height: false,
|
||||
filename: false,
|
||||
});
|
||||
|
||||
const hasError = Object.values(error).includes(true);
|
||||
|
||||
const refreshViewport = useRef(null);
|
||||
|
||||
const onKeepAspectToggle = () => {
|
||||
const { width, height } = dimensions;
|
||||
const aspectMultiplier = { ...aspectMultiplier };
|
||||
if (!keepAspect) {
|
||||
const base = Math.min(width, height);
|
||||
aspectMultiplier.width = width / base;
|
||||
aspectMultiplier.height = height / base;
|
||||
setAspectMultiplier(aspectMultiplier);
|
||||
}
|
||||
|
||||
setKeepAspect(!keepAspect);
|
||||
};
|
||||
|
||||
const downloadImage = () => {
|
||||
downloadBlob(
|
||||
filename || DEFAULT_FILENAME,
|
||||
fileType,
|
||||
viewportElement,
|
||||
downloadCanvas.ref.current
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {object} value - Input value
|
||||
* @param {string} dimension - "height" | "width"
|
||||
*/
|
||||
const onDimensionsChange = (value, dimension) => {
|
||||
const oppositeDimension = dimension === 'height' ? 'width' : 'height';
|
||||
const sanitizedTargetValue = value.replace(/\D/, '');
|
||||
const isEmpty = sanitizedTargetValue === '';
|
||||
const newDimensions = { ...dimensions };
|
||||
const updatedDimension = isEmpty
|
||||
? ''
|
||||
: Math.min(sanitizedTargetValue, maximumSize);
|
||||
|
||||
if (updatedDimension === dimensions[dimension]) {
|
||||
return;
|
||||
}
|
||||
|
||||
newDimensions[dimension] = updatedDimension;
|
||||
|
||||
if (keepAspect && newDimensions[oppositeDimension] !== '') {
|
||||
newDimensions[oppositeDimension] = Math.round(
|
||||
newDimensions[dimension] * aspectMultiplier[oppositeDimension]
|
||||
);
|
||||
}
|
||||
|
||||
// In current code, keepAspect is always `true`
|
||||
// And we always start w/ a square width/height
|
||||
setDimensions(newDimensions);
|
||||
|
||||
// Only update if value is non-empty
|
||||
if (!isEmpty) {
|
||||
setViewportElementDimensions(newDimensions);
|
||||
setDownloadCanvas(state => ({
|
||||
...state,
|
||||
...newDimensions,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const error_messages = {
|
||||
width: 'The minimum valid width is 100px.',
|
||||
height: 'The minimum valid height is 100px.',
|
||||
filename: 'The file name cannot be empty.',
|
||||
};
|
||||
|
||||
const renderErrorHandler = errorType => {
|
||||
if (!error[errorType]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Typography className="mt-2 pl-1" color="error">
|
||||
{error_messages[errorType]}
|
||||
</Typography>
|
||||
);
|
||||
};
|
||||
|
||||
const validSize = useCallback(
|
||||
value => (value >= minimumSize ? value : minimumSize),
|
||||
[minimumSize]
|
||||
);
|
||||
|
||||
const loadAndUpdateViewports = useCallback(async () => {
|
||||
const { width: scaledWidth, height: scaledHeight } = await loadImage(
|
||||
activeViewport,
|
||||
viewportElement,
|
||||
dimensions.width,
|
||||
dimensions.height
|
||||
);
|
||||
|
||||
toggleAnnotations(showAnnotations, viewportElement);
|
||||
|
||||
const scaledDimensions = {
|
||||
height: validSize(scaledHeight),
|
||||
width: validSize(scaledWidth),
|
||||
};
|
||||
|
||||
setViewportElementDimensions(scaledDimensions);
|
||||
setDownloadCanvas(state => ({
|
||||
...state,
|
||||
...scaledDimensions,
|
||||
}));
|
||||
|
||||
const {
|
||||
dataUrl,
|
||||
width: viewportElementWidth,
|
||||
height: viewportElementHeight,
|
||||
} = await updateViewportPreview(
|
||||
viewportElement,
|
||||
downloadCanvas.ref.current,
|
||||
fileType
|
||||
);
|
||||
|
||||
setViewportPreview(state => ({
|
||||
...state,
|
||||
src: dataUrl,
|
||||
width: validSize(viewportElementWidth),
|
||||
height: validSize(viewportElementHeight),
|
||||
}));
|
||||
}, [
|
||||
loadImage,
|
||||
activeViewport,
|
||||
viewportElement,
|
||||
dimensions.width,
|
||||
dimensions.height,
|
||||
toggleAnnotations,
|
||||
showAnnotations,
|
||||
validSize,
|
||||
updateViewportPreview,
|
||||
downloadCanvas.ref,
|
||||
fileType,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
enableViewport(viewportElement);
|
||||
|
||||
return () => {
|
||||
disableViewport(viewportElement);
|
||||
};
|
||||
}, [disableViewport, enableViewport, viewportElement]);
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshViewport.current !== null) {
|
||||
clearTimeout(refreshViewport.current);
|
||||
}
|
||||
|
||||
refreshViewport.current = setTimeout(() => {
|
||||
refreshViewport.current = null;
|
||||
loadAndUpdateViewports();
|
||||
}, REFRESH_VIEWPORT_TIMEOUT);
|
||||
}, [
|
||||
activeViewport,
|
||||
viewportElement,
|
||||
showAnnotations,
|
||||
dimensions,
|
||||
loadImage,
|
||||
toggleAnnotations,
|
||||
updateViewportPreview,
|
||||
fileType,
|
||||
downloadCanvas.ref,
|
||||
minimumSize,
|
||||
maximumSize,
|
||||
loadAndUpdateViewports,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const { width, height } = dimensions;
|
||||
const hasError = {
|
||||
width: width < minimumSize,
|
||||
height: height < minimumSize,
|
||||
filename: !filename,
|
||||
};
|
||||
|
||||
setError({ ...hasError });
|
||||
}, [dimensions, filename, minimumSize]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography variant="h6">
|
||||
Please specify the dimensions, filename, and desired type for the output
|
||||
image.
|
||||
</Typography>
|
||||
|
||||
<div className="mt-6 flex flex-col">
|
||||
<div className="w-full mb-4">
|
||||
<Input
|
||||
data-cy="file-name"
|
||||
value={filename}
|
||||
onChange={value => setFilename(value)}
|
||||
label="File Name"
|
||||
/>
|
||||
{renderErrorHandler('filename')}
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex w-1/3">
|
||||
<div className="flex flex-col flex-grow">
|
||||
<div className="w-full">
|
||||
<Input
|
||||
type="number"
|
||||
min={minimumSize}
|
||||
max={maximumSize}
|
||||
label="Image width (px)"
|
||||
value={dimensions.width}
|
||||
onChange={value => onDimensionsChange(value, 'width')}
|
||||
data-cy="image-width"
|
||||
/>
|
||||
{renderErrorHandler('width')}
|
||||
</div>
|
||||
<div className="w-full mt-4">
|
||||
<Input
|
||||
type="number"
|
||||
min={minimumSize}
|
||||
max={maximumSize}
|
||||
label="Image height (px)"
|
||||
value={dimensions.height}
|
||||
onChange={value => onDimensionsChange(value, 'height')}
|
||||
data-cy="image-height"
|
||||
/>
|
||||
{renderErrorHandler('height')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-8">
|
||||
<Tooltip
|
||||
position="right"
|
||||
content={keepAspect ? 'Dismiss Aspect' : 'Keep Aspect'}
|
||||
>
|
||||
<IconButton
|
||||
onClick={onKeepAspectToggle}
|
||||
size="small"
|
||||
rounded="full"
|
||||
>
|
||||
<Icon name={keepAspect ? 'link' : 'unlink'} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-6 w-1/4 pl-6 border-l border-secondary-dark">
|
||||
<div>
|
||||
<InputLabelWrapper
|
||||
sortDirection="none"
|
||||
label="File Type"
|
||||
isSortable={false}
|
||||
onLabelClick={() => {}}
|
||||
>
|
||||
<Select
|
||||
className="mt-2"
|
||||
isClearable={false}
|
||||
value={fileType}
|
||||
data-cy="file-type"
|
||||
onChange={value => {
|
||||
setFileType([value.value]);
|
||||
}}
|
||||
hideSelectedOptions={false}
|
||||
options={FILE_TYPE_OPTIONS}
|
||||
placeholder="File Type"
|
||||
/>
|
||||
</InputLabelWrapper>
|
||||
</div>
|
||||
<div className="mt-4 ml-2">
|
||||
<label htmlFor="show-annotations" className="flex items-center">
|
||||
<input
|
||||
id="show-annotations"
|
||||
data-cy="show-annotations"
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
checked={showAnnotations}
|
||||
onChange={event => setShowAnnotations(event.target.checked)}
|
||||
/>
|
||||
<Typography>Show Annotations</Typography>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<div
|
||||
className="hidden"
|
||||
style={{
|
||||
height: viewportElementDimensions.height,
|
||||
width: viewportElementDimensions.width,
|
||||
}}
|
||||
ref={ref => setViewportElement(ref)}
|
||||
>
|
||||
<canvas
|
||||
className={classnames('block', canvasClass)}
|
||||
style={{
|
||||
height: downloadCanvas.height,
|
||||
width: downloadCanvas.width,
|
||||
}}
|
||||
width={downloadCanvas.width}
|
||||
height={downloadCanvas.height}
|
||||
ref={downloadCanvas.ref}
|
||||
></canvas>
|
||||
</div>
|
||||
|
||||
{viewportPreview.src ? (
|
||||
<div
|
||||
className="p-4 rounded bg-secondary-dark border-secondary-primary"
|
||||
data-cy="image-preview"
|
||||
>
|
||||
<Typography variant="h5">Image preview</Typography>
|
||||
<img
|
||||
className="mt-4"
|
||||
src={viewportPreview.src}
|
||||
alt="Preview"
|
||||
data-cy="image-preview"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-8">
|
||||
<Typography>Loading Image Preview...</Typography>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<Button data-cy="cancel-btn" variant="outlined" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="ml-2"
|
||||
disabled={hasError}
|
||||
onClick={downloadImage}
|
||||
color="primary"
|
||||
data-cy="download-btn"
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewportDownloadForm;
|
||||
1
platform/ui/src/components/ViewportDownloadForm/index.js
Normal file
1
platform/ui/src/components/ViewportDownloadForm/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './ViewportDownloadForm';
|
||||
@ -45,6 +45,7 @@ import Tooltip from './Tooltip';
|
||||
import Typography from './Typography';
|
||||
import Viewport from './Viewport';
|
||||
import ViewportActionBar from './ViewportActionBar';
|
||||
import ViewportDownloadForm from './ViewportDownloadForm';
|
||||
import ViewportGrid from './ViewportGrid';
|
||||
import ViewportPane from './ViewportPane';
|
||||
|
||||
@ -97,6 +98,7 @@ export {
|
||||
Typography,
|
||||
Viewport,
|
||||
ViewportActionBar,
|
||||
ViewportDownloadForm,
|
||||
ViewportGrid,
|
||||
ViewportPane,
|
||||
};
|
||||
|
||||
@ -16,7 +16,7 @@ const ModalComponent = ({
|
||||
ModalComponent.defaultProps = {
|
||||
content: null,
|
||||
contentProps: null,
|
||||
shouldCloseOnEsc: false,
|
||||
shouldCloseOnEsc: true,
|
||||
isOpen: true,
|
||||
closeButton: true,
|
||||
title: null,
|
||||
|
||||
@ -19,7 +19,7 @@ export const useModal = () => useContext(ModalContext);
|
||||
* @typedef {Object} ModalProps
|
||||
* @property {ReactElement|HTMLElement} [content=null] Modal content.
|
||||
* @property {Object} [contentProps=null] Modal content props.
|
||||
* @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
|
||||
* @property {boolean} [shouldCloseOnEsc=true] Modal is dismissible via the esc key.
|
||||
* @property {boolean} [isOpen=true] Make the Modal visible or hidden.
|
||||
* @property {boolean} [closeButton=true] Should the modal body render the close button.
|
||||
* @property {string} [title=null] Should the modal render the title independently of the body content.
|
||||
@ -30,7 +30,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
|
||||
const DEFAULT_OPTIONS = {
|
||||
content: null,
|
||||
contentProps: null,
|
||||
shouldCloseOnEsc: false,
|
||||
shouldCloseOnEsc: true,
|
||||
isOpen: true,
|
||||
closeButton: true,
|
||||
title: null,
|
||||
|
||||
@ -10,6 +10,7 @@ module.exports = {
|
||||
xl: '1280px',
|
||||
},
|
||||
colors: {
|
||||
overlay: 'rgba(0, 0, 0, 0.8)',
|
||||
transparent: 'transparent',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
@ -17,10 +18,10 @@ module.exports = {
|
||||
inherit: 'inherit',
|
||||
|
||||
indigo: {
|
||||
dark: '#0b1a42'
|
||||
dark: '#0b1a42',
|
||||
},
|
||||
aqua: {
|
||||
pale: '#7bb2ce'
|
||||
pale: '#7bb2ce',
|
||||
},
|
||||
|
||||
primary: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user