@@ -109,9 +109,9 @@ const EDGE_LABEL_LIGHT = "hsl(30, 50%, 40%)";
109109const NODE_LABEL_LIGHT = "hsl(30, 80%, 50%)" ;
110110const NODE_LABEL_OUTLINE_LIGHT = "hsl(10, 2%, 70%)" ;
111111
112- const STROKE_COLOR_DARK = "hsl(0, 0%, 90 %)" ;
113- const TEXT_COLOR_DARK = "hsl(0, 0%, 90 %)" ;
114- const EDGE_COLOR_DARK = "hsl(0, 0%, 90 %)" ;
112+ const STROKE_COLOR_DARK = "hsl(0, 0%, 98 %)" ;
113+ const TEXT_COLOR_DARK = "hsl(0, 0%, 98 %)" ;
114+ const EDGE_COLOR_DARK = "hsl(0, 0%, 98 %)" ;
115115const EDGE_LABEL_DARK = "hsl(30, 70%, 60%)" ;
116116const NODE_LABEL_DARK = "hsl(30, 100%, 50%)" ;
117117const NODE_LABEL_OUTLINE_DARK = "hsl(10, 2%, 30%)" ;
@@ -151,9 +151,11 @@ const FILL_COLORS_DARK = [
151151const FILL_COLORS_LENGTH = 10 ;
152152
153153let prevMS = performance . now ( ) ;
154+ let latestColorChangeMS = performance . now ( ) ;
154155
155156let nodeRadius = 16 ;
156157let nodeBorderWidthHalf = 1 ;
158+ let edgeBorderWidthHalf = 1 ;
157159
158160let nodeLabelColor = NODE_LABEL_LIGHT ;
159161let nodeLabelOutlineColor = NODE_LABEL_OUTLINE_LIGHT ;
@@ -196,6 +198,7 @@ let settings: Settings = {
196198 nodeRadius : 15 ,
197199 fontSize : 15 ,
198200 nodeBorderWidthHalf : 15 ,
201+ edgeBorderWidthHalf : 15 ,
199202 edgeLength : 10 ,
200203 edgeLabelSeparation : 10 ,
201204 penThickness : 1 ,
@@ -228,8 +231,11 @@ let nodeLabels = new Map<string, string>();
228231let labelOffset = 0 ;
229232
230233let draggedNodes : string [ ] = [ ] ;
234+ let coloredEdge : string | undefined = undefined ;
235+ let prevColoredEdgeMS = 0 ;
231236
232237let edges : string [ ] = [ ] ;
238+ let edgeMap = new Map < string , number | undefined > ( ) ;
233239let edgeToPos = new Map < string , number > ( ) ;
234240let edgeLabels = new Map < string , string > ( ) ;
235241
@@ -291,6 +297,7 @@ function updateNodes(graphNodes: string[]): void {
291297function updateEdges ( graphEdges : string [ ] ) : void {
292298 edges = graphEdges ;
293299 edgeToPos . clear ( ) ;
300+
294301 for ( const e of edges ) {
295302 const [ u , v , rStr ] = e . split ( " " ) ;
296303 const eBase = [ u , v ] . join ( " " ) ;
@@ -301,6 +308,12 @@ function updateEdges(graphEdges: string[]): void {
301308 edgeToPos . set ( eBase , Math . max ( rNum , edgeToPos . get ( eBase ) ! ) ) ;
302309 }
303310 }
311+
312+ edgeMap . forEach ( ( _ , e ) => {
313+ if ( ! edges . includes ( e ) ) {
314+ edgeMap . delete ( e ) ;
315+ }
316+ } ) ;
304317}
305318
306319function updateVelocities ( ) {
@@ -492,6 +505,7 @@ function buildSettings(): void {
492505
493506 nodeRadius = settings . nodeRadius ;
494507 nodeBorderWidthHalf = settings . nodeBorderWidthHalf ;
508+ edgeBorderWidthHalf = settings . edgeBorderWidthHalf ;
495509 nodeDist = settings . edgeLength + 2 * nodeRadius ;
496510
497511 labelOffset = settings . labelOffset ;
@@ -797,9 +811,22 @@ function renderEdges(renderer: GraphRenderer) {
797811 renderer . setLineDash ( [ 2 , 10 ] ) ;
798812 }
799813
814+ if ( ! edgeMap . has ( e ) ) edgeMap . set ( e , undefined ) ;
815+
816+ let finalColor = edgeColor ;
817+
818+ if ( edgeMap . get ( e ) ! !== undefined ) {
819+ const idx = edgeMap . get ( e ) ! ;
820+ const color = settings . darkMode
821+ ? FILL_PALETTE_DARK [ idx ]
822+ : FILL_PALETTE_LIGHT [ idx ] ;
823+
824+ finalColor = color ;
825+ }
826+
800827 renderer . strokeStyle = strokeColor ;
801828
802- let thickness = nodeBorderWidthHalf ;
829+ let thickness = edgeBorderWidthHalf ;
803830
804831 if (
805832 localStorage . getItem ( "isEdgeNumeric" ) === "true" &&
@@ -810,15 +837,38 @@ function renderEdges(renderer: GraphRenderer) {
810837 thickness *= 2 ;
811838 }
812839
840+ let isSelected = false ;
841+
813842 if (
814843 settings . showBridges &&
815844 bridgeMap !== undefined &&
816845 edrMax === 0 &&
817846 bridgeMap . get ( eBase )
818847 ) {
819- drawBridge ( renderer , pt1 , pt2 , thickness , nodeRadius , edgeColor ) ;
848+ isSelected = drawBridge (
849+ renderer ,
850+ pt1 ,
851+ pt2 ,
852+ thickness ,
853+ nodeRadius ,
854+ finalColor ,
855+ mousePos ,
856+ ) ;
820857 } else {
821- drawLine ( renderer , pt1 , pt2 , edr , thickness , edgeColor ) ;
858+ isSelected = drawLine (
859+ renderer ,
860+ pt1 ,
861+ pt2 ,
862+ edr ,
863+ thickness ,
864+ finalColor ,
865+ mousePos ,
866+ ) ;
867+ }
868+
869+ if ( isSelected ) {
870+ coloredEdge = e ;
871+ prevColoredEdgeMS = performance . now ( ) ;
822872 }
823873
824874 renderer . setLineDash ( [ ] ) ;
@@ -1184,14 +1234,24 @@ export function animateGraph(
11841234 canvas . addEventListener ( "pointerup" , ( event ) => {
11851235 event . preventDefault ( ) ;
11861236 const curMS = performance . now ( ) ;
1187- if ( curMS - prevMS <= 200 && draggedNodes . length ) {
1188- const u = draggedNodes [ 0 ] ;
1189- const sel = nodeMap . get ( u ) ! . selected ;
1190- if ( settings . markedNodes ) nodeMap . get ( u ) ! . selected = ! sel ;
1191- if ( settings . markColor === 2 ) {
1192- nodeMap . get ( u ) ! . markColor = undefined ;
1193- } else if ( settings . markColor >= 3 ) {
1194- nodeMap . get ( u ) ! . markColor = settings . markColor ;
1237+ if ( curMS - prevMS <= 200 && curMS - latestColorChangeMS > 200 ) {
1238+ if ( draggedNodes . length ) {
1239+ const u = draggedNodes [ 0 ] ;
1240+ const sel = nodeMap . get ( u ) ! . selected ;
1241+ if ( settings . markedNodes ) nodeMap . get ( u ) ! . selected = ! sel ;
1242+ if ( settings . markColor === 2 ) {
1243+ nodeMap . get ( u ) ! . markColor = undefined ;
1244+ } else if ( settings . markColor >= 3 ) {
1245+ nodeMap . get ( u ) ! . markColor = settings . markColor ;
1246+ }
1247+ latestColorChangeMS = performance . now ( ) ;
1248+ } else if ( coloredEdge ) {
1249+ if ( settings . markColor === 2 ) {
1250+ edgeMap . set ( coloredEdge , undefined ) ;
1251+ } else if ( settings . markColor >= 3 ) {
1252+ edgeMap . set ( coloredEdge , settings . markColor ) ;
1253+ }
1254+ latestColorChangeMS = performance . now ( ) ;
11951255 }
11961256 }
11971257 draggedNodes = [ ] ;
@@ -1234,6 +1294,10 @@ export function animateGraph(
12341294 renderEraseIndicator ( indicatorRenderer ) ;
12351295 renderPenIndicator ( indicatorRenderer ) ;
12361296
1297+ if ( performance . now ( ) - prevColoredEdgeMS > 200 ) {
1298+ coloredEdge = undefined ;
1299+ }
1300+
12371301 if ( ! settings . lockMode ) {
12381302 updateVelocities ( ) ;
12391303 }
0 commit comments