Add "highlight all" functionality

master
Sven Slootweg 5 years ago
parent 1487d167c2
commit b775dae096

@ -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;

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

@ -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 (
<div className="___scraping___tool___overlay active">
{(hoveredPosition != null && isHovering)
@ -94,6 +112,13 @@ function Overlay() {
? <Picker candidates={elementList} onHover={setPickHoveredElement} />
: null
}
{secondaryMatches.map((element) => {
return <SecondarySelectionHighlight
key={uniqueElementId(element)}
element={element.element}
{... element.position}
/>
})}
</div>
);
}
@ -142,6 +167,14 @@ function PrimarySelectionHighlight({ x, y, width, height, element }) {
</>);
}
function SecondarySelectionHighlight({ x, y, width, height, element }) {
let boxStyle = { left: x, top: y, width: width, height: height };
return (<>
<div className="___scraping___tool___secondarySelection" style={boxStyle} />
</>);
}
Promise.try(() => {
return documentReadyPromise();
}).then(() => {

@ -2,17 +2,12 @@
const React = require("react");
const getElementPosition = require("./get-element-position");
module.exports = function useMemoizedPosition(element, extraDependencies = []) {
return React.useMemo(() => {
if (element != null) {
let rect = element.getBoundingClientRect();
return {
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height
};
return getElementPosition(element);
} else {
return {};
}

Loading…
Cancel
Save