broodjeaap/go-watch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

some attempt at scaling, and set smaller font

Browse source
This commit is contained in:
BroodjeAap 2022-09-13 18:01:03 +00:00
parent 6001d86e41
commit 2f85b2ae76
2 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/diagram.js
View file

@ -72,6 +72,9 @@ function diagramOnMouseUp(ev) {
function diagramOnMouseMove(ev) { function diagramOnMouseMove(ev) {
_diagram.onmousemove(ev); _diagram.onmousemove(ev);
} }
function diagramOnWheel(ev) {
//_diagram.onwheel(ev);
}
var Diagrams = /** @class */ (function () { var Diagrams = /** @class */ (function () {
function Diagrams(canvasId) { function Diagrams(canvasId) {
this.nodes = new Array(); this.nodes = new Array();
@ -86,6 +89,7 @@ var Diagrams = /** @class */ (function () {
this.nodeDragging = null; this.nodeDragging = null;
this.nodeHover = null; this.nodeHover = null;
this.makingConnectionNode = null; this.makingConnectionNode = null;
this.scale = 1.0;
this.canvas = document.getElementById(canvasId); this.canvas = document.getElementById(canvasId);
if (this.canvas === null) { if (this.canvas === null) {
throw "Could not getElementById " + canvasId; throw "Could not getElementById " + canvasId;
@ -96,10 +100,11 @@ var Diagrams = /** @class */ (function () {
} }
_diagram = this; _diagram = this;
this.ctx = ctx; this.ctx = ctx;
this.ctx.font = "30px Helvetica"; this.ctx.font = "20px Helvetica";
this.canvas.onmousemove = diagramOnMouseMove; this.canvas.onmousemove = diagramOnMouseMove;
this.canvas.onmousedown = diagramOnMouseDown; this.canvas.onmousedown = diagramOnMouseDown;
this.canvas.onmouseup = diagramOnMouseUp; this.canvas.onmouseup = diagramOnMouseUp;
this.canvas.onwheel = diagramOnWheel;
window.onresize = diargramOnResize; window.onresize = diargramOnResize;
} }
Diagrams.prototype.onmousemove = function (ev) { Diagrams.prototype.onmousemove = function (ev) {
@ -192,6 +197,13 @@ var Diagrams = /** @class */ (function () {
} }
this.draw(); this.draw();
}; };
Diagrams.prototype.onwheel = function (ev) {
if (ev.deltaY > 0) {
return;
}
this.scale = Math.min(Math.max(this.scale - 0.1, 0.1), 1.0);
this.ctx.scale(this.scale, this.scale);
};
Diagrams.prototype.drawBackground = function () { Diagrams.prototype.drawBackground = function () {
this.ctx.fillStyle = "#D8D8D8"; this.ctx.fillStyle = "#D8D8D8";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
@ -200,7 +212,8 @@ var Diagrams = /** @class */ (function () {
this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height);
}; };
Diagrams.prototype.draw = function () { Diagrams.prototype.draw = function () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); var scale = 1 / this.scale;
this.ctx.clearRect(0, 0, this.canvas.width * scale, this.canvas.height * scale);
this.drawBackground(); this.drawBackground();
var fullCircleRadians = Math.PI + (Math.PI * 3); var fullCircleRadians = Math.PI + (Math.PI * 3);
if (this.makingConnectionNode != null) { if (this.makingConnectionNode != null) {
@ -237,18 +250,9 @@ var Diagrams = /** @class */ (function () {
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY); var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY);
/*
let hwWidth = 20;
let hwhWidth = hwWidth / 2;
let mouseOnHalfwayX = this.worldX - hwhWidth >= halfway.x && this.worldX + hwhWidth <= halfway.x;
let mouseOnHalfwayY = this.worldY - hwhWidth >= halfway.y && this.worldY + hwhWidth <= halfway.y;
console.log(mouseOnHalfwayX, mouseOnHalfwayY);
let mouseOnHalfway = mouseOnHalfwayX && mouseOnHalfwayY;
*/
var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20 * 20; var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20 * 20;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)"; this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
// this.ctx.arc(halfway.x, halfway.y, 20, 0, fullCircleRadians);
this.ctx.moveTo(halfway.x - 10, halfway.y - 10); this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
this.ctx.lineTo(halfway.x + 10, halfway.y + 10); this.ctx.lineTo(halfway.x + 10, halfway.y + 10);
this.ctx.moveTo(halfway.x + 10, halfway.y - 10); this.ctx.moveTo(halfway.x + 10, halfway.y - 10);
@ -261,7 +265,7 @@ var Diagrams = /** @class */ (function () {
this.ctx.fillStyle = node.hover ? "#303030" : "#161616"; this.ctx.fillStyle = node.hover ? "#303030" : "#161616";
this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height); this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height);
this.ctx.fillStyle = "#D3D3D3"; this.ctx.fillStyle = "#D3D3D3";
this.ctx.font = "30px Helvetica"; this.ctx.font = "20px Helvetica";
this.ctx.fillText(node.label, node.x + this.cameraX + node.height / 2, node.y + this.cameraY + node.height / 1.5); this.ctx.fillText(node.label, node.x + this.cameraX + node.height / 2, node.y + this.cameraY + node.height / 1.5);
this.ctx.fillStyle = node.inputHover ? "red" : "green"; this.ctx.fillStyle = node.inputHover ? "red" : "green";
this.ctx.beginPath(); this.ctx.beginPath();

32
static/diagram.ts
View file

@ -96,6 +96,9 @@ function diagramOnMouseUp(ev: MouseEvent){
function diagramOnMouseMove(ev: MouseEvent){ function diagramOnMouseMove(ev: MouseEvent){
_diagram.onmousemove(ev); _diagram.onmousemove(ev);
} }
function diagramOnWheel(ev: WheelEvent){
//_diagram.onwheel(ev);
}
class Diagrams { class Diagrams {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
@ -119,6 +122,8 @@ class Diagrams {
makingConnectionNode: DiagramNode | null = null; makingConnectionNode: DiagramNode | null = null;
scale: number = 1.0;
constructor(canvasId: string){ constructor(canvasId: string){
this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
if (this.canvas === null){ if (this.canvas === null){
@ -130,11 +135,13 @@ class Diagrams {
} }
_diagram = this; _diagram = this;
this.ctx = ctx; this.ctx = ctx;
this.ctx.font = "30px Helvetica"; this.ctx.font = "20px Helvetica";
this.canvas.onmousemove = diagramOnMouseMove; this.canvas.onmousemove = diagramOnMouseMove;
this.canvas.onmousedown = diagramOnMouseDown; this.canvas.onmousedown = diagramOnMouseDown;
this.canvas.onmouseup = diagramOnMouseUp; this.canvas.onmouseup = diagramOnMouseUp;
this.canvas.onwheel = diagramOnWheel;
window.onresize = diargramOnResize; window.onresize = diargramOnResize;
} }
onmousemove(ev: MouseEvent){ onmousemove(ev: MouseEvent){
@ -186,6 +193,7 @@ class Diagrams {
if (ev.button != 0){ if (ev.button != 0){
return; return;
} }
let canvasRect = this.canvas.getBoundingClientRect(); let canvasRect = this.canvas.getBoundingClientRect();
this.mouseX = ev.x - canvasRect.left; this.mouseX = ev.x - canvasRect.left;
this.mouseY = ev.y - canvasRect.top; this.mouseY = ev.y - canvasRect.top;
@ -227,6 +235,14 @@ class Diagrams {
this.draw(); this.draw();
} }
onwheel(ev: WheelEvent){
if(ev.deltaY > 0){
return;
}
this.scale = Math.min(Math.max(this.scale - 0.1, 0.1), 1.0);
this.ctx.scale(this.scale, this.scale);
}
drawBackground(){ drawBackground(){
this.ctx.fillStyle = "#D8D8D8"; this.ctx.fillStyle = "#D8D8D8";
this.ctx.fillRect(0,0,this.canvas.width, this.canvas.height); this.ctx.fillRect(0,0,this.canvas.width, this.canvas.height);
@ -236,7 +252,8 @@ class Diagrams {
} }
draw(){ draw(){
this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height); let scale = 1 / this.scale;
this.ctx.clearRect(0,0, this.canvas.width * scale, this.canvas.height * scale);
this.drawBackground(); this.drawBackground();
let fullCircleRadians = Math.PI + (Math.PI * 3); let fullCircleRadians = Math.PI + (Math.PI * 3);
if (this.makingConnectionNode != null){ if (this.makingConnectionNode != null){
@ -286,18 +303,9 @@ class Diagrams {
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY) let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
/*
let hwWidth = 20;
let hwhWidth = hwWidth / 2;
let mouseOnHalfwayX = this.worldX - hwhWidth >= halfway.x && this.worldX + hwhWidth <= halfway.x;
let mouseOnHalfwayY = this.worldY - hwhWidth >= halfway.y && this.worldY + hwhWidth <= halfway.y;
console.log(mouseOnHalfwayX, mouseOnHalfwayY);
let mouseOnHalfway = mouseOnHalfwayX && mouseOnHalfwayY;
*/
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20*20 let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20*20
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)"; this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
// this.ctx.arc(halfway.x, halfway.y, 20, 0, fullCircleRadians);
this.ctx.moveTo(halfway.x - 10, halfway.y - 10); this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
this.ctx.lineTo(halfway.x + 10, halfway.y + 10); this.ctx.lineTo(halfway.x + 10, halfway.y + 10);
this.ctx.moveTo(halfway.x + 10, halfway.y - 10); this.ctx.moveTo(halfway.x + 10, halfway.y - 10);
@ -309,7 +317,7 @@ class Diagrams {
this.ctx.fillStyle = node.hover ? "#303030" : "#161616"; this.ctx.fillStyle = node.hover ? "#303030" : "#161616";
this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height); this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height);
this.ctx.fillStyle = "#D3D3D3"; this.ctx.fillStyle = "#D3D3D3";
this.ctx.font = "30px Helvetica"; this.ctx.font = "20px Helvetica";
this.ctx.fillText( this.ctx.fillText(
node.label, node.label,
node.x + this.cameraX + node.height / 2, node.x + this.cameraX + node.height / 2,