Introduction

The process of initializing tools involves setting up the environment, adding desired tools, and specifying their behavior. For example:

initializeCSTools(); // Prepares the default Cornerstone tools environment.
addTool("Wwwc"); // Adds the Window/Level tool for adjusting image contrast and brightness.
setToolActive("Wwwc"); // Activates the "Wwwc" tool, enabling interactive control for the user.

In this case, the "Wwwc" tool is added and set as the active tool, allowing users to adjust the contrast and brightness of the image interactively.

Alternatively, developers can load default tools (see Default and Custom Tools paragraph), including custom ones if previously registered:

store.initialize();
addViewport("viewer");
initializeCSTools(); // Prepares the default Cornerstone tools environment.
addDefaultTools("viewer"); // Adds the default tools, which can also include custom-defined tools.
setToolActive("WatershedSegmentation"); // Activates the "WatershedSegmentation" custom tool for user interaction.

Stack Tools Creation and Synchronization

The stack tools creation and synchronization process involves creating a stack object and updating it to ensure that all tools are synchronized with the current image stack.

You can create or update a stack object using the csToolsUpdateStack function, which takes the target HTML element, image IDs, and the current image index as parameters. This function initializes and updates the stack object and prepares it for synchronization.

If you use the addDefaultTools function, the stack tools are automatically created. This means that you need to manually call csToolsUpdateStack only if you want to customize the stack behavior.

You can use the csToolsUpdateStack function to update the stack object with new image IDs. This allows you to add or remove images from the stack dynamically, ensuring that all tools remain synchronized with the current image stack.

Key Concepts: Tool States

Tools can be configured with specific states to define how they interact with the imaging environment:

• Disabled: The tool is inactive and cannot interact with the image or respond to user input.
• Passive: The tool is active in the background, observing user interactions or changes, but it does not modify the image directly.
• Enabled: The tool is ready to interact with the image but is not the primary tool in focus. Users can use it alongside other tools.
• Active: The tool is the primary tool in use, allowing direct and interactive control by the user.

API Reference

initializeCSTools

Initialize cornerstone tools with default configuration (extended with custom configuration)

Syntax

initializeCSTools(
  settings?: ToolSettings,
  style?: ToolStyle
)

Parameters

Parameter	Type	Description
settings	ToolSettings	The settings object (default is DEFAULT_SETTINGS: Default and Custom Tools)
style	ToolStyle	The style object (default is DEFAULT_STYLE: Default and Custom Tools)

Example:

initializeCSTools({ showSVGCursors: false }, { color: "0000FF" });

Returns

void

csToolsUpdateStack

Create or update stack object to sync stack tools

Syntax

csToolsUpdateStack(elementId: string, { imageIds?: string[], currentImageIndex?: number })

Parameters

Parameter	Type	Description
elementId	string	The target html element id.
stack	StackType	Stack definition

StackType Definition

Parameter	Type	Description
imageIds	string[]	Stack image ids, optional
currentImageIndex	number	Current image id index, optional

Returns

void

addTool

Add a cornerstone tool (grab it from original library or dvision custom tools)

Syntax

addTool(
  toolName: string,
  customConfig: Partial<ToolConfig>,
  targetElementId?: string
)

Parameters

Parameter	Type	Description
toolName	string	The tool name
customConfig	ToolConfig	The tool configuration
targetElementId	string	The target html element id.

Example:

addTool(
  "ScaleOverlay",
  { configuration: { minorTickLength: 10, majorTickLength: 25 } },
  "viewer"
);

Returns

void

setToolActive

Set Tool active on all elements (ie, rendered and manipulable) and refresh cornerstone elements

Syntax

setToolActive(
  toolName: string,
  options?: Partial<ToolConfig["options"]>,
  viewports?: string[],
  doNotSetInStore?: boolean
)

Parameters

Parameter	Type	Description
toolName	string	The custom tool name
options	ToolConfig["options"]	The custom options. @default from tools/default.js
viewports	string[]	The hmtl element id to be used for tool initialization.
doNotSetInStore	boolean	Flag to avoid setting in store (useful on tools initialization eg in addDefaultTools).

Returns

void

setToolDisabled

Set Tool disabled on all elements (ie, not rendered) and refresh cornerstone elements

Syntax

setToolDisabled(
  toolName: string,
  viewports?: string[],
  resetCursor = true
)

Parameters

Parameter	Type	Description
toolName	string	The tool name.
viewports	string[]	The hmtl element id to be used for tool initialization.
resetCursor	boolean	Flag to restore native cursor. @default true

Returns

void

setToolEnabled

Set Tool enabled on all elements (ie, rendered but not manipulable) and refresh cornerstone elements

Syntax

setToolEnabled(
  toolName: string,
  viewports?: string[],
  resetCursor = true
)

Parameters

Parameter	Type	Description
toolName	string	The tool name.
viewports	string[]	The hmtl element id to be used for tool initialization.
resetCursor	boolean	Flag to restore native cursor. @default true

Returns

void

setToolPassive

Set Tool passive on all elements (ie, rendered and manipulable passively) & refresh cornerstone elements

Syntax

setToolPassive(
  toolName: string,
  viewports?: string[],
  resetCursor = true
)

Parameters

Parameter	Type	Description
toolName	string	The tool name.
viewports	string[]	The hmtl element id to be used for tool initialization.
resetCursor	boolean	Flag to restore native cursor. @default true

Returns

void

setToolsStyle

Set cornerstone tools custom configuration (extend default configuration)

Syntax

setToolsStyle(style?: ToolStyle)

Parameters

Parameter	Type	Description
style	ToolStyle	the style object (default in DEFAULT_STYLE: Default and Custom Tools)

Returns

void