Add toggle fullscreen button to UI

frontend/web-editor/src/store.js

@@ -109,6 +109,30 @@ module.exports = function store(state, emitter) {
   emitter.on('mutate sketch', function () {
 
   })
+
+  // 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) {

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,6 +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",
+            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>`
 }