Copy and paste working!

Author: Sekqies

dependencies/learnopengl/include/emscripten_browser_clipboard.h

@@ -1,8 +1,5 @@
-#include <iostream>
 #ifdef __EMSCRIPTEN__
-
-#ifndef EMSCRIPTEN_BROWSER_CLIPBOARD_H_INCLUDED
-#define EMSCRIPTEN_BROWSER_CLIPBOARD_H_INCLUDED
+#pragma once
 
 #include <string>
 #include <emscripten.h>
@@ -21,7 +18,7 @@ namespace emscripten_browser_clipboard {
 
     /////////////////////////////////// Interface //////////////////////////////////
 
-    using paste_handler = void(*)(std::string const&, void*);
+    using paste_handler = void(*)(std::string&&, void*);
     using copy_handler = char const* (*)(void*);
 
     inline void paste(paste_handler callback, void* callback_data = nullptr);
@@ -30,23 +27,23 @@ namespace emscripten_browser_clipboard {
 
     ///////////////////////////////// Implementation ///////////////////////////////
 
-    namespace {
+    namespace detail {
 
         EM_JS_INLINE(void, paste_js, (paste_handler callback, void* callback_data), {
             /// Register the given callback to handle paste events. Callback data pointer is passed through to the callback.
             /// Paste handler callback signature is:
-            ///   void my_handler(std::string const &paste_data, void *callback_data = nullptr);
-            document.addEventListener('paste', function (event) {
-              Module["ccall"]('paste_return', 'number',['string', 'number', 'number'],[event.clipboardData.getData('text/plain'), callback, callback_data]);
+            ///   void my_handler(std::string &&paste_data, void *callback_data = nullptr);
+            document.addEventListener('paste', (event) => {
+              Module["ccall"]('emscripten_browser_clipboard_detail_paste_return', 'number',['string', 'number', 'number'],[event.clipboardData.getData('text/plain'), callback, callback_data]);
             });
             });
 
         EM_JS_INLINE(void, copy_js, (copy_handler callback, void* callback_data), {
             /// Register the given callback to handle copy events. Callback data pointer is passed through to the callback.
             /// Copy handler callback signature is:
             ///   char const *my_handler(void *callback_data = nullptr);
-            document.addEventListener('copy', function (event){
-              const content_ptr = Module["ccall"]('copy_return', 'number',['number', 'number'],[callback, callback_data]);
+            document.addEventListener('copy', (event) => {
+              const content_ptr = Module["ccall"]('emscripten_browser_clipboard_detail_copy_return', 'number',['number', 'number'],[callback, callback_data]);
               event.clipboardData.setData('text/plain', UTF8ToString(content_ptr));
               event.preventDefault();
             });
@@ -57,48 +54,46 @@ namespace emscripten_browser_clipboard {
             navigator.clipboard.writeText(UTF8ToString(content_ptr));
             });
 
-    }
+    } // namespace detail
 
     inline void paste(paste_handler callback, void* callback_data) {
         /// C++ wrapper for javascript paste call
-        paste_js(callback, callback_data);
+        detail::paste_js(callback, callback_data);
     }
 
     inline void copy(copy_handler callback, void* callback_data) {
         /// C++ wrapper for javascript copy call
-        copy_js(callback, callback_data);
+        detail::copy_js(callback, callback_data);
     }
 
     inline void copy(std::string const& content) {
         /// C++ wrapper for javascript copy call
-        copy_async_js(content.c_str());
+        detail::copy_async_js(content.c_str());
     }
 
-    namespace {
+    namespace detail {
 
         extern "C" {
 
-            EMSCRIPTEN_KEEPALIVE inline int paste_return(char const* paste_data, paste_handler callback, void* callback_data);
+            EMSCRIPTEN_KEEPALIVE inline int emscripten_browser_clipboard_detail_paste_return(char const* paste_data, paste_handler callback, void* callback_data);
 
-            EMSCRIPTEN_KEEPALIVE inline int paste_return(char const* paste_data, paste_handler callback, void* callback_data) {
+            EMSCRIPTEN_KEEPALIVE inline int emscripten_browser_clipboard_detail_paste_return(char const* paste_data, paste_handler callback, void* callback_data) {
                 /// Call paste callback - this function is called from javascript when the paste event occurs
                 callback(paste_data, callback_data);
                 return 1;
             }
 
-            EMSCRIPTEN_KEEPALIVE inline char const* copy_return(copy_handler callback, void* callback_data);
+            EMSCRIPTEN_KEEPALIVE inline char const* emscripten_browser_clipboard_detail_copy_return(copy_handler callback, void* callback_data);
 
-            EMSCRIPTEN_KEEPALIVE inline char const* copy_return(copy_handler callback, void* callback_data) {
-                /// Call paste callback - this function is called from javascript when the paste event occurs
+            EMSCRIPTEN_KEEPALIVE inline char const* emscripten_browser_clipboard_detail_copy_return(copy_handler callback, void* callback_data) {
+                /// Call copy callback - this function is called from javascript when the copy event occurs
                 return callback(callback_data);
             }
 
         }
 
-    }
-
-}
+    } // namespace detail
 
-#endif // EMSCRIPTEN_BROWSER_CLIPBOARD_H_INCLUDED
+} // namespace emscripten_browser_clipboard
 
 #endif

devlog.md

@@ -1,19 +1,17 @@
-A month later, we're in the world wide web!
+These seven hours of devlogging time are mostly due to three things: partial derivatives, non-elementary functions and getting this project to work on the web. As you'll see, we got two out of three on this one!
 
-From the beginning of the project, I kept telling myself that I would, eventually, port it to Web Assembly. Many architectural choices were made with this in mind (not using compute shaders, sticking to version 330 features, using ImGUI for the frontend, not using a file system, etc). 
-I just knew that this would be sort of a headache, and kept delaying it, but it comes a time at our lives where we have to accept that not everyone wants to download a sketchy binary from github. So we had to port it to web assembly!
+First, our tool supports derivatives relative to z (denoted as `d/dz`). The rules for it are simple: anything that _isn't_ dependant on `z` is 0, and for things entirely dependant on it, we apply some rules according to a table.
+The problem is that `z = x + iy`, and each variable `x,y` is partially dependant on `z`. They can't be equal to 0, since `d/dz(x + iy) = d/dz(z) != d/dz(0)`. To fix this, we set some "sanity" rules, and set `d/dz(x) = 0.5` and `d/dz(y) = -0.5i`. This fixes our problem!
 
-For those not familiar with the tech, WebAssembly (wasm, for short), is essentially the low-level language of the web. The advantage is that it's faster than javascript, and many languages can compile down to it - and that includes C++!
-Our graphics core is entirely made in OpenGL, but thankfully, a tool named Emscripten also handles this conversion by turning OpenGL into WebGL (the web equivalent). So, we just had to rewrite our code to handle things specific to the web.
+Second, some users requested non-elementary functions (that is, functions we can only ever approximate, since their definitions are infinite). A good time was spent finding good, fast approximations, and most importantly fixing their 'explosions' to infinite, which at times resulted in their values becoming NaN. This is partially solved by first evaluating the function's logarithm (which grows far, faar slower), and exponentiating it back for its regular value.
 
-Our main change was the textures that we were using to send data to our shaders. Originally, this was done through `samplerBuffer`s, which don't exist in the version OpenGL runs. This made us have to change our data to 2D textures, `sampler2D`. This requires a little more math to get data from the texture, but it's small enough to be a change applied both to the desktop and web version (to avoid refactoring headache).
+Third, the web thing. I wanted to get two things working:
+1. Exporting plots as images. This worked _graciously_ well. It took me less than half an hour to get it working.
+2. Copy and pasting in the browser. I have wasted at least five hours of my life trying to get this to work. I've implemented every solution I've found in the internet to solve it. I reverse engineered an online library to see how it works and put it in my project. I can't get it to work. This is heavily due to the 'security' layer in web assembly that makes it very, very difficult to get text from the OS into the browser. After many hours, I officially gave up.
 
-The rest is changing the main loop logic (to be step-based), the event callbacks, and creeating a basic UI. Attached, our code running in the website! 
-
-Take a look for yourself in: https://sekqies.github.io/complex-plotter/
+Attached, some plots of our new functions!
 
 **Commits**
-[04e5437](https://url.jam06452.uk/1w417ue): Working web assembly build - ImGUI not working
-[181a62c](https://url.jam06452.uk/up08en): Finished web assembly porting
-[5ea3105](https://url.jam06452.uk/1s6zjmu): Add web deploy
-...and 7 other commits fixing github
+3f015c0: Add exporting plots as images
+f3271a2: Added popup when exporting
+7255bf4: Implemented the zeta and gamma function

src/graphics/ui.cpp

@@ -7,16 +7,55 @@
 #include <iostream>
 
 #include <imgui.h>
+#include <imgui_internal.h>
+#include <imstb_textedit.h>
 #include <imgui_stdlib.h>
 
 #include <interactions/export.h>
 
 
+#ifdef __EMSCRIPTEN__
+#include <emscripten_browser_clipboard.h>
+
+#endif
+
+
 using string = std::string;
 using glm::vec2;
 
 const float DEBOUNCE_DELAY = 0.05f;
 
+
+
+
+
+static int FunctionInputCallback(ImGuiInputTextCallbackData* data) {
+    FunctionState* state = (FunctionState*)data->UserData;
+    if (data->HasSelection()) {
+        state->selected_text = state->expression.substr(
+            data->SelectionStart,
+            data->SelectionEnd - data->SelectionStart
+        );
+    }
+    else {
+        state->selected_text = "";
+    }
+
+#ifdef __EMSCRIPTEN__
+    if (just_pasted) {
+        if (data->HasSelection()) {
+            data->DeleteChars(data->SelectionStart, data->SelectionEnd - data->SelectionStart);
+        }
+        data->InsertChars(data->CursorPos, clip_content.c_str());
+        just_pasted = false;
+        clip_content.clear();
+        state->needs_reparse = true;
+    }
+#endif
+    return 0;
+}
+
+
 namespace UI {
     bool Button(const char* label, const ImVec2& size = ImVec2(0, 0)) {
         bool clicked = ImGui::Button(label, size);
@@ -139,7 +178,22 @@ void render_inspector_overlay(const PickerResult& hover, ViewState& view_state)
 }
 
 
+
 void render_and_update(FunctionState& state, ViewState& view_state, unsigned int& op_tex, unsigned int& const_tex, Shader& interpreter_shader, CompilerShader& compiler_shader) {
+    #ifdef __EMSCRIPTEN__
+    static bool clipboard_initialized = false;
+    if (!clipboard_initialized) {
+        emscripten_browser_clipboard::copy([](void* callback_data) -> const char* {
+            FunctionState* s = static_cast<FunctionState*>(callback_data);
+            if (!s->selected_text.empty()) {
+                return s->selected_text.c_str();
+            }
+            return s->expression.c_str();
+        }, (void*)&state);
+
+        clipboard_initialized = true;
+    }
+    #endif
     state.is_3d = view_state.is_3d;
     ImGui::Begin("Function Editor", nullptr, ImGuiWindowFlags_AlwaysAutoResize);
     ImGui::SameLine();
@@ -157,11 +211,30 @@ void render_and_update(FunctionState& state, ViewState& view_state, unsigned int
     ImGui::SameLine();
 
     static bool auto_reparse = true;
-
     bool pressed_enter = ImGui::InputText("##source",
         &state.expression,
-        ImGuiInputTextFlags_EnterReturnsTrue);
-
+        ImGuiInputTextFlags_EnterReturnsTrue | ImGuiInputTextFlags_CallbackAlways,
+        FunctionInputCallback,
+        (void*)&state);
+    if (ImGui::IsItemActive()) {
+        ImGuiInputTextState* edit_state = ImGui::GetInputTextState(ImGui::GetActiveID());
+
+        if (edit_state && edit_state->HasSelection()) {
+            int start = edit_state->GetSelectionStart();
+            int end = edit_state->GetSelectionEnd();
+
+            int real_start = std::min(start, end);
+            int real_end = std::max(start, end);
+
+            if (real_start < (int)state.expression.length()) {
+                int len = std::min((int)state.expression.length() - real_start, real_end - real_start);
+                state.selected_text = state.expression.substr(real_start, len);
+            }
+        }
+        else {
+            state.selected_text = "";
+        }
+    }
     bool typed = ImGui::IsItemEdited();
 
     if (typed && !pressed_enter && auto_reparse) {
@@ -233,6 +306,12 @@ void render_and_update(FunctionState& state, ViewState& view_state, unsigned int
             ImGui::Unindent();
         }
     }
+    if (ImGui::Button("Test Clipboard Callbacks")) {
+        ImGui::SetClipboardText("Testing 123");
+
+        const char* text = ImGui::GetClipboardText();
+        std::cout << "Manual check: " << (text ? text : "NULL") << std::endl;
+    }
 
     if (UI::CollapsingHeader("3D Keybinds")) {
         ImGui::BulletText("WASD: Move");

src/graphics/ui.h

@@ -12,6 +12,7 @@ struct PickerResult;
 typedef struct FunctionState {
 	Shader* current_shader = nullptr;
 	std::string expression = "z";
+	std::string selected_text = "";
 	std::string error_message = "";
 	float last_typing_time = 0.0f;
 	bool needs_reparse = true;

src/graphics/ui_init.cpp

@@ -1,4 +1,12 @@
 #include <graphics/ui_init.h>
+#include <string>
+#include <iostream>
+#include <iomanip>
+#ifdef __EMSCRIPTEN__
+#include <emscripten_browser_clipboard.h>
+#include <emscripten.h>
+
+#endif
 
 
 
@@ -10,14 +18,18 @@ void init_imgui(GLFWwindow* window) {
 	io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
 	io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;
 	io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;
-
 	ImGui_ImplGlfw_InitForOpenGL(window, true);
-	#ifdef __EMSCRIPTEN__
-		ImGui_ImplOpenGL3_Init("#version 300 es");
-		ImGui::GetIO().ConfigFlags |= ImGuiConfigFlags_NoMouseCursorChange;
-	#else
-		ImGui_ImplOpenGL3_Init();
-	#endif
+#ifdef __EMSCRIPTEN__
+
+	emscripten_browser_clipboard::paste([](std::string&& paste_data, void* callback_data) {
+		clip_content = std::move(paste_data);
+		just_pasted = true;
+		}, nullptr); 
+	
+	ImGui_ImplOpenGL3_Init("#version 300 es");
+#else
+	ImGui_ImplOpenGL3_Init();
+#endif
 }
 
 void init_imgui_loop() {

src/graphics/ui_init.h

@@ -11,4 +11,11 @@ void init_imgui_loop();
 
 void render_imgui();
 
-void shutdown_imgui();
+void shutdown_imgui();
+
+
+#ifdef __EMSCRIPTEN__
+#include <string>
+inline bool just_pasted = false;
+inline std::string clip_content;
+#endif