fix: inspect margin/border/padding of bricks

easyops-cn · Apr 15, 2020 · f2e048b · f2e048b
1 parent 1010a41
commit f2e048b
Showing 1 changed file with 88 additions and 14 deletions.
diff --git a/src/hook.ts b/src/hook.ts
@@ -89,35 +89,109 @@ function injectHook(): void {
     return { properties, events };
   }
 
-  let inspectBox: HTMLElement;
+  const inspector: Record<string, HTMLElement> = {};
   let inspectBoxRemoved = false;
 
   function showInspectBox(uid: number): void {
     hideInspectBox();
     const element = uidToBrick.get(uid);
-    if (!inspectBox) {
-      inspectBox = document.createElement("div");
-      inspectBox.style.position = "absolute";
-      inspectBox.style.zIndex = "1000000";
-      inspectBox.style.pointerEvents = "none";
-      inspectBox.style.backgroundColor = "rgba(120, 170, 210, 0.7)";
+    if (!inspector.node) {
+      inspector.node = document.createElement("div");
+      inspector.border = document.createElement("div");
+      inspector.padding = document.createElement("div");
+      inspector.content = document.createElement("div");
+
+      Object.assign(inspector.node.style, {
+        position: "absolute",
+        zIndex: "1000000",
+        pointerEvents: "none",
+        borderColor: "rgba(255, 155, 0, 0.3)",
+      });
+
+      inspector.border.style.borderColor = "rgba(255, 200, 50, 0.3)";
+      inspector.padding.style.borderColor = "rgba(77, 200, 0, 0.3)";
+      inspector.content.style.backgroundColor = "rgba(120, 170, 210, 0.7)";
+
+      inspector.node.appendChild(inspector.border);
+      inspector.border.appendChild(inspector.padding);
+      inspector.padding.appendChild(inspector.content);
     }
     const box = element.getBoundingClientRect();
-    inspectBox.style.top = `${box.top + window.scrollY}px`;
-    inspectBox.style.left = `${box.left + window.scrollX}px`;
-    inspectBox.style.width = `${box.width}px`;
-    inspectBox.style.height = `${box.height}px`;
-    document.body.appendChild(inspectBox);
+    const dims = getElementDimensions(element);
+
+    boxWrap(inspector.node, dims, "margin");
+    boxWrap(inspector.border, dims, "border");
+    boxWrap(inspector.padding, dims, "padding");
+
+    Object.assign(inspector.content.style, {
+      width: `${
+        box.width -
+        dims.borderLeft -
+        dims.borderRight -
+        dims.paddingLeft -
+        dims.paddingRight
+      }px`,
+      height: `${
+        box.height -
+        dims.borderTop -
+        dims.borderBottom -
+        dims.paddingTop -
+        dims.paddingBottom
+      }px`,
+    });
+
+    Object.assign(inspector.node.style, {
+      top: `${box.top - dims.marginTop + window.scrollY}px`,
+      left: `${box.left - dims.marginLeft + window.scrollX}px`,
+    });
+
+    document.body.appendChild(inspector.node);
+    document.body.addEventListener("mouseenter", hideInspectBox);
     inspectBoxRemoved = false;
   }
 
   function hideInspectBox(): void {
-    if (inspectBox && !inspectBoxRemoved) {
-      inspectBox.remove();
+    if (inspector.node && !inspectBoxRemoved) {
+      inspector.node.remove();
+      document.body.removeEventListener("mouseenter", hideInspectBox);
       inspectBoxRemoved = true;
     }
   }
 
+  function getElementDimensions(
+    domElement: HTMLElement
+  ): Record<string, number> {
+    const calculatedStyle = window.getComputedStyle(domElement);
+    return {
+      borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),
+      borderRight: parseInt(calculatedStyle.borderRightWidth, 10),
+      borderTop: parseInt(calculatedStyle.borderTopWidth, 10),
+      borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),
+      marginLeft: parseInt(calculatedStyle.marginLeft, 10),
+      marginRight: parseInt(calculatedStyle.marginRight, 10),
+      marginTop: parseInt(calculatedStyle.marginTop, 10),
+      marginBottom: parseInt(calculatedStyle.marginBottom, 10),
+      paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),
+      paddingRight: parseInt(calculatedStyle.paddingRight, 10),
+      paddingTop: parseInt(calculatedStyle.paddingTop, 10),
+      paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),
+    };
+  }
+
+  function boxWrap(
+    element: HTMLElement,
+    dims: Record<string, number>,
+    what: string
+  ): void {
+    Object.assign(element.style, {
+      borderTopWidth: dims[what + "Top"] + "px",
+      borderLeftWidth: dims[what + "Left"] + "px",
+      borderRightWidth: dims[what + "Right"] + "px",
+      borderBottomWidth: dims[what + "Bottom"] + "px",
+      borderStyle: "solid",
+    });
+  }
+
   function emit(payload: any): void {
     window.postMessage(
       {