vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: allow selection of only child elements in case of getList

Browse Source
This commit is contained in:
karishmas6
2024-09-03 10:57:43 +05:30
parent 1a1ead572e
commit f5b9b31fad
1 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/organisms/BrowserWindow.tsx
View File

@@ -50,7 +50,7 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
export const BrowserWindow = () => { export const BrowserWindow = () => {
const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined); const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
const [screenShot, setScreenShot] = useState<string>(""); const [screenShot, setScreenShot] = useState<string>("");
const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string } | null>(null); const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] } | null>(null);
const [showAttributeModal, setShowAttributeModal] = useState(false); const [showAttributeModal, setShowAttributeModal] = useState(false);
const [attributeOptions, setAttributeOptions] = useState<AttributeOption[]>([]); const [attributeOptions, setAttributeOptions] = useState<AttributeOption[]>([]);
const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null); const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null);
@@ -97,17 +97,25 @@ export const BrowserWindow = () => {
} }
}, [screenShot, canvasRef, socket, screencastHandler]); }, [screenShot, canvasRef, socket, screencastHandler]);
const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string }) => { const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] }) => {
if (getList === true) { if (getList === true) {
socket?.emit('setGetList', { getList: true }); socket?.emit('setGetList', { getList: true });
if (listSelector) { if (listSelector) {
socket?.emit('listSelector', { selector: listSelector }); socket?.emit('listSelector', { selector: listSelector });
if (data.childSelectors && data.childSelectors.includes(data.selector)) {
setHighlighterData(data);
} else {
setHighlighterData(null); // Clear highlighter if not a valid child selector
}
} else {
setHighlighterData(data);
} }
} else {
setHighlighterData(data);
} }
setHighlighterData(data); }, [highlighterData, getList, socket, listSelector]);
}, [highlighterData, getList, socket]);
useEffect(() => { useEffect(() => {
document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('mousemove', onMouseMove, false);
@@ -133,6 +141,13 @@ export const BrowserWindow = () => {
clickY >= highlightRect.top && clickY >= highlightRect.top &&
clickY <= highlightRect.bottom clickY <= highlightRect.bottom
) { ) {
// Check if the selected element is one of the childSelectors (if applicable)
if (highlighterData.childSelectors && highlighterData.childSelectors.length > 0) {
if (!highlighterData.childSelectors.includes(highlighterData.selector)) {
return;
}
}
const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo); const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
if (isSelectingPagination) { if (isSelectingPagination) {