From d2b072dda5f70f77d7e633241a04fe8f201896d6 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 11:29:28 -0500 Subject: [PATCH 1/4] create helper function to draw object header --- js/lib/graphic-primitives.js | 11 +++++++++++ js/types/objects.js | 2 -- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index 2e3438f5..64119846 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -107,3 +107,14 @@ export function drawStraightLink(ctx, link) { ctx.stroke(); ctx.restore(); } + +export function drawObjectHeader(ctx, object, y) { + ctx.save(); + ctx.font = "16px sans-serif"; + ctx.fontWeight = "bold"; + const text = object.constructor.name; + const boxCenterX = object.x + object.width / 2; + const x = boxCenterX - ctx.measureText(text).width / 2; + ctx.fillText(text, x, y); + ctx.restore(); +} diff --git a/js/types/objects.js b/js/types/objects.js index 5d526164..57ce68f9 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -44,9 +44,7 @@ class EDMObject { export class MCParticle extends EDMObject { constructor() { super(); - this.row = -1; - this.texImg = null; } From 824c6ddcb3dfd59e71dcdd6df7a41a4d911b5e6c Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 11:59:27 -0500 Subject: [PATCH 2/4] write object name on top --- js/lib/graphic-primitives.js | 21 +++++-- js/types/objects.js | 112 ++++++++++++++--------------------- 2 files changed, 62 insertions(+), 71 deletions(-) diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index 64119846..f8426ad5 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -108,13 +108,26 @@ export function drawStraightLink(ctx, link) { ctx.restore(); } -export function drawObjectHeader(ctx, object, y) { +export function drawObjectHeader(ctx, object) { ctx.save(); - ctx.font = "16px sans-serif"; - ctx.fontWeight = "bold"; + ctx.font = "bold 16px sans-serif"; const text = object.constructor.name; const boxCenterX = object.x + object.width / 2; + const textWidth = ctx.measureText(text).width; const x = boxCenterX - ctx.measureText(text).width / 2; - ctx.fillText(text, x, y); + const topY = object.y + 20; + + if (textWidth > object.width) { + const lines = text.split(/(?=[A-Z])/); + for (const [i, lineText] of lines.entries()) { + ctx.fillText( + lineText, + boxCenterX - ctx.measureText(lineText).width / 2, + topY + i * 20 + ); + } + } else { + ctx.fillText(text, x, topY); + } ctx.restore(); } diff --git a/js/types/objects.js b/js/types/objects.js index 57ce68f9..483cac06 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -2,11 +2,14 @@ import { drawTex, drawRoundedRect, drawTextLines, + drawObjectHeader, } from "../lib/graphic-primitives.js"; import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; +const TOP_MARGIN = 40; + class EDMObject { constructor() { this.x = NaN; @@ -14,13 +17,24 @@ class EDMObject { this.index = NaN; this.collectionId = NaN; this.width = 120; - this.height = 240; + this.height = 260; this.lineColor = "black"; this.lineWidth = 2; this.color = "white"; } - draw(ctx) {} + draw(ctx) { + drawRoundedRect( + ctx, + this.x, + this.y, + this.width, + this.height, + this.color, + this.radius + ); + drawObjectHeader(ctx, this); + } isHere(mouseX, mouseY) { return ( @@ -46,6 +60,8 @@ export class MCParticle extends EDMObject { super(); this.row = -1; this.texImg = null; + this.color = "#dff6ff"; + this.radius = 15; } updateTexImg(text) { @@ -63,15 +79,7 @@ export class MCParticle extends EDMObject { draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#dff6ff", - 15 - ); + super.draw(ctx); if (this.texImg.complete) { drawTex( @@ -93,7 +101,7 @@ export class MCParticle extends EDMObject { }; } - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const topLines = []; topLines.push("ID: " + this.index); topLines.push("Gen. stat.: " + this.generatorStatus); @@ -198,23 +206,17 @@ class ReconstructedParticle extends EDMObject { constructor() { super(); this.width = 140; - this.height = 180; + this.height = 190; + this.color = "#fbffdf"; + this.radius = 30; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#fbffdf", - 30 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + 1.5 * TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); @@ -243,23 +245,17 @@ class Cluster extends EDMObject { constructor() { super(); this.width = 140; - this.height = 180; + this.height = 170; + this.color = "#ffe8df"; + this.radius = 20; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#ffe8df", - 20 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); lines.push("type: " + this.type); @@ -282,23 +278,17 @@ class Track extends EDMObject { constructor() { super(); this.width = 140; - this.height = 180; + this.height = 150; + this.color = "#fff6df"; + this.radius = 25; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#fff6df", - 25 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); @@ -322,23 +312,17 @@ class ParticleID extends EDMObject { constructor() { super(); this.width = 140; - this.height = 120; + this.height = 140; + this.color = "#c9edf7"; + this.radius = 25; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#c9edf7", - 25 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); @@ -357,23 +341,17 @@ class Vertex extends EDMObject { constructor() { super(); this.width = 140; - this.height = 140; + this.height = 150; + this.color = "#f5d3ef"; + this.radius = 25; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#f5d3ef", - 25 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); From abff17c159f69d1957cbfa46136dda68b9eb65e5 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 12:06:41 -0500 Subject: [PATCH 3/4] adjust test according to new mcparticle height --- test/objects.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/objects.test.js b/test/objects.test.js index 1c483342..31cdee92 100644 --- a/test/objects.test.js +++ b/test/objects.test.js @@ -108,7 +108,7 @@ describe("Link", () => { secondObject.x = 140; secondObject.y = 250; - expect(link.isVisible(0, 0, 250, 250)).toBe(true); + expect(link.isVisible(0, 0, 300, 300)).toBe(true); }); it("should return false if the link is not visible", () => { From 136f20adf45968c714ce62297387cf0da1b16ea6 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Wed, 17 Jul 2024 09:46:23 -0500 Subject: [PATCH 4/4] add more vertical space for collection type title --- js/types/objects.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/types/objects.js b/js/types/objects.js index 483cac06..e52006d9 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -8,7 +8,7 @@ import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; -const TOP_MARGIN = 40; +const TOP_MARGIN = 45; class EDMObject { constructor() { @@ -62,6 +62,7 @@ export class MCParticle extends EDMObject { this.texImg = null; this.color = "#dff6ff"; this.radius = 15; + this.height = 270; } updateTexImg(text) { @@ -85,7 +86,7 @@ export class MCParticle extends EDMObject { drawTex( ctx, boxCenterX, - this.y + this.height * 0.4, + this.y + TOP_MARGIN + 80, this.texImg, this.width ); @@ -94,7 +95,7 @@ export class MCParticle extends EDMObject { drawTex( ctx, boxCenterX, - this.y + this.height * 0.4, + this.y + TOP_MARGIN + 80, this.texImg, this.width ); @@ -107,7 +108,7 @@ export class MCParticle extends EDMObject { topLines.push("Gen. stat.: " + this.generatorStatus); topLines.push("Sim. stat.: " + this.simulatorStatus); - const bottomY = this.y + this.height * 0.6; + const bottomY = this.y + this.height * 0.65; const bottomLines = []; bottomLines.push("p = " + this.momentum + " GeV"); bottomLines.push("d = " + this.vertex + " mm");