Finished the Effects menu and adding/changing them.

98ahni · Jul 19, 2024 · 188c5bf · 188c5bf
1 parent bc10971
commit 188c5bf
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 21 deletions.
diff --git a/Source/Extensions/imguiExt.cpp b/Source/Extensions/imguiExt.cpp
@@ -25,7 +25,7 @@ EM_JS(void, create_button, (emscripten::EM_VAL id, emscripten::EM_VAL event, ems
     btn.style.top = pos_y + 'px';
     btn.style.width = width + 'px';
     btn.style.height = height + 'px';
-    btn.style.opacity = 0.3;
+    btn.style.opacity = 0.1;
 });
 EM_JS(void, create_input, (emscripten::EM_VAL id, emscripten::EM_VAL type, emscripten::EM_VAL event, emscripten::EM_VAL callback, int pos_x, int pos_y, int width, int height), {
     let input = document.getElementById(Emval.toValue(id));

diff --git a/Source/Serialization/KaraokeData.cpp b/Source/Serialization/KaraokeData.cpp
@@ -252,6 +252,11 @@ namespace Serialization
         myTokens.erase(myTokens.begin() + aLine);
     }
 
+    const KaraokeAliasMap& KaraokeDocument::GetEffectAliases()
+    {
+        return myEffectAliases;
+    }
+
     void KaraokeDocument::Clear()
     {
         myFontSize = 50;

diff --git a/Source/Serialization/KaraokeData.h b/Source/Serialization/KaraokeData.h
@@ -39,6 +39,7 @@ namespace Serialization
     };
     typedef std::vector<std::vector<KaraokeToken>> KaraokeData;
     typedef std::vector<KaraokeToken> KaraokeLine;
+    typedef std::unordered_map<std::string, KaraokeEffect*> KaraokeAliasMap;
     class KaraokeDocument
     {
     public:
@@ -65,6 +66,7 @@ namespace Serialization
         void MoveLineUp(size_t aLineToMove);
         void DuplicateLine(size_t aLine);
         void RemoveLine(size_t aLine);
+        const KaraokeAliasMap& GetEffectAliases();
 
         void Clear();
         void Load(std::string aPath, std::string aFileID = "");
@@ -119,7 +121,7 @@ namespace Serialization
         uint myOverrideStartColor = 0x0038F97C;
         uint myOverrideEndColor = 0x30FFCCE9;
         std::unordered_map<std::string, std::string> myECHOtoResonateAliases;
-        std::unordered_map<std::string, KaraokeEffect*> myEffectAliases;
+        KaraokeAliasMap myEffectAliases;
         friend class ::PropertiesWindow;
     };
 }
diff --git a/Source/Windows/Help.cpp b/Source/Windows/Help.cpp
@@ -67,8 +67,8 @@ void HelpWindow::OnImGuiDraw()
 
     StartTreeNode("Adding Effects");
     ImGui::TextWrapped("Adding effects is as simple as clicking the Effects menu and selecting the appropriate one. "
-    "After the built in effects are the effects used in the document then the ones saved to browser storage. "
-    "You can create effects by selecting Document Properties in the Edit menu. Here you can add or remove effects and store them to the browser storage. "
+    "After the built in line effects are the text effects added to the document. "
+    "You can create effects by selecting Document Properties in the View menu. Here you can add or remove effects and store them to the browser storage. "
     "A named effect will appear as its name in the Timing editor but when exporting will be translated to a command readable by ECHO.");
     EndTreeNode
 

diff --git a/Source/Windows/MainWindow.cpp b/Source/Windows/MainWindow.cpp
@@ -479,7 +479,7 @@ void MainWindow_StyleColorsShadow(ImGuiStyle* dst)
 	colors[ImGuiCol_Header] = itembg;
 	colors[ImGuiCol_HeaderHovered] = itemHover;
 	colors[ImGuiCol_HeaderActive] = itemActive;
-	colors[ImGuiCol_Separator] = colors[ImGuiCol_Border];
+	colors[ImGuiCol_Separator] = lightItembg;
 	colors[ImGuiCol_SeparatorHovered] = ImVec4(0.10f, 0.40f, 0.75f, 0.78f);
 	colors[ImGuiCol_SeparatorActive] = ImVec4(0.10f, 0.40f, 0.75f, 1.00f);
 	colors[ImGuiCol_ResizeGrip] = ImVec4(0.26f, 0.59f, 0.98f, 0.20f);

diff --git a/Source/main.cpp b/Source/main.cpp
@@ -187,6 +187,12 @@ void loop(void* window){
                 TimingEditor* timing = (TimingEditor*)WindowManager::GetWindow("Timing");
                 doc.DuplicateLine(timing->GetMarkedLine());
             }
+            ImGui::Separator();
+            if(ImGui::MenuItem("Remove Line"))
+            {
+                TimingEditor* timing = (TimingEditor*)WindowManager::GetWindow("Timing");
+                doc.RemoveLine(timing->GetMarkedLine());
+            }
             ImGui::EndMenu();
         }
         if(ImGui::BeginMenu("View"))
@@ -226,6 +232,39 @@ void loop(void* window){
             }
             ImGui::EndMenu();
         }
+        if(ImGui::BeginMenu("Effects"))
+        {
+            ImGui::BeginDisabled();
+            ImGui::SeparatorText("Line Effects");
+            ImGui::EndDisabled();
+            if(ImGui::BeginMenu("Image", false))
+            {
+                // This menu should be active if there are any images in the project.
+                ImGui::EndMenu();
+            }
+            if(ImGui::MenuItem("No Effect", "<no effect>"))
+            {
+                TimingEditor* timing = (TimingEditor*)WindowManager::GetWindow("Timing");
+                doc.GetLine(timing->GetMarkedLine()).insert(doc.GetLine(timing->GetMarkedLine()).begin(), {"<no effect>", false, 0});
+            }
+            if(ImGui::MenuItem("Display Line", "<line#>", nullptr, false))
+            {
+                // This should display buttons in the Timing Editor for changing the value.
+            }
+            ImGui::BeginDisabled();
+            ImGui::SeparatorText("Text Effects");
+            ImGui::EndDisabled();
+            for(const auto& [alias, effect] : doc.GetEffectAliases())
+            {
+                if(ImGui::MenuItem(alias.data(), effect->myECHOValue.data()))
+                {
+                    TimingEditor* timing = (TimingEditor*)WindowManager::GetWindow("Timing");
+                    Serialization::KaraokeToken& token = doc.GetToken(timing->GetMarkedLine(), timing->GetMarkedToken());
+                    doc.GetLine(timing->GetMarkedLine()).insert(doc.GetLine(timing->GetMarkedLine()).begin() + timing->GetMarkedToken(), {("<" + alias + ">").data(), true, token.myStartTime});
+                }
+            }
+            ImGui::EndMenu();
+        }
         if(ImGui::BeginMenu("Syllabify"))
         {
             if(ImGui::BeginMenu("All"))

diff --git a/bin/public/Resonate.js b/bin/public/Resonate.js
@@ -999,18 +999,18 @@ function dbg(text) {
 // === Body ===
 
 var ASM_CONSTS = {
-  3653446: () => { alert("FileHandler::OpenDocument not implemented!") },  
- 3653498: () => { return Emval.toHandle(new Promise((resolve)=>{ FS.syncfs(false, function (err) { if(err){ alert('Unable to sync IndexDB!\n' + err); } resolve(); }); })) },  
- 3653655: ($0) => { init_gapi_with_key($0); },  
- 3653681: () => { if(document.getElementById('temp-text-input')) { document.getElementById('temp-text-input').focus({preventScroll: true});} },  
- 3653804: () => { if(document.getElementById('temp-file-input')) { document.getElementById('temp-file-input').click();} },  
- 3653906: () => { return Date.now(); },  
- 3653927: () => { location.reload() },  
- 3653945: () => { if(global_audio_context !== null)global_audio_context.close(); },  
- 3654008: () => { return global_audio_element.paused ? 1 : 0; },  
- 3654052: ($0) => { if(!document.querySelector("link[rel='icon']")) { let link = document.createElement('link'); link.rel = 'icon'; link.type = 'image/png'; document.head.appendChild(link); } document.querySelector("link[rel='icon']").href = "icons/" + Emval.toValue($0); },  
- 3654308: () => { let errString = 'Undefined'; if(error_type === 1) errString = 'Validation'; else if(error_type === 2) errString = 'Out of memory'; else if(error_type === 4) errString = 'Unknown'; else if(error_type === 5) errString = 'Device lost'; alert('WebGPU Error ' + errString); },  
- 3654577: () => { const dbname = '/local'; var req = indexedDB.deleteDatabase(dbname); req.onsuccess = function() { console.log('Deleted IndexedDB /local!'); location.reload();}; req.onerror = function() { console.error('Failed to delete IndexedDB /local!');}; req.onblocked = function() { console.error('Failed to delete IndexedDB /local, DB was blocked!');}; }
+  3653494: () => { alert("FileHandler::OpenDocument not implemented!") },  
+ 3653546: () => { return Emval.toHandle(new Promise((resolve)=>{ FS.syncfs(false, function (err) { if(err){ alert('Unable to sync IndexDB!\n' + err); } resolve(); }); })) },  
+ 3653703: ($0) => { init_gapi_with_key($0); },  
+ 3653729: () => { if(document.getElementById('temp-text-input')) { document.getElementById('temp-text-input').focus({preventScroll: true});} },  
+ 3653852: () => { if(document.getElementById('temp-file-input')) { document.getElementById('temp-file-input').click();} },  
+ 3653954: () => { return Date.now(); },  
+ 3653975: () => { location.reload() },  
+ 3653993: () => { if(global_audio_context !== null)global_audio_context.close(); },  
+ 3654056: () => { return global_audio_element.paused ? 1 : 0; },  
+ 3654100: ($0) => { if(!document.querySelector("link[rel='icon']")) { let link = document.createElement('link'); link.rel = 'icon'; link.type = 'image/png'; document.head.appendChild(link); } document.querySelector("link[rel='icon']").href = "icons/" + Emval.toValue($0); },  
+ 3654356: () => { let errString = 'Undefined'; if(error_type === 1) errString = 'Validation'; else if(error_type === 2) errString = 'Out of memory'; else if(error_type === 4) errString = 'Unknown'; else if(error_type === 5) errString = 'Device lost'; alert('WebGPU Error ' + errString); },  
+ 3654625: () => { const dbname = '/local'; var req = indexedDB.deleteDatabase(dbname); req.onsuccess = function() { console.log('Deleted IndexedDB /local!'); location.reload();}; req.onerror = function() { console.error('Failed to delete IndexedDB /local!');}; req.onblocked = function() { console.error('Failed to delete IndexedDB /local, DB was blocked!');}; }
 };
 function __asyncjs__open_directory(mode) { return Asyncify.handleAsync(async () => { return Emval.toHandle(new Promise((resolve) => { const input = document.createElement('input'); input.type = 'file'; if(typeof input.webkitdirectory !== "boolean") { input.multiple = true; } else { input.webkitdirectory = true; } input.addEventListener( 'cancel', () => { resolve(""); }); input.addEventListener( 'change', () => { let files = Array.from(input.files); let promisedFiles = []; let exDir = ""; if(files[0].webkitRelativePath.toString().includes("/")) { if(!FS.analyzePath("/" + files[0].webkitRelativePath.split("/")[0]).exists) { FS.mkdir("/" + files[0].webkitRelativePath.split("/")[0]); } } else { exDir = "/WorkDir"; if(!FS.analyzePath("/WorkDir").exists) { FS.mkdir("/WorkDir"); } } for(const file of files) { promisedFiles.push(new Promise((resolve) => { console.log('Loading file ' + file.webkitRelativePath); let reader = new FileReader(); reader.onload = (event) => { const uint8_view = new Uint8Array(event.target.result); FS.writeFile(exDir.length != 0 ? exDir + '/' + file.name : file.webkitRelativePath, uint8_view); resolve(); }; reader.readAsArrayBuffer(file); })); } input.remove(); Promise.all(promisedFiles).then(() => { resolve(exDir.length != 0 ? exDir : files[0].webkitRelativePath.split("/")[0]); }); }); if ('showPicker' in HTMLInputElement.prototype) { input.showPicker(); } else { input.click(); } })); }); }
 function download_document(path) { const docPath = Emval.toValue(path); const docData = FS.readFile(docPath); const docBlob = new Blob([docData.buffer], {type: 'application/octet-binary'}); const docURL = URL.createObjectURL(docBlob); const link = document.createElement('a'); link.href = docURL; link.download = docPath.split('/').pop(); document.body.appendChild(link); link.click(); document.body.removeChild(link); }
@@ -1027,7 +1027,7 @@ function request_client_token(prompt,token_callback) { global_client_token.callb
 function revoke_client_token() { const token = gapi.client.getToken(); if (token !== null) { google.accounts.oauth2.revoke(token.access_token); gapi.client.setToken(''); } }
 function create_picker(APIKey,mime_types,callback_name,cancel_callback_name) { const view = new google.picker.DocsView() .setIncludeFolders(true) .setMimeTypes(Emval.toValue(mime_types)) .setSelectFolderEnabled(true); const callback_func = Module[Emval.toValue(callback_name)]; const cancel_callback_func = Module[Emval.toValue(cancel_callback_name)]; const picker = new google.picker.PickerBuilder() .setDeveloperKey(Emval.toValue(APIKey)) .setAppId(824603127976) .setOAuthToken(gapi.client.getToken().access_token) .setTitle('Choose a folder') .addView(view) .addView(new google.picker.DocsUploadView()) .setCallback(async(data) => {if (data.action === google.picker.Action.CANCEL){cancel_callback_func();} if (data.action === google.picker.Action.PICKED){ const documents = data[google.picker.Response.DOCUMENTS]; if(!FS.analyzePath("/GoogleDrive").exists){ FS.mkdir("/GoogleDrive"); } for(const document of documents){ const fileId = document[google.picker.Document.ID]; console.log(fileId); const files = []; const res = await gapi.client.drive.files.list({ q: "'" + fileId + "' in parents", fields: 'nextPageToken, files(id, name, trashed)', spaces: 'drive' }); console.log(JSON.stringify(res.result.files)); Array.prototype.push.apply(files, res.result.files); console.log(files); files.forEach(async function(file) { if(file.trashed){ console.log('Found trashed file:', file.name, file.id, ', Skipping'); return; } console.log('Found file:', file.name, file.id); const fres = await gapi.client.drive.files.get({ 'fileId': file.id, 'alt': 'media' }); var bytes = []; for (var i = 0; i < fres.body.length; ++i) { bytes.push(fres.body.charCodeAt(i)); } FS.writeFile("/GoogleDrive/" + file.name, new Uint8Array(bytes)); callback_func(Emval.toHandle("/GoogleDrive/" + file.name), Emval.toHandle(file.id)); }); } }}) .build(); picker.setVisible(true); }
 function __asyncjs__save_to_drive(file_id,fs_path) { return Asyncify.handleAsync(async () => { const fileData = FS.readFile(Emval.toValue(fs_path), {encoding: 'utf8'}); await gapi.client.request({ path: 'https://www.googleapis.com/upload/drive/v3/files/' + Emval.toValue(file_id), method: 'PATCH', body: fileData, params: { uploadType: 'media', fields: 'id,version,name', }, }); }); }
-function create_button(id,event,callback,pos_x,pos_y,width,height) { let btn = document.getElementById(Emval.toValue(id)); if(btn === null){ btn = document.createElement('button'); btn.id = Emval.toValue(id); document.body.insertBefore(btn, document.getElementById('canvas').nextSibling); } btn.addEventListener(Emval.toValue(event), window[Emval.toValue(callback)], false); btn.style.position = 'fixed'; btn.style.left = pos_x + 'px'; btn.style.top = pos_y + 'px'; btn.style.width = width + 'px'; btn.style.height = height + 'px'; btn.style.opacity = 0.3; }
+function create_button(id,event,callback,pos_x,pos_y,width,height) { let btn = document.getElementById(Emval.toValue(id)); if(btn === null){ btn = document.createElement('button'); btn.id = Emval.toValue(id); document.body.insertBefore(btn, document.getElementById('canvas').nextSibling); } btn.addEventListener(Emval.toValue(event), window[Emval.toValue(callback)], false); btn.style.position = 'fixed'; btn.style.left = pos_x + 'px'; btn.style.top = pos_y + 'px'; btn.style.width = width + 'px'; btn.style.height = height + 'px'; btn.style.opacity = 0.1; }
 function create_input(id,type,event,callback,pos_x,pos_y,width,height) { let input = document.getElementById(Emval.toValue(id)); if(input === null){ input = document.createElement('input'); input.id = Emval.toValue(id); document.body.insertBefore(input, document.getElementById('canvas').nextSibling); } input.addEventListener(Emval.toValue(event), window[Emval.toValue(callback)], true); input.type = Emval.toValue(type); input.style.position = 'fixed'; input.style.left = pos_x + 'px'; input.style.top = pos_y + 'px'; input.style.width = width + 'px'; input.style.height = height + 'px'; input.style.opacity = 0; }
 function destroy_element(id) { let input = document.getElementById(Emval.toValue(id)); if(input !== null){ input.remove(); } }
 function __asyncjs__destroy_element_async(id,delay_ms) { return Asyncify.handleAsync(async () => { let input = document.getElementById(Emval.toValue(id)); if(input !== null){ input.remove(); } }); }
@@ -11497,9 +11497,9 @@ var _asyncify_start_unwind = createExportWrapper('asyncify_start_unwind');
 var _asyncify_stop_unwind = createExportWrapper('asyncify_stop_unwind');
 var _asyncify_start_rewind = createExportWrapper('asyncify_start_rewind');
 var _asyncify_stop_rewind = createExportWrapper('asyncify_stop_rewind');
-var ___emscripten_embedded_file_data = Module['___emscripten_embedded_file_data'] = 3602600;
-var ___start_em_js = Module['___start_em_js'] = 3637000;
-var ___stop_em_js = Module['___stop_em_js'] = 3653446;
+var ___emscripten_embedded_file_data = Module['___emscripten_embedded_file_data'] = 3602644;
+var ___start_em_js = Module['___start_em_js'] = 3637048;
+var ___stop_em_js = Module['___stop_em_js'] = 3653494;
 
 // include: postamble.js
 // === Auto-generated postamble setup entry stuff ===

diff --git a/bin/public/Resonate.wasm b/bin/public/Resonate.wasm