Screen_Visuals.pde

//Page Constants 
int homePage = 0;
int demosPage = 1;
int libraryPage = 2;
int FAQPage = 3;
int demoVisualPage = 4;
int composePage = 5;
int featuresPage = 6;
int currentScreen = homePage;
int visualReturnScreen = demosPage;

//NaviBar x,y vaues for labels(avoids hardcoding)
int headerX = 315;
int headerY = 35;

int toolbarH = 90;

//Music Editing Page
int marginX = 80;
int notationStartX = 260;
int startY = 140;
int staffSpacing = 12;
int systemGap = 125;
int numberOfSystems = 4;
int measuresPerSystem = 3;

//Global Colours
color bgColor = color(8, 6, 15);
color staffColor = color(190, 140, 255);
color accentPurple = color(140, 70, 255);
color textColor = color(230, 220, 255);

//Displaying current page based on current screen and what page user selects
void drawScreen(){
  if (userPiece != null && currentScreen != composePage && currentScreen != demoVisualPage){
    userPiece.stopPlayback();
  }

  if (currentScreen == homePage){
    drawHome();

  } else if (currentScreen == demosPage){
    drawDemos();

  } else if (currentScreen == libraryPage){
    drawLibrary();

  } else if (currentScreen == FAQPage){
    drawFeatureScrollImage();

  } else if (currentScreen == demoVisualPage){
    drawDemoVisual();

  } else if (currentScreen == composePage){
    drawCompose();

  } else if (currentScreen == featuresPage){
    drawFeatureScrollImage();
  } 
}

//HOMEPAGE
void drawHome(){
  background(0);
  drawArt(); //Draws background art design
  textSize(100);
  fill(255);
  textAlign(LEFT);
  text("NoteFlow", 40,240); //Draws title
  
  fill(119, 61, 255); //Colour of navbar
  rect(-10,-10,1010,80); //Draw navbar
  
  fill(255);
  textSize(45);
  
  text("Compose without limits.", 500,350); //Draws slogan
  
  noStroke();
  fill(255,25);
  stroke(255,120);
  strokeWeight(2);

  //rect(10,0,70,70,15);
  //rect(160,0,130,70,15);
  //rect(290,0,170,70,15);
  //rect(460,0,170,70,15);
  //rect(630,0,300,7,15);
  
  //Logo
  noStroke();
  fill(255);
  rect(20,40,30,20);
  triangle(10,40, 35,10, 60,40);

  stroke(5);
  fill(0);
  line(15,33, 35,10);
  line(15,43, 35,20);
  line(15,33, 15,55);
  line(35,10, 35,50);
  ellipse(30,50, 10,5);
  ellipse(10,55, 10,5);

  strokeWeight(2);
  textSize(25);
  fill(255);

  naviBarText(); 
}



//TAB 2
void drawDemos(){
  background(0);

  fill(119, 61, 255);
  rect(-10,-10,1010,80);

  noStroke();
  fill(255,25);
  stroke(255,120);
  strokeWeight(2);

  noStroke();
  fill(255);
  rect(20,40,30,20);
  triangle(10,40, 35,10, 60,40);

  stroke(5);
  fill(0);
  line(15,33, 35,10);
  line(15,43, 35,20);
  line(15,33, 15,55);
  line(35,10, 35,50);
  ellipse(30,50, 10,5);
  ellipse(10,55, 10,5);

  strokeWeight(2);
  textSize(25);
  fill(255);

  textAlign(LEFT);
  naviBarText();

  textAlign(CENTER);
  textSize(35);
  text("Try out our default demo's to get accustomed to our software!", width/2, 200);

  String[] demoNames = {"Demo 1", "Demo 2", "Demo 3"};
  for(int i = 0; i < 3; i++){             //Loops through ecah demo caard
    fill(255);                            //Sets demo card colour to white
    rect(120 + i*290, 320, 200, 150, 25); 
  
    fill(0);                              //Sets text to black
    textSize(30);
    text(demoNames[i], 220 + i*290, 405); //Draws the demo name inside the card
  }
}

//TAB 3
void drawLibrary(){
  background(0);
  
  //Resets the scrollbar if the library does not need scrolling
  float maxScroll = libraryMaxScroll();
  if (maxScroll <= 0 && libraryScrollbar != null){
    libraryScrollbar.sliderY = libraryScrollbar.y;
  }
  
  float scrollAmount = libraryScrollAmount();
  
  //Draws only the visible saved project rows inside the scrollable library area
  clip(0, libraryRowY, width, height-libraryRowY);
  textAlign(CENTER, CENTER);

  for(int i=0;i<savedProjects.size();i++){
    float y = libraryRowY + i*libraryRowGap - scrollAmount;
    if (y + libraryRowH < libraryRowY || y > height){
      continue;
    }

    String projectName = savedProjects.get(i);
    fill(255);
    noStroke();
    rect(libraryRowX, y, libraryRowW, libraryRowH, 20);
    
    //Draws the delete button for each project row
    float deleteX = libraryRowX + libraryRowW - 32;
    float deleteY = y + libraryRowH/2;

    fill(190, 40, 60);
    noStroke();
    ellipse(deleteX, deleteY, libraryDeleteRadius*2, libraryDeleteRadius*2);

    stroke(255);
    strokeWeight(3);
    line(deleteX-6, deleteY-6, deleteX+6, deleteY+6);
    line(deleteX+6, deleteY-6, deleteX-6, deleteY+6);

    fill(0);
    noStroke();
    textSize(30);
    text(projectName, libraryRowX + libraryRowW/2 - 20, y + libraryRowH/2);
  }
  noClip();
  //Updates and displays the library scrollbar
  if (libraryScrollbar != null){
    libraryScrollbar.update();
    libraryScrollbar.display();
  }
  //Draws the Add Project button
  fill(255);
  noStroke();
  rect(libraryAddX, libraryAddY, libraryAddW, libraryAddH, 15);

  stroke(0);
  strokeWeight(4);
  line(libraryAddX+28, libraryAddY+14, libraryAddX+28, libraryAddY+31);
  line(libraryAddX+19, libraryAddY+22, libraryAddX+37, libraryAddY+22);

  fill(0);
  noStroke();
  textSize(24);
  text("Add Project", libraryAddX+125, libraryAddY+23);

  drawNavbarOnTop();
  //Shows a confirmation popup before deleting a project
  if (showDeleteConfirm){
    drawDeleteConfirmPopup();
  }
}
void drawFAQ(){
  background(0);
  fill(0);
  noStroke();
  
}
void drawCompose(){
  background(bgColor);

  //Title
  fill(textColor);
  textAlign(CENTER);
  textSize(32);
  String title = "Piano Music Sheet";
  if (userPiece != null){
    title = userPiece.title;
  }
  text(title, width / 2, 55);
  
  //Displays the editor mode/status text under the title
  textSize(16);
  fill(170, 130, 230);
  text(editorDisplayText(), width / 2, 82);
  
  //Draws the back button with the NoteFlow logo
  noStroke();
  fill(255, 25);
  rect(8, 16, 64, 52, 8);
  fill(108,59,170);
  rect(20,40,30,20);
  triangle(10,40, 35,10, 60,40);
  stroke(5);
  line(15,33, 35,10);
  line(15,43, 35,20);
  line(15,33, 15,55);
  line(35,10, 35,50);
  ellipse(30,50, 10,5);
  ellipse(10,55, 10,5);

  fill(255);
  textAlign(LEFT, CENTER);
  textSize(14);
  text("Back", 78, 42);
  
  //Draws the music sheet, user notes, and toolbar
  drawExistingMeasureStaves();
  drawUserPiece();
  drawToolbarLabels();

  if (showSavePopup) {
    drawSavePopup();
  }
}

void drawDemoVisual(){
  background(0);

  fill(119, 61, 255);
  rect(-10,-10,1010,80);
  
  //Draws the NoteFlow logo
  noStroke();
  fill(255);
  rect(20,40,30,20);
  triangle(10,40, 35,10, 60,40);

  stroke(5);
  fill(0);
  line(15,33, 35,10);
  line(15,43, 35,20);
  line(15,33, 15,55);
  line(35,10, 35,50);
  ellipse(30,50, 10,5);
  ellipse(10,55, 10,5);

  strokeWeight(2);
  textSize(25);
  fill(255);
  textAlign(LEFT);
  naviBarText();

  textAlign(CENTER);
  textSize(38);
  text(demoEqualizer.displayTitle(), width/2, 145);

  if (demoEqualizer.draw()){
    currentScreen = visualReturnScreen;
    updateGUIVisibility();
  }
}

void naviBarText() {
  textSize(25);
  textAlign(LEFT);
  
  //Draws each navigation label and highlights it when hovered
  for (int i = 0; i < navLabels.length; i++) {
    if (isNavHovered(i)) {
      noFill();
      stroke(255);
      strokeWeight(2);
      rect(navX[i] - navPad, navY - 22, navW[i] + navPad*2, navBoxH, 6);
    }
    fill(255);
    noStroke();
    text(navLabels[i], navX[i], navY);
  }
}

void drawExistingMeasureStaves(){
  //Only draw the measures that actually exist in userPiece
  if (userPiece == null){
    return;
  }

  int totalMeasures = min(userPiece.measureCount(), numberOfSystems * measuresPerSystem);

  for (int system=0;system<numberOfSystems;system++){
    int firstMeasure = system * measuresPerSystem;
    int measuresThisSystem = min(measuresPerSystem, totalMeasures - firstMeasure);

    if (measuresThisSystem <= 0){
      continue;
    }

    int y = startY + system * systemGap;

    drawStaffLines(y, measuresThisSystem);

    drawClefKeyAndTimeSig(y);

    drawMeasureLines(y, measuresThisSystem);
  }
}

void drawStaffLines(int y, int measureCount) {
  stroke(staffColor); //Sets Staff line colors
  strokeWeight(2);    //Sets staff line thickness
  float endX = notationStartX + measureWidth() * measureCount; //Calculates where staff should end
  
  //Draws the 5 horizontal lines of music staff
  for (int i = 0; i < 5; i++) {
    line(marginX,y + i * staffSpacing,endX,y + i * staffSpacing);
  }
}

void drawMeasureLines(int y, int numberOfMeasures) {
  stroke(accentPurple);
  strokeWeight(2);

  //Draws the vertical measure lines that divide the staff into measures
  for (int i = 0; i <= numberOfMeasures; i++) {
    float x = notationStartX + i * measureWidth();

    line(x, y, x, y + staffSpacing * 4);
  }
}

//Simple treble clef marker for now
//Also draws the time sig
void drawClefKeyAndTimeSig(int systemY){
  if (userPiece == null){ //Stops the function if there is no song loaded
    return;
  }
  
  //Sets the x-positions for the clef, key signature, and time signature
  float clefX = marginX + 24;
  float keyX = marginX + 58;
  float timeX = notationStartX - 30;

  fill(255, 220);
  stroke(255, 180);
  strokeWeight(2);
  textAlign(CENTER, CENTER);
  textSize(42);
  text("G", clefX, systemY + staffSpacing * 2);
  line(clefX + 11, systemY - staffSpacing, clefX + 11, systemY + staffSpacing * 5);

  drawKeySignatureAccidentals(systemY, userPiece.keySig, keyX);
  drawTimeSignature(systemY, userPiece.timeSig, timeX);
}

void drawKeySignatureAccidentals(int systemY, KeySignature keySig, float x){
  if (keySig == null || keySig.accidentalCount == 0){ //Skips drawing if there is no key signature or no accidentals
    return;
  }

  int[] sharpNotes = {77, 72, 79, 74, 69, 76, 71};
  int[] flatNotes = {71, 76, 69, 74, 67, 72, 65};
  int[] notes = keySig.sharp ? sharpNotes : flatNotes;
  String symbol = keySig.sharp ? "#" : "b";

  fill(255, 220);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(22);

  int count = constrain(keySig.accidentalCount, 0, notes.length);
  
  //Draws each sharp or flat symbol on the correct staff line/space
  for (int i=0;i<count;i++){
    float y = noteY(notes[i], systemY, 64);
    text(symbol, x + i * 12, y);
  }
}

void drawTimeSignature(int systemY, TimeSignature timeSig, float x){
  if (timeSig == null){
    return;
  }

  fill(255, 230);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(25);
  text(timeSig.upper, x, systemY + staffSpacing * 1.1);
  text(timeSig.lower, x, systemY + staffSpacing * 3.0);
}


void drawSavePopup() {

  fill(0, 180);
  rect(0, 0, width, height);

  fill(40);
  stroke(255);
  strokeWeight(3);

  rect(width/2 - 220, height/2 - 140, 440, 240, 20);

  fill(255);

  textAlign(CENTER);
  textSize(28);

  text("Enter a name for your project:", width/2, height/2 - 80);

  fill(255, 230, 90);
  textAlign(LEFT, CENTER);
  textSize(18);
  text("Confirm Save", 385, 374);
}

void drawDeleteConfirmPopup(){
  float panelX = width/2 - 220;
  float panelY = height/2 - 110;
  float cancelX = panelX + 70;
  float buttonY = panelY + 145;
  float deleteX = panelX + 245;
  float buttonW = 125;
  float buttonH = 38;

  fill(0, 180);
  noStroke();
  rect(0, 0, width, height);

  fill(40);
  stroke(255);
  strokeWeight(3);
  rect(panelX, panelY, 440, 220, 20);

  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(28);
  text("Delete project?", width/2, panelY + 52);

  textSize(18);
  text(pendingDeleteProject, width/2, panelY + 92);

  fill(255);
  stroke(255);
  strokeWeight(2);
  rect(cancelX, buttonY, buttonW, buttonH, 12);

  fill(190, 40, 60);
  stroke(255);
  rect(deleteX, buttonY, buttonW, buttonH, 12);

  fill(0);
  noStroke();
  textSize(18);
  text("Cancel", cancelX + buttonW/2, buttonY + buttonH/2);

  fill(255);
  text("Delete", deleteX + buttonW/2, buttonY + buttonH/2);
}

void drawToolbarLabels(){
  fill(textColor);
  noStroke();
  textAlign(RIGHT, CENTER);
  textSize(14);
  text("Tempo", xInitialValueButtons - 10, yInitialValueButtons + 20);
  text("Volume", xInitialValueButtons - 10, yInitialValueButtons + 65);
}

String editorDisplayText(){
  if (editManager == null){
    return "";
  }

  String mode = editManager.placeMode ? "Place" : "Select";
  String item = editManager.placingRest ? "Rest" : "Note";
  String instrumentName = "";

  if (userPiece != null && userPiece.instruments.size() > editManager.activeTrack){
    instrumentName = " | " + userPiece.instruments.get(editManager.activeTrack).name;
  }

  return mode + " " + item + " | Track " + (editManager.activeTrack+1) + instrumentName + " | Duration " + selectedDuration + " | " + editManager.statusText;
}

void drawUserPiece(){
  //Draw the active track from the actual MusicalPiece data
  if (userPiece == null || userPiece.tracks.size() == 0){
    return;
  }

  editManager.keepTrackInRange();

  ArrayList<Measure> track = userPiece.tracks.get(editManager.activeTrack);
  int visibleMeasures = min(track.size(), numberOfSystems * measuresPerSystem);

  for (int m=0;m<visibleMeasures;m++){
    Measure measure = track.get(m);
    float currentBeat = 0;

    for (int e=0;e<measure.events.size();e++){
      MusicEvent event = measure.events.get(e);
      float x = eventX(m, currentBeat, event.duration);
      boolean selected = editManager.selectedMeasure == m && editManager.selectedEvent == e;

      if (event instanceof Note){
        drawSavedNote((Note) event, x, measureSystemY(m), selected);
      }else{
        drawSavedRest(event.duration, x, measureSystemY(m), selected);
      }

      currentBeat += event.duration;
    }
  }
}

void drawSavedNote(Note note, float x, int systemY, boolean selected){
  int drawMidi = constrain(note.midiNote, minEditorMidi, maxEditorMidi);
  int staffTop = systemY;
  int anchorMidi = 64; //E4, bottom line

  float y = noteY(drawMidi, staffTop, anchorMidi);

  drawLedgerLines(drawMidi, x, staffTop, anchorMidi);

  stroke(255);
  strokeWeight(2);

  float headW = 18;
  float headH = 12;

  if (note.duration <= 0.25 + MUSIC_EPSILON){
    headW = 7;
    headH = 5;
  }else if (note.duration <= 0.5 + MUSIC_EPSILON){
    headW = 11;
    headH = 7;
  }

  if (note.duration <= 1.0 + MUSIC_EPSILON){
    fill(255);
  }else{
    noFill();
  }

  ellipse(x, y, headW, headH);

  if (note.duration < 4.0 - MUSIC_EPSILON){
    drawStemAndFlags(note, x, y, headW);
  }

  drawNoteAccidental(note, x, y, note.duration);

  if (selected){
    drawEventHighlight(x, y, note.duration);
  }
}

//Draws accidentals. Natural is shown as n so it stays easy to read.
void drawNoteAccidental(Note note, float x, float y, float duration){
  if (!note.hasAccidental){
    return;
  }

  String symbol = "n";
  if (note.accidentalModifier > 0){
    symbol = "#";
  }else if (note.accidentalModifier < 0){
    symbol = "b";
  }

  float accidentalX = x - 22;
  float accidentalSize = 20;
  if (duration <= 0.25 + MUSIC_EPSILON){
    accidentalX = x - 8;
    accidentalSize = 9;
  }else if (duration <= 0.5 + MUSIC_EPSILON){
    accidentalX = x - 13;
    accidentalSize = 12;
  }

  fill(255, 220);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(accidentalSize);
  text(symbol, accidentalX, y);
}

void drawStemAndFlags(Note note, float x, float y, float headW){
  boolean stemUp = note.midiNote < 71; //B4, middle line

  float stemLength = 38;
  float flagLength = 16;
  float flagDrop = 9;
  float flagGap = 8;

  if (note.duration <= 0.25 + MUSIC_EPSILON){
    stemLength = 20;
    flagLength = 4;
    flagDrop = 3;
    flagGap = 4;
  }else if (note.duration <= 0.5 + MUSIC_EPSILON){
    stemLength = 28;
    flagLength = 8;
    flagDrop = 5;
    flagGap = 6;
  }

  float stemX = x - headW/2.0 + 1;
  float stemEnd = y + stemLength;

  if (stemUp){
    stemX = x + headW/2.0 - 1;
    stemEnd = y - stemLength;
  }

  line(stemX, y, stemX, stemEnd);

  int flags = 0;
  if (note.duration <= 0.25 + MUSIC_EPSILON){
    flags = 2;
  }else if (note.duration <= 0.5 + MUSIC_EPSILON){
    flags = 1;
  }

  for (int i=0;i<flags;i++){
    float flagY = stemEnd + i * flagGap;

    if (stemUp){
      line(stemX, flagY, stemX + flagLength, flagY + flagDrop);
    }else{
      flagY = stemEnd - i * flagGap;
      line(stemX, flagY, stemX - flagLength, flagY - flagDrop);
    }
  }
}

//Draws the main rest shapes for the editor
void drawSavedRest(float duration, float x, int systemY, boolean selected){
  float y = systemY + staffSpacing * 2;

  stroke(255, 190);
  strokeWeight(2);
  fill(255, 190);

  if (duration >= 4.0 - MUSIC_EPSILON){
    float fourthLine = systemY + staffSpacing * 3;
    rect(x - 9, fourthLine, 18, 6);
  }else if (duration >= 2.0 - MUSIC_EPSILON){
    float middleLine = systemY + staffSpacing * 2;
    rect(x - 9, middleLine - 6, 18, 6);
  }else{
    if (duration <= 0.25 + MUSIC_EPSILON){
      noFill();
      line(x - 2, y - 16, x + 2, y + 12);
      fill(255, 190);
      ellipse(x + 3, y - 12, 3.5, 3.5);
      ellipse(x + 3, y - 3, 3.5, 3.5);
    }else if (duration <= 0.5 + MUSIC_EPSILON){
      noFill();
      line(x - 2, y - 14, x + 2, y + 11);
      fill(255, 190);
      ellipse(x + 3, y - 12, 4, 4);
    }else{
      noFill();
      line(x - 5, y - 18, x + 5, y - 8);
      line(x + 5, y - 8, x - 5, y + 2);
      line(x - 5, y + 2, x + 5, y + 14);
    }
  }

  if (selected){
    drawEventHighlight(x, y, duration);
  }
}

void drawEventHighlight(float x, float y, float duration){
  float w = 36;
  float h = 36;
  if (duration <= 0.25 + MUSIC_EPSILON){
    w = 14;
    h = 24;
  }else if (duration <= 0.5 + MUSIC_EPSILON){
    w = 24;
    h = 30;
  }

  noFill();
  stroke(255, 230, 80);
  strokeWeight(2);
  rect(x - w/2, y - h/2, w, h, 6);
}

void drawLedgerLines(int midiNote, float x, int staffTop, int anchorMidi){
  //Notes outside the staff need small extra staff lines
  int bottomStep = diatonicIndexFromMidi(anchorMidi);
  int noteStep = diatonicIndexFromMidi(midiNote);
  int diff = noteStep - bottomStep;
  float bottomY = staffTop + staffSpacing * 4;
  float stepY = staffSpacing / 2.0;

  stroke(255, 190);
  strokeWeight(2);

  if (diff < 0){
    for (int s=-2;s>=diff;s-=2){
      float y = bottomY - s * stepY;
      line(x - 14, y, x + 14, y);
    }
  }else if (diff > 8){
    for (int s=10;s<=diff;s+=2){
      float y = bottomY - s * stepY;
      line(x - 14, y, x + 14, y);
    }
  }
}

float noteY(int midiNote, int staffTop, int anchorMidi){
  int bottomStep = diatonicIndexFromMidi(anchorMidi);
  int noteStep = diatonicIndexFromMidi(midiNote);
  int diff = noteStep - bottomStep;

  return staffTop + staffSpacing * 4 - diff * (staffSpacing / 2.0);
}

int diatonicIndexFromMidi(int midiNote){
  int[] pitchClassSteps = {0, 0, 1, 1, 2, 3, 3, 4, 4, 5, 5, 6};
  int pitchClass = midiNote % 12;

  if (pitchClass < 0){
    pitchClass += 12;
  }

  int octave = midiNote / 12 - 1;
  return octave * 7 + pitchClassSteps[pitchClass];
}

int midiFromDiatonicIndex(int index){
  int[] naturalPitches = {0, 2, 4, 5, 7, 9, 11};
  int octave = int(floor(index / 7.0));
  int degree = index - octave * 7;

  return (octave + 1) * 12 + naturalPitches[degree];
}

float measureWidth(){
  return (width - notationStartX - marginX) / float(measuresPerSystem);
}

float measureStartX(int measureID){
  int slot = measureID % measuresPerSystem;
  return notationStartX + slot * measureWidth();
}

int measureSystemY(int measureID){
  int system = measureID / measuresPerSystem;
  return startY + system * systemGap;
}

float eventX(int measureID, float beat, float duration){
  float pad = 12;
  if (duration <= 0.25 + MUSIC_EPSILON){
    pad = 4;
  }else if (duration <= 0.5 + MUSIC_EPSILON){
    pad = 8;
  }

  float usableWidth = measureWidth() - pad*2;
  float eventBeat = beat + duration/2.0;
  return measureStartX(measureID) + pad + (eventBeat / userPiece.timeSig.measureDuration()) * usableWidth;
}

int measureFromMouse(){
  if (mouseX < notationStartX || mouseX > width - marginX){
    return -1;
  }

  for (int system=0;system<numberOfSystems;system++){
    int y = startY + system * systemGap;
    int top = y - staffSpacing * 3;
    int bottom = y + staffSpacing * 10;

    if (mouseY >= top && mouseY <= bottom){
      int slot = int((mouseX - notationStartX) / measureWidth());
      slot = constrain(slot, 0, measuresPerSystem - 1);
      return system * measuresPerSystem + slot;
    }
  }

  return -1;
}

int eventIDAtBeat(Measure measure, float beat){
  float currentBeat = 0;

  for (int i=0;i<measure.events.size();i++){
    MusicEvent event = measure.events.get(i);
    float nextBeat = currentBeat + event.duration;

    if (beat >= currentBeat - MUSIC_EPSILON && beat < nextBeat - MUSIC_EPSILON){
      return i;
    }

    currentBeat = nextBeat;
  }

  if (measure.events.size() > 0 && beat >= currentBeat - MUSIC_EPSILON){
    return measure.events.size() - 1;
  }

  return -1;
}

int midiFromMouseY(int measureID){
  //Turn the mouse y position into a midi note on this staff
  int systemY = measureSystemY(measureID);
  int staffTop = systemY;
  int anchorMidi = 64; //E4

  float bottomY = staffTop + staffSpacing * 4;
  float stepY = staffSpacing / 2.0;
  int steps = round((bottomY - mouseY) / stepY);
  int noteStep = diatonicIndexFromMidi(anchorMidi) + steps;

  return constrain(midiFromDiatonicIndex(noteStep), minEditorMidi, maxEditorMidi);
}