Skip to content

Commit ccdf780

Browse files
antfuantfu
committed
feat: update how line is drawn
1 parent 31971f7 commit ccdf780

File tree

6 files changed

+59
-37
lines changed

6 files changed

+59
-37
lines changed

‎packages/devtools/src/app/components/flowmap/Expandable.vue

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const isExpanded = ref(true)
1313

1414
<template>
1515
<FlowmapNode
16-
:lines="{ top: true, bottom: !expandable || !isExpanded }" pl6 py2
16+
:lines="{ top: true, bottom: !expandable || !isExpanded }" pl6 pt4
1717
:class-node-outer="classRootNode"
1818
:active="activeStart"
1919
>
@@ -31,16 +31,29 @@ const isExpanded = ref(true)
3131
</template>
3232

3333
<template v-if="expandable && isExpanded" #after>
34-
<div mb--1px>
35-
<div h-8 relative mb--1px translate-x-1px>
36-
<div :class="activeStart ? 'border-flowmap-active' : 'border-base'" border="l b rounded-lb-2xl" h-5 absolute left-4 w-3 top-0 />
37-
<div :class="activeStart ? 'border-flowmap-active' : 'border-base'" border="r t rounded-rt-2xl" h-3 absolute left-7 w-3 top-5 translate-y--1px />
38-
</div>
39-
<slot name="container" />
40-
<div h-6 relative mb--2>
41-
<div :class="activeEnd ? 'border-flowmap-active' : 'border-base'" border="b r rounded-br-2xl" h-3 absolute left-7 w-3 top-0 translate-x-1px />
42-
<div :class="activeEnd ? 'border-flowmap-active' : 'border-base'" border="t l rounded-lt-2xl" h-3 absolute left-4 w="[calc(0.75rem+1px)]" top-3 translate-y--1px />
34+
<div>
35+
<svg
36+
ml-1em w-27px h-30px
37+
viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg"
38+
:class="activeStart ? 'fg-flow-line-active' : 'fg-flow-line'"
39+
>
40+
<g>
41+
<path d="M0.5 0C0.5 18 26.5 12 26.5 30" stroke="currentColor" stroke-width="1px" />
42+
</g>
43+
</svg>
44+
<div ml-2px>
45+
<slot name="container" />
4346
</div>
47+
<svg
48+
ml-1em w-27px h-30px
49+
style="transform: scaleX(-1)"
50+
viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg"
51+
:class="activeEnd ? 'fg-flow-line-active' : 'fg-flow-line'"
52+
>
53+
<g>
54+
<path d="M0.5 0C0.5 18 26.5 12 26.5 30" stroke="currentColor" stroke-width="1px" />
55+
</g>
56+
</svg>
4457
</div>
4558
</template>
4659
</FlowmapNode>

‎packages/devtools/src/app/components/flowmap/ModuleFlow.vue

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -85,19 +85,18 @@ const codeDisplay = computed(() => {
8585

8686
<template>
8787
<div of-auto>
88+
<FlowmapNode
89+
:lines="{ bottom: true }" pt4
90+
:active="selected != null"
91+
>
92+
<template #content>
93+
<div p2>
94+
<DisplayModuleId :id="info.id" />
95+
</div>
96+
</template>
97+
</FlowmapNode>
8898
<div w-max flex="~ gap-4">
8999
<div select-none>
90-
<FlowmapNode
91-
:lines="{ bottom: true }" py2
92-
:active="selected != null"
93-
>
94-
<template #content>
95-
<div p2>
96-
<DisplayModuleId :id="info.id" />
97-
</div>
98-
</template>
99-
</FlowmapNode>
100-
101100
<FlowmapExpandable
102101
:items="resolveIds"
103102
:expandable="resolveIds.length > 0"
@@ -112,10 +111,11 @@ const codeDisplay = computed(() => {
112111
<template #container>
113112
<div>
114113
<FlowmapNodeModuleInfo
115-
v-for="item of resolveIds"
114+
v-for="(item, index) of resolveIds"
116115
:key="item.id"
117116
:item="item"
118117
:active="isSelectedAncestor(item)"
118+
:class="index > 0 ? 'pt-2' : ''"
119119
@select="select"
120120
@activate="activate"
121121
/>
@@ -137,10 +137,11 @@ const codeDisplay = computed(() => {
137137
<template #container>
138138
<div>
139139
<FlowmapNodeModuleInfo
140-
v-for="item of loads"
140+
v-for="(item, index) of loads"
141141
:key="item.id"
142142
:item="item"
143143
:active="isSelectedAncestor(item)"
144+
:class="index > 0 ? 'pt-2' : ''"
144145
@select="select"
145146
@activate="activate"
146147
/>
@@ -161,30 +162,31 @@ const codeDisplay = computed(() => {
161162
<template #container>
162163
<div>
163164
<FlowmapNodeModuleInfo
164-
v-for="item of transforms"
165+
v-for="(item, index) of transforms"
165166
:key="item.id"
166167
:item="item"
167168
:active="isSelectedAncestor(item)"
169+
:class="index > 0 ? 'pt-2' : ''"
168170
@select="select"
169171
@activate="activate"
170172
/>
171173
</div>
172174
</template>
173175
</FlowmapExpandable>
174176

175-
<FlowmapNode :lines="{ top: true, bottom: true }" pl6 py2>
177+
<FlowmapNode :lines="{ top: true, bottom: true }" pl6 pt4>
176178
<template #content>
177179
<div i-ph-shapes-duotone /> Chunk
178180
</template>
179181
</FlowmapNode>
180182

181-
<FlowmapNode :lines="{ top: true, bottom: true }" pl6 py2>
183+
<FlowmapNode :lines="{ top: true, bottom: true }" pl6 pt4>
182184
<template #content>
183185
<div i-ph-tree-duotone /> Tree shake
184186
</template>
185187
</FlowmapNode>
186188

187-
<FlowmapNode :lines="{ top: true }" pl6 py2>
189+
<FlowmapNode :lines="{ top: true }" pl6 pt4>
188190
<template #content>
189191
<div i-ph-package-duotone /> Generate
190192
</template>
@@ -193,7 +195,7 @@ const codeDisplay = computed(() => {
193195

194196
<div
195197
v-if="codeDisplay"
196-
w-200
198+
w-200 m4
197199
border="~ base rounded-lg" bg-glass of-hidden
198200
grid="~ rows-[max-content_1fr]"
199201
>

‎packages/devtools/src/app/components/flowmap/Node.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ const props = defineProps<{
1515
<div flex="~ col" relative>
1616
<div
1717
v-if="props.lines?.top" absolute top-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
18-
:class="active ? 'border-flowmap-active' : 'border-base'"
18+
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
1919
/>
2020
<div
2121
v-if="props.lines?.bottom" absolute bottom-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
22-
:class="active ? 'border-flowmap-active' : 'border-base'"
22+
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
2323
/>
2424
<slot name="before" />
2525
<div flex="~" :class="props.classNodeInline">
2626
<slot name="inline-before" />
2727
<div
2828
:class="[
2929
props.classNodeOuter,
30-
active ? 'border-flowmap-active' : 'border-base',
30+
active ? 'border-flow-active' : 'border-flow',
3131
]"
3232
border="~ rounded-full" bg-base of-hidden
3333
>

‎packages/devtools/src/app/components/flowmap/NodeModuleInfo.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ function down() {
3838
<template>
3939
<div v-if="item.type === 'transform_no_changes'" pl10>
4040
<div
41-
flex="~ gap-2 items-center" text-sm border="l" py2
42-
:class="active ? 'border-flowmap-active' : 'border-base'"
41+
flex="~ gap-2 items-center" text-sm border="l" py1
42+
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
4343
>
4444
<div
4545
w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
46-
:class="active ? 'border-flowmap-active' : 'border-base'"
46+
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
4747
/>
4848
<span op50>{{ item.count }} plugins did not change the content but cost</span>
4949
<DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
@@ -62,7 +62,7 @@ function down() {
6262
:class-node-outer="isDashed ? 'border-dashed' : ''"
6363
:active="active"
6464
class-node-inline="gap-2 items-center"
65-
pl6 py1
65+
pl6
6666
@pointerenter="enter"
6767
>
6868
<template #inner>

‎packages/devtools/src/node/rpc/functions/rolldown-get-module-info.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export type RolldownModuleFlowNode =
6262
| RolldownModuleTransformNoChanges
6363
| RolldownResolveInfo
6464

65-
const DURATION_THRESHOLD = 50
65+
const DURATION_THRESHOLD = 10
6666

6767
export const rolldownGetModuleInfo = defineRpcFunction({
6868
name: 'vite:rolldown:get-module-info',

‎packages/devtools/src/uno.config.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,14 @@ export default defineConfig({
1818
'bg-base': 'bg-white dark:bg-#111',
1919
'bg-secondary': 'bg-#eee dark:bg-#222',
2020
'border-base': 'border-#8884',
21-
'border-flowmap-active': 'border-primary-700/50 dark:border-primary-300/50',
21+
22+
'border-flow': 'border-#8885',
23+
'border-flow-line': 'border-#222',
24+
'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
25+
'border-flow-line-active': 'border-primary-700/30 dark:border-primary-300/30',
26+
27+
'fg-flow-line': 'color-#222',
28+
'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
2229

2330
'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
2431
'bg-code': 'bg-gray5:5',

0 commit comments

Comments
 (0)