Skip to content

Moves inputbox to mouse pos #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Moves inputbox to mouse pos #10

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95d20ad
adds buffer
Hunter-Rasmussen Mar 7, 2021
b5518fa
fixes hitting label. Now is accurate
Hunter-Rasmussen Mar 10, 2021
57dddb3
Merge branch 'master' of git://github.com/justinmeiners/neural-nets-sim
Hunter-Rasmussen Mar 10, 2021
c3d0c8c
Moves inputbox for textlabel to currentmouseposition on creation
Hunter-Rasmussen Mar 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 56 additions & 16 deletions neural_nets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,9 +253,28 @@ LabelView.prototype.bounds = function(fontsize) {
}
};

LabelView.prototype.hits = function(mousePos, fontsize) {
var bounds = this.bounds(fontsize);
return mousePos.inBounds(bounds.min, bounds.max);
//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 + 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);
}

function FiberView(i) {
Expand Down Expand Up @@ -575,7 +594,7 @@ NetView.prototype.load = function(base64) {
}

if (read() !== d.length * 2) {
return SERIALIZATION_INVALID_LENGTH;
return SERIALIZATION_INVALID_LENGTH;
}

var version = read();
Expand Down Expand Up @@ -741,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');
}
Expand All @@ -756,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();
Expand All @@ -779,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;
};
Expand All @@ -804,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);
}
Expand All @@ -824,6 +845,21 @@ 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();
// });
// };



function EditCellTool(sim, e, obj) {
var menu = document.getElementById('cell-menu');

Expand Down Expand Up @@ -974,6 +1010,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);
Expand Down Expand Up @@ -1056,12 +1093,14 @@ function Sim() {
return cell.hits(mousePos);
});

var font = this.font;
var ctx = this.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) {
Expand Down Expand Up @@ -1185,9 +1224,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) {
Expand All @@ -1214,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 {
Expand Down