Add "Remove Difficulty" button to the Difficulty toolbox.

assets

@@ -1 +1 @@
-Subproject commit 5d28d36311d95d17ec9bddaca479b0f8db088a7c
+Subproject commit e0a1446ae956b15a20bf039de0c46a59b8e242bb

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

@@ -35,6 +35,7 @@ import funkin.data.song.SongData.SongCharacterData;
 import funkin.data.song.SongData.SongChartData;
 import funkin.data.song.SongData.SongEventData;
 import funkin.data.song.SongData.SongMetadata;
+import funkin.ui.debug.charting.toolboxes.ChartEditorDifficultyToolbox;
 import funkin.data.song.SongData.SongNoteData;
 import funkin.data.song.SongData.SongOffsets;
 import funkin.data.song.SongDataUtils;
@@ -4731,48 +4732,10 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     {
       difficultySelectDirty = false;
 
-      // Manage the Select Difficulty tree view.
+      var difficultyToolbox:ChartEditorDifficultyToolbox = cast this.getToolbox(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
-      var difficultyToolbox:Null<CollapsibleDialog> = this.getToolbox_OLD(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
       if (difficultyToolbox == null) return;
 
-      var treeView:Null<TreeView> = difficultyToolbox.findComponent('difficultyToolboxTree');
+      difficultyToolbox.updateTree();
-      if (treeView == null) return;
-
-      // Clear the tree view so we can rebuild it.
-      treeView.clearNodes();
-
-      // , icon: 'haxeui-core/styles/default/haxeui_tiny.png'
-      var treeSong:TreeViewNode = treeView.addNode({id: 'stv_song', text: 'S: $currentSongName'});
-      treeSong.expanded = true;
-
-      for (curVariation in availableVariations)
-      {
-        trace('DIFFICULTY TOOLBOX: Variation ${curVariation}');
-        var variationMetadata:Null<SongMetadata> = songMetadata.get(curVariation);
-        if (variationMetadata == null) continue;
-
-        var treeVariation:TreeViewNode = treeSong.addNode(
-          {
-            id: 'stv_variation_$curVariation',
-            text: 'V: ${curVariation.toTitleCase()}'
-          });
-        treeVariation.expanded = true;
-
-        var difficultyList:Array<String> = variationMetadata.playData.difficulties;
-
-        for (difficulty in difficultyList)
-        {
-          trace('DIFFICULTY TOOLBOX: Difficulty ${curVariation}_$difficulty');
-          var _treeDifficulty:TreeViewNode = treeVariation.addNode(
-            {
-              id: 'stv_difficulty_${curVariation}_$difficulty',
-              text: 'D: ${difficulty.toTitleCase()}'
-            });
-        }
-      }
-
-      treeView.onChange = onChangeTreeDifficulty;
-      refreshDifficultyTreeSelection(treeView);
     }
   }
 
@@ -5517,7 +5480,7 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     return event != null && currentEventSelection.indexOf(event) != -1;
   }
 
-  function createDifficulty(variation:String, difficulty:String, scrollSpeed:Float = 1.0)
+  function createDifficulty(variation:String, difficulty:String, scrollSpeed:Float = 1.0):Void
   {
     var variationMetadata:Null<SongMetadata> = songMetadata.get(variation);
     if (variationMetadata == null) return;
@@ -5539,6 +5502,42 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
     difficultySelectDirty = true; // Force the Difficulty toolbox to update.
   }
 
+  function removeDifficulty(variation:String, difficulty:String):Void
+  {
+    var variationMetadata:Null<SongMetadata> = songMetadata.get(variation);
+    if (variationMetadata == null) return;
+
+    variationMetadata.playData.difficulties.remove(difficulty);
+
+    var resultChartData = songChartData.get(variation);
+    if (resultChartData != null)
+    {
+      resultChartData.scrollSpeed.remove(difficulty);
+      resultChartData.notes.remove(difficulty);
+    }
+
+    if (songMetadata.size() > 1)
+    {
+      if (variationMetadata.playData.difficulties.length == 0)
+      {
+        songMetadata.remove(variation);
+        songChartData.remove(variation);
+      }
+
+      if (variation == selectedVariation)
+      {
+        var firstVariation = songMetadata.keyValues()[0];
+        if (firstVariation != null) selectedVariation = firstVariation;
+        variationMetadata = songMetadata.get(selectedVariation);
+      }
+    }
+
+    if (selectedDifficulty == difficulty
+      || !variationMetadata.playData.difficulties.contains(selectedDifficulty)) selectedDifficulty = variationMetadata.playData.difficulties[0];
+
+    difficultySelectDirty = true; // Force the Difficulty toolbox to update.
+  }
+
   function incrementDifficulty(change:Int):Void
   {
     var currentDifficultyIndex:Int = availableDifficulties.indexOf(selectedDifficulty);
@@ -5587,8 +5586,8 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
         Conductor.instance.mapTimeChanges(this.currentSongMetadata.timeChanges);
         updateTimeSignature();
 
-        refreshDifficultyTreeSelection();
         this.refreshToolbox(CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
+        this.refreshToolbox(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
       }
       else
       {
@@ -5596,8 +5595,8 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
         var prevDifficulty = availableDifficulties[currentDifficultyIndex - 1];
         selectedDifficulty = prevDifficulty;
 
-        refreshDifficultyTreeSelection();
         this.refreshToolbox(CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
+        this.refreshToolbox(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
       }
     }
     else
@@ -5615,8 +5614,8 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
         var nextDifficulty = availableDifficulties[0];
         selectedDifficulty = nextDifficulty;
 
-        refreshDifficultyTreeSelection();
         this.refreshToolbox(CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
+        this.refreshToolbox(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
       }
       else
       {
@@ -5624,7 +5623,7 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
         var nextDifficulty = availableDifficulties[currentDifficultyIndex + 1];
         selectedDifficulty = nextDifficulty;
 
-        refreshDifficultyTreeSelection();
+        this.refreshToolbox(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
         this.refreshToolbox(CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
       }
     }
@@ -5760,92 +5759,6 @@ class ChartEditorState extends UIState // UIState derives from MusicBeatState
    */
   // ==================
 
-  /**
-   * Set the currently selected item in the Difficulty tree view to the node representing the current difficulty.
-   * @param treeView The tree view to update. If `null`, the tree view will be found.
-   */
-  function refreshDifficultyTreeSelection(?treeView:TreeView):Void
-  {
-    if (treeView == null)
-    {
-      // Manage the Select Difficulty tree view.
-      var difficultyToolbox:Null<CollapsibleDialog> = this.getToolbox_OLD(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
-      if (difficultyToolbox == null) return;
-
-      treeView = difficultyToolbox.findComponent('difficultyToolboxTree');
-      if (treeView == null) return;
-    }
-
-    var currentTreeDifficultyNode = getCurrentTreeDifficultyNode(treeView);
-    if (currentTreeDifficultyNode != null) treeView.selectedNode = currentTreeDifficultyNode;
-  }
-
-  /**
-   * Retrieve the node representing the current difficulty in the Difficulty tree view.
-   * @param treeView The tree view to search. If `null`, the tree view will be found.
-   * @return The node representing the current difficulty, or `null` if not found.
-   */
-  function getCurrentTreeDifficultyNode(?treeView:TreeView = null):Null<TreeViewNode>
-  {
-    if (treeView == null)
-    {
-      var difficultyToolbox:Null<CollapsibleDialog> = this.getToolbox_OLD(CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
-      if (difficultyToolbox == null) return null;
-
-      treeView = difficultyToolbox.findComponent('difficultyToolboxTree');
-      if (treeView == null) return null;
-    }
-
-    var result:TreeViewNode = treeView.findNodeByPath('stv_song/stv_variation_$selectedVariation/stv_difficulty_${selectedVariation}_$selectedDifficulty',
-      'id');
-    if (result == null) return null;
-
-    return result;
-  }
-
-  /**
-   * Called when selecting a tree element in the Difficulty toolbox.
-   * @param event The click event.
-   */
-  function onChangeTreeDifficulty(event:UIEvent):Void
-  {
-    // Get the newly selected node.
-    var treeView:TreeView = cast event.target;
-    var targetNode:TreeViewNode = treeView.selectedNode;
-
-    if (targetNode == null)
-    {
-      trace('No target node!');
-      // Reset the user's selection.
-      var currentTreeDifficultyNode = getCurrentTreeDifficultyNode(treeView);
-      if (currentTreeDifficultyNode != null) treeView.selectedNode = currentTreeDifficultyNode;
-      return;
-    }
-
-    switch (targetNode.data.id.split('_')[1])
-    {
-      case 'difficulty':
-        var variation:String = targetNode.data.id.split('_')[2];
-        var difficulty:String = targetNode.data.id.split('_')[3];
-
-        if (variation != null && difficulty != null)
-        {
-          trace('Changing difficulty to "$variation:$difficulty"');
-          selectedVariation = variation;
-          selectedDifficulty = difficulty;
-          this.refreshToolbox(CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
-        }
-      // case 'song':
-      // case 'variation':
-      default:
-        // Reset the user's selection.
-        trace('Selected wrong node type, resetting selection.');
-        var currentTreeDifficultyNode = getCurrentTreeDifficultyNode(treeView);
-        if (currentTreeDifficultyNode != null) treeView.selectedNode = currentTreeDifficultyNode;
-        this.refreshToolbox(CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
-    }
-  }
-
   /**
    * STATIC FUNCTIONS
    */

source/funkin/ui/debug/charting/handlers/ChartEditorToolboxHandler.hx

@@ -36,6 +36,7 @@ import haxe.ui.containers.dialogs.Dialog.DialogEvent;
 import funkin.ui.debug.charting.toolboxes.ChartEditorBaseToolbox;
 import funkin.ui.debug.charting.toolboxes.ChartEditorMetadataToolbox;
 import funkin.ui.debug.charting.toolboxes.ChartEditorEventDataToolbox;
+import funkin.ui.debug.charting.toolboxes.ChartEditorDifficultyToolbox;
 import haxe.ui.containers.Frame;
 import haxe.ui.containers.Grid;
 import haxe.ui.containers.TreeView;
@@ -84,7 +85,7 @@ class ChartEditorToolboxHandler
         case ChartEditorState.CHART_EDITOR_TOOLBOX_PLAYTEST_PROPERTIES_LAYOUT:
           onShowToolboxPlaytestProperties(state, toolbox);
         case ChartEditorState.CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT:
-          onShowToolboxDifficulty(state, toolbox);
+          cast(toolbox, ChartEditorBaseToolbox).refresh();
         case ChartEditorState.CHART_EDITOR_TOOLBOX_METADATA_LAYOUT:
           // TODO: Fix this.
           cast(toolbox, ChartEditorBaseToolbox).refresh();
@@ -123,8 +124,6 @@ class ChartEditorToolboxHandler
           onHideToolboxEventData(state, toolbox);
         case ChartEditorState.CHART_EDITOR_TOOLBOX_PLAYTEST_PROPERTIES_LAYOUT:
           onHideToolboxPlaytestProperties(state, toolbox);
-        case ChartEditorState.CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT:
-          onHideToolboxDifficulty(state, toolbox);
         case ChartEditorState.CHART_EDITOR_TOOLBOX_METADATA_LAYOUT:
           onHideToolboxMetadata(state, toolbox);
         case ChartEditorState.CHART_EDITOR_TOOLBOX_PLAYER_PREVIEW_LAYOUT:
@@ -309,8 +308,6 @@ class ChartEditorToolboxHandler
 
   static function onHideToolboxEventData(state:ChartEditorState, toolbox:CollapsibleDialog):Void {}
 
-  static function onHideToolboxDifficulty(state:ChartEditorState, toolbox:CollapsibleDialog):Void {}
-
   static function onShowToolboxPlaytestProperties(state:ChartEditorState, toolbox:CollapsibleDialog):Void {}
 
   static function onHideToolboxPlaytestProperties(state:ChartEditorState, toolbox:CollapsibleDialog):Void {}
@@ -358,91 +355,15 @@ class ChartEditorToolboxHandler
     return toolbox;
   }
 
-  static function buildToolboxDifficultyLayout(state:ChartEditorState):Null<CollapsibleDialog>
+  static function buildToolboxDifficultyLayout(state:ChartEditorState):Null<ChartEditorBaseToolbox>
   {
-    var toolbox:CollapsibleDialog = cast RuntimeComponentBuilder.fromAsset(ChartEditorState.CHART_EDITOR_TOOLBOX_DIFFICULTY_LAYOUT);
+    var toolbox:ChartEditorBaseToolbox = ChartEditorDifficultyToolbox.build(state);
 
     if (toolbox == null) return null;
 
-    // Starting position.
-    toolbox.x = 125;
-    toolbox.y = 200;
-
-    toolbox.onDialogClosed = function(event:UIEvent) {
-      state.menubarItemToggleToolboxDifficulty.selected = false;
-    }
-
-    var difficultyToolboxAddVariation:Null<Button> = toolbox.findComponent('difficultyToolboxAddVariation', Button);
-    if (difficultyToolboxAddVariation == null)
-      throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxAddVariation component.';
-    var difficultyToolboxAddDifficulty:Null<Button> = toolbox.findComponent('difficultyToolboxAddDifficulty', Button);
-    if (difficultyToolboxAddDifficulty == null)
-      throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxAddDifficulty component.';
-    var difficultyToolboxSaveMetadata:Null<Button> = toolbox.findComponent('difficultyToolboxSaveMetadata', Button);
-    if (difficultyToolboxSaveMetadata == null)
-      throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxSaveMetadata component.';
-    var difficultyToolboxSaveChart:Null<Button> = toolbox.findComponent('difficultyToolboxSaveChart', Button);
-    if (difficultyToolboxSaveChart == null)
-      throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxSaveChart component.';
-    // var difficultyToolboxSaveAll:Null<Button> = toolbox.findComponent('difficultyToolboxSaveAll', Button);
-    // if (difficultyToolboxSaveAll == null) throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxSaveAll component.';
-    var difficultyToolboxLoadMetadata:Null<Button> = toolbox.findComponent('difficultyToolboxLoadMetadata', Button);
-    if (difficultyToolboxLoadMetadata == null)
-      throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxLoadMetadata component.';
-    var difficultyToolboxLoadChart:Null<Button> = toolbox.findComponent('difficultyToolboxLoadChart', Button);
-    if (difficultyToolboxLoadChart == null)
-      throw 'ChartEditorToolboxHandler.buildToolboxDifficultyLayout() - Could not find difficultyToolboxLoadChart component.';
-
-    difficultyToolboxAddVariation.onClick = function(_:UIEvent) {
-      state.openAddVariationDialog(true);
-    };
-
-    difficultyToolboxAddDifficulty.onClick = function(_:UIEvent) {
-      state.openAddDifficultyDialog(true);
-    };
-
-    difficultyToolboxSaveMetadata.onClick = function(_:UIEvent) {
-      var vari:String = state.selectedVariation != Constants.DEFAULT_VARIATION ? '-${state.selectedVariation}' : '';
-      FileUtil.writeFileReference('${state.currentSongId}$vari-metadata.json', state.currentSongMetadata.serialize());
-    };
-
-    difficultyToolboxSaveChart.onClick = function(_:UIEvent) {
-      var vari:String = state.selectedVariation != Constants.DEFAULT_VARIATION ? '-${state.selectedVariation}' : '';
-      FileUtil.writeFileReference('${state.currentSongId}$vari-chart.json', state.currentSongChartData.serialize());
-    };
-
-    difficultyToolboxLoadMetadata.onClick = function(_:UIEvent) {
-      // Replace metadata for current variation.
-      SongSerializer.importSongMetadataAsync(function(songMetadata) {
-        state.currentSongMetadata = songMetadata;
-      });
-    };
-
-    difficultyToolboxLoadChart.onClick = function(_:UIEvent) {
-      // Replace chart data for current variation.
-      SongSerializer.importSongChartDataAsync(function(songChartData) {
-        state.currentSongChartData = songChartData;
-        state.noteDisplayDirty = true;
-      });
-    };
-
-    state.difficultySelectDirty = true;
-
     return toolbox;
   }
 
-  static function onShowToolboxDifficulty(state:ChartEditorState, toolbox:CollapsibleDialog):Void
-  {
-    // Update the selected difficulty when reopening the toolbox.
-    var treeView:Null<TreeView> = toolbox.findComponent('difficultyToolboxTree');
-    if (treeView == null) return;
-
-    var current = state.getCurrentTreeDifficultyNode(treeView);
-    if (current == null) return;
-    treeView.selectedNode = current;
-    trace('selected node: ${treeView.selectedNode}');
-  }
-
   static function buildToolboxMetadataLayout(state:ChartEditorState):Null<ChartEditorBaseToolbox>
   {
     var toolbox:ChartEditorBaseToolbox = ChartEditorMetadataToolbox.build(state);

source/funkin/ui/debug/charting/toolboxes/ChartEditorDifficultyToolbox.hx

@@ -0,0 +1,239 @@
+package funkin.ui.debug.charting.toolboxes;
+
+import funkin.play.character.BaseCharacter.CharacterType;
+import funkin.play.character.CharacterData;
+import funkin.data.stage.StageData;
+import funkin.data.stage.StageRegistry;
+import funkin.ui.debug.charting.commands.ChangeStartingBPMCommand;
+import funkin.ui.debug.charting.util.ChartEditorDropdowns;
+import haxe.ui.components.Button;
+import haxe.ui.components.CheckBox;
+import haxe.ui.containers.dialogs.Dialogs;
+import haxe.ui.containers.dialogs.Dialog.DialogButton;
+import funkin.data.song.SongData.SongMetadata;
+import haxe.ui.components.DropDown;
+import haxe.ui.components.HorizontalSlider;
+import funkin.util.FileUtil;
+import haxe.ui.containers.dialogs.MessageBox.MessageBoxType;
+import funkin.play.song.SongSerializer;
+import haxe.ui.components.Label;
+import haxe.ui.components.NumberStepper;
+import haxe.ui.components.Slider;
+import haxe.ui.components.TextField;
+import funkin.play.stage.Stage;
+import haxe.ui.containers.Box;
+import haxe.ui.containers.TreeView;
+import haxe.ui.containers.TreeViewNode;
+import haxe.ui.containers.Frame;
+import haxe.ui.events.UIEvent;
+
+/**
+ * The toolbox which allows viewing the list of difficulties, switching to a specific one,
+ * and adding/removing variations and difficulties.
+ */
+// @:nullSafety // TODO: Fix null safety when used with HaxeUI build macros.
+@:access(funkin.ui.debug.charting.ChartEditorState)
+@:build(haxe.ui.ComponentBuilder.build("assets/exclude/data/ui/chart-editor/toolboxes/difficulty.xml"))
+class ChartEditorDifficultyToolbox extends ChartEditorBaseToolbox
+{
+  var difficultyToolboxTree:TreeView;
+  var difficultyToolboxAddVariation:Button;
+  var difficultyToolboxAddDifficulty:Button;
+  var difficultyToolboxRemoveDifficulty:Button;
+  var difficultyToolboxSaveMetadata:Button;
+  var difficultyToolboxSaveChart:Button;
+  var difficultyToolboxLoadMetadata:Button;
+  var difficultyToolboxLoadChart:Button;
+
+  public function new(chartEditorState2:ChartEditorState)
+  {
+    super(chartEditorState2);
+
+    initialize();
+
+    this.onDialogClosed = onClose;
+  }
+
+  function onClose(event:UIEvent)
+  {
+    chartEditorState.menubarItemToggleToolboxDifficulty.selected = false;
+  }
+
+  function initialize():Void
+  {
+    // Starting position.
+    // TODO: Save and load this.
+    this.x = 150;
+    this.y = 250;
+
+    difficultyToolboxAddVariation.onClick = function(_:UIEvent) {
+      chartEditorState.openAddVariationDialog(true);
+    };
+
+    difficultyToolboxAddDifficulty.onClick = function(_:UIEvent) {
+      chartEditorState.openAddDifficultyDialog(true);
+    };
+
+    difficultyToolboxRemoveDifficulty.onClick = function(_:UIEvent) {
+      var currentVariation:String = chartEditorState.selectedVariation;
+      var currentDifficulty:String = chartEditorState.selectedDifficulty;
+
+      trace('Removing difficulty "$currentVariation:$currentDifficulty"');
+
+      var callback = (button) -> {
+        switch (button)
+        {
+          case DialogButton.YES:
+            // Remove the difficulty.
+            chartEditorState.removeDifficulty(currentVariation, currentDifficulty);
+            refresh();
+          case DialogButton.NO: // Do nothing.
+          default: // Do nothing.
+        }
+      }
+
+      Dialogs.messageBox("Are you sure? This cannot be undone.", "Remove Difficulty", MessageBoxType.TYPE_YESNO, callback);
+    };
+
+    difficultyToolboxSaveMetadata.onClick = function(_:UIEvent) {
+      var vari:String = chartEditorState.selectedVariation != Constants.DEFAULT_VARIATION ? '-${chartEditorState.selectedVariation}' : '';
+      FileUtil.writeFileReference('${chartEditorState.currentSongId}$vari-metadata.json', chartEditorState.currentSongMetadata.serialize());
+    };
+
+    difficultyToolboxSaveChart.onClick = function(_:UIEvent) {
+      var vari:String = chartEditorState.selectedVariation != Constants.DEFAULT_VARIATION ? '-${chartEditorState.selectedVariation}' : '';
+      FileUtil.writeFileReference('${chartEditorState.currentSongId}$vari-chart.json', chartEditorState.currentSongChartData.serialize());
+    };
+
+    difficultyToolboxLoadMetadata.onClick = function(_:UIEvent) {
+      // Replace metadata for current variation.
+      SongSerializer.importSongMetadataAsync(function(songMetadata) {
+        chartEditorState.currentSongMetadata = songMetadata;
+      });
+    };
+
+    difficultyToolboxLoadChart.onClick = function(_:UIEvent) {
+      // Replace chart data for current variation.
+      SongSerializer.importSongChartDataAsync(function(songChartData) {
+        chartEditorState.currentSongChartData = songChartData;
+        chartEditorState.noteDisplayDirty = true;
+      });
+    };
+
+    refresh();
+  }
+
+  /**
+   * Clear the tree view and rebuild it with the current song metadata (variation and difficulty list).
+   */
+  public function updateTree():Void
+  {
+    // Clear the tree view so we can rebuild it.
+    difficultyToolboxTree.clearNodes();
+
+    // , icon: 'haxeui-core/styles/default/haxeui_tiny.png'
+    var treeSong:TreeViewNode = difficultyToolboxTree.addNode({id: 'stv_song', text: 'S: ${chartEditorState.currentSongName}'});
+    treeSong.expanded = true;
+
+    for (curVariation in chartEditorState.availableVariations)
+    {
+      var variationMetadata:Null<SongMetadata> = chartEditorState.songMetadata.get(curVariation);
+      if (variationMetadata == null) continue;
+
+      var treeVariation:TreeViewNode = treeSong.addNode(
+        {
+          id: 'stv_variation_$curVariation',
+          text: 'V: ${curVariation.toTitleCase()}'
+        });
+      treeVariation.expanded = true;
+
+      var difficultyList:Array<String> = variationMetadata.playData.difficulties;
+
+      for (difficulty in difficultyList)
+      {
+        var _treeDifficulty:TreeViewNode = treeVariation.addNode(
+          {
+            id: 'stv_difficulty_${curVariation}_$difficulty',
+            text: 'D: ${difficulty.toTitleCase()}'
+          });
+      }
+    }
+
+    difficultyToolboxTree.onChange = onTreeChange;
+    refreshTreeSelection();
+  }
+
+  /**
+   * Set the selected item in the tree to the current variation/difficulty.
+   *
+   * @param targetNode The node to select. If null, the current variation/difficulty will be used.
+   */
+  public function refreshTreeSelection():Void
+  {
+    var targetNode = getCurrentTreeNode();
+    if (targetNode != null) difficultyToolboxTree.selectedNode = targetNode;
+  }
+
+  /**
+   * Get the node in the tree representing the current variation/difficulty.
+   */
+  function getCurrentTreeNode():TreeViewNode
+  {
+    return
+      difficultyToolboxTree.findNodeByPath('stv_song/stv_variation_$chartEditorState.selectedVariation/stv_difficulty_${chartEditorState.selectedVariation}_$chartEditorState.selectedDifficulty',
+      'id');
+  }
+
+  /**
+   * Called when an item in the tree is selected. Updates the current variation/difficulty.
+   */
+  function onTreeChange(event:UIEvent):Void
+  {
+    // Get the newly selected node.
+    var treeView:TreeView = cast event.target;
+    var targetNode:TreeViewNode = difficultyToolboxTree.selectedNode;
+
+    if (targetNode == null)
+    {
+      trace('No target node!');
+      // Reset the user's selection.
+      refreshTreeSelection();
+      return;
+    }
+
+    switch (targetNode.data.id.split('_')[1])
+    {
+      case 'difficulty':
+        var variation:String = targetNode.data.id.split('_')[2];
+        var difficulty:String = targetNode.data.id.split('_')[3];
+
+        if (variation != null && difficulty != null)
+        {
+          trace('Changing difficulty to "$variation:$difficulty"');
+          chartEditorState.selectedVariation = variation;
+          chartEditorState.selectedDifficulty = difficulty;
+          chartEditorState.refreshToolbox(ChartEditorState.CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
+          refreshTreeSelection();
+        }
+      // case 'song':
+      // case 'variation':
+      default:
+        // Reset the user's selection.
+        trace('Selected wrong node type, resetting selection.');
+        refreshTreeSelection();
+        chartEditorState.refreshToolbox(ChartEditorState.CHART_EDITOR_TOOLBOX_METADATA_LAYOUT);
+    }
+  }
+
+  public override function refresh():Void
+  {
+    super.refresh();
+
+    refreshTreeSelection();
+  }
+
+  public static function build(chartEditorState:ChartEditorState):ChartEditorDifficultyToolbox
+  {
+    return new ChartEditorDifficultyToolbox(chartEditorState);
+  }
+}