Fix inspector overlay

packages/vscode-extension/lib/components/DimensionsBox.js

@@ -0,0 +1,103 @@
+const {
+  Dimensions,
+  Text,
+  View,
+} = require("react-native");
+
+const BOX_HEIGHT_FRACTION = 0.033;
+const FONT_SIZE_FRACTION = 0.6;
+const BORDER_RADIUS_FRACTION = 0.15;
+const HORIZONTAL_PADDING_FRACTION = 0.3;
+
+const VERTICAL_POSITION_THRESHOLD = 0.3;
+const HORIZONTAL_POSITION_THRESHOLD = 0.5;
+
+const VERTICAL_ARROW_MARGIN = 10;
+const HORIZONTAL_ARROW_MARGIN = 20;
+
+function DimensionsBox({ frame }) {
+  const width = parseFloat(frame.width.toFixed(2));
+  const height = parseFloat(frame.height.toFixed(2));
+  const { width: screenWidth, height: screenHeight } = Dimensions.get("screen");
+
+  const boxPosition = (() => {
+    if (frame.y / screenHeight >= VERTICAL_POSITION_THRESHOLD) {
+      return "above";
+    } else if ((frame.y + frame.height) / screenHeight <= 1 - VERTICAL_POSITION_THRESHOLD) {
+      return "below";
+    } else if ((frame.x + frame.width) / screenWidth <= HORIZONTAL_POSITION_THRESHOLD) {
+      return "right";
+    } else if (frame.x / screenWidth >= 1 - HORIZONTAL_POSITION_THRESHOLD) {
+      return "left";
+    }
+    return "inside";
+  })();
+
+  const positionalProps = (() => {
+    switch (boxPosition) {
+      case "above":
+        const res = {
+          top: frame.y - VERTICAL_ARROW_MARGIN,
+          left: frame.x + frame.width / 2,
+          transform: "translate(-50%, -100%)",
+        };
+        return res;
+      case "below":
+        return {
+          top: frame.y + frame.height + VERTICAL_ARROW_MARGIN,
+          left: frame.x + frame.width / 2,
+          transform: "translate(-50%, 0%)",
+        };
+      case "right":
+        return {
+          top: frame.y + frame.height / 2,
+          left: frame.x + frame.width + HORIZONTAL_ARROW_MARGIN,
+          transform: "translate(0%, -50%)",
+        };
+      case "left":
+        return {
+          top: frame.y + frame.height / 2,
+          left: frame.x - HORIZONTAL_ARROW_MARGIN,
+          transform: "translate(-100%, -50%)",
+        };
+      default:
+        return {
+          top: frame.y + frame.height / 2,
+          left: frame.x + frame.width / 2,
+          transform: "translate(-50%, -50%)",
+        };
+    }
+  })();
+
+  const boxHeight = screenHeight * BOX_HEIGHT_FRACTION;
+
+  const cssPropertiesForDimensionsBox = {
+    height: boxHeight,
+    justifyContent: "center",
+    paddingLeft: boxHeight * HORIZONTAL_PADDING_FRACTION,
+    paddingRight: boxHeight * HORIZONTAL_PADDING_FRACTION,
+    borderRadius: boxHeight * BORDER_RADIUS_FRACTION,
+    fontSize: boxHeight * FONT_SIZE_FRACTION,
+    backgroundColor: "rgb(64, 64, 64)",
+    position: "absolute",
+    alignItems: "center",
+  };
+
+  return (
+    <View
+      style={{
+        ...cssPropertiesForDimensionsBox,
+        ...positionalProps,
+      }}>
+      <Text style={{ color: "rgb(101, 123, 131)" }}>
+        {width} × {height}
+      </Text>
+    </View>
+  );
+}
+
+
+export default {
+    DimensionsBox
+  };
+

packages/vscode-extension/lib/wrapper.js

@@ -6,11 +6,13 @@ const {
   AppRegistry,
   Dimensions,
   RootTagContext,
+  Text,
   View,
   Linking,
   findNodeHandle,
 } = require("react-native");
 const { storybookPreview } = require("./storybook_helper");
+const { DimensionsBox } = require("./components/DimensionsBox").default;
 
 // https://github.com/facebook/react/blob/c3570b158d087eb4e3ee5748c4bd9360045c8a26/packages/react-reconciler/src/ReactWorkTags.js#L62
 const OffscreenComponentReactTag = 22;
@@ -25,7 +27,7 @@ let navigationHistory = new Map();
 const InternalImports = {
   get PREVIEW_APP_KEY() {
     return require("./preview").PREVIEW_APP_KEY;
-  },
+  }
 };
 
 const RNInternals = {
@@ -138,10 +140,10 @@ function getInspectorDataForCoordinates(mainContainerRef, x, y, requestStack, ca
     (viewData) => {
       const frame = viewData.frame;
       const scaledFrame = {
-        x: frame.left / screenWidth,
-        y: frame.top / screenHeight,
-        width: frame.width / screenWidth,
-        height: frame.height / screenHeight,
+        x: frame.left,
+        y: frame.top,
+        width: frame.width,
+        height: frame.height,
       };
 
       if (!requestStack) {
@@ -168,10 +170,10 @@ function getInspectorDataForCoordinates(mainContainerRef, x, y, requestStack, ca
                       column0Based: source.columnNumber - 1,
                     },
                     frame: {
-                      x: pageX / screenWidth,
-                      y: pageY / screenHeight,
-                      width: viewWidth / screenWidth,
-                      height: viewHeight / screenHeight,
+                      x: pageX,
+                      y: pageY,
+                      width: viewWidth,
+                      height: viewHeight,
                     },
                   });
                 });
@@ -194,6 +196,14 @@ export function AppWrapper({ children, initialProps, fabric }) {
   const rootTag = useContext(RootTagContext);
   const [devtoolsAgent, setDevtoolsAgent] = useState(null);
   const [hasLayout, setHasLayout] = useState(false);
+  const [showInspectOverlay, setShowInspectOverlay] = useState(false);
+  const [showDimensionsBox, setShowDimensionsBox] = useState(false);
+  const [inspectOverlayFrame, setInspectOverlayFrame] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
   const mainContainerRef = useRef();
 
   const mountCallback = initialProps?.__RNIDE_onMount;
@@ -301,18 +311,32 @@ export function AppWrapper({ children, initialProps, fabric }) {
     devtoolsAgent,
     "RNIDE_inspect",
     (payload) => {
-      const { id, x, y, requestStack } = payload;
+      const { id, x, y, requestStack, showDimensionsBox } = payload;
 
       getInspectorDataForCoordinates(mainContainerRef, x, y, requestStack, (inspectorData) => {
         devtoolsAgent._bridge.send("RNIDE_inspectData", {
           id,
           ...inspectorData,
         });
+        setInspectOverlayFrame(inspectorData.frame);
+        setShowDimensionsBox(showDimensionsBox);
+        setShowInspectOverlay(true);
       });
     },
     [mainContainerRef]
   );
 
+  useAgentListener(devtoolsAgent, "RNIDE_showInspectOverlay", (payload) => {
+    const { x, y, width, height } = payload;
+    setInspectOverlayFrame({ x, y, height, width });
+    setShowInspectOverlay(true);
+  });
+
+  useAgentListener(devtoolsAgent, "RNIDE_hideInspectOverlay", (payload) => {
+    setShowInspectOverlay(false);
+    setShowDimensionsBox(false);
+  });
+
   useAgentListener(
     devtoolsAgent,
     "RNIDE_showStorybookStory",
@@ -359,15 +383,29 @@ export function AppWrapper({ children, initialProps, fabric }) {
   }, [!!devtoolsAgent && hasLayout]);
 
   return (
-    <View
-      ref={mainContainerRef}
-      style={{ flex: 1 }}
-      onLayout={() => {
-        layoutCallback?.();
-        setHasLayout(true);
-      }}>
-      {children}
-    </View>
+    <>
+      <View
+        ref={mainContainerRef}
+        style={{ flex: 1, backgroundColor: "black" }}
+        onLayout={() => {
+          layoutCallback?.();
+          setHasLayout(true);
+        }}>
+        {children}
+      </View>
+      {showInspectOverlay && (
+        <View
+          style={{
+            left: inspectOverlayFrame.x,
+            top: inspectOverlayFrame.y,
+            width: inspectOverlayFrame.width,
+            height: inspectOverlayFrame.height,
+            position: "absolute",
+            backgroundColor: "rgba(56, 172, 221, 0.85)",
+          }}></View>
+      )}
+      {showInspectOverlay && showDimensionsBox && <DimensionsBox frame={inspectOverlayFrame} />}
+    </>
   );
 }
 
@@ -381,4 +419,4 @@ export function createNestedAppWrapper(InnerWrapperComponent) {
     );
   }
   return WrapperComponent;
-}
+}

packages/vscode-extension/src/common/Project.ts

@@ -156,8 +156,14 @@ export interface ProjectInterface {
     xRatio: number,
     yRatio: number,
     requestStack: boolean,
+    isInspecting: boolean,
     callback: (inspectData: InspectData) => void
   ): Promise<void>;
+  showInspectOverlay(
+    frame: { x: number; y: number; width: number; height: number },
+    isInspecting?: boolean
+  ): void;
+  hideInspectOverlay(): void;
 
   addListener<K extends keyof ProjectEventMap>(
     eventType: K,

packages/vscode-extension/src/project/deviceSession.ts

@@ -288,6 +288,7 @@ export class DeviceSession implements Disposable {
     xRatio: number,
     yRatio: number,
     requestStack: boolean,
+    showDimensionsBox: boolean,
     callback: (inspectData: any) => void
   ) {
     const id = this.inspectCallID++;
@@ -298,7 +299,21 @@ export class DeviceSession implements Disposable {
       }
     };
     this.devtools?.addListener(listener);
-    this.devtools.send("RNIDE_inspect", { x: xRatio, y: yRatio, id, requestStack });
+    this.devtools.send("RNIDE_inspect", {
+      x: xRatio,
+      y: yRatio,
+      id,
+      requestStack,
+      showDimensionsBox,
+    });
+  }
+
+  public showInspectOverlay(frame: { x: number; y: number; width: number; height: number }): void {
+    this.devtools.send("RNIDE_showInspectOverlay", frame);
+  }
+
+  public hideInspectOverlay() {
+    this.devtools.send("RNIDE_hideInspectOverlay");
   }
 
   public openNavigation(id: string) {

packages/vscode-extension/src/project/project.ts

@@ -433,30 +433,45 @@ export class Project
     xRatio: number,
     yRatio: number,
     requestStack: boolean,
+    showDimensionsBox: boolean,
     callback: (inspectData: InspectData) => void
   ) {
-    this.deviceSession?.inspectElementAt(xRatio, yRatio, requestStack, (inspectData) => {
-      let stack = undefined;
-      if (requestStack && inspectData?.stack) {
-        stack = inspectData.stack;
-        const inspectorExcludePattern = workspace
-          .getConfiguration("RadonIDE")
-          .get("inspectorExcludePattern") as string | undefined;
-        const patterns = inspectorExcludePattern?.split(",").map((pattern) => pattern.trim());
-        function testInspectorExcludeGlobPattern(filename: string) {
-          return patterns?.some((pattern) => minimatch(filename, pattern));
-        }
-        stack.forEach((item: any) => {
-          item.hide = false;
-          if (!isAppSourceFile(item.source.fileName)) {
-            item.hide = true;
-          } else if (testInspectorExcludeGlobPattern(item.source.fileName)) {
-            item.hide = true;
+    this.deviceSession?.inspectElementAt(
+      xRatio,
+      yRatio,
+      requestStack,
+      showDimensionsBox,
+      (inspectData) => {
+        let stack = undefined;
+        if (requestStack && inspectData?.stack) {
+          stack = inspectData.stack;
+          const inspectorExcludePattern = workspace
+            .getConfiguration("RadonIDE")
+            .get("inspectorExcludePattern") as string | undefined;
+          const patterns = inspectorExcludePattern?.split(",").map((pattern) => pattern.trim());
+          function testInspectorExcludeGlobPattern(filename: string) {
+            return patterns?.some((pattern) => minimatch(filename, pattern));
           }
-        });
+          stack.forEach((item: any) => {
+            item.hide = false;
+            if (!isAppSourceFile(item.source.fileName)) {
+              item.hide = true;
+            } else if (testInspectorExcludeGlobPattern(item.source.fileName)) {
+              item.hide = true;
+            }
+          });
+        }
+        callback({ frame: inspectData.frame, stack });
       }
-      callback({ frame: inspectData.frame, stack });
-    });
+    );
+  }
+
+  public showInspectOverlay(frame: { x: number; y: number; width: number; height: number }): void {
+    this.deviceSession?.showInspectOverlay(frame);
+  }
+
+  public hideInspectOverlay(): void {
+    this.deviceSession?.hideInspectOverlay();
   }
 
   public async resumeDebugger() {