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

chore: remove prev. rectangle

Browse Source
This commit is contained in:
karishmas6
2024-07-16 20:06:42 +05:30
parent b70b1be6e9
commit 234717b65e
1 changed files with 5 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/atoms/Highlighter.tsx
View File

@@ -8,29 +8,15 @@ interface HighlighterProps {
width: number; width: number;
height: number; height: number;
canvasRect: DOMRect; canvasRect: DOMRect;
isSelected: boolean;
}; };
export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, height, canvasRect, isSelected }: HighlighterProps) => { export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, height, canvasRect }: HighlighterProps) => {
if (!unmodifiedRect) { if (!unmodifiedRect) {
return null; return null;
} else { } else {
// const unshiftedRect = mapRect(unmodifiedRect, width, height);
// console.log('unshiftedRect', unshiftedRect)
// const rect = {
// bottom: unshiftedRect.bottom + canvasRect.top,
// top: unshiftedRect.top + canvasRect.top,
// left: unshiftedRect.left + canvasRect.left,
// right: unshiftedRect.right + canvasRect.left,
// x: unshiftedRect.x + canvasRect.left,
// y: unshiftedRect.y + canvasRect.top,
// width: unshiftedRect.width,
// height: unshiftedRect.height,
// }
const rect = { const rect = {
top: unmodifiedRect.top + canvasRect.top, top: unmodifiedRect.top + canvasRect.top + window.scrollY,
left: unmodifiedRect.left + canvasRect.left, left: unmodifiedRect.left + canvasRect.left + window.scrollX,
right: unmodifiedRect.right + canvasRect.left, right: unmodifiedRect.right + canvasRect.left,
bottom: unmodifiedRect.bottom + canvasRect.top, bottom: unmodifiedRect.bottom + canvasRect.top,
width: unmodifiedRect.width, width: unmodifiedRect.width,
@@ -42,26 +28,6 @@ export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, hei
console.log('rectangle:', rect) console.log('rectangle:', rect)
console.log('canvas rectangle:', canvasRect) console.log('canvas rectangle:', canvasRect)
// make the highlighting rectangle stay in browser window boundaries
// if (rect.bottom > canvasRect.bottom) {
// rect.height = height - unshiftedRect.top;
// }
// if (rect.top < canvasRect.top) {
// rect.height = rect.height - (canvasRect.top - rect.top);
// rect.top = canvasRect.top;
// }
// if (rect.right > canvasRect.right) {
// rect.width = width - unshiftedRect.left;
// }
// if (rect.left < canvasRect.left) {
// rect.width = rect.width - (canvasRect.left - rect.left);
// rect.left = canvasRect.left;
// }
return ( return (
<div> <div>
<HighlighterOutline <HighlighterOutline
@@ -70,10 +36,6 @@ export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, hei
left={rect.left} left={rect.left}
width={rect.width} width={rect.width}
height={rect.height} height={rect.height}
style={{
background: isSelected ? '#ff0000' : '#ff5d5b26',
outline: isSelected ? '2px solid red' : '2px solid pink',
}}
/> />
<HighlighterLabel <HighlighterLabel
id="Highlighter-label" id="Highlighter-label"
@@ -93,9 +55,9 @@ const HighlighterOutline = styled.div<HighlighterOutlineProps>`
position: fixed !important; position: fixed !important;
background: #ff5d5b26 !important; background: #ff5d5b26 !important;
outline: 4px solid pink !important; outline: 4px solid pink !important;
// border: 4px solid #ff5d5b !important; //border: 4px solid #ff5d5b !important;
z-index: 2147483647 !important; z-index: 2147483647 !important;
// border-radius: 5px; //border-radius: 5px;
top: ${(p: HighlighterOutlineProps) => p.top}px; top: ${(p: HighlighterOutlineProps) => p.top}px;
left: ${(p: HighlighterOutlineProps) => p.left}px; left: ${(p: HighlighterOutlineProps) => p.left}px;
width: ${(p: HighlighterOutlineProps) => p.width}px; width: ${(p: HighlighterOutlineProps) => p.width}px;