diff --git a/packages/core/src/utilities/getViewportImageCornersInWorld.ts b/packages/core/src/utilities/getViewportImageCornersInWorld.ts index 77931bfe6..0fd7e02ae 100644 --- a/packages/core/src/utilities/getViewportImageCornersInWorld.ts +++ b/packages/core/src/utilities/getViewportImageCornersInWorld.ts @@ -18,7 +18,13 @@ import type { export default function getViewportImageCornersInWorld( viewport: IStackViewport | IVolumeViewport ): Point3[] { - const { imageData, dimensions } = viewport.getImageData() as IImageData; + const { imageData, dimensions } = + (viewport.getImageData() as IImageData) || {}; + + if (!imageData || !dimensions) { + return []; + } + const { canvas } = viewport; // we should consider the device pixel ratio since we are diff --git a/packages/docs/docs/contribute/linking.md b/packages/docs/docs/contribute/linking.md index b4e85de11..d935e9bcc 100644 --- a/packages/docs/docs/contribute/linking.md +++ b/packages/docs/docs/contribute/linking.md @@ -2,18 +2,11 @@ id: linking --- -# Linking packages +# Linking Cornerstone Libraries with OHIF for Development Often time you will want to link to a package to Cornerstone3D, this might be to develop a feature, to debug a bug or for other reasons. -For instance, you find a bug in the rendering of the color images in -`cornerstone3D`, digging deeper into the code you can find you need to debug -inside `cornerstone-wado-image-loader` as the RGB images are decoded there. In order -to do so, you need to link a local development version of 'cornerstone-wado-image-loader' -to the `cornerstone3D` package, and put your `debugger` in the `cornerstone-wado-image-loader` -source code. - Also, sometimes you may want to link the external packages to include libraries into your build that are not direct dependencies but are dynamically loaded. See the externals/README.md file for details. @@ -21,35 +14,101 @@ file for details. ## Yarn Link There are various ways to link to a package. The most common way is to use -[`yarn link`](https://classic.yarnpkg.com/en/docs/cli/link). In the following examples, -we assume we want to link the `cornerstone-wado-image-loader` package to our -`cornerstone3D` package. +[`yarn link`](https://classic.yarnpkg.com/en/docs/cli/link). -```bash -// inside cornerstone-wado-image-loader +This guide explains how to link local Cornerstone libraries for development with OHIF. + +## Prerequisites + +- Local clone of OHIF Viewer +- Local clone of desired Cornerstone libraries (@cornerstonejs/core, @cornerstonejs/tools, etc.) +- Yarn package manager + +## Steps to Link Libraries + +1. **Prepare the Cornerstone Library** + + Navigate to the Cornerstone library directory you want to link (e.g., @cornerstonejs/core): + + ```bash + cd packages/core + ``` + + Unlink any existing links first: + + ```bash + yarn unlink + ``` + + Create the link: + + ```bash + yarn link + ``` + + Build the package to ensure latest changes: + + ```bash + yarn dev + ``` + +2. **Link in OHIF** + + In your OHIF project directory: + ```bash + yarn link @cornerstonejs/core + ``` + + Start OHIF: + + ```bash + yarn dev + ``` + +## Working with Multiple Libraries + +You can link multiple Cornerstone libraries simultaneously. For example, to link both core and tools: + +```bash +# In cornerstone/packages/core +yarn unlink yarn link +yarn dev -// inside cornerstone3D (at the root - not the packages) +# In cornerstone/packages/tools +yarn unlink +yarn link +yarn dev -yarn link cornerstone-wado-image-loader +# In OHIF +yarn link @cornerstonejs/core +yarn link @cornerstonejs/tools ``` -However, this is not enough. We need to tell the `cornerstone-wado-image-loader` -to build so that your changes to the source code are reflected/used in `Cornerstone3D`. -For `cornerstone-wado-image-loader` to build, you can run `yarn build`. However, -it will take a while to build the package. `cornerstone-wado-image-loader` -comes with various webpack configurations, you can use/run the -`yarn webpack:dynamic:watch` at the root of `cornerstone-wado-image-loader` to -force the reflected changes to be built again which is faster than `yarn build`. -and it also watches for changes to the source code and rebuilds the package. - -## External Components - -Some components such as the `dicom-microscopy-viewer` are linked externally as -optional inclusions in the overall `cornerstone3D` package. You will need to -add a peerImport function which can import the required modules, and register -your function with the cornerstone init method. +## Verifying the Link + +1. Make a visible change in the linked library (e.g., modify a line width in tools) +2. Rebuild the library using `yarn dev` +3. The changes should reflect in OHIF automatically + +## Important Notes + +- Always run `yarn dev` in the Cornerstone library after making changes +- Due to ESM migration in Cornerstone 3D 2.0, linking process is simpler than before +- Remove links when finished using `yarn unlink` in both projects + +## Troubleshooting + +If changes aren't reflecting: + +1. Ensure the library is rebuilt (`yarn dev`) +2. Check the console for any linking errors +3. Verify the correct library version is linked using the browser console + +## Video Tutorials + + ## Tips diff --git a/packages/tools/src/tools/ScaleOverlayTool.ts b/packages/tools/src/tools/ScaleOverlayTool.ts index 141f8a09e..6a5e15366 100644 --- a/packages/tools/src/tools/ScaleOverlayTool.ts +++ b/packages/tools/src/tools/ScaleOverlayTool.ts @@ -96,7 +96,7 @@ class ScaleOverlayTool extends AnnotationDisplayTool { const viewportCanvasCornersInWorld = csUtils.getViewportImageCornersInWorld(viewport); - let annotation = this.editData.annotation; + let annotation = this.editData?.annotation; const annotations = getAnnotations(this.getToolName(), viewport.element); @@ -137,7 +137,7 @@ class ScaleOverlayTool extends AnnotationDisplayTool { }); if ( - this.editData.annotation && + this.editData?.annotation && this.editData.annotation.data.viewportId == viewport.id ) { this.editData.annotation.data.handles.points = @@ -176,9 +176,10 @@ class ScaleOverlayTool extends AnnotationDisplayTool { enabledElement: Types.IEnabledElement, svgDrawingHelper: SVGDrawingHelper ) { - if (!this.editData.viewport) { + if (!this.editData || !this.editData.viewport) { return; } + const location = this.configuration.scaleLocation; const { viewport } = enabledElement;