@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.110 → 2.0.0-next.112

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: