add web sync files and key events

webgl/CMakeLists.txt

@@ -94,7 +94,7 @@ add_executable(panopainter
     ../src/node_input_box.cpp
     ../src/node_dialog_export_ppbr.cpp
 )
-target_compile_options(panopainter PRIVATE -std=c++14 -O2)
+target_compile_options(panopainter PRIVATE -std=c++14 -O3)
 set_target_properties(panopainter PROPERTIES 
     SUFFIX ".html"
     RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/html"
@@ -105,8 +105,6 @@ set_target_properties(panopainter PROPERTIES
         -s USE_PTHREADS=1\
         -s ASSERTIONS=2\
         -s TOTAL_MEMORY=256Mb\
-        -s ALLOW_MEMORY_GROWTH=1\
-        -s WASM_MEM_MAX=512MB\
         --embed-file data\
         --js-library ../src/mylib.js\
         --bind"

webgl/src/main.cpp

@@ -6,6 +6,7 @@
 #include <chrono>
 #include <app.h>
 #include <fstream>
+#include <keymap.h>
 
 using namespace emscripten;
 
@@ -105,6 +106,22 @@ void CanvasOnPointerMove(std::string type, float x, float y, float f)
     });
 }
 
+void StartApp()
+{
+    App::I = &app;
+    app.initLog();
+    app.create();
+    app.width = 1024;
+    app.height = 768;
+    app.glfw_window = wnd;
+
+    // app.render_thread_tick();
+    // app.ui_thread_tick();
+    app.ui_task_async([]{
+        app.init();
+    });
+}
+
 EMSCRIPTEN_BINDINGS(TaskCallback_bind) {
     class_<TaskCallback<void(std::string)>>("TaskCallbackOpen");
     class_<TaskCallback<void(bool)>>("TaskCallbackSave");
@@ -116,9 +133,11 @@ EMSCRIPTEN_BINDINGS(TaskCallback_bind) {
     function("CanvasOnPointerDown", &CanvasOnPointerDown);
     function("CanvasOnPointerUp", &CanvasOnPointerUp);
     function("CanvasOnPointerMove", &CanvasOnPointerMove);
+    function("StartApp", &StartApp);
 }
 
 extern "C" {
+extern void js_sync();
 extern void js_pick_file(TaskCallback<void(std::string)>* tc);
 extern void js_pick_file_save(std::string path, std::string name, TaskCallback<void(bool)>* tc);
 }
@@ -128,6 +147,7 @@ void webgl_pick_file(std::function<void(std::string)> callback)
     js_pick_file(new TaskCallback<void(std::string)>([callback](std::string tmp_file_path){ 
         printf("callback called: %s\n", tmp_file_path.c_str());
         callback(tmp_file_path);
+        js_sync();
     }));
 }
 
@@ -137,9 +157,17 @@ void webgl_pick_file_save(const std::string& path,
     js_pick_file_save(path, name, new TaskCallback<void(bool)>([callback](bool success){ 
         printf("save callback called: %s\n", success ? "ok" : "failed");
         callback(success);
+        js_sync();
     }));
 }
 
+void webgl_sync()
+{
+    app.ui_task_async([]{
+        js_sync();
+    });
+}
+
 void main_loop()
 {
     app.render_thread_tick();
@@ -178,6 +206,25 @@ int main()
         });
     });
 */
+    glfwSetKeyCallback(wnd, [](GLFWwindow* wnd, int key, int scancode, int action, int mods){
+        app.ui_task_async([=]{
+            if (action == GLFW_PRESS)
+                app.key_down(convert_key(key));
+            else if (action == GLFW_RELEASE)
+                app.key_up(convert_key(key));
+        });
+    });
+    glfwSetCharCallback(wnd, [](GLFWwindow* wnd, unsigned int codepoint){
+        std::wstring_convert<std::codecvt_utf8<char32_t>, char32_t> converter;
+        std::string u8str = converter.to_bytes(codepoint);
+        if (!u8str.empty())
+        {
+            app.ui_task_async([c=u8str[0]]{
+                app.key_char(c);
+            });
+        }
+        LOG("codepoint: %du -> %s", codepoint, u8str.c_str());
+    });
     glfwSetWindowSizeCallback(wnd, [](GLFWwindow* wnd, int width, int height){
         app.ui_task_async([=]{
             app.resize(width, height);
@@ -209,6 +256,14 @@ int main()
             Module.CanvasOnPointerUp(event.pointerType, event.layerX, event.layerY, event.button);
         };
         Module.canvas.style.touchAction = 'none';
+        Module.js_fs_synching = false;
+        FS.mkdir('/PanoPainter');
+        FS.mount(IDBFS, {}, '/PanoPainter');
+        FS.syncfs(true, function (err) {
+            console.log("syncFS result:");
+            console.log(err);
+            Module.StartApp();
+        });
     );
 
     printf("GL version: %s\n", glGetString(GL_VERSION));
@@ -216,19 +271,6 @@ int main()
     printf("GL renderer: %s\n", glGetString(GL_RENDERER));
     printf("GLSL version: %s\n", glGetString(GL_SHADING_LANGUAGE_VERSION));
 
-    App::I = &app;
-    app.initLog();
-    app.create();
-    app.width = 1024;
-    app.height = 768;
-    app.glfw_window = wnd;
-
-    // app.render_thread_tick();
-    // app.ui_thread_tick();
-    app.ui_task_async([]{
-        app.init();
-    });
-
     LOG("start threads");
     //app.render_thread_start();
     // app.ui_thread_start();

webgl/src/mylib.js

@@ -1,3 +1,13 @@
+function js_sync() {
+  if (Module.js_fs_synching)
+    return;
+  Module.js_fs_synching = true;
+  FS.syncfs(function (err) {
+    console.log("syncFS result:");
+    console.log(err);
+    Module.js_fs_synching = false;
+  });
+}
 function js_pick_file(fn) {
     var input = document.createElement('input');
     input.type = 'file';
@@ -55,6 +65,7 @@ function js_pick_file_save(path, name, fn) {
 }
 
 mergeInto(LibraryManager.library, {
+  js_sync: js_sync,
   js_pick_file: js_pick_file,
   js_pick_file_save: js_pick_file_save,
 });