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

added ids to nodes

Browse source
This commit is contained in:
BroodjeAap 2022-09-11 13:14:04 +00:00
parent a61e8343a2
commit 414d7a2877
3 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/diagram.js
View file

@ -1,8 +1,9 @@
var DiagramNode = /** @class */ (function () { var DiagramNode = /** @class */ (function () {
function DiagramNode(x, y, width, height, label) { function DiagramNode(id, x, y, width, height, label) {
this.hover = false; this.hover = false;
this.inputHover = false; this.inputHover = false;
this.outputHover = false; this.outputHover = false;
this.id = id;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.width = width; this.width = width;
@ -234,10 +235,10 @@ var Diagrams = /** @class */ (function () {
this.ctx.fill(); this.ctx.fill();
} }
}; };
Diagrams.prototype.addNode = function (x, y, label) { Diagrams.prototype.addNode = function (id, x, y, label) {
var textSize = this.ctx.measureText(label); var textSize = this.ctx.measureText(label);
var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent); var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.nodes.push(new DiagramNode(x, y, textSize.width + textHeight, textHeight, label)); this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
}; };
Diagrams.prototype.addConnection = function (A, B) { Diagrams.prototype.addConnection = function (A, B) {
this.connections.push([A, B]); this.connections.push([A, B]);

7
static/diagram.ts
View file

@ -1,4 +1,5 @@
class DiagramNode { class DiagramNode {
id: number;
x: number; x: number;
y: number; y: number;
label: string; label: string;
@ -13,12 +14,14 @@ class DiagramNode {
children: Array<DiagramNode>; children: Array<DiagramNode>;
constructor( constructor(
id: number;
x: number, x: number,
y: number, y: number,
width: number, width: number,
height: number, height: number,
label: string, label: string,
){ ){
this.id = id;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.width = width; this.width = width;
@ -278,10 +281,10 @@ class Diagrams {
} }
} }
addNode(x: number, y: number, label: string){ addNode(id: number, x: number, y: number, label: string){
let textSize = this.ctx.measureText(label); let textSize = this.ctx.measureText(label);
let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent); let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.nodes.push(new DiagramNode(x, y, textSize.width + textHeight, textHeight, label)); this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
} }
addConnection(A: DiagramNode, B: DiagramNode){ addConnection(A: DiagramNode, B: DiagramNode){

6
templates/diagrams.html
View file

@ -14,9 +14,9 @@
var diagrams; var diagrams;
function canvasInit() { function canvasInit() {
diagrams = new Diagrams("canvas"); diagrams = new Diagrams("canvas");
diagrams.addNode(100, 100, "Test"); diagrams.addNode(1, 100, 100, "Test");
diagrams.addNode(300, 300, "Test2"); diagrams.addNode(2, 300, 300, "Test2");
diagrams.addNode(500, 500, "A much longer name"); diagrams.addNode(3, 500, 500, "A much longer name");
diagrams.fillParent(); diagrams.fillParent();
} }
document.addEventListener('DOMContentLoaded', canvasInit, false); document.addEventListener('DOMContentLoaded', canvasInit, false);