feat(customization): enable custom onDropHandler for viewportGrid (#4641)

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(() => {

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 = [