Merge pull request #222 from open-source-labs/denton/mouserelease

fix dragging of bottom panel over iframe

Author: dentonwong

CHANGE_LOG.md

@@ -14,6 +14,7 @@ Changes:<br>
   - Typescript continued and now sits at ~80%
   - Dev Bug Fixes:
     - Additional logic added for edge cases in inputs for state manager (passing in non-Arrays/non-Objects as Array type and Object type).
+    - Fixed issue with the bottom panel not dragging or sticking to the mouse when the mouse is over the demorender iframe
     - Cleaned up hundreds of lines of outdated code and archived multiple unused and duplicate files
 - User Features:
   - UI updated with a modern style for a better developer experience

app/src/components/bottom/BottomPanel.tsx

@@ -4,7 +4,6 @@ import BottomTabs from './BottomTabs';
 const BottomPanel = (props): JSX.Element => {
   let y: number = 0;
   let h: number = 0;
-
   const node = useRef() as React.MutableRefObject<HTMLDivElement>;
 
   const mouseDownHandler = (e): void => {
@@ -13,12 +12,25 @@ const BottomPanel = (props): JSX.Element => {
     const styles = window.getComputedStyle(node.current);
     h = parseInt(styles.height, 10);
 
+    //Start listeners when the user clicks the bottom panel tab
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
+    window.addEventListener('message', handleIframeMessage);//listens for messages from the iframe when the mouse is over it
   };
+  
+  //Interpret the messages from the iframe
+  const handleIframeMessage = (e) => {
+    if (e.data === 'iframeMouseUp') {
+      mouseUpHandler();
+    }else if(e.data.type === 'iframeMouseMove'){
+      mouseMoveHandler(e.data)
+    }
+  }    
+
 
   const mouseMoveHandler = function (e: MouseEvent): void {
     // How far the mouse has been moved
+
     const dy = y - e.clientY;
 
     // Adjust the dimension of element
@@ -32,6 +44,7 @@ const BottomPanel = (props): JSX.Element => {
     // Remove the handlers of `mousemove` and `mouseup`
     document.removeEventListener('mousemove', mouseMoveHandler);
     document.removeEventListener('mouseup', mouseUpHandler);
+    window.removeEventListener('message', handleIframeMessage);
   };
 
   useEffect(() => {

app/src/components/main/DemoRender.tsx

@@ -53,7 +53,21 @@ const DemoRender = (): JSX.Element => {
           const handleClickInsideIframe = () => {
             window.parent.postMessage('iframeClicked', '*');
           };
+          const handleMouseUpInsideIframe = () => {
+            window.parent.postMessage('iframeMouseUp', '*');
+          };
+          const handleMouseMoveInsideIframe = (e) => {
+            const msgData = {
+              type: 'iframeMouseMove',
+              clientY: e.clientY + 70 //change the 70 to the value of the height of the navbar
+            }
+            window.parent.postMessage(msgData, '*');
+          };
           window.addEventListener('click', handleClickInsideIframe);
+          window.addEventListener('mouseup', handleMouseUpInsideIframe);
+          window.addEventListener('mousemove', handleMouseMoveInsideIframe);
+         
+          
         </script>
       </body>
     </html>

app/src/components/top/NavBarButtons.tsx

@@ -311,7 +311,7 @@ function navbarDropDown(props) {
 
       return () => {
         window.removeEventListener('click', handleClick, true);
-        window.addEventListener('message', handleClick); //cleanup for memory purposes. ensures handleclick isn't called after the component is no longer rendered
+        window.removeEventListener('message', handleClick); //cleanup for memory purposes. ensures handleclick isn't called after the component is no longer rendered
       };
     }, [dropdownRef]);