feat: element highlighter

2024-06-14 21:48:23 +05:30
parent 1f434c952c
commit 41736c3ac4
1 changed files with 127 additions and 0 deletions
--- a/src/components/atoms/Highlighter.tsx
+++ b/src/components/atoms/Highlighter.tsx
@@ -0,0 +1,127 @@
+import React  from 'react';
+
+import styled from "styled-components";
+import { mapRect } from "../../helpers/inputHelpers";
+import canvas from "./canvas";
+
+interface HighlighterProps {
+  unmodifiedRect: DOMRect;
+  displayedSelector: string;
+  width: number;
+  height: number;
+  canvasRect: DOMRect;
+};
+
+export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, height, canvasRect}: HighlighterProps) => {
+  if (!unmodifiedRect) {
+    return null;
+  } 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 = {
+      top: unmodifiedRect.top + canvasRect.top,
+      left: unmodifiedRect.left +  canvasRect.left,
+      right: unmodifiedRect.right + canvasRect.left,
+      bottom: unmodifiedRect.bottom + canvasRect.top,
+      width: unmodifiedRect.width,
+      height: unmodifiedRect.height,
+    };
+
+    const adjustedWidth = Math.min(rect.width, width - rect.left); // Adjust width if it extends beyond canvas boundary
+    const adjustedHeight = Math.min(rect.height, height - rect.top); // Adjust height if it extends beyond canvas boundary
+
+    console.log('unmodifiedRect:', unmodifiedRect)
+    console.log('rectangle:', rect)
+    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 (
+      <div>
+        <HighlighterOutline
+          id="Highlighter-outline"
+          top={rect.top}
+          left={rect.left}
+          width={rect.width}
+          height={rect.height}
+        />
+        <HighlighterLabel
+          id="Highlighter-label"
+          top={rect.top + rect.height + 8}
+          left={rect.left}
+        >
+          {displayedSelector}
+        </HighlighterLabel>
+      </div>
+    );
+  }
+}
+
+const HighlighterOutline = styled.div<HighlighterOutlineProps>`
+  box-sizing: border-box;
+  pointer-events: none !important;
+  position: fixed !important;
+  background: #ff5d5b26 !important;
+  outline: 4px solid pink !important;
+  // border: 4px solid #ff5d5b !important;
+  z-index: 2147483647 !important;
+  // border-radius: 5px;
+  top: ${(p: HighlighterOutlineProps) => p.top}px;
+  left: ${(p: HighlighterOutlineProps) => p.left}px;
+  width: ${(p: HighlighterOutlineProps) => p.width}px;
+  height: ${(p: HighlighterOutlineProps) => p.height}px;
+`;
+
+const HighlighterLabel = styled.div<HighlighterLabelProps>`
+  pointer-events: none !important;
+  position: fixed !important;
+  background: #080a0b !important;
+  color: white !important;
+  padding: 8px !important;
+  font-family: monospace !important;
+  border-radius: 5px !important;
+  z-index: 2147483647 !important;
+  top: ${(p: HighlighterLabelProps) => p.top}px;
+  left: ${(p: HighlighterLabelProps) => p.left}px;
+`;
+
+interface HighlighterLabelProps{
+  top: number;
+  left: number;
+}
+
+interface HighlighterOutlineProps {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}