Slow solution for annotation heading chrome

ecoacoustics · Jan 22, 2025 · 3cc5853 · 3cc5853
1 parent 3ce3ed8
commit 3cc5853
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/src/components/annotate/annotate.ts b/src/components/annotate/annotate.ts
@@ -1,15 +1,15 @@
 import { html, HTMLTemplateResult, LitElement, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, queryAll } from "lit/decorators.js";
 import { AbstractComponent } from "../../mixins/abstractComponent";
 import { queryAllDeeplyAssignedElements, queryDeeplyAssignedElement } from "../../helpers/decorators";
 import { SpectrogramComponent } from "../spectrogram/spectrogram";
-import { UnitConverter } from "../../models/unitConverters";
+import { AngleDegrees, Pixel, UnitConverter } from "../../models/unitConverters";
 import { AnnotationComponent } from "../annotation/annotation";
 import { Annotation } from "../../models/annotation";
 import { booleanConverter, enumConverter } from "../../helpers/attributes";
 import { map } from "lit/directives/map.js";
 import { Tag } from "../../models/tag";
-import { computed, watch } from "@lit-labs/preact-signals";
+import { computed, signal, watch } from "@lit-labs/preact-signals";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 import { CssVariable } from "../../helpers/types/advancedTypes";
@@ -80,12 +80,52 @@ export class AnnotateComponent extends AbstractComponent(LitElement) {
   @queryAllDeeplyAssignedElements({ selector: "oe-annotation" })
   private annotationElements?: AnnotationComponent[];
 
+  @queryAll(".bounding-box-heading")
+  private headingElements!: Readonly<NodeListOf<HTMLLabelElement>>;
+
   @query(".annotation-chrome")
   private annotationSurface!: HTMLDivElement;
 
+  private readonly headingChromeHeight = signal<Pixel>(0);
   private unitConverter?: UnitConverter;
   private annotationModels: Annotation[] = [];
 
+  public updated(): void {
+    // prettier-ignore
+    const boundingBoxes = Array.from(this.headingElements).map(
+      (element) => element.getBoundingClientRect(),
+    );
+
+    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;
+      }
+    });
+
+    this.headingChromeHeight.value = maximumHeight;
+
+    console.debug(maximumHeight);
+  }
+
   public handleSlotChange(): void {
     if (this.spectrogram && this.spectrogram.unitConverters) {
       this.unitConverter = this.spectrogram.unitConverters.value;
@@ -243,7 +283,7 @@ export class AnnotateComponent extends AbstractComponent(LitElement) {
         ${when(
           this.tagStyle === AnnotationTagStyle.SPECTROGRAM_TOP,
           () => html`
-            <div class="headings-chrome">
+            <div class="headings-chrome" style="height: ${watch(this.headingChromeHeight)}px">
               ${map(visibleAnnotations, (model: Annotation) => this.spectrogramTopHeadingTemplate(model))}
             </div>
           `,

diff --git a/src/components/annotate/css/style.css b/src/components/annotate/css/style.css
@@ -72,14 +72,14 @@
   margin: 0;
   font-size: var(--oe-font-size);
 
-  color: var(--oe-annotation-font-color);
-  background-color: var(--oe-annotation-color);
-
   position-visibility: no-overflow;
 
   &.style-edge {
     position: absolute;
 
+    color: var(--oe-annotation-font-color);
+    background-color: var(--oe-annotation-color);
+
     left: max(anchor(left), 0px);
     bottom: max(anchor(top), 0px);
     position-try: flip-block, flip-inline, --pt;
@@ -97,14 +97,14 @@
       heading to the annotation bounding box.
       This makes it easier to see what annotation a heading is associated with.
     */
-    &::before {
+    /* &::before {
       position: absolute;
       height: 100%;
 
       border: var(--oe-annotation-weight) solid var(--oe-annotation-color);
 
       content: "";
-    }
+    } */
   }
 
   &.style-hidden {

diff --git a/src/components/annotation/annotation.ts b/src/components/annotation/annotation.ts
@@ -5,7 +5,7 @@ import { queryAllDeeplyAssignedElements, required } from "../../helpers/decorato
 import { Annotation } from "../../models/annotation";
 import { Tag } from "../../models/tag";
 import { tagArrayConverter } from "../../helpers/attributes";
-import { TagComponent } from "tag/tag";
+import { TagComponent } from "../tag/tag";
 import { Hertz, Seconds } from "../../models/unitConverters";
 
 /**

diff --git a/src/models/unitConverters.ts b/src/models/unitConverters.ts
@@ -9,6 +9,7 @@ export type MHertz = number;
 export type Sample = number;
 export type Pixel = number;
 export type EmUnit = number;
+export type AngleDegrees = number;
 
 /**
  * A value that is bounded from [0, 1]