From 054b262e9cbeb0f44de65d05641efe1e8944a4f5 Mon Sep 17 00:00:00 2001
From: Jaseel-trenser <108331536+Jaseel-trenser@users.noreply.github.com>
Date: Wed, 29 Jan 2025 19:44:50 +0530
Subject: [PATCH] feat(customization): enable custom onDropHandler for
 viewportGrid (#4641)

---
 .../onDropHandlerCustomization.ts             |  5 ++++
 .../default/src/getCustomizationModule.tsx    |  2 ++
 platform/app/src/components/ViewportGrid.tsx  | 25 ++++++++++++++++---
 .../sampleCustomizations.tsx                  | 20 +++++++++++++++
 4 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 extensions/default/src/customizations/onDropHandlerCustomization.ts

diff --git a/extensions/default/src/customizations/onDropHandlerCustomization.ts b/extensions/default/src/customizations/onDropHandlerCustomization.ts
new file mode 100644
index 000000000..42a83bce9
--- /dev/null
+++ b/extensions/default/src/customizations/onDropHandlerCustomization.ts
@@ -0,0 +1,5 @@
+export default {
+  customOnDropHandler: () => {
+    return Promise.resolve({ handled: false });
+  },
+};
diff --git a/extensions/default/src/getCustomizationModule.tsx b/extensions/default/src/getCustomizationModule.tsx
index e33824d8c..47b785251 100644
--- a/extensions/default/src/getCustomizationModule.tsx
+++ b/extensions/default/src/getCustomizationModule.tsx
@@ -10,6 +10,7 @@ import menuContentCustomization from './customizations/menuContentCustomization'
 import getDataSourceConfigurationCustomization from './customizations/dataSourceConfigurationCustomization';
 import progressDropdownCustomization from './customizations/progressDropdownCustomization';
 import sortingCriteriaCustomization from './customizations/sortingCriteriaCustomization';
+import onDropHandlerCustomization from './customizations/onDropHandlerCustomization';
 
 /**
  *
@@ -46,6 +47,7 @@ export default function getCustomizationModule({ servicesManager, extensionManag
         ...progressDropdownCustomization,
         ...sortingCriteriaCustomization,
         ...defaultContextMenuCustomization,
+        ...onDropHandlerCustomization,
       },
     },
   ];
diff --git a/platform/app/src/components/ViewportGrid.tsx b/platform/app/src/components/ViewportGrid.tsx
index 66d7d2e60..05e1723cd 100644
--- a/platform/app/src/components/ViewportGrid.tsx
+++ b/platform/app/src/components/ViewportGrid.tsx
@@ -24,8 +24,13 @@ function ViewerViewportGrid(props: withAppTypes) {
   });
   const layoutHash = useRef(null);
 
-  const { displaySetService, measurementService, hangingProtocolService, uiNotificationService } =
-    servicesManager.services;
+  const {
+    displaySetService,
+    measurementService,
+    hangingProtocolService,
+    uiNotificationService,
+    customizationService,
+  } = servicesManager.services;
 
   const generateLayoutHash = () => `${numCols}-${numRows}`;
 
@@ -208,8 +213,20 @@ function ViewerViewportGrid(props: withAppTypes) {
   }, [viewports]);
 
   const onDropHandler = (viewportId, { displaySetInstanceUID }) => {
-    const updatedViewports = _getUpdatedViewports(viewportId, displaySetInstanceUID);
-    viewportGridService.setDisplaySetsForViewports(updatedViewports);
+    const customOnDropHandler = customizationService.getCustomization('customOnDropHandler');
+    const dropHandlerPromise = customOnDropHandler({
+      ...props,
+      viewportId,
+      displaySetInstanceUID,
+      appConfig,
+    });
+
+    dropHandlerPromise.then(({ handled }) => {
+      if (!handled) {
+        const updatedViewports = _getUpdatedViewports(viewportId, displaySetInstanceUID);
+        viewportGridService.setDisplaySetsForViewports(updatedViewports);
+      }
+    });
   };
 
   const getViewportPanes = useCallback(() => {
diff --git a/platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx b/platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx
index 92b9db849..81214fb5f 100644
--- a/platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx
+++ b/platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx
@@ -590,6 +590,26 @@ window.config = {
 };
   `,
   },
+  {
+    id: 'customOnDropHandler ',
+    description:
+      'CustomOnDropHandler in the viewport grid enables users to handle additional functionalities during the onDrop event in the viewport.',
+    default: props => {
+      return Promise.resolve({ handled: false });
+    },
+    configuration: `
+window.config = {
+  // rest of window config
+  customizationService: [
+    {
+      customOnDropHandler: {
+        $set: customOnDropHandler
+      },
+    },
+  ],
+};
+    `,
+  },
 ];
 
 export const segmentationCustomizations = [