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

feat: added fine tune region position feature

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-05-01 23:07:44 -07:00
parent d5795c5281
commit d59ad68f72
5 changed files with 239 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/track/Region.css
+35 -39
View File
@@ -97,11 +97,23 @@
background-color: #5a9b6a;
}
/* Region pencil trigger inside content */
.region-pencil-btn {
/* Left-side button cluster inside region-content */
.region-left-buttons {
position: absolute;
top: 4px;
left: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
z-index: 2;
}
/* Shared style for all region content buttons */
.region-pencil-btn,
.region-waveform-btn,
.region-spectrogram-btn,
.region-hybrid-btn {
background: rgba(0, 0, 0, 0.25);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
@@ -109,77 +121,61 @@
padding: 2px;
margin: 0;
cursor: pointer;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
}
.region-pencil-btn:hover {
.region-pencil-btn:hover,
.region-spectrogram-btn:hover,
.region-hybrid-btn:hover {
background: rgba(0, 0, 0, 0.35);
}
.region-waveform-btn {
position: absolute;
top: 4px;
left: 4px;
background: rgba(0, 0, 0, 0.25);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 2px;
margin: 0;
cursor: pointer;
z-index: 2;
display: none;
align-items: center;
justify-content: center;
}
.region-waveform-btn:hover {
background: rgba(0, 0, 0, 0.35);
}
.region-spectrogram-btn {
position: absolute;
top: 4px;
left: 4px;
/* Fine-move widget: sits inline in the left button cluster */
.region-fine-move-widget {
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
}
.region-fine-move-btn {
background: rgba(0, 0, 0, 0.25);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 2px;
margin: 0;
cursor: pointer;
z-index: 2;
cursor: ew-resize;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.region-spectrogram-btn:hover {
.region-fine-move-btn:hover {
background: rgba(0, 0, 0, 0.35);
}
.region-hybrid-btn {
position: absolute;
top: 4px;
left: 24px;
.region-fine-move-label {
background: rgba(0, 0, 0, 0.25);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 2px;
margin: 0;
cursor: pointer;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
}
.region-hybrid-btn:hover {
background: rgba(0, 0, 0, 0.35);
padding: 2px 4px;
font-size: 10px;
white-space: nowrap;
line-height: 1;
user-select: none;
}
/* Instrument dropdown specific styles */