can add filter node to diagram

static/diagram.js

@@ -1,14 +1,17 @@
 var DiagramNode = /** @class */ (function () {
-    function DiagramNode(id, x, y, width, height, label) {
+    function DiagramNode(id, x, y, width, height, label, meta) {
+        if (meta === void 0) { meta = {}; }
         this.hover = false;
         this.inputHover = false;
         this.outputHover = false;
+        this.meta = {};
         this.id = id;
         this.x = x;
         this.y = y;
         this.width = width;
         this.height = height;
         this.label = label;
+        this.meta = meta;
     }
     DiagramNode.prototype.pointInNode = function (x, y) {
         if (x < this.x) {
@@ -320,10 +323,11 @@ var Diagrams = /** @class */ (function () {
             this.ctx.fill();
         }
     };
-    Diagrams.prototype.addNode = function (id, x, y, label) {
+    Diagrams.prototype.addNode = function (id, x, y, label, meta) {
+        if (meta === void 0) { meta = {}; }
         var textSize = this.ctx.measureText(label);
         var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
-        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
+        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
     };
     Diagrams.prototype.addConnection = function (A, B) {
         this.connections.push([A, B]);

static/diagram.ts

@@ -13,6 +13,8 @@ class DiagramNode {
     parents: Array<DiagramNode>;
     children: Array<DiagramNode>;
 
+    meta: Object = {};
+
     constructor(
         id: number,
         x: number, 
@@ -20,6 +22,7 @@ class DiagramNode {
         width: number,
         height: number,
         label: string,
+        meta: Object = {}
     ){
         this.id = id;
         this.x = x;
@@ -27,6 +30,7 @@ class DiagramNode {
         this.width = width;
         this.height = height;
         this.label = label;
+        this.meta = meta;
     }
 
     pointInNode(x: number, y: number){
@@ -384,10 +388,10 @@ class Diagrams {
         }
     }
 
-    addNode(id: number, x: number, y: number, label: string){
+    addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
         let textSize = this.ctx.measureText(label);
         let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
-        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
+        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
     }
 
     addConnection(A: DiagramNode, B: DiagramNode){

static/edit.js

@@ -0,0 +1,90 @@
+function onTypeChange() {
+    var select = document.getElementById("typeInput");
+    var type = select.value;
+    var var1Input = document.getElementById("var1Input");
+    var var1Label = document.getElementById("var1Label");
+    var var2Input = document.getElementById("var2Input");
+    var var2Label = document.getElementById("var2Label");
+    var var3Input = document.getElementById("var3Input");
+    var var3Label = document.getElementById("var3Label");
+    switch (type) {
+        case "xpath": {
+            var1Label.innerHTML = "XPath";
+            var1Input.placeholder = "//a[@class='price";
+            var2Input.disabled = true;
+            var2Input.placeholder = "";
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Input.placeholder = "";
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "json": {
+            var1Label.innerHTML = "JSON";
+            var1Input.placeholder = "products.#.price";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "css": {
+            var1Label.innerHTML = "Selector";
+            var1Input.placeholder = ".price";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "replace": {
+            var1Label.innerHTML = "Regex";
+            var1Input.placeholder = "So[mM]e(thing|where)";
+            var2Input.disabled = false;
+            var2Label.innerHTML = "With";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "match": {
+            var1Label.innerHTML = "Regex";
+            var1Input.placeholder = "So[mM]e(thing|where)";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "substring": {
+            var1Label.innerHTML = "Substring";
+            var1Input.placeholder = ":20,25-40,45,47,49,-20:";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+    }
+}
+function onSubmitNewFilter() {
+    var nameInput = document.getElementById("nameInput");
+    var name = nameInput.value;
+    var selectType = document.getElementById("typeInput");
+    var type = selectType.value;
+    var var1Input = document.getElementById("var1Input");
+    var var2Input = document.getElementById("var2Input");
+    var var3Input = document.getElementById("var3Input");
+    _diagram.addNode(Math.max.apply(Math, _diagram.nodes.map(function (n) { return n.id; })) + 1, _diagram.canvas.width / 2, _diagram.canvas.height / 2, name, {
+        type: type,
+        var1: var1Input.value,
+        var2: var2Input.value,
+        var3: var3Input.value
+    });
+}
+function newFilterInit() {
+    var select = document.getElementById("typeInput");
+    select.onchange = onTypeChange;
+    var button = document.getElementById("newFilterButton");
+    button.onclick = onSubmitNewFilter;
+}
+document.addEventListener('DOMContentLoaded', newFilterInit, false);

static/edit.ts

@@ -0,0 +1,105 @@
+function onTypeChange(){
+    let select = document.getElementById("typeInput") as HTMLSelectElement;
+    let type = select.value;
+    
+    let var1Input = document.getElementById("var1Input") as HTMLInputElement;
+    let var1Label = document.getElementById("var1Label") as HTMLLabelElement;
+    
+    let var2Input = document.getElementById("var2Input") as HTMLInputElement;
+    let var2Label = document.getElementById("var2Label") as HTMLLabelElement;
+
+    let var3Input = document.getElementById("var3Input") as HTMLInputElement;
+    let var3Label = document.getElementById("var3Label") as HTMLLabelElement;
+    
+    switch(type){
+        case "xpath": {
+            var1Label.innerHTML = "XPath";
+            var1Input.placeholder = "//a[@class='price";
+            var2Input.disabled = true;
+            var2Input.placeholder = ""
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Input.placeholder = ""
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "json": {
+            var1Label.innerHTML = "JSON";
+            var1Input.placeholder = "products.#.price";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "css": {
+            var1Label.innerHTML = "Selector";
+            var1Input.placeholder = ".price";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "replace": {
+            var1Label.innerHTML = "Regex";
+            var1Input.placeholder = "So[mM]e(thing|where)";
+            var2Input.disabled = false;
+            var2Label.innerHTML = "With";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "match": {
+            var1Label.innerHTML = "Regex";
+            var1Input.placeholder = "So[mM]e(thing|where)";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+        case "substring": {
+            var1Label.innerHTML = "Substring";
+            var1Input.placeholder = ":20,25-40,45,47,49,-20:";
+            var2Input.disabled = true;
+            var2Label.innerHTML = "-";
+            var3Input.disabled = true;
+            var3Label.innerHTML = "-";
+            break;
+        }
+    }
+}
+
+function onSubmitNewFilter(){
+    let nameInput = document.getElementById("nameInput") as HTMLInputElement;
+    let name = nameInput.value;
+    let selectType = document.getElementById("typeInput") as HTMLSelectElement;
+    let type = selectType.value;
+    
+    let var1Input = document.getElementById("var1Input") as HTMLInputElement;
+    
+    let var2Input = document.getElementById("var2Input") as HTMLInputElement;
+
+    let var3Input = document.getElementById("var3Input") as HTMLInputElement;
+
+    _diagram.addNode(
+        Math.max(..._diagram.nodes.map(n => n.id)) + 1,
+        _diagram.canvas.width / 2, 
+        _diagram.canvas.height / 2, 
+        name, {
+            type: type,
+            var1: var1Input.value,
+            var2: var2Input.value,
+            var3: var3Input.value,
+    })
+}
+
+function newFilterInit(){
+    let select = document.getElementById("typeInput") as HTMLSelectElement;
+    select.onchange = onTypeChange;
+
+    let button = document.getElementById("newFilterButton") as HTMLButtonElement;
+    button.onclick = onSubmitNewFilter
+}
+document.addEventListener('DOMContentLoaded', newFilterInit, false);

templates/diagrams.html

@@ -1,5 +1,6 @@
 {{define "head"}}
 <script src="/static/diagram.js"></script>
+<script src="/static/edit.js"></script>
 {{ end }}
 {{define "content"}}
 <div class="canvas_parent">
@@ -9,6 +10,62 @@
 </div>
 {{ end }}
 
+{{ define "left" }}
+<div>
+    <button type="button" class="btn btn-primary btn-block btn-sm" data-bs-toggle="modal" data-bs-target="#newFilterModal">
+        Add Filter
+    </button>
+</div>
+
+<div class="modal fade" id="newFilterModal" tabindex="-1" aria-labelledby="newFilterModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="newFilterModalLabel">Add Filter</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div>
+                    <form action="/filter/create" method="post">
+                        <div class="mb-3 m-3 row">
+                            <label for="nameInput" class="col-sm-2 col-form-label">Name:</label>
+                            <div class="col-sm-10 p-2">
+                                <input type="text" class="form-control" name="filter_name" id="nameInput" placeholder="Name">
+                            </div>
+                            <label for="typeInput" class="col-sm-2 col-form-label">Type:</label>
+                            <div class="col-sm-10 p-2">
+                                <select id="typeInput" class="form-control" name="type">
+                                    <option value="xpath" selected="true">XPath</option>
+                                    <option value="json">JSON</option>
+                                    <option value="css">CSS</option>
+                                    <option value="replace">Replace</option>
+                                    <option value="match">Match</option>
+                                    <option value="substring">Substring</option>
+                                </select>
+                            </div>
+
+                            <label for="var1" id="var1Label" class="col-sm-2 col-form-label">XPath:</label>
+                            <div class="col-sm-10 p-2">
+                                <input type="text" class="form-control" name="var1" id="var1Input" placeholder="//a[@class='price']">
+                            </div>
+                            <label for="var2" id="var2Label" class="col-sm-2 col-form-label">-</label>
+                            <div class="col-sm-10 p-2">
+                                <input type="text" class="form-control" name="var2" id="var2Input" placeholder="" disabled>
+                            </div>
+                            <label for="var3" id="var3Label" class="col-sm-2 col-form-label">-</label>
+                            <div class="col-sm-10 p-2">
+                                <input type="text" class="form-control" name="var3" id="var3Input" placeholder="" disabled>
+                            </div>
+                        </div>
+                    </form>
+                    <button class="btn btn-primary mt-4"  data-bs-dismiss="modal" id="newFilterButton">Add Filter</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
+
 {{define "scripts"}}
 <script>
 var diagrams;