@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.105 → 2.0.0-next.106

package/src/navigation-instruments/pitch-roll/pitch-roll.ts

@@ -30,6 +30,20 @@ export enum PitchRollPriorityElement {
   roll = 'roll',
 }
 
+export enum PitchRollType {
+  /**
+   * Pitch and roll arcs on both opposing sides (default). Unlike
+   * `obc-pitch`/`obc-roll` this is the default, because it is the historical
+   * behaviour of `obc-pitch-roll`.
+   */
+  dualScale = 'dual-scale',
+  /**
+   * One pitch arc on the right and one roll arc at the bottom, with a thin
+   * ring completing the circle and rotating indicator lines in the centre.
+   */
+  singleScale = 'single-scale',
+}
+
 /** Half-side of the centre overlay viewBox in SVG units. */
 const CENTRE_HALF = 200;
 
@@ -54,6 +68,12 @@ const MIN_ARC_HALF_DEG = 2;
  */
 @customElement('obc-pitch-roll')
 export class ObcPitchRoll extends LitElement {
+  /**
+   * `dual-scale` (default) shows pitch and roll arcs on both opposing sides;
+   * `single-scale` shows one pitch arc on the right and one roll arc at the
+   * bottom, completed by a thin ring.
+   */
+  @property({type: String}) type: PitchRollType = PitchRollType.dualScale;
   @property({type: Number}) pitch = 0;
   @property({type: Number}) roll = 0;
   @property({type: Number}) minAvgPitch = 0;
@@ -155,28 +175,20 @@ export class ObcPitchRoll extends LitElement {
     return normalizeArcAngle(this.rollArcAngle ?? this.arcAngle, 30);
   }
 
+  private get isSingleScale(): boolean {
+    return this.type === PitchRollType.singleScale;
+  }
+
   override render() {
     const pitchReq = this.requestedPitchArcAngle;
     const rollReq = this.requestedRollArcAngle;
-    const areas = [
+    const areas: WatchArea[] = [
       {
         startAngle: 90 - pitchReq,
         endAngle: 90 + pitchReq,
         roundOutsideCut: true,
         roundInsideCut: true,
       },
-      {
-        startAngle: 270 - pitchReq,
-        endAngle: 270 + pitchReq,
-        roundOutsideCut: true,
-        roundInsideCut: true,
-      },
-      {
-        startAngle: 360 - rollReq,
-        endAngle: rollReq,
-        roundOutsideCut: true,
-        roundInsideCut: true,
-      },
       {
         startAngle: 180 - rollReq,
         endAngle: 180 + rollReq,
@@ -184,6 +196,22 @@ export class ObcPitchRoll extends LitElement {
         roundInsideCut: true,
       },
     ];
+    if (!this.isSingleScale) {
+      areas.push(
+        {
+          startAngle: 270 - pitchReq,
+          endAngle: 270 + pitchReq,
+          roundOutsideCut: true,
+          roundInsideCut: true,
+        },
+        {
+          startAngle: 360 - rollReq,
+          endAngle: rollReq,
+          roundOutsideCut: true,
+          roundInsideCut: true,
+        }
+      );
+    }
 
     const overlayViewBox = `-${CENTRE_HALF} -${CENTRE_HALF} ${CENTRE_HALF * 2} ${CENTRE_HALF * 2}`;
     const vesselScale = 224 / 160;
@@ -191,16 +219,56 @@ export class ObcPitchRoll extends LitElement {
     return html`
       <div class="container">
         <svg viewBox="${overlayViewBox}">
+          ${this.isSingleScale && !this.zoomToFitArc
+            ? this.renderRingComplement(pitchReq, rollReq)
+            : nothing}
           ${this.hasReadout
             ? nothing
             : svg`
-            <line
-              x1="-150"
-              y1="0"
-              x2="150"
-              y2="0"
-              stroke="var(--instrument-frame-tertiary-color)"
-            />
+            ${
+              this.isSingleScale
+                ? svg`
+                  <line
+                    x1=${-OUTER_RING_RADIUS}
+                    y1="0"
+                    x2=${OUTER_RING_RADIUS}
+                    y2="0"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                  <line
+                    x1="0"
+                    y1=${-OUTER_RING_RADIUS}
+                    x2="0"
+                    y2=${OUTER_RING_RADIUS}
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                  <line
+                    x1="0"
+                    y1="0"
+                    x2=${OUTER_RING_RADIUS - 10}
+                    y2="0"
+                    stroke="${this.needleColor(PitchRollPriorityElement.pitch)}"
+                    transform="rotate(${this.pitch} 0 0)"
+                  />
+                  <line
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2=${OUTER_RING_RADIUS - 10}
+                    stroke="${this.needleColor(PitchRollPriorityElement.roll)}"
+                    transform="rotate(${this.roll} 0 0)"
+                  />
+                `
+                : svg`
+                  <line
+                    x1="-150"
+                    y1="0"
+                    x2="150"
+                    y2="0"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                `
+            }
             <g
               style="transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);"
             >
@@ -242,6 +310,38 @@ export class ObcPitchRoll extends LitElement {
     `;
   }
 
+  /**
+   * Thin ring segments completing the circle between the single-scale arcs:
+   * one short segment between the pitch (right) and roll (bottom) arcs, and
+   * one long segment the other way around (left and top).
+   */
+  private renderRingComplement(pitchArc: number, rollArc: number) {
+    const r = OUTER_RING_RADIUS;
+    const pt = (deg: number): [number, number] => {
+      const rad = ((deg - 90) * Math.PI) / 180;
+      return [r * Math.cos(rad), r * Math.sin(rad)];
+    };
+    const segment = (from: number, to: number) => {
+      if (to - from <= 0) {
+        return nothing;
+      }
+      const [x1, y1] = pt(from);
+      const [x2, y2] = pt(to);
+      const large = to - from > 180 ? 1 : 0;
+      return svg`
+        <path
+          d="M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}"
+          fill="none"
+          stroke="var(--instrument-frame-tertiary-color)"
+        />
+      `;
+    };
+    return svg`
+      ${segment(90 + pitchArc, 180 - rollArc)}
+      ${segment(180 + rollArc, 450 - pitchArc)}
+    `;
+  }
+
   /**
    * Zoomed-arc layer: four CSS-rotated `<obc-watch>` instances, each
    * containing a single arc rendered at the watch's natural top
@@ -521,16 +621,18 @@ export class ObcPitchRoll extends LitElement {
     `;
 
     return html`
-      ${subWatch(
-        0,
-        rollFrame.subArcFrame,
-        rollAreas,
-        rollBars,
-        rollNeedles,
-        rollAdvices,
-        rollClip,
-        rollTickmarks
-      )}
+      ${this.isSingleScale
+        ? nothing
+        : subWatch(
+            0,
+            rollFrame.subArcFrame,
+            rollAreas,
+            rollBars,
+            rollNeedles,
+            rollAdvices,
+            rollClip,
+            rollTickmarks
+          )}
       ${subWatch(
         90,
         pitchFrame.subArcFrame,
@@ -551,16 +653,18 @@ export class ObcPitchRoll extends LitElement {
         rollClip,
         rollTickmarks
       )}
-      ${subWatch(
-        270,
-        pitchFrame.subArcFrame,
-        pitchAreas,
-        pitchBars,
-        pitchNeedles,
-        pitchAdvices,
-        pitchClip,
-        pitchTickmarks
-      )}
+      ${this.isSingleScale
+        ? nothing
+        : subWatch(
+            270,
+            pitchFrame.subArcFrame,
+            pitchAreas,
+            pitchBars,
+            pitchNeedles,
+            pitchAdvices,
+            pitchClip,
+            pitchTickmarks
+          )}
     `;
   }
 
@@ -603,55 +707,76 @@ export class ObcPitchRoll extends LitElement {
 
   /** Full unzoomed watch — original single-instance render. */
   private renderFullWatch(areas: WatchArea[]) {
+    const barAreas = [
+      {
+        startAngle: 180 + this.minAvgRoll,
+        endAngle: 180 + this.maxAvgRoll,
+        fillColor: this.barColor(PitchRollPriorityElement.roll),
+      },
+      {
+        startAngle: 90 + this.minAvgPitch,
+        endAngle: 90 + this.maxAvgPitch,
+        fillColor: this.barColor(PitchRollPriorityElement.pitch),
+      },
+    ];
+    const needles = [
+      {
+        angle: 180 + this.roll,
+        fillColor: this.needleColor(PitchRollPriorityElement.roll),
+        strokeColor: 'var(--border-silhouette-color)',
+      },
+      {
+        angle: 90 + this.pitch,
+        fillColor: this.needleColor(PitchRollPriorityElement.pitch),
+        strokeColor: 'var(--border-silhouette-color)',
+      },
+    ];
+    const tickmarks = [
+      {angle: 90, type: TickmarkType.main},
+      {angle: 180, type: TickmarkType.main},
+      ...arcTickmarks(90, this.requestedPitchArcAngle),
+      ...arcTickmarks(180, this.requestedRollArcAngle),
+    ];
+    if (!this.isSingleScale) {
+      barAreas.push(
+        {
+          startAngle: this.minAvgRoll,
+          endAngle: this.maxAvgRoll,
+          fillColor: this.barColor(PitchRollPriorityElement.roll),
+        },
+        {
+          startAngle: 270 + this.minAvgPitch,
+          endAngle: 270 + this.maxAvgPitch,
+          fillColor: this.barColor(PitchRollPriorityElement.pitch),
+        }
+      );
+      needles.push(
+        {
+          angle: this.roll,
+          fillColor: this.needleColor(PitchRollPriorityElement.roll),
+          strokeColor: 'var(--border-silhouette-color)',
+        },
+        {
+          angle: 270 + this.pitch,
+          fillColor: this.needleColor(PitchRollPriorityElement.pitch),
+          strokeColor: 'var(--border-silhouette-color)',
+        }
+      );
+      tickmarks.push(
+        {angle: 0, type: TickmarkType.main},
+        {angle: 270, type: TickmarkType.main},
+        ...arcTickmarks(0, this.requestedRollArcAngle),
+        ...arcTickmarks(270, this.requestedPitchArcAngle)
+      );
+    }
+
     return html`
       <obc-watch
         .watchCircleType=${WatchCircleType.double}
         .zoomToFitArc=${false}
         .areas=${areas}
-        .barAreas=${[
-          {
-            startAngle: this.minAvgRoll,
-            endAngle: this.maxAvgRoll,
-            fillColor: this.barColor(PitchRollPriorityElement.roll),
-          },
-          {
-            startAngle: 180 + this.minAvgRoll,
-            endAngle: 180 + this.maxAvgRoll,
-            fillColor: this.barColor(PitchRollPriorityElement.roll),
-          },
-          {
-            startAngle: 90 + this.minAvgPitch,
-            endAngle: 90 + this.maxAvgPitch,
-            fillColor: this.barColor(PitchRollPriorityElement.pitch),
-          },
-          {
-            startAngle: 270 + this.minAvgPitch,
-            endAngle: 270 + this.maxAvgPitch,
-            fillColor: this.barColor(PitchRollPriorityElement.pitch),
-          },
-        ]}
-        .needles=${[
-          {
-            angle: this.roll,
-            fillColor: this.needleColor(PitchRollPriorityElement.roll),
-            strokeColor: 'var(--border-silhouette-color)',
-          },
-          {
-            angle: 180 + this.roll,
-            fillColor: this.needleColor(PitchRollPriorityElement.roll),
-            strokeColor: 'var(--border-silhouette-color)',
-          },
-          {
-            angle: 90 + this.pitch,
-            fillColor: this.needleColor(PitchRollPriorityElement.pitch),
-            strokeColor: 'var(--border-silhouette-color)',
-          },
-          {
-            angle: 270 + this.pitch,
-            fillColor: this.needleColor(PitchRollPriorityElement.pitch),
-            strokeColor: 'var(--border-silhouette-color)',
-          },
-        ]}
+        .barAreas=${barAreas}
+        .needles=${needles}
         .vessels=${this.hasReadout
           ? []
           : [
@@ -666,16 +791,7 @@ export class ObcPitchRoll extends LitElement {
                 transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`,
               },
             ]}
-        .tickmarks=${[
-          {angle: 0, type: TickmarkType.main},
-          {angle: 90, type: TickmarkType.main},
-          {angle: 180, type: TickmarkType.main},
-          {angle: 270, type: TickmarkType.main},
-          ...arcTickmarks(0, this.requestedRollArcAngle),
-          ...arcTickmarks(180, this.requestedRollArcAngle),
-          ...arcTickmarks(90, this.requestedPitchArcAngle),
-          ...arcTickmarks(270, this.requestedPitchArcAngle),
-        ]}
+        .tickmarks=${tickmarks}
         .advices=${this.advices}
       ></obc-watch>
     `;
@@ -705,20 +821,22 @@ export class ObcPitchRoll extends LitElement {
         state: state,
         hideMaxTickmark: true,
       });
-      advices.push({
-        minAngle: 270 - outer,
-        maxAngle: 270 - inner,
-        type: AdviceType.caution,
-        state: state,
-        hideMinTickmark: true,
-      });
-      advices.push({
-        minAngle: 270 + inner,
-        maxAngle: 270 + outer,
-        type: AdviceType.caution,
-        state: state,
-        hideMaxTickmark: true,
-      });
+      if (!this.isSingleScale) {
+        advices.push({
+          minAngle: 270 - outer,
+          maxAngle: 270 - inner,
+          type: AdviceType.caution,
+          state: state,
+          hideMinTickmark: true,
+        });
+        advices.push({
+          minAngle: 270 + inner,
+          maxAngle: 270 + outer,
+          type: AdviceType.caution,
+          state: state,
+          hideMaxTickmark: true,
+        });
+      }
     }
     if (this.maxRollAdvice !== undefined) {
       const outer = Math.min(rollReq, 45);
@@ -726,20 +844,6 @@ export class ObcPitchRoll extends LitElement {
       const state = this.triggerRollAdvice
         ? AdviceState.triggered
         : AdviceState.regular;
-      advices.push({
-        minAngle: -outer,
-        maxAngle: -inner,
-        type: AdviceType.caution,
-        state: state,
-        hideMinTickmark: true,
-      });
-      advices.push({
-        minAngle: inner,
-        maxAngle: outer,
-        type: AdviceType.caution,
-        state: state,
-        hideMaxTickmark: true,
-      });
       advices.push({
         minAngle: 180 - outer,
         maxAngle: 180 - inner,
@@ -754,6 +858,22 @@ export class ObcPitchRoll extends LitElement {
         state: state,
         hideMaxTickmark: true,
       });
+      if (!this.isSingleScale) {
+        advices.push({
+          minAngle: -outer,
+          maxAngle: -inner,
+          type: AdviceType.caution,
+          state: state,
+          hideMinTickmark: true,
+        });
+        advices.push({
+          minAngle: inner,
+          maxAngle: outer,
+          type: AdviceType.caution,
+          state: state,
+          hideMaxTickmark: true,
+        });
+      }
     }
     return advices;
   }