feat(displayArea): add display area to hanging protocol (#3691)

Co-authored-by: Ouwen Huang <ouwen.oh@gmail.com>

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -249,6 +249,7 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     const type = viewportInfo.getViewportType();
     const background = viewportInfo.getBackground();
     const orientation = viewportInfo.getOrientation();
+    const displayArea = viewportInfo.getDisplayArea();
 
     const viewportInput: Types.PublicViewportInput = {
       viewportId,
@@ -257,6 +258,7 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
       defaultOptions: {
         background,
         orientation,
+        displayArea,
       },
     };
 

extensions/cornerstone/src/services/ViewportService/Viewport.ts

@@ -21,6 +21,7 @@ export type ViewportOptions = {
   presentationIds?: UITypes.PresentationIds;
   orientation?: Enums.OrientationAxis;
   background?: Types.Point3;
+  displayArea?: Types.DisplayArea;
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
@@ -39,6 +40,7 @@ export type PublicViewportOptions = {
   viewportId?: string;
   orientation?: Enums.OrientationAxis;
   background?: Types.Point3;
+  displayArea?: Types.DisplayArea;
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
@@ -265,6 +267,10 @@ class ViewportInfo {
     return this.viewportOptions.orientation;
   }
 
+  public getDisplayArea(): Types.DisplayArea {
+    return this.viewportOptions.displayArea;
+  }
+
   public getInitialImageOptions(): InitialImageOptions {
     return this.viewportOptions.initialImageOptions;
   }

platform/docs/docs/platform/extensions/modules/hpModule.md

@@ -448,6 +448,7 @@ As you can see in the hanging protocol we defined three viewports (but only show
    - `toolGroupId`: tool group that will be used for the viewport (optional)
    - `initialImageOptions`: initial image options (optional - can be specific imageIndex number or preset (first, middle, last))
    - `syncGroups`: sync groups for the viewport (optional)
+   -The `displayArea` parameter refers to the designated area within the viewport where a specific portion of the image can be displayed. This parameter is optional and allows you to choose the location of the image within the viewport. For example, in mammography images, you can display the left breast on the left side of the viewport and the right breast on the right side, with the chest wall positioned in the middle. To understand how to define the display area, you can refer to the live example provided by CornerstoneJS [here](https://www.cornerstonejs.org/live-examples/programaticpanzoom).
 
 
 2. `displaySets`: defines the display sets that are displayed on a viewport. It is an array of objects, each object being one display set.