Add fullscreen mode

roboflow · Sep 26, 2024 · 3fb94b0 · 3fb94b0
1 parent 28c953d
commit 3fb94b0
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -99,21 +99,28 @@ <h2>JSON Points</h2>
                                         <span>(Esc)</span>
                                     </span>
                                 </div>
-                                <div class="t-divider"></div>
                                 <div class="t-icon" id="clear">
                                     <i class="fa-solid fa-trash-can"></i>
                                     <span class="ti-caption">
                                         <span>Clear all polygons</span>
                                         <span>(Ctrl/⌘-E)</span>
                                     </span>
                                 </div>
+                                <div class="t-divider"></div>
                                 <div class="t-icon" id="save-image">
                                     <i class="fa-solid fa-floppy-disk"></i>
                                     <span class="ti-caption">
                                         <span>Save image</span>
                                         <span>(Ctrl/⌘-S)</span>
                                     </span>
                                 </div>
+                                <div class="t-icon" id="fullscreen">
+                                    <i class="fa-solid fa-expand"></i>
+                                    <span class="ti-caption">
+                                        <span>Fullscreen</span>
+                                        <span>(F)</span>
+                                    </span>
+                                </div>
                             </div>
                             <div class="coordinates">
                                 <span class="cc-title">Coordinates</span>

diff --git a/script.js b/script.js
@@ -42,6 +42,9 @@ var showNormalized = false;
 var modeMessage = document.querySelector('#mode');
 // var coords = document.querySelector('#coords');
 
+var isFullscreen = false;
+var taskbarAndCanvas = document.querySelector('.right');
+
 function blitCachedCanvas() {
     mainCtx.clearRect(0, 0, canvas.width, canvas.height);
     mainCtx.drawImage(offScreenCanvas, 0, 0);
@@ -537,6 +540,36 @@ document.querySelector('#save-image').addEventListener('click', function(e) {
     saveImage();
 })
 
+function toggleFullscreen() {
+    highlightButtonInteraction('#fullscreen');
+
+    if (!isFullscreen) {
+        if (taskbarAndCanvas.requestFullscreen) {
+            taskbarAndCanvas.requestFullscreen();
+        } else if (taskbarAndCanvas.webkitRequestFullscreen) { // Safari
+            taskbarAndCanvas.webkitRequestFullscreen();
+        } else if (taskbarAndCanvas.msRequestFullscreen) { // IE/Edge
+            taskbarAndCanvas.msRequestFullscreen();
+        }
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) { // Safari
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) { // IE/Edge
+            document.msExitFullscreen();
+        }
+    }
+}
+
+document.addEventListener('fullscreenchange', function() {
+    isFullscreen = document.fullscreenElement !== null;
+});
+
+document.querySelector('#fullscreen').addEventListener('click', function(e) {
+    toggleFullscreen();
+});
+
 window.addEventListener('keydown', function(e) {
     if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
@@ -568,4 +601,8 @@ window.addEventListener('keydown', function(e) {
             onPathClose();
         }
     }
+
+    if (e.key === 'f' || e.key === 'F') {
+        toggleFullscreen();
+    }
 })
diff --git a/styles.css b/styles.css
@@ -63,13 +63,13 @@ a {
     display: flex;
 }
 .left {
-    flex: 50%;
+    flex: 40%;
     padding: 0 1em;
     border-right: 1px solid #e5e7eb;
     box-sizing: border-box;
 }
 .right {
-    flex: 50%;
+    flex: 60%;
     padding: 0 2em;
     box-sizing: border-box;
 }
@@ -193,10 +193,6 @@ li {
     margin-top: 1em;
 }
 
-.taskbar-container .tc-container {
-    max-width: 700px;
-}
-
 .taskbar {
     display: flex;
     background-color: #7733f4;