othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: allow empty values for dimensions (#1295)

Browse Source 
* fix: allow empty values for dimensions

* fix: consistently use `defaultSize` for intial values
This commit is contained in:
Danny Brown 2019-12-13 10:09:18 -05:00 committed by GitHub
parent 14e86dcddd
commit cd2da349e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js
View File

@ -37,64 +37,47 @@ const ViewportDownloadForm = ({
const [filename, setFilename] = useState(DEFAULT_FILENAME); const [filename, setFilename] = useState(DEFAULT_FILENAME);
const [fileType, setFileType] = useState('jpg'); const [fileType, setFileType] = useState('jpg');
const [height, setHeight] = useState(defaultSize); const [dimensions, setDimensions] = useState({
const [width, setWidth] = useState(defaultSize); width: defaultSize,
height: defaultSize,
});
const [showAnnotations, setShowAnnotations] = useState(true); const [showAnnotations, setShowAnnotations] = useState(true);
const [keepAspect, setKeepAspect] = useState(true);
const [lastImage, setLastImage] = useState();
const [viewportElement, setViewportElement] = useState(); const [viewportElement, setViewportElement] = useState();
const [viewportElementHeight, setViewportElementHeight] = useState( const [viewportElementDimensions, setViewportElementDimensions] = useState({
minimumSize width: defaultSize,
); height: defaultSize,
const [viewportElementWidth, setViewportElementWidth] = useState(minimumSize); });
const [downloadCanvas, setDownloadCanvas] = useState({ const [downloadCanvas, setDownloadCanvas] = useState({
ref: createRef(), ref: createRef(),
width: minimumSize, width: defaultSize,
height: minimumSize, height: defaultSize,
}); });
const [viewportPreview, setViewportPreview] = useState({ const [viewportPreview, setViewportPreview] = useState({
src: null, src: null,
width: minimumSize, width: defaultSize,
height: minimumSize, height: defaultSize,
}); });
// Cornerstone's `enable/disable`
useEffect(() => { useEffect(() => {
enableViewport(viewportElement); enableViewport(viewportElement);
return () => { return () => {
disableViewport(viewportElement); disableViewport(viewportElement);
setHeight(defaultSize);
setWidth(defaultSize);
}; };
}, [defaultSize, disableViewport, enableViewport, viewportElement]); }, [disableViewport, enableViewport, viewportElement]);
useEffect(() => { useEffect(() => {
const { width, height } = viewportElementDimensions;
const validSize = value => (value >= minimumSize ? value : minimumSize); const validSize = value => (value >= minimumSize ? value : minimumSize);
const loadAndUpdateViewports = async () => { const loadAndUpdateViewports = async () => {
const { await loadImage(activeViewport, viewportElement, width, height);
image,
width: scaledWidth,
height: scaledHeight,
} = await loadImage(activeViewport, viewportElement, width, height);
setLastImage(image);
toggleAnnotations(showAnnotations, viewportElement); toggleAnnotations(showAnnotations, viewportElement);
setViewportElementHeight(validSize(scaledHeight));
setViewportElementWidth(validSize(scaledWidth));
setDownloadCanvas(state => ({
...state,
height: validSize(scaledHeight),
width: validSize(scaledWidth),
}));
const { const {
dataUrl, dataUrl,
width: viewportElementWidth, width: viewportElementWidth,
@ -118,8 +101,6 @@ const ViewportDownloadForm = ({
activeViewport, activeViewport,
viewportElement, viewportElement,
showAnnotations, showAnnotations,
height,
width,
loadImage, loadImage,
toggleAnnotations, toggleAnnotations,
updateViewportPreview, updateViewportPreview,
@ -127,54 +108,41 @@ const ViewportDownloadForm = ({
downloadCanvas.ref, downloadCanvas.ref,
minimumSize, minimumSize,
maximumSize, maximumSize,
viewportElementDimensions,
]); ]);
const onHeightChange = event => { /**
const newHeight = Math.min(event.target.value, maximumSize); * @param {object} event - Input change event
setHeight(newHeight); * @param {string} dimension - "height" | "width"
*/
const onDimensionsChange = (event, dimension) => {
const sanitizedTargetValue = event.target.value.replace(/\D/, '');
const isEmpty = sanitizedTargetValue === '';
const updatedDimension = isEmpty
? ''
: Math.min(sanitizedTargetValue, maximumSize);
setViewportElementHeight(newHeight); if (updatedDimension === dimensions.width) {
return;
setDownloadCanvas(state => ({
...state,
height: newHeight,
}));
if (keepAspect) {
const multiplier = newHeight / lastImage.height;
const newWidth = Math.round(lastImage.width * multiplier);
setWidth(newWidth);
setViewportElementWidth(newWidth);
setDownloadCanvas(state => ({
...state,
width: newWidth,
}));
} }
};
const onWidthChange = event => { // In current code, keepAspect is always `true`
const newWidth = Math.min(event.target.value, maximumSize); // And we always start w/ a square width/height
setWidth(newWidth); setDimensions({
width: updatedDimension,
setViewportElementWidth(newWidth); height: updatedDimension,
});
// Only update if value is non-empty
if (!isEmpty) {
setViewportElementDimensions({
height: updatedDimension,
width: updatedDimension,
});
setDownloadCanvas(state => ({ setDownloadCanvas(state => ({
...state, ...state,
width: newWidth, height: updatedDimension,
})); width: updatedDimension,
if (keepAspect) {
const multiplier = newWidth / lastImage.width;
const newHeight = Math.round(lastImage.height * multiplier);
setHeight(newHeight);
setViewportElementHeight(newHeight);
setDownloadCanvas(state => ({
...state,
height: newHeight,
})); }));
} }
}; };
@ -200,24 +168,18 @@ const ViewportDownloadForm = ({
<div className="col"> <div className="col">
<div className="width"> <div className="width">
<TextInput <TextInput
type="number"
data-cy="image-width" data-cy="image-width"
min={minimumSize} value={dimensions.width}
max={maximumSize}
value={width}
label={t('Image width (px)')} label={t('Image width (px)')}
onChange={onWidthChange} onChange={evt => onDimensionsChange(evt, 'height')}
/> />
</div> </div>
<div className="height"> <div className="height">
<TextInput <TextInput
type="number"
data-cy="image-height" data-cy="image-height"
min={minimumSize} value={dimensions.height}
max={maximumSize}
value={height}
label={t('Image height (px)')} label={t('Image height (px)')}
onChange={onHeightChange} onChange={evt => onDimensionsChange(evt, 'width')}
/> />
</div> </div>
</div> </div>
@ -263,8 +225,8 @@ const ViewportDownloadForm = ({
<div <div
style={{ style={{
height: viewportElementHeight, height: viewportElementDimensions.height,
width: viewportElementWidth, width: viewportElementDimensions.width,
position: 'absolute', position: 'absolute',
left: '9999px', left: '9999px',
}} }}
@ -327,6 +289,7 @@ ViewportDownloadForm.propTypes = {
toggleAnnotations: PropTypes.func.isRequired, toggleAnnotations: PropTypes.func.isRequired,
loadImage: PropTypes.func.isRequired, loadImage: PropTypes.func.isRequired,
downloadBlob: PropTypes.func.isRequired, downloadBlob: PropTypes.func.isRequired,
/** A default width & height, between the minimum and maximum size */
defaultSize: PropTypes.number.isRequired, defaultSize: PropTypes.number.isRequired,
minimumSize: PropTypes.number.isRequired, minimumSize: PropTypes.number.isRequired,
maximumSize: PropTypes.number.isRequired, maximumSize: PropTypes.number.isRequired,