131 lines
3.5 KiB
JavaScript
131 lines
3.5 KiB
JavaScript
class Note {
|
|
constructor(x, y, w, h) {
|
|
this.active = false;
|
|
this.dragging = false;
|
|
this.rollover = false;
|
|
this.resizing = false;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.w = w;
|
|
this.h = h;
|
|
this.offsetX = 0;
|
|
this.offsetY = 0;
|
|
this.startMouseX = 0;
|
|
this.startMouseY = 0;
|
|
this.startW = w;
|
|
this.startH = h;
|
|
this.text = "test123";
|
|
this.fontSize = 32;
|
|
this.clickedAt = 0;
|
|
}
|
|
|
|
over() {
|
|
// Is mouse over object
|
|
if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
|
|
this.rollover = true;
|
|
} else {
|
|
this.rollover = false;
|
|
}
|
|
}
|
|
|
|
update() {
|
|
if (!this.active){
|
|
return;
|
|
}
|
|
// Adjust location if being dragged
|
|
if (this.resizing){
|
|
this.w = this.startW + (mouseX - this.startMouseX);
|
|
this.h = this.startH + (mouseY - this.startMouseY);
|
|
if (this.w < 10){
|
|
this.w = 10;
|
|
} else if (this.x + this.w > canWidth) {
|
|
this.w = canWidth - this.x;
|
|
}
|
|
|
|
if (this.h < 10){
|
|
this.h = 10;
|
|
} else if (this.y + this.h > canHeight) {
|
|
this.h = canHeight - this.y;
|
|
}
|
|
|
|
} else if (this.dragging) {
|
|
this.x = mouseX + this.offsetX;
|
|
this.y = mouseY + this.offsetY;
|
|
|
|
if (this.x < 0){
|
|
this.x = 0;
|
|
} else if (this.x + this.w > canWidth) {
|
|
this.x = canWidth - this.w;
|
|
}
|
|
|
|
if (this.y < 0){
|
|
this.y = 0;
|
|
} else if (this.y + this.h > canHeight) {
|
|
this.y = canHeight - this.h;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
show() {
|
|
fill(255);
|
|
|
|
strokeWeight(1);
|
|
// Different fill based on state
|
|
if (this.resizing){
|
|
stroke(0, 255, 0);
|
|
} else if (this.dragging) {
|
|
stroke(0, 0, 255);
|
|
} else {
|
|
stroke(150);
|
|
}
|
|
|
|
rect(this.x, this.y, this.w, this.h, 5);
|
|
line(this.x, this.y + this.fontSize + 10, this.x + this.w, this.y + this.fontSize + 10);
|
|
|
|
strokeWeight(0);
|
|
stroke(0);
|
|
fill(0);
|
|
textSize(this.fontSize);
|
|
textFont('Verdana')
|
|
let w = textWidth(this.text);
|
|
|
|
text(this.text, this.x + (this.w / 2) - (w / 2), this.y + 2, this.w - 4, this.h - 4);
|
|
|
|
}
|
|
|
|
pressed() {
|
|
if (this.active){
|
|
return;
|
|
}
|
|
// Did I click on the rectangle?
|
|
if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
|
|
//console.log(mouseButton === RIGHT);
|
|
let newTime = moment().valueOf();
|
|
|
|
if (!ctrl && newTime - this.clickedAt <= 500){
|
|
console.log(newTime - this.clickedAt);
|
|
console.log('double');
|
|
return;
|
|
}
|
|
this.clickedAt = newTime;
|
|
this.active = true;
|
|
this.dragging = !ctrl;
|
|
this.resizing = ctrl;
|
|
|
|
this.startMouseX = mouseX;
|
|
this.startMouseY = mouseY;
|
|
this.offsetX = this.x - mouseX;
|
|
this.offsetY = this.y - mouseY;
|
|
this.startW = this.w;
|
|
this.startH = this.h;
|
|
return true;
|
|
}
|
|
}
|
|
|
|
released() {
|
|
this.active = false;
|
|
this.dragging = false;
|
|
this.resizing = false;
|
|
}
|
|
} |