Merge pull request #201 from GuoXiCheng/dev-c

Dev

app/src/main/java/com/android/skip/service/MyAccessibilityService.kt

@@ -26,14 +26,17 @@ import com.android.skip.utils.AccessibilityUtils
 import com.android.skip.utils.Constants
 import com.android.skip.utils.DataStoreUtils
 import com.blankj.utilcode.util.LogUtils
+import com.blankj.utilcode.util.ScreenUtils
 import com.blankj.utilcode.util.ServiceUtils
 import com.google.gson.Gson
 import com.google.gson.GsonBuilder
 import java.io.File
 
+data class MyWindow(val packageName: String, val className: String, val screenHeight: Int, val screenWidth: Int, val nodes: MutableList<MyNodeChild>)
+
 data class MyNode(val node: AccessibilityNodeInfo, val depth: Int, val parentId: Int, val nodeId: Int)
 
-data class MyNodeChild(val depth: Int, val childCount: Int, val parentId: Int, val nodeId: Int, var className: String? = null, var text: String?=null, var viewIdResourceName: String?=null)
+data class MyNodeChild(val depth: Int, val childCount: Int, val parentId: Int, val nodeId: Int, val left: Int, val top: Int, val right: Int, val bottom: Int, var className: String? = null, var text: String?=null, var viewIdResourceName: String?=null)
 
 class MyAccessibilityService : AccessibilityService() {
     private val textNodeHandler = TextNodeHandler()
@@ -156,14 +159,17 @@ class MyAccessibilityService : AccessibilityService() {
             }
         }
 
+        val window = MyWindow(root.packageName.toString(), layoutInspectClassName.toString(), ScreenUtils.getScreenHeight(), ScreenUtils.getScreenWidth(),temp)
         val gson = Gson()
-        val jsonStr = gson.toJson(temp)
+        val jsonStr = gson.toJson(window)
         val file = File(SKIPApp.context.filesDir, "temp.json")
         file.writeText(jsonStr)
     }
 
     private fun processNode(node: AccessibilityNodeInfo, temp: MutableList<MyNodeChild>, depth: Int, parentId: Int, nodeId: Int) {
-        val myNodeChild = MyNodeChild(depth, node.childCount, parentId, nodeId)
+        val rect = Rect()
+        node.getBoundsInScreen(rect)
+        val myNodeChild = MyNodeChild(depth, node.childCount, parentId, nodeId, rect.left, rect.top, rect.right, rect.bottom)
 
         node.className?.let {
             myNodeChild.className = it.toString()

docs/.vitepress/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

docs/.vitepress/theme/index.js

@@ -2,6 +2,8 @@ import DefaultTheme from 'vitepress/theme'
 import './custom.css'
 import 'element-plus/dist/index.css'
 import ElementPlus from "element-plus";
+import '../index.css'
+
 export default {
     ...DefaultTheme,
     enhanceApp({ app }) {

docs/inspect/InspectContainer.vue

@@ -1,9 +1,12 @@
 <template>
-    <el-row>
-        <el-col :span="12">
+    <el-row class="h-screen">
+        <el-col :span="8">
+            <NodePic v-if="rawData" :raw-data="rawData" :img-src="'/temp.png'" />
+        </el-col>
+        <el-col :span="8">
             <NodeTree :tree-data="treeData" @handleNodeClick="handleNodeClick" />
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
             <NodeTable :node-data="nodeData" />
         </el-col>
     </el-row>
@@ -12,30 +15,37 @@
 <script lang="ts" setup>
 import NodeTree from './NodeTree.vue';
 import NodeTable from './NodeTable.vue';
+import NodePic from './NodePic.vue';
 import { ref, onMounted } from 'vue';
-import { AccessibilityNode, AccessibilityNodeTree } from './types';
+import { AccessibilityNode, AccessibilityNodeTree, AccessibilityWindow } from './types';
 
 const treeData = ref<AccessibilityNodeTree[]>([]);
 const nodeData = ref<AccessibilityNode | null>(null);
+const rawData = ref<AccessibilityWindow | null>(null);
 
 onMounted(async () => {
     const temp = await fetch('/temp.json');
     const text = await temp.text();
-    const data = JSON.parse(text) as AccessibilityNode[];
-    treeData.value = buildTree(data, -1);
+    const data = JSON.parse(text) as AccessibilityWindow;
+    rawData.value = data;
+    treeData.value = buildTree(data.nodes, -1);
 });
 
 function buildTree(data: AccessibilityNode[], parentId: number): AccessibilityNodeTree[] {
     const children = data.filter(node => node.parentId === parentId);
     return children.map(node => {
-        const { childCount, className, nodeId, text, viewIdResourceName } = node;
+        const { childCount, className, nodeId, text, viewIdResourceName, left, top, right, bottom } = node;
         return {
             label: childCount === 0 ? className : `${className} [${childCount}]`,
             children: buildTree(data, nodeId),
             text,
             className,
             childCount,
             viewIdResourceName,
+            left,
+            top,
+            right,
+            bottom,
         }
     })
 }

docs/inspect/NodePic.vue

@@ -0,0 +1,97 @@
+<template>
+    <canvas id="myCanvas" class="cursor-crosshair"></canvas>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { AccessibilityNode, AccessibilityWindow } from './types';
+
+const props = defineProps<{
+    rawData: AccessibilityWindow | null;
+    imgSrc: string;
+}>();
+
+onMounted(async () => {
+    const data = props.rawData as AccessibilityWindow;
+    if (!data) return;
+
+    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+    let renderableWidth: number, renderableHeight: number;
+    // 加载背景图
+    const img = new Image();
+    img.src = props.imgSrc; // 在此替换为实际的图片URL
+    img.onload = function () {
+        const parentWidth = canvas.parentElement!.clientWidth;
+        const parentHeight = canvas.parentElement!.clientHeight;
+
+        const parentAspect = parentWidth / parentHeight;
+        const imgAspect = img.width / img.height;
+
+        if (imgAspect < parentAspect) {
+            // 纵向填充
+            renderableHeight = parentHeight;
+            renderableWidth = img.width * (renderableHeight / img.height);
+        } else if (imgAspect > parentAspect) {
+            // 横向填充
+            renderableWidth = parentWidth;
+            renderableHeight = img.height * (renderableWidth / img.width);
+        } else {
+            // 完全匹配
+            renderableWidth = parentWidth;
+            renderableHeight = parentHeight;
+        }
+
+        canvas.width = renderableWidth;
+        canvas.height = renderableHeight;
+
+        ctx.drawImage(img, 0, 0, renderableWidth, renderableHeight);
+    };
+
+    canvas.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;
+
+            const rateLeft = node.left * rateW;
+            const rateRight = node.right * rateW;
+            const rateTop = node.top * rateH;
+            const rateBottom = node.bottom * rateH;
+
+            const centerX = (rateLeft + rateRight) / 2;
+            const centerY = (rateTop + rateBottom) / 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) {
+                minDistance = distance;
+                closestNode = {
+                    ...node,
+                    left: rateLeft,
+                    right: rateRight,
+                    top: rateTop,
+                    bottom: rateBottom,
+                };
+            }
+        });
+
+        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>

docs/inspect/types.ts

@@ -3,12 +3,24 @@ export interface Tree {
   children?: Tree[];
 }
 
+export interface AccessibilityWindow {
+  className: string;
+  packageName: string;
+  screenHeight: number;
+  screenWidth: number;
+  nodes: AccessibilityNode[];
+}
+
 export interface AccessibilityNode {
   childCount: number;
   className: string;
   depth: number;
   nodeId: number;
   parentId: number;
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
   text?: string;
   viewIdResourceName?: string;
   [key: string]: any;