From 29706ba36dbb9c824c7b00836dc2494b9f41a189 Mon Sep 17 00:00:00 2001 From: Rohit Date: Tue, 18 Mar 2025 04:01:55 +0530 Subject: [PATCH] feat: use browser store for setting dimensions --- src/components/browser/BrowserContent.tsx | 15 +---------- src/components/browser/BrowserWindow.tsx | 31 +++++++--------------- src/components/recorder/RightSidePanel.tsx | 22 +++------------ src/components/run/InterpretationLog.tsx | 29 +++----------------- src/helpers/coordinateMapper.ts | 19 +++++++------ 5 files changed, 26 insertions(+), 90 deletions(-) diff --git a/src/components/browser/BrowserContent.tsx b/src/components/browser/BrowserContent.tsx index e78cb76c..a73ed6e7 100644 --- a/src/components/browser/BrowserContent.tsx +++ b/src/components/browser/BrowserContent.tsx @@ -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(["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); diff --git a/src/components/browser/BrowserWindow.tsx b/src/components/browser/BrowserWindow.tsx index 61a9aeca..c23974a5 100644 --- a/src/components/browser/BrowserWindow.tsx +++ b/src/components/browser/BrowserWindow.tsx @@ -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 | undefined>(undefined); const [screenShot, setScreenShot] = useState(""); 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([]); const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null); const [currentListId, setCurrentListId] = useState(null); - const [viewportInfo, setViewportInfo] = useState({ width: window.innerWidth * 0.7, height: window.innerHeight * 0.64 }); + const [viewportInfo, setViewportInfo] = useState({ width: browserWidth, height: browserHeight }); const [listSelector, setListSelector] = useState(null); const [fields, setFields] = useState>({}); @@ -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 ( -
+
{ getText === true || getList === true ? ( void) => { getActiveWorkflow(id).then( @@ -54,9 +55,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const [browserStepIdList, setBrowserStepIdList] = useState([]); 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 = ({ 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 = ({ onFinishCapture const isDarkMode = theme.darkMode; return ( - + {/* Last action: {` ${lastAction}`} */} diff --git a/src/components/run/InterpretationLog.tsx b/src/components/run/InterpretationLog.tsx index 85768c08..09025c99 100644 --- a/src/components/run/InterpretationLog.tsx +++ b/src/components/run/InterpretationLog.tsx @@ -34,22 +34,9 @@ export const InterpretationLog: React.FC = ({ isOpen, se const logEndRef = useRef(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 = ({ 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 = ({ 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 = ({ 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', }, diff --git a/src/helpers/coordinateMapper.ts b/src/helpers/coordinateMapper.ts index 3cb7ffde..c4a0b379 100644 --- a/src/helpers/coordinateMapper.ts +++ b/src/helpers/coordinateMapper.ts @@ -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 } {