-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add AngleTool and MagnifyTool (#97)
* fix: getCachedImage for imageURI * feat: Add angleTool * feat: add magnify tool * add magnify example * apply review comments
- Loading branch information
Showing
12 changed files
with
1,369 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { RenderingEngine, Types, Enums } from '@cornerstonejs/core'; | ||
| import { | ||
| initDemo, | ||
| createImageIdsAndCacheMetaData, | ||
| setTitleAndDescription, | ||
| } from '../../../../utils/demo/helpers'; | ||
| import * as cornerstoneTools from '@cornerstonejs/tools'; | ||
|
|
||
| // This is for debugging purposes | ||
| console.warn( | ||
| 'Click on index.ts to open source code for this example --------->' | ||
| ); | ||
|
|
||
| const { | ||
| MagnifyTool, | ||
| PanTool, | ||
| ZoomTool, | ||
| ToolGroupManager, | ||
| Enums: csToolsEnums, | ||
| } = cornerstoneTools; | ||
|
|
||
| const { ViewportType } = Enums; | ||
| const { MouseBindings } = csToolsEnums; | ||
|
|
||
| // ======== Set up page ======== // | ||
| setTitleAndDescription( | ||
| 'Magnify Tool', | ||
| 'Magnify Tool to zoom in in part of the viewport (StackViewport only as of now)' | ||
| ); | ||
|
|
||
| const content = document.getElementById('content'); | ||
| const element = document.createElement('div'); | ||
|
|
||
| // Disable right click context menu so we can have right click tools | ||
| element.oncontextmenu = (e) => e.preventDefault(); | ||
|
|
||
| element.id = 'cornerstone-element'; | ||
| element.style.width = '500px'; | ||
| element.style.height = '500px'; | ||
|
|
||
| content.appendChild(element); | ||
|
|
||
| const instructions = document.createElement('p'); | ||
| instructions.innerText = 'Left Click to use selected tool'; | ||
|
|
||
| content.append(instructions); | ||
| // ============================= // | ||
|
|
||
| const toolGroupId = 'STACK_TOOL_GROUP_ID'; | ||
|
|
||
| /** | ||
| * Runs the demo | ||
| */ | ||
| async function run() { | ||
| // Init Cornerstone and related libraries | ||
| await initDemo(); | ||
|
|
||
| // Add tools to Cornerstone3D | ||
| cornerstoneTools.addTool(MagnifyTool); | ||
| cornerstoneTools.addTool(PanTool); | ||
| cornerstoneTools.addTool(ZoomTool); | ||
|
|
||
| // Define a tool group, which defines how mouse events map to tool commands for | ||
| // Any viewport using the group | ||
| const toolGroup = ToolGroupManager.createToolGroup(toolGroupId); | ||
|
|
||
| // Add the tools to the tool group | ||
| toolGroup.addTool(MagnifyTool.toolName); | ||
| toolGroup.addTool(PanTool.toolName); | ||
| toolGroup.addTool(ZoomTool.toolName); | ||
|
|
||
| // Set the initial state of the tools, here we set one tool active on left click. | ||
| // This means left click will draw that tool. | ||
| toolGroup.setToolActive(MagnifyTool.toolName, { | ||
| bindings: [ | ||
| { | ||
| mouseButton: MouseBindings.Primary, // Left Click | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| toolGroup.setToolActive(PanTool.toolName, { | ||
| bindings: [ | ||
| { | ||
| mouseButton: MouseBindings.Auxiliary, // Middle Click | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| toolGroup.setToolActive(ZoomTool.toolName, { | ||
| bindings: [ | ||
| { | ||
| mouseButton: MouseBindings.Secondary, // | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| // Get Cornerstone imageIds and fetch metadata into RAM | ||
| const imageIds = await createImageIdsAndCacheMetaData({ | ||
| StudyInstanceUID: | ||
| '1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463', | ||
| SeriesInstanceUID: | ||
| '1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561', | ||
| wadoRsRoot: 'https://d1qmxk7r72ysft.cloudfront.net/dicomweb', | ||
| type: 'STACK', | ||
| }); | ||
|
|
||
| // Instantiate a rendering engine | ||
| const renderingEngineId = 'myRenderingEngine'; | ||
| const renderingEngine = new RenderingEngine(renderingEngineId); | ||
|
|
||
| // Create a stack viewport | ||
| const viewportId = 'CT_STACK'; | ||
| const viewportInput = { | ||
| viewportId, | ||
| type: ViewportType.STACK, | ||
| element, | ||
| }; | ||
|
|
||
| renderingEngine.enableElement(viewportInput); | ||
|
|
||
| // Set the tool group on the viewport | ||
| toolGroup.addViewport(viewportId, renderingEngineId); | ||
|
|
||
| // Get the stack viewport that was created | ||
| const viewport = <Types.IStackViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
|
|
||
| // Define a stack containing a single image | ||
| const stack = [imageIds[0]]; | ||
|
|
||
| // Set the stack on the viewport | ||
| viewport.setStack(stack); | ||
|
|
||
| // Render the image | ||
| viewport.render(); | ||
| } | ||
|
|
||
| run(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.