@oicl/openbridge-webcomponents 2.0.0-next.111 → 2.0.0-next.112

package/bundle/openbridge-webcomponents.bundle.js

@@ -54698,6 +54698,8 @@ const WIND_SHAFT_BUCKETS = [
   100
 ];
 const WIND_ICON_SCALE = 2;
+const WIND_ICON_TIP_Y = 22.4453;
+const WIND_ICON_TIP_TO_BOX_INNER = (24 - WIND_ICON_TIP_Y) * WIND_ICON_SCALE;
 const windIconCache = /* @__PURE__ */ new Map();
 function getWindIconSvg(bucket) {
   const tagName = `obi-wind-true-${bucket}`;
@@ -55267,6 +55269,8 @@ function innerRingRadiusFor(type) {
   }
 }
 const RADIAL_SETPOINT_INWARD_ADJUST = 4;
+const CURRENT_ICON_OUTSIDE_RADIUS = OUTER_RING_RADIUS + 4;
+const WIND_ICON_OUTSIDE_RADIUS = CURRENT_ICON_OUTSIDE_RADIUS + WIND_ICON_TIP_TO_BOX_INNER;
 let ObcWatch = class extends i$4 {
   constructor() {
     super(...arguments);
@@ -55819,7 +55823,7 @@ let ObcWatch = class extends i$4 {
     );
     const advices = this.advices ? this.advices.map((a2) => renderAdvice$3(a2, rOff)) : A;
     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 ? getLabelPositions({
@@ -55845,7 +55849,7 @@ let ObcWatch = class extends i$4 {
     const wind = this.windKnots != null && this.windFromDirectionDeg != null ? w`<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>` : A;
     const current = this.current != null && this.currentFromDirectionDeg != null ? this.currentIconCentered ? renderCurrentCentered({
@@ -55856,7 +55860,7 @@ let ObcWatch = class extends i$4 {
     }) : renderCurrent({
       current: this.current,
       fromDirectionDeg: this.currentFromDirectionDeg,
-      radius: this.currentSymbolRadius ?? 192,
+      radius: this.currentSymbolRadius ?? CURRENT_ICON_OUTSIDE_RADIUS,
       color: this.currentColor
     }) : A;
     return b`
@@ -213112,7 +213116,7 @@ let ObcCompass = class extends i$4 {
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
           .crosshairCenterCutout=${this.hasCenterReadouts}
-          .northArrow=${!frame.labelsHidden}
+          .northArrow=${true}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -213392,14 +213396,18 @@ function renderWindForcePattern(options) {
 function renderCurrentForcePattern(options) {
   const { fromDirectionDeg, radius, patternScale } = options;
   const color2 = 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;
+  const drift = speed !== 0 ? w`<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 ${tile * Math.sign(speed)}" dur="${1 / Math.abs(speed)}s" repeatCount="indefinite"/>` : A;
   return w`
     <defs>
       <linearGradient id="current-force-band-gradient" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
         <stop stop-color=${color2} stop-opacity="0"/>
-        <stop offset="1" stop-color=${color2}/>
+        <stop offset="1" stop-color=${color2} 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)"/>
@@ -213407,7 +213415,10 @@ function renderCurrentForcePattern(options) {
       <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>
   `;
 }
@@ -213423,7 +213434,9 @@ var __decorateClass$L = (decorators, target, key, kind) => {
 };
 const CURRENT_PATTERN_SCALE_VESSEL = 1.39;
 const CURRENT_PATTERN_SCALE_DIRECTION = 2;
-const CURRENT_ICON_PERIPHERY_RADIUS = 116;
+const CURRENT_ICON_PERIPHERY_RADIUS = innerRingRadiusFor(
+  WatchCircleType.double
+);
 const CURRENT_DIRECTION_ICON_SCALE = 7;
 function clampCurrentSpeed(value) {
   if (value == null || !Number.isFinite(value)) {
@@ -213438,6 +213451,10 @@ let ObcCurrent = class extends i$4 {
     this.currentSpeed = null;
     this.currentFromDirection = null;
     this.priority = Priority.regular;
+    this.hasPattern = true;
+    this.waveLength = 1;
+    this.waveHeight = 1;
+    this.waveSpeed = 0;
     this.vesselImage = VesselImage.genericTop;
     this.vesselHeadingDeg = 0;
   }
@@ -213480,7 +213497,7 @@ let ObcCurrent = class extends i$4 {
     `;
   }
   renderForcePattern(watchCircleType) {
-    if (this.currentFromDirection == null) {
+    if (!this.hasPattern || this.currentFromDirection == null) {
       return A;
     }
     return b`
@@ -213489,7 +213506,10 @@ let ObcCurrent = class extends i$4 {
       fromDirectionDeg: this.currentFromDirection,
       radius: innerRingRadiusFor(watchCircleType),
       patternScale: this.isVesselType ? CURRENT_PATTERN_SCALE_VESSEL : CURRENT_PATTERN_SCALE_DIRECTION,
-      color: this.enhanced ? "var(--instrument-enhanced-tertiary-color)" : void 0
+      color: this.enhanced ? "var(--instrument-enhanced-tertiary-color)" : void 0,
+      waveLength: this.waveLength,
+      waveHeight: this.waveHeight,
+      waveSpeed: this.waveSpeed
     })}
       </svg>
     `;
@@ -213508,6 +213528,18 @@ __decorateClass$L([
 __decorateClass$L([
   n$3({ type: String })
 ], ObcCurrent.prototype, "priority", 2);
+__decorateClass$L([
+  n$3({ type: Boolean, attribute: false })
+], ObcCurrent.prototype, "hasPattern", 2);
+__decorateClass$L([
+  n$3({ type: Number })
+], ObcCurrent.prototype, "waveLength", 2);
+__decorateClass$L([
+  n$3({ type: Number })
+], ObcCurrent.prototype, "waveHeight", 2);
+__decorateClass$L([
+  n$3({ type: Number })
+], ObcCurrent.prototype, "waveSpeed", 2);
 __decorateClass$L([
   n$3({ type: String })
 ], ObcCurrent.prototype, "vesselImage", 2);
@@ -222128,7 +222160,7 @@ let ObcHeading = class extends i$4 {
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
           .crosshairCenterCutout=${this.hasCenterReadouts}
-          .northArrow=${!frame.labelsHidden}
+          .northArrow=${true}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -224483,9 +224515,16 @@ let ObcPitchRollHeave = class extends i$4 {
    * `obc-watch` renders its crosshair after the bands, i.e. on top of them.
    * Drawing it here puts it under the watch layer, so the bands and the heave
    * column mask it naturally.
+   *
+   * In `single-scale` nothing frames the segment above the vessel (the other
+   * three arms end under the pitch band, roll band and heave column), so the
+   * vertical arm stops at the centre instead of continuing upward. In
+   * `dual-scale` the top roll band gives it a natural endpoint, so the full
+   * arm is kept.
    */
   renderCrosshair() {
     const r2 = OUTER_RING_RADIUS;
+    const yTop = this.isDualScale ? -r2 : 0;
     return w`
       <line
         x1=${-r2} y1="0" x2=${r2} y2="0"
@@ -224493,7 +224532,7 @@ let ObcPitchRollHeave = class extends i$4 {
         vector-effect="non-scaling-stroke"
       />
       <line
-        x1="0" y1=${-r2} x2="0" y2=${r2}
+        x1="0" y1=${yTop} x2="0" y2=${r2}
         stroke="var(--instrument-frame-tertiary-color)"
         vector-effect="non-scaling-stroke"
       />
@@ -230747,6 +230786,20 @@ let ObcTopViewPropulsion = class extends i$4 {
       stroke-linecap="round"
     ></path>`;
   }
+  /**
+   * Thin outline on the track band's inner edge, always shown per the
+   * design's track face. Drawn on the overlay because the watch paints its
+   * band bars over the ring circles, which would swallow a watch-side line.
+   */
+  renderInnerRingLine() {
+    return w`<circle
+      r=${BAND_INNER_RADIUS}
+      fill="none"
+      stroke="var(--instrument-frame-tertiary-color)"
+      stroke-width="1"
+      vector-effect="non-scaling-stroke"
+    ></circle>`;
+  }
   renderPropeller() {
     return w`<g transform="scale(${PROPELLER_SCALE}) translate(-80 -80)">${propellerImages[this.propeller]}</g>`;
   }
@@ -230767,6 +230820,7 @@ let ObcTopViewPropulsion = class extends i$4 {
         <obc-watch
           .touching=${this.touching}
           .arcFrame=${frame}
+          .watchCircleType=${WatchCircleType.double}
           .tickmarks=${shownTickmarks}
           .state=${this.state}
           .priority=${this.priority}
@@ -230784,8 +230838,8 @@ let ObcTopViewPropulsion = class extends i$4 {
           .tickmarkStyle=${this.tickmarkStyle}
         ></obc-watch>
         <svg viewBox=${frame.viewBox} xmlns="http://www.w3.org/2000/svg">
-          ${this.renderLoadingArc()} ${this.renderSecondaryArc()}
-          ${this.renderPropeller()}
+          ${this.renderInnerRingLine()} ${this.renderLoadingArc()}
+          ${this.renderSecondaryArc()} ${this.renderPropeller()}
         </svg>
       </div>
     `;
@@ -232298,7 +232352,10 @@ function resolveHistogramMaxRadius(variant) {
 function resolveWindArrowPlacement(variant) {
   switch (variant) {
     case "large":
-      return { windSymbolRadius: 119, scaleWindIcon: 1 };
+      return {
+        windSymbolRadius: innerRingRadiusFor(WatchCircleType.double) + WIND_ICON_TIP_TO_BOX_INNER,
+        scaleWindIcon: 1
+      };
     case "medium":
       return { windSymbolRadius: 62, scaleWindIcon: 1.5 };
     case "small":