added the block highlight minimum time threshold (sugarlabs#5726)

* added the highlight minimum time threshold

* ran prettier on turtle_singer.js and changed the minimum threshold to 400ms

* formatting commit

Author: lakshay776

js/logo.js

@@ -26,6 +26,7 @@
 
    Queue, Logo, LogoDependencies, DEFAULTVOLUME, PREVIEWVOLUME, DEFAULTDELAY,
    OSCVOLUMEADJUSTMENT, TONEBPM, TARGETBPM, TURTLESTEP, NOTEDIV,
+   MIN_HIGHLIGHT_DURATION_MS,
    NOMICERRORMSG, NANERRORMSG, NOSTRINGERRORMSG, NOBOXERRORMSG,
    NOACTIONERRORMSG, NOINPUTERRORMSG, NOSQRTERRORMSG,
    ZERODIVIDEERRORMSG, EMPTYHEAPERRORMSG, INVALIDPITCH, POSNUMBER,
@@ -1529,6 +1530,10 @@ class Logo {
                 // Highlight the current block
                 logo.activity.blocks.highlight(blk, false);
                 logo._currentlyHighlightedBlock = blk;
+                // Force stage update so highlight is visible when blocks were shown during execution
+                if (logo.activity.stage) {
+                    logo.activity.stage.update();
+                }
             }
         }
 
@@ -1670,15 +1675,22 @@ class Logo {
                     logo._unhighlightStepQueue[turtle] = blk;
                 } else {
                     if (!tur.singer.suppressOutput && tur.singer.justCounting.length === 0) {
+                        const unhighlightDelay = Math.max(
+                            logo.turtleDelay + tur.waitTime,
+                            MIN_HIGHLIGHT_DURATION_MS
+                        );
                         setTimeout(() => {
                             if (logo.activity.blocks.visible) {
                                 logo.activity.blocks.unhighlight(blk);
                                 // Clear the currently highlighted block if it was this one
                                 if (logo._currentlyHighlightedBlock === blk) {
                                     logo._currentlyHighlightedBlock = null;
                                 }
+                                if (logo.activity.stage) {
+                                    logo.activity.stage.update();
+                                }
                             }
-                        }, logo.turtleDelay + tur.waitTime);
+                        }, unhighlightDelay);
                     }
                 }
             }
@@ -1703,6 +1715,10 @@ class Logo {
                         tur.unhighlightQueue.push(logo.deps.utils.last(tur.parentFlowQueue));
                     } else if (tur.unhighlightQueue.length > 0) {
                         // The child flow is finally complete, so unhighlight.
+                        const unhighlightDelay = Math.max(
+                            logo.turtleDelay,
+                            MIN_HIGHLIGHT_DURATION_MS
+                        );
                         setTimeout(() => {
                             if (logo.activity.blocks.visible) {
                                 const unhighlightBlock = tur.unhighlightQueue.pop();
@@ -1711,10 +1727,13 @@ class Logo {
                                 if (logo._currentlyHighlightedBlock === unhighlightBlock) {
                                     logo._currentlyHighlightedBlock = null;
                                 }
+                                if (logo.activity.stage) {
+                                    logo.activity.stage.update();
+                                }
                             } else {
                                 tur.unhighlightQueue.pop();
                             }
-                        }, logo.turtleDelay);
+                        }, unhighlightDelay);
                     }
                 }
             }

js/logoconstants.js

@@ -7,6 +7,7 @@
    exported
    DEFAULTVOLUME, PREVIEWVOLUME, DEFAULTDELAY,
    OSCVOLUMEADJUSTMENT, TONEBPM, TARGETBPM, TURTLESTEP, NOTEDIV,
+   MIN_HIGHLIGHT_DURATION_MS,
    NOMICERRORMSG, NANERRORMSG, NOSTRINGERRORMSG, NOBOXERRORMSG,
    NOACTIONERRORMSG, NOINPUTERRORMSG, NOSQRTERRORMSG,
    ZERODIVIDEERRORMSG, EMPTYHEAPERRORMSG, INVALIDPITCH, POSNUMBER,
@@ -25,6 +26,8 @@ const TONEBPM = 240; // seems to be the default
 const TARGETBPM = 90; // what we'd like to use for beats per minute
 const TURTLESTEP = -1; // run in step-by-step mode
 const NOTEDIV = 8; // number of steps to divide turtle graphics
+/** Minimum time (ms) to keep a block highlighted during execution so users can see which block is active. */
+const MIN_HIGHLIGHT_DURATION_MS = 400;
 
 // These error messages don't need translation since they are
 // converted into artwork w/o text.
@@ -59,6 +62,7 @@ const exportsObj = {
     TARGETBPM,
     TURTLESTEP,
     NOTEDIV,
+    MIN_HIGHLIGHT_DURATION_MS,
     NOMICERRORMSG,
     NANERRORMSG,
     NOSTRINGERRORMSG,

js/turtle-singer.js

@@ -18,7 +18,7 @@
 /*
    global
 
-   DEFAULTVOLUME, TARGETBPM, TONEBPM, frequencyToPitch, last,
+   DEFAULTVOLUME, TARGETBPM, TONEBPM, MIN_HIGHLIGHT_DURATION_MS, frequencyToPitch, last,
    pitchToFrequency, getNote, isCustomTemperament, getStepSizeUp,
    getStepSizeDown, numberToPitch, pitchToNumber, rationalSum,
    noteIsSolfege, getSolfege, SOLFEGENAMES1, SOLFEGECONVERSIONTABLE,
@@ -2479,12 +2479,16 @@ class Singer {
                 // After the note plays, clear the embedded graphics and notes queue.
                 tur.singer.embeddedGraphics[blk] = [];
 
-                // Ensure note value block unhighlights after note plays.
+                // Ensure note value block unhighlights after note plays (minimum duration so highlight is visible).
+                const highlightDurationMs = Math.max(beatValue * 1000, MIN_HIGHLIGHT_DURATION_MS);
                 setTimeout(() => {
                     if (activity.blocks.visible && blk in activity.blocks.blockList) {
                         activity.blocks.unhighlight(blk);
+                        if (activity.stage) {
+                            activity.stage.update();
+                        }
                     }
-                }, beatValue * 1000);
+                }, highlightDurationMs);
             };
 
             if (last(tur.singer.inNoteBlock) !== null || noteInNote) {