fix(pdf-viewport): Allow Drag and Drop on PDF Viewport (#4225)

Co-authored-by: Michael Andersen <Michael.Andersen@rmp.uhn.ca>

extensions/dicom-pdf/src/viewports/OHIFCornerstonePdfViewport.css

@@ -0,0 +1,11 @@
+.pdf-no-click {
+  pointer-events: none;
+  height: 100%;
+  width: 100%;
+}
+
+.pdf-yes-click {
+  pointer-events: auto;
+  height: 100%;
+  width: 100%;
+}

extensions/dicom-pdf/src/viewports/OHIFCornerstonePdfViewport.tsx

@@ -1,9 +1,27 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import './OHIFCornerstonePdfViewport.css';
 
 function OHIFCornerstonePdfViewport({ displaySets }) {
   const [url, setUrl] = useState(null);
 
+  useEffect(() => {
+    document.body.addEventListener('drag', makePdfDropTarget);
+    return function cleanup() {
+      document.body.removeEventListener('drag', makePdfDropTarget);
+    };
+  }, []);
+
+  const [style, setStyle] = useState('pdf-yes-click');
+
+  const makePdfScrollable = () => {
+    setStyle('pdf-yes-click');
+  };
+
+  const makePdfDropTarget = () => {
+    setStyle('pdf-no-click');
+  };
+
   if (displaySets && displaySets.length > 1) {
     throw new Error(
       'OHIFCornerstonePdfViewport: only one display set is supported for dicom pdf right now'
@@ -21,11 +39,14 @@ function OHIFCornerstonePdfViewport({ displaySets }) {
   }, [pdfUrl]);
 
   return (
-    <div className="bg-primary-black h-full w-full text-white">
+    <div
+      className="bg-primary-black h-full w-full text-white"
+      onClick={makePdfScrollable}
+    >
       <object
         data={url}
         type="application/pdf"
-        className="h-full w-full"
+        className={style}
       >
         <div>No online PDF viewer installed</div>
       </object>