From f237fad246c2cafc290323c41549281dbb25651e Mon Sep 17 00:00:00 2001 From: BroodjeAap Date: Sun, 2 Oct 2022 09:08:23 +0000 Subject: [PATCH] fixed editing nodes --- static/diagram.js | 30 ++++++++++++++++++++---------- static/diagram.ts | 41 ++++++++++++++++++++++++++++++----------- static/edit.js | 3 ++- static/edit.ts | 3 ++- 4 files changed, 54 insertions(+), 23 deletions(-) diff --git a/static/diagram.js b/static/diagram.js index 23cdc79..4d381be 100644 --- a/static/diagram.js +++ b/static/diagram.js @@ -65,14 +65,21 @@ var CanvasObject = /** @class */ (function () { }()); var Button = /** @class */ (function (_super) { __extends(Button, _super); - function Button(x, y, label, ctx) { + function Button(x, y, label, ctx, callback, node) { var _this = _super.call(this, x, y, 0, 0) || this; + _this.callback = function () { }; _this.label = label; + _this.callback = callback; + _this.node = node; _this.resize(ctx); return _this; } Button.prototype.update = function (ms) { this.hover = this.pointInObject(new Point(ms.world.x + ms.offset.x, ms.world.y + ms.offset.y)); + if (ms.click && this.hover) { + this.callback(this.node); + ms.click = false; + } }; Button.prototype.draw = function (ctx, ms) { ctx.fillStyle = this.hover ? "black" : "#6B6B6B"; @@ -193,16 +200,11 @@ var DiagramNode = /** @class */ (function (_super) { _this.id = id; _this.label = label; _this.meta = meta; - // @ts-ignore - _this.type = _this.meta.type; - if (["math", "condition"].indexOf(_this.type) >= 0) { - // @ts-ignore - _this.type = _this.meta.var1; - } + _this.fixType(); _this.resize(ctx); - _this.deleteButton = new Button(0, 0, "Del", ctx); - _this.editButton = new Button(0, 0, "Edit", ctx); - _this.logButton = new Button(0, 0, "Log", 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.editNodeCallback, _this); _this.input = new NodeIO(_this, true); _this.output = new NodeIO(_this, false); return _this; @@ -266,6 +268,14 @@ var DiagramNode = /** @class */ (function (_super) { ctx.lineWidth = 3; ctx.strokeRect(ms.offset.x + this.x, ms.offset.y + this.y, this.width, this.height); }; + DiagramNode.prototype.fixType = function () { + // @ts-ignore + this.type = this.meta.type; + if (["math", "condition"].indexOf(this.type) >= 0) { + // @ts-ignore + this.type = this.meta.var1; + } + }; DiagramNode.prototype.resize = function (ctx) { ctx.font = "20px Helvetica"; var labelSize = ctx.measureText(this.label); diff --git a/static/diagram.ts b/static/diagram.ts index 2344954..a5082ab 100644 --- a/static/diagram.ts +++ b/static/diagram.ts @@ -39,14 +39,30 @@ class Button extends CanvasObject { labelWidth: number; labelHeight: number; - constructor(x: number, y: number, label: string, ctx: CanvasRenderingContext2D){ + callback: (node: DiagramNode) => void = function (){}; + node: DiagramNode; + + constructor( + x: number, + y: number, + label: string, + ctx: CanvasRenderingContext2D, + callback: (node: DiagramNode) => void, + node: DiagramNode, + ){ super(x, y, 0, 0); this.label = label; + this.callback = callback; + this.node = node; this.resize(ctx); } update(ms: MouseState){ this.hover = this.pointInObject(new Point(ms.world.x + ms.offset.x, ms.world.y + ms.offset.y)); + if (ms.click && this.hover){ + this.callback(this.node); + ms.click = false; + } } draw(ctx: CanvasRenderingContext2D, ms: MouseState){ @@ -224,21 +240,15 @@ class DiagramNode extends CanvasObject { this.id = id; this.label = label; this.meta = meta; - // @ts-ignore - this.type = this.meta.type - if (["math", "condition"].indexOf(this.type) >= 0 ){ - // @ts-ignore - this.type = this.meta.var1 - } + this.fixType(); this.resize(ctx); - this.deleteButton = new Button(0, 0, "Del", ctx); - this.editButton = new Button(0, 0, "Edit", ctx); - this.logButton = new Button(0, 0, "Log", 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.editNodeCallback, this); this.input = new NodeIO(this, true); this.output = new NodeIO(this, false); - } update(ms: MouseState) { @@ -309,6 +319,15 @@ class DiagramNode extends CanvasObject { ctx.strokeRect(ms.offset.x + this.x, ms.offset.y + this.y, this.width, this.height); } + fixType() { + // @ts-ignore + this.type = this.meta.type + if (["math", "condition"].indexOf(this.type) >= 0 ){ + // @ts-ignore + this.type = this.meta.var1 + } + } + resize(ctx: CanvasRenderingContext2D){ ctx.font = "20px Helvetica"; let labelSize = ctx.measureText(this.label); diff --git a/static/edit.js b/static/edit.js index 9d9f535..7344d53 100644 --- a/static/edit.js +++ b/static/edit.js @@ -589,7 +589,8 @@ function submitEditNode(node) { var var3Input = document.getElementById("var3Input"); // @ts-ignore node.meta.var3 = var3Input.value; - //node.resize(); + node.fixType(); + node.resize(_diagram.ctx); } function saveWatch() { var e_1, _a, e_2, _b; diff --git a/static/edit.ts b/static/edit.ts index 40e3a27..1fb9958 100644 --- a/static/edit.ts +++ b/static/edit.ts @@ -609,7 +609,8 @@ function submitEditNode(node: DiagramNode){ // @ts-ignore node.meta.var3 = var3Input.value; - //node.resize(); + node.fixType(); + node.resize(_diagram.ctx); } function saveWatch(){