How do you program a piano roll editor in JavaScript.
A piano roll editor is a graphical interface used to create and edit MIDI music. To program one in JavaScript, you could follow these steps:

1. Create a user interface with HTML and CSS that represents a piano keyboard, with each key represented as a rectangle.

2. Use JavaScript to add event listeners to each key that trigger when the user clicks or presses a key. You can use the HTML5 canvas element to render the piano roll, which is a graphical representation of the MIDI data over time.

3. Store the MIDI data in an array or other data structure that represents the state of each note over time.

4. Use JavaScript to update the MIDI data in response to user input, such as adding or removing notes, moving notes, or changing their velocity or duration.

5. Use the Web MIDI API to play the MIDI data and generate sound. The Web MIDI API is a JavaScript interface that allows you to interact with MIDI devices, such as synthesizers or digital audio workstations, from within a web page.

6. Optionally, you could allow the user to save and load MIDI files, either by using the local storage API or by making HTTP requests to a server.


Here is some sample code to get you started:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #piano {
      display: flex;
    }
    .key {
      width: 30px;
      height: 120px;
      border: 1px solid black;
    }
    .white-key {
      background-color: white;
    }
    .black-key {
      width: 20px;
      height: 80px;
      background-color: black;
      position: relative;
      left: -10px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id=piano></div>
  <script>
    const piano = document.getElementById(piano);
    const notes = [C, C#, D, D#, E, F, F#, G, G#, A, A#, B];
    for (let i = 0; i < 88; i++) {
      const noteIndex = i % 12;
      const isWhiteKey = notes[noteIndex].length === 1;
      const key = document.createElement(div);
      key.classList.add(key);
      if (isWhiteKey) {
        key.classList.add(white-key);
      } else {
        key.classList.add(black-key);
      }
      piano.appendChild(key);
    }
  </script>
</body>
</html>```

This code creates a basic HTML page with a piano keyboard represented as a series of rectangles. The keys are represented using HTML div elements, and they are styled using CSS. The JavaScript code generates the div elements and adds classes to style them as white or black keys.

Note that this is just a starting point, and you would need to add more functionality and style to make a fully functional piano roll editor.
Convert that into C++
It is not possible to directly convert the code above to C++, as it is mostly describing a GUI layout, and has very little logic. A library for creating GUIs would be required, like Qt or wxWidgets, to draw the piano roll in C++.