typed values feature dump

README.md

@@ -7,7 +7,7 @@ Modular data conversion tools (for developers)
 - [X] zooming
 - [X] fix zooming font size
 - [X] controls explanation
-- [ ] typed values
+- [X] typed values
 - [ ] implicit type conversion
 - [ ] explicit type converters (eg. number to text with specified precision)
 - [ ] connector error state when receiving invalid type or inconvertible value (eg. invalid base64 string)

controllers/element-controller.js

@@ -1,10 +1,5 @@
-function addElement(type) {
+function addElement(element) {
-	if (type == "TextBox") {
+	document.getElementById("playground").appendChild(element.buildElement());
-		document.getElementById("playground").appendChild(new TextBox().buildElement());
-	}
-	if (type == "Base64Converter") {
-		document.getElementById("playground").appendChild(new Base64Converter().buildElement());
-	}
 }
 
 class ConnectionController {

elements/Base64Converter.js

@@ -4,5 +4,7 @@ class Base64Converter extends Converter {
 			{ label : "Encode", conversionFunction : (d) => btoa(d) },
 			{ label : "Decode", conversionFunction : (d) => atob(d) },
 		]);
+
+		this.outputs[0].type = "string";
 	}
 }

elements/Connector.js

@@ -3,6 +3,7 @@ class Connector {
 	static OUTPUT = 1;
 
 	direction;
+	type;
 	label;
 
 	connection;
@@ -12,12 +13,13 @@ class Connector {
 
 	listeners = [];
 
-	constructor(direction, label = "") {
+	constructor(direction, type, label = null) {
 		this.direction = direction;
+		this.type = type;
 		this.element = "";
 		this.label = label;
 
-		if (this.label == "") {
+		if (this.label == null) {
 			switch (this.direction) {
 			case Connector.INPUT:
 				this.label = "Input";
@@ -81,6 +83,10 @@ class Connector {
 	}
 
 	receive(data) {
+		if (this.type != "any" && typeof data != this.type) {
+			console.error("invalid type received", data, typeof data, this.type);
+			return;
+		}
 		for (let listener of this.listeners) {
 			listener(data);
 		}

elements/Converter.js

@@ -16,8 +16,8 @@ class Converter extends Box {
 
 		this.options = options;
 
-		let input = new Connector(Connector.INPUT);
+		let input = new Connector(Connector.INPUT, "any");
-		let output = new Connector(Connector.OUTPUT);
+		let output = new Connector(Connector.OUTPUT, "any");
 
 		input.addListener((data) => {
 			output.send(this.options[this.selectedOption].conversionFunction(data));

elements/Duplicator.js

@@ -0,0 +1,17 @@
+class Duplicator extends Box {
+	constructor() {
+		super("Duplicator");
+
+		let input = new Connector(Connector.INPUT, "any", "");
+		input.addListener((d) => {
+			for (let output of this.outputs) {
+				output.send(d);
+			}
+		});
+
+		this.inputs.push(input);
+
+		this.outputs.push(new Connector(Connector.OUTPUT, "any", ""));
+		this.outputs.push(new Connector(Connector.OUTPUT, "any", ""));
+	}
+}

elements/NumberBox.js

@@ -0,0 +1,30 @@
+class NumberBox extends Box {
+	numberbox;
+
+	constructor() {
+		super("Number Box");
+
+		let input = new Connector(Connector.INPUT, "number");
+		input.addListener((d) => {
+			this.outputs[0].send(d);
+			this.numberbox.value = d;
+		});
+
+		this.inputs.push(input);
+		this.outputs.push(new Connector(Connector.OUTPUT, "number"));
+	}
+
+	buildElement() {
+		super.buildElement();
+
+		this.numberbox = document.createElement("input");
+		this.numberbox.type = "number";
+		this.numberbox.value = 0;
+		this.numberbox.addEventListener("input", () => {
+			this.outputs[0].send(parseFloat(this.numberbox.value));
+		})
+		this.content.appendChild(this.numberbox);
+
+		return this.element;
+	}
+}

elements/RandomNumberGenerator.js

@@ -0,0 +1,53 @@
+class RandomNumberGenerator extends Box {
+
+	min;
+	max;
+
+	constructor() {
+		super("Random Number Generator");
+
+		this.outputs.push(new Connector(Connector.OUTPUT, "number"));
+
+		let minInput = new Connector(Connector.INPUT, "number", "Min");
+		minInput.addListener((d) => {
+			this.min.value = d
+			this.sendNewNumber();
+		});
+
+		let maxInput = new Connector(Connector.INPUT, "number", "Max");
+		maxInput.addListener((d) => {
+			this.max.value = d
+			this.sendNewNumber();
+		});
+
+		this.inputs.push(minInput);
+		this.inputs.push(maxInput);
+	}
+
+	buildElement() {
+		super.buildElement();
+
+		this.min = document.createElement("input");
+		this.min.type = "number";
+		this.min.value = 1;
+
+		this.max = document.createElement("input");
+		this.max.type = "number";
+		this.max.value = 100;
+
+		this.content.appendChild(this.min);
+		this.content.appendChild(this.max);
+
+		let generateButton = document.createElement("button");
+		generateButton.innerText = "Generate";
+		generateButton.addEventListener("click", () => this.sendNewNumber());
+
+		this.content.appendChild(generateButton);
+
+		return this.element;
+	}
+
+	sendNewNumber() {
+		this.outputs[0].send(Math.floor(Math.random() * (this.max.value - this.min.value + 1)) + parseFloat(this.min.value));
+	}
+}

elements/TextBox.js

@@ -4,14 +4,14 @@ class TextBox extends Box {
 	constructor() {
 		super("Text Box");
 
-		let input = new Connector(Connector.INPUT);
+		let input = new Connector(Connector.INPUT, "any");
 		input.addListener((data) => {
 			this.outputs[0].send(data);
 			this.textbox.value = data;
 		});
 
 		this.inputs.push(input);
-		this.outputs.push(new Connector(Connector.OUTPUT));
+		this.outputs.push(new Connector(Connector.OUTPUT, "string"));
 	}
 
 	buildElement() {

index.html

@@ -9,6 +9,9 @@
 		<script src="elements/TextBox.js"></script>
 		<script src="elements/Converter.js"></script>
 		<script src="elements/Base64Converter.js"></script>
+		<script src="elements/RandomNumberGenerator.js"></script>
+		<script src="elements/NumberBox.js"></script>
+		<script src="elements/Duplicator.js"></script>
 		<script src="controllers/menu-controller.js"></script>
 		<script src="controllers/input-controller.js"></script>
 		<script src="controllers/element-controller.js"></script>
@@ -51,18 +54,23 @@
 					<div id="elementsWrapper">
 						<div class="elementsGroup">
 							<span>Inputs</span>
-							<button onclick="addElement('TextBox')">Text Box</button>
+							<button onclick="addElement(new TextBox())">Text Box</button>
-							<button onclick="addElement('RandomNumberGenerator')">Random Number Generator</button>
+							<button onclick="addElement(new NumberBox())">Number Box</button>
+							<button onclick="addElement(new RandomNumberGenerator())">Random Number Generator</button>
 						</div>
 						<div class="elementsGroup">
 							<span>Converters</span>
-							<button onclick="addElement('Base64Converter')">Base64</button>
+							<button onclick="addElement(new Base64Converter())">Base64</button>
-							<button onclick="addElement('URLConverter')">URL</button>
+							<button onclick="addElement(new URLConverter())">URL</button>
 						</div>
 						<div class="elementsGroup">
 							<span>Hashers</span>
-							<button onclick="addElement('MD5Hasher')">MD5</button>
+							<button onclick="addElement(new MD5Hasher())">MD5</button>
-							<button onclick="addElement('SHA256Hasher')">SHA256</button>
+							<button onclick="addElement(new SHA256Hasher())">SHA256</button>
+						</div>
+						<div class="elementsGroup">
+							<span>Others</span>
+							<button onclick="addElement(new Duplicator())">Duplicator</button>
 						</div>
 					</div>
 				</div>

style.css

@@ -149,6 +149,7 @@ textarea {
 	justify-content: space-between;
 	margin-left: -20px;
 	margin-right: -20px;
+	gap: 20px;
 }
 
 .connector {