From db64e9bc373566f63efa5f0e0d3350e3b4ab6b99 Mon Sep 17 00:00:00 2001 From: BroodjeAap Date: Mon, 19 Sep 2022 19:09:02 +0000 Subject: [PATCH] can delete nodes from context menu --- static/diagram.js | 8 +++++--- static/diagram.ts | 11 ++++++++--- static/edit.js | 17 +++++++++++++++++ static/edit.ts | 17 +++++++++++++++++ templates/diagrams.html | 2 +- 5 files changed, 48 insertions(+), 7 deletions(-) diff --git a/static/diagram.js b/static/diagram.js index 16af6a5..0c8bf3f 100644 --- a/static/diagram.js +++ b/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(); diff --git a/static/diagram.ts b/static/diagram.ts index b8664f0..496560a 100644 --- a/static/diagram.ts +++ b/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){ diff --git a/static/edit.js b/static/edit.js index 526c243..817a6ec 100644 --- a/static/edit.js +++ b/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; diff --git a/static/edit.ts b/static/edit.ts index 5546ccc..e525b44 100644 --- a/static/edit.ts +++ b/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; diff --git a/templates/diagrams.html b/templates/diagrams.html index 0b52e28..1229adf 100644 --- a/templates/diagrams.html +++ b/templates/diagrams.html @@ -70,7 +70,7 @@