@@ -59,6 +59,37 @@ const Editor = () => {
5959const clickedGroup = layerRef . current . findOne ( `#g${ id } ) ;
6060clickedGroup . destroy ( ) ; // Delete the Node
6161
62+ transitions . forEach ( ( tr ) => {
63+ let tre = null ;
64+ if ( tr && ( tr . from == id || tr . to == id ) ) {
65+ tre = layerRef . current . findOne ( `#tr${ tr . id } ) ;
66+ tre . destroy ( ) ; // Delete the arrow
67+
68+ // Delete the transition for the other node participating in the state
69+ if ( tr . from == id ) {
70+ const aliveNodeTransitions = nodeList [ tr . to ] . transitions ;
71+
72+ for ( let i = 0 ; i < aliveNodeTransitions . length ; i ++ ) {
73+ if ( aliveNodeTransitions [ i ] . trId == tr . id ) {
74+ nodeList [ tr . to ] . transitions . splice ( i , 1 ) ;
75+ }
76+ }
77+ } else {
78+ const aliveNodeTransitions = nodeList [ tr . from ] . transitions ;
79+
80+ for ( let i = 0 ; i < aliveNodeTransitions . length ; i ++ ) {
81+ if ( aliveNodeTransitions [ i ] . trId == tr . id ) {
82+ nodeList [ tr . from ] . transitions . splice ( i , 1 ) ;
83+ }
84+ }
85+ }
86+
87+ transitions [ tr . id ] = undefined ; // remove the arrow entry from the array
88+ }
89+ } ) ;
90+
91+ updateTransitions ( transitions ) ;
92+
6293// Update the nodeList store
6394nodeList [ id ] = undefined ;
6495updateNodeList ( nodeList ) ;
@@ -81,6 +112,8 @@ const Editor = () => {
81112
82113const newTransition = {
83114id :transitions . length ,
115+ from :transitionTracker ,
116+ to :id ,
84117points :points ,
85118stroke :"#ffffffe6" ,
86119strokeWidth :2 ,
@@ -166,8 +199,7 @@ const Editor = () => {
166199
167200// Generate Points for drawing transition arrow
168201function getPoints ( id1 , id2 ) {
169-
170- if ( id1 == id2 ) {
202+ if ( id1 == id2 ) {
171203// Self-loop
172204const node = layerRef . current . findOne ( `#g${ id1 } ) ;
173205const x = node . x ( ) ;
@@ -176,9 +208,12 @@ const Editor = () => {
176208const offset = 30 ;
177209
178210const points = [
179- x - radius / 1.5 , y - radius , // Start point (left of the node)
180- x , y - radius - 2 * offset , // Control point (top)
181- x + radius / 1.5 , y - radius , // End point (right of the node)
211+ x - radius / 1.5 ,
212+ y - radius , // Start point (left of the node)
213+ x ,
214+ y - radius - 2 * offset , // Control point (top)
215+ x + radius / 1.5 ,
216+ y - radius , // End point (right of the node)
182217] ;
183218
184219return points ;
@@ -297,17 +332,20 @@ const Editor = () => {
297332)
298333) }
299334{ /* Transition Arrows */ }
300- { transitions . map ( ( transition ) => (
301- < Arrow
302- key = { transition . id }
303- id = { `tr${ transition . id } }
304- stroke = { transition . stroke }
305- strokeWidth = { transition . strokeWidth }
306- fill = { transition . fill }
307- points = { transition . points }
308- tension = { transition . tension }
309- />
310- ) ) }
335+ { transitions . map (
336+ ( transition ) =>
337+ transition && (
338+ < Arrow
339+ key = { transition . id }
340+ id = { `tr${ transition . id } }
341+ stroke = { transition . stroke }
342+ strokeWidth = { transition . strokeWidth }
343+ fill = { transition . fill }
344+ points = { transition . points }
345+ tension = { transition . tension }
346+ />
347+ )
348+ ) }
311349</ Group >
312350</ Layer >
313351</ Stage >