File tree Expand file tree Collapse file tree 2 files changed +22
-2
lines changed Expand file tree Collapse file tree 2 files changed +22
-2
lines changed Original file line number Diff line number Diff line change @@ -21,15 +21,23 @@ function animateNode(
21
21
el . attributes . labels [ 0 ] . attrs . text . text . split ( "," ) . includes ( symbol )
22
22
) ;
23
23
24
- if ( currentLink ) currentLink . attr ( "line/stroke" , "orange" ) ;
24
+ if ( currentLink ) {
25
+ currentLink . attr ( "line/stroke" , "orange" ) ;
26
+ const svg = document . querySelector ( `g[model-id="${ currentLink . id } "]` ) ;
27
+ svg . classList . add ( "current" ) ;
28
+ }
25
29
26
30
setTimeout ( ( ) => {
27
31
data . attr ( "body/stroke" , "black" ) ;
28
32
29
33
if ( ! isFinal ) data . attr ( "body/fill" , "#ffffff" ) ;
30
34
else data . attr ( "body/fill" , FILL_NODE_FINAL ) ;
31
35
32
- if ( currentLink ) currentLink . attr ( "line/stroke" , "black" ) ;
36
+ if ( currentLink ) {
37
+ currentLink . attr ( "line/stroke" , "black" ) ;
38
+ const svg = document . querySelector ( `g[model-id="${ currentLink . id } "]` ) ;
39
+ svg . classList . remove ( "current" ) ;
40
+ }
33
41
34
42
document
35
43
. querySelector ( "#string-out" )
Original file line number Diff line number Diff line change @@ -12,6 +12,18 @@ input:focus {
12
12
border-bottom : 2px # e5e7eb solid !important ;
13
13
}
14
14
15
+ .joint-link .current path {
16
+ stroke-dasharray : 5 ;
17
+ stroke-dashoffset : 10 ;
18
+ animation : dash 0.5s infinite linear;
19
+ }
20
+
21
+ @keyframes dash {
22
+ to {
23
+ stroke-dashoffset : 0 ;
24
+ }
25
+ }
26
+
15
27
.split {
16
28
display : flex;
17
29
flex-direction : row;
You can’t perform that action at this time.
0 commit comments