feat: use browser store for setting dimensions

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

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> */}