From 491e712b46c3db9238dc7897956cfc63cdb437bd Mon Sep 17 00:00:00 2001 From: hudson-newey Date: Wed, 22 Jan 2025 14:14:05 +1000 Subject: [PATCH] Include annotation heading height in chrome calculations --- dev/spectrogram-axes.html | 24 +++++++++++- dev/spectrogram.html | 58 ++++++++++++++--------------- src/components/annotate/annotate.ts | 48 +++++++++++++----------- 3 files changed, 78 insertions(+), 52 deletions(-) diff --git a/dev/spectrogram-axes.html b/dev/spectrogram-axes.html index e129a4bc..f7e9262a 100644 --- a/dev/spectrogram-axes.html +++ b/dev/spectrogram-axes.html @@ -9,9 +9,31 @@ - + + + + + diff --git a/dev/spectrogram.html b/dev/spectrogram.html index 829ad1e7..152cad13 100644 --- a/dev/spectrogram.html +++ b/dev/spectrogram.html @@ -8,38 +8,36 @@ - + - - - - - - - - - Bat - - Ultrasonic - - - + + + + + + + + Bat + + Ultrasonic + + - + Play diff --git a/src/components/annotate/annotate.ts b/src/components/annotate/annotate.ts index 6a8882af..568957ef 100644 --- a/src/components/annotate/annotate.ts +++ b/src/components/annotate/annotate.ts @@ -93,31 +93,37 @@ export class AnnotateComponent extends AbstractComponent(LitElement) { public updated(): void { // prettier-ignore const boundingBoxes = Array.from(this.headingElements).map( - (element) => element.getBoundingClientRect(), + (element) => { + const x = element.getBoundingClientRect(); + console.debug(element, x); + return x; + } ); let maximumHeight = -Infinity; boundingBoxes.forEach((bounds) => { - /* - / - /? - / ? - hypo / ? opposite (unknown; chrome height) - (width) / ? - /. ? - ------ - .deg: 20 - */ - - const angle: AngleDegrees = 20; - const hypotenuse = bounds.width; - - const opposite = hypotenuse * Math.sin(angle); - - console.debug(bounds); - - if (opposite > maximumHeight) { - maximumHeight = opposite; + // 1. we first have to calculate how much height the heading has + // 2. then we calculate how much height the 20 degree angle creates + // 3. we add the two heights together to get the chrome height required + // 4. we set the chrome height to the maximum of these values + + const headingAngle = 20 satisfies AngleDegrees; + + // 1. + const hypotOppositeAngle: AngleDegrees = 90 - headingAngle; + const innerAngle: AngleDegrees = 90 - hypotOppositeAngle; + const headingHeight: Pixel = Math.cos(innerAngle) * bounds.height; + + // 2. + const labelHeight: Pixel = Math.sin(headingAngle) * bounds.width; + + console.debug(labelHeight); + + // 3. + const totalHeight: Pixel = headingHeight + labelHeight; + + if (totalHeight > maximumHeight) { + maximumHeight = totalHeight; } });