Merge pull request #202 from GuoXiCheng/dev-c

update inspect
GuoXiCheng · Aug 21, 2024 · 64b0f1e · 64b0f1e
2 parents e7e1075 + ddccb4c
commit 64b0f1e
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 78 deletions.
diff --git a/docs/inspect/InspectContainer.vue b/docs/inspect/InspectContainer.vue
@@ -1,12 +1,14 @@
 <template>
     <el-row class="h-screen">
-        <el-col :span="8">
-            <NodePic v-if="rawData" :raw-data="rawData" :img-src="'/temp.png'" />
+        <el-col :span="6">
+            <NodePic v-if="rawData" :raw-data="rawData" :img-src="'/temp.png'" :current-node-key="currentNodeKey"
+                @handle-img-node-click="handleImgNodeClick" />
         </el-col>
-        <el-col :span="8">
-            <NodeTree :tree-data="treeData" @handleNodeClick="handleNodeClick" />
+        <el-col :span="9" class="h-full overflow-y-auto">
+            <NodeTree v-if="treeData" :tree-data="treeData" :current-node-key="currentNodeKey"
+                @handle-tree-node-click="handleTreeNodeClick" />
         </el-col>
-        <el-col :span="8">
+        <el-col :span="9">
             <NodeTable :node-data="nodeData" />
         </el-col>
     </el-row>
@@ -22,6 +24,7 @@ import { AccessibilityNode, AccessibilityNodeTree, AccessibilityWindow } from '.
 const treeData = ref<AccessibilityNodeTree[]>([]);
 const nodeData = ref<AccessibilityNode | null>(null);
 const rawData = ref<AccessibilityWindow | null>(null);
+const currentNodeKey = ref<number>(-1);
 
 onMounted(async () => {
     const temp = await fetch('/temp.json');
@@ -46,11 +49,18 @@ function buildTree(data: AccessibilityNode[], parentId: number): AccessibilityNo
             top,
             right,
             bottom,
+            nodeId
         }
     })
 }
 
-const handleNodeClick = (data: AccessibilityNode) => {
+const handleTreeNodeClick = (data: AccessibilityNode) => {
     nodeData.value = data;
+    currentNodeKey.value = data.nodeId;
+}
+
+const handleImgNodeClick = (data: AccessibilityNode) => {
+    nodeData.value = data;
+    currentNodeKey.value = data.nodeId;
 }
 </script>
diff --git a/docs/inspect/NodePic.vue b/docs/inspect/NodePic.vue
@@ -1,97 +1,127 @@
 <template>
-    <canvas id="myCanvas" class="cursor-crosshair"></canvas>
+    <div class="h-full border border-black border-solid relative flex justify-center">
+        <canvas id="topCanvas" class="cursor-crosshair absolute z-20"></canvas>"
+        <canvas id="bottomCanvas" class="cursor-crosshair absolute z-10"></canvas>
+    </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue'
-import { AccessibilityNode, AccessibilityWindow } from './types';
+import { onMounted, watch, ref } from 'vue'
+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 props = defineProps<{
     rawData: AccessibilityWindow | null;
     imgSrc: string;
+    currentNodeKey: number;
 }>();
 
-onMounted(async () => {
-    const data = props.rawData as AccessibilityWindow;
-    if (!data) return;
+watch(() => renderRectangle.value, (newVal) => {
+    const topCanvas = document.getElementById('topCanvas') as HTMLCanvasElement;
+    const topCtx = topCanvas.getContext('2d') as CanvasRenderingContext2D;
+
+    topCtx.clearRect(0, 0, topCanvas.width, topCanvas.height);
+    topCtx.strokeStyle = 'red';
+    topCtx.lineWidth = 2;
+    topCtx.strokeRect(newVal.left, newVal.top, newVal.right - newVal.left, newVal.bottom - newVal.top);
+});
+
+watch(() => props.currentNodeKey, (newVal) => {
+    if (props.rawData === null) return;
+
+    const raw = props.rawData as AccessibilityWindow;
+    const node = raw.nodes.find(node => node.nodeId === newVal);
+    if (node == null) return;
+
+    const bottomCanvas = document.getElementById('bottomCanvas') as HTMLCanvasElement;
+    const rateW = bottomCanvas.width / raw.screenWidth;
+    const rateH = bottomCanvas.height / raw.screenHeight;
+
+    const renderLeft = node.left * rateW;
+    const renderRight = node.right * rateW;
+    const renderTop = node.top * rateH;
+    const renderBottom = node.bottom * rateH;
+
+    renderRectangle.value = {
+        node,
+        left: renderLeft,
+        right: renderRight,
+        top: renderTop,
+        bottom: renderBottom
+    };
+})
+
+
+onMounted(() => {
+    const raw = props.rawData as AccessibilityWindow;
+    if (!raw) return;
 
-    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const bottomCanvas = document.getElementById('bottomCanvas') as HTMLCanvasElement;
+    const topCanvas = document.getElementById('topCanvas') as HTMLCanvasElement;
+    const bottomCtx = bottomCanvas.getContext('2d') as CanvasRenderingContext2D;
 
-    let renderableWidth: number, renderableHeight: number;
-    // 加载背景图
     const img = new Image();
-    img.src = props.imgSrc; // 在此替换为实际的图片URL
+    img.src = props.imgSrc;
     img.onload = function () {
-        const parentWidth = canvas.parentElement!.clientWidth;
-        const parentHeight = canvas.parentElement!.clientHeight;
+        const parentWidth = bottomCanvas.parentElement!.clientWidth;
+        const parentHeight = bottomCanvas.parentElement!.clientHeight;
 
         const parentAspect = parentWidth / parentHeight;
         const imgAspect = img.width / img.height;
 
         if (imgAspect < parentAspect) {
             // 纵向填充
-            renderableHeight = parentHeight;
-            renderableWidth = img.width * (renderableHeight / img.height);
+            renderUI.value.renderHeight = parentHeight;
+            renderUI.value.renderWidth = img.width * (parentHeight / img.height);
         } else if (imgAspect > parentAspect) {
             // 横向填充
-            renderableWidth = parentWidth;
-            renderableHeight = img.height * (renderableWidth / img.width);
+            renderUI.value.renderWidth = parentWidth;
+            renderUI.value.renderHeight = img.height * (parentWidth / img.width);
         } else {
             // 完全匹配
-            renderableWidth = parentWidth;
-            renderableHeight = parentHeight;
+            renderUI.value.renderWidth = parentWidth;
+            renderUI.value.renderHeight = parentHeight;
         }
 
-        canvas.width = renderableWidth;
-        canvas.height = renderableHeight;
+        bottomCanvas.width = renderUI.value.renderWidth;
+        bottomCanvas.height = renderUI.value.renderHeight;
+        topCanvas.width = renderUI.value.renderWidth;
+        topCanvas.height = renderUI.value.renderHeight;
 
-        ctx.drawImage(img, 0, 0, renderableWidth, renderableHeight);
-    };
+        bottomCtx.drawImage(img, 0, 0, renderUI.value.renderWidth, renderUI.value.renderHeight);
+    }
 
-    canvas.addEventListener('click', (event) => {
+    topCanvas.addEventListener('click', (event) => {
         const { offsetX, offsetY } = event;
-
-        let closestNode = null;
         let minDistance = Infinity;
 
-        data.nodes.forEach(node => {
-            const rateW = canvas.width / data.screenWidth;
-            const rateH = canvas.height / data.screenHeight;
+        raw.nodes.forEach(node => {
+            const rateW = bottomCanvas.width / raw.screenWidth;
+            const rateH = bottomCanvas.height / raw.screenHeight;
 
-            const rateLeft = node.left * rateW;
-            const rateRight = node.right * rateW;
-            const rateTop = node.top * rateH;
-            const rateBottom = node.bottom * rateH;
+            const renderLeft = node.left * rateW;
+            const renderRight = node.right * rateW;
+            const renderTop = node.top * rateH;
+            const renderBottom = node.bottom * rateH;
 
-            const centerX = (rateLeft + rateRight) / 2;
-            const centerY = (rateTop + rateBottom) / 2;
+            const centerX = (renderLeft + renderRight) / 2;
+            const centerY = (renderTop + renderBottom) / 2;
             const distance = Math.sqrt(Math.pow(offsetX - centerX, 2) + Math.pow(offsetY - centerY, 2));
-
-            if (distance < minDistance && offsetX >= rateLeft && offsetX <= rateRight && offsetY >= rateTop && offsetY <= rateBottom) {
+            if (distance < minDistance && offsetX >= renderLeft && offsetX <= renderRight && offsetY >= renderTop && offsetY <= renderBottom) {
                 minDistance = distance;
-                closestNode = {
-                    ...node,
-                    left: rateLeft,
-                    right: rateRight,
-                    top: rateTop,
-                    bottom: rateBottom,
+                renderRectangle.value = {
+                    node,
+                    left: renderLeft,
+                    right: renderRight,
+                    top: renderTop,
+                    bottom: renderBottom
                 };
+                emit('handleImgNodeClick', node);
             }
-        });
-
-        if (closestNode !== null) {
-            closestNode = closestNode as AccessibilityNode;
-            // 重新绘制背景图
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.drawImage(img, 0, 0, renderableWidth, renderableHeight);
-
-            // 绘制标记矩形
-            ctx.strokeStyle = 'red';
-            ctx.lineWidth = 2;
-            ctx.strokeRect(closestNode.left, closestNode.top, closestNode.right - closestNode.left, closestNode.bottom - closestNode.top);
-        }
-
-    });
-})
+        })
+    })
+});
 </script>
diff --git a/docs/inspect/NodeTable.vue b/docs/inspect/NodeTable.vue
@@ -6,22 +6,26 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 import { AccessibilityNode } from './types'
 
-const excludeKeys = ['label', 'children', 'childCount'];
-
 const props = defineProps<{
     nodeData: AccessibilityNode | null
 }>();
 
 const tableData = computed(() => {
     if (!props.nodeData) return [];
-    const temp: { key: string; value: string }[] = [];
-    for (const key in props.nodeData) {
-        if (excludeKeys.includes(key)) continue;
-        temp.push({ key, value: props.nodeData[key] });
-    }
+    const selectedKey: (keyof AccessibilityNode)[] = [
+        'viewIdResourceName', 'className', 'text', 'left', 'top', 'right', 'bottom', 'childCount'
+    ];
+
+    const temp = selectedKey.map((item: keyof AccessibilityNode) => {
+        return {
+            key: item,
+            value: props!.nodeData![item]
+        }
+    })
+
     return temp;
 })
 </script>
diff --git a/docs/inspect/NodeTree.vue b/docs/inspect/NodeTree.vue
@@ -1,18 +1,24 @@
 <template>
-    <el-tree style="max-width: 600px" :data="treeData" :props="props.treeData" @node-click="handleNodeClick" />
+    <el-tree :data="treeData" :props="{ class: customNodeClass }" @node-click="handleNodeClick"
+        :current-node-key="currentNodeKey" :expand-on-click-node="false" node-key="nodeId" />
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits } from 'vue'
 import { Tree, AccessibilityNodeTree } from './types'
+import type Node from 'element-plus/es/components/tree/src/model/node'
 
-const emit = defineEmits(['handleNodeClick']);
+const emit = defineEmits(['handleTreeNodeClick']);
 
 const props = defineProps<{
-    treeData: AccessibilityNodeTree[]
+    treeData: AccessibilityNodeTree[],
+    currentNodeKey: number
 }>();
 
 const handleNodeClick = (data: Tree) => {
-    emit('handleNodeClick', data)
+    emit('handleTreeNodeClick', data)
+}
+
+const customNodeClass = (data: Tree, node: Node) => {
+    return node.isCurrent ? 'text-red-500' : '';
 }
 </script>