fix: lỗi ghi note midi vào track

This commit is contained in:
2026-07-23 16:07:40 +07:00
parent 92877d02b7
commit b460d40824
4 changed files with 483 additions and 426 deletions
+376 -378
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
+82 -24
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,7 +15,7 @@
<script src="/static/js/services/storage.js"></script>
<script src="/static/js/services/aiGateway.js"></script>
<script src="/static/js/services/dawCommandDispatcher.js"></script>
<script src="/static/js/app.precompiled.js?v=20260723" defer></script>
<script src="/static/js/app.precompiled.js?v=202607231122" defer></script>
<style>
:root {
--right-sidebar-width: 320px;
@@ -24,33 +25,78 @@
--panel-border-color: #2a2a2a;
}
body {
background-color: #1a1a1a;
color: #c0c0c0;
body {
background-color: #1a1a1a;
color: #c0c0c0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
user-select: none;
}
.daw-bg { background-color: #1e1e1e; }
.daw-panel { background-color: #262626; }
.daw-header { background-color: #2e2e2e; }
.daw-border { border-color: #181818; }
.daw-track-active { background-color: #333333; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border: 2px solid #141414; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.knob-container { position: relative; width: 28px; height: 28px; }
.knob-dial { transform-origin: center; transition: transform 0.1s ease; }
.daw-bg {
background-color: #1e1e1e;
}
.daw-panel {
background-color: #262626;
}
.daw-header {
background-color: #2e2e2e;
}
.daw-border {
border-color: #181818;
}
.daw-track-active {
background-color: #333333;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #141414;
}
::-webkit-scrollbar-thumb {
background: #3a3a3a;
border: 2px solid #141414;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4a4a4a;
}
.knob-container {
position: relative;
width: 28px;
height: 28px;
}
.knob-dial {
transform-origin: center;
transition: transform 0.1s ease;
}
.selection-interactive-box {
min-width: 4px;
}
.no-scrollbar {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
}
.no-scrollbar::-webkit-scrollbar {
display: none; /* Safari and Chrome */
display: none;
/* Safari and Chrome */
}
/* Fullscreen Fixed App Shell */
@@ -101,12 +147,14 @@
}
#panel-media-explorer {
height: 50%; /* Default 50/50 split */
height: 50%;
/* Default 50/50 split */
min-height: 100px;
}
#panel-ai {
flex: 1; /* Fills remaining height */
flex: 1;
/* Fills remaining height */
min-height: 100px;
}
@@ -118,7 +166,8 @@
align-items: center;
gap: 10px;
padding: 8px;
overflow-x: auto; /* Enables horizontal scroll when panels overflow */
overflow-x: auto;
/* Enables horizontal scroll when panels overflow */
overflow-y: hidden;
background-color: #161616;
border-top: 1px solid var(--panel-border-color);
@@ -129,17 +178,20 @@
.daw-bottom-strip::-webkit-scrollbar {
height: 8px;
}
.daw-bottom-strip::-webkit-scrollbar-thumb {
background: #3a3a3a;
border-radius: 4px;
}
.daw-bottom-strip::-webkit-scrollbar-thumb:hover {
background: #00ffcc;
}
/* Sub-panels inside the bottom strip */
.bottom-panel {
flex: 0 0 auto; /* Prevents shrinking, locks content dimensions */
flex: 0 0 auto;
/* Prevents shrinking, locks content dimensions */
width: 320px;
height: 100%;
background-color: #222;
@@ -151,11 +203,13 @@
/* RESIZER HANDLES */
.resizer-col-handle {
width: 5px;
cursor: ew-resize; /* Horizontal resize cursor */
cursor: ew-resize;
/* Horizontal resize cursor */
background: transparent;
transition: background 0.2s;
z-index: 10;
}
.resizer-col-handle:hover,
.resizer-col-handle:active {
background: #00ffcc;
@@ -163,18 +217,22 @@
.resizer-row-handle {
height: 5px;
cursor: ns-resize; /* Vertical resize cursor */
cursor: ns-resize;
/* Vertical resize cursor */
background: transparent;
transition: background 0.2s;
z-index: 10;
}
.resizer-row-handle:hover,
.resizer-row-handle:active {
background: #00ffcc;
}
</style>
</head>
<body class="h-screen w-screen flex flex-col">
<div id="root" class="h-full w-full flex flex-col"></div>
</body>
</html>