Add window features in web export

 - Add 'window' (canvas) resize, maximize and fullscreen
 - Implement get_screen_size
 - Fix fullscreen resolution

platform/javascript/os_javascript.cpp

@@ -78,6 +78,59 @@ void OS_JavaScript::set_opengl_extensions(const char* p_gl_extensions) {
 	gl_extensions=p_gl_extensions;
 }
 
+static EM_BOOL _browser_resize_callback(int event_type, const EmscriptenUiEvent *ui_event, void *user_data) {
+
+	ERR_FAIL_COND_V(event_type!=EMSCRIPTEN_EVENT_RESIZE, false);
+
+	OS_JavaScript* os = static_cast<OS_JavaScript*>(user_data);
+
+	// the order in which _browser_resize_callback and
+	// _fullscreen_change_callback are called is browser-dependent,
+	// so try adjusting for fullscreen in both
+	if (os->is_window_fullscreen() || os->is_window_maximized()) {
+
+		OS::VideoMode vm = os->get_video_mode();
+		vm.width = ui_event->windowInnerWidth;
+		vm.height = ui_event->windowInnerHeight;
+		os->set_video_mode(vm);
+		emscripten_set_canvas_size(ui_event->windowInnerWidth, ui_event->windowInnerHeight);
+	}
+	return false;
+}
+
+static Size2 _windowed_size;
+
+static EM_BOOL _fullscreen_change_callback(int event_type, const EmscriptenFullscreenChangeEvent *event, void *user_data) {
+
+	ERR_FAIL_COND_V(event_type!=EMSCRIPTEN_EVENT_FULLSCREENCHANGE, false);
+
+	OS_JavaScript* os = static_cast<OS_JavaScript*>(user_data);
+	String id = String::utf8(event->id);
+
+	// empty id is canvas
+	if (id.empty() || id=="canvas") {
+
+		OS::VideoMode vm = os->get_video_mode();
+		// this event property is the only reliable information on
+		// browser fullscreen state
+		vm.fullscreen = event->isFullscreen;
+
+		if (event->isFullscreen) {
+			vm.width = event->screenWidth;
+			vm.height = event->screenHeight;
+			os->set_video_mode(vm);
+			emscripten_set_canvas_size(vm.width, vm.height);
+		}
+		else {
+			os->set_video_mode(vm);
+			if (!os->is_window_maximized()) {
+				os->set_window_size(_windowed_size);
+			}
+		}
+	}
+	return false;
+}
+
 static InputEvent _setup_key_event(const EmscriptenKeyboardEvent *emscripten_event) {
 
 	InputEvent ev;
@@ -154,7 +207,11 @@ void OS_JavaScript::initialize(const VideoMode& p_desired,int p_video_driver,int
 	if (gfx_init_func)
 		gfx_init_func(gfx_init_ud,use_gl2,p_desired.width,p_desired.height,p_desired.fullscreen);
 
-	default_videomode=p_desired;
+	// nothing to do here, can't fulfil fullscreen request due to
+	// browser security, window size is already set from HTML
+	video_mode=p_desired;
+	video_mode.fullscreen=false;
+	_windowed_size=get_window_size();
 
 	// find locale, emscripten only sets "C"
 	char locale_ptr[16];
@@ -232,26 +289,23 @@ void OS_JavaScript::initialize(const VideoMode& p_desired,int p_video_driver,int
 
 	input = memnew( InputDefault );
 
-	EMSCRIPTEN_RESULT result = emscripten_set_keydown_callback(NULL, this , true, &_keydown_callback);
-	if (result!=EMSCRIPTEN_RESULT_SUCCESS) {
-		ERR_PRINTS( "Error while setting Emscripten keydown callback: Code " + itos(result) );
-	}
-	result = emscripten_set_keypress_callback(NULL, this, true, &_keypress_callback);
-	if (result!=EMSCRIPTEN_RESULT_SUCCESS) {
-		ERR_PRINTS( "Error while setting Emscripten keypress callback: Code " + itos(result) );
-	}
-	result = emscripten_set_keyup_callback(NULL, this, true, &_keyup_callback);
-	if (result!=EMSCRIPTEN_RESULT_SUCCESS) {
-		ERR_PRINTS( "Error while setting Emscripten keyup callback: Code " + itos(result) );
-	}
-	result = emscripten_set_gamepadconnected_callback(NULL, true, &joy_callback_func);
-	if (result!=EMSCRIPTEN_RESULT_SUCCESS) {
-		ERR_PRINTS( "Error while setting Emscripten gamepadconnected callback: Code " + itos(result) );
-	}
-	result = emscripten_set_gamepaddisconnected_callback(NULL, true, &joy_callback_func);
-	if (result!=EMSCRIPTEN_RESULT_SUCCESS) {
-		ERR_PRINTS( "Error while setting Emscripten gamepaddisconnected callback: Code " + itos(result) );
-	}
+#define EM_CHECK(ev) if (result!=EMSCRIPTEN_RESULT_SUCCESS)\
+	ERR_PRINTS("Error while setting " #ev " callback: Code " + itos(result))
+#define SET_EM_CALLBACK(ev, cb) result = emscripten_set_##ev##_callback(NULL, this, true, &cb); EM_CHECK(ev)
+#define SET_EM_CALLBACK_NODATA(ev, cb) result = emscripten_set_##ev##_callback(NULL, true, &cb); EM_CHECK(ev)
+
+	EMSCRIPTEN_RESULT result;
+	SET_EM_CALLBACK(keydown, _keydown_callback)
+	SET_EM_CALLBACK(keypress, _keypress_callback)
+	SET_EM_CALLBACK(keyup, _keyup_callback)
+	SET_EM_CALLBACK(resize, _browser_resize_callback)
+	SET_EM_CALLBACK(fullscreenchange, _fullscreen_change_callback)
+	SET_EM_CALLBACK_NODATA(gamepadconnected, joy_callback_func)
+	SET_EM_CALLBACK_NODATA(gamepaddisconnected, joy_callback_func)
+
+#undef SET_EM_CALLBACK_NODATA
+#undef SET_EM_CALLBACK
+#undef EM_CHECK
 
 #ifdef JAVASCRIPT_EVAL_ENABLED
 	javascript_eval = memnew(JavaScript);
@@ -323,22 +377,92 @@ void OS_JavaScript::set_window_title(const String& p_title) {
 
 void OS_JavaScript::set_video_mode(const VideoMode& p_video_mode,int p_screen) {
 
-
+	video_mode = p_video_mode;
 }
 
 OS::VideoMode OS_JavaScript::get_video_mode(int p_screen) const {
 
-	return default_videomode;
+	return video_mode;
+}
+
+Size2 OS_JavaScript::get_screen_size(int p_screen) const {
+
+	ERR_FAIL_COND_V(p_screen!=0, Size2());
+
+	EmscriptenFullscreenChangeEvent ev;
+	EMSCRIPTEN_RESULT result = emscripten_get_fullscreen_status(&ev);
+	ERR_FAIL_COND_V(result!=EMSCRIPTEN_RESULT_SUCCESS, Size2());
+	return Size2(ev.screenWidth, ev.screenHeight);
+}
+
+void OS_JavaScript::set_window_size(const Size2 p_size) {
+
+	window_maximized = false;
+	if (is_window_fullscreen()) {
+		set_window_fullscreen(false);
+	}
+	_windowed_size = p_size;
+	video_mode.width = p_size.x;
+	video_mode.height = p_size.y;
+	emscripten_set_canvas_size(p_size.x, p_size.y);
 }
 
 Size2 OS_JavaScript::get_window_size() const {
 
-	return Vector2(default_videomode.width,default_videomode.height);
+	int canvas[3];
+	emscripten_get_canvas_size(canvas, canvas+1, canvas+2);
+	return Size2(canvas[0], canvas[1]);
+}
+
+void OS_JavaScript::set_window_maximized(bool p_enabled) {
+
+	window_maximized = p_enabled;
+	if (p_enabled) {
+
+		if (is_window_fullscreen()) {
+			// _browser_resize callback will set canvas size
+			set_window_fullscreen(false);
+		}
+		else {
+			video_mode.width = EM_ASM_INT_V(return window.innerWidth);
+			video_mode.height = EM_ASM_INT_V(return window.innerHeight);
+			emscripten_set_canvas_size(video_mode.width, video_mode.height);
+		}
+	}
+	else {
+		set_window_size(_windowed_size);
+	}
+}
+
+void OS_JavaScript::set_window_fullscreen(bool p_enable) {
+
+	if (p_enable==is_window_fullscreen()) {
+		return;
+	}
+
+	// only requesting changes here, if successful, canvas is resized in
+	// _browser_resize_callback or _fullscreen_change_callback
+	EMSCRIPTEN_RESULT result;
+	if (p_enable) {
+		EM_ASM(Module.requestFullscreen(false, false););
+	}
+	else {
+		result = emscripten_exit_fullscreen();
+		if (result!=EMSCRIPTEN_RESULT_SUCCESS) {
+			ERR_PRINTS("Failed to exit fullscreen: Code " + itos(result));
+		}
+	}
+}
+
+bool OS_JavaScript::is_window_fullscreen() const {
+
+	return video_mode.fullscreen;
 }
 
 void OS_JavaScript::get_fullscreen_mode_list(List<VideoMode> *p_list,int p_screen) const {
 
-	p_list->push_back(default_videomode);
+	Size2 screen = get_screen_size();
+	p_list->push_back(OS::VideoMode(screen.width, screen.height, true));
 }
 
 String OS_JavaScript::get_name() {
@@ -658,16 +782,10 @@ void OS_JavaScript::main_loop_request_quit() {
 		main_loop->notification(MainLoop::NOTIFICATION_WM_QUIT_REQUEST);
 }
 
-void OS_JavaScript::set_display_size(Size2 p_size) {
-
-	default_videomode.width=p_size.x;
-	default_videomode.height=p_size.y;
-}
-
 void OS_JavaScript::reload_gfx() {
 
 	if (gfx_init_func)
-		gfx_init_func(gfx_init_ud,use_gl2,default_videomode.width,default_videomode.height,default_videomode.fullscreen);
+		gfx_init_func(gfx_init_ud,use_gl2,video_mode.width,video_mode.height,video_mode.fullscreen);
 	if (rasterizer)
 		rasterizer->reload_vram();
 }
@@ -763,10 +881,6 @@ String OS_JavaScript::get_joy_guid(int p_device) const {
 }
 
 OS_JavaScript::OS_JavaScript(GFXInitFunc p_gfx_init_func,void*p_gfx_init_ud, GetDataDirFunc p_get_data_dir_func) {
-	default_videomode.width=800;
-	default_videomode.height=600;
-	default_videomode.fullscreen=true;
-	default_videomode.resizable=false;
 
 	gfx_init_func=p_gfx_init_func;
 	gfx_init_ud=p_gfx_init_ud;
@@ -775,6 +889,7 @@ OS_JavaScript::OS_JavaScript(GFXInitFunc p_gfx_init_func,void*p_gfx_init_ud, Get
 	last_id=1;
 	gl_extensions=NULL;
 	rasterizer=NULL;
+	window_maximized=false;
 
 	get_data_dir_func=p_get_data_dir_func;
 	FileAccessUnix::close_notification_func=_close_notification_funcs;

platform/javascript/os_javascript.h

@@ -81,7 +81,8 @@ private:
 	const char* gl_extensions;
 
 	InputDefault *input;
-	VideoMode default_videomode;
+	bool window_maximized;
+	VideoMode video_mode;
 	MainLoop * main_loop;
 
 	GetDataDirFunc get_data_dir_func;
@@ -140,7 +141,15 @@ public:
 	virtual VideoMode get_video_mode(int p_screen=0) const;
 	virtual void get_fullscreen_mode_list(List<VideoMode> *p_list,int p_screen=0) const;
 
+	virtual Size2 get_screen_size(int p_screen=0) const;
+
+	virtual void set_window_size(const Size2);
 	virtual Size2 get_window_size() const;
+	virtual void set_window_maximized(bool p_enabled);
+	virtual bool is_window_maximized() const { return window_maximized; }
+	virtual void set_window_fullscreen(bool p_enable);
+	virtual bool is_window_fullscreen() const;
+
 	virtual String get_name();
 	virtual MainLoop *get_main_loop() const;
 
@@ -158,7 +167,6 @@ public:
 	virtual bool has_touchscreen_ui_hint() const;
 
 	void set_opengl_extensions(const char* p_gl_extensions);
-	void set_display_size(Size2 p_size);
 
 	void reload_gfx();