2025-01-16 19:38:26 +00:00
import { _ as i , c as a , a0 as n , o as t } from "./chunks/framework.P9qPzDnn.js" ; const r = JSON . parse ( '{"title":"Boards","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/boards.md","filePath":"guide/advanced-concepts/boards.md","lastUpdated":1737056209000}' ) , h = { name : "guide/advanced-concepts/boards.md" } ; function l ( k , s , e , p , D , F ) { return t ( ) , a ( "div" , null , s [ 0 ] || ( s [ 0 ] = [ n ( ` <h1 id="boards" tabindex="-1">Boards <a class="header-anchor" href="#boards" aria-label="Permalink to "Boards"">
2025-01-16 02:16:49 +00:00
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > class < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > b o a r d - n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > style < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > t r a n s f o r m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > t r a n s l a t e ( 1 0 0 p x , 1 0 0 p x ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > /** snip **/ < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > /** snip **/ < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > // Render function</span></span>
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > B o a r d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > { render ( upgrade ) } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > & lt ; / < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > B o a r d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 2 i d = " s e l e c t i n g - n o d e s " t a b i n d e x = " - 1 " > S e l e c t i n g N o d e s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # s e l e c t i n g - n o d e s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; S e l e c t i n g N o d e s & q u o t ; " > < / a > < / h 2 > < p > T h e r e i s a c o m m o n ( n o t B o a r d s p e c i f i c ) u t i l i t y f o r c r e a t i n g a r e f , a l o n g w i t h a s e t t e r a n d & q u o t ; c l e a r e r & q u o t ; t h a t w o r k s p e r f e c t l y f o r s i t u a t i o n s w h e r e y o u & # 3 9 ; d l i k e t o l e t t h e p l a y e r s e l e c t a t m o s t 1 o f a g r o u p o f l i k e t h i n g s . T o u s e i t , y o u & # 3 9 ; l l w a n t t o c l e a r t h e s e l e c t i o n o n m o u s e d o w n o n e i t h e r a n o d e o r t h e B o a r d i t s e l f , a n d s e t t h e s e l e c t i o n o n m o u s e u p o n a s e l e c t a b l e n o d e . < / p > < p > N o t e y o u & # 3 9 ; l l t y p i c a l l y w a n t t o s t o r e a n I D r a t h e r t h a n t h e n o d e i t s e l f , s o t h a t i f y o u m a k e t h e s e l e c t i o n p e r s i s t e n t y o u c a n s t i l l e a s i l y d e t e r m i n e w h i c h n o d e w a s c h o s e n , e v e n i f a l l t h e i r o t h e r p r o p e r t i e s a r e i d e n t i c a l . T h e e a s i e s t w a y t o g e t g u a r a n t e e d u n i q u e I D s f o r e v e r y n o d e i s t o i n c l u d e a n < c o d e > i d < / c o d e > p r o p e r t y o n e v e r y n o d e a n d u s e t h e < a h r e f = " / a p i / g a m e / b o a r d s / b o a r d / f u n c t i o n s / s e t u p U n i q u e I d s " > s e t u p U n i q u e I d s < / a > u t i l i t y w h i c h w i l l g i v e y o u a r e f w i t h t h e v a l u e o f a v a l i d u n i q u e I D y o u c a n u s e f o r a n y n e w l y c r e a t e d n o d e . < / p > < h 2 i d = " d r a g g i n g - n o d e s " t a b i n d e x = " - 1 " > D r a g g i n g N o d e s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # d r a g g i n g - n o d e s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; D r a g g i n g N o d e s & q u o t ; " > < / a > < / h 2 > < p > D r a g g a b l e n o d e s a r e s u b s t a n t i a l l y m o r e c o m p l i c a t e d . U l t i m a t e l y y o u & # 3 9 ; l l w a n t t o u s e e i t h e r < a h r e f = " / a p i / g a m e / b o a r d s / b o a r d / f u n c t i o n s / s e t u p D r a g g a b l e N o d e " > s e t u p D r a g g a b l e N o d e < / a > a n d , i f a p p l i c a b l e , < a h r e f = " / a p i / g a m e / b o a r d s / b o a r d / f u n c t i o n s / m a k e D r a g g a b l e " > m a k e D r a g g a b l e < / a > , b u t f r o m t h e r e h o o k i n g e v e r y t h i n g u p i s s t i l l a f a i r l y m a n u a l p r o c e s s . < / p > < p > S i m i l a r t o s e l e c t i n g n o d e s , d r a g g a b l e n o d e s s h o u l d a l s o t y p i c a l l y b e b a s e d o n I D s . A s s u m i n g y o u r n o d e s h a v e x a n d y p r o p e r t i e s f o r t h e i r a c t u a l p o s i t i o n , y o u r < c o d e > s e t u p D r a g g a b l e N o d e < / c o d e > c a l l s h o u l d l o o k s o m e t h i n g l i k e t h i s : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > c o n s t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > b o a r d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > r e f < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > C o m p o n e n t P u b l i c I n s t a n c e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; t y p e o f < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > B o a r d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > // You can use any other method to map IDs to the actual nodes</span></span>
< span class = "line" > < span style = "--shiki-light:#C792EA;--shiki-dark:#C792EA;" > const < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e s B y I d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > c o m p u t e d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > R e c o r d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > s t r i n g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > N o d e P o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodes < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > r e d u c e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > a c c < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > c u r r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . . . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > a c c < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > c u r r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > c u r r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#C792EA;--shiki-dark:#C792EA;" > const < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > s t a r t D r a g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > e n d D r a g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > d r a g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e B e i n g D r a g g e d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > h a s D r a g g e d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > d r a g D e l t a < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#82AAFF;--shiki-dark:#82AAFF;" > setupDraggableNode < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > n u m b e r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > board < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > getPosition < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;" > return < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e s B y I d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > setPosition < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > p o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#C792EA;--shiki-dark:#C792EA;" > const < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e s B y I d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > [ < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ] < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > node < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > p o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > node < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > p o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h e t y p e h i n t s i n y o u r I D E s h o u l d c l a r i f y h o w t o h o o k u p o r u s e e a c h o f t h e r e t u r n e d p r o p e r t i e s , b u t w e & # 3 9 ; l l g o o v e r t h e m h e r e a s w e l l . O n m o u s e d o w n o n a d r a g g a b l e n o d e , c a l l < c o d e > s t a r t D r a g < / c o d e > . W h e n e v e r t h e m o u s e g o e s b a c k u p o r l e a v e s t h e b o a r d , c a l l < c o d e > e n d D r a g < / c o d e > . A n d < c o d e > d r a g < / c o d e > i t s e l f g e t s c a l l e d w h e n t h e m o u s e i s m o v e d o v e r t h e b o a r d . I n a l l , y o u r B o a r d e l e m e n t s h o u l d l o o k l i k e t h i s , i n c l u d i n g t h e r e f p r o p e r t y u s e d t o p a s s t h e c o m p o n e n t t o < c o d e > s e t u p D r a g g a b l e N o d e < / c o d e > : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > B o a r d o n D r a g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > d r a g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > o n M o u s e U p < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > e n d D r a g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > r e f < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > b o a r d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > N o t e t h a t i f y o u & # 3 9 ; d l i k e t o h a v e n o d e s b e b o t h d r a g g a b l e < e m > a n d < / e m > s e l e c t a b l e , y o u s h o u l d a l s o i n c l u d e < c o d e > o n M o u s e D o w n = { d e s e l e c t } < / c o d e > . Y o u r m o u s e u p a n d d o w n l i s t e n e r s o n t h e n o d e s t h e m s e l v e s s h o u l d l o o k s o m e t h i n g l i k e t h i s : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > f u n c t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > m o u s e D o w n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > M o u s e E v e n t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > | < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > T o u c h E v e n t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > M y N o d e T y p e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;" > if < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e B e i n g D r a g g e d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > n u l l < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#82AAFF;--shiki-dark:#82AAFF;" > startDrag < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#82AAFF;--shiki-dark:#82AAFF;" > deselect < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#C792EA;--shiki-dark:#C792EA;" > function < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > m o u s e U p < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > M o u s e E v e n t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > | < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > T o u c h E v e n t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > M y N o d e T y p e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;" > if < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ! < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > h a s D r a g g e d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#82AAFF;--shiki-dark:#82AAFF;" > endDrag < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#82AAFF;--shiki-dark:#82AAFF;" > select < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > s t o p P r o p a g a t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > W h e n d r a g g i n g , y o u & # 3 9 ; l l o f t e n w a n t t o e n s u r e t h a t t h e n o d e b e i n g d r a g g e d i s a l w a y s o n t o p o f a l l t h e o t h e r s , a n d w h e n y o u s t o p d r a g g i n g i t d o e s n & # 3 9 ; t j u s t j u m p d o w n s e v e r a l l a y e r s . R a t h e r t h a n r e - o r d e r i n g t h e e l e m e n t s , w h i c h c a n b r e a k C S S t r a n s i t i o n s , i t & # 3 9 ; s r e c o m m e n d e d t o s p e c i f y t h e z i n d e x o f e a c h n o d e . A n e a s y w a y t o d o t h a t i s b y s e t t i n g t h e i n i t i a l z i n d e x o f a n y n e w n o d e t o i t s I D . T h e n o n m o u s e d o w n u p d a t e t h e z i n d i c e s s o t h a t t h e c u r r e n t n o d e b e i n g d r a g g e d s h i f t s a l l n o d e s b e t w e e n i t a n d t h e & q u o t ; t o p & q u o t ; z i n d e x . K e e p i n m i n d t h i s a s s u m e s t h e i n d i c e s a r e c o n t i g u o u s , w h i c h y o u c a n c h e c k f o r a n d e n s u r e w h e n r e m o v i n g n o d e s . < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > c o n s t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > o l d Z < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > z < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodes < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > f o r E a c h < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;" > if < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > z < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > o l d Z < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > node < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > z < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > - - ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > node < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > z < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n e x t I d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > N o w t o h a n d l e r e n d e r i n g t h e n o d e b e i n g d r a g g e d a p p r o p r i a t e l y . I f t h e y & # 3 9 ; r e b e i n g d r a g g e d , y o u & # 3 9 ; l l w a n t t o a c c o u n t f o r t h a t d r a g w h e n c a l c u l a t i n g t h e p o s i t i o n t o r e n d e r a t . C h e c k i f t h e n o d e i s b e i n g d r a g g e d , a n d i f s o a d d t h e < c o d e > d r a g D e l t a < / c o d e > c o m p o n e n t s t o i t s p o s i t i o n . T o t h a t e n d , y o u m i g h t w r i t e a f u n c t i o n l i k e t h i s t o g e t t h e t r a n s l a t e c o m p o n e n t o f a C S S t r a n s f o r m r u l e : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > f u n c t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > t r a n s l a t e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > N o d e P o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > i s D r a g g i n g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > b o o l e a n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#C792EA;--shiki-dark:#C792EA;" > let < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#C792EA;--shiki-dark:#C792EA;" > let < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;" > if < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i s D r a g g i n g < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > + = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > d r a g D e l t a < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > + = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > d r a g D e l t a < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;" > return < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > \ ` < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > t r a n s l a t e ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > \ $ { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > p x , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > \ $ { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > p x ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > \ ` < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > F i n a l l y , i f y o u h a v e a n y e x i s t i n g f e a t u r e s t h a t y o u & # 3 9 ; d l i k e t o m a k e d r a g g a b l e , t h e < c o d e > m a k e D r a g g a b l e < / c o d e > u t i l i t y l e t s y o u d o j u s t t h a t s o y o u d o n & # 3 9 ; t h a v e t o w o r r y a b o u t n o t b e i n g a b l e t o d i r e c t l y h o o k o n t o t h e f e a t u r e & # 3 9 ; s m o u s e d o w n o r u p l i s t e n e r s a n d o t h e r c o n f i g u r a t i o n . I t t y p i c a l l y j u s t r e q u i r e s p a s s i n g a l o n g s e v e r a l o f t h e p r o p e r t i e s y o u g o t f r o m t h e < c o d e > s e t u p D r a g g a b l e N o d e < / c o d e > c a l l , p l u s s o m e a d d i t i o n a l c a l l b a c k s t o a l l o w f o r s t i l l r e t a i n i n g t h e o r i g i n a l f e a t u r e & # 3 9 ; s i n t e r a c t i v i t y . H e r e & # 3 9 ; s a n e x a m p l e o f m a k i n g a n U p g r a d e f e a t u r e d r a g g a b l e : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > m a k e D r a g g a b l e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( u p g r a d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > id < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > m y - u p g r a d e - i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > endDrag < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > startDrag < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > hasDragged < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodeBeingDragged < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > dragDelta < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > onMouseUp < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > u p g r a d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > p u r c h a s e < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 2 i d = " d r o p p i n g - n o d e s - o n t o - o t h e r - n o d e s " t a b i n d e x = " - 1 " > D r o p p i n g N o d e s o n t o O t h e r N o d e s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # d r o p p i n g - n o d e s - o n t o - o t h e r - n o d e s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; D r o p p i n g N o d e s o n t o O t h e r N o d e s & q u o t ; " > < / a > < / h 2 > < p > T o s u p p o r t d r o p p i n g n o d e s o n t o o t h e r n o d e s , y o u & # 3 9 ; l l n e e d t o p r o v i d e u p t o 3 n e w f i e l d s t o < c o d e > s e t u p D r a g g a b l e N o d e < / c o d e > : < c o d e > r e c e i v i n g N o d e s < / c o d e > , t h e l i s t o f a l l n o d e s t h a t t h e c u r r e n t l y d r a g g e d n o d e c a n b e d r o p p e d u p o n ; < c o d e > d r o p A r e a R a d i u s < / c o d e > , t h e r a d i u s o f t h e c i r c u l a r d r o p z o n e a r o u n d e a c h r e c e i v i n g n o d e ; a n d o f c o u r s e < c o d e > o n D r o p < / c o d e > , t h e a c t u a l c a l l b a c k f o r w h e n a n o d e g e t s d r o p p e d o n a r e c e i v i n g n o d e . < / p > < p > Y o u & # 3 9 ; l l t h e n t y p i c a l l y w a n t t o u s e t h e r e t u r n e d < c o d e > r e c e i v i n g N o d e < / c o d e > a n d < c o d e > r e c e i v i n g N o d e s < / c o d e > p r o p e r t i e s t o d i s p l a y s o m e i n d i c a t o r t h a t a n y t h i n g i n < c o d e > r e c e i v i n g N o d e s < / c o d e > c a n r e c e i v e t h e c u r r e n t l y d r a g g e d n o d e , a n d t h a t i f t h e y l e t t h e i r m o u s e g o r i g h t n o w , i t & # 3 9 ; d d r o p i n t o < c o d e > r e c e i v i n g N o d e < / c o d e > s p e c i f i c a l l y . I n a l l , t h a t m i g h t l o o k s o m e t h i n g l i k e t h i s , a s p a r t o f t h e n o d e & # 3 9 ; s d i s p l a y : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > r e c e i v i n g N o d e s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > i n c l u d e s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & a m p ; & a m p ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > ( < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > & lt ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > c i r c l e < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > 5 0 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > fill < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > v a r ( - - b a c k g r o u n d ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > stroke < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > r e c e i v i n g N o d e . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = = = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ? < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > # 0 F 0 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > # 0 F 0 3 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > stroke < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > - < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > w i d t h < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > 2 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#F07178;--shiki-dark:#F07178;" > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 2 i d = " c o m m o n - d i s p l a y - c o m p o n e n t s " t a b i n d e x = " - 1 " > C o m m o n D i s p l a y C o m p o n e n t s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # c o m m o n - d i s p l a y - c o m p o n e n t s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; C o m m o n D i s p l a y C o m p o n e n t s & q u o t ; " > < / a > < / h 2 > < p > T h e b o a r d s y s t e m i s i n t e n d e d t o b e v e r y g e n e r i c , a l l o w i n g y o u t o m a k e w h a t e v e r s o r t o f c o m p o n e n t s y o u l i k e . O f p a r t i c u l a r n o t e , S V G c o m p o n e n t s a r e f i r s t - c l a s s c i t i z e n s a n d i n c r e d i b l y e a s y t o d e s i g n c o m p l e t e l y c u s t o m d i s p l a y s w i t h ( a n d i s w h a t t h i s s e c t i o n w i l l b e f o c u s e d o n s i n c e r e n d e r i n g v u e f e a t u r e s i s s t r a i g h t f o r w a r d ) . T h e r e & # 3 9 ; s a u t i l i t y c o m p o n e n t c a l l e d S V G N o d e t h a t w i l l h a n d l e t h e p o s i t i o n i n g a n d l i s t e n i n g t o b o t h t o u c h a n d m o u s e e v e n t s f o r y o u . A n y S V G e l e m e n t s s h o u l d g o i n s i d e o n e o f t h e s e . < / p > < p > K e e p i n m i n d , f o r p e r f o r m a n c e r e a s o n s , i t m a y b e b e n e f i c i a l t o p u t m a n y e l e m e n t s i n o n e < c o d e > S V G N o d e < / c o d e > , p a r t i c u l a r l y i f t h e y d o n & # 3 9 ; t n e e d t o u s e t h e e v e n t h a n d l e r s . F o r e x a m p l e , e x a m p l e s l i k e t h i s w h e r e y o u & # 3 9 ; r e r e n d e r i n g l i n e s c o n n e c t i n g v a r i o u s n o d e s : < / p > < d i v c l a s s = " l a n g u a g e - t s v p - a d a p t i v e - t h e m e " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s m a t e r i a l - t h e m e - p a l e n i g h t m a t e r i a l - t h e m e - p a l e n i g h t v p - c o d e " t a b i n d e x = " 0 " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > c o n s t < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > & lt ; & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > n o d e s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > v a l u e < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > r e d u c e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > a c c < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > c u r r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > [ < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > ... < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > a c c < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > // Replace this with your own logic for determining links to draw</span></span>
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > ... < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > c u r r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 2 A A F F ; - - s h i k i - d a r k : # 8 2 A A F F ; " > m a p < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > l < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 7 9 2 E A ; - - s h i k i - d a r k : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > f r o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > c u r r < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > t o < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > n o d e s B y I d < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > v a l u e [ l ] < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ) ) < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ] < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > [ ] < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > a s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > f r o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > N o d e P o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > t o < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > N o d e P o s i t i o n < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > [ ] < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ) < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > m a p < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > ( < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > & lt ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - l i g h t - f o n t - s t y l e : i t a l i c ; - - s h i k i - d a r k : # B A B E D 8 ; - - s h i k i - d a r k - f o n t - s t y l e : i t a l i c ; " > l i n e < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > stroke < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # C 3 E 8 8 D ; - - s h i k i - d a r k : # C 3 E 8 8 D ; " > w h i t e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > stroke < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > - < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > w i d t h < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 7 8 C 6 C ; - - s h i k i - d a r k : # F 7 8 C 6 C ; " > 4 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > // Note how we handle adding dragDelta to the node being dragged. You may consider writing a utility function to help with this process</span></span>
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > x1 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodeBeingDragged . value < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = = = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > f r o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ? dragDelta . value . x + link . from . x < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > f r o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > y1 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodeBeingDragged . value < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = = = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > f r o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ? dragDelta . value . y + link . from . y < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > f r o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > x2 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodeBeingDragged . value < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = = = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > t o < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ? dragDelta . value . x + link . to . x < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > t o < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > x < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > y2 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > nodeBeingDragged . value < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > = = = < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > t o < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > i d < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ? dragDelta . value . y + link . to . y < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > l i n k < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > t o < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > y < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ) ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#89DDFF;--shiki-dark:#89DDFF;" > & lt ; / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#676E95;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic;" > // And then in the render function:</span></span>
< span class = "line" > < span style = "--shiki-light:#BABED8;--shiki-dark:#BABED8;" > & lt ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F F C B 6 B ; - - s h i k i - d a r k : # F F C B 6 B ; " > S V G N o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > & g t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # F 0 7 1 7 8 ; - - s h i k i - d a r k : # F 0 7 1 7 8 ; " > l i n k s < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > ( ) } & l t ; / < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # B A B E D 8 ; - - s h i k i - d a r k : # B A B E D 8 ; " > S V G N o d e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 8 9 D D F F ; - - s h i k i - d a r k : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > B e y o n d t h a t , j u s t u s e t h e s t a n d a r d S V G e l e m e n t s l i k e < c o d e > r e c t < / c o d e > , < c o d e > c i r c l e < / c o d e > , < c o d e > t e x t < / c o d e > , e t c . t o f u l l y d e s i g n y o u r n o d e s . T h e r e & # 3 9 ; s a l s o a f e w o t h e r b u i l t - i n u t i l i t y c o m p o n e n t s l i k e < c o d e > C i r c u l a r P r o g r e s s < / c o d e > t h a t d o c o m m o n b u t c o m p l e x d i s p l a y p a r t s . Y o u m a y a l s o u s e t h e g l o b a l < c o d e > n o d e - t e x t < / c o d e > C S S c l a s s t o m a k e t h e d e f a u l t < c o d e > t e x t < / c o d e > e l e m e n t s a p p e a r l a r g e r a n d c e n t e r e d . < / p > ` , 3 0 ) ] ) ) } c o n s t g = i ( h , [ [ " r e n d e r " , l ] ] ) ; e x p o r t { r a s _ _ p a g e D a t a , g a s d e f a u l t } ;
