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});