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

refactor: viewports store (#1239)

Browse Source 
* Organize viewports reducers

* Organize viewports actions

* Add local state to store dom node and remove hack

* Comment usage of dom in vtk

* Fix set of enabledElements

* Fix warning in html viewport

* Update docs for state

* Add commandsmanager to commandsmodule

* refactor: Shift ConnectedViewportDownloadForm to extension-cornerstone (#1224)

* refactor: 💡 Shift ConnectedViewportDownloadForm to its own proj

Shift ConnectedViewportDownloadForm to its own project and use local
state to get enabledElement

Closes: #1206

* Refactor connected component to cornerstone component

* Remove builtin behaviour from toolbarrow
This commit is contained in:
Danny Brown authored and GitHub committed 2019-12-02 14:02:35 -05:00
1 parent 817d43ee62
commit d98889f1eb
5 files changed
+394 -348
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js
-131
View File
@@ -1,131 +0,0 @@
import { connect } from 'react-redux';
import { ViewportDownloadForm } from '@ohif/ui';
import { utils } from '@ohif/core';
import cornerstone from 'cornerstone-core';
import cornerstoneTools from 'cornerstone-tools';
import { commandsManager } from './../App.js';
const MINIMUM_SIZE = 100;
const DEFAULT_SIZE = 512;
const MAX_TEXTURE_SIZE = 10000;
const mapStateToProps = (state, ownProps) => {
const activeEnabledElement = commandsManager.runCommand(
'getActiveViewportEnabledElement'
);
return {
onClose: ownProps.hide,
minimumSize: MINIMUM_SIZE,
maximumSize: MAX_TEXTURE_SIZE,
defaultSize: DEFAULT_SIZE,
canvasClass: 'cornerstone-canvas',
activeViewport: activeEnabledElement,
enableViewport: viewportElement => {
if (viewportElement) {
cornerstone.enable(viewportElement);
}
},
disableViewport: viewportElement => {
if (viewportElement) {
cornerstone.disable(viewportElement);
}
},
updateViewportPreview: (viewportElement, downloadCanvas, fileType) =>
new Promise(resolve => {
cornerstone.fitToWindow(viewportElement);
viewportElement.addEventListener(
'cornerstoneimagerendered',
function updateViewport(event) {
const enabledElement = cornerstone.getEnabledElement(event.target)
.element;
const type = 'image/' + fileType;
const dataUrl = downloadCanvas.toDataURL(type, 1);
let newWidth = enabledElement.offsetHeight;
let newHeight = enabledElement.offsetWidth;
if (newWidth > DEFAULT_SIZE || newHeight > DEFAULT_SIZE) {
const multiplier = DEFAULT_SIZE / Math.max(newWidth, newHeight);
newHeight *= multiplier;
newWidth *= multiplier;
}
resolve({ dataUrl, width: newWidth, height: newHeight });
viewportElement.removeEventListener(
'cornerstoneimagerendered',
updateViewport
);
}
);
}),
loadImage: (activeViewport, viewportElement, width, height) =>
new Promise(resolve => {
if (activeViewport && viewportElement) {
const enabledElement = cornerstone.getEnabledElement(activeViewport);
const viewport = Object.assign({}, enabledElement.viewport);
delete viewport.scale;
viewport.translation = {
x: 0,
y: 0,
};
cornerstone.loadImage(enabledElement.image.imageId).then(image => {
cornerstone.displayImage(viewportElement, image);
cornerstone.setViewport(viewportElement, viewport);
cornerstone.resize(viewportElement, true);
const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
const newHeight = Math.min(
height || image.height,
MAX_TEXTURE_SIZE
);
resolve({ image, width: newWidth, height: newHeight });
});
}
}),
toggleAnnotations: (toggle, viewportElement) => {
cornerstoneTools.store.state.tools.forEach(({ name }) => {
if (toggle) {
cornerstoneTools.setToolEnabledForElement(viewportElement, name);
} else {
cornerstoneTools.setToolDisabledForElement(viewportElement, name);
}
});
},
downloadBlob: (filename, fileType, viewportElement, downloadCanvas) => {
const file = `${filename}.${fileType}`;
const mimetype = `image/${fileType}`;
/* Handles JPEG images for IE11 */
if (downloadCanvas.msToBlob && fileType === 'jpeg') {
const image = downloadCanvas.toDataURL(mimetype, 1);
const blob = utils.b64toBlob(
image.replace('data:image/jpeg;base64,', ''),
mimetype
);
return window.navigator.msSaveBlob(blob, file);
}
viewportElement.querySelector('canvas').toBlob(blob => {
const URLObj = window.URL || window.webkitURL;
const a = document.createElement('a');
a.href = URLObj.createObjectURL(blob);
a.download = file;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
},
};
};
const ConnectedViewportDownloadForm = connect(
mapStateToProps,
null
)(ViewportDownloadForm);
export default ConnectedViewportDownloadForm;
platform/viewer/src/connectedComponents/ToolbarRow.js
+3 -4
View File
@@ -1,7 +1,8 @@
import React, { Component } from 'react';
import { MODULE_TYPES } from '@ohif/core';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { MODULE_TYPES } from '@ohif/core';
import {
ExpandableToolMenu,
RoundedButtonGroup,
@@ -14,7 +15,6 @@ import './ToolbarRow.css';
import { commandsManager, extensionManager } from './../App.js';
import ConnectedCineDialog from './ConnectedCineDialog';
import ConnectedViewportDownloadForm from './ConnectedViewportDownloadForm';
import ConnectedLayoutButton from './ConnectedLayoutButton';
import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
@@ -308,8 +308,7 @@ function _handleBuiltIn(button) {
}
if (options.behavior === 'DOWNLOAD_SCREEN_SHOT') {
modal.show({
content: ConnectedViewportDownloadForm,
commandsManager.runCommand('showDownloadViewportModal', {
title: t('Download High Quality Image'),
});
}