diff --git a/README.md b/README.md index bca30d1..d1dee47 100644 --- a/README.md +++ b/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) diff --git a/controllers/element-controller.js b/controllers/element-controller.js index a237cdf..426747c 100644 --- a/controllers/element-controller.js +++ b/controllers/element-controller.js @@ -1,10 +1,5 @@ -function addElement(type) { - if (type == "TextBox") { - document.getElementById("playground").appendChild(new TextBox().buildElement()); - } - if (type == "Base64Converter") { - document.getElementById("playground").appendChild(new Base64Converter().buildElement()); - } +function addElement(element) { + document.getElementById("playground").appendChild(element.buildElement()); } class ConnectionController { diff --git a/elements/Base64Converter.js b/elements/Base64Converter.js index 3cdfe3f..2c178a6 100644 --- a/elements/Base64Converter.js +++ b/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"; } } \ No newline at end of file diff --git a/elements/Connector.js b/elements/Connector.js index 5bc1319..bb71256 100644 --- a/elements/Connector.js +++ b/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); } diff --git a/elements/Converter.js b/elements/Converter.js index 6ae8bf6..82a8389 100644 --- a/elements/Converter.js +++ b/elements/Converter.js @@ -16,8 +16,8 @@ class Converter extends Box { this.options = options; - let input = new Connector(Connector.INPUT); - let output = new Connector(Connector.OUTPUT); + let input = new Connector(Connector.INPUT, "any"); + let output = new Connector(Connector.OUTPUT, "any"); input.addListener((data) => { output.send(this.options[this.selectedOption].conversionFunction(data)); diff --git a/elements/Duplicator.js b/elements/Duplicator.js new file mode 100644 index 0000000..3fd46be --- /dev/null +++ b/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", "")); + } +} \ No newline at end of file diff --git a/elements/NumberBox.js b/elements/NumberBox.js new file mode 100644 index 0000000..972ce61 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/elements/RandomNumberGenerator.js b/elements/RandomNumberGenerator.js new file mode 100644 index 0000000..e5f62cf --- /dev/null +++ b/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)); + } +} \ No newline at end of file diff --git a/elements/TextBox.js b/elements/TextBox.js index 9e0cc9d..4b2ba72 100644 --- a/elements/TextBox.js +++ b/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() { diff --git a/index.html b/index.html index 72789b3..dd95c9f 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,9 @@ + + + @@ -51,18 +54,23 @@
Inputs - - + + +
Converters - - + +
Hashers - - + + +
+
+ Others +
diff --git a/style.css b/style.css index ce30dfa..9a5cd75 100644 --- a/style.css +++ b/style.css @@ -149,6 +149,7 @@ textarea { justify-content: space-between; margin-left: -20px; margin-right: -20px; + gap: 20px; } .connector {