[ENHANCEMENT] Display an Indicator for Note Kinds in Chart Editor

source/funkin/data/song/SongData.hx

@@ -1117,6 +1117,23 @@ class SongNoteDataRaw implements ICloneable<SongNoteDataRaw>
     return 'SongNoteData(${this.time}ms, ' + (this.length > 0 ? '[${this.length}ms hold]' : '') + ' ${this.data}'
       + (this.kind != '' ? ' [kind: ${this.kind}])' : ')');
   }
+
+  public function buildTooltip():String
+  {
+    if ((this.kind?.length ?? 0) == 0) return "";
+
+    var result:String = 'Kind: ${this.kind}';
+    if (this.params.length == 0) return result;
+
+    result += "\nParams:";
+
+    for (param in params)
+    {
+      result += '\n- ${param.name}: ${param.value}';
+    }
+
+    return result;
+  }
 }
 
 /**

source/funkin/save/Save.hx

@@ -187,6 +187,7 @@ class Save
           theme: ChartEditorTheme.Light,
           playtestStartTime: false,
           downscroll: false,
+          showNoteKinds: true,
           metronomeVolume: 1.0,
           hitsoundVolumePlayer: 1.0,
           hitsoundVolumeOpponent: 1.0,
@@ -358,6 +359,23 @@ class Save
     return data.optionsChartEditor.downscroll;
   }
 
+  public var chartEditorShowNoteKinds(get, set):Bool;
+
+  function get_chartEditorShowNoteKinds():Bool
+  {
+    if (data.optionsChartEditor.showNoteKinds == null) data.optionsChartEditor.showNoteKinds = true;
+
+    return data.optionsChartEditor.showNoteKinds;
+  }
+
+  function set_chartEditorShowNoteKinds(value:Bool):Bool
+  {
+    // Set and apply.
+    data.optionsChartEditor.showNoteKinds = value;
+    flush();
+    return data.optionsChartEditor.showNoteKinds;
+  }
+
   public var chartEditorPlaytestStartTime(get, set):Bool;
 
   function get_chartEditorPlaytestStartTime():Bool
@@ -1844,6 +1862,12 @@ typedef SaveDataChartEditorOptions =
    */
   var ?downscroll:Bool;
 
+  /**
+   * Show Note Kind Indicator in the Chart Editor.
+   * @default `true`
+   */
+  var ?showNoteKinds:Bool;
+
   /**
    * Metronome volume in the Chart Editor.
    * @default `1.0`

source/funkin/ui/debug/charting/ChartEditorState.hx

@@ -634,6 +634,11 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     return isViewDownscroll;
   }
 
+  /**
+   * Whether to show an indicator if a note is of a non-default kind.
+   */
+  var showNoteKindIndicators:Bool = false;
+
   /**
    * The current theme used by the editor.
    * Dictates the appearance of many UI elements.
@@ -1858,6 +1863,11 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
    */
   var menubarItemDownscroll:MenuCheckBox;
 
+  /**
+   * The `View -> Note Kind Indicator` menu item.
+   */
+  var menubarItemViewIndicators:MenuCheckBox;
+
   /**
    * The `View -> Increase Difficulty` menu item.
    */
@@ -2361,6 +2371,7 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     noteSnapQuantIndex = save.chartEditorNoteQuant;
     currentLiveInputStyle = save.chartEditorLiveInputStyle;
     isViewDownscroll = save.chartEditorDownscroll;
+    showNoteKindIndicators = save.chartEditorShowNoteKinds;
     playtestStartTime = save.chartEditorPlaytestStartTime;
     currentTheme = save.chartEditorTheme;
     metronomeVolume = save.chartEditorMetronomeVolume;
@@ -2390,6 +2401,7 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     save.chartEditorNoteQuant = noteSnapQuantIndex;
     save.chartEditorLiveInputStyle = currentLiveInputStyle;
     save.chartEditorDownscroll = isViewDownscroll;
+    save.chartEditorShowNoteKinds = showNoteKindIndicators;
     save.chartEditorPlaytestStartTime = playtestStartTime;
     save.chartEditorTheme = currentTheme;
     save.chartEditorMetronomeVolume = metronomeVolume;
@@ -2522,7 +2534,7 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     add(gridTiledSprite);
     gridTiledSprite.zIndex = 10;
 
-    gridGhostNote = new ChartEditorNoteSprite(this);
+    gridGhostNote = new ChartEditorNoteSprite(this, true);
     gridGhostNote.alpha = 0.6;
     gridGhostNote.noteData = new SongNoteData(0, 0, 0, "", []);
     gridGhostNote.visible = false;
@@ -3092,6 +3104,9 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     menubarItemDownscroll.onClick = event -> isViewDownscroll = event.value;
     menubarItemDownscroll.selected = isViewDownscroll;
 
+    menubarItemViewIndicators.onClick = event -> showNoteKindIndicators = menubarItemViewIndicators.selected;
+    menubarItemViewIndicators.selected = showNoteKindIndicators;
+
     menubarItemDifficultyUp.onClick = _ -> incrementDifficulty(1);
     menubarItemDifficultyDown.onClick = _ -> incrementDifficulty(-1);
 
@@ -3924,6 +3939,9 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
           selectionSquare.width = selectionSquare.height = GRID_SIZE;
           selectionSquare.color = FlxColor.RED;
         }
+
+        // Additional cleanup on notes.
+        if (noteTooltipsDirty) noteSprite.updateTooltipText();
       }
 
       for (eventSprite in renderedEvents.members)
@@ -6310,7 +6328,8 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
   {
     currentScrollEase = Math.max(0, targetScrollPosition);
     currentScrollEase = Math.min(currentScrollEase, songLengthInPixels);
-    scrollPositionInPixels = MathUtil.snap(MathUtil.smoothLerpPrecision(scrollPositionInPixels, currentScrollEase, FlxG.elapsed, SCROLL_EASE_DURATION, 1 / 1000), currentScrollEase, 1 / 1000);
+    scrollPositionInPixels = MathUtil.snap(MathUtil.smoothLerpPrecision(scrollPositionInPixels, currentScrollEase, FlxG.elapsed, SCROLL_EASE_DURATION,
+      1 / 1000), currentScrollEase, 1 / 1000);
     moveSongToScrollPosition();
   }
 

source/funkin/ui/debug/charting/components/ChartEditorNoteSprite.hx

@@ -1,5 +1,7 @@
 package funkin.ui.debug.charting.components;
 
+import flixel.text.FlxText;
+import flixel.util.FlxColor;
 import flixel.FlxObject;
 import flixel.FlxSprite;
 import flixel.graphics.frames.FlxFramesCollection;
@@ -10,6 +12,9 @@ import funkin.data.song.SongData.SongNoteData;
 import funkin.data.notestyle.NoteStyleRegistry;
 import funkin.play.notes.notestyle.NoteStyle;
 import funkin.play.notes.NoteDirection;
+import haxe.ui.tooltips.ToolTipRegionOptions;
+import funkin.util.HaxeUIUtil;
+import haxe.ui.tooltips.ToolTipManager;
 
 /**
  * A sprite that can be used to display a note in a chart.
@@ -63,11 +68,21 @@ class ChartEditorNoteSprite extends FlxSprite
     return overrideData;
   }
 
-  public function new(parent:ChartEditorState)
+  public var isGhost:Bool = false;
+  public var tooltip:ToolTipRegionOptions;
+
+  /**
+   * An indicator if the note is a note kind different than Default ("").
+   */
+  public var kindIndicator:FlxText = new FlxText(5, 5, 100, '*', 16);
+
+  public function new(parent:ChartEditorState, isGhost:Bool = false)
   {
     super();
 
     this.parentState = parent;
+    this.isGhost = isGhost;
+    this.tooltip = HaxeUIUtil.buildTooltip('N/A');
 
     var entries:Array<String> = NoteStyleRegistry.instance.listEntryIds();
 
@@ -89,6 +104,8 @@ class ChartEditorNoteSprite extends FlxSprite
     {
       addNoteStyleAnimations(fetchNoteStyle(entry));
     }
+
+    kindIndicator.setFormat("VCR OSD Mono", 24, FlxColor.YELLOW, LEFT, FlxTextBorderStyle.OUTLINE, FlxColor.BLACK);
   }
 
   static var noteFrameCollection:Null<FlxFramesCollection> = null;
@@ -156,6 +173,7 @@ class ChartEditorNoteSprite extends FlxSprite
     if (this.noteData == null)
     {
       this.kill();
+      updateTooltipPosition();
       return this.noteData;
     }
 
@@ -167,7 +185,7 @@ class ChartEditorNoteSprite extends FlxSprite
 
     // Update the position to match the note data.
     updateNotePosition();
-
+    updateTooltipText();
     return this.noteData;
   }
 
@@ -194,6 +212,50 @@ class ChartEditorNoteSprite extends FlxSprite
       this.x += origin.x;
       this.y += origin.y;
     }
+
+    this.updateTooltipPosition();
+  }
+
+  public function updateTooltipText():Void
+  {
+    if (this.noteData == null) return;
+    if (this.isGhost) return;
+    this.tooltip.tipData = {text: this.noteData.buildTooltip()};
+  }
+
+  public function updateTooltipPosition():Void
+  {
+    // No tooltip for ghost sprites.
+    if (this.isGhost) return;
+
+    if (this.noteData == null || (this.tooltip.tipData?.text ?? "").length == 0)
+    {
+      // Disable the tooltip.
+      ToolTipManager.instance.unregisterTooltipRegion(this.tooltip);
+    }
+    else
+    {
+      // Update the position.
+      this.tooltip.left = this.x;
+      this.tooltip.top = this.y;
+      this.tooltip.width = this.width;
+      this.tooltip.height = this.height;
+
+      // Enable the tooltip.
+      ToolTipManager.instance.registerTooltipRegion(this.tooltip);
+    }
+  }
+
+  override public function draw()
+  {
+    super.draw();
+
+    if (!parentState.showNoteKindIndicators) return;
+    if ((this.noteData?.kind ?? "").length == 0) return; // Do not render the note kind indicator if the note kind is default.
+
+    kindIndicator.x = this.x;
+    kindIndicator.y = this.y;
+    kindIndicator.draw();
   }
 
   function get_noteStyle():Null<String>