Comments!!!

css/style.css

@@ -123,6 +123,7 @@ html {
     overflow-x: hidden;
     overflow-y: hidden;
     margin-bottom: 1rem;
+    outline: 0 !important;
 }
 
 .node[grabbing]>.header {

roadmap.txt

@@ -2,6 +2,7 @@ Multiple outputs - Done
 Save Multpile Outputs - Done
 Colorspace Nodes - Done
 Fix XPos bug - Done
+Add comment nodes - Done
 Optimise Compiler - Todo
-Worley Noise output all 3 layers - Todo
+Worley Noise output all 3 layers - Done
 Optimise noise seeding algo - Todo

scripts/input/classes.js

@@ -186,7 +186,7 @@ addNode("cos", {
   alias: ["Cosine"],
   inputs: ["deg"],
   func: (deg) => {
-    return[ Math.cos(deg * (Math.PI / 180))];
+    return [Math.cos(deg * (Math.PI / 180))];
   },
   color: "darkred",
   doc: `Gets the cosine of the angle in degrees provided.`,
@@ -218,9 +218,8 @@ addNode("lerp", {
     <br>Lerping with A=0, B=10, Alpha=1.0 returns 10.
     `,
 });
-addNode(
-  "time",
-  {alias: ["Time (ms)", "current time", "t"],
+addNode("time", {
+  alias: ["Time (ms)", "current time", "t"],
   func: () => {
     if (performance && performance.now) {
       return [performance.now()];
@@ -229,5 +228,20 @@ addNode(
     }
   },
   color: "grey",
-  doc: `Returns the current time in milliseconds (one thousandth of a second).`,}
-);
+  doc: `Returns the current time in milliseconds (one thousandth of a second).`,
+});
+addNode("comment", {
+  alias: ["Comment Node"],
+  inputs: [],
+  outputs: [],
+  renameable: true,
+  doc: `Used to annotate graphs.`,
+  init: function () {
+    var container = document.createElement("div");
+    container.innerText = "Comment Text Here";
+    container.style = `width: 100%; height: 100%; color: white; outline: 0 !important;`;
+    container.contentEditable = true;
+    container.setAttribute("data-container", "");
+    this.append(container);
+  }
+});

scripts/input/documentation.js

@@ -5,25 +5,40 @@ function displayDocumentation() {
     keys.forEach((key) => {
       var title = window.library[key].alias[0];
       var h2 = document.createElement("h2");
+      h2.style.borderTop = "1px solid black";
       h2.innerText = title;
       var p = document.createElement("p");
       p.innerHTML = window.documentation[key];
       docWin.document.body.appendChild(h2);
       docWin.document.body.appendChild(p);
 
       if (window.library[key].argv.length > 0) {
-        var h4 = document.createElement("h4");
-        h4.innerText = "Arguments: ";
-        var t = document.createElement("table");
+        var argumentsHeader = document.createElement("h4");
+        argumentsHeader.innerText = "Arguments: ";
+        var inputsTable = document.createElement("table");
         for (let i = 0; i < window.library[key].argv.length; i++) {
           var arg = window.library[key].argv[i];
           var tr = document.createElement("tr");
           tr.innerText = arg;
           tr.style = "border: 1px solid black;";
-          t.append(tr);
+          inputsTable.append(tr);
         }
-        docWin.document.body.appendChild(h4);
-        docWin.document.body.appendChild(t);
+        docWin.document.body.appendChild(argumentsHeader);
+        docWin.document.body.appendChild(inputsTable);
+      }
+      if (window.library[key].outputs.length > 1) {
+        var outputsHeader = document.createElement("h4");
+        outputsHeader.innerText = "Outputs: ";
+        var outputs = document.createElement("table");
+        for (let i = 0; i < window.library[key].outputs.length; i++) {
+          var arg = window.library[key].outputs[i];
+          var tr = document.createElement("tr");
+          tr.innerText = arg;
+          tr.style = "border: 1px solid black;";
+          outputs.append(tr);
+        }
+        docWin.document.body.appendChild(outputsHeader);
+        docWin.document.body.appendChild(outputs);
       }
     });
   } catch (error) {

scripts/input/index.js

@@ -15,7 +15,7 @@ function addNode(namespace, data = {}) {
   data.argv ||= data.inputs || [];
   data.outputs ||= ["O"];
   data.func ||= function () {
-    return 0;
+    return [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
   };
   data.color ||= "darkcyan";
   data.init ||= () => {};

scripts/ui/serialise.js

@@ -32,13 +32,17 @@ function serialise() {
       });
     }
     var label = node.querySelector(".header").innerText;
-    serialised.nodes.push({
+    var data = {
       type: node.getAttribute("data-type"),
       x: node.getAttribute("data-x"),
       y: node.getAttribute("data-y"),
       label: label,
       inputs: inputs,
-    });
+    };
+    if(data.type === "comment"){
+      data.commentText = node.querySelector("div[data-container]").innerText;
+    }
+    serialised.nodes.push(data);
   }
   return serialised;
 }
@@ -67,6 +71,9 @@ function deserialise(serialised) {
     n.setAttribute("style", `top: ${nodeData.y}px; left: ${nodeData.x}px;`);
     n.setAttribute("data-x", nodeData.x);
     n.setAttribute("data-y", nodeData.y);
+    if (nodeData.type === "comment") {
+      n.querySelector("div[data-container]").innerText = nodeData.commentText || "Comment Text Here";
+    }
   });
   var newNodes = document.querySelectorAll(".node");
   serialised.nodes.forEach((nodeData, index) => {