refactor: introduce getNodeStyle function for consistent node styling…

… across cards
gkd-kit · Nov 10, 2024 · 72d9c18 · 72d9c18
1 parent 2c06bba
commit 72d9c18
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/src/utils/node.ts b/src/utils/node.ts
@@ -146,7 +146,6 @@ const getLabelSuffix = (node: RawNode) => {
   return node.attr.text || node.attr.desc || node.attr.vid || node.attr.id;
 };
 const labelKey = Symbol(`labelKey`);
-const labelLimit = 20;
 export const getNodeLabel = (node: RawNode): string => {
   if (Reflect.has(node, labelKey)) {
     return Reflect.get(node, labelKey);
@@ -231,3 +230,13 @@ export const isRawNode = (node: any): node is RawNode => {
   }
   return false;
 };
+
+export const getNodeStyle = (node: RawNode, focusNode?: RawNode) => {
+  const qf = Boolean(node.idQf || node.textQf || node.quickFind);
+  const fontWeight = qf ? 'bold' : undefined;
+  const color = node.id === focusNode?.id ? '#00F' : undefined;
+  return {
+    fontWeight,
+    color,
+  };
+};
diff --git a/src/views/snapshot/OverlapCard.vue b/src/views/snapshot/OverlapCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
-import { getNodeLabel } from '@/utils/node';
+import { getNodeLabel, getNodeStyle } from '@/utils/node';
 
 const snapshotStore = useSnapshotStore();
 const { focusNode, overlapNodes, focusPosition } = storeToRefs(snapshotStore);
@@ -38,9 +38,7 @@ const left = _1vw * 25.5;
           :key="resultNode.id"
           @click="snapshotStore.updateFocusNode(resultNode)"
           size="small"
-          :style="{
-            color: resultNode === focusNode ? '#00F' : undefined,
-          }"
+          :style="getNodeStyle(resultNode, focusNode)"
         >
           {{ getNodeLabel(resultNode) }}
         </NButton>

diff --git a/src/views/snapshot/RuleCard.vue b/src/views/snapshot/RuleCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
-import { getNodeLabel } from '@/utils/node';
+import { getNodeLabel, getNodeStyle } from '@/utils/node';
 import { buildEmptyFn } from '@/utils/others';
 import { parseSelector, type GkdSelector } from '@/utils/selector';
 import { gkdWidth, vw } from '@/utils/size';
@@ -184,9 +184,7 @@ const targetNode = computed(() => {
           v-else-if="targetNode"
           @click="snapshotStore.updateFocusNode(targetNode)"
           size="small"
-          :style="{
-            color: targetNode === focusNode ? '#00F' : undefined,
-          }"
+          :style="getNodeStyle(targetNode, focusNode)"
         >
           {{ getNodeLabel(targetNode) }}
         </NButton>

diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
@@ -2,7 +2,7 @@
 import DraggableCard from '@/components/DraggableCard.vue';
 import { message } from '@/utils/discrete';
 import { errorTry, errorWrap } from '@/utils/error';
-import { getAppInfo, getNodeLabel } from '@/utils/node';
+import { getAppInfo, getNodeLabel, getNodeStyle } from '@/utils/node';
 import { buildEmptyFn, copy } from '@/utils/others';
 import type { GkdSelector } from '@/utils/selector';
 import { parseSelector, wasmLoadTask } from '@/utils/selector';
@@ -371,9 +371,7 @@ const shareResult = (result: SearchResult) => {
                 :key="resultNode.id"
                 @click="updateFocusNode(resultNode)"
                 size="small"
-                :style="{
-                  color: resultNode === focusNode ? '#00F' : undefined,
-                }"
+                :style="getNodeStyle(resultNode, focusNode)"
               >
                 {{ getNodeLabel(resultNode) }}
               </NButton>
@@ -408,12 +406,12 @@ const shareResult = (result: SearchResult) => {
                     updateFocusNode(trackNodes[result.selector.targetIndex])
                   "
                   size="small"
-                  :style="{
-                    color:
-                      trackNodes[result.selector.targetIndex] === focusNode
-                        ? '#00F'
-                        : undefined,
-                  }"
+                  :style="
+                    getNodeStyle(
+                      trackNodes[result.selector.targetIndex],
+                      focusNode,
+                    )
+                  "
                 >
                   {{ getNodeLabel(trackNodes[result.selector.targetIndex]) }}
                 </NButton>

diff --git a/src/views/snapshot/WindowCard.vue b/src/views/snapshot/WindowCard.vue
@@ -7,6 +7,7 @@ import {
   getDevice,
   getGkdAppInfo,
   getNodeLabel,
+  getNodeStyle,
 } from '@/utils/node';
 import { copy, delay } from '@/utils/others';
 import type { RawNode, Snapshot } from '@/utils/types';
@@ -71,16 +72,15 @@ const treeFilter = (pattern: string, node: RawNode) => {
 const treeNodeProps = (info: {
   option: RawNode;
 }): HTMLAttributes & Record<string, unknown> => {
-  const qf = info.option.idQf || info.option.textQf || info.option.quickFind;
+  const style = getNodeStyle(info.option, focusNode.value);
   return {
     onClick: () => {
       lastClickId = info.option.id;
       updateFocusNode(info.option);
     },
     style: {
-      '--n-node-text-color':
-        info.option.id == focusNode.value?.id ? `#00F` : undefined,
-      fontWeight: qf ? `bold` : undefined,
+      '--n-node-text-color': style.color,
+      ...style,
     },
     class: 'whitespace-nowrap',
     'data-node-id': String(info.option.id),