feat(editor): Full ellipse support and minor fixes

This commit finalizes the ellipse drawing and application logic within the spectrogram editor.

- : Implemented robust ellipse creation and  with correct logarithmic frequency mapping.

- Fixed several issues related to state synchronization and button management.

- Minor styling and HTML updates for consistency.

1 files changed, 46 insertions, 43 deletions

diff --git a/tools/editor/style.css b/tools/editor/style.css
index 7243ee3..81e318d 100644
--- a/tools/editor/style.css
+++ b/tools/editor/style.css
@@ -1,79 +1,82 @@
 body {
-    font-family: sans-serif;
-    margin: 20px;
-    background-color: #f4f4f4;
+  font - family : sans - serif;
+margin:
+  20px;
+  background - color : #f4f4f4;
 }
 
-h1, h2 {
-    color: #333;
+h1, h2{color : #333;
 }
 
 #editorContainer {
-    display: flex;
-    margin-top: 20px;
+display : flex;
+margin - top : 20px;
 }
 
 #spectrogramCanvas {
-    border: 1px solid #ccc;
-    background-color: #fff;
-    margin-right: 20px;
+border : 1px solid #ccc;
+background - color : #fff;
+margin - right : 20px;
 }
 
 #controls {
-    border: 1px solid #ccc;
-    padding: 15px;
-    background-color: #eee;
-    min-width: 200px;
+border : 1px solid #ccc;
+padding : 15px;
+background - color : #eee;
+min - width : 200px;
 }
 
 #controls button {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    padding: 10px;
-    cursor: pointer;
+display : block;
+width : 100 % ;
+margin - bottom : 10px;
+padding : 10px;
+cursor : pointer;
 }
 
 #undoButton {
-    background-color: #d9534f;
-    color: white;
-    border: none;
-    border-radius: 4px;
+background - color : #d9534f;
+color : white;
+border : none;
+border - radius : 4px;
 }
 
-#undoButton:hover {
-    background-color: #c9302c;
+#undoButton : hover {
+background - color : #c9302c;
 }
 
 #redoButton {
-    background-color: #5cb85c;
-    color: white;
-    border: none;
-    border-radius: 4px;
+background - color : #5cb85c;
+color : white;
+border : none;
+border - radius : 4px;
 }
 
-#redoButton:hover {
-    background-color: #4cae4c;
+#redoButton : hover {
+background - color : #4cae4c;
 }
 
 /* New styles for playback buttons */
 #listenOriginalButton,
 #listenGeneratedButton {
-    background-color: #5bc0de;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    margin-top: 5px;
+background - color : #5bc0de;
+color : white;
+border : none;
+border - radius : 4px;
+margin - top : 5px;
 }
 
-#listenOriginalButton:hover,
-#listenGeneratedButton:hover {
-    background-color: #31b0d5;
+#listenOriginalButton : hover,
+#listenGeneratedButton : hover {
+background - color : #31b0d5;
 }
 
 hr {
-    border: 0;
-    height: 1px;
-    background-color: #ccc;
-    margin: 20px 0;
+border:
+  0;
+height:
+  1px;
+  background - color : #ccc;
+margin:
+  20px 0;
 }
\ No newline at end of file