scrollbar

source/funkin/editors/charter/Charter.hx

@@ -40,6 +40,8 @@ class Charter extends UIState {
 
 	public var topMenu:Array<UIContextMenuOption>;
 
+	public var scrollBar:UIScrollBar;
+
 	public var topMenuSpr:UITopMenu;
 	public var gridBackdrop:CharterBackdrop;
 	public var beatSeparator:FlxBackdrop;
@@ -332,10 +334,12 @@ class Charter extends UIState {
 
 		conductorFollowerSpr.cameras = selectionBox.cameras = notesGroup.cameras = gridBackdrop.cameras = [charterCamera];
 
-
 		topMenuSpr = new UITopMenu(topMenu);
 		topMenuSpr.cameras = uiGroup.cameras = [uiCamera];
 
+		scrollBar = new UIScrollBar(FlxG.width - 20, topMenuSpr.bHeight, 1000, 0, 100);
+		uiGroup.add(scrollBar);
+
 		topLimit = new FlxSprite();
 		topLimit.makeGraphic(1, 1, -1);
 		topLimit.color = 0xFF888888;
@@ -389,6 +393,13 @@ class Charter extends UIState {
 
 			strumLines.add(new CharterStrumline(strL));
 		}
+
+		refreshBPMSensitive();
+	}
+
+	public function refreshBPMSensitive() {
+		// refreshes everything dependant on BPM, and BPM changes
+		scrollBar.length = Conductor.getStepForTime(FlxG.sound.music.getDefault(vocals).length);
 	}
 
 	public override function beatHit(curBeat:Int) {
@@ -593,6 +604,9 @@ class Charter extends UIState {
 
 		super.update(elapsed);
 
+		scrollBar.size = (FlxG.height / 40 / charterCamera.zoom);
+		scrollBar.start = Conductor.curStepFloat - (scrollBar.size / 2);
+
 		if (gridBackdrop.strumlinesAmount != (gridBackdrop.strumlinesAmount = strumLines.length))
 			updateDisplaySprites();
 

source/funkin/editors/ui/UIScrollBar.hx

@@ -0,0 +1,43 @@
+package funkin.editors.ui;
+
+class UIScrollBar extends UISprite {
+	public var length:Float;
+	public var start:Float;
+	public var size:Float;
+
+	public var thumb:UISliceSprite;
+
+	public var value:Float;
+
+	public var onChange:Float->Void;
+
+	public function new(x:Float, y:Float, length:Float, start:Float, size:Float, w:Int = 20, ?h:Int) {
+		super(x, y, Paths.image("editors/ui/scrollbar-bg"));
+		scale.y = h.getDefault(Std.int(FlxG.height - y));
+		updateHitbox();
+		this.start = start;
+		this.size = size;
+		this.length = length;
+
+		thumb = new UISliceSprite(0, 0, w, h, 'editors/ui/scrollbar');
+		members.push(thumb);
+	}
+
+	public override function update(elapsed:Float) {
+		super.update(elapsed);
+		thumb.follow(this, 0, FlxMath.remapToRange(start, -(size/2), length + size, 0, height));
+		thumb.bHeight = Std.int(FlxMath.remapToRange(size, -(size/2), length + size, 0, height));
+
+		if (hovered) {
+			if (FlxG.mouse.justReleased) {
+				var mousePos = FlxG.mouse.getScreenPosition(camera);
+				var yPos = FlxMath.remapToRange(mousePos.y, y, y+height, -(size/2), length + size);
+				if (yPos >= 0 && yPos < length) {
+					onChange(value = yPos);
+				}
+			}
+		} else if (thumb.hovered) {
+			// todo: scrolling
+		}
+	}
+}