feat: Added Heatmap Visualizer

src/components/webpage_container/StudySite.jsx

@@ -2,38 +2,52 @@ import React, {useEffect} from "react";
 import h337 from "heatmap.js";
 import { MOUSE_MODE, HEATMAP_MAX } from "../../core/Constants";
 
+var stopInput = false;
+
 var heatmapInstance = h337.create({
     container: document.body,
     radius: 20
 });
 
+const visualiseMouseData = ((mouseData) => {
+    mouseData.max = mouseData.data.length + 1;
+    heatmapInstance.setData(mouseData);
+    document.getElementsByTagName("canvas")[0].style.opacity = 1;
+    stopInput = true;
+});
+
 export function StudySite(props) {
 
     useEffect(() => {
+        window.visualiseMouseData = visualiseMouseData;
         heatmapInstance.setDataMax(HEATMAP_MAX);
           var addData;
       
           if(MOUSE_MODE) {
             const mouseDataFunc = function(ev) {
+            if(!stopInput) {
               heatmapInstance.addData({
                 x: ev.layerX,
                 y: ev.layerY,
                 value: 1,
               });
+            }
             };
       
             addData = mouseDataFunc;
           } else {
             const touchDataFunc = function(ev) {
+            if(!stopInput) {
               heatmapInstance.addData({
                 x: ev.layerX,
                 y: ev.layerY,
                 value: 1
               });
+            }
             };
             addData = touchDataFunc;
           }
-      
+          
           if(MOUSE_MODE) {
             document.body.addEventListener("mousemove", addData, false);
           } else {
@@ -41,6 +55,10 @@ export function StudySite(props) {
             document.body.addEventListener("touchstart", addData, false);
             document.body.addEventListener("touchend", addData, false);
           }
+
+          return () => {
+            delete window.visualiseMouseData;
+          };
     });
 
     return (<>{props.children}</>);