Merge pull request #42266 from Faless/js/3.0_sync_fs_size_handlers

[3.2] [HTML5] Synchronous main, better persistence, handlers fixes, optional full screen.

misc/dist/html/full-size.html

@@ -146,6 +146,7 @@ $GODOT_HEAD_INCLUDE
 			const EXECUTABLE_NAME = '$GODOT_BASENAME';
 			const MAIN_PACK = '$GODOT_BASENAME.pck';
 			const INDETERMINATE_STATUS_STEP_MS = 100;
+			const FULL_WINDOW = $GODOT_FULL_WINDOW;
 
 			var canvas = document.getElementById('canvas');
 			var statusProgress = document.getElementById('status-progress');
@@ -155,6 +156,9 @@ $GODOT_HEAD_INCLUDE
 
 			var initializing = true;
 			var statusMode = 'hidden';
+			var lastWidth = 0;
+			var lastHeight = 0;
+			var lastScale = 0;
 
 			var animationCallbacks = [];
 			function animate(time) {
@@ -164,16 +168,23 @@ $GODOT_HEAD_INCLUDE
 			requestAnimationFrame(animate);
 
 			function adjustCanvasDimensions() {
-				var scale = window.devicePixelRatio || 1;
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				canvas.width = width * scale;
-				canvas.height = height * scale;
-				canvas.style.width = width + "px";
-				canvas.style.height = height + "px";
+				const scale = window.devicePixelRatio || 1;
+				if (lastWidth != window.innerWidth || lastHeight != window.innerHeight || lastScale != scale) {
+					lastScale = scale;
+					lastWidth = window.innerWidth;
+					lastHeight = window.innerHeight;
+					canvas.width = Math.floor(lastWidth * scale);
+					canvas.height = Math.floor(lastHeight * scale);
+					canvas.style.width = lastWidth + "px";
+					canvas.style.height = lastHeight + "px";
+				}
+			}
+			if (FULL_WINDOW) {
+				animationCallbacks.push(adjustCanvasDimensions);
+				adjustCanvasDimensions();
+			} else {
+				engine.setCanvasResizedOnStart(true);
 			}
-			animationCallbacks.push(adjustCanvasDimensions);
-			adjustCanvasDimensions();
 
 			setStatusMode = function setStatusMode(mode) {
 

platform/javascript/engine/engine.js

@@ -33,6 +33,7 @@ Function('return this')()['Engine'] = (function() {
 		this.resizeCanvasOnStart = false;
 		this.onExecute = null;
 		this.onExit = null;
+		this.persistentPaths = [];
 	};
 
 	Engine.prototype.init = /** @param {string=} basePath */ function(basePath) {
@@ -56,12 +57,14 @@ Function('return this')()['Engine'] = (function() {
 			config['locateFile'] = Utils.createLocateRewrite(loadPath);
 			config['instantiateWasm'] = Utils.createInstantiatePromise(loadPromise);
 			Godot(config).then(function(module) {
-				me.rtenv = module;
-				if (unloadAfterInit) {
-					unload();
-				}
-				resolve();
-				config = null;
+				module['initFS'](me.persistentPaths).then(function(fs_err) {
+					me.rtenv = module;
+					if (unloadAfterInit) {
+						unload();
+					}
+					resolve();
+					config = null;
+				});
 			});
 		});
 		return initPromise;
@@ -220,6 +223,10 @@ Function('return this')()['Engine'] = (function() {
 		this.rtenv['copyToFS'](path, buffer);
 	}
 
+	Engine.prototype.setPersistentPaths = function(persistentPaths) {
+		this.persistentPaths = persistentPaths;
+	};
+
 	// Closure compiler exported engine methods.
 	/** @export */
 	Engine['isWebGLAvailable'] = Utils.isWebGLAvailable;
@@ -241,5 +248,6 @@ Function('return this')()['Engine'] = (function() {
 	Engine.prototype['setOnExecute'] = Engine.prototype.setOnExecute;
 	Engine.prototype['setOnExit'] = Engine.prototype.setOnExit;
 	Engine.prototype['copyToFS'] = Engine.prototype.copyToFS;
+	Engine.prototype['setPersistentPaths'] = Engine.prototype.setPersistentPaths;
 	return Engine;
 })();

platform/javascript/export/export.cpp

@@ -254,6 +254,7 @@ void EditorExportPlatformJavaScript::_fix_html(Vector<uint8_t> &p_html, const Re
 		current_line = current_line.replace("$GODOT_BASENAME", p_name);
 		current_line = current_line.replace("$GODOT_PROJECT_NAME", ProjectSettings::get_singleton()->get_setting("application/config/name"));
 		current_line = current_line.replace("$GODOT_HEAD_INCLUDE", p_preset->get("html/head_include"));
+		current_line = current_line.replace("$GODOT_FULL_WINDOW", p_preset->get("html/full_window_size") ? "true" : "false");
 		current_line = current_line.replace("$GODOT_DEBUG_ENABLED", p_debug ? "true" : "false");
 		str_export += current_line + "\n";
 	}
@@ -290,6 +291,7 @@ void EditorExportPlatformJavaScript::get_export_options(List<ExportOption> *r_op
 	r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "vram_texture_compression/for_mobile"), false)); // ETC or ETC2, depending on renderer
 	r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "html/custom_html_shell", PROPERTY_HINT_FILE, "*.html"), ""));
 	r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "html/head_include", PROPERTY_HINT_MULTILINE_TEXT), ""));
+	r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "html/full_window_size"), true));
 	r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "custom_template/release", PROPERTY_HINT_GLOBAL_FILE, "*.zip"), ""));
 	r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "custom_template/debug", PROPERTY_HINT_GLOBAL_FILE, "*.zip"), ""));
 }

platform/javascript/javascript_main.cpp

@@ -50,6 +50,12 @@ extern "C" EMSCRIPTEN_KEEPALIVE void _drop_files_callback(char *p_filev[], int p
 	os->get_main_loop()->drop_files(files);
 }
 
+extern "C" EMSCRIPTEN_KEEPALIVE void _request_quit_callback(char *p_filev[], int p_filec) {
+	if (os && os->get_main_loop()) {
+		os->get_main_loop()->notification(MainLoop::NOTIFICATION_WM_QUIT_REQUEST);
+	}
+}
+
 void exit_callback() {
 	emscripten_cancel_main_loop(); // After this, we can exit!
 	Main::cleanup();
@@ -88,12 +94,27 @@ void main_loop_callback() {
 		/* clang-format on */
 		os->get_main_loop()->finish();
 		os->finalize_async(); // Will add all the async finish functions.
+		/* clang-format off */
 		EM_ASM({
 			Promise.all(Module.async_finish).then(function() {
 				Module.async_finish = [];
+				return new Promise(function(accept, reject) {
+					if (!Module.idbfs) {
+						accept();
+						return;
+					}
+					FS.syncfs(function(error) {
+						if (error) {
+							err('Failed to save IDB file system: ' + error.message);
+						}
+						accept();
+					});
+				});
+			}).then(function() {
 				ccall("cleanup_after_sync", null, []);
 			});
 		});
+		/* clang-format on */
 	}
 }
 
@@ -101,13 +122,8 @@ extern "C" EMSCRIPTEN_KEEPALIVE void cleanup_after_sync() {
 	emscripten_set_main_loop(exit_callback, -1, false);
 }
 
-extern "C" EMSCRIPTEN_KEEPALIVE void main_after_fs_sync(char *p_idbfs_err) {
-	// Set IDBFS status
-	String idbfs_err = String::utf8(p_idbfs_err);
-	if (!idbfs_err.empty()) {
-		print_line("IndexedDB not available: " + idbfs_err);
-	}
-	os->set_idb_available(idbfs_err.empty());
+int main(int argc, char *argv[]) {
+	os = new OS_JavaScript(argc, argv);
 
 	// Set canvas ID
 	char canvas_ptr[256];
@@ -127,40 +143,22 @@ extern "C" EMSCRIPTEN_KEEPALIVE void main_after_fs_sync(char *p_idbfs_err) {
 	/* clang-format on */
 	setenv("LANG", locale_ptr, true);
 
-	Main::setup2();
+	// Set IDBFS status
+	os->set_idb_available((bool)EM_ASM_INT({ return Module.idbfs }));
+
+	Main::setup(argv[0], argc - 1, &argv[1]);
 	// Ease up compatibility.
 	ResourceLoader::set_abort_on_missing_resources(false);
 	Main::start();
 	os->get_main_loop()->init();
-	// Immediately run the first iteration.
-	// We are inside an animation frame, we want to immediately draw on the newly setup canvas.
-	main_loop_callback();
-	emscripten_resume_main_loop();
-}
-
-int main(int argc, char *argv[]) {
-	// Create and mount userfs immediately.
+	// Expose method for requesting quit.
 	EM_ASM({
-		FS.mkdir('/userfs');
-		FS.mount(IDBFS, {}, '/userfs');
+		Module['request_quit'] = function() {
+			ccall("_request_quit_callback", null, []);
+		};
 	});
-	os = new OS_JavaScript(argc, argv);
-	Main::setup(argv[0], argc - 1, &argv[1], false);
 	emscripten_set_main_loop(main_loop_callback, -1, false);
-	emscripten_pause_main_loop(); // Will need to wait for FS sync.
-
-	// Sync from persistent state into memory and then
-	// run the 'main_after_fs_sync' function.
-	/* clang-format off */
-	EM_ASM({
-		FS.syncfs(true, function(err) {
-			requestAnimationFrame(function() {
-				ccall('main_after_fs_sync', null, ['string'], [err ? err.message : ""]);
-			});
-		});
-	});
-	/* clang-format on */
-
-	return 0;
-	// Continued async in main_after_fs_sync() from the syncfs() callback.
+	// Immediately run the first iteration.
+	// We are inside an animation frame, we want to immediately draw on the newly setup canvas.
+	main_loop_callback();
 }

platform/javascript/native/utils.js

@@ -28,6 +28,38 @@
 /* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                */
 /*************************************************************************/
 
+Module['initFS'] = function(persistentPaths) {
+	FS.mkdir('/userfs');
+	FS.mount(IDBFS, {}, '/userfs');
+
+	function createRecursive(dir) {
+		try {
+			FS.stat(dir);
+		} catch (e) {
+			if (e.errno !== ERRNO_CODES.ENOENT) {
+				throw e;
+			}
+			FS.mkdirTree(dir);
+		}
+	}
+
+	persistentPaths.forEach(function(path) {
+		createRecursive(path);
+		FS.mount(IDBFS, {}, path);
+	});
+	return new Promise(function(resolve, reject) {
+		FS.syncfs(true, function(err) {
+			if (err) {
+				Module.idbfs = false;
+				console.log("IndexedDB not available: " + err.message);
+			} else {
+				Module.idbfs = true;
+			}
+			resolve(err);
+		});
+	});
+};
+
 Module['copyToFS'] = function(path, buffer) {
 	var p = path.lastIndexOf("/");
 	var dir = "/";
@@ -37,7 +69,7 @@ Module['copyToFS'] = function(path, buffer) {
 	try {
 		FS.stat(dir);
 	} catch (e) {
-		if (e.errno !== ERRNO_CODES.ENOENT) { // 'ENOENT', see https://github.com/emscripten-core/emscripten/blob/master/system/lib/libc/musl/arch/emscripten/bits/errno.h
+		if (e.errno !== ERRNO_CODES.ENOENT) {
 			throw e;
 		}
 		FS.mkdirTree(dir);
@@ -202,3 +234,44 @@ Module.drop_handler = (function() {
 		});
 	}
 })();
+
+function EventHandlers() {
+	function Handler(target, event, method, capture) {
+		this.target = target;
+		this.event = event;
+		this.method = method;
+		this.capture = capture;
+	}
+
+	var listeners = [];
+
+	function has(target, event, method, capture) {
+		return listeners.findIndex(function(e) {
+			return e.target === target && e.event === event && e.method === method && e.capture == capture;
+		}) !== -1;
+	}
+
+	this.add = function(target, event, method, capture) {
+		if (has(target, event, method, capture)) {
+			return;
+		}
+		listeners.push(new Handler(target, event, method, capture));
+		target.addEventListener(event, method, capture);
+	};
+
+	this.remove = function(target, event, method, capture) {
+		if (!has(target, event, method, capture)) {
+			return;
+		}
+		target.removeEventListener(event, method, capture);
+	};
+
+	this.clear = function() {
+		listeners.forEach(function(h) {
+			h.target.removeEventListener(h.event, h.method, h.capture);
+		});
+		listeners.length = 0;
+	};
+}
+
+Module.listeners = new EventHandlers();

platform/javascript/os_javascript.cpp

@@ -101,7 +101,7 @@ bool OS_JavaScript::check_size_force_redraw() {
 	if (last_width != canvas_width || last_height != canvas_height) {
 		last_width = canvas_width;
 		last_height = canvas_height;
-		// Update the framebuffer size and for redraw.
+		// Update the framebuffer size for redraw.
 		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), canvas_width, canvas_height);
 		return true;
 	}
@@ -159,7 +159,11 @@ void OS_JavaScript::set_window_size(const Size2 p_size) {
 			emscripten_exit_soft_fullscreen();
 			window_maximized = false;
 		}
-		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), p_size.x, p_size.y);
+		double scale = EM_ASM_DOUBLE({
+			return window.devicePixelRatio || 1;
+		});
+		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), p_size.x * scale, p_size.y * scale);
+		emscripten_set_element_css_size(canvas_id.utf8().get_data(), p_size.x, p_size.y);
 	}
 }
 
@@ -1029,15 +1033,18 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
 #define SET_EM_CALLBACK(target, ev, cb)                               \
 	result = emscripten_set_##ev##_callback(target, NULL, true, &cb); \
 	EM_CHECK(ev)
+#define SET_EM_WINDOW_CALLBACK(ev, cb)                                                         \
+	result = emscripten_set_##ev##_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, NULL, false, &cb); \
+	EM_CHECK(ev)
 #define SET_EM_CALLBACK_NOTARGET(ev, cb)                      \
 	result = emscripten_set_##ev##_callback(NULL, true, &cb); \
 	EM_CHECK(ev)
 	// These callbacks from Emscripten's html5.h suffice to access most
 	// JavaScript APIs. For APIs that are not (sufficiently) exposed, EM_ASM
 	// is used below.
-	SET_EM_CALLBACK(EMSCRIPTEN_EVENT_TARGET_WINDOW, mousemove, mousemove_callback)
 	SET_EM_CALLBACK(id.get_data(), mousedown, mouse_button_callback)
-	SET_EM_CALLBACK(EMSCRIPTEN_EVENT_TARGET_WINDOW, mouseup, mouse_button_callback)
+	SET_EM_WINDOW_CALLBACK(mousemove, mousemove_callback)
+	SET_EM_WINDOW_CALLBACK(mouseup, mouse_button_callback)
 	SET_EM_CALLBACK(id.get_data(), wheel, wheel_callback)
 	SET_EM_CALLBACK(id.get_data(), touchstart, touch_press_callback)
 	SET_EM_CALLBACK(id.get_data(), touchmove, touchmove_callback)
@@ -1055,38 +1062,30 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
 
 	/* clang-format off */
 	EM_ASM({
-		Module.listeners = {};
+		// Bind native event listeners.
+		// Module.listeners, and Module.drop_handler are defined in native/utils.js
 		const canvas = Module['canvas'];
 		const send_notification = cwrap('send_notification', null, ['number']);
 		const notifications = arguments;
 		(['mouseover', 'mouseleave', 'focus', 'blur']).forEach(function(event, index) {
-			Module.listeners[event] = send_notification.bind(null, notifications[index]);
-			canvas.addEventListener(event, Module.listeners[event]);
+			Module.listeners.add(canvas, event, send_notification.bind(null, notifications[index]), true);
 		});
 		// Clipboard
 		const update_clipboard = cwrap('update_clipboard', null, ['string']);
-		Module.listeners['paste'] = function(evt) {
+		Module.listeners.add(window, 'paste', function(evt) {
 			update_clipboard(evt.clipboardData.getData('text'));
-		};
-		window.addEventListener('paste', Module.listeners['paste'], true);
-		Module.listeners['dragover'] = function(ev) {
+		}, false);
+		// Drag an drop
+		Module.listeners.add(canvas, 'dragover', function(ev) {
 			// Prevent default behavior (which would try to open the file(s))
 			ev.preventDefault();
-		};
-		// Drag an drop
-		Module.listeners['drop'] = Module.drop_handler; // Defined in native/utils.js
-		canvas.addEventListener('dragover', Module.listeners['dragover'], false);
-		canvas.addEventListener('drop', Module.listeners['drop'], false);
-		// Quit request
-		Module['request_quit'] = function() {
-			send_notification(notifications[notifications.length - 1]);
-		};
+		}, false);
+		Module.listeners.add(canvas, 'drop', Module.drop_handler, false);
 	},
 		MainLoop::NOTIFICATION_WM_MOUSE_ENTER,
 		MainLoop::NOTIFICATION_WM_MOUSE_EXIT,
 		MainLoop::NOTIFICATION_WM_FOCUS_IN,
-		MainLoop::NOTIFICATION_WM_FOCUS_OUT,
-		MainLoop::NOTIFICATION_WM_QUIT_REQUEST
+		MainLoop::NOTIFICATION_WM_FOCUS_OUT
 	);
 	/* clang-format on */
 
@@ -1120,24 +1119,25 @@ void OS_JavaScript::resume_audio() {
 	}
 }
 
-bool OS_JavaScript::main_loop_iterate() {
-
-	if (is_userfs_persistent() && sync_wait_time >= 0) {
-		int64_t current_time = get_ticks_msec();
-		int64_t elapsed_time = current_time - last_sync_check_time;
-		last_sync_check_time = current_time;
+extern "C" EMSCRIPTEN_KEEPALIVE void _idb_synced() {
+	OS_JavaScript::get_singleton()->idb_is_syncing = false;
+}
 
-		sync_wait_time -= elapsed_time;
+bool OS_JavaScript::main_loop_iterate() {
 
-		if (sync_wait_time < 0) {
-			/* clang-format off */
-			EM_ASM(
-				FS.syncfs(function(error) {
-					if (error) { err('Failed to save IDB file system: ' + error.message); }
-				});
-			);
-			/* clang-format on */
-		}
+	if (is_userfs_persistent() && idb_needs_sync && !idb_is_syncing) {
+		idb_is_syncing = true;
+		idb_needs_sync = false;
+		/* clang-format off */
+		EM_ASM(
+			FS.syncfs(function(error) {
+				if (error) {
+					err('Failed to save IDB file system: ' + error.message);
+				}
+				ccall("_idb_synced", 'void', [], []);
+			});
+		);
+		/* clang-format on */
 	}
 
 	if (emscripten_sample_gamepad_data() == EMSCRIPTEN_RESULT_SUCCESS)
@@ -1152,9 +1152,8 @@ bool OS_JavaScript::main_loop_iterate() {
 			strategy.canvasResizedCallback = NULL;
 			emscripten_enter_soft_fullscreen(canvas_id.utf8().get_data(), &strategy);
 		} else {
-			emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), windowed_size.width, windowed_size.height);
+			set_window_size(Size2(windowed_size.width, windowed_size.height));
 		}
-		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), windowed_size.width, windowed_size.height);
 		just_exited_fullscreen = false;
 	}
 
@@ -1176,17 +1175,11 @@ void OS_JavaScript::delete_main_loop() {
 }
 
 void OS_JavaScript::finalize_async() {
+	/* clang-format off */
 	EM_ASM({
-		const canvas = Module['canvas'];
-		Object.entries(Module.listeners).forEach(function(kv) {
-			if (kv[0] == 'paste') {
-				window.removeEventListener(kv[0], kv[1], true);
-			} else {
-				canvas.removeEventListener(kv[0], kv[1]);
-			}
-		});
-		Module.listeners = {};
+		Module.listeners.clear();
 	});
+	/* clang-format on */
 	if (audio_driver_javascript) {
 		audio_driver_javascript->finish_async();
 	}
@@ -1397,10 +1390,17 @@ int OS_JavaScript::get_power_percent_left() {
 void OS_JavaScript::file_access_close_callback(const String &p_file, int p_flags) {
 
 	OS_JavaScript *os = get_singleton();
-	if (os->is_userfs_persistent() && p_file.begins_with("/userfs") && p_flags & FileAccess::WRITE) {
-		os->last_sync_check_time = OS::get_singleton()->get_ticks_msec();
-		// Wait five seconds in case more files are about to be closed.
-		os->sync_wait_time = 5000;
+
+	if (!(os->is_userfs_persistent() && p_flags & FileAccess::WRITE)) {
+		return; // FS persistence is not working or we are not writing.
+	}
+	bool is_file_persistent = p_file.begins_with("/userfs");
+#ifdef TOOLS_ENABLED
+	// Hack for editor persistence (can we track).
+	is_file_persistent = is_file_persistent || p_file.begins_with("/home/web_user/");
+#endif
+	if (is_file_persistent) {
+		os->idb_needs_sync = true;
 	}
 }
 
@@ -1445,7 +1445,8 @@ OS_JavaScript::OS_JavaScript(int p_argc, char *p_argv[]) {
 
 	swap_ok_cancel = false;
 	idb_available = false;
-	sync_wait_time = -1;
+	idb_needs_sync = false;
+	idb_is_syncing = false;
 
 	if (AudioDriverJavaScript::is_available()) {
 		audio_driver_javascript = memnew(AudioDriverJavaScript);

platform/javascript/os_javascript.h

@@ -71,8 +71,7 @@ class OS_JavaScript : public OS_Unix {
 
 	bool swap_ok_cancel;
 	bool idb_available;
-	int64_t sync_wait_time;
-	int64_t last_sync_check_time;
+	bool idb_needs_sync;
 
 	static EM_BOOL fullscreen_change_callback(int p_event_type, const EmscriptenFullscreenChangeEvent *p_event, void *p_user_data);
 
@@ -110,6 +109,7 @@ protected:
 
 public:
 	String canvas_id;
+	bool idb_is_syncing;
 	void finalize_async();
 	bool check_size_force_redraw();