From 71ee517b69fc646da083372c281eb3a1ca3c4128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81mbar=20Tenorio=20Forn=C3=A9s?= <ambar@atenor.io>
Date: Fri, 8 Nov 2024 13:55:55 +0100
Subject: [PATCH 1/2] add fullscreen button

---
 frontend/web-editor/src/store.js         | 4 ++++
 frontend/web-editor/src/views/toolbar.js | 1 +
 2 files changed, 5 insertions(+)

diff --git a/frontend/web-editor/src/store.js b/frontend/web-editor/src/store.js
index 54ed1115..78b9d6bd 100644
--- a/frontend/web-editor/src/store.js
+++ b/frontend/web-editor/src/store.js
@@ -109,6 +109,10 @@ module.exports = function store(state, emitter) {
   emitter.on('mutate sketch', function () {
 
   })
+
+  emitter.on('view:fullscreen', function(){
+    document.documentElement.requestFullscreen();
+  });
 }
 
 function showConfirmation(successCallback, terminateCallback) {
diff --git a/frontend/web-editor/src/views/toolbar.js b/frontend/web-editor/src/views/toolbar.js
index 215eceea..be536415 100644
--- a/frontend/web-editor/src/views/toolbar.js
+++ b/frontend/web-editor/src/views/toolbar.js
@@ -14,6 +14,7 @@ module.exports = function toolbar(state, emit) {
         ${icon("clear", `fa fa-trash ${hidden}`, "clear all", 'editor:clearAll')}
         ${icon("shuffle", `fa-random`, "show random sketch", 'gallery:showExample')}
         ${icon("mutator", `fa-dice ${hidden}`, "make random change", 'editor:randomize')}
+        ${icon("fullscreen", `fa-expand ${hidden}`, "go fullscreen", 'view:fullscreen')}
         ${icon("close", state.showInfo? "fa-times" : "fa-question-circle", "", 'toggle info')}
     </div>`
 }
\ No newline at end of file

From 0645a2d098496c1d35b4ce7f9685ed9c3c1c456f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81mbar=20Tenorio=20Forn=C3=A9s?= <ambar@atenor.io>
Date: Fri, 8 Nov 2024 15:05:05 +0100
Subject: [PATCH 2/2] add toggle fullscreen functionality

---
 frontend/web-editor/src/store.js         | 24 ++++++++++++++++++++++--
 frontend/web-editor/src/views/toolbar.js | 10 ++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/web-editor/src/store.js b/frontend/web-editor/src/store.js
index 78b9d6bd..372a5847 100644
--- a/frontend/web-editor/src/store.js
+++ b/frontend/web-editor/src/store.js
@@ -110,9 +110,29 @@ module.exports = function store(state, emitter) {
 
   })
 
-  emitter.on('view:fullscreen', function(){
-    document.documentElement.requestFullscreen();
+  // toggle fullscreen
+  emitter.on('view:toggle-fullscreen', function() {
+
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      document.documentElement.requestFullscreen()
+    }
   });
+
+  addEventListener("fullscreenchange", function() {
+    // render UI again after fullscreen change
+    state.fullscreen = document.fullscreenElement
+    emitter.emit('render');
+  });
+
+  // disable resize button when full screen comes from browser and not UI.
+  addEventListener("resize", function() {
+    state.browserFullscreen =
+      window.innerHeight == screen.height &&
+      !document.fullscreenElement
+    emitter.emit('render');
+  })
 }
 
 function showConfirmation(successCallback, terminateCallback) {
diff --git a/frontend/web-editor/src/views/toolbar.js b/frontend/web-editor/src/views/toolbar.js
index be536415..97c93050 100644
--- a/frontend/web-editor/src/views/toolbar.js
+++ b/frontend/web-editor/src/views/toolbar.js
@@ -1,7 +1,8 @@
 const html = require('choo/html')
 
 module.exports = function toolbar(state, emit) {
-    const hidden = state.showInfo ? 'hidden' : ''
+    const hidden = state.showInfo ? 'hidden' : '';
+    const fullscreenHidden = state.browserFullscreen? 'hidden' : '';
 
     const dispatch = (eventName) => (e) => emit(eventName, e)
 
@@ -14,7 +15,12 @@ module.exports = function toolbar(state, emit) {
         ${icon("clear", `fa fa-trash ${hidden}`, "clear all", 'editor:clearAll')}
         ${icon("shuffle", `fa-random`, "show random sketch", 'gallery:showExample')}
         ${icon("mutator", `fa-dice ${hidden}`, "make random change", 'editor:randomize')}
-        ${icon("fullscreen", `fa-expand ${hidden}`, "go fullscreen", 'view:fullscreen')}
+        ${icon("fullscreen",
+            state.fullscreen? `fa-compress`: `fa-expand`
+            + ` ${hidden}`
+            + ` ${fullscreenHidden}`,
+            "toggle fullscreen",
+            'view:toggle-fullscreen')}
         ${icon("close", state.showInfo? "fa-times" : "fa-question-circle", "", 'toggle info')}
     </div>`
 }
\ No newline at end of file