diff --git a/public/scraping-tool-stylesheet.css b/public/scraping-tool-stylesheet.css index f8c23ad..7a41e73 100644 --- a/public/scraping-tool-stylesheet.css +++ b/public/scraping-tool-stylesheet.css @@ -34,12 +34,20 @@ z-index: 999999991; } +.___scraping___tool___hover, .___scraping___tool___selection, .___scraping___tool___secondarySelection { + box-sizing: border-box; + border: 1px solid black; +} + .___scraping___tool___hover { background-color: rgba(216, 61, 255, 0.4); + border-color: rgba(140, 21, 170, 0.4); + z-index: 999999992; } .___scraping___tool___selection { background-color: rgba(0, 255, 0, 0.4); + border-color: rgba(0, 184, 0, 0.4); } .___scraping___tool___tooltip { @@ -51,12 +59,13 @@ } .___scraping___tool___secondarySelection { - background-color: rgb(104, 241, 230); + background-color: rgba(181, 238, 233, 0.4); + border-color: rgba(80, 185, 177, 0.4); } .___scraping___tool___candidatePicker { pointer-events: initial; - z-index: 999999992; + z-index: 999999995; position: absolute; left: 16px; diff --git a/src/injector/get-element-position.js b/src/injector/get-element-position.js new file mode 100644 index 0000000..8beb0c6 --- /dev/null +++ b/src/injector/get-element-position.js @@ -0,0 +1,12 @@ +"use strict"; + +module.exports = function getElementPosition(element) { + let rect = element.getBoundingClientRect(); + + return { + x: rect.left, + y: rect.top, + width: rect.width, + height: rect.height + }; +}; diff --git a/src/injector/index.jsx b/src/injector/index.jsx index c7600cd..d6d4147 100644 --- a/src/injector/index.jsx +++ b/src/injector/index.jsx @@ -12,6 +12,7 @@ const useStateRef = require("./use-state-ref"); const useMemoizedPosition = require("./use-memoized-position"); const elementsFromPoint = require("./elements-from-point"); const uniqueElementId = require("./unique-element-id"); +const getElementPosition = require("./get-element-position"); function Overlay() { let [ scrollX, setScrollX ] = React.useState(); @@ -72,6 +73,23 @@ function Overlay() { let pickedPosition = useMemoizedPosition(pickedElement, [ scrollX, scrollY ]); let pickHoveredPosition = useMemoizedPosition(pickHoveredElement, [ scrollX, scrollY ]); + let secondaryMatches = React.useMemo(() => { + if (selectedElement != null) { + let elements = Array.from(document.querySelectorAll(generateSelector(selectedElement))); + + return elements + .filter((element) => element !== selectedElement) + .map((element) => { + return { + element: element, + position: getElementPosition(element) + }; + }); + } else { + return []; + } + }, [ selectedElement, scrollX, scrollY ]); + return (