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

feat: use browser store for setting dimensions

Browse Source
This commit is contained in:
Rohit
2025-03-18 04:01:55 +05:30
parent aa5d9765fb
commit 29706ba36d
5 changed files with 26 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/browser/BrowserContent.tsx
View File

@@ -11,17 +11,12 @@ import {
// TODO: Tab !show currentUrl after recordingUrl global state
export const BrowserContent = () => {
const { width } = useBrowserDimensionsStore();
const { socket } = useSocketStore();
const [tabs, setTabs] = useState<string[]>(["current"]);
const [tabIndex, setTabIndex] = React.useState(0);
const [showOutputData, setShowOutputData] = useState(false);
const [browserWidth, setBrowserWidth] = useState(window.innerWidth * 0.7);
const handleResize = useCallback(() => {
setBrowserWidth(window.innerWidth * 0.7);
}, []);
const { browserWidth } = useBrowserDimensionsStore();
const handleChangeIndex = useCallback(
(index: number) => {
@@ -114,14 +109,6 @@ export const BrowserContent = () => {
[handleCloseTab]
);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
useEffect(() => {
if (socket) {
socket.on("newTab", handleNewTab);

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

@@ -10,6 +10,7 @@ import { useGlobalInfoStore } from '../../context/globalInfo';
import { useTranslation } from 'react-i18next';
import { AuthContext } from '../../context/auth';
import { coordinateMapper } from '../../helpers/coordinateMapper';
import { useBrowserDimensionsStore } from '../../context/browserDimensions';
interface ElementInfo {
tagName: string;
@@ -69,6 +70,7 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
export const BrowserWindow = () => {
const { t } = useTranslation();
const { browserWidth, browserHeight } = useBrowserDimensionsStore();
const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
const [screenShot, setScreenShot] = useState<string>("");
const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] } | null>(null);
@@ -76,7 +78,7 @@ export const BrowserWindow = () => {
const [attributeOptions, setAttributeOptions] = useState<AttributeOption[]>([]);
const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null);
const [currentListId, setCurrentListId] = useState<number | null>(null);
const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: window.innerWidth * 0.7, height: window.innerHeight * 0.64 });
const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: browserWidth, height: browserHeight });
const [listSelector, setListSelector] = useState<string | null>(null);
const [fields, setFields] = useState<Record<string, TextStep>>({});
@@ -90,29 +92,14 @@ export const BrowserWindow = () => {
const { state } = useContext(AuthContext);
const { user } = state;
const [dimensions, setDimensions] = useState({
width: window.innerWidth * 0.7,
height: window.innerHeight * 0.64
});
const handleResize = useCallback(() => {
setDimensions({
width: window.innerWidth * 0.7,
height: window.innerHeight * 0.64
});
}, []);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
const dimensions = {
width: browserWidth,
height: browserHeight
};
useEffect(() => {
coordinateMapper.updateDimensions(dimensions.width, dimensions.height, viewportInfo.width, viewportInfo.height);
}, [viewportInfo]);
}, [viewportInfo, dimensions.width, dimensions.height]);
useEffect(() => {
if (listSelector) {
@@ -482,7 +469,7 @@ export const BrowserWindow = () => {
}, [paginationMode, resetPaginationSelector]);
return (
<div onClick={handleClick} style={{ width: window.innerWidth * 0.7 }} id="browser-window">
<div onClick={handleClick} style={{ width: browserWidth }} id="browser-window">
{
getText === true || getList === true ? (
<GenericModal

22
src/components/recorder/RightSidePanel.tsx
View File

@@ -20,6 +20,7 @@ import { getActiveWorkflow } from "../../api/workflow";
import ActionDescriptionBox from '../action/ActionDescriptionBox';
import { useThemeMode } from '../../context/theme-provider';
import { useTranslation } from 'react-i18next';
import { useBrowserDimensionsStore } from '../../context/browserDimensions';
const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
getActiveWorkflow(id).then(
@@ -54,9 +55,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
const [panelDimensions, setPanelDimensions] = useState({
height: window.innerHeight * 0.64 + 137
});
const { panelHeight } = useBrowserDimensionsStore();
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext();
@@ -69,21 +68,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
//setRecordingLength(data.workflow.length);
}, [])
const handleResize = useCallback(() => {
// Update panel dimensions
setPanelDimensions({
height: window.innerHeight * 0.64 + 137
});
}, []);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
useEffect(() => {
if (socket) {
socket.on("workflow", workflowHandler);
@@ -480,7 +464,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const isDarkMode = theme.darkMode;
return (
<Paper sx={{ height: panelDimensions.height, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
<Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
{/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
<Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
</SimpleBox> */}

29
src/components/run/InterpretationLog.tsx
View File

@@ -34,22 +34,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const logEndRef = useRef<HTMLDivElement | null>(null);
const { width } = useBrowserDimensionsStore();
const { browserWidth, outputPreviewHeight, outputPreviewWidth } = useBrowserDimensionsStore();
const { socket } = useSocketStore();
const { currentWorkflowActionsState, shouldResetInterpretationLog, notify } = useGlobalInfoStore();
const [dimensions, setDimensions] = useState({
drawerHeight: window.innerHeight * 0.7,
drawerWidth: window.innerWidth * 0.716,
buttonWidth: window.innerWidth * 0.7
});
const handleResize = useCallback(() => {
setDimensions({
drawerHeight: window.innerHeight * 0.7,
drawerWidth: window.innerWidth * 0.716,
buttonWidth: window.innerWidth * 0.7
});
}, []);
const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
if (
@@ -108,14 +95,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
setCustomValue(event.target.value);
};
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
useEffect(() => {
if (shouldResetInterpretationLog) {
setLog('');
@@ -163,7 +142,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
background: '#ff00c3',
border: 'none',
padding: '10px 20px',
width: dimensions.buttonWidth,
width: browserWidth,
overflow: 'hidden',
textAlign: 'left',
justifyContent: 'flex-start',
@@ -185,8 +164,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
background: `${darkMode ? '#1e2124' : 'white'}`,
color: `${darkMode ? 'white' : 'black'}`,
padding: '10px',
height: dimensions.drawerHeight,
width: dimensions.drawerWidth,
height: outputPreviewHeight,
width: outputPreviewWidth,
display: 'flex',
borderRadius: '10px 10px 0 0',
},

19
src/helpers/coordinateMapper.ts
View File

@@ -1,4 +1,6 @@
// coordinateMapper.ts
import { BROWSER_DEFAULT_HEIGHT, BROWSER_DEFAULT_WIDTH } from "../constants/const";
import { getResponsiveDimensions } from "./dimensionUtils";
export class CoordinateMapper {
private canvasWidth: number;
@@ -6,16 +8,13 @@ export class CoordinateMapper {
private browserWidth: number;
private browserHeight: number;
constructor(
canvasWidth: number = window.innerWidth * 0.7,
canvasHeight: number = window.innerHeight * 0.64,
browserWidth: number = BROWSER_DEFAULT_WIDTH,
browserHeight: number = BROWSER_DEFAULT_HEIGHT
) {
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.browserWidth = browserWidth;
this.browserHeight = browserHeight;
constructor() {
// Use responsive dimensions instead of hardcoded values
const dimensions = getResponsiveDimensions();
this.canvasWidth = dimensions.canvasWidth;
this.canvasHeight = dimensions.canvasHeight;
this.browserWidth = BROWSER_DEFAULT_WIDTH;
this.browserHeight = BROWSER_DEFAULT_HEIGHT;
}
mapCanvasToBrowser(coord: { x: number, y: number }): { x: number, y: number } {