@@ -15,9 +15,23 @@ import {
15
15
16
16
import QueryMdx from "./api-gateway-query.mdx"
17
17
import clsx from "clsx"
18
- import { ComponentPropsWithoutRef , ReactNode , useReducer } from "react"
18
+ import {
19
+ ComponentPropsWithoutRef ,
20
+ ReactNode ,
21
+ useEffect ,
22
+ useReducer ,
23
+ useRef ,
24
+ } from "react"
25
+
26
+ import classes from "./wires.module.css"
19
27
20
- function ClientEdges ( { highlighted } : { highlighted ?: number } ) {
28
+ function ClientEdges ( {
29
+ highlightedEdge,
30
+ highlightedVisible,
31
+ } : {
32
+ highlightedEdge ?: number
33
+ highlightedVisible : boolean
34
+ } ) {
21
35
const paths = [
22
36
"M514.5 220H424.5V76H72" ,
23
37
"M446 220H424.5V112H144" ,
@@ -33,25 +47,38 @@ function ClientEdges({ highlighted }: { highlighted?: number }) {
33
47
return (
34
48
< >
35
49
{ moveHighlightedToTop (
36
- highlighted ,
50
+ highlightedEdge ,
37
51
paths . map ( ( path , index ) => (
38
- < path
39
- key = { index }
40
- d = { path }
41
- stroke = {
42
- highlighted === index
43
- ? `url(#paint_lr_dark_linear_671_9150)`
44
- : `url(#paint_lr_light_linear_671_9150)`
45
- }
46
- strokeWidth = { highlighted === index ? "2" : "1" }
47
- />
52
+ < >
53
+ < path
54
+ key = { index }
55
+ d = { path }
56
+ stroke = "url(#paint_lr_light_linear_671_9150)"
57
+ strokeWidth = "1"
58
+ />
59
+ { highlightedEdge === index && (
60
+ < path
61
+ key = { index + "h" }
62
+ d = { path }
63
+ stroke = "url(#paint_lr_dark_linear_671_9150)"
64
+ strokeWidth = "2"
65
+ className = { highlightedVisible ? "opacity-100" : "opacity-0" }
66
+ />
67
+ ) }
68
+ </ >
48
69
) ) ,
49
70
) }
50
71
</ >
51
72
)
52
73
}
53
74
54
- function ServerEdges ( { highlighted } : { highlighted : number [ ] } ) {
75
+ function ServerEdges ( {
76
+ highlighted,
77
+ highlightedVisible,
78
+ } : {
79
+ highlighted : number [ ]
80
+ highlightedVisible : boolean
81
+ } ) {
55
82
const paths = [
56
83
"M696 159.5H811.5V75H1176" ,
57
84
"M696 175.5L833.5 175.5V112H1104.5" ,
@@ -69,18 +96,27 @@ function ServerEdges({ highlighted }: { highlighted: number[] }) {
69
96
{ paths . map ( ( d , index ) => {
70
97
const isHighlighted = highlighted ?. includes ( index )
71
98
return (
72
- < path
73
- key = { index }
74
- d = { d }
75
- strokeWidth = { isHighlighted ? 2 : 1 }
76
- className = { clsx (
77
- isHighlighted
78
- ? index % 2
79
- ? "stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
80
- : "stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]"
81
- : "stroke-[url(#paint_sr_light_linear_671_9150)]" ,
99
+ < >
100
+ < path
101
+ key = { index }
102
+ d = { d }
103
+ strokeWidth = { 1 }
104
+ className = "stroke-[url(#paint_sr_light_linear_671_9150)]"
105
+ />
106
+ { isHighlighted && (
107
+ < path
108
+ key = { index + "h" }
109
+ d = { d }
110
+ strokeWidth = { 2 }
111
+ className = { clsx (
112
+ highlightedVisible ? "opacity-100" : "opacity-0" ,
113
+ index % 2
114
+ ? "stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
115
+ : "stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]" ,
116
+ ) }
117
+ />
82
118
) }
83
- />
119
+ < />
84
120
)
85
121
} ) }
86
122
</ >
@@ -89,7 +125,6 @@ function ServerEdges({ highlighted }: { highlighted: number[] }) {
89
125
90
126
function Box ( {
91
127
transform,
92
- fill = "hsl(var(--color-neu-100))" ,
93
128
children,
94
129
className,
95
130
} : {
@@ -102,11 +137,11 @@ function Box({
102
137
< g
103
138
transform = { transform }
104
139
className = { clsx (
105
- "[&>path]:translate-x-4 [&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600" ,
140
+ "fill-neu-100 [&>path]:translate-x-4 [&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600" ,
106
141
className ,
107
142
) }
108
143
>
109
- < rect width = "56" height = "56" fill = { fill } />
144
+ < rect width = "56" height = "56" />
110
145
{ children }
111
146
</ g >
112
147
)
@@ -142,7 +177,7 @@ function ClientBoxes({ highlighted }: { highlighted?: number }) {
142
177
}
143
178
className = {
144
179
isHighlighted
145
- ? "[&_path]:fill-neu-800 dark:[&_path]:fill-neu-0"
180
+ ? "[&_path]:fill-neu-800 dark:[&_path]:fill-neu-0 dark:[&_rect]:fill-neu-400 "
146
181
: undefined
147
182
}
148
183
>
@@ -177,18 +212,11 @@ function ServerBoxes({ highlighted }: { highlighted: number[] }) {
177
212
< Box
178
213
key = { index }
179
214
transform = { transform }
180
- fill = {
181
- isHighlighted
182
- ? index % 2
183
- ? "hsl(var(--color-pri-lighter))"
184
- : "hsl(var(--color-sec-light))"
185
- : "hsl(var(--color-neu-100))"
186
- }
187
215
className = {
188
216
isHighlighted
189
217
? index % 2
190
- ? "dark:[&_path]:fill-pri-lighter [&_rect]:fill-pri-darker"
191
- : "dark:[&_path]:fill-sec-lighter [&_rect]:fill-sec-darker"
218
+ ? "fill-pri-lighter [&_path]:fill-pri-darker dark:[&_path]:fill-pri-lighter dark: [&_rect]:fill-pri-darker"
219
+ : "fill-sec-light [&_path]:fill-sec-darker dark:[&_path]:fill-sec-lighter dark: [&_rect]:fill-sec-darker"
192
220
: undefined
193
221
}
194
222
>
@@ -200,7 +228,6 @@ function ServerBoxes({ highlighted }: { highlighted: number[] }) {
200
228
)
201
229
}
202
230
203
- // SVG gradients and definitions
204
231
function SVGDefinitions ( ) {
205
232
return (
206
233
< defs >
@@ -222,8 +249,40 @@ function SVGDefinitions() {
222
249
className = "dark:[stop-color:hsl(var(--color-neu-100))]"
223
250
/>
224
251
</ linearGradient >
252
+ < linearGradient id = "paint_lr_dark_linear_671_9150" >
253
+ < stop
254
+ stopColor = "hsl(var(--color-neu-300))"
255
+ className = "dark:[stop-color:hsl(var(--color-neu-200))]"
256
+ >
257
+ < animate
258
+ attributeName = "offset"
259
+ values = "-2.562;1.438;-2.562"
260
+ dur = "10s"
261
+ repeatCount = "indefinite"
262
+ />
263
+ </ stop >
264
+ < stop stopColor = "hsl(var(--color-neu-700))" >
265
+ < animate
266
+ attributeName = "offset"
267
+ values = "-1.562;2.438;-1.562"
268
+ dur = "10s"
269
+ repeatCount = "indefinite"
270
+ />
271
+ </ stop >
272
+ < stop
273
+ stopColor = "hsl(var(--color-neu-300))"
274
+ className = "dark:[stop-color:hsl(var(--color-neu-200))]"
275
+ >
276
+ < animate
277
+ attributeName = "offset"
278
+ values = "-0.562;3.438;-0.562"
279
+ dur = "10s"
280
+ repeatCount = "indefinite"
281
+ />
282
+ </ stop >
283
+ </ linearGradient >
225
284
< linearGradient
226
- id = "paint_lr_dark_linear_671_9150 "
285
+ id = "paint_lr_dark_linear_static_671_9150 "
227
286
x1 = "446"
228
287
y1 = "-17.6347"
229
288
x2 = "204.096"
@@ -369,13 +428,26 @@ const components = {
369
428
}
370
429
371
430
export function Wires ( { className } : { className ?: string } ) {
372
- const STEPS = 3
373
- const [ step , inc ] = useReducer ( x => ( x + 1 ) % STEPS , 1 )
431
+ const STEPS = 2
432
+ const [ step , inc ] = useReducer ( x => ( x + 1 ) % STEPS , 0 )
374
433
375
- // TODO: Increment from 0 to 1 and 1 to 2 on `repeatEvent` in client and server edges.
434
+ const ref = useRef < SVGSVGElement > ( null )
435
+
436
+ useEffect ( ( ) => {
437
+ const animate = document . querySelector (
438
+ "#paint_sr_pri_highlight_linear_671_9150 animate" ,
439
+ )
376
440
441
+ if ( animate && animate instanceof SVGAnimateElement ) {
442
+ animate . addEventListener ( "repeatEvent" , inc )
443
+ }
444
+
445
+ return ( ) => animate ?. removeEventListener ( "repeatEvent" , inc )
446
+ } , [ ] )
447
+
448
+ // TODO: Increment from 0 to 1 and 1 to 2 on `repeatEvent` in client and server edges.
377
449
return (
378
- < div className = { clsx ( className , "relative" ) } >
450
+ < div className = { clsx ( className , "relative" , classes . wires ) } >
379
451
< svg
380
452
id = "what-is-graphql--wires"
381
453
width = "1248"
@@ -385,10 +457,11 @@ export function Wires({ className }: { className?: string }) {
385
457
xmlns = "http://www.w3.org/2000/svg"
386
458
aria-label = "GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
387
459
className = "relative h-auto w-full"
460
+ ref = { ref }
388
461
>
389
- < ClientEdges highlighted = { step === 0 ? 0 : undefined } />
462
+ < ClientEdges highlightedEdge = { 0 } highlightedVisible = { step === 0 } />
390
463
< ClientBoxes highlighted = { step === 0 ? 0 : undefined } />
391
- < ServerEdges highlighted = { step === 1 ? [ 1 , 6 ] : [ ] } />
464
+ < ServerEdges highlighted = { [ 1 , 6 ] } highlightedVisible = { step === 1 } />
392
465
< ServerBoxes highlighted = { step === 1 ? [ 1 , 6 ] : [ ] } />
393
466
< SVGDefinitions />
394
467
</ svg >
0 commit comments