update inspect

GuoXiCheng · Aug 24, 2024 · 0377082 · 0377082
1 parent e5fe9f8
commit 0377082
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/docs/inspect/InspectContainer.vue b/docs/inspect/InspectContainer.vue
@@ -1,22 +1,24 @@
 <template>
-  <el-row class="h-screen" v-if="rawData">
+  <el-row class="h-screen">
     <el-col :span="6">
       <NodePic
         :raw-data="rawData"
         :img-src="imgSrc"
         :current-node-key="currentNodeKey"
         @handle-img-node-click="handleImgNodeClick"
+        v-if="rawData"
       />
     </el-col>
     <el-col :span="9" class="h-full overflow-y-auto">
       <NodeTree
         :tree-data="treeData"
         :current-node-key="currentNodeKey"
         @handle-tree-node-click="handleTreeNodeClick"
+        v-if="treeData"
       />
     </el-col>
     <el-col :span="9">
-      <NodeTable :node-data="nodeData" :raw-data="rawData" />
+      <NodeTable :node-data="nodeData" :raw-data="rawData" v-if="rawData" />
     </el-col>
   </el-row>
 </template>

diff --git a/docs/inspect/NodePic.vue b/docs/inspect/NodePic.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="h-full relative flex justify-center">
+    <div id="subWindow" class="bg-green-500 absolute z-30 hidden">
+      <div>{{ position.x }},{{ position.y }}</div>
+    </div>
     <canvas id="topCanvas" class="cursor-crosshair absolute z-20"></canvas>
     <canvas id="bottomCanvas" class="cursor-crosshair absolute z-10"></canvas>
   </div>
@@ -12,6 +15,7 @@ import { AccessibilityWindow } from "./types";
 const emit = defineEmits(["handleImgNodeClick"]);
 const renderUI = ref({ renderWidth: 0, renderHeight: 0 });
 const renderRectangle = ref({ node: {}, left: 0, top: 0, right: 0, bottom: 0 });
+const position = ref({ x: 0, y: 0 });
 
 const props = defineProps<{
   rawData: AccessibilityWindow | null;
@@ -177,5 +181,28 @@ onMounted(() => {
       }
     });
   });
+
+  topCanvas.addEventListener("mouseenter", () => {
+    const subWindow = document.getElementById("subWindow") as HTMLDivElement;
+    subWindow.classList.remove("hidden");
+
+    subWindow.style.left = topCanvas.parentElement?.clientWidth! + "px";
+    subWindow.style.top = topCanvas.parentElement?.clientWidth! / 10 + "px";
+  });
+
+  topCanvas.addEventListener("mouseleave", () => {
+    const subWindow = document.getElementById("subWindow") as HTMLDivElement;
+    subWindow.classList.add("hidden");
+  });
+
+  topCanvas.addEventListener("mousemove", (event) => {
+    const { offsetX, offsetY } = event;
+    const rateW = topCanvas.width / raw.screenWidth;
+    const rateH = topCanvas.height / raw.screenHeight;
+    position.value = {
+      x: Math.round(offsetX / rateW),
+      y: Math.round(offsetY / rateH),
+    };
+  });
 });
 </script>
diff --git a/docs/inspect/NodeTable.vue b/docs/inspect/NodeTable.vue
@@ -19,7 +19,8 @@ const props = defineProps<{
   nodeData: AccessibilityNode | null;
 }>();
 
-function buildWindowTableData(data: AccessibilityWindow) {
+function buildWindowTableData(data: AccessibilityWindow | null) {
+  if (!data) return [];
   return [
     {
       key: "应用名称",
@@ -44,7 +45,8 @@ function buildWindowTableData(data: AccessibilityWindow) {
   ];
 }
 
-function buildNodeTableData(data: AccessibilityNode) {
+function buildNodeTableData(data: AccessibilityNode | null) {
+  if (!data) return [];
   return [
     { key: "viewIdResourceName", value: data.viewIdResourceName },
     { key: "className", value: data.className },
@@ -64,9 +66,9 @@ watch(
   () => segmentedValue.value,
   (newVal) => {
     if (newVal === "Window") {
-      tableData.value = buildWindowTableData(props.rawData!);
+      tableData.value = buildWindowTableData(props.rawData);
     } else if (newVal === "Node") {
-      tableData.value = buildNodeTableData(props.nodeData!);
+      tableData.value = buildNodeTableData(props.nodeData);
     }
   },
   { immediate: true }