From 95d20ad2bfd9daf4f4734bc10e5acb9c7d3c2a76 Mon Sep 17 00:00:00 2001 From: Hunter Rasmussen Date: Sat, 6 Mar 2021 20:14:35 -0700 Subject: [PATCH 1/3] adds buffer --- neural_nets.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/neural_nets.js b/neural_nets.js index 71773c7..851a59f 100644 --- a/neural_nets.js +++ b/neural_nets.js @@ -239,12 +239,13 @@ LabelView.radius = 25.0; LabelView.prototype.hits = function(mousePos, fontsize) { var halflen = this.text.length/2.0; + var buffer = 3.0; var min= new Vec(this.pos.x, this.pos.y); var max = new Vec(this.pos.x, this.pos.y); - min.x -= halflen*fontsize + 3; - min.y -= (fontsize/2.0) + 3; - max.x += halflen*fontsize + 3; - max.y += (fontsize/2.0) + 3; + min.x -= halflen*fontsize + buffer; + min.y -= (fontsize/2.0) + (buffer * 2); + max.x += halflen*fontsize + buffer; + max.y += (fontsize/2.0) + (buffer*2); return mousePos.inBounds(min, max); } From b5518fa51111c74f4b063f941c840a187e8754fc Mon Sep 17 00:00:00 2001 From: Hunter Rasmussen Date: Wed, 10 Mar 2021 16:48:39 -0700 Subject: [PATCH 2/3] fixes hitting label. Now is accurate --- neural_nets.js | 49 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/neural_nets.js b/neural_nets.js index 851a59f..7c0b969 100644 --- a/neural_nets.js +++ b/neural_nets.js @@ -237,15 +237,27 @@ function LabelView() { LabelView.radius = 25.0; -LabelView.prototype.hits = function(mousePos, fontsize) { - var halflen = this.text.length/2.0; - var buffer = 3.0; +//Determines a bounding box for a label +//Label.pos is the center point of the text on the canvas +//Therefore left is pos - half the width of the text +// and top is pos - fontboundingboxascent +LabelView.prototype.hits = function(mousePos, font, ctx) { + ctx.font = font; + var storedTextBaseline = ctx.textBaseline; + ctx.textBaseline = "middle"; + var metrics = ctx.measureText(this.text); + var toTop = metrics.fontBoundingBoxAscent; + var toBot = metrics.fontBoundingBoxDescent; + var halflen = metrics.width/2.0; + var padding = 3.0; var min= new Vec(this.pos.x, this.pos.y); var max = new Vec(this.pos.x, this.pos.y); - min.x -= halflen*fontsize + buffer; - min.y -= (fontsize/2.0) + (buffer * 2); - max.x += halflen*fontsize + buffer; - max.y += (fontsize/2.0) + (buffer*2); + min.x -= halflen + padding; + min.y -= toTop + padding; + max.x += halflen + padding; + max.y += toBot + padding; + //restore textBaseline just in case + ctx.textBaseline = storedTextBaseline; return mousePos.inBounds(min, max); } @@ -538,7 +550,7 @@ NetView.prototype.load = function(base64) { } if (read() !== d.length * 2) { - return SERIALIZATION_INVALID_LENGTH; + return SERIALIZATION_INVALID_LENGTH; } if (read() !== SERIALIZATION_VERSION) { @@ -743,8 +755,8 @@ EditLabelTool.createTextInputElement = function(sim){ }; -EditLabelTool.editLabel = function(sim, toEdit, newLoc) { - var input = EditLabelTool.createTextInputElement(sim); +EditLabelTool.editLabel = function(sim, toEdit, newLoc, e) { + var input = EditLabelTool.createTextInputElement(sim, e); input.focus(); input.addEventListener("focusout", function(){ toEdit.text = input.value; @@ -907,6 +919,7 @@ function Sim() { this.mousePos = new Vec(0, 0); this.fontsize = 14.0; + this.font = this.fontsize + 'pt monospace'; this.playBtn = document.getElementById('play-btn'); this.playBtn.onclick = this.togglePlay.bind(this); @@ -987,9 +1000,10 @@ function Sim() { return cell.hits(mousePos); }); - var fontsize = this.fontsize; + var font = this.font; + var ctx = this.ctx; var labelHit = this.net.labels.find(function (label) { - return label.hits(mousePos, fontsize); + return label.hits(mousePos, font, ctx); }); if (hit) { @@ -1110,9 +1124,10 @@ Sim.prototype.mouseDown = function(e) { return cell.hitsConnectors(mousePos); }); - var fontSize = this.fontsize; + var font = this.font; + var ctx = this.ctx; var labelHit = this.net.labels.find(function (label) { - return label.hits(mousePos,fontSize); + return label.hits(mousePos,font, ctx); }); if (hit) { @@ -1189,7 +1204,7 @@ function drawSim(ctx, canvas, sim) { } drawHoverRing(ctx, sim.net, sim.mousePos); - drawTextLabels(ctx, sim.net, sim.fontsize); + drawTextLabels(ctx, sim.net, sim.font); } function clearCanvas(ctx, canvas) { @@ -1240,8 +1255,8 @@ function drawSelectBox(ctx, selectTool, mousePos) { ctx.setLineDash([]); } -function drawTextLabels(ctx, net, fontsize){ - ctx.font = fontsize + 'pt monospace'; +function drawTextLabels(ctx, net, font){ + ctx.font = font; ctx.fillStyle = '#000000'; for(var i = 0; i < net.labels.length; i++){ label = net.labels[i]; From c3d0c8ca107b7e49311ac2259a877054f17d8858 Mon Sep 17 00:00:00 2001 From: Hunter Rasmussen Date: Wed, 10 Mar 2021 17:14:47 -0700 Subject: [PATCH 3/3] Moves inputbox for textlabel to currentmouseposition on creation --- neural_nets.js | 48 +++++++++++++++++++++++------------------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/neural_nets.js b/neural_nets.js index 081a995..7a1fd3d 100644 --- a/neural_nets.js +++ b/neural_nets.js @@ -760,7 +760,7 @@ function CreateTool(sim, e) { } else if (action == 'new-label') { added = sim.net.addTextLabel(); added.pos = canvasLoc; - sim.editLabelText(added); + sim.editLabelText(added, e); } menu.classList.remove('active'); } @@ -775,8 +775,8 @@ CreateTool.prototype.cancel = function() { this.menu.classList.remove('active'); }; -function EditTextTool(sim, text, callback) { - this.input = EditTextTool.createTextInputElement(sim); +function EditTextTool(sim, text, e, callback ) { + this.input = EditTextTool.createTextInputElement(sim, e); this.input.value = text; this.input.focus(); @@ -798,13 +798,15 @@ EditTextTool.prototype.cancel = function() { this.input.remove(); }; -EditTextTool.createTextInputElement = function(sim){ +EditTextTool.createTextInputElement = function(sim, e){ var dom = document.createElement("INPUT"); dom.setAttribute("type", "text"); dom.style.position = "absolute"; var rect = sim.canvas.getBoundingClientRect(); - dom.style.top = (sim.mousePos.y + rect.top).toString() + "px"; - dom.style.left = (sim.mousePos.x + rect.left).toString() + "px"; +// this.menu.style.left = e.pageX + 'px'; + // this.menu.style.top = e.pageY + 'px'; + dom.style.top = e.pageY + "px"; + dom.style.left = e.pageX + "px"; document.body.appendChild(dom); return dom; }; @@ -823,7 +825,7 @@ function EditLabelTool(sim, e, label){ action = e.target.getAttribute('data-action'); if (action === 'edit'){ - sim.editLabelText(label); + sim.editLabelText(label, e); } else if (action === 'delete') { sim.net.removeLabel(label); } @@ -844,17 +846,17 @@ EditLabelTool.prototype.cancel = function() { }; -EditLabelTool.editLabel = function(sim, toEdit, newLoc, e) { - var input = EditLabelTool.createTextInputElement(sim, e); - input.focus(); - input.addEventListener("focusout", function(){ - toEdit.text = input.value; - if(newLoc){ - toEdit.pos = newLoc; - } - input.remove(); - }); -}; +// EditLabelTool.editLabel = function(sim, toEdit, newLoc, e) { +// var input = EditLabelTool.createTextInputElement(sim, e); +// input.focus(); +// input.addEventListener("focusout", function(){ +// toEdit.text = input.value; +// if(newLoc){ +// toEdit.pos = newLoc; +// } +// input.remove(); +// }); +// }; @@ -1093,16 +1095,12 @@ function Sim() { var font = this.font; var ctx = this.ctx; - var labelHit = this.net.labels.find(function (label) { - return label.hits(mousePos, font, ctx); - }); - if (hit) { this.tool = new EditCellTool(this, e, hit); } else { var fontsize = this.fontsize; hit = this.net.labels.find(function (label) { - return label.hits(mousePos, fontsize); + return label.hits(mousePos, font, ctx); }); if (hit) { @@ -1256,13 +1254,13 @@ Sim.prototype.mouseDown = function(e) { } }; -Sim.prototype.editLabelText = function(label) { +Sim.prototype.editLabelText = function(label, e) { if (this.tool && this.tool.cancel) { this.tool.cancel(); delete this.tool; } var net = this.net; - this.tool = new EditTextTool(this, label.text, function(val) { + this.tool = new EditTextTool(this, label.text, e, function(val) { if (!val) { net.removeLabel(label); } else {