Make padding and stuff work as expected

index.html

@@ -27,8 +27,12 @@
 			}
 
 			body {
-				margin: 0;
+				padding: 128px;
+				width: max-content;
+				height: max-content;
 
+				background-image: linear-gradient(var(--color-foreground)) var(--color-gray) url("./media/tile.png");
+				background-blend-mode: normal, multiply, normal;
 				background-color: var(--color-background);
 				color: var(--color-foreground);
 			}
@@ -76,7 +80,6 @@
 				<aside class="node-group-label">
 					<h1><slot name="node-label">{Group label}</slot></h1>
 				</aside>
-				<slot name="node-contents">{Node contents}</slot>
 			</section>
 		</template>
 		<template id="template-node-file">
@@ -129,7 +132,20 @@
 			<slot name="markdown-contents">{Markdown text}</slot>
 		</template>
 		<template id="template-canvas">
-			<slot name="canvas-contents">{Canvas}</slot>
+			<style>
+				.canvas {
+					position: relative;
+
+					display: flex;
+
+					width: max-content;
+					height: max-content;
+				}
+			</style>
+			<div class="canvas">
+				<slot name="canvas-nodes">{Canvas nodes}</slot>
+				<slot name="canvas-edges">{Canvas edges}</slot>
+			</div>
 		</template>
 		<template id="template-wikilink">
 			<style>

src/elements/canvas.mjs

@@ -27,7 +27,8 @@ export class CanvasElement extends HTMLElement {
 
     parsedJSON
 
-    contentsSlotted
+    nodesSlotted
+    edgesSlotted
     nodeElements = {}
     edgeElements = {}
 
@@ -38,8 +39,11 @@ export class CanvasElement extends HTMLElement {
 
         this.parsedJSON = JSON.parse(this.getAttribute("contents"))
 
-        this.contentsSlotted = document.createElement("div")
+        this.nodesSlotted = document.createElement("div")
-        this.contentsSlotted.slot = "canvas-contents"
+        this.nodesSlotted.slot = "canvas-nodes"
+
+        this.edgesSlotted = document.createElement("div")
+        this.edgesSlotted.slot = "canvas-edges"
 
         let minX = { x: Infinity, width: 0 }
         let minY = { y: Infinity, height: 0 }
@@ -61,7 +65,7 @@ export class CanvasElement extends HTMLElement {
             element.setAttribute("y", node["y"] - minY["y"])
             element.setAttribute("width", node["width"])
             element.setAttribute("height", node["height"])
-            element.setAttribute("color", node["color"])
+            if(node["color"]) element.setAttribute("color", node["color"])
 
             switch(node["type"]) {
                 case "text":
@@ -83,7 +87,7 @@ export class CanvasElement extends HTMLElement {
             }
 
             this.nodeElements[node["id"]] = element
-            this.contentsSlotted.appendChild(element)
+            this.nodesSlotted.appendChild(element)
         }
 
         for(const edge of this.parsedJSON["edges"]) {
@@ -93,19 +97,27 @@ export class CanvasElement extends HTMLElement {
             element.setAttribute("node-from-side", edge["fromSide"])
             element.setAttribute("node-to", edge["toNode"])
             element.setAttribute("node-to-side", edge["toSide"])
-            element.setAttribute("color", edge["color"])
+            if(edge["color"]) element.setAttribute("color", edge["color"])
-            element.setAttribute("arrows", edge["toEnd"])
+            if(edge["arrows"]) element.setAttribute("arrows", edge["toEnd"])
 
             this.edgeElements[edge["id"]] = element
-            this.contentsSlotted.appendChild(element)
+            this.edgesSlotted.appendChild(element)
         }
 
-        console.log(Object.values(this.nodeElements))
+        this.nodesSlotted.style["position"] = "relative"
+        this.nodesSlotted.style["left"] = "0"
+        this.nodesSlotted.style["top"] = "0"
+        this.nodesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
+        this.nodesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
 
-        this.contentsSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
+        this.edgesSlotted.style["position"] = "absolute"
-        this.contentsSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
+        this.edgesSlotted.style["left"] = "0"
+        this.edgesSlotted.style["top"] = "0"
+        this.edgesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
+        this.edgesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
 
-        this.appendChild(this.contentsSlotted)
+        this.appendChild(this.nodesSlotted)
+        this.appendChild(this.edgesSlotted)
 
         shadow.appendChild(instanceDocument)
     }
@@ -119,15 +131,16 @@ export class CanvasItemElement extends HTMLElement {
     colorToHex() {
         const color = this.getAttribute("color")
 
-        if(color?.startsWith("#")) {
+        if(color === undefined || color === null || color === "") {
+            return "var(--color-gray)"
+        }
+        else if(color.startsWith("#")) {
             // This is an hex color
             return color
         }
         else {
             // TODO: Check which colors correspond to what
             return {
-                [undefined]: "var(--color-gray)",
-                "undefined": "var(--color-gray)",
                 "0": "var(--color-gray)",
                 "1": "var(--color-red)",
                 "2": "var(--color-orange)",