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

feat: change width to 70% of window

Browse Source
This commit is contained in:
Rohit
2025-03-15 03:57:54 +05:30
parent 1b26e58fc6
commit e344edadb0
7 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -146,7 +146,7 @@ export const BrowserContent = () => {
/> />
<BrowserNavBar <BrowserNavBar
// todo: use width from browser dimension once fixed // todo: use width from browser dimension once fixed
browserWidth={window.innerWidth * 0.75} browserWidth={window.innerWidth * 0.7}
handleUrlChanged={handleUrlChanged} handleUrlChanged={handleUrlChanged}
/> />

2
src/components/browser/BrowserNavBar.tsx
View File

@@ -15,7 +15,7 @@ const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
display: flex; display: flex;
padding: 12px 0px; padding: 12px 0px;
background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')}; background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
width: 100%; width: ${window.innerWidth * 0.7}px;
border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;
`; `;

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

@@ -76,7 +76,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: window.innerWidth * 0.75, height: window.innerHeight * 0.64 }); const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: window.innerWidth * 0.7, 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>>({});
@@ -91,7 +91,7 @@ export const BrowserWindow = () => {
const { user } = state; const { user } = state;
useEffect(() => { useEffect(() => {
coordinateMapper.updateDimensions(window.innerWidth * 0.75, window.innerHeight * 0.64, viewportInfo.width, viewportInfo.height); coordinateMapper.updateDimensions(window.innerWidth * 0.7, window.innerHeight * 0.64, viewportInfo.width, viewportInfo.height);
}, [viewportInfo]); }, [viewportInfo]);
useEffect(() => { useEffect(() => {
@@ -479,7 +479,7 @@ export const BrowserWindow = () => {
}, [paginationMode, resetPaginationSelector]); }, [paginationMode, resetPaginationSelector]);
return ( return (
<div onClick={handleClick} style={{ width: '100%' }} id="browser-window"> <div onClick={handleClick} style={{ width: window.innerWidth * 0.7 }} id="browser-window">
{ {
getText === true || getList === true ? ( getText === true || getList === true ? (
<GenericModal <GenericModal
@@ -530,14 +530,14 @@ export const BrowserWindow = () => {
<Highlighter <Highlighter
unmodifiedRect={highlighterData?.rect} unmodifiedRect={highlighterData?.rect}
displayedSelector={highlighterData?.selector} displayedSelector={highlighterData?.selector}
width={window.innerWidth * 0.75} width={window.innerWidth * 0.7}
height={window.innerHeight * 0.64} height={window.innerHeight * 0.64}
canvasRect={canvasRef.current.getBoundingClientRect()} canvasRect={canvasRef.current.getBoundingClientRect()}
/> />
: null} : null}
<Canvas <Canvas
onCreateRef={setCanvasReference} onCreateRef={setCanvasReference}
width={window.innerWidth * 0.75} width={window.innerWidth * 0.7}
height={window.innerHeight * 0.64} height={window.innerHeight * 0.64}
/> />
</div> </div>
@@ -554,7 +554,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, window.innerWidth * 0.75, window.innerHeight * 0.64); ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
}; };
}; };

2
src/components/recorder/canvas.tsx
View File

@@ -78,7 +78,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
}, [getText, getList]); }, [getText, getList]);
useEffect(() => { useEffect(() => {
coordinateMapper.updateDimensions(window.innerWidth * 0.75, window.innerHeight * 0.64); coordinateMapper.updateDimensions(window.innerWidth * 0.7, window.innerHeight * 0.64);
}, []); }, []);
useEffect(() => { useEffect(() => {

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

@@ -142,7 +142,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
background: '#ff00c3', background: '#ff00c3',
border: 'none', border: 'none',
padding: '10px 20px', padding: '10px 20px',
width: "100%", width: window.innerWidth * 0.7,
overflow: 'hidden', overflow: 'hidden',
textAlign: 'left', textAlign: 'left',
justifyContent: 'flex-start', justifyContent: 'flex-start',
@@ -165,7 +165,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
color: `${darkMode ? 'white' : 'black'}`, color: `${darkMode ? 'white' : 'black'}`,
padding: '10px', padding: '10px',
height: window.innerHeight * 0.7, height: window.innerHeight * 0.7,
width: window.innerWidth * 0.75, width: window.innerWidth * 0.7,
display: 'flex', display: 'flex',
borderRadius: '10px 10px 0 0', borderRadius: '10px 10px 0 0',
}, },

2
src/context/browserDimensions.tsx
View File

@@ -7,7 +7,7 @@ interface BrowserDimensions {
}; };
class BrowserDimensionsStore implements Partial<BrowserDimensions> { class BrowserDimensionsStore implements Partial<BrowserDimensions> {
width: number = window.innerWidth * 0.75; width: number = window.innerWidth * 0.7;
height: number = window.innerHeight * 0.64; height: number = window.innerHeight * 0.64;
}; };

2
src/helpers/coordinateMapper.ts
View File

@@ -7,7 +7,7 @@ export class CoordinateMapper {
private browserHeight: number; private browserHeight: number;
constructor( constructor(
canvasWidth: number = window.innerWidth * 0.75, canvasWidth: number = window.innerWidth * 0.7,
canvasHeight: number = window.innerHeight * 0.64, canvasHeight: number = window.innerHeight * 0.64,
browserWidth: number = BROWSER_DEFAULT_WIDTH, browserWidth: number = BROWSER_DEFAULT_WIDTH,
browserHeight: number = BROWSER_DEFAULT_HEIGHT browserHeight: number = BROWSER_DEFAULT_HEIGHT