wip on react transition 8

Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js

@@ -416,7 +416,7 @@ export class LayoutManager {
         const isSequenced = this.isDisplaySetsSequenced(sequenceMap);
 
         // Get Active Viewport Index if isMultiple is false
-        const activeViewportIndex = !isMultiple ? Session.get('activeViewport') : null;
+        const activeViewportIndex = !isMultiple ? window.store.getState().viewports.activeViewport : null;
 
         // Check if is next and looping is blocked
         if (isNext && !allowLooping) {
@@ -649,7 +649,7 @@ export class LayoutManager {
             this.moveMultipleViewportDisplaySets(isNext);
         } else {
             // Get the selected viewport index
-            const viewportIndex = Session.get('activeViewport');
+            const viewportIndex = window.store.getState().viewports.activeViewport;
 
             // Move display sets on a single viewport
             this.moveSingleViewportDisplaySets(viewportIndex, isNext);

Packages/ohif-viewerbase/client/lib/classes/StackImagePositionOffsetSynchronizer.js

@@ -86,7 +86,7 @@ export class StackImagePositionOffsetSynchronizer {
     }
 
     getActiveViewportElement() {
-        const viewportIndex = Session.get('activeViewport') || 0;
+        const viewportIndex = window.store.getState().viewports.activeViewport || 0;
         return $('.imageViewerViewport').get(viewportIndex);
     }
 

Packages/ohif-viewerbase/client/lib/classes/StudyPrefetcher.js

@@ -86,7 +86,7 @@ export class StudyPrefetcher {
         // Make sure there is a stack to fetch
         if (this.hasStack(element)) {
             // Check if this is a clip or not
-            const activeViewportIndex = Session.get('activeViewport');
+            const activeViewportIndex = window.store.getState().viewports.activeViewport;
             const displaySetInstanceUid = OHIF.viewer.data.loadedSeriesData[activeViewportIndex].displaySetInstanceUid;
 
             const stack = StackManager.findStack(displaySetInstanceUid);

Packages/ohif-viewerbase/client/lib/helpers/formatNumberPrecision.js

@@ -1,10 +1,14 @@
 import { Blaze } from 'meteor/blaze';
 
+function formatNumberPrecision(number, precision) {
+    if (number !== null) {
+        return parseFloat(number).toFixed(precision);
+    }
+}
+
 /**
  * A global Blaze UI helper to format a float value to a specified precision
  */
-Blaze.registerHelper('formatNumberPrecision', function(context, precision) {
-    if (context != null) {
-        return parseFloat(context).toFixed(precision);
-    }
-});
+Blaze.registerHelper('formatNumberPrecision', formatNumberPrecision);
+
+export default formatNumberPrecision;

Packages/ohif-viewerbase/client/lib/helpers/index.js

@@ -6,6 +6,7 @@ import { isTouchDevice } from './isTouchDevice';
 import { formatPN } from './formatPN';
 import { formatDA } from './formatDA';
 import { formatTM } from './formatTM';
+import isValidNumber from './isValidNumber';
 
 /**
  * Helpers with side effects only...
@@ -13,7 +14,7 @@ import { formatTM } from './formatTM';
 
 import './formatJSDate';
 import './jsDateFromNow';
-import './formatNumberPrecision';
+import formatNumberPrecision from './formatNumberPrecision';
 import './inc';
 import './isDisplaySetActive';
 import './getUsername';
@@ -33,7 +34,9 @@ const helpers = {
     isTouchDevice,
     formatPN,
     formatDA,
-    formatTM
+    formatTM,
+    formatNumberPrecision,
+    isValidNumber,
 };
 
 export { helpers };

Packages/ohif-viewerbase/client/lib/helpers/isValidNumber.js

@@ -0,0 +1,3 @@
+export default function isValidNumber(value) {
+    return typeof value === 'number' && !isNaN(value);
+}

Packages/ohif-viewerbase/client/lib/hotkeyUtils.js

@@ -92,7 +92,7 @@ Meteor.startup(function() {
 
     // Create a function that returns true if the active viewport is empty
     const isActiveViewportEmpty = () => {
-        const activeViewport = Session.get('activeViewport') || 0;
+        const activeViewport = window.store.getState().viewports.activeViewport || 0;
         return $('.imageViewerViewport').eq(activeViewport).hasClass('empty');
     };
 

Packages/ohif-viewerbase/client/lib/panelNavigation.js

@@ -5,7 +5,7 @@ import { setActiveViewport } from './setActiveViewport';
 
 const loadPreviousActivePanel = () => {
     OHIF.log.info('nextActivePanel');
-    let currentIndex = Session.get('activeViewport');
+    let currentIndex = window.store.getState().viewports.activeViewport;
     currentIndex--;
 
     const $viewports = $('.viewportContainer');
@@ -24,7 +24,7 @@ const loadPreviousActivePanel = () => {
 
 const loadNextActivePanel = () => {
     OHIF.log.info('nextActivePanel');
-    let currentIndex = Session.get('activeViewport');
+    let currentIndex = window.store.getState().viewports.activeViewport;
     currentIndex++;
 
     const $viewports = $('.viewportContainer');

Packages/ohif-viewerbase/client/lib/redux/actions.js

@@ -0,0 +1,9 @@
+export const setToolActive = tool => ({
+    type: 'SET_TOOL_ACTIVE',
+    tool
+});
+
+export const setViewportActive = viewportIndex => ({
+    type: 'SET_VIEWPORT_ACTIVE',
+    viewportIndex
+});

Packages/ohif-viewerbase/client/lib/redux/index.js

@@ -0,0 +1,8 @@
+import './actions.js';
+import combinedReducer from './reducers';
+
+const redux = {
+    combinedReducer
+};
+
+export default redux;

Packages/ohif-viewerbase/client/lib/redux/reducers/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import tools from './tools.js';
+import viewports from './viewports.js';
+
+const combinedReducer = combineReducers({
+    tools,
+    viewports
+});
+
+export default combinedReducer;

Packages/ohif-viewerbase/client/lib/redux/reducers/tools.js

@@ -0,0 +1,101 @@
+const defaultButtons = [
+    {
+        command: 'Pan',
+        type: 'tool',
+        text: 'Pan',
+        svgUrl: '/icons.svg#icon-tools-pan',
+        active: false
+    },
+    {
+        command: 'Zoom',
+        type: 'tool',
+        text: 'Zoom',
+        svgUrl: '/icons.svg#icon-tools-zoom',
+        active: false
+    },
+    {
+        command: 'Bidirectional',
+        type: 'tool',
+        text: 'Bidirectional',
+        svgUrl: '/icons.svg#icon-tools-measure-target',
+        active: true
+    },
+    {
+        command: 'StackScroll',
+        type: 'tool',
+        text: 'Stack Scroll',
+        svgUrl: '/icons.svg#icon-tools-stack-scroll',
+        active: false
+    },
+    {
+        command: 'reset',
+        type: 'command',
+        text: 'Reset',
+        svgUrl: '/icons.svg#icon-tools-reset',
+        active: false
+    },
+    {
+        command: 'Wwwc',
+        type: 'tool',
+        text: 'Manual',
+        svgUrl: '/icons.svg#icon-tools-levels',
+        active: false
+    },
+    {
+        command: 'setWLPresetSoftTissue',
+        type: 'command',
+        text: 'Soft Tissue',
+        svgUrl: '/icons.svg#icon-wl-soft-tissue',
+        active: false
+    },
+    {
+        command: 'setWLPresetLung',
+        type: 'command',
+        text: 'Lung',
+        svgUrl: '/icons.svg#icon-wl-lung',
+        active: false
+    },
+    {
+        command: 'setWLPresetLiver',
+        type: 'command',
+        text: 'Liver',
+        svgUrl: '/icons.svg#icon-wl-liver',
+        active: false
+    },
+    {
+        command: 'setWLPresetBrain',
+        type: 'command',
+        text: 'Brain',
+        svgUrl: '/icons.svg#icon-wl-brain',
+        active: false
+    }
+];
+
+const tools = (state = { buttons: defaultButtons }, action) => {
+    switch (action.type) {
+        case 'SET_TOOL_ACTIVE':
+            const item = state.buttons.find(button => button.command === action.tool);
+
+            let buttons = [];
+
+            if (item.type === 'tool') {
+                buttons = state.buttons.map(button => {
+                    if (button.command === action.tool) {
+                        button.active = true;
+                    } else if (button.type === 'tool') {
+                        button.active = false;
+                    }
+
+                    return button;
+                });
+            }
+
+            return {
+                buttons
+            };
+        default:
+            return state;
+    }
+};
+
+export default tools;

Packages/ohif-viewerbase/client/lib/redux/reducers/viewports.js

@@ -0,0 +1,15 @@
+const defaultState = {
+    activeViewport: 0
+}
+
+const viewports = (state = defaultState, action) => {
+    console.warn(action);
+    switch (action.type) {
+        case 'SET_VIEWPORT_ACTIVE':
+            return Object.assign({}, state, { activeViewport: action.viewportIndex });
+        default:
+            return state;
+    }
+};
+
+export default viewports;

Packages/ohif-viewerbase/client/lib/setActiveViewport.js

@@ -30,9 +30,12 @@ export function setActiveViewport(element) {
         $element.trigger('OHIFBeforeActivateViewport');
     }
 
-    // When an OHIFActivateViewport event is fired, update the Meteor Session
+    // When an OHIFActivateViewport event is fired, update the Redux state
     // with the viewport index that it was fired from.
-    Session.set('activeViewport', viewportIndex);
+    window.store.dispatch({
+        type: 'SET_VIEWPORT_ACTIVE',
+        viewportIndex
+    });
 
     // Finally, enable stack prefetching and hide the reference lines from
     // the newly activated viewport that has a canvas

Packages/ohif-viewerbase/client/lib/setFocusToActiveViewport.js

@@ -12,7 +12,7 @@ const setFocusToActiveViewport = () => {
     const viewports = $('.imageViewerViewport');
 
     // Get the current active viewport index from Session
-    const activeViewportIndex = Session.get('activeViewport');
+    const activeViewportIndex = window.store.getState().viewports.activeViewport;
 
     // Find the div from the list of viewports
     const activeViewport = viewports.eq(activeViewportIndex);
@@ -21,4 +21,4 @@ const setFocusToActiveViewport = () => {
     activeViewport.focus();
 };
 
-export { setFocusToActiveViewport };
+export { setFocusToActiveViewport };

Packages/ohif-viewerbase/client/lib/viewportUtils.js

@@ -30,7 +30,7 @@ const getEnabledElement = element => {
  * @return {DOMElement} DOMElement of the current active viewport
  */
 const getActiveViewportElement = () => {
-    const viewportIndex = Session.get('activeViewport') || 0;
+    const viewportIndex = window.store.getState().viewports.activeViewport || 0;
     return $('.imageViewerViewport').get(viewportIndex);
 };
 
@@ -274,7 +274,7 @@ const isPlaying = () => {
 // Check if a study has multiple frames
 const hasMultipleFrames = () => {
     // Its called everytime active viewport and/or layout change
-    Session.get('activeViewport');
+    window.store.getState().viewports.activeViewport;
     Session.get('LayoutManagerUpdated');
 
     const activeViewport = getActiveViewportElement();
@@ -326,7 +326,7 @@ const isStackScrollLinkingDisabled = () => {
     let linkableViewportsCount = 0;
 
     // Its called everytime active viewport and/or layout change
-    Session.get('activeViewport');
+    window.store.getState().viewports.activeViewport;
     Session.get('LayoutManagerUpdated');
 
     const synchronizer = OHIF.viewer.stackImagePositionOffsetSynchronizer;