can delete nodes from context menu

static/diagram.js

@@ -145,7 +145,6 @@ var ContextMenu = /** @class */ (function () {
         }
         for (var _i = 0, _a = this.items; _i < _a.length; _i++) {
             var item = _a[_i];
-            console.log(item.hover);
             if (item.hover) {
                 item.callback(this.contextNode);
             }
@@ -184,8 +183,9 @@ function diagramOnContext(ev) {
     ev.preventDefault();
 }
 var Diagrams = /** @class */ (function () {
-    function Diagrams(canvasId, editNodeCallback) {
+    function Diagrams(canvasId, editNodeCallback, deleteNodeCallback) {
         if (editNodeCallback === void 0) { editNodeCallback = function () { }; }
+        if (deleteNodeCallback === void 0) { deleteNodeCallback = function () { }; }
         this.nodes = new Array();
         this.connections = new Array();
         this.cameraX = 0; // camera position
@@ -200,6 +200,7 @@ var Diagrams = /** @class */ (function () {
         this.makingConnectionNode = null;
         this.scale = 1.0;
         this.editNodeCallback = function () { };
+        this.deleteNodeCallback = function () { };
         this.canvas = document.getElementById(canvasId);
         if (this.canvas === null) {
             throw "Could not getElementById " + canvasId;
@@ -212,7 +213,7 @@ var Diagrams = /** @class */ (function () {
         this.ctx = ctx;
         this.contextMenu = new ContextMenu(this.ctx);
         this.contextMenu.items.push(new ContextMenuItem("Edit", editNodeCallback));
-        this.contextMenu.items.push(new ContextMenuItem("Delete", editNodeCallback));
+        this.contextMenu.items.push(new ContextMenuItem("Delete", deleteNodeCallback));
         this.contextMenu.fitContextMenu();
         this.ctx.font = "20px Helvetica";
         this.canvas.onmousemove = diagramOnMouseMove;
@@ -222,6 +223,7 @@ var Diagrams = /** @class */ (function () {
         this.canvas.oncontextmenu = diagramOnContext;
         window.onresize = diargramOnResize;
         this.editNodeCallback = editNodeCallback;
+        this.deleteNodeCallback = deleteNodeCallback;
     }
     Diagrams.prototype.onmousemove = function (ev) {
         var canvasRect = this.canvas.getBoundingClientRect();

static/diagram.ts

@@ -172,7 +172,6 @@ class ContextMenu {
             return
         }
         for (let item of this.items){
-            console.log(item.hover);
             if(item.hover){
                 item.callback(this.contextNode);
             }
@@ -236,10 +235,15 @@ class Diagrams {
     scale: number = 1.0;
 
     editNodeCallback: (node: DiagramNode) => void = function (){};
+    deleteNodeCallback: (node: DiagramNode) => void = function (){};
 
     contextMenu: ContextMenu;
 
-    constructor(canvasId: string, editNodeCallback: (node: DiagramNode) => void = function (){}){
+    constructor(
+            canvasId: string, 
+            editNodeCallback: (node: DiagramNode) => void = function (){},
+            deleteNodeCallback: (node: DiagramNode) => void = function (){}
+        ){
         this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
         if (this.canvas === null){
             throw `Could not getElementById ${canvasId}`;
@@ -252,7 +256,7 @@ class Diagrams {
         this.ctx = ctx;
         this.contextMenu = new ContextMenu(this.ctx);
         this.contextMenu.items.push(new ContextMenuItem("Edit", editNodeCallback))
-        this.contextMenu.items.push(new ContextMenuItem("Delete", editNodeCallback))
+        this.contextMenu.items.push(new ContextMenuItem("Delete", deleteNodeCallback))
         this.contextMenu.fitContextMenu();
         this.ctx.font = "20px Helvetica";
         this.canvas.onmousemove = diagramOnMouseMove;
@@ -262,6 +266,7 @@ class Diagrams {
         this.canvas.oncontextmenu = diagramOnContext;
         window.onresize = diargramOnResize;
         this.editNodeCallback = editNodeCallback;
+        this.deleteNodeCallback = deleteNodeCallback;
     }
 
     onmousemove(ev: MouseEvent){

static/edit.js

@@ -114,6 +114,23 @@ function editNode(node) {
     submitButton.innerHTML = "Save";
     submitButton.onclick = function () { submitEditNode(node); };
 }
+function deleteNode(node) {
+    var index = 0;
+    for (var _i = 0, _a = _diagram.nodes; _i < _a.length; _i++) {
+        var n = _a[_i];
+        if (node.id == n.id) {
+            _diagram.nodes.splice(index, 1);
+        }
+        index++;
+    }
+    for (var i = 0; i < _diagram.connections.length; i++) {
+        var _b = _diagram.connections[i], output = _b[0], input = _b[1];
+        if (node.id == output.id || node.id == input.id) {
+            _diagram.connections.splice(i, 1);
+            i--;
+        }
+    }
+}
 function submitEditNode(node) {
     var nameInput = document.getElementById("nameInput");
     node.label = nameInput.value;

static/edit.ts

@@ -136,6 +136,23 @@ function editNode(node: DiagramNode){
     submitButton.onclick = function() {submitEditNode(node);}
 }
 
+function deleteNode(node: DiagramNode){
+    let index = 0;
+    for (let n of _diagram.nodes){
+        if (node.id == n.id){
+            _diagram.nodes.splice(index, 1);
+        }
+        index++;
+    }
+    for (let i = 0; i < _diagram.connections.length; i++){
+        let [output, input] = _diagram.connections[i];
+        if (node.id == output.id || node.id == input.id){
+            _diagram.connections.splice(i, 1)
+            i--;
+        }
+    }
+}
+
 function submitEditNode(node: DiagramNode){
     let nameInput = document.getElementById("nameInput") as HTMLInputElement;
     node.label = nameInput.value;

templates/diagrams.html

@@ -70,7 +70,7 @@
 <script>
 var diagrams;
 function canvasInit() {
-    diagrams = new Diagrams("canvas", editNode);
+    diagrams = new Diagrams("canvas", editNode, deleteNode);
     diagrams.addNode(1, 100, 100, "Test", {type: "json"});
     diagrams.addNode(2, 300, 300, "Test2", {type: "css"});
     diagrams.addNode(3, 500, 500, "A much longer name", {type: "replace"});