feat: trck graph

Author: lisonge

.npmrc

@@ -1 +1,2 @@
 package-manager-strict=false
+public-hoist-pattern[]=@antv/*

package.json

@@ -24,11 +24,12 @@
     "@antv/g6": "5.0.43",
     "@eslint/js": "9.21.0",
     "@gkd-kit/api": "0.6.0",
-    "@gkd-kit/selector": "0.5.13",
+    "@gkd-kit/selector": "0.5.21",
     "@gkd-kit/wasm_matches": "0.0.1",
     "@tsconfig/node20": "20.1.4",
     "@types/file-saver": "2.0.7",
     "@types/fs-extra": "11.0.4",
+    "@types/lodash-es": "4.17.12",
     "@types/node": "22.13.5",
     "@vitejs/plugin-legacy": "6.0.1",
     "@vitejs/plugin-vue": "5.2.1",
@@ -52,6 +53,7 @@
     "jszip": "3.10.1",
     "lint-staged": "15.4.3",
     "localforage": "1.10.0",
+    "lodash-es": "4.17.21",
     "naive-ui": "2.41.0",
     "normalize.css": "8.0.1",
     "p-limit": "6.2.0",
@@ -76,9 +78,9 @@
   },
   "volta": {
     "node": "22.10.0",
-    "pnpm": "10.4.1"
+    "pnpm": "10.5.2"
   },
-  "packageManager": "pnpm@10.4.1",
+  "packageManager": "pnpm@10.5.2",
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged"
   },

pnpm-lock.yaml

@@ -49,7 +49,8 @@ body {
 .gkd_code,
 [gkd_code] {
   font-family:
-    v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace !important;
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace !important;
 }
 
 [direction-rtl],
@@ -99,7 +100,10 @@ body,
 #app {
   /* 禁止 iOS/Edge 滚动回弹效果 */
   overscroll-behavior: none;
+}
 
+html,
+body {
   font-size: 14px;
   line-height: 20px;
 }

src/App.vue

@@ -2,18 +2,20 @@
 import { AstNode, Selector } from '@gkd-kit/selector';
 import SelectorText from './SelectorText.vue';
 import { getAstNodeClassName } from '@/utils/selector';
+import type { StyleValue } from 'vue';
 
 const props = defineProps<{
-  text: string;
+  source: string;
   node: AstNode<any>;
+  getNodeStyle?: (node: AstNode<any>) => StyleValue;
 }>();
 
 const isRoot = computed(() => {
   return props.node.value instanceof Selector;
 });
 
 const subText = computed(() => {
-  return props.text.substring(props.node.start, props.node.end);
+  return props.source.substring(props.node.start, props.node.end);
 });
 
 interface ExtraNode {
@@ -22,11 +24,11 @@ interface ExtraNode {
 }
 
 const getExtraText = (child: ExtraNode) => {
-  return props.text.substring(child.start, child.end);
+  return props.source.substring(child.start, child.end);
 };
 
 const getExtraName = (child: ExtraNode) => {
-  const t = props.text.substring(child.start, child.end).trim();
+  const t = props.source.substring(child.start, child.end).trim();
   if (!t) {
     return 'Whitespace';
   }
@@ -78,23 +80,33 @@ const children = computed(() => {
   }
   return list;
 });
+
+const getDataValue = (str: string) => {
+  return str.length === 1 ? str : undefined;
+};
 </script>
 <template>
   <span
+    class="SelectorText"
     :whitespace-pre-wrap="isRoot ? `` : undefined"
     :data-name="getAstNodeClassName(node)"
     :data-range="getRange(node)"
-    :class="{
-      SelectorText: isRoot,
-    }"
+    :data-value="getDataValue(subText)"
+    :style="getNodeStyle?.(node)"
   >
     <template v-if="node.outChildren.length">
       <template v-for="child in children" :key="child.start">
-        <SelectorText v-if="isAstNode(child)" :text="text" :node="child" />
+        <SelectorText
+          v-if="isAstNode(child)"
+          :source="source"
+          :node="child"
+          :getNodeStyle="getNodeStyle"
+        />
         <span
           v-else
           :data-name="getExtraName(child)"
           :data-range="getRange(child)"
+          :data-value="getDataValue(getExtraText(child))"
         >
           {{ getExtraText(child) }}
         </span>

src/assets/svg/close.svg

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import SelectorText from '@/components/SelectorText.vue';
+import TrackTreeGraph from '@/components/TrackGraph.vue';
+import { buildEmptyFn, colorList } from '@/utils/others';
+import { type ResolvedSelector } from '@/utils/selector';
+import type { RawNode } from '@/utils/types';
+import type { AstNode, QueryResult } from '@gkd-kit/selector';
+import { UnitSelectorExpression } from '@gkd-kit/selector';
+import type { StyleValue } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    nodes: RawNode[];
+    queryResult: QueryResult<RawNode>;
+    selector: ResolvedSelector;
+    onClose?: () => void;
+  }>(),
+  {
+    onClose: buildEmptyFn,
+  },
+);
+
+const allUnitResults = computed(() => {
+  if (!props.queryResult) return [];
+  return props.queryResult.unitResults.asJsReadonlyArrayView().concat();
+});
+
+const singleUnitResults = computed(() => {
+  return allUnitResults.value.filter((v) => !v.context.prev);
+});
+
+const showUnitResults = computed(() => {
+  return allUnitResults.value.filter((v) => v.context.prev);
+});
+
+const filterUnitResults = shallowRef<QueryResult.UnitResult<RawNode>[]>([]);
+watchEffect(() => {
+  filterUnitResults.value = showUnitResults.value;
+});
+const switchUnitResult = (unitResult: QueryResult.UnitResult<RawNode>) => {
+  if (filterUnitResults.value.includes(unitResult)) {
+    filterUnitResults.value = filterUnitResults.value.filter(
+      (v) => v !== unitResult,
+    );
+  } else {
+    filterUnitResults.value = filterUnitResults.value.concat(unitResult);
+  }
+};
+
+const getNodeStyle = (node: AstNode<any>): StyleValue => {
+  const value = node.value;
+  if (
+    value instanceof UnitSelectorExpression &&
+    allUnitResults.value.some((u) => u.expression === value) &&
+    !node.outChildren.some((v) => v.value instanceof UnitSelectorExpression)
+  ) {
+    return {
+      outline: '1px solid #00F',
+    };
+  }
+  return '';
+};
+</script>
+<template>
+  <div
+    class="TrackCard"
+    flex
+    flex-col
+    h-full
+    p-12px
+    box-border
+    gap-8px
+    overflow-hidden
+  >
+    <div flex justify-between items-center>
+      <div text="20px/28px" font-bold>选择器路径视图</div>
+      <NButton text @click="onClose">
+        <SvgIcon name="close" h="20px" />
+      </NButton>
+    </div>
+    <div flex-1 flex gap-12px overflow-hidden>
+      <div self-stretch flex="[2]">
+        <TrackTreeGraph
+          v-if="nodes.length && queryResult"
+          :nodes="nodes"
+          :queryResult="queryResult"
+          :showUnitResults="showUnitResults"
+          :filterUnitResults="filterUnitResults"
+          class="h-[calc(100%-2px)] b-1px b-solid"
+        />
+        <div relative pointer-events-none z-1>
+          <div absolute left-8px bottom-8px text="12px/14px #6C6E71">
+            *为简化视图已隐藏无关节点
+          </div>
+        </div>
+      </div>
+      <NScrollbar class="self-stretch flex-1">
+        <div mb-24px break-all px-4px py-2px leading-20px bg="#eee" gkd_code>
+          <SelectorText
+            class="gkd_code"
+            :source="selector.source"
+            :node="selector.ast"
+            :getNodeStyle="getNodeStyle"
+          />
+        </div>
+        <div flex flex-col gap-12px>
+          <div v-if="singleUnitResults.length" flex gap-8px>
+            <div
+              v-for="(unitResult, i) in singleUnitResults"
+              :key="i"
+              break-all
+              px-4px
+              py-2px
+              gkd_code
+              b-1px
+              b-solid
+              b="#ccc"
+            >
+              <SelectorText
+                class="gkd_code"
+                :source="selector.source"
+                :node="selector.findAst(unitResult.expression)"
+              />
+            </div>
+          </div>
+          <div
+            v-for="(unitResult, i) in showUnitResults"
+            :key="i"
+            cursor-pointer
+            break-all
+            px-4px
+            py-2px
+            gkd_code
+            b-1px
+            b-solid
+            transition-colors
+            @click="switchUnitResult(unitResult)"
+            :style="{
+              borderColor: colorList[i % colorList.length],
+              backgroundColor: filterUnitResults.includes(unitResult)
+                ? '#eee'
+                : undefined,
+            }"
+          >
+            <div
+              inline-block
+              align-middle
+              size-16px
+              :style="{
+                backgroundColor: colorList[i % colorList.length],
+              }"
+            ></div>
+            <span pl-4px></span>
+            <SelectorText
+              class="gkd_code"
+              :source="selector.source"
+              :node="selector.findAst(unitResult.expression)"
+            />
+          </div>
+        </div>
+      </NScrollbar>
+    </div>
+  </div>
+</template>