Skip to content

Commit df8ec53

Browse files
webfansplzwebfansplz
committed
fix: reset tree-node selected when mismatch
1 parent 003c65f commit df8ec53

File tree

5 files changed

+148
-26
lines changed

5 files changed

+148
-26
lines changed

‎packages/applet/src/components/tree/TreeViewer.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import { useSelect } from '~/composables/select'
1010
withDefaults(defineProps<{
1111
data: ComponentTreeNode[] | InspectorTree[]
1212
depth: number
13+
withTag: boolean
1314
}>(), {
1415
depth: 0,
16+
withTag: false,
1517
})
1618
const selectedNodeId = defineModel()
1719
const { expanded, toggleExpanded } = useToggleExpanded()
@@ -50,16 +52,16 @@ function select(id: string) {
5052
<!-- placeholder -->
5153
<span v-else pl5 />
5254
<span font-state-field text-4>
53-
<span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
55+
<span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
5456
<span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
55-
<span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
57+
<span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
5658
</span>
5759
<NodeTag v-for="(_item, _index) in item.tags" :key="_index" :tag="_item" />
5860
</div>
5961
<div
6062
v-if="item?.children?.length && expanded.includes(item.id)"
6163
>
62-
<ComponentTreeViewer v-model="selectedNodeId" :data="item?.children" :depth="depth + 1" />
64+
<ComponentTreeViewer v-model="selectedNodeId" :data="item?.children" :depth="depth + 1" :with-tag="withTag" />
6365
</div>
6466
</div>
6567
</template>

‎packages/applet/src/modules/components/index.vue

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,19 @@ function dfs(node: { id: string, children?: { id: string }[] }, path: string[] =
4646
return linkedList
4747
}
4848
49+
function flattenTreeNodes(tree: CustomInspectorNode[]) {
50+
const res: CustomInspectorNode[] = []
51+
const find = (treeNode: CustomInspectorNode[]) => {
52+
treeNode.forEach((item) => {
53+
res.push(item)
54+
if (item.children?.length)
55+
find(item.children)
56+
})
57+
}
58+
find(tree)
59+
return res
60+
}
61+
4962
function getNodesByDepth(list: string[][], depth: number) {
5063
const nodes: string[] = []
5164
list.forEach((item) => {
@@ -67,6 +80,8 @@ function getTargetLinkedNodes(list: string[][], target: string) {
6780
const inspectorId = 'components'
6881
const tree = ref<Array<CustomInspectorNode>>([])
6982
const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
83+
const flattenedTreeNodes = computed(() => flattenTreeNodes(tree.value))
84+
const flattenedTreeNodesIds = computed(() => flattenedTreeNodes.value.map(node => node.id))
7085
const activeComponentState = ref<Record<string, any[]>>({})
7186
const activeComponentId = ref('')
7287
const activeTreeNode = computed(() => {
@@ -171,7 +186,11 @@ function onInspectorTreeUpdated(_data: string) {
171186
if (data.inspectorId !== inspectorId)
172187
return
173188
tree.value = data.rootNodes
174-
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
189+
190+
if (!flattenedTreeNodesIds.value.includes(activeComponentId.value)) {
191+
activeComponentId.value = tree.value?.[0]?.id
192+
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
193+
}
175194
}
176195
177196
rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
@@ -259,7 +278,7 @@ function closeComponentRenderCode() {
259278
</button>
260279
</div>
261280
<div ref="componentTreeContainer" class="no-scrollbar flex-1 select-none overflow-scroll">
262-
<ComponentTree v-model="activeComponentId" :data="tree" />
281+
<ComponentTree v-model="activeComponentId" :data="tree" :with-tag="true" />
263282
</div>
264283
</div>
265284
</Pane>

‎packages/applet/src/modules/custom-inspector/components/state/Index.vue

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ const actions = ref<CustomInspectorOptions['nodeActions']>([])
2424
2525
const tree = ref<CustomInspectorNode[]>([])
2626
const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
27+
const flattenedTreeNodes = computed(() => flattenTreeNodes(tree.value))
28+
const flattenedTreeNodesIds = computed(() => flattenedTreeNodes.value.map(node => node.id))
2729
const selected = ref('')
2830
2931
const state = ref<Record<string, CustomInspectorState[]>>({})
@@ -50,6 +52,19 @@ function getNodesByDepth(list: string[][], depth: number) {
5052
return [...new Set(nodes)]
5153
}
5254
55+
function flattenTreeNodes(tree: CustomInspectorNode[]) {
56+
const res: CustomInspectorNode[] = []
57+
const find = (treeNode: CustomInspectorNode[]) => {
58+
treeNode.forEach((item) => {
59+
res.push(item)
60+
if (item.children?.length)
61+
find(item.children)
62+
})
63+
}
64+
find(tree)
65+
return res
66+
}
67+
5368
function getNodeActions() {
5469
rpc.value.getInspectorNodeActions(inspectorId.value).then((actions) => {
5570
nodeActions.value = actions
@@ -119,11 +134,11 @@ function onInspectorTreeUpdated(_data: string) {
119134
if (!data.rootNodes.length || data.inspectorId !== inspectorId.value)
120135
return
121136
tree.value = data.rootNodes
122-
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
123-
// if ((!selected.value && data.rootNodes.length) || (selected.value && !data.rootNodes.find(node => node.id === selected.value))) {
124-
// selected.value = data.rootNodes[0].id
125-
// getInspectorState(data.rootNodes[0].id)
126-
// }
137+
138+
if (!flattenedTreeNodesIds.value.includes(selected.value)) {
139+
selected.value = tree.value?.[0]?.id
140+
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
141+
}
127142
}
128143
129144
function onInspectorStateUpdated(_data: string) {
@@ -160,20 +175,22 @@ onUnmounted(() => {
160175
<template v-if="tree.length">
161176
<Splitpanes class="flex-1 overflow-auto">
162177
<Pane border="r base" size="40" h-full>
163-
<div h-full select-none overflow-scroll class="no-scrollbar">
164-
<div v-if="actions?.length" class="flex justify-end pb-1" border="b dashed base">
178+
<div class="h-full flex flex-col p2">
179+
<div v-if="actions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
165180
<div class="flex items-center gap-2 px-1">
166181
<div v-for="(action, index) in actions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callAction(index)">
167182
<i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
168183
</div>
169184
</div>
170185
</div>
171-
<ComponentTree v-model="selected" :data="tree" />
186+
<div class="no-scrollbar flex-1 select-none overflow-scroll">
187+
<ComponentTree v-model="selected" :data="tree" />
188+
</div>
172189
</div>
173190
</Pane>
174191
<Pane size="60">
175192
<div class="h-full flex flex-col p2">
176-
<div v-if="nodeActions?.length" class="flex justify-end pb-1" border="b dashed base">
193+
<div v-if="nodeActions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
177194
<div class="flex items-center gap-2 px-1">
178195
<div v-for="(action, index) in nodeActions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callNodeAction(index)">
179196
<i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />

‎packages/applet/src/modules/pinia/components/store/Index.vue

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,61 @@ import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
55
import { parse } from '@vue/devtools-kit'
66
import type { CustomInspectorNode, CustomInspectorState } from '@vue/devtools-kit'
77
import Navbar from '~/components/basic/Navbar.vue'
8-
import SelectiveList from '~/components/basic/SelectiveList.vue'
98
import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
109
import Empty from '~/components/basic/Empty.vue'
1110
import RootStateViewer from '~/components/state/RootStateViewer.vue'
11+
import ComponentTree from '~/components/tree/TreeViewer.vue'
12+
1213
import { createExpandedContext } from '~/composables/toggle-expanded'
1314
15+
const { expanded: expandedTreeNodes } = createExpandedContext()
1416
const { expanded: expandedStateNodes } = createExpandedContext('pinia-store-state')
1517
1618
const inspectorId = 'pinia'
1719
1820
const selected = ref('')
1921
const tree = ref<CustomInspectorNode[]>([])
22+
const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
23+
const flattenedTreeNodes = computed(() => flattenTreeNodes(tree.value))
24+
const flattenedTreeNodesIds = computed(() => flattenedTreeNodes.value.map(node => node.id))
2025
const state = ref<Record<string, CustomInspectorState[]>>({})
2126
2227
const emptyState = computed(() => !state.value.state?.length && !state.value.getters?.length)
2328
29+
// tree
30+
function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
31+
path.push(node.id)
32+
if (node.children?.length === 0)
33+
linkedList.push([...path])
34+
35+
node.children?.forEach((child) => {
36+
dfs(child, path, linkedList)
37+
})
38+
path.pop()
39+
return linkedList
40+
}
41+
42+
function getNodesByDepth(list: string[][], depth: number) {
43+
const nodes: string[] = []
44+
list.forEach((item) => {
45+
nodes.push(...item.slice(0, depth + 1))
46+
})
47+
return [...new Set(nodes)]
48+
}
49+
50+
function flattenTreeNodes(tree: CustomInspectorNode[]) {
51+
const res: CustomInspectorNode[] = []
52+
const find = (treeNode: CustomInspectorNode[]) => {
53+
treeNode.forEach((item) => {
54+
res.push(item)
55+
if (item.children?.length)
56+
find(item.children)
57+
})
58+
}
59+
find(tree)
60+
return res
61+
}
62+
2463
function filterEmptyState(data: Record<string, unknown[] | undefined>) {
2564
for (const key in data) {
2665
if (!data[key]?.length)
@@ -50,9 +89,11 @@ const getPiniaInspectorTree = () => {
5089
rpc.value.getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
5190
const data = parse(_data!)
5291
tree.value = data
53-
if (!selected.value && data.length)
92+
if (!selected.value && data.length) {
5493
selected.value = data[0].id
55-
getPiniaState(data[0].id)
94+
getPiniaState(data[0].id)
95+
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
96+
}
5697
})
5798
}
5899
getPiniaInspectorTree()
@@ -65,8 +106,10 @@ function onInspectorTreeUpdated(_data: string) {
65106
if (data.inspectorId !== inspectorId || !data.rootNodes.length)
66107
return
67108
tree.value = data.rootNodes as unknown as CustomInspectorNode[]
68-
if (!selected.value && data.rootNodes.length) {
109+
110+
if (!flattenedTreeNodesIds.value.includes(selected.value)) {
69111
selected.value = data.rootNodes[0].id
112+
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
70113
getPiniaState(data.rootNodes[0].id)
71114
}
72115
}
@@ -108,8 +151,8 @@ onUnmounted(() => {
108151
</DevToolsHeader>
109152
<Splitpanes class="flex-1 overflow-auto">
110153
<Pane border="r base" size="40" h-full>
111-
<div h-full select-none overflow-scroll class="no-scrollbar">
112-
<SelectiveList v-model="selected" :data="tree" />
154+
<div h-full select-none overflow-scroll p2 class="no-scrollbar">
155+
<ComponentTree v-model="selected" :data="tree" />
113156
</div>
114157
</Pane>
115158
<Pane size="60">

‎packages/applet/src/modules/router/components/routes/Index.vue

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
55
import { parse } from '@vue/devtools-kit'
66
import type { CustomInspectorNode, CustomInspectorState } from '@vue/devtools-kit'
77
import Navbar from '~/components/basic/Navbar.vue'
8-
import SelectiveList from '~/components/basic/SelectiveList.vue'
98
import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
109
import Empty from '~/components/basic/Empty.vue'
1110
import RootStateViewer from '~/components/state/RootStateViewer.vue'
1211
import { createExpandedContext } from '~/composables/toggle-expanded'
1312
import { useCustomInspectorState } from '~/composables/custom-inspector-state'
13+
import ComponentTree from '~/components/tree/TreeViewer.vue'
1414
15+
const { expanded: expandedTreeNodes } = createExpandedContext()
1516
const { expanded: expandedStateNodes } = createExpandedContext('routes-state')
1617
1718
const customInspectState = useCustomInspectorState()
@@ -20,8 +21,45 @@ const inspectorId = computed(() => customInspectState.value.id!)
2021
2122
const selected = ref('')
2223
const tree = ref<CustomInspectorNode[]>([])
24+
const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
25+
const flattenedTreeNodes = computed(() => flattenTreeNodes(tree.value))
26+
const flattenedTreeNodesIds = computed(() => flattenedTreeNodes.value.map(node => node.id))
2327
const state = ref<Record<string, CustomInspectorState[]>>({})
2428
29+
// tree
30+
function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
31+
path.push(node.id)
32+
if (node.children?.length === 0)
33+
linkedList.push([...path])
34+
35+
node.children?.forEach((child) => {
36+
dfs(child, path, linkedList)
37+
})
38+
path.pop()
39+
return linkedList
40+
}
41+
42+
function getNodesByDepth(list: string[][], depth: number) {
43+
const nodes: string[] = []
44+
list.forEach((item) => {
45+
nodes.push(...item.slice(0, depth + 1))
46+
})
47+
return [...new Set(nodes)]
48+
}
49+
50+
function flattenTreeNodes(tree: CustomInspectorNode[]) {
51+
const res: CustomInspectorNode[] = []
52+
const find = (treeNode: CustomInspectorNode[]) => {
53+
treeNode.forEach((item) => {
54+
res.push(item)
55+
if (item.children?.length)
56+
find(item.children)
57+
})
58+
}
59+
find(tree)
60+
return res
61+
}
62+
2563
function filterEmptyState(data: Record<string, unknown[] | string | undefined>) {
2664
for (const key in data) {
2765
if (!data[key]?.length)
@@ -51,9 +89,11 @@ const getRoutesInspectorTree = () => {
5189
rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
5290
const data = parse(_data!)
5391
tree.value = data
54-
if (!selected.value && data.length)
92+
if (!selected.value && data.length) {
5593
selected.value = data[0].id
56-
getRoutesState(data[0].id)
94+
getRoutesState(data[0].id)
95+
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
96+
}
5797
})
5898
}
5999
getRoutesInspectorTree()
@@ -66,8 +106,9 @@ function onInspectorTreeUpdated(_data: string) {
66106
if (data.inspectorId !== inspectorId.value || !data.rootNodes.length)
67107
return
68108
tree.value = data.rootNodes as unknown as CustomInspectorNode[]
69-
if (!selected.value && data.rootNodes.length) {
109+
if (!flattenedTreeNodesIds.value.includes(selected.value)) {
70110
selected.value = data.rootNodes[0].id
111+
expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
71112
getRoutesState(data.rootNodes[0].id)
72113
}
73114
}
@@ -106,8 +147,8 @@ onUnmounted(() => {
106147
</DevToolsHeader>
107148
<Splitpanes class="flex-1 overflow-auto">
108149
<Pane border="r base" size="40" h-full>
109-
<div h-full select-none overflow-scroll class="no-scrollbar">
110-
<SelectiveList v-model="selected" :data="tree" />
150+
<div h-full select-none overflow-scroll p2 class="no-scrollbar">
151+
<ComponentTree v-model="selected" :data="tree" />
111152
</div>
112153
</Pane>
113154
<Pane size="60">

0 commit comments

Comments
 (0)