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

feat: update dimensions for browser window

Browse Source
This commit is contained in:
Rohit
2025-03-14 23:42:08 +05:30
parent 7ba6ddfe8b
commit d9f9147a50
1 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/browser/BrowserWindow.tsx
View File

@@ -77,7 +77,7 @@ export const BrowserWindow = () => {
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);
const [currentListId, setCurrentListId] = useState<number | null>(null); const [currentListId, setCurrentListId] = useState<number | null>(null);
const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: VIEWPORT_W, height: VIEWPORT_H }); const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: window.innerWidth * 0.75, height: window.innerHeight * 0.64 });
const [listSelector, setListSelector] = useState<string | null>(null); const [listSelector, setListSelector] = useState<string | null>(null);
const [fields, setFields] = useState<Record<string, TextStep>>({}); const [fields, setFields] = useState<Record<string, TextStep>>({});
@@ -92,7 +92,7 @@ export const BrowserWindow = () => {
const { user } = state; const { user } = state;
useEffect(() => { useEffect(() => {
coordinateMapper.updateDimensions(VIEWPORT_W, VIEWPORT_H, viewportInfo.width, viewportInfo.height); coordinateMapper.updateDimensions(window.innerWidth * 0.75, window.innerHeight * 0.64, viewportInfo.width, viewportInfo.height);
}, [viewportInfo]); }, [viewportInfo]);
useEffect(() => { useEffect(() => {
@@ -480,7 +480,7 @@ export const BrowserWindow = () => {
}, [paginationMode, resetPaginationSelector]); }, [paginationMode, resetPaginationSelector]);
return ( return (
<div onClick={handleClick} style={{ width: '900px' }} id="browser-window"> <div onClick={handleClick} style={{ width: '100%' }} id="browser-window">
{ {
getText === true || getList === true ? ( getText === true || getList === true ? (
<GenericModal <GenericModal
@@ -526,24 +526,21 @@ export const BrowserWindow = () => {
</GenericModal> </GenericModal>
) : null ) : null
} }
<div style={{ height: '400px', overflow: 'hidden' }}> <div style={{ height: window.innerHeight * 0.64, overflow: 'hidden' }}>
{((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
<Highlighter <Highlighter
unmodifiedRect={highlighterData?.rect} unmodifiedRect={highlighterData?.rect}
displayedSelector={highlighterData?.selector} displayedSelector={highlighterData?.selector}
width={900} width={window.innerWidth * 0.75}
height={400} height={window.innerHeight * 0.64}
canvasRect={canvasRef.current.getBoundingClientRect()} canvasRect={canvasRef.current.getBoundingClientRect()}
/> />
: null} : null}
<Canvas <Canvas
onCreateRef={setCanvasReference} onCreateRef={setCanvasReference}
width={900} width={window.innerWidth * 0.75}
height={400} height={window.innerHeight * 0.64}
/> />
<div style={{ fontSize: '10px', color: '#666', padding: '4px', textAlign: 'right' }}>
Browser viewport: {viewportInfo.width}x{viewportInfo.height}
</div>
</div> </div>
</div> </div>
); );
@@ -558,7 +555,7 @@ const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
img.src = image; img.src = image;
img.onload = () => { img.onload = () => {
URL.revokeObjectURL(img.src); URL.revokeObjectURL(img.src);
ctx?.drawImage(img, 0, 0, 900, 400); ctx?.drawImage(img, 0, 0, window.innerWidth * 0.75, window.innerHeight * 0.64);
}; };
}; };