Remove flixel-ui and add a new dropdown to the animation offset editor

Project.xml

@@ -114,11 +114,8 @@ xsi:schemaLocation="http://lime.openfl.org/project/1.0.4 http://lime.openfl.org/
 	<haxelib name="openfl" /> <!-- Game engine backend -->
 	<haxelib name="flixel" /> <!-- Game engine -->
 
-	<haxedev set="webgl" />
-
 	<haxelib name="flixel-addons" /> <!-- Additional utilities for Flixel -->
 	<haxelib name="hscript" /> <!-- Scripting -->
-	<haxelib name="flixel-ui" /> <!-- UI framework (DEPRECATED) -->
 	<haxelib name="haxeui-core" /> <!-- UI framework -->
 	<haxelib name="haxeui-flixel" /> <!-- Integrate HaxeUI with Flixel -->
 	<haxelib name="flixel-text-input" /> <!-- Improved text field rendering for HaxeUI -->

assets

@@ -1 +1 @@
-Subproject commit 005c96f85f4304865acb196e7cc4d6d83f9d76d8
+Subproject commit f3231b1404f733c909f970d639fb11c56a7ca7f0

hmm.json

@@ -23,15 +23,10 @@
     },
     {
       "name": "flixel-text-input",
-      "type": "haxelib",
-      "version": "1.1.0"
-    },
-    {
-      "name": "flixel-ui",
       "type": "git",
       "dir": null,
-      "ref": "d0afed7293c71ffdb1184751317fc709b44c9056",
+      "ref": "951a0103a17bfa55eed86703ce50b4fb0d7590bc",
-      "url": "https://github.com/HaxeFlixel/flixel-ui"
+      "url": "https://github.com/Starmapo/flixel-text-input"
     },
     {
       "name": "flxanimate",

source/funkin/modding/base/ScriptedFlxUIState.hx

@@ -1,8 +0,0 @@
-package funkin.modding.base;
-
-/**
- * A script that can be tied to an FlxUIState.
- * Create a scripted class that extends FlxUIState to use this.
- */
-@:hscriptClass
-class ScriptedFlxUIState extends flixel.addons.ui.FlxUIState implements HScriptedClass {}

source/funkin/ui/debug/anim/DebugBoundingState.hx

@@ -1,9 +1,7 @@
 package funkin.ui.debug.anim;
 
-import flixel.addons.display.FlxGridOverlay;
 import flixel.addons.display.FlxBackdrop;
-import flixel.addons.ui.FlxInputText;
+import flixel.addons.display.FlxGridOverlay;
-import flixel.addons.ui.FlxUIDropDownMenu;
 import flixel.FlxCamera;
 import flixel.FlxSprite;
 import flixel.FlxState;
@@ -26,6 +24,7 @@ import funkin.util.MouseUtil;
 import funkin.util.SerializerUtil;
 import funkin.util.SortUtil;
 import haxe.ui.components.DropDown;
+import haxe.ui.containers.dialogs.CollapsibleDialog;
 import haxe.ui.core.Component;
 import haxe.ui.core.Screen;
 import haxe.ui.events.ItemEvent;
@@ -59,7 +58,7 @@ class DebugBoundingState extends FlxState
   var bg:FlxBackdrop;
   var fileInfo:FlxText;
 
-  var txtGrp:FlxGroup;
+  var txtGrp:FlxTypedGroup<FlxText>;
 
   var hudCam:FlxCamera;
 
@@ -67,40 +66,34 @@ class DebugBoundingState extends FlxState
 
   var spriteSheetView:FlxGroup;
   var offsetView:FlxGroup;
-  var animDropDownMenu:FlxUIDropDownMenu;
   var dropDownSetup:Bool = false;
 
   var onionSkinChar:FlxSprite;
   var txtOffsetShit:FlxText;
 
-  var uiStuff:Component;
+  var offsetEditorDialog:CollapsibleDialog;
+  var offsetAnimationDropdown:DropDown;
 
   var haxeUIFocused(get, default):Bool = false;
 
+  var currentAnimationName(get, never):String;
+
+  function get_currentAnimationName():String
+  {
+    return offsetAnimationDropdown?.value?.id ?? "idle";
+  }
+
   function get_haxeUIFocused():Bool
   {
     // get the screen position, according to the HUD camera, temp default to FlxG.camera juuust in case?
     var hudMousePos:FlxPoint = FlxG.mouse.getScreenPosition(hudCam ?? FlxG.camera);
-    return Screen.instance.hasSolidComponentUnderPoint(hudMousePos.x, hudMousePos.y) || FlxG.mouse.overlaps(animDropDownMenu, hudCam);
+    return Screen.instance.hasSolidComponentUnderPoint(hudMousePos.x, hudMousePos.y);
   }
 
   override function create()
   {
     Paths.setCurrentLevel('week1');
 
-    // lv.
-    // lv.onChange = function(e:UIEvent)
-    // {
-    // 	trace(e.type);
-    // 	// trace(e.data.curView);
-    // 	// var item:haxe.ui.core.ItemRenderer = cast e.target;
-    // 	trace(e.target);
-    // 	// if (e.type == "change")
-    // 	// {
-    // 	// 	curView = cast e.data;
-    // 	// }
-    // };
-
     hudCam = new FlxCamera();
     hudCam.bgColor.alpha = 0;
 
@@ -111,20 +104,25 @@ class DebugBoundingState extends FlxState
     FlxG.cameras.add(hudCam);
 
     var str = Paths.xml('ui/animation-editor/offset-editor-view');
-    uiStuff = RuntimeComponentBuilder.fromAsset(str);
+    offsetEditorDialog = cast RuntimeComponentBuilder.fromAsset(str);
 
-    // uiStuff.findComponent("btnViewSpriteSheet").onClick = _ -> curView = SPRITESHEET;
+    // offsetEditorDialog.findComponent("btnViewSpriteSheet").onClick = _ -> curView = SPRITESHEET;
-    var dropdown:DropDown = cast uiStuff.findComponent("swapper");
+    var viewDropdown:DropDown = offsetEditorDialog.findComponent("swapper", DropDown);
-    dropdown.onChange = function(e:UIEvent) {
+    viewDropdown.onChange = function(e:UIEvent) {
       trace(e.type);
       curView = cast e.data.curView;
       trace(e.data);
       // trace(e.data);
     };
 
-    uiStuff.cameras = [hudCam];
+    offsetAnimationDropdown = offsetEditorDialog.findComponent("animationDropdown", DropDown);
 
-    add(uiStuff);
+    offsetEditorDialog.cameras = [hudCam];
+
+    add(offsetEditorDialog);
+
+    // Anchor to the right side by default
+    // offsetEditorDialog.x = FlxG.width - offsetEditorDialog.width;
 
     // sets the default camera back to FlxG.camera, since we set it to hudCamera for haxeui stuf
     FlxG.cameras.setDefaultDrawTarget(FlxG.camera, true);
@@ -157,7 +155,7 @@ class DebugBoundingState extends FlxState
 
     generateOutlines(tex.frames);
 
-    txtGrp = new FlxGroup();
+    txtGrp = new FlxTypedGroup<FlxText>();
     txtGrp.cameras = [hudCam];
     spriteSheetView.add(txtGrp);
 
@@ -258,15 +256,9 @@ class DebugBoundingState extends FlxState
     txtOffsetShit = new FlxText(20, 20, 0, "", 20);
     txtOffsetShit.setFormat(Paths.font("vcr.ttf"), 26, FlxColor.WHITE, LEFT, FlxTextBorderStyle.OUTLINE, FlxColor.BLACK);
     txtOffsetShit.cameras = [hudCam];
+    txtOffsetShit.y = FlxG.height - 20 - txtOffsetShit.height;
     offsetView.add(txtOffsetShit);
 
-    animDropDownMenu = new FlxUIDropDownMenu(0, 0, FlxUIDropDownMenu.makeStrIdLabelArray(['weed'], true));
-    animDropDownMenu.cameras = [hudCam];
-    // Move to bottom right corner
-    animDropDownMenu.x = FlxG.width - animDropDownMenu.width - 20;
-    animDropDownMenu.y = FlxG.height - animDropDownMenu.height - 20;
-    offsetView.add(animDropDownMenu);
-
     var characters:Array<String> = CharacterDataParser.listCharacterIds();
     characters = characters.filter(function(charId:String) {
       var char = CharacterDataParser.fetchCharacterData(charId);
@@ -274,7 +266,7 @@ class DebugBoundingState extends FlxState
     });
     characters.sort(SortUtil.alphabetically);
 
-    var charDropdown:DropDown = cast uiStuff.findComponent('characterDropdown');
+    var charDropdown:DropDown = offsetEditorDialog.findComponent('characterDropdown', DropDown);
     for (char in characters)
     {
       charDropdown.dataSource.add({text: char});
@@ -305,9 +297,10 @@ class DebugBoundingState extends FlxState
       {
         swagChar.animOffsets = [(FlxG.mouse.x - mouseOffset.x) * -1, (FlxG.mouse.y - mouseOffset.y) * -1];
 
-        swagChar.animationOffsets.set(animDropDownMenu.selectedLabel, swagChar.animOffsets);
+        swagChar.animationOffsets.set(offsetAnimationDropdown.value.id, swagChar.animOffsets);
 
         txtOffsetShit.text = 'Offset: ' + swagChar.animOffsets;
+        txtOffsetShit.y = FlxG.height - 20 - txtOffsetShit.height;
       }
 
       if (FlxG.mouse.justReleased)
@@ -319,9 +312,14 @@ class DebugBoundingState extends FlxState
 
   function addInfo(str:String, value:Dynamic)
   {
-    var swagText:FlxText = new FlxText(10, 10 + (28 * txtGrp.length));
+    var swagText:FlxText = new FlxText(10, FlxG.height - 32);
     swagText.setFormat(Paths.font("vcr.ttf"), 26, FlxColor.WHITE, LEFT, FlxTextBorderStyle.OUTLINE, FlxColor.BLACK);
     swagText.scrollFactor.set();
+
+    for (text in txtGrp.members)
+    {
+      text.y -= swagText.height;
+    }
     txtGrp.add(swagText);
 
     swagText.text = str + ": " + Std.string(value);
@@ -352,14 +350,14 @@ class DebugBoundingState extends FlxState
   {
     if (FlxG.keys.justPressed.ONE)
     {
-      var lv:DropDown = cast uiStuff.findComponent("swapper");
+      var lv:DropDown = offsetEditorDialog.findComponent("swapper", DropDown);
       lv.selectedIndex = 0;
       curView = SPRITESHEET;
     }
 
     if (FlxG.keys.justReleased.TWO)
     {
-      var lv:DropDown = cast uiStuff.findComponent("swapper");
+      var lv:DropDown = offsetEditorDialog.findComponent("swapper", DropDown);
       lv.selectedIndex = 1;
       curView = ANIMATIONS;
       if (swagChar != null)
@@ -375,10 +373,12 @@ class DebugBoundingState extends FlxState
         spriteSheetView.visible = true;
         offsetView.visible = false;
         offsetView.active = false;
+        offsetAnimationDropdown.visible = false;
       case ANIMATIONS:
         spriteSheetView.visible = false;
         offsetView.visible = true;
         offsetView.active = true;
+        offsetAnimationDropdown.visible = true;
         offsetControls();
         mouseOffsetMovement();
     }
@@ -402,24 +402,36 @@ class DebugBoundingState extends FlxState
   {
     if (FlxG.keys.justPressed.RBRACKET || FlxG.keys.justPressed.E)
     {
-      if (Std.parseInt(animDropDownMenu.selectedId) + 1 <= animDropDownMenu.length)
+      if (offsetAnimationDropdown.selectedIndex + 1 <= offsetAnimationDropdown.dataSource.size)
-        animDropDownMenu.selectedId = Std.string(Std.parseInt(animDropDownMenu.selectedId)
+      {
-        + 1);
+        offsetAnimationDropdown.selectedIndex += 1;
+      }
       else
-        animDropDownMenu.selectedId = Std.string(0);
+      {
-      playCharacterAnimation(animDropDownMenu.selectedId, true);
+        offsetAnimationDropdown.selectedIndex = 0;
+      }
+      trace(offsetAnimationDropdown.selectedIndex);
+      trace(offsetAnimationDropdown.dataSource.size);
+      trace(offsetAnimationDropdown.value);
+      trace(currentAnimationName);
+      playCharacterAnimation(currentAnimationName, true);
     }
     if (FlxG.keys.justPressed.LBRACKET || FlxG.keys.justPressed.Q)
     {
-      if (Std.parseInt(animDropDownMenu.selectedId) - 1 >= 0) animDropDownMenu.selectedId = Std.string(Std.parseInt(animDropDownMenu.selectedId) - 1);
+      if (offsetAnimationDropdown.selectedIndex - 1 >= 0)
+      {
+        offsetAnimationDropdown.selectedIndex -= 1;
+      }
       else
-        animDropDownMenu.selectedId = Std.string(animDropDownMenu.length - 1);
+      {
-      playCharacterAnimation(animDropDownMenu.selectedId, true);
+        offsetAnimationDropdown.selectedIndex = offsetAnimationDropdown.dataSource.size - 1;
+      }
+      playCharacterAnimation(currentAnimationName, true);
     }
 
     // Keyboards controls for general WASD "movement"
-    // modifies the animDropDownMenu so that it's properly updated and shit
+    // modifies the animDrooffsetAnimationDropdownpDownMenu so that it's properly updated and shit
-    // and then it's just played and updated from the animDropDownMenu callback, which is set in the loadAnimShit() function probabbly
+    // and then it's just played and updated from the offsetAnimationDropdown callback, which is set in the loadAnimShit() function probabbly
     if (FlxG.keys.justPressed.W || FlxG.keys.justPressed.S || FlxG.keys.justPressed.D || FlxG.keys.justPressed.A)
     {
       var suffix:String = '';
@@ -432,18 +444,19 @@ class DebugBoundingState extends FlxState
       if (FlxG.keys.justPressed.A) targetLabel = 'singLEFT$suffix';
       if (FlxG.keys.justPressed.D) targetLabel = 'singRIGHT$suffix';
 
-      if (targetLabel != animDropDownMenu.selectedLabel)
+      if (targetLabel != currentAnimationName)
       {
+        offsetAnimationDropdown.value = {id: targetLabel, text: targetLabel};
+
         // Play the new animation if the IDs are the different.
         // Override the onion skin.
-        animDropDownMenu.selectedLabel = targetLabel;
+        playCharacterAnimation(currentAnimationName, true);
-        playCharacterAnimation(animDropDownMenu.selectedId, true);
       }
       else
       {
         // Replay the current animation if the IDs are the same.
         // Don't override the onion skin.
-        playCharacterAnimation(animDropDownMenu.selectedId, false);
+        playCharacterAnimation(currentAnimationName, false);
       }
     }
 
@@ -455,16 +468,20 @@ class DebugBoundingState extends FlxState
     // Plays the idle animation
     if (FlxG.keys.justPressed.SPACE)
     {
-      animDropDownMenu.selectedLabel = 'idle';
+      offsetAnimationDropdown.value = {id: 'idle', text: 'idle'};
-      playCharacterAnimation(animDropDownMenu.selectedId, true);
+
+      playCharacterAnimation(currentAnimationName, true);
     }
 
     // Playback the animation
-    if (FlxG.keys.justPressed.ENTER) playCharacterAnimation(animDropDownMenu.selectedId, false);
+    if (FlxG.keys.justPressed.ENTER)
+    {
+      playCharacterAnimation(currentAnimationName, false);
+    }
 
     if (FlxG.keys.justPressed.RIGHT || FlxG.keys.justPressed.LEFT || FlxG.keys.justPressed.UP || FlxG.keys.justPressed.DOWN)
     {
-      var animName = animDropDownMenu.selectedLabel;
+      var animName = currentAnimationName;
       var coolValues:Array<Float> = swagChar.animationOffsets.get(animName).copy();
 
       var multiplier:Int = 5;
@@ -478,10 +495,11 @@ class DebugBoundingState extends FlxState
       else if (FlxG.keys.justPressed.UP) coolValues[1] += 1 * multiplier;
       else if (FlxG.keys.justPressed.DOWN) coolValues[1] -= 1 * multiplier;
 
-      swagChar.animationOffsets.set(animDropDownMenu.selectedLabel, coolValues);
+      swagChar.animationOffsets.set(currentAnimationName, coolValues);
       swagChar.playAnimation(animName);
 
       txtOffsetShit.text = 'Offset: ' + coolValues;
+      txtOffsetShit.y = FlxG.height - 20 - txtOffsetShit.height;
 
       trace(animName);
     }
@@ -536,7 +554,7 @@ class DebugBoundingState extends FlxState
     swagChar = CharacterDataParser.fetchCharacter(char);
     swagChar.x = 100;
     swagChar.y = 100;
-    // swagChar.debugMode = true;
+    swagChar.debug = true;
     offsetView.add(swagChar);
 
     if (swagChar == null || swagChar.frames == null)
@@ -561,11 +579,25 @@ class DebugBoundingState extends FlxState
       trace(swagChar.animationOffsets[i]);
     }
 
-    animDropDownMenu.setData(FlxUIDropDownMenu.makeStrIdLabelArray(characterAnimNames, true));
+    offsetAnimationDropdown.dataSource.clear();
-    animDropDownMenu.callback = function(str:String) {
+
-      playCharacterAnimation(str, true);
+    for (charAnim in characterAnimNames)
-    };
+    {
+      trace('Adding ${charAnim} to HaxeUI dropdown');
+      offsetAnimationDropdown.dataSource.add({id: charAnim, text: charAnim});
+    }
+
+    offsetAnimationDropdown.selectedIndex = 0;
+
+    trace('Added ${offsetAnimationDropdown.dataSource.size} to HaxeUI dropdown');
+
+    offsetAnimationDropdown.onChange = function(event:UIEvent) {
+      trace('Selected animation ${event?.data?.id}');
+      playCharacterAnimation(event.data.id, true);
+    }
+
     txtOffsetShit.text = 'Offset: ' + swagChar.animOffsets;
+    txtOffsetShit.y = FlxG.height - 20 - txtOffsetShit.height;
     dropDownSetup = true;
   }
 
@@ -582,11 +614,13 @@ class DebugBoundingState extends FlxState
       onionSkinChar.alpha = 0.6;
     }
 
-    var animName = characterAnimNames[Std.parseInt(str)];
+    // var animName = characterAnimNames[Std.parseInt(str)];
+    var animName = str;
     swagChar.playAnimation(animName, true); // trace();
     trace(swagChar.animationOffsets.get(animName));
 
     txtOffsetShit.text = 'Offset: ' + swagChar.animOffsets;
+    txtOffsetShit.y = FlxG.height - 20 - txtOffsetShit.height;
   }
 
   var _file:FileReference;

source/funkin/ui/freeplay/FreeplayState.hx

@@ -1,7 +1,6 @@
 package funkin.ui.freeplay;
 
 import flixel.addons.transition.FlxTransitionableState;
-import flixel.addons.ui.FlxInputText;
 import flixel.FlxCamera;
 import flixel.FlxSprite;
 import flixel.group.FlxGroup;