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

Support for right and middle mouse button tool assignment in toolManager (left by default)

Browse Source
This commit is contained in:
Evren Ozkan 2018-01-30 18:23:18 -05:00
parent 47df2bd022
commit 29d94e99c7
2 changed files with 123 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
View File

@ -35,6 +35,8 @@ Template.toolbarSectionButton.onCreated(() => {
}; };
instance.autorun(computation => { instance.autorun(computation => {
Session.get('ToolManagerActiveToolUpdated');
// Get the last executed command // Get the last executed command
const lastCommand = OHIF.commands.last.get(); const lastCommand = OHIF.commands.last.get();
@ -52,7 +54,7 @@ Template.toolbarSectionButton.onCreated(() => {
setTimeout(() => { setTimeout(() => {
if ($element.hasClass('expandable') && $element.find('.toolbarSectionButton.active').length) return; if ($element.hasClass('expandable') && $element.find('.toolbarSectionButton.active').length) return;
const activeToolId = Session.get('ToolManagerActiveTool'); const activeToolId = OHIF.viewerbase.toolManager.getActiveTool();
const isActive = instance.isActive(activeToolId); const isActive = instance.isActive(activeToolId);
if (!isActive) { if (!isActive) {
$element.removeClass('active'); $element.removeClass('active');
@ -74,22 +76,25 @@ Template.toolbarSectionButton.onCreated(() => {
Template.toolbarSectionButton.helpers({ Template.toolbarSectionButton.helpers({
activeClass() { activeClass() {
Session.get('ToolManagerActiveToolUpdated');
const instance = Template.instance(); const instance = Template.instance();
const activeToolId = Session.get('ToolManagerActiveTool'); const activeToolId = OHIF.viewerbase.toolManager.getActiveTool();
const isActive = instance.isActive(activeToolId); const isActive = instance.isActive(activeToolId);
return isActive ? 'active' : ''; return isActive ? 'active' : '';
}, },
svgLink() { svgLink() {
Session.get('ToolManagerActiveToolUpdated');
const instance = Template.instance(); const instance = Template.instance();
const activeToolId = Session.get('ToolManagerActiveTool'); const activeToolId = OHIF.viewerbase.toolManager.getActiveTool();
const svgLink = instance.getActiveToolSubProperty('svgLink', activeToolId); const svgLink = instance.getActiveToolSubProperty('svgLink', activeToolId);
return _.isFunction(svgLink) ? svgLink() : svgLink; return _.isFunction(svgLink) ? svgLink() : svgLink;
}, },
iconClasses() { iconClasses() {
Session.get('ToolManagerActiveToolUpdated');
const instance = Template.instance(); const instance = Template.instance();
const activeToolId = Session.get('ToolManagerActiveTool'); const activeToolId = OHIF.viewerbase.toolManager.getActiveTool();
const iconClasses = instance.getActiveToolSubProperty('iconClasses', activeToolId); const iconClasses = instance.getActiveToolSubProperty('iconClasses', activeToolId);
return _.isFunction(iconClasses) ? iconClasses() : iconClasses; return _.isFunction(iconClasses) ? iconClasses() : iconClasses;
}, },

178
Packages/ohif-viewerbase/client/lib/toolManager.js
View File

@ -1,5 +1,6 @@
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import { Session } from 'meteor/session'; import { Session } from 'meteor/session';
import { Random } from 'meteor/random';
import { $ } from 'meteor/jquery'; import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core'; import { OHIF } from 'meteor/ohif:core';
import { getFrameOfReferenceUID } from './getFrameOfReferenceUID'; import { getFrameOfReferenceUID } from './getFrameOfReferenceUID';
@ -9,7 +10,11 @@ import { annotateTextUtils } from './annotateTextUtils';
import { textMarkerUtils } from './textMarkerUtils'; import { textMarkerUtils } from './textMarkerUtils';
import { isTouchDevice } from './helpers/isTouchDevice'; import { isTouchDevice } from './helpers/isTouchDevice';
let defaultTool = 'wwwc'; let defaultTool = {
left: 'wwwc',
right: 'zoom',
middle: 'pan'
};
let activeTool; let activeTool;
let defaultMouseButtonTools; let defaultMouseButtonTools;
@ -123,13 +128,20 @@ export const toolManager = {
// if a default tool is globally defined, make it the default tool... // if a default tool is globally defined, make it the default tool...
if (OHIF.viewer.defaultTool) { if (OHIF.viewer.defaultTool) {
defaultTool = OHIF.viewer.defaultTool; defaultTool.left = OHIF.viewer.defaultTool;
} }
defaultMouseButtonTools = Meteor.settings && Meteor.settings.public && Meteor.settings.public.defaultMouseButtonTools; defaultMouseButtonTools = Meteor.settings && Meteor.settings.public && Meteor.settings.public.defaultMouseButtonTools;
// Override default tool if defined in settings // Override default tool if defined in settings
defaultTool = (defaultMouseButtonTools && defaultMouseButtonTools.left) || 'wwwc'; const defaultLeft = (defaultMouseButtonTools && defaultMouseButtonTools.left) || 'wwwc';
const defaultRight = (defaultMouseButtonTools && defaultMouseButtonTools.right) || 'zoom';
const defaultMiddle = (defaultMouseButtonTools && defaultMouseButtonTools.middle) || 'pan';
defaultTool = {
left: defaultLeft,
right: defaultRight,
middle: defaultMiddle
};
this.configureTools(); this.configureTools();
initialized = true; initialized = true;
@ -272,17 +284,24 @@ export const toolManager = {
return toolDefaultStates; return toolDefaultStates;
}, },
setActiveToolForElement(tool, element) { setActiveToolForElement(toolId, element, button) {
const canvases = $(element).find('canvas'); const canvases = $(element).find('canvas');
if (element.classList.contains('empty') || !canvases.length) { if (element.classList.contains('empty') || !canvases.length) {
return; return;
} }
// First, deactivate the current active tool // If button is not defined, we should consider it left
tools[activeTool].mouse.deactivate(element, 1); if (!button) {
button = 'left';
}
if (tools[activeTool].touch) { // First, deactivate the current active tool
tools[activeTool].touch.deactivate(element); tools[activeTool.left].mouse.deactivate(element, 1); // 1 means left mouse button
tools[activeTool.middle].mouse.deactivate(element, 2); // 2 means middle mouse button
tools[activeTool.right].mouse.deactivate(element, 4); // 3 means right mouse button
if (tools[activeTool.left].touch) {
tools[activeTool.left].touch.deactivate(element);
} }
// Enable tools based on their default states // Enable tools based on their default states
@ -291,7 +310,12 @@ export const toolManager = {
if (!relevantTools || !relevantTools.length || action === 'disabledToolButtons') return; if (!relevantTools || !relevantTools.length || action === 'disabledToolButtons') return;
relevantTools.forEach(toolType => { relevantTools.forEach(toolType => {
// the currently active tool has already been deactivated and can be skipped // the currently active tool has already been deactivated and can be skipped
if (action === 'deactivate' && toolType === activeTool) return; if (action === 'deactivate' &&
(toolType === activeTool.left ||
toolType === activeTool.middle ||
toolType === activeTool.right)) {
return;
}
tools[toolType].mouse[action]( tools[toolType].mouse[action](
element, element,
@ -310,15 +334,26 @@ export const toolManager = {
// Get the imageIds for this element // Get the imageIds for this element
const imageIds = toolData.data[0].imageIds; const imageIds = toolData.data[0].imageIds;
const defaultMouseButtonToolNameMiddle = (defaultMouseButtonTools && defaultMouseButtonTools.middle) || 'pan'; // Get the mouse button tools
const defaultMouseButtonToolMiddle = cornerstoneTools[defaultMouseButtonToolNameMiddle]; let newToolIdLeft = activeTool.left;
if (button === 'left') {
newToolIdLeft = toolId;
}
const newCornerstoneToolLeft = tools[newToolIdLeft]; // left mouse tool is used for touch as well
const defaultMouseButtonToolNameRight = (defaultMouseButtonTools && defaultMouseButtonTools.right) || 'zoom'; let newToolIdMiddle = activeTool.middle;
const defaultMouseButtonToolRight = cornerstoneTools[defaultMouseButtonToolNameRight]; if (button === 'middle') {
newToolIdMiddle = toolId;
}
const newCornerstoneToolMiddle = cornerstoneTools[newToolIdMiddle];
// Deactivate all the middle mouse, right click, and scroll wheel tools let newToolIdRight = activeTool.right;
defaultMouseButtonToolMiddle.deactivate(element); if (button === 'right') {
defaultMouseButtonToolRight.deactivate(element); newToolIdRight = toolId;
}
const newCornerstoneToolRight = cornerstoneTools[newToolIdRight];
// Deactivate scroll wheel tools
cornerstoneTools.zoomWheel.deactivate(element); cornerstoneTools.zoomWheel.deactivate(element);
cornerstoneTools.stackScrollWheel.deactivate(element); cornerstoneTools.stackScrollWheel.deactivate(element);
cornerstoneTools.panMultiTouch.disable(element); cornerstoneTools.panMultiTouch.disable(element);
@ -326,9 +361,6 @@ export const toolManager = {
cornerstoneTools.stackScrollMultiTouch.disable(element); cornerstoneTools.stackScrollMultiTouch.disable(element);
cornerstoneTools.doubleTapZoom.disable(element); cornerstoneTools.doubleTapZoom.disable(element);
// Reactivate the middle mouse and right click tools
defaultMouseButtonToolRight.activate(element, 4); // zoom is the default tool for right mouse button
// Reactivate the relevant scrollwheel tool for this element // Reactivate the relevant scrollwheel tool for this element
let multiTouchPanConfig; let multiTouchPanConfig;
if (imageIds.length > 1) { if (imageIds.length > 1) {
@ -358,32 +390,34 @@ export const toolManager = {
cornerstoneTools.panMultiTouch.setConfiguration(multiTouchPanConfig); cornerstoneTools.panMultiTouch.setConfiguration(multiTouchPanConfig);
} }
// This block ensures that the middle mouse and scroll tools keep working if (newToolIdLeft === 'crosshairs') {
if (tool === defaultMouseButtonToolNameMiddle) {
defaultMouseButtonToolMiddle.activate(element, 3); // 3 means left mouse button and middle mouse button
} else if (tool === 'crosshairs') {
defaultMouseButtonToolMiddle.activate(element, 2); // pan is the default tool for middle mouse button
const currentFrameOfReferenceUID = getFrameOfReferenceUID(element); const currentFrameOfReferenceUID = getFrameOfReferenceUID(element);
if (currentFrameOfReferenceUID) { if (currentFrameOfReferenceUID) {
updateCrosshairsSynchronizer(currentFrameOfReferenceUID); updateCrosshairsSynchronizer(currentFrameOfReferenceUID);
const synchronizer = crosshairsSynchronizers.synchronizers[currentFrameOfReferenceUID]; const synchronizer = crosshairsSynchronizers.synchronizers[currentFrameOfReferenceUID];
// Activate the chosen tool
tools[tool].mouse.activate(element, 1, synchronizer);
} }
} else if (tool === defaultMouseButtonToolNameRight) {
defaultMouseButtonToolMiddle.activate(element, 2); // pan is the default tool for middle mouse button
defaultMouseButtonToolRight.activate(element, 5); // 5 means left mouse button and right mouse button
} else {
// Reactivate the middle mouse and right click tools
defaultMouseButtonToolMiddle.activate(element, 2); // pan is the default tool for middle mouse button
// Activate the chosen tool
tools[tool].mouse.activate(element, 1);
} }
if (tools[tool].touch) { // This block ensures that all mouse button tools keep working
tools[tool].touch.activate(element); if (newToolIdLeft === newToolIdMiddle && newToolIdMiddle === newToolIdRight) {
newCornerstoneToolRight.activate(element, 7); // 7 means left mouse button, right mouse button and middle mouse button
} else if (newToolIdLeft === newToolIdMiddle) {
newCornerstoneToolMiddle.activate(element, 3); // 3 means left mouse button and middle mouse button
newCornerstoneToolRight.activate(element, 4); // 4 means right mouse button
} else if (newToolIdMiddle === newToolIdRight) {
newCornerstoneToolRight.activate(element, 6); // 6 means right mouse button and middle mouse button
newCornerstoneToolLeft.mouse.activate(element, 1); // 1 means left mouse button
} else if (newToolIdLeft === newToolIdRight) {
newCornerstoneToolMiddle.activate(element, 2); // 2 means middle mouse button
newCornerstoneToolRight.activate(element, 5); // 5 means left mouse button and right mouse button
} else {
newCornerstoneToolLeft.mouse.activate(element, 1); // 1 means left mouse button
newCornerstoneToolMiddle.activate(element, 2); // 2 means middle mouse button
newCornerstoneToolRight.activate(element, 4); // 4 means right mouse button
}
if (newCornerstoneToolLeft.touch) {
newCornerstoneToolLeft.touch.activate(element);
} }
if (gestures.zoomTouchPinch.enabled === true) { if (gestures.zoomTouchPinch.enabled === true) {
@ -399,7 +433,7 @@ export const toolManager = {
} }
}, },
setActiveTool(tool, elements) { setActiveTool(toolId, elements, button) {
if (!initialized) { if (!initialized) {
toolManager.init(); toolManager.init();
} }
@ -423,46 +457,47 @@ export const toolManager = {
if ($elements.toArray().reduce(checkElementEnabled, false)) { if ($elements.toArray().reduce(checkElementEnabled, false)) {
// if at least one element is not enabled, we do not activate tool. // if at least one element is not enabled, we do not activate tool.
OHIF.log.info(`Could not activate tool ${tool} due to a viewport not being enabled. Try again later.`); OHIF.log.info(`Could not activate tool ${toolId} due to a viewport not being enabled. Try again later.`);
return; return;
} }
if (!activeTool) {
activeTool = defaultTool;
}
// If button is not defined, we should consider it left
if (!button) {
button = 'left';
}
const activeToolId = activeTool[button];
/** /**
* TODO: Add textMarkerDialogs template to OHIF's * TODO: Add textMarkerDialogs template to OHIF's
*/ */
const dialog = document.getElementById('textMarkerOptionsDialog'); const dialog = document.getElementById('textMarkerOptionsDialog');
if (dialog) { if (dialog) {
if (tool === 'spine' && activeTool !== 'spine' && dialog.getAttribute('open') !== 'open') { if (toolId === 'spine' && activeToolId !== 'spine' && dialog.getAttribute('open') !== 'open') {
dialog.show(); dialog.show();
} else if (activeTool !== 'spine' && dialog.getAttribute('open') === 'open') { } else if (activeToolId !== 'spine' && dialog.getAttribute('open') === 'open') {
dialog.close(); dialog.close();
} }
} }
/** if (!toolId) {
* TODO: Use Session variables to activate a button and use Helpers like in toolbarSectionButton.js from OHIF’s. toolId = defaultTool[button];
*/
// Set the div to active for the tool
$('.imageViewerButton').removeClass('active');
const toolButton = document.getElementById(tool);
if (toolButton) {
toolButton.classList.add('active');
}
if (!tool) {
tool = defaultTool;
} }
// Otherwise, set the active tool for all viewport elements // Otherwise, set the active tool for all viewport elements
$elements.each((index, element) => { $elements.each((index, element) => {
toolManager.setActiveToolForElement(tool, element); toolManager.setActiveToolForElement(toolId, element, button);
}); });
activeTool = tool; activeTool[button] = toolId;
// Store the active tool in the session in order to enable reactivity // Enable reactivity
Session.set('ToolManagerActiveTool', tool); Session.set('ToolManagerActiveToolUpdated', Random.id());
}, },
getNearbyToolData(element, coords, toolTypes) { getNearbyToolData(element, coords, toolTypes) {
@ -510,7 +545,7 @@ export const toolManager = {
return pointNearTool ? nearbyTool : undefined; return pointNearTool ? nearbyTool : undefined;
}, },
getActiveTool() { getActiveTool(button) {
if (!initialized) { if (!initialized) {
toolManager.init(); toolManager.init();
} }
@ -520,15 +555,30 @@ export const toolManager = {
activeTool = defaultTool; activeTool = defaultTool;
} }
return activeTool; // If button is not defined, we should consider it left
if (!button) {
button = 'left';
}
return activeTool[button];
}, },
setDefaultTool(tool) { setDefaultTool(tool, button) {
defaultTool = tool; // If button is not defined, we should consider it left
if (!button) {
button = 'left';
}
defaultTool[button] = tool;
}, },
getDefaultTool() { getDefaultTool(button) {
return defaultTool; // If button is not defined, we should consider it left
if (!button) {
button = 'left';
}
return defaultTool[button];
}, },
setConfigureTools(configureTools) { setConfigureTools(configureTools) {