From 801c9b2735048f9d892ce8278514ee6e1252fce0 Mon Sep 17 00:00:00 2001
From: Ouwen Huang <ouwen.oh@gmail.com>
Date: Fri, 4 Nov 2022 09:28:01 +0000
Subject: [PATCH 1/2] feat: added initial display area

---
 .../ViewportService/CornerstoneViewportService.ts      |  2 ++
 .../src/services/ViewportService/Viewport.ts           | 10 ++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
index 227ff111f46..f297247d565 100644
--- a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
+++ b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
@@ -227,6 +227,7 @@ class CornerstoneViewportService implements IViewportService {
     const type = viewportInfo.getViewportType();
     const background = viewportInfo.getBackground();
     const orientation = viewportInfo.getOrientation();
+    const displayArea = viewportInfo.getDisplayArea();
 
     const viewportInput: Types.PublicViewportInput = {
       viewportId,
@@ -235,6 +236,7 @@ class CornerstoneViewportService implements IViewportService {
       defaultOptions: {
         background,
         orientation,
+        displayArea,
       },
     };
 
diff --git a/extensions/cornerstone/src/services/ViewportService/Viewport.ts b/extensions/cornerstone/src/services/ViewportService/Viewport.ts
index eae87ada07e..1cbfb6153d6 100644
--- a/extensions/cornerstone/src/services/ViewportService/Viewport.ts
+++ b/extensions/cornerstone/src/services/ViewportService/Viewport.ts
@@ -18,8 +18,9 @@ export type ViewportOptions = {
   viewportType: Enums.ViewportType;
   toolGroupId: string;
   viewportId: string;
-  orientation?: Types.Orientation;
+  orientation?: Enums.OrientationAxis;
   background?: Types.Point3;
+  displayArea?: Types.DisplayArea;
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
@@ -36,6 +37,7 @@ export type PublicViewportOptions = {
   viewportId?: string;
   orientation?: string;
   background?: Types.Point3;
+  displayArea?: Types.DisplayArea;
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
@@ -232,10 +234,14 @@ class ViewportInfo {
     return this.viewportOptions.background || [0, 0, 0];
   }
 
-  public getOrientation(): Types.Orientation {
+  public getOrientation(): Enums.OrientationAxis {
     return this.viewportOptions.orientation;
   }
 
+  public getDisplayArea(): Types.DisplayArea {
+    return this.viewportOptions.displayArea;
+  }
+
   public getInitialImageOptions(): InitialImageOptions {
     return this.viewportOptions.initialImageOptions;
   }

From c855f1e94b3c891747f916a39efb74c3b9cfe6e9 Mon Sep 17 00:00:00 2001
From: Alireza <ar.sedghi@gmail.com>
Date: Tue, 3 Oct 2023 15:15:26 -0400
Subject: [PATCH 2/2] add docs

---
 platform/docs/docs/platform/extensions/modules/hpModule.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/platform/docs/docs/platform/extensions/modules/hpModule.md b/platform/docs/docs/platform/extensions/modules/hpModule.md
index 39d6408e50f..922d9e04ed1 100644
--- a/platform/docs/docs/platform/extensions/modules/hpModule.md
+++ b/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.