@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.96 → 2.0.0-next.98

package/src/navigation-instruments/watch/tickmark.spec.ts

@@ -0,0 +1,99 @@
+import {describe, it, expect} from 'vitest';
+import type {SVGTemplateResult} from 'lit';
+import {tickmark, TickmarkType, TickmarkStyle} from './tickmark.js';
+
+/**
+ * Collect every numeric interpolated value from a `tickmark()` result without
+ * rendering it. `tickmark()` returns Lit `SVGTemplateResult`s (or an array of
+ * them); the interpolated `x`/`y`/coordinate values live on `.values`. This
+ * lets us assert the geometry is finite in a plain Node environment — no DOM.
+ */
+function numericValues(
+  result: SVGTemplateResult | SVGTemplateResult[]
+): number[] {
+  const templates = Array.isArray(result) ? result : [result];
+  const numbers: number[] = [];
+  for (const template of templates) {
+    for (const value of template.values) {
+      if (typeof value === 'number') {
+        numbers.push(value);
+      }
+    }
+  }
+  return numbers;
+}
+
+describe('tickmark label positioning', () => {
+  // On first paint the element is not laid out yet, so obc-watch computes a
+  // scale of 0. A `textOnly` tick still renders a <text>, and dividing by a
+  // zero scale used to yield x/y of ±Infinity — which the browser rejects with
+  // `<text> attribute x: Expected length, "-Infinity"` (issue #1032).
+  it('keeps the zero-value textOnly label finite when the scale is 0', () => {
+    const result = tickmark(-90, {
+      size: TickmarkType.textOnly,
+      style: TickmarkStyle.regular,
+      scale: 0,
+      text: '0',
+      inside: false,
+      textRadius: 184,
+      maxDigits: 1,
+    });
+
+    for (const value of numericValues(result)) {
+      expect(Number.isFinite(value)).toBe(true);
+    }
+  });
+
+  it('keeps labelled ticks finite for a zero scale (inside and outside)', () => {
+    for (const inside of [false, true]) {
+      const result = tickmark(45, {
+        size: TickmarkType.primary,
+        style: TickmarkStyle.regular,
+        scale: 0,
+        text: '50',
+        inside,
+        textRadius: 184,
+        maxDigits: 2,
+      });
+
+      for (const value of numericValues(result)) {
+        expect(Number.isFinite(value)).toBe(true);
+      }
+    }
+  });
+
+  it('keeps rotated labels finite for a zero scale', () => {
+    const result = tickmark(120, {
+      size: TickmarkType.primary,
+      style: TickmarkStyle.regular,
+      scale: 0,
+      text: '12',
+      inside: false,
+      textRadius: 184,
+      rotation: 120,
+      maxDigits: 2,
+    });
+
+    for (const value of numericValues(result)) {
+      expect(Number.isFinite(value)).toBe(true);
+    }
+  });
+
+  it('does not distort geometry for a valid scale', () => {
+    // A settled scale must be untouched: the outside zero tick at -90° sits on
+    // the negative-x axis, so its x is finite and negative and y is ~0.
+    const result = tickmark(-90, {
+      size: TickmarkType.textOnly,
+      style: TickmarkStyle.regular,
+      scale: 1,
+      text: '0',
+      inside: false,
+      textRadius: 184,
+      maxDigits: 1,
+    });
+
+    const numbers = numericValues(result);
+    expect(numbers.every(Number.isFinite)).toBe(true);
+    expect(numbers.some((n) => n < -100)).toBe(true);
+  });
+});

package/src/navigation-instruments/watch/tickmark.ts

@@ -64,14 +64,15 @@ export function tickmark(
     endLabelsMaxMin?: boolean;
   }
 ): SVGTemplateResult | SVGTemplateResult[] {
-  // check if scale is not infinite
-  if (scale === Infinity || scale < 0) {
-    throw new Error('Tick scale is not valid');
-  }
+  // Before layout settles the caller can pass a scale of 0 (or a non-finite
+  // value). Label offsets are computed as `px / scale`, so a 0 scale would emit
+  // ±Infinity coordinates that the browser rejects. Fall back to a 1:1 scale
+  // until a real one is available (issue #1032).
+  const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
   const rOff = radiusOffset;
   let innerRadius: number;
   let outerRadius: number;
-  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);
+  textRadius = textRadius + (3 / safeScale + 3) * (inside ? -1 : 1);
   const rad = (angle * Math.PI) / 180;
   if (size === TickmarkType.primary) {
     innerRadius = 328 / 2 + rOff;
@@ -90,7 +91,13 @@ export function tickmark(
     outerRadius = 336 / 2 + rOff;
   } else {
     return [
-      textSvg(text ?? '', {angle, inside, scale, textRadius, endLabelsMaxMin}),
+      textSvg(text ?? '', {
+        angle,
+        inside,
+        scale: safeScale,
+        textRadius,
+        endLabelsMaxMin,
+      }),
     ];
   }
 
@@ -121,11 +128,17 @@ export function tickmark(
     if (rotation === undefined) {
       return [
         tick,
-        textSvg(text, {angle, inside, scale, textRadius, endLabelsMaxMin}),
+        textSvg(text, {
+          angle,
+          inside,
+          scale: safeScale,
+          textRadius,
+          endLabelsMaxMin,
+        }),
       ];
     } else {
       const newRadius =
-        textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;
+        textRadius + ((4 / safeScale + 5) * (inside ? -1 : 1) * maxDigits) / 2;
       const textX = Math.sin(rad) * newRadius;
       const textY = -Math.cos(rad) * newRadius;
       return [

package/src/navigation-instruments/watch/watch.ts

@@ -690,8 +690,13 @@ export class ObcWatch extends LitElement {
       }
     }
     const scale = Math.min(clientWidth / width, clientHeight / height);
-    if (scale === Infinity || scale < 0) {
-      throw new Error('Watch scale is not valid');
+    // On first paint the element and its parent can both still be zero-sized, so
+    // the scale is 0 (or non-finite). That value flows into `px / scale` label
+    // math and yields ±Infinity coordinates the browser rejects. Fall back to a
+    // 1:1 scale until a real size is available; the ResizeController re-renders
+    // with the true scale once the element is laid out (issue #1032).
+    if (!Number.isFinite(scale) || scale <= 0) {
+      return 1;
     }
     return scale;
   }

package/src/navigation-instruments/wind-propulsion/wind-propulsion.ts

@@ -58,7 +58,6 @@ export enum WindPropulsionPriorityElement {
  *   proportionally (default 100).
  * - For a full-circle compass, use `<obc-compass>` instead.
  *
- * @fires None
  * @beta
  */
 @customElement('obc-wind-propulsion')

package/src/pages/alert-detail-page/alert-detail-page.ts

@@ -30,6 +30,13 @@ export enum AlertDetailPageType {
 
 @localized()
 /**
+ * @slot note-label - Label for the note section, rendered when `hasNote` is true
+ * @slot note - Note content, rendered when `hasNote` is true
+ * @slot readout-graph-title - Title for the readout graph, rendered when `hasReadoutGraph` is true
+ * @slot readout-graph - Readout graph content, rendered when `hasReadoutGraph` is true
+ * @slot action - Action controls, rendered when `hasActions` is true
+ * @slot <detail>-label - Overrides the label of the `<detail>` field (e.g. `tagId-label`, `category-label`, `time-label`)
+ * @slot <detail>-value - Overrides the value of the `<detail>` field (e.g. `tagId-value`, `category-value`, `time-value`)
  * @beta
  */
 @customElement('obc-alert-detail-page')