Hide and Show Annotations

[Gokhan Dilek]

I am trying to add hide/show annotations button on the canvas.
I do not want to delete/clear tool data.
I created a new canvas and added a new canvas class for the length tool like this:
let canvasForTool= document.createElement('canvas');
canvasForTool.classList.add('lengthTool');
element.appendChild(canvasForTool);
I can then use jQuery to find the class and hide and show.
$(element).find(".lengthTool").hide();
This works without any issue.

The problem with this solution is I need to edit each tool individually.
Is there a better way to achieve this which doesn't require me to edit each tool? Thank you.

[Gokhan Dilek]

This is what I have done so far.

I managed to change the visible property of the length and angle tool.

hideAnnotations.js 

function hideAnnotations() {
    forEachViewport(function(element) {

        var allToolData = {};

// Decide which tool types you want to serialize
        var toolTypes = ['length', 'angle'];

// Loop through all the tool types
        for (var i = 0; i < toolTypes.length; i++) {
            // Get the tool data for this tool type
            var toolType = toolTypes[i];
            var toolData = cornerstoneTools.getToolState(element, toolType);
     
                for (let d in toolData.data) {
                    toolData.data[d].visible = false;
                   console.log(toolData.data[d]);

                }

            if (toolData !== undefined) {
                // Put it into an object
                allToolData[toolTypes[i]] = toolData;
            }


            console.log(allToolData);

        }
        
        for (var toolType in allToolData) {
            if (allToolData.hasOwnProperty(toolType)) {
                for (var i = 0; i < allToolData[toolType].data.length; i++) {
                    var toolData = allToolData[toolType].data[i];

                    cornerstoneTools.addToolState(element, toolType, toolData);

                }
            }
        }
        cornerstone.updateImage(element);
    });


}

You can clearly see the length tool state property has visible set to false.

I already updated the image but the tool is still visible on the canvas.

I am not sure what I am doing wrong.

[Erik Ziegler]

You must be doing something wrong. It looks like you are duplicating your tool data by getting it and then re-adding it? That might be the issues

If you go to this page: https://tools.cornerstonejs.org/examples/tools/length.html

and open the browser console and type this:

var toolState = cornerstoneTools.getToolState(element, 'Length');

toolState.data[0].visible = true;

cornerstone.updateImage(element);

It becomes invisible as expected, so the functionality definitely works.

Hope that helps!

Erik

[Gokhan Dilek]

HI Erik,

The main problem is I have an ancient version of cornerstone and cornerstoneTools from 2017.

I used cornerstoneTools.length.disable(element, 1); which is sufficient for what I am looking for.

Thank you.

[Sreevani N]

Hi Erik,

Am trying to do just the reverse, i.e,, add the tools dynamically re-render the image, below is my test code, can you please point out what I am missing... I get a console.log that "overlay is already added to the target element" but the annotations are not rendered...

Many thanks in advance

import React from 'react';

import dicomParser from 'dicom-parser';

import * as cornerstone from 'cornerstone-core';

import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';

import cornerstoneMath from 'cornerstone-math';

import cornerstoneTools from 'cornerstone-tools';

import Hammer from 'hammerjs';

import CornerstoneViewport from 'react-cornerstone-viewport';

cornerstoneTools.external.cornerstone = cornerstone;

cornerstoneTools.external.Hammer = Hammer;

cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

cornerstoneTools.init({

  globalToolSyncEnabled: true

});

 // Preferences

 const fontFamily =

 'Work Sans, Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';

cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);

cornerstoneTools.toolStyle.setToolWidth(2);

cornerstoneTools.toolColors.setToolColor('rgb(0, 255, 0)');

cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)');

cornerstoneTools.store.state.touchProximity = 40;

const OverlayTool = cornerstoneTools.OverlayTool;

cornerstoneTools.addTool(OverlayTool);

cornerstoneTools.setToolEnabled("Overlay", {});

const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;

// Image Loader

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

cornerstoneWADOImageLoader.webWorkerManager.initialize({

  maxWebWorkers: navigator.hardwareConcurrency || 1,

  startWebWorkersOnDemand: true,

  taskConfiguration: {

    decodeTask: {

      initializeCodecsOnStartup: false,

      usePDFJS: false,

      strict: false,

    },

  },

});

// Debug

window.cornerstone = cornerstone;

window.cornerstoneTools = cornerstoneTools;

class ImageViewer extends React.Component{

    constructor(props){

      super(props);

      this.state = {

        cornerstoneElement: undefined,

        loading:'initial'

      };

      this.handleClick = this.handleClick.bind(this);

    };

   

    

    handleClick(e)

    {

  

     

      var element = this.state.cornerstoneElement;

      console.log(element);

      cornerstone.enable(element);

      var imageId = cornerstone.getImage(element);

      console.log(imageId);

    

      var toolDataString = '{"angle":{"data":[{"visible":true,"handles":{"start":{"x":92.40628941112809,"y":109.38908238107877,"highlight":true,"active":false},"end":{"x":112.40628941112809,"y":99.64666043201174,"highlight":true,"active":false,"active":false},"start2":{"x":92.40628941112809,"y":109.38908238107877,"highlight":true,"active":false},"end2":{"x":112.40628941112809,"y":119.38908238107877,"highlight":true,"active":false}}}]},"length":{"data":[{"visible":true,"handles":{"start":{"x":30.63388210486889,"y":77.14351868515968,"highlight":true,"active":false},"end":{"x":57.46755322260141,"y":154.21895700205096,"highlight":true,"active":false,"active":false}}}]}}';

      // --- To put the tool data back ---

      var allToolData = JSON.parse(toolDataString);

      console.log(allToolData);

     

      console.log(toolStateManager);

      for (var toolType in allToolData) {

        console.log(toolType);

          if (allToolData.hasOwnProperty(toolType)) {

              for (var i = 0; i < allToolData[toolType].data.length; i++) {

                  var toolData = allToolData[toolType].data[i];

                  console.log(toolData);

                  cornerstoneTools.addToolState(element, toolType, toolData);

                  toolStateManager.add(element, toolType, toolData);

                  toolStateManager.addImageIdToolState(imageId,toolType,toolData)

              }

          }

      }

      toolStateManager.saveToolState();

      toolStateManager.restoreImageIdToolState();

      

      cornerstone.updateImage(element);

      cornerstone.displayImage(element,imageId);

         

          

        

    }

    render(){

      console.log("rendering imageviewer");

    

   

      return(

          

        <div style={{ display: 'flex', flexWrap: 'wrap' }}>

          <CornerstoneViewport

            tools={[

              {

                name: 'Wwwc',

                mode: 'enabled',

                modeOptions: { mouseButtonMask: 1 },

              },

              {

                name: 'Angle',

                mode: 'active',

                modeOptions: { mouseButtonMask: 1 }

              },

              {

                name: 'Length',

                mode: 'active',

                modeOptions: { mouseButtonMask: 2 }

              },

              // Scroll

              { name: 'StackScrollMouseWheel', mode: 'active' },

              

            ]}

            imageIds={[

              'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm',

              'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm',

            ]}

            onElementEnabled={elementEnabledEvt => {

              const cornerstoneElement = elementEnabledEvt.detail.element;

              // Save this for later

              this.setState({

                cornerstoneElement

              });

              

              // Wait for image to render, then invert it

              cornerstoneElement.addEventListener(

                'cornerstoneimagerendered',

                imageRenderedEvent => {

                  const viewport = imageRenderedEvent.detail.viewport;

                 

                  cornerstone.setViewport(cornerstoneElement, viewport);

                 

                }

              );

            }}

            style={{ minWidth: '100%', height: '512px', flex: '1' }}

          />

          <Button onClick={(e) => this.handleClick(e)}> click Me</Button>

        </div>

      );

      

    }

}

export default ImageViewer;

regards,

Sreevani