fix(core): Improve error handling for scaleOverlayTool (#1623)

-  Added null checks for `imageData` and `dimensions` in `getViewportImageCornersInWorld` to prevent runtime errors when these properties are undefined.
-  Updated the linking documentation to provide a more comprehensive guide on linking Cornerstone libraries with OHIF for development.
-  Improved the `ScaleOverlayTool` by adding optional chaining for `editData` to avoid errors when accessing `annotation` and `viewport`.

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

packages/docs/docs/contribute/linking.md

@@ -2,54 +2,113 @@
 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.
 
 ## 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
+
+<iframe width="560" height="315" src="[https://www.youtube.com/embed/IOXQ1od6DZA?si=3QP4rppQgedJn7y8](https://www.youtube.com/embed/IOXQ1od6DZA?si=3QP4rppQgedJn7y8)" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 ## Tips
 

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;