From 3d98912855d9625004a598e05f63bfe9726c113c Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Sun, 26 May 2024 17:07:36 +0200
Subject: [PATCH] feat: Added Heatmap Visualizer

---
 .../webpage_container/StudySite.jsx           | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/webpage_container/StudySite.jsx b/src/components/webpage_container/StudySite.jsx
index 7dc65ed..ba00e93 100644
--- a/src/components/webpage_container/StudySite.jsx
+++ b/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}</>);