Add octave grid zoom controls and restore visible square spreadsheet cells - PR_26146_039-midi-studio-v2-octave-grid-zoom-and-square-cells

Author: ToolboxAid

docs/dev/reports/PR_26146_039-midi-studio-v2-octave-grid-zoom-and-square-cells_validation.md

@@ -0,0 +1,78 @@
+# PR_26146_039 MIDI Studio V2 Octave Grid Zoom And Square Cells Validation
+
+## Scope
+
+- Continued from PR_26146_038.
+- Replaced microscopic 1px octave note cells with visible square cells.
+- Preserved 1px grid/cell borders.
+- Added Zoom Out and Zoom In controls to the Octave Timeline header after the Snap indicator.
+- Made zoom controls adjust the shared square cell size with bounded min/max values.
+- Preserved header/body alignment, frozen note labels, top/bottom horizontal scroll sync, active-note textless highlights, chord editing, Play/Stop, JSON Copy header placement, export Type + Save, and roadmap status rules.
+
+## Files Changed
+
+- `tools/midi-studio-v2/index.html`
+- `tools/midi-studio-v2/js/bootstrap.js`
+- `tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+
+## Validation Commands
+
+```powershell
+node --check tools/midi-studio-v2/js/bootstrap.js
+node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js
+node --check tests/playwright/tools/MidiStudioV2.spec.mjs
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/index.html'; const html=fs.readFileSync(p,'utf8'); if(/<script(?![^>]*\ssrc=)[^>]*>/i.test(html)) throw new Error('Inline script block found'); if(/<style\b/i.test(html)) throw new Error('Inline style block found'); if(/\son[a-z]+\s*=/i.test(html)) throw new Error('Inline event handler found'); console.log('HTML external-only guard passed:', p);"
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/styles/midiStudioV2.css'; const css=fs.readFileSync(p,'utf8'); if(/\/\*[^]*$/.test(css.replace(/\/\*[^]*?\*\//g,''))) throw new Error('Unclosed CSS comment'); let depth=0; for (const ch of css.replace(/\/\*[^]*?\*\//g,'')) { if (ch==='{') depth++; if (ch==='}') depth--; if (depth<0) throw new Error('Unexpected }'); } if (depth!==0) throw new Error('Unbalanced CSS braces'); console.log('CSS syntax guard passed:', p);"
+npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "octave timeline freezes compact headers and note labels while active cells stay textless|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync|octave grid density supports icon controls and simultaneous chord editing|octave timeline editor is the default editable and playable Studio workflow|places Copy JSON in the JSON Details header and preserves copy behavior|exports through Type dropdown and Save without claiming files were written" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000
+git diff --check
+```
+
+## Validation Result
+
+PASS
+
+## Syntax And Static Checks
+
+- PASS: `tools/midi-studio-v2/js/bootstrap.js`
+- PASS: `tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- PASS: `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: `tools/midi-studio-v2/index.html` external-only guard
+- PASS: `tools/midi-studio-v2/styles/midiStudioV2.css` brace/comment guard
+
+## Playwright Coverage
+
+Targeted MIDI Studio V2 Playwright tests passed:
+
+- PASS: grid cell width equals height.
+- PASS: grid cells are visibly larger than 1px.
+- PASS: grid cell border remains 1px.
+- PASS: zoom in increases square cell size.
+- PASS: zoom out decreases square cell size.
+- PASS: zoom controls are in the Octave Timeline header after the Snap text.
+- PASS: header/body alignment remains correct after zoom.
+- PASS: cells remain editable after zoom changes.
+- PASS: Play and Stop still work.
+- PASS: active notes remain highlighted without printed note text.
+- PASS: frozen note labels and horizontal scrolling continue to work.
+- PASS: multi-note/chord support, JSON Copy header placement, and export Type + Save remain covered.
+
+Command result:
+
+```text
+6 passed (1.4m)
+```
+
+## Diff Check
+
+- PASS: `git diff --check`
+- Note: Git reported LF-to-CRLF working-copy notices for changed files only; no whitespace errors were reported.
+
+## Full Samples Smoke Test
+
+Not run, per request.
+
+## PR Status
+
+PASS. Cells are visible square cells, not collapsed 1px cells, and width equals height under targeted Playwright validation.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -974,6 +974,27 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator('.midi-studio-v2__timing-header-row-2.midi-studio-v2__note-table-column-header[data-step-index="1"]')).toHaveText("2");
       await expect(page.locator('.midi-studio-v2__timing-header-row-2.midi-studio-v2__note-table-column-header[data-step-index="2"]')).toHaveText("3");
       await expect(page.locator('.midi-studio-v2__timing-header-row-2.midi-studio-v2__note-table-column-header[data-step-index="3"]')).toHaveText("4");
+      await expect(page.locator("#instrumentGridSnapIndicator")).toContainText("Snap:");
+      await expect(page.locator("#instrumentGridZoomOutButton")).toHaveAttribute("aria-label", "Zoom out octave grid");
+      await expect(page.locator("#instrumentGridZoomInButton")).toHaveAttribute("aria-label", "Zoom in octave grid");
+      const zoomControlsLayout = await page.locator(".midi-studio-v2__timeline-title").evaluate((header) => {
+        const snap = header.querySelector("#instrumentGridSnapIndicator").getBoundingClientRect();
+        const zoomOut = header.querySelector("#instrumentGridZoomOutButton").getBoundingClientRect();
+        const zoomIn = header.querySelector("#instrumentGridZoomInButton").getBoundingClientRect();
+        return {
+          zoomInAfterZoomOut: zoomIn.left > zoomOut.right,
+          zoomOutAfterSnap: zoomOut.left > snap.right,
+          zoomText: [
+            header.querySelector("#instrumentGridZoomOutButton").textContent,
+            header.querySelector("#instrumentGridZoomInButton").textContent
+          ]
+        };
+      });
+      expect(zoomControlsLayout).toEqual({
+        zoomInAfterZoomOut: true,
+        zoomOutAfterSnap: true,
+        zoomText: ["-", "+"]
+      });
 
       const output = page.locator("#instrumentGridOutput");
       const gridLayout = await output.evaluate((element) => {
@@ -987,6 +1008,7 @@ test.describe("MIDI Studio V2", () => {
           alternatingRowsDiffer: getComputedStyle(firstRow).backgroundColor !== getComputedStyle(secondRow).backgroundColor,
           borderRightWidth: getComputedStyle(firstNote).borderRightWidth,
           cellCssWidth: getComputedStyle(firstNote).width,
+          cellHeight: firstNote.getBoundingClientRect().height,
           columnWidth: firstNote.getBoundingClientRect().width,
           columnTemplate: getComputedStyle(grid).gridTemplateColumns,
           containsGrid: grid?.parentElement === element,
@@ -998,13 +1020,45 @@ test.describe("MIDI Studio V2", () => {
       expect(gridLayout.alternatingRowsDiffer).toBe(true);
       expect(Number.parseFloat(gridLayout.borderRightWidth)).toBeGreaterThanOrEqual(0.8);
       expect(Number.parseFloat(gridLayout.borderRightWidth)).toBeLessThanOrEqual(1);
-      expect(Number.parseFloat(gridLayout.cellCssWidth)).toBeGreaterThanOrEqual(0.8);
-      expect(Number.parseFloat(gridLayout.cellCssWidth)).toBeLessThanOrEqual(1);
-      expect(gridLayout.columnWidth).toBeLessThanOrEqual(1);
-      expect(gridLayout.columnTemplate).toContain("1px");
+      expect(gridLayout.columnWidth).toBeGreaterThan(1);
+      expect(Math.abs(gridLayout.columnWidth - gridLayout.cellHeight)).toBeLessThanOrEqual(1);
+      expect(Number.parseFloat(gridLayout.cellCssWidth)).toBeGreaterThan(1);
+      expect(gridLayout.columnTemplate).toContain("22px");
       expect(gridLayout.labelWidth).toBeGreaterThan(40);
       expect(gridLayout.topScrollbarHeight).toBeGreaterThanOrEqual(12);
 
+      await page.locator("#instrumentGridZoomInButton").click();
+      const zoomedInLayout = await output.evaluate((element) => {
+        const firstNote = element.querySelector('.midi-studio-v2__octave-note-cell[data-step-index="0"]');
+        const header = element.querySelector('.midi-studio-v2__grid-cell--beat-header[data-step-index="6"]').getBoundingClientRect();
+        const bodyCell = element.querySelector('.midi-studio-v2__octave-note-cell[data-row-token="C5"][data-step-index="6"]').getBoundingClientRect();
+        return {
+          bodyHeaderDelta: Math.abs(header.left - bodyCell.left),
+          height: firstNote.getBoundingClientRect().height,
+          width: firstNote.getBoundingClientRect().width
+        };
+      });
+      expect(zoomedInLayout.width).toBeGreaterThan(gridLayout.columnWidth);
+      expect(Math.abs(zoomedInLayout.width - zoomedInLayout.height)).toBeLessThanOrEqual(1);
+      expect(zoomedInLayout.bodyHeaderDelta).toBeLessThanOrEqual(1);
+
+      await page.locator("#instrumentGridZoomOutButton").click();
+      await page.locator("#instrumentGridZoomOutButton").click();
+      const zoomedOutLayout = await output.evaluate((element) => {
+        const firstNote = element.querySelector('.midi-studio-v2__octave-note-cell[data-step-index="0"]');
+        const header = element.querySelector('.midi-studio-v2__grid-cell--beat-header[data-step-index="6"]').getBoundingClientRect();
+        const bodyCell = element.querySelector('.midi-studio-v2__octave-note-cell[data-row-token="C5"][data-step-index="6"]').getBoundingClientRect();
+        return {
+          bodyHeaderDelta: Math.abs(header.left - bodyCell.left),
+          height: firstNote.getBoundingClientRect().height,
+          width: firstNote.getBoundingClientRect().width
+        };
+      });
+      expect(zoomedOutLayout.width).toBeLessThan(zoomedInLayout.width);
+      expect(zoomedOutLayout.width).toBeGreaterThan(1);
+      expect(Math.abs(zoomedOutLayout.width - zoomedOutLayout.height)).toBeLessThanOrEqual(1);
+      expect(zoomedOutLayout.bodyHeaderDelta).toBeLessThanOrEqual(1);
+
       await output.evaluate((element) => {
         element.style.maxWidth = "80px";
         element.dispatchEvent(new Event("scroll"));
@@ -1106,8 +1160,7 @@ test.describe("MIDI Studio V2", () => {
         };
       });
       expect(activeHighlight.content).not.toBe("none");
-      expect(Number.parseFloat(activeHighlight.width)).toBeGreaterThanOrEqual(0.8);
-      expect(Number.parseFloat(activeHighlight.width)).toBeLessThanOrEqual(1);
+      expect(Number.parseFloat(activeHighlight.width)).toBeGreaterThan(1);
     } finally {
       await workspaceV2CoverageReporter.stop(page);
       await server.close();

tools/midi-studio-v2/index.html

@@ -197,7 +197,11 @@ <h3>Song Sheet</h3>
             <div class="midi-studio-v2__timeline-title">
               <h2 id="instrumentGridHeading">Octave Timeline</h2>
               <p>Edit Notes Here</p>
-              <span id="instrumentGridSnapIndicator" class="midi-studio-v2__snap-indicator">Snap: not set</span>
+              <div class="midi-studio-v2__timeline-title-actions">
+                <span id="instrumentGridSnapIndicator" class="midi-studio-v2__snap-indicator">Snap: not set</span>
+                <button id="instrumentGridZoomOutButton" class="midi-studio-v2__zoom-button" type="button" aria-label="Zoom out octave grid" title="Zoom out octave grid">-</button>
+                <button id="instrumentGridZoomInButton" class="midi-studio-v2__zoom-button" type="button" aria-label="Zoom in octave grid" title="Zoom in octave grid">+</button>
+              </div>
             </div>
             <div class="midi-studio-v2__grid-settings" data-midi-studio-tab-panel="auto-create-parts">
               <label class="tool-starter__field" for="instrumentGridSectionsInput">

tools/midi-studio-v2/js/bootstrap.js

@@ -72,6 +72,8 @@ window.addEventListener("DOMContentLoaded", () => {
       generatePadButton: requireElement("#generatePadFromChordsButton"),
       gridOutput: requireElement("#instrumentGridOutput"),
       instrumentList: requireElement("#instrumentList"),
+      instrumentGridZoomInButton: requireElement("#instrumentGridZoomInButton"),
+      instrumentGridZoomOutButton: requireElement("#instrumentGridZoomOutButton"),
       jumpToSectionButton: requireElement("#jumpToSectionButton"),
       laneTypeSelect: requireElement("#instrumentGridLaneTypeSelect"),
       leadInput: requireElement("#instrumentGridLeadInput"),

tools/midi-studio-v2/js/controls/InstrumentGridControl.js

@@ -68,6 +68,12 @@ const INSTRUMENT_TYPE_GROUPS = [
 const REST_TOKENS = new Set(["", "-", ".", "rest"]);
 const PERCUSSION_ROWS = ["crash", "ride", "hat", "clap", "snare", "tom", "perc", "kick"];
 const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+const OCTAVE_GRID_ZOOM = {
+  default: 22,
+  max: 38,
+  min: 12,
+  step: 4
+};
 const FLAT_TO_SHARP = {
   Ab: "G#",
   Bb: "A#",
@@ -223,6 +229,8 @@ export class InstrumentGridControl {
     generatePadButton,
     gridOutput,
     instrumentList,
+    instrumentGridZoomInButton,
+    instrumentGridZoomOutButton,
     jumpToSectionButton,
     laneTypeSelect,
     leadInput,
@@ -257,6 +265,8 @@ export class InstrumentGridControl {
     this.gridOutput = gridOutput;
     this.extraLaneSources = {};
     this.instrumentList = instrumentList;
+    this.instrumentGridZoomInButton = instrumentGridZoomInButton;
+    this.instrumentGridZoomOutButton = instrumentGridZoomOutButton;
     this.jumpToSectionButton = jumpToSectionButton;
     this.laneTypeSelect = laneTypeSelect;
     this.leadInput = leadInput;
@@ -285,6 +295,7 @@ export class InstrumentGridControl {
     this.playTimer = null;
     this.playheadStep = 0;
     this.lastPlayheadHighlightStep = null;
+    this.octaveCellSize = OCTAVE_GRID_ZOOM.default;
     this.syncingTimelineScroll = false;
     this.timelineScrollProxy = null;
     this.timelineScrollProxySpacer = null;
@@ -322,11 +333,14 @@ export class InstrumentGridControl {
       input.addEventListener("change", () => this.updateSnapIndicator());
     });
     this.gridOutput.addEventListener("scroll", () => this.syncTimelineScrollState());
+    this.instrumentGridZoomInButton?.addEventListener("click", () => this.adjustOctaveGridZoom(OCTAVE_GRID_ZOOM.step));
+    this.instrumentGridZoomOutButton?.addEventListener("click", () => this.adjustOctaveGridZoom(-OCTAVE_GRID_ZOOM.step));
     this.addInstrumentButton?.addEventListener("click", () => this.addInstrumentRow());
     this.closeInstrumentPanelButton?.addEventListener("click", () => this.collapseInstrumentPanel());
     this.setTransportEnabled(false);
     this.populateSectionControls([]);
     this.updateSnapIndicator();
+    this.applyOctaveGridZoom();
     this.selectLane(this.selectedLane);
     this.renderSelectionDetails();
   }
@@ -561,7 +575,7 @@ export class InstrumentGridControl {
     grid.className = "midi-studio-v2__instrument-grid midi-studio-v2__note-table midi-studio-v2__octave-timeline";
     grid.setAttribute("role", "table");
     grid.setAttribute("aria-label", "Octave timeline editor");
-    grid.style.gridTemplateColumns = `4.25rem repeat(${result.totalSteps}, 1px)`;
+    grid.style.gridTemplateColumns = `4.25rem repeat(${result.totalSteps}, var(--midi-studio-v2-octave-cell-size))`;
     this.renderNoteTableHeader(grid, result);
     octaveRows.forEach((row, rowIndex) => {
       grid.append(this.createOctaveRowHeader(row, rowIndex));
@@ -575,9 +589,34 @@ export class InstrumentGridControl {
     this.gridOutput.append(grid);
     this.updateTimelineScrollProxyWidth();
     this.window.requestAnimationFrame?.(() => this.updateTimelineScrollProxyWidth());
+    this.applyOctaveGridZoom();
     this.applySelectedLaneHighlight();
   }
 
+  adjustOctaveGridZoom(delta) {
+    const nextSize = Math.max(OCTAVE_GRID_ZOOM.min, Math.min(OCTAVE_GRID_ZOOM.max, this.octaveCellSize + delta));
+    if (nextSize === this.octaveCellSize) {
+      this.applyOctaveGridZoom();
+      return;
+    }
+    const scrollState = this.captureTimelineScrollState();
+    this.octaveCellSize = nextSize;
+    this.applyOctaveGridZoom();
+    this.updateTimelineScrollProxyWidth();
+    this.restoreTimelineScrollState(scrollState);
+  }
+
+  applyOctaveGridZoom() {
+    const size = `${this.octaveCellSize}px`;
+    this.gridOutput?.style.setProperty("--midi-studio-v2-octave-cell-size", size);
+    if (this.instrumentGridZoomOutButton) {
+      this.instrumentGridZoomOutButton.disabled = this.octaveCellSize <= OCTAVE_GRID_ZOOM.min;
+    }
+    if (this.instrumentGridZoomInButton) {
+      this.instrumentGridZoomInButton.disabled = this.octaveCellSize >= OCTAVE_GRID_ZOOM.max;
+    }
+  }
+
   createTimelineScrollProxy() {
     const proxy = document.createElement("div");
     proxy.className = "midi-studio-v2__timeline-scroll-proxy";

tools/midi-studio-v2/styles/midiStudioV2.css

@@ -108,6 +108,14 @@
   justify-content: space-between;
 }
 
+.midi-studio-v2__timeline-title-actions {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.35rem;
+  margin-left: auto;
+  min-width: 0;
+}
+
 .midi-studio-v2__timeline-title p {
   color: var(--tool-starter-muted);
   font-size: 0.85rem;
@@ -320,6 +328,7 @@
 .midi-studio-v2__instrument-grid-output {
   max-width: 100%;
   overflow: auto;
+  --midi-studio-v2-octave-cell-size: 22px;
   --midi-studio-v2-top-scrollbar-height: 16px;
 }
 
@@ -646,13 +655,14 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
   font-weight: 800;
   gap: 0;
   line-height: 1;
-  min-height: 1.55rem;
-  min-width: 1px;
+  height: var(--midi-studio-v2-octave-cell-size);
+  min-height: var(--midi-studio-v2-octave-cell-size);
+  min-width: var(--midi-studio-v2-octave-cell-size);
   overflow: hidden;
   padding: 0;
   position: relative;
   white-space: normal;
-  width: 1px;
+  width: var(--midi-studio-v2-octave-cell-size);
   word-break: break-word;
 }
 
@@ -678,14 +688,14 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 
 .midi-studio-v2__octave-note-cell.midi-studio-v2__grid-cell--event::before {
   background: rgba(221, 214, 254, 0.78);
-  border-radius: 0;
+  border-radius: 0.18rem;
   content: "";
   display: block;
   height: 0.72rem;
   justify-self: stretch;
-  margin: 0;
-  min-width: 1px;
-  width: 1px;
+  margin: 0 0.12rem;
+  min-width: 0;
+  width: auto;
 }
 
 .midi-studio-v2__note-block {
@@ -814,10 +824,22 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
   color: var(--tool-starter-muted);
   font-size: 0.78rem;
   font-weight: 600;
-  margin-left: auto;
   text-transform: none;
 }
 
+.midi-studio-v2__zoom-button {
+  align-items: center;
+  border-radius: 6px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  font-weight: 900;
+  justify-content: center;
+  min-height: 1.45rem;
+  min-width: 1.55rem;
+  padding: 0;
+}
+
 .midi-studio-v2__section-tone-0 {
   background: color-mix(in srgb, var(--tool-starter-surface) 76%, #0ea5e9 24%);
 }