From 7910d7e149cff8a876ff9bca1891038cafbe1ce7 Mon Sep 17 00:00:00 2001
From: Olivier Wulveryck <olivier.wulveryck@gmail.com>
Date: Wed, 15 Nov 2023 22:08:25 +0100
Subject: [PATCH] feat: overlay

---
 client/index.html        |  5 ++--
 client/main.js           |  1 +
 client/style.css         | 61 ++++++++++++++++++++++------------------
 client/uiInteractions.js |  9 ++++++
 4 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/client/index.html b/client/index.html
index 15e5349..3b4d95c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -22,12 +22,13 @@
 							<span id="label2">Record with audio</span>
 						</button></li>
 						<li><button id="screenshotButton" class="apple-button">Screenshot</button><a id="screenshot"></a></li>
+						<li><button id="switchOrderButton" class="apple-button">Mask drawing</button><a id="switch"></a></li>
 				</ul>
 			</div>
 		</div>
 		<div id="container">
-			<canvas id="canvas" width="1872" height="1404"></canvas>
-			<iframe id="content" allowfullscreen="true" frameborder="0" width="100%" height="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">></iframe>
+			<canvas id="canvas" width="1872" height="1404" style="position: absolute; z-index: 2;"></canvas>
+			<iframe id="content" allowfullscreen="true" frameborder="0" style="position: absolute; z-index: 1;" width="100%" height="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">></iframe>
 		</div>
 		<!--<iframe id="content" src="https://docs.google.com/presentation/d/e/2PACX-1vQoU3OkrD499XPCjI1kl18dci2Um6eqCkZlKCMJaCVaUkonu6NOWZkLgDOdpTyJwLJlyZ9Yf8SAMTdE/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>-->
 
diff --git a/client/main.js b/client/main.js
index 1e85886..f8ea44e 100644
--- a/client/main.js
+++ b/client/main.js
@@ -3,6 +3,7 @@ const height = 1404;
 
 const rawCanvas = new OffscreenCanvas(width, height); // Define width and height as needed
 const visibleCanvas = document.getElementById("canvas");
+const iFrame = document.getElementById("content");
 
 // Initialize the worker
 const worker = new Worker('worker_stream_processing.js');
diff --git a/client/style.css b/client/style.css
index 7159995..548e683 100644
--- a/client/style.css
+++ b/client/style.css
@@ -15,25 +15,30 @@ body, html {
 }
 
 #canvas {
-	position: fixed;
+	position: absolute;
 	max-width: 100%;
 	max-height: 100%;
+	z-index: 2;
 }
 
+#content {
+	position: absolute;
+	z-index: 1;
+}
 canvas.hidden {
 	display: none;
 }
 .sidebar {
 	width: 150px;
 	height: 100vh;
-    background-color: #f5f5f5; /* Light gray */
-    border-right: 1px solid #e0e0e0; /* Slight border to separate from the main content */
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+	background-color: #f5f5f5; /* Light gray */
+	border-right: 1px solid #e0e0e0; /* Slight border to separate from the main content */
+	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 	position: fixed;
 	top: 0;
 	left: -140px;
 	transition: left 0.3s;
-	z-index: 2;
+	z-index: 3;
 
 }
 
@@ -104,16 +109,16 @@ canvas.hidden {
 /* Reset button styles to avoid browser defaults */
 .apple-button {
 	display: inline-block;
-    width: 120px; /* Fixed width */
-    line-height: 30px; /* Centers the text vertically */
-    padding: 0; /* Since we've set fixed width and height, padding is set to 0 */
-    border-radius: 8px;
-    border: none;
-    font-family: 'San Francisco', 'Helvetica Neue', sans-serif;
-    font-size: 8px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    outline: none;
+	width: 120px; /* Fixed width */
+	line-height: 30px; /* Centers the text vertically */
+	padding: 0; /* Since we've set fixed width and height, padding is set to 0 */
+	border-radius: 8px;
+	border: none;
+	font-family: 'San Francisco', 'Helvetica Neue', sans-serif;
+	font-size: 8px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+	outline: none;
 }
 
 /* Main button styles */
@@ -145,26 +150,26 @@ canvas.hidden {
 
 /* Base styles for the toggle button */
 .toggle-button {
-    display: inline-block;
-    padding: 10px 20px;
-    border-radius: 8px;
-    border: none;
-    font-family: 'San Francisco', 'Helvetica Neue', sans-serif;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    outline: none;
+	display: inline-block;
+	padding: 10px 20px;
+	border-radius: 8px;
+	border: none;
+	font-family: 'San Francisco', 'Helvetica Neue', sans-serif;
+	font-size: 16px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+	outline: none;
 }
 
 /* Style for the "off" state (default) */
 .toggle-button {
-    background-color: #D1D1D1;  /* Gray background */
-    color: #6B6B6B;  /* Dark gray text */
+	background-color: #D1D1D1;  /* Gray background */
+	color: #6B6B6B;  /* Dark gray text */
 }
 
 /* Style for the "on" state */
 .toggle-button.active {
-    background-color: #007AFF;  /* Blue background (like our Apple button) */
-    color: #FFFFFF;  /* White text */
+	background-color: #007AFF;  /* Blue background (like our Apple button) */
+	color: #FFFFFF;  /* White text */
 }
 
diff --git a/client/uiInteractions.js b/client/uiInteractions.js
index 6e71829..0d02034 100644
--- a/client/uiInteractions.js
+++ b/client/uiInteractions.js
@@ -25,3 +25,12 @@ sidebar.addEventListener('mouseout', function() {
 // Resize the canvas whenever the window is resized
 window.addEventListener("resize", resizeVisibleCanvas);
 resizeVisibleCanvas();
+
+document.getElementById('switchOrderButton').addEventListener('click', function() {
+	// Swap z-index values
+	var temp = iFrame.style.zIndex;
+	iFrame.style.zIndex = visibleCanvas.style.zIndex;
+	visibleCanvas.style.zIndex = temp;
+});
+
+