@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.111 → 2.0.0-next.113

package/src/navigation-instruments/watch/force-pattern.spec.ts

@@ -96,4 +96,46 @@ describe('renderCurrentForcePattern', () => {
     );
     expect(flat).toContain(String(-(256 * 1.39) / 2 + 104 * 1.39));
   });
+
+  it('honors wave tuning: length scales the tile, height caps opacity, speed drifts', () => {
+    const flat = flatten(
+      renderCurrentForcePattern({
+        fromDirectionDeg: 0,
+        radius: 112,
+        patternScale: 2.0,
+        waveLength: 0.75,
+        waveHeight: 0.6,
+        waveSpeed: 0.4,
+      })
+    );
+    expect(flat).toContain(`width=${48 * 2.0 * 0.75}`);
+    expect(flat).toContain('stop-opacity=0.6');
+    expect(flat).toContain('animateTransform');
+    expect(flat).toContain('dur="2.5s"');
+  });
+
+  it('is static at full intensity without wave options', () => {
+    const flat = flatten(
+      renderCurrentForcePattern({
+        fromDirectionDeg: 0,
+        radius: 112,
+        patternScale: 1.39,
+      })
+    );
+    expect(flat).not.toContain('animateTransform');
+    expect(flat).toContain('stop-opacity=1');
+  });
+
+  it('falls back to full intensity for a non-finite waveHeight', () => {
+    const flat = flatten(
+      renderCurrentForcePattern({
+        fromDirectionDeg: 0,
+        radius: 112,
+        patternScale: 1.39,
+        waveHeight: Number.NaN,
+      })
+    );
+    expect(flat).toContain('stop-opacity=1');
+    expect(flat).not.toContain('NaN');
+  });
 });

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

@@ -1,4 +1,4 @@
-import {svg, SVGTemplateResult} from 'lit';
+import {nothing, svg, SVGTemplateResult} from 'lit';
 
 /**
  * Options for the force-graphics pattern underlays (wind streaks / current
@@ -19,6 +19,22 @@ export interface ForcePatternOptions {
   color?: string;
 }
 
+/** Wave tuning for the current band pattern, on top of the shared options. */
+export interface CurrentForcePatternOptions extends ForcePatternOptions {
+  /**
+   * Wavelength as a multiplier on the design band spacing (1 = design,
+   * 0.5 = twice as dense). Non-finite or non-positive values fall back to 1.
+   */
+  waveLength?: number;
+  /** Wave intensity: peak opacity the band gradient fades up to (0–1). */
+  waveHeight?: number;
+  /**
+   * Drift speed in wavelengths per second, moving with the flow (negative
+   * drifts against it). 0 / undefined keeps the pattern static.
+   */
+  waveSpeed?: number;
+}
+
 const DESIGN_PATTERN_SQUARE = 256;
 const WIND_TILE = 24;
 /**
@@ -64,21 +80,39 @@ export function renderWindForcePattern(
 /**
  * Current force-graphics: soft-edged gradient bands (48-unit sawtooth,
  * transparent → opaque), perpendicular to the flow, clipped to a circle and
- * rotated by the from-direction.
+ * rotated by the from-direction. `waveLength` stretches the band spacing,
+ * `waveHeight` scales the gradient's peak opacity, and a non-zero `waveSpeed`
+ * drifts the field with the flow (one wavelength per `1/waveSpeed` seconds)
+ * via a declarative SMIL loop.
  */
 export function renderCurrentForcePattern(
-  options: ForcePatternOptions
+  options: CurrentForcePatternOptions
 ): SVGTemplateResult {
   const {fromDirectionDeg, radius, patternScale} = options;
   const color = options.color ?? DEFAULT_COLOR;
-  const tile = CURRENT_TILE * patternScale;
+  const lengthScale =
+    Number.isFinite(options.waveLength) && options.waveLength! > 0
+      ? options.waveLength!
+      : 1;
+  const intensity = Number.isFinite(options.waveHeight)
+    ? Math.max(0, Math.min(1, options.waveHeight!))
+    : 1;
+  const speed = Number.isFinite(options.waveSpeed) ? options.waveSpeed! : 0;
+  const tile = CURRENT_TILE * patternScale * lengthScale;
   const side = DESIGN_PATTERN_SQUARE * patternScale;
-  const phase = CURRENT_TILE_PHASE_OFFSET * patternScale;
+  const phase = CURRENT_TILE_PHASE_OFFSET * patternScale * lengthScale;
+  // The pattern is anchored in the rect's user space, so translating the
+  // wrapper group drifts the whole band field; the rect is one tile taller on
+  // each end to stay covering the clip disc across the loop.
+  const drift =
+    speed !== 0
+      ? svg`<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 ${tile * Math.sign(speed)}" dur="${1 / Math.abs(speed)}s" repeatCount="indefinite"/>`
+      : nothing;
   return svg`
     <defs>
       <linearGradient id="current-force-band-gradient" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
         <stop stop-color=${color} stop-opacity="0"/>
-        <stop offset="1" stop-color=${color}/>
+        <stop offset="1" stop-color=${color} stop-opacity=${intensity}/>
       </linearGradient>
       <pattern id="current-force-pattern" patternUnits="userSpaceOnUse" x=${-side / 2 + phase} y=${-side / 2 + phase} width=${tile} height=${tile} viewBox="0 0 48 48" preserveAspectRatio="none">
         <rect width="48" height="48" fill="url(#current-force-band-gradient)"/>
@@ -86,7 +120,10 @@ export function renderCurrentForcePattern(
       <clipPath id="current-force-clip"><circle cx="0" cy="0" r=${radius}/></clipPath>
     </defs>
     <g clip-path="url(#current-force-clip)" transform="rotate(${fromDirectionDeg})">
-      <rect x=${-side / 2} y=${-side / 2} width=${side} height=${side} fill="url(#current-force-pattern)"/>
+      <g>
+        ${drift}
+        <rect x=${-side / 2} y=${-side / 2 - tile} width=${side} height=${side + 2 * tile} fill="url(#current-force-pattern)"/>
+      </g>
     </g>
   `;
 }

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

@@ -55,6 +55,7 @@ import {
   renderCurrent,
   renderCurrentCentered,
   renderWind,
+  WIND_ICON_TIP_TO_BOX_INNER,
 } from './environment.js';
 import {customElement} from '../../decorator.js';
 import {type ZoomToFitArcFrame} from '../../svghelpers/arc-frame.js';
@@ -130,6 +131,17 @@ export function innerRingRadiusFor(type: WatchCircleType): number {
 
 const RADIAL_SETPOINT_INWARD_ADJUST = 4;
 
+/**
+ * Default anchors for the wind/current icons outside the outer ring (the
+ * compass layout): the 48-unit icon box sits 4 units off the ring, spanning
+ * 188–236 (OpenBridge 6.1 compass, node 19846-157200). The current chevron
+ * anchors by its tip at the box inner edge; the wind anchor adds the glyph's
+ * inward overhang so its box starts at the same edge.
+ */
+const CURRENT_ICON_OUTSIDE_RADIUS = OUTER_RING_RADIUS + 4;
+const WIND_ICON_OUTSIDE_RADIUS =
+  CURRENT_ICON_OUTSIDE_RADIUS + WIND_ICON_TIP_TO_BOX_INNER;
+
 /**
  * `<obc-watch>` - Core SVG renderer for circular/radial watch-based instruments.
  *
@@ -966,10 +978,13 @@ export class ObcWatch extends LitElement {
       : nothing;
 
     // Compute label positions once – used for both rendering and crosshair
-    // knockout. NSWE labels and the north arrow are px-fixed outside decor,
-    // so they follow the same labelsHidden degradation as tick label texts.
+    // knockout. NSWE labels are px-fixed outside decor, so they follow the
+    // same labelsHidden degradation as tick label texts. The north arrow is
+    // exempt: below the small-scale threshold it renders as a compact
+    // triangle at the ring that scales with the face, so it stays visible
+    // on the smallest faces without clipping.
     const showNsweLabels = this.showLabels && !this._labelsHidden;
-    const showNorthArrow = this.northArrow && !this._labelsHidden;
+    const showNorthArrow = this.northArrow;
     const insideLabels = this.tickmarksInside && showNsweLabels;
     const includeNorth = !this.northArrow;
     const labelPositions = showNsweLabels
@@ -1006,7 +1021,7 @@ export class ObcWatch extends LitElement {
         ? svg`<g transform="scale(${this.scaleWindIcon})">${renderWind({
             windKnots: this.windKnots,
             fromDirectionDeg: this.windFromDirectionDeg,
-            radius: this.windSymbolRadius ?? 192,
+            radius: this.windSymbolRadius ?? WIND_ICON_OUTSIDE_RADIUS,
             color: this.windColor,
           })}</g>`
         : nothing;
@@ -1022,7 +1037,7 @@ export class ObcWatch extends LitElement {
           : renderCurrent({
               current: this.current,
               fromDirectionDeg: this.currentFromDirectionDeg,
-              radius: this.currentSymbolRadius ?? 192,
+              radius: this.currentSymbolRadius ?? CURRENT_ICON_OUTSIDE_RADIUS,
               color: this.currentColor,
             })
         : nothing;

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

@@ -3,8 +3,10 @@ import {resolveWindArrowPlacement, WindVariant} from './wind.js';
 
 describe('resolveWindArrowPlacement', () => {
   it('matches the OpenBridge 6.1 design values (effective tip = radius × scale)', () => {
+    // Large: 48-unit icon box fills the double-face track band (112–160);
+    // tip anchor = 112 + inward overhang 3.1094 of the 2× glyph.
     expect(resolveWindArrowPlacement(WindVariant.large)).toEqual({
-      windSymbolRadius: 119,
+      windSymbolRadius: 112 + (24 - 22.4453) * 2,
       scaleWindIcon: 1.0,
     });
     expect(resolveWindArrowPlacement(WindVariant.medium)).toEqual({

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

@@ -7,6 +7,7 @@ import {
   WatchCircleType,
   innerRingRadiusFor,
 } from '../watch/watch.js';
+import {WIND_ICON_TIP_TO_BOX_INNER} from '../watch/environment.js';
 import {renderWindForcePattern} from '../watch/force-pattern.js';
 import {Priority} from '../types.js';
 import {customElement} from '../../decorator.js';
@@ -320,8 +321,11 @@ function resolveHistogramMaxRadius(variant: ResolvedWindVariant): number {
  * `scaleWindIcon` scales the arrow glyph — and, because the scale group wraps
  * the translated glyph, the effective tip radius is `radius × scale`.
  *
- * Values measured from the OpenBridge 6.1 Figma (node 6552-102891):
- * large tip ≈119 (inner-ring edge), medium ≈93, small ≈8 (touching center).
+ * Large places the 48-unit icon box exactly inside the double-face track
+ * band (112–160), per the OpenBridge 6.1 design (the icon box spans the
+ * band, node 19663-140867); the tip anchor is the box inner edge plus the
+ * glyph's inward overhang. Medium ≈93 and small ≈8 (touching center) are
+ * measured from the Figma variants (node 6552-102891).
  */
 export function resolveWindArrowPlacement(variant: ResolvedWindVariant): {
   windSymbolRadius: number;
@@ -329,7 +333,12 @@ export function resolveWindArrowPlacement(variant: ResolvedWindVariant): {
 } {
   switch (variant) {
     case WindVariant.large:
-      return {windSymbolRadius: 119, scaleWindIcon: 1.0};
+      return {
+        windSymbolRadius:
+          innerRingRadiusFor(WatchCircleType.double) +
+          WIND_ICON_TIP_TO_BOX_INNER,
+        scaleWindIcon: 1.0,
+      };
     case WindVariant.medium:
       return {windSymbolRadius: 62, scaleWindIcon: 1.5};
     case WindVariant.small: