How to disable a tool when another gets activated?

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
• Did you perform a cursory search?

Description

We’re trying to add a new custom tool PanZoom which allows panning and zooming. We’re aware that these controls are already available standalone and can be used simultaneously. However, the fact that they can be used simultaneously is not discoverable - hence having a tool to do so explicitly.

Here’s what I have so far:

/* eslint-disable */
import BaseTool from './base/BaseTool.js';
import { setToolActive, setToolDisabled } from '../store/setToolMode.js';

/**
 * @public
 * @class PanZoomWheelTool
 * @memberof Tools
 *
 * @classdesc Tool that combines Pan and ZoomWheel behavior.
 * @extends Tools.Base.BaseTool
 */

export default class PanZoomWheelTool extends BaseTool {
  constructor(props = {}) {
    const defaultProps = {
      name: 'PanZoomWheel',
      supportedInteractionTypes: ['Mouse'],
    };

    super(props, defaultProps);

    this.referencedToolNames = {
      pan: 'Pan',
      stackScroll: 'StackScrollMouseWheel',
      zoomWheel: 'ZoomMouseWheel',
    };

    this.activeCallback = this.activate.bind(this);
    this.disabledCallback = this.deactivate.bind(this);
  }

  activate() {
    setToolDisabled(this.referencedToolNames.stackScroll);
    setToolActive(this.referencedToolNames.pan, { mouseButtonMask: 1 });
    setToolActive(this.referencedToolNames.zoomWheel, { mouseButtonMask: 4 });
  }

  deactivate() {
    setToolActive(this.referencedToolNames.stackScroll);
    setToolDisabled(this.referencedToolNames.pan);
    setToolDisabled(this.referencedToolNames.zoomWheel);
  }
}

The tool activates and the panning and zoom work as expected. However, I can’t seem to get deactivate fired in disabledCallback. What happens then is that I the zoomWheel continues to be active in the mouse wheel.

For reference, here’s how we achieved the desired behavior this in cornerstoneTools v2:

activate(element) {
  cornerstoneTools.pan.activate(element, 1);
  cornerstoneTools.stackScrollWheel.deactivate(element);
  cornerstoneTools.zoomWheel.activate(element);
}

deactivate(element) {
   cornerstoneTools.pan.deactivate(element, 1);
   cornerstoneTools.zoomWheel.deactivate(element);
   cornerstoneTools.stackScrollWheel.activate(element);
}

What is the appropriate API/approach to achieve this in V3? Is there a hook available from within this tool to tear down the tools that I activated when any other tool is activated?

Steps to Reproduce

N/A

Expected behavior: N/A

Actual behavior: [What actually happened] N/A

[dannyrb]

@Ggpsv, they’re named “inputResolvers” which really just means that we try to resolve input conflicts when activating a new tool. You can find some of the logic here: https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/store/setToolMode.js#L312-L355

When we activate a tool, we…

1. Find tools with the same supported interaction types (mouse, touch, wheel, etc)
2. Find and call the appropriate inputResolver for that interaction type
   • This clears/removes options/settings that would be conflicting after the new tool is activated
3. Find tools that are active for the same element
4. Iterate over each active tool w/ the same supported interaction type
5. If all of their bindings/options were removed by the inputResolver, we call setToolPassiveForElement on them

https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/store/setToolMode.js#L352

[Ggpsv]

Yeah I understand that now. That wasn’t entirely clear 10 days ago. I’ll be closing this issue now, thanks for all the feedback!