fix tracking coordinates on canvas reload

Author: raclim

client/modules/Preview/CoordinateTracker.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { remSize } from '../../theme';
 
@@ -23,59 +24,42 @@ const CoordContainer = styled.div`
   }
 `;
 
-const CoordinateTracker = (isPlaying) => {
+const CoordinateTracker = ({ isPlaying, sketchReloaded }) => {
   const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
-    console.log('we here');
-    let isListenerAttached = false;
-    let mouseMoveHandler;
     let canvas;
+    let mouseMoveHandler;
 
-    const waitForCanvas = () => {
+    const timeout = setTimeout(() => {
       const iFrame = document.getElementById('previewIframe0');
-      canvas = iFrame.contentWindow.document.getElementById('defaultCanvas0');
-      console.log('iframe: ', iFrame);
-
-      if (canvas && !isListenerAttached) {
-        isListenerAttached = true;
-        console.log('Adding listener');
-
-        mouseMoveHandler = (event) => {
-          console.log('hellooooo');
-          const rect = canvas.getBoundingClientRect();
-          const x = event.clientX - rect.left;
-          const y = event.clientY - rect.top;
-
-          setCoordinates({ x, y });
-        };
-
-        console.log('mouseMoveHandler', mouseMoveHandler);
-        console.log('canvas', canvas);
+      canvas = iFrame?.contentWindow?.document?.getElementById(
+        'defaultCanvas0'
+      );
 
-        document
-          .querySelector('#defaultCanvas0')
-          .addEventListener('mousemove', () => {
-            console.log('Button clicked!');
-            mouseMoveHandler();
-          });
-        // canvas.addEventListener('mousemove', mouseMoveHandler);
-      } else if (!canvas) {
-        setTimeout(waitForCanvas, 500);
+      if (!canvas) {
+        console.warn('Canvas not found.');
+        return;
       }
-    };
 
-    waitForCanvas();
+      mouseMoveHandler = (event) => {
+        const rect = canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        setCoordinates({ x, y });
+      };
+
+      canvas.addEventListener('mousemove', mouseMoveHandler);
+    }, 500);
 
     return () => {
-      if (canvas && isListenerAttached) {
-        console.log('Removing listener');
+      clearTimeout(timeout);
+
+      if (canvas && mouseMoveHandler) {
         canvas.removeEventListener('mousemove', mouseMoveHandler);
-        canvas = null;
-        isListenerAttached = false;
       }
     };
-  }, [isPlaying]);
+  }, [isPlaying, sketchReloaded]);
 
   return (
     <CoordContainer>
@@ -87,4 +71,9 @@ const CoordinateTracker = (isPlaying) => {
   );
 };
 
+CoordinateTracker.propTypes = {
+  isPlaying: PropTypes.bool.isRequired,
+  sketchReloaded: PropTypes.bool.isRequired
+};
+
 export default CoordinateTracker;

client/modules/Preview/previewIndex.jsx

@@ -28,6 +28,7 @@ const App = () => {
   const [gridOutput, setGridOutput] = useState(false);
   const [userTheme, setUserTheme] = useState('light');
   const [coordinatesVisible, setCoordinatesVisible] = useState(false);
+  const [sketchReloaded, setSketchReloaded] = useState(0);
 
   registerFrame(window.parent, getConfig('EDITOR_URL'));
 
@@ -42,6 +43,7 @@ const App = () => {
         setGridOutput(payload.gridOutput);
         setUserTheme(payload.userTheme);
         setCoordinatesVisible(payload.coordinates);
+        setSketchReloaded((prev) => prev + 1);
         break;
       case MessageTypes.START:
         console.log('starting');
@@ -94,7 +96,12 @@ const App = () => {
   return (
     <ThemeProvider theme={theme[userTheme]}>
       <GlobalStyle />
-      {coordinatesVisible && <CoordinateTracker isPlaying={isPlaying} />}
+      {coordinatesVisible && (
+        <CoordinateTracker
+          isPlaying={isPlaying}
+          sketchReloaded={sketchReloaded}
+        />
+      )}
       <EmbedFrame
         files={memoizedFiles}
         isPlaying={isPlaying}