Some start for layering

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

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 {

css/layers.css

@@ -0,0 +1,6 @@
+/* Debug floating window */
+#layer-preview .preview-canvas {
+	background-color: white;
+	width: 100%;
+	height: 150px;
+}

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"

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];
+		}
+	},
+};