3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add scale highlighting to Piano Roll grid

Browse Source
This commit is contained in:
Xiaohan-Tian
2025-12-09 23:50:03 -08:00
parent 98ed8a60ce
commit 9e0c0cc1f5
8 changed files with 168 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+2 -13
View File
@@ -863,19 +863,8 @@ body {
width: 100%;
height: 100%;
position: relative;
background-size: var(--region-grid-beat-width) var(--region-piano-key-height), var(--region-grid-bar-width) var(--region-piano-key-height);
background-image:
/* Vertical lines for beats */
linear-gradient(to right,
transparent calc(var(--region-grid-beat-width) - 1px), #444 calc(var(--region-grid-beat-width) - 1px), #444 var(--region-grid-beat-width),
transparent calc(var(--region-grid-beat-width)), transparent calc(var(--region-grid-beat-width) * 2 - 1px), #444 calc(var(--region-grid-beat-width) * 2 - 1px), #444 calc(var(--region-grid-beat-width) * 2),
transparent calc(var(--region-grid-beat-width) * 2), transparent calc(var(--region-grid-beat-width) * 3 - 1px), #444 calc(var(--region-grid-beat-width) * 3 - 1px), #444 calc(var(--region-grid-beat-width) * 3),
transparent calc(var(--region-grid-beat-width) * 3), transparent calc(var(--region-grid-beat-width) * 4 - 1px), #3a3a3a calc(var(--region-grid-beat-width) * 4 - 1px), #3a3a3a calc(var(--region-grid-beat-width) * 4)
),
/* Horizontal lines for notes */
linear-gradient(to bottom,
transparent calc(var(--region-piano-key-height) - 1px), #3a3a3a calc(var(--region-piano-key-height) - 1px), #3a3a3a var(--region-piano-key-height)
);
background-size: var(--region-grid-beat-width) var(--region-piano-key-height), 100% 100%;
/* background-image is now set dynamically via React inline styles in PianoGrid component */
}
.piano-grid.pencil-cursor {