Adding visual indicator of overlapping views

Author: jwlilly

src/renderer/index.scss

@@ -8463,11 +8463,6 @@ html:has(.drawer-open.drawer-open) {
   margin-bottom: 1rem;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }

src/renderer/views/main-view.tsx

@@ -26,6 +26,7 @@ import SearchView from './search-view';
 
 function MainView(): React.JSX.Element {
   const [selectedView, setSelectedView] = useState<number>(0);
+  const [overlappingViews, setOverlappingViews] = useState<any[]>([]);
   const [viewHierarchy, setViewHierarchy] = useState({ name: '' });
   const [selectedDevice, setSelectedDevice] = useState<IDevice | null>(null);
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -114,7 +115,8 @@ function MainView(): React.JSX.Element {
       const clickable =
         item.metadata &&
         item.metadata.properties &&
-        item.metadata.properties.includes('clickable');
+        item.metadata.properties.includes('clickable') &&
+        (item.metadata.scaledWidth < 24.0 || item.metadata.scaledHeight < 24.0);
       if (clickable) {
         const scaleFactor = item.metadata.dpScaleFactor;
         centers.push({
@@ -136,6 +138,7 @@ function MainView(): React.JSX.Element {
       });
     });
     console.log('possible overlaps', overlaps);
+    setOverlappingViews(overlaps);
   };
 
   const messageReceived = useCallback((data: any) => {
@@ -313,6 +316,7 @@ function MainView(): React.JSX.Element {
             hoverCoord={hoveredCoord}
             dataTree={viewHierarchy}
             onViewSelected={onHoveredViewSelected}
+            overlappingViews={overlappingViews}
           />
         </div>
         <Splitter

src/renderer/views/screenshot.tsx

@@ -14,6 +14,7 @@ const Screenshot = function Screenshot({
   selectCoord,
   dataTree,
   onViewSelected,
+  overlappingViews,
 }: any) {
   const [screencapHeight, setScreencapHeight] = useState(0);
   const [screencapWidth, setScreencapWidth] = useState(0);
@@ -132,8 +133,6 @@ const Screenshot = function Screenshot({
   const svgClick = useCallback(() => {
     onViewSelected(hoveredView);
   }, [hoveredView, onViewSelected]);
-
-  // if (screencap) {
   return (
     <div className="m-auto mx-4">
       <div className="relative mx-auto border-base-content bg-base-content border-[14px] rounded-xl max-h-[calc(100vh-150px)] h-full w-full shadow-xl">
@@ -155,6 +154,22 @@ const Screenshot = function Screenshot({
               onClick={svgClick}
             >
               <image href={`data:image/png;base64,${screencap}`} />
+              {overlappingViews.map((overlappingView: any) => (
+                <circle
+                  r={((screencapWidth / width) * 10).toFixed(0)}
+                  cx={
+                    (overlappingView.metadata.x2 +
+                      overlappingView.metadata.x1) /
+                    2
+                  }
+                  cy={
+                    (overlappingView.metadata.y2 +
+                      overlappingView.metadata.y1) /
+                    2
+                  }
+                  fill="rgba(255, 0, 0, 0.3)"
+                />
+              ))}
               {hoverCoord.x !== 0 ||
               hoverCoord.y !== 0 ||
               hoverCoord.width !== 0 ||