"use strict"; const React = require("react"); const ReactDOM = require("react-dom"); const Promise = require("bluebird"); const documentReadyPromise = require("document-ready-promise"); const debounce = require("debounce"); const { expression } = require("dataprog"); const generateSelector = require("./generate-selector"); const useStateRef = require("./use-state-ref"); const useMemoizedPosition = require("./use-memoized-position"); const elementsFromPoint = require("./elements-from-point"); const uniqueElementId = require("./unique-element-id"); function Overlay() { let [ scrollX, setScrollX ] = React.useState(); let [ scrollY, setScrollY ] = React.useState(); let [ hoveredElement, setHoveredElement ] = React.useState(); let [ isHovering, setIsHovering, isHoveringRef ] = useStateRef(true); let [ isPicking, setIsPicking, isPickingRef ] = useStateRef(false); let [ elementList, setElementList ] = React.useState([]); let [ selectedElement, setSelectedElement ] = React.useState(); let [ pickHoveredElement, setPickHoveredElement ] = React.useState(); let [ pickedElement, setPickedElement ] = React.useState(); let enabledRef = React.useRef(true); React.useEffect(() => { window.addEventListener("scroll", debounce((event) => { setScrollX(window.scrollX); setScrollY(window.scrollY); }), 20); let allElements = document.querySelectorAll("*"); for (let element of allElements) { /* TODO: Investigate whether switching to mousemove + elementFromPoint is more performant */ element.addEventListener("mouseover", (event) => { event.stopPropagation(); if (isHoveringRef.current) { setHoveredElement(element); } }); function clickHandler(event) { if (enabledRef.current) { event.preventDefault(); event.stopPropagation(); if (isHoveringRef.current) { setIsHovering(false); setIsPicking(true); let candidateElements = elementsFromPoint(event.clientX, event.clientY); setElementList(candidateElements); setSelectedElement(candidateElements[0]); } } } element.addEventListener("click", clickHandler); element.addEventListener("mousedown", clickHandler); element.addEventListener("mouseup", clickHandler); } }, []); let hoveredPosition = useMemoizedPosition(hoveredElement, [ scrollX, scrollY ]); let selectedPosition = useMemoizedPosition(selectedElement, [ scrollX, scrollY ]); let pickedPosition = useMemoizedPosition(pickedElement, [ scrollX, scrollY ]); let pickHoveredPosition = useMemoizedPosition(pickHoveredElement, [ scrollX, scrollY ]); return (