diff --git a/js/draw/box.js b/js/draw/box.js index 38af43a..9df12fa 100644 --- a/js/draw/box.js +++ b/js/draw/box.js @@ -10,8 +10,12 @@ import { getApp, getContainer } from "./app.js"; const MARGIN = 20; const PADDING = 5; +const TITLE_MARGIN = 12; -function createText(text, { fontFamily, fontSize, fontWeight, align, fill }) { +function createText( + text, + { fontFamily, fontSize, fontWeight, align, fill, wrap = false, maxWidth } +) { return new Text({ text, style: new TextStyle({ @@ -20,6 +24,8 @@ function createText(text, { fontFamily, fontSize, fontWeight, align, fill }) { fontWeight, align, fill, + wordWrap: wrap, + wordWrapWidth: maxWidth, }), resolution: 2, }); @@ -118,10 +124,12 @@ export function addTitleToBox(title, box) { align: "center", fill: "black", fontWeight: "bold", + wrap: true, + maxWidth: box.width, }); box.addChild(boxTitle); boxTitle.position.set((box.width - boxTitle.width) / 2, MARGIN); - return boxTitle.position.y + boxTitle.height + 12; + return boxTitle.position.y + boxTitle.height + TITLE_MARGIN; } export function addLinesToBox(lines, box, y) { @@ -131,7 +139,8 @@ export function addLinesToBox(lines, box, y) { fontWeight: "normal", align: "center", fill: "black", - width: box.width, + wrap: true, + maxWidth: box.width, }); box.addChild(text); text.position.set((box.width - text.width) / 2, y); diff --git a/js/types/objects.js b/js/types/objects.js index bc1f67d..cad6c03 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -40,7 +40,7 @@ class EDMObject { box.interactiveChildren = false; addBox(box); box.position.set(this.x, this.y); - const nextY = addTitleToBox(this.constructor.name, box); + const nextY = addTitleToBox(this.titleName, box); box.cursor = "pointer"; box.eventMode = "static"; @@ -83,6 +83,7 @@ export class MCParticle extends EDMObject { this.color = "#dff6ff"; this.radius = 15; this.height = 270; + this.titleName = "MCParticle"; } async draw() { @@ -242,10 +243,11 @@ export class MCParticle extends EDMObject { class ReconstructedParticle extends EDMObject { constructor() { super(); - this.width = 140; + this.width = 145; this.height = 190; this.color = "#fbffdf"; this.radius = 30; + this.titleName = "Reconstructed\nParticle"; } async draw() { @@ -279,6 +281,7 @@ class Cluster extends EDMObject { this.height = 170; this.color = "#ffe8df"; this.radius = 20; + this.titleName = "Cluster"; } async draw() { @@ -309,6 +312,7 @@ class Track extends EDMObject { this.height = 150; this.color = "#fff6df"; this.radius = 25; + this.titleName = "Track"; } async draw() { @@ -338,6 +342,7 @@ class ParticleID extends EDMObject { this.height = 140; this.color = "#c9edf7"; this.radius = 25; + this.titleName = "Particle ID"; } async draw() { @@ -363,6 +368,7 @@ class Vertex extends EDMObject { this.height = 150; this.color = "#f5d3ef"; this.radius = 25; + this.titleName = "Vertex"; } async draw() {