From c1b17c1b0e9a68bc218440d972f78d67954aab36 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sun, 27 Nov 2022 09:54:34 -0300
Subject: [PATCH] Some start for layering

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/index.css  |  8 ++++++++
 css/layers.css |  6 ++++++
 index.html     | 13 +++++++++++++
 js/layers.js   | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 59 insertions(+)
 create mode 100644 css/layers.css
 create mode 100644 js/layers.js

diff --git a/css/index.css b/css/index.css
index e57686e..54843d5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2,8 +2,16 @@
 	font-size: 100%;
 	font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Body is stuck with no scroll */
 body {
+	width: 100%;
+	height: 100%;
+
 	margin: 0px;
+	padding: 0px;
+
+	overflow: clip;
 }
 
 .container {
diff --git a/css/layers.css b/css/layers.css
new file mode 100644
index 0000000..2041088
--- /dev/null
+++ b/css/layers.css
@@ -0,0 +1,6 @@
+/* Debug floating window */
+#layer-preview .preview-canvas {
+	background-color: white;
+	width: 100%;
+	height: 150px;
+}
diff --git a/index.html b/index.html
index dffa80b..6b65649 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,8 @@
 		<link href="css/colors.css" rel="stylesheet" />
 
 		<link href="css/index.css" rel="stylesheet" />
+		<link href="css/layers.css" rel="stylesheet" />
+
 		<link href="css/ui/generic.css" rel="stylesheet" />
 
 		<link href="css/ui/history.css" rel="stylesheet" />
@@ -189,6 +191,17 @@
 			<div class="toolbar-section"></div>
 		</div>
 
+		<!-- Layer Allocation View -->
+		<div
+			id="layer-preview"
+			class="floating-window toolbar"
+			style="left: 10px; bottom: 10px">
+			<div class="draggable floating-window-title">Layer Debug View</div>
+			<div class="menu-container" style="min-width: 200px">
+				<canvas class="preview-canvas"></canvas>
+			</div>
+		</div>
+
 		<!-- Canvases -->
 		<div
 			id="mainHSplit"
diff --git a/js/layers.js b/js/layers.js
new file mode 100644
index 0000000..e7bb02b
--- /dev/null
+++ b/js/layers.js
@@ -0,0 +1,32 @@
+/**
+ * This is a manager for the many canvas and content layers that compose the application
+ *
+ * It manages canvases and their locations and sizes according to current viewport views
+ */
+
+const layers = {
+	_layers: [],
+	layers: {},
+
+	// Registers a new layer
+	registerLayer: (name) => {
+		const layer = {
+			id: guid(),
+			name: layer,
+			// This is where black magic starts
+			// A proxy for the canvas object
+			canvas: new Proxy(document.createElement("canvas"), {}),
+		};
+	},
+
+	// Deletes a layer
+	deleteLayer: (layer) => {
+		if (typeof layer === "object") {
+			layers._layers = layers._layers.filter((l) => l.id === layer.id);
+			delete layers[layer.id];
+		} else if (typeof layer === "string") {
+			layers._layers = layers._layers.filter((l) => l.id === layer);
+			delete layers[layer];
+		}
+	},
+};