diff --git a/static/diagram.js b/static/diagram.js index 8d1360e..c829767 100644 --- a/static/diagram.js +++ b/static/diagram.js @@ -272,7 +272,6 @@ var DiagramNode = /** @class */ (function (_super) { _this.resize(ctx); _this.deleteButton = new Button(0, 0, "Del", ctx, _diagram.deleteNodeCallback, _this); _this.editButton = new Button(0, 0, "Edit", ctx, _diagram.editNodeCallback, _this); - _this.logButton = new Button(0, 0, "Log", ctx, _diagram.logNodeCallback, _this); _this.input = new NodeIO(_this, true); _this.output = new NodeIO(_this, false); _this.results = results; @@ -288,8 +287,7 @@ var DiagramNode = /** @class */ (function (_super) { if (this.hover) { this.deleteButton.update(ms); this.editButton.update(ms); - this.logButton.update(ms); - var onButtons = this.deleteButton.hover || this.editButton.hover || this.logButton.hover; + var onButtons = this.deleteButton.hover || this.editButton.hover; if (!this.dragging && ms.leftDown && !ms.draggingNode && !ms.draggingConnection && !onButtons) { this.dragging = true; ms.draggingNode = true; @@ -300,7 +298,6 @@ var DiagramNode = /** @class */ (function (_super) { else { this.deleteButton.hover = false; this.editButton.hover = false; - this.logButton.hover = false; } if (!ms.leftDown) { this.dragging = false; @@ -324,8 +321,9 @@ var DiagramNode = /** @class */ (function (_super) { var labelY = ms.offset.y + this.y + 3 * 2 + this.labelHeight; ctx.fillText(this.label, labelX, labelY); ctx.font = "15px Helvetica"; + ctx.fillStyle = "#898989"; var typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2; - var typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight; + var typeY = ms.offset.y + this.y + this.height - 3; ctx.fillText(this.type, typeX, typeY); var resultCount = "" + this.results.length; var resultCountSize = ctx.measureText(resultCount); @@ -340,9 +338,6 @@ var DiagramNode = /** @class */ (function (_super) { this.editButton.x = ms.offset.x + this.x + this.width - this.editButton.width; this.editButton.y = ms.offset.y + this.y + this.height - this.editButton.height; this.editButton.draw(ctx, ms); - this.logButton.x = ms.offset.x + this.x + this.width / 2 - this.logButton.width / 2; - this.logButton.y = ms.offset.y + this.y + this.height - this.logButton.height; - this.logButton.draw(ctx, ms); this.input.draw(ctx, ms); this.output.draw(ctx, ms); if (this.logs.length > 0) { @@ -448,10 +443,9 @@ var MouseState = /** @class */ (function () { return MouseState; }()); var Diagrams = /** @class */ (function () { - function Diagrams(canvasId, editNodeCallback, deleteNodeCallback, logNodeCallback) { + function Diagrams(canvasId, editNodeCallback, deleteNodeCallback) { if (editNodeCallback === void 0) { editNodeCallback = function () { }; } if (deleteNodeCallback === void 0) { deleteNodeCallback = function () { }; } - if (logNodeCallback === void 0) { logNodeCallback = function () { }; } this.shouldTick = true; this.nodes = new Map(); this.connections = new Array(); @@ -462,7 +456,6 @@ var Diagrams = /** @class */ (function () { this.newConnection = null; this.scale = 1.0; this.editNodeCallback = function () { }; - this.logNodeCallback = function () { }; this.deleteNodeCallback = function () { }; this.canvas = document.getElementById(canvasId); if (this.canvas === null) { @@ -475,7 +468,6 @@ var Diagrams = /** @class */ (function () { _diagram = this; this.ctx = ctx; this.editNodeCallback = editNodeCallback; - this.logNodeCallback = logNodeCallback; this.deleteNodeCallback = deleteNodeCallback; this.canvas.onmousemove = diagramOnMouseMove; this.canvas.onmousedown = diagramOnMouseDown; diff --git a/static/diagram.ts b/static/diagram.ts index 66c7a52..87c5314 100644 --- a/static/diagram.ts +++ b/static/diagram.ts @@ -298,7 +298,6 @@ class DiagramNode extends CanvasObject { deleteButton: Button; editButton: Button; - logButton: Button; dragging: boolean = false; dragOrigin: Point = new Point(); @@ -332,7 +331,6 @@ class DiagramNode extends CanvasObject { this.deleteButton = new Button(0, 0, "Del", ctx, _diagram.deleteNodeCallback, this); this.editButton = new Button(0, 0, "Edit", ctx, _diagram.editNodeCallback, this); - this.logButton = new Button(0, 0, "Log", ctx, _diagram.logNodeCallback, this); this.input = new NodeIO(this, true); this.output = new NodeIO(this, false); @@ -349,8 +347,7 @@ class DiagramNode extends CanvasObject { if (this.hover){ this.deleteButton.update(ms); this.editButton.update(ms); - this.logButton.update(ms); - let onButtons = this.deleteButton.hover || this.editButton.hover || this.logButton.hover; + let onButtons = this.deleteButton.hover || this.editButton.hover; if (!this.dragging && ms.leftDown && !ms.draggingNode && !ms.draggingConnection && !onButtons){ this.dragging = true; ms.draggingNode = true; @@ -360,7 +357,6 @@ class DiagramNode extends CanvasObject { } else { this.deleteButton.hover = false; this.editButton.hover = false; - this.logButton.hover = false; } if (!ms.leftDown){ @@ -388,8 +384,9 @@ class DiagramNode extends CanvasObject { ctx.fillText(this.label, labelX, labelY); ctx.font = "15px Helvetica"; + ctx.fillStyle = "#898989"; let typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2; - let typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight; + let typeY = ms.offset.y + this.y + this.height - 3; ctx.fillText(this.type, typeX, typeY); let resultCount = `${this.results.length}` @@ -407,10 +404,6 @@ class DiagramNode extends CanvasObject { this.editButton.x = ms.offset.x + this.x + this.width - this.editButton.width; this.editButton.y = ms.offset.y + this.y + this.height - this.editButton.height; this.editButton.draw(ctx, ms); - - this.logButton.x = ms.offset.x + this.x + this.width / 2 - this.logButton.width / 2; - this.logButton.y = ms.offset.y + this.y + this.height - this.logButton.height; - this.logButton.draw(ctx, ms); this.input.draw(ctx, ms); this.output.draw(ctx, ms); @@ -543,14 +536,12 @@ class Diagrams { scale: number = 1.0; editNodeCallback: (node: DiagramNode) => void = function (){}; - logNodeCallback: (node: DiagramNode) => void = function (){}; deleteNodeCallback: (node: DiagramNode) => void = function (){}; constructor( canvasId: string, editNodeCallback: (node: DiagramNode) => void = function (){}, deleteNodeCallback: (node: DiagramNode) => void = function (){}, - logNodeCallback: (node: DiagramNode) => void = function (){}, ){ this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; if (this.canvas === null){ @@ -563,7 +554,6 @@ class Diagrams { _diagram = this; this.ctx = ctx; this.editNodeCallback = editNodeCallback; - this.logNodeCallback = logNodeCallback; this.deleteNodeCallback = deleteNodeCallback; this.canvas.onmousemove = diagramOnMouseMove; diff --git a/static/edit.js b/static/edit.js index 12d38f8..512cef7 100644 --- a/static/edit.js +++ b/static/edit.js @@ -692,7 +692,7 @@ function onSubmitNewFilter() { }); } function editNode(node) { - var e_2, _a; + var e_2, _a, e_3, _b; var addFilterButton = document.getElementById("filterButton"); addFilterButton.click(); var name = node.label; @@ -717,11 +717,39 @@ function editNode(node) { onTypeChange(node); var submitButton = document.getElementById("submitFilterButton"); submitButton.innerHTML = "Save"; + var logHeader = document.getElementById("logHeader"); + if (node.logs.length > 0) { + logHeader.innerHTML = "Logs"; + } + else { + logHeader.innerHTML = ""; + } + var logBody = document.getElementById("logTableBody"); + logBody.innerHTML = ""; + try { + for (var _c = __values(node.logs), _d = _c.next(); !_d.done; _d = _c.next()) { + var log = _d.value; + var row = document.createElement("tr"); + var cell = document.createElement("td"); + var code = document.createElement("code"); + code.innerHTML = log; + cell.appendChild(code); + row.appendChild(cell); + logBody.appendChild(row); + } + } + catch (e_2_1) { e_2 = { error: e_2_1 }; } + finally { + try { + if (_d && !_d.done && (_a = _c["return"])) _a.call(_c); + } + finally { if (e_2) throw e_2.error; } + } var filterModalFooter = document.getElementById("filterResultsDiv"); filterModalFooter.innerHTML = ""; try { - for (var _b = __values(node.results), _c = _b.next(); !_c.done; _c = _b.next()) { - var result = _c.value; + for (var _e = __values(node.results), _f = _e.next(); !_f.done; _f = _e.next()) { + var result = _f.value; var cardDiv = document.createElement("div"); cardDiv.classList.add("card", "my-2"); var cardBody = document.createElement("div"); @@ -741,43 +769,14 @@ function editNode(node) { filterModalFooter.appendChild(cardDiv); } } - catch (e_2_1) { e_2 = { error: e_2_1 }; } - finally { - try { - if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); - } - finally { if (e_2) throw e_2.error; } - } - submitButton.onclick = function () { submitEditNode(node); }; -} -function logNode(node) { - var e_3, _a; - var logButton = document.getElementById("logButton"); - logButton.click(); - var logTitle = document.getElementById("logModalLabel"); - logTitle.innerHTML = node.label; - var logBody = document.getElementById("logTableBody"); - logBody.innerHTML = ""; - var logTable = document.getElementById("logTable"); - try { - for (var _b = __values(node.logs), _c = _b.next(); !_c.done; _c = _b.next()) { - var log = _c.value; - var row = document.createElement("tr"); - var cell = document.createElement("td"); - var code = document.createElement("code"); - code.innerHTML = log; - cell.appendChild(code); - row.appendChild(cell); - logBody.appendChild(row); - } - } catch (e_3_1) { e_3 = { error: e_3_1 }; } finally { try { - if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); + if (_f && !_f.done && (_b = _e["return"])) _b.call(_e); } finally { if (e_3) throw e_3.error; } } + submitButton.onclick = function () { submitEditNode(node); }; } function deleteNode(node) { _diagram.nodes["delete"](node.id); diff --git a/static/edit.ts b/static/edit.ts index 6b0d29d..a67336b 100644 --- a/static/edit.ts +++ b/static/edit.ts @@ -724,6 +724,24 @@ function editNode(node: DiagramNode){ let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement; submitButton.innerHTML = "Save"; + let logHeader = document.getElementById("logHeader") as HTMLHeadElement; + if (node.logs.length > 0){ + logHeader.innerHTML = "Logs"; + } else { + logHeader.innerHTML = ""; + } + let logBody = document.getElementById("logTableBody") as HTMLElement; + logBody.innerHTML = ""; + for (let log of node.logs){ + let row = document.createElement("tr"); + let cell = document.createElement("td"); + let code = document.createElement("code"); + code.innerHTML = log; + cell.appendChild(code); + row.appendChild(cell); + logBody.appendChild(row); + } + let filterModalFooter = document.getElementById("filterResultsDiv") as HTMLDivElement; filterModalFooter.innerHTML = ""; for (let result of node.results){ @@ -747,26 +765,6 @@ function editNode(node: DiagramNode){ submitButton.onclick = function() {submitEditNode(node);} } -function logNode(node: DiagramNode){ - let logButton = document.getElementById("logButton") as HTMLButtonElement; - logButton.click(); - - let logTitle = document.getElementById("logModalLabel") as HTMLHeadElement; - logTitle.innerHTML = node.label; - let logBody = document.getElementById("logTableBody") as HTMLElement; - logBody.innerHTML = ""; - let logTable = document.getElementById("logTable") as HTMLTableElement; - for (let log of node.logs){ - let row = document.createElement("tr"); - let cell = document.createElement("td"); - let code = document.createElement("code"); - code.innerHTML = log; - cell.appendChild(code); - row.appendChild(cell); - logBody.appendChild(row); - } -} - function deleteNode(node: DiagramNode){ _diagram.nodes.delete(node.id) for (let i = 0; i < _diagram.connections.length; i++){ diff --git a/templates/watch/edit.html b/templates/watch/edit.html index 941a940..3b5143a 100644 --- a/templates/watch/edit.html +++ b/templates/watch/edit.html @@ -39,11 +39,6 @@ Import Watch - - - View Watch @@ -106,6 +101,13 @@
+
Logs
+ + + + +
+
Outputs
@@ -158,31 +160,6 @@ - -