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

package/bundle/openbridge-webcomponents.bundle.js

@@ -222792,6 +222792,7 @@ const MIN_ARC_HALF_DEG = 2;
 let ObcPitchRoll = class extends i$4 {
   constructor() {
     super(...arguments);
+    this.type = "dual-scale";
     this.pitch = 0;
     this.roll = 0;
     this.minAvgPitch = 0;
@@ -222842,6 +222843,9 @@ let ObcPitchRoll = class extends i$4 {
   get requestedRollArcAngle() {
     return normalizeArcAngle(this.rollArcAngle ?? this.arcAngle, 30);
   }
+  get isSingleScale() {
+    return this.type === "single-scale";
+  }
   render() {
     const pitchReq = this.requestedPitchArcAngle;
     const rollReq = this.requestedRollArcAngle;
@@ -222852,18 +222856,6 @@ let ObcPitchRoll = class extends i$4 {
         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,
@@ -222871,19 +222863,75 @@ let ObcPitchRoll = class extends i$4 {
         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;
     return b`
       <div class="container">
         <svg viewBox="${overlayViewBox}">
+          ${this.isSingleScale && !this.zoomToFitArc ? this.renderRingComplement(pitchReq, rollReq) : A}
           ${this.hasReadout ? A : w`
-            <line
-              x1="-150"
-              y1="0"
-              x2="150"
-              y2="0"
-              stroke="var(--instrument-frame-tertiary-color)"
-            />
+            ${this.isSingleScale ? w`
+                  <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(
+      "pitch"
+      /* pitch */
+    )}"
+                    transform="rotate(${this.pitch} 0 0)"
+                  />
+                  <line
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2=${OUTER_RING_RADIUS - 10}
+                    stroke="${this.needleColor(
+      "roll"
+      /* roll */
+    )}"
+                    transform="rotate(${this.roll} 0 0)"
+                  />
+                ` : w`
+                  <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);"
             >
@@ -222926,6 +222974,37 @@ let ObcPitchRoll = class extends i$4 {
       </div>
     `;
   }
+  /**
+   * 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).
+   */
+  renderRingComplement(pitchArc, rollArc) {
+    const r2 = OUTER_RING_RADIUS;
+    const pt = (deg) => {
+      const rad = (deg - 90) * Math.PI / 180;
+      return [r2 * Math.cos(rad), r2 * Math.sin(rad)];
+    };
+    const segment = (from2, to2) => {
+      if (to2 - from2 <= 0) {
+        return A;
+      }
+      const [x1, y1] = pt(from2);
+      const [x2, y22] = pt(to2);
+      const large = to2 - from2 > 180 ? 1 : 0;
+      return w`
+        <path
+          d="M ${x1} ${y1} A ${r2} ${r2} 0 ${large} 1 ${x2} ${y22}"
+          fill="none"
+          stroke="var(--instrument-frame-tertiary-color)"
+        />
+      `;
+    };
+    return w`
+      ${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
@@ -223117,7 +223196,7 @@ let ObcPitchRoll = class extends i$4 {
       ></obc-watch>
     `;
     return b`
-      ${subWatch(
+      ${this.isSingleScale ? A : subWatch(
       0,
       rollFrame.subArcFrame,
       rollAreas,
@@ -223147,7 +223226,7 @@ let ObcPitchRoll = class extends i$4 {
       rollClip,
       rollTickmarks
     )}
-      ${subWatch(
+      ${this.isSingleScale ? A : subWatch(
       270,
       pitchFrame.subArcFrame,
       pitchAreas,
@@ -223193,20 +223272,7 @@ let ObcPitchRoll = class extends i$4 {
   }
   /** Full unzoomed watch — original single-instance render. */
   renderFullWatch(areas) {
-    return b`
-      <obc-watch
-        .watchCircleType=${WatchCircleType.double}
-        .zoomToFitArc=${false}
-        .areas=${areas}
-        .barAreas=${[
-      {
-        startAngle: this.minAvgRoll,
-        endAngle: this.maxAvgRoll,
-        fillColor: this.barColor(
-          "roll"
-          /* roll */
-        )
-      },
+    const barAreas = [
       {
         startAngle: 180 + this.minAvgRoll,
         endAngle: 180 + this.maxAvgRoll,
@@ -223222,25 +223288,9 @@ let ObcPitchRoll = class extends i$4 {
           "pitch"
           /* pitch */
         )
-      },
-      {
-        startAngle: 270 + this.minAvgPitch,
-        endAngle: 270 + this.maxAvgPitch,
-        fillColor: this.barColor(
-          "pitch"
-          /* pitch */
-        )
       }
-    ]}
-        .needles=${[
-      {
-        angle: this.roll,
-        fillColor: this.needleColor(
-          "roll"
-          /* roll */
-        ),
-        strokeColor: "var(--border-silhouette-color)"
-      },
+    ];
+    const needles = [
       {
         angle: 180 + this.roll,
         fillColor: this.needleColor(
@@ -223256,16 +223306,65 @@ let ObcPitchRoll = class extends i$4 {
           /* pitch */
         ),
         strokeColor: "var(--border-silhouette-color)"
-      },
-      {
-        angle: 270 + this.pitch,
-        fillColor: this.needleColor(
-          "pitch"
-          /* pitch */
-        ),
-        strokeColor: "var(--border-silhouette-color)"
       }
-    ]}
+    ];
+    const tickmarks = [
+      { angle: 90, type: TickmarkType$1.main },
+      { angle: 180, type: TickmarkType$1.main },
+      ...arcTickmarks(90, this.requestedPitchArcAngle),
+      ...arcTickmarks(180, this.requestedRollArcAngle)
+    ];
+    if (!this.isSingleScale) {
+      barAreas.push(
+        {
+          startAngle: this.minAvgRoll,
+          endAngle: this.maxAvgRoll,
+          fillColor: this.barColor(
+            "roll"
+            /* roll */
+          )
+        },
+        {
+          startAngle: 270 + this.minAvgPitch,
+          endAngle: 270 + this.maxAvgPitch,
+          fillColor: this.barColor(
+            "pitch"
+            /* pitch */
+          )
+        }
+      );
+      needles.push(
+        {
+          angle: this.roll,
+          fillColor: this.needleColor(
+            "roll"
+            /* roll */
+          ),
+          strokeColor: "var(--border-silhouette-color)"
+        },
+        {
+          angle: 270 + this.pitch,
+          fillColor: this.needleColor(
+            "pitch"
+            /* pitch */
+          ),
+          strokeColor: "var(--border-silhouette-color)"
+        }
+      );
+      tickmarks.push(
+        { angle: 0, type: TickmarkType$1.main },
+        { angle: 270, type: TickmarkType$1.main },
+        ...arcTickmarks(0, this.requestedRollArcAngle),
+        ...arcTickmarks(270, this.requestedPitchArcAngle)
+      );
+    }
+    return b`
+      <obc-watch
+        .watchCircleType=${WatchCircleType.double}
+        .zoomToFitArc=${false}
+        .areas=${areas}
+        .barAreas=${barAreas}
+        .needles=${needles}
         .vessels=${this.hasReadout ? [] : [
       {
         size: VesselImageSize.large,
@@ -223278,16 +223377,7 @@ let ObcPitchRoll = class extends i$4 {
         transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`
       }
     ]}
-        .tickmarks=${[
-      { angle: 0, type: TickmarkType$1.main },
-      { angle: 90, type: TickmarkType$1.main },
-      { angle: 180, type: TickmarkType$1.main },
-      { angle: 270, type: TickmarkType$1.main },
-      ...arcTickmarks(0, this.requestedRollArcAngle),
-      ...arcTickmarks(180, this.requestedRollArcAngle),
-      ...arcTickmarks(90, this.requestedPitchArcAngle),
-      ...arcTickmarks(270, this.requestedPitchArcAngle)
-    ]}
+        .tickmarks=${tickmarks}
         .advices=${this.advices}
       ></obc-watch>
     `;
@@ -223314,39 +223404,27 @@ let ObcPitchRoll = class extends i$4 {
         state,
         hideMaxTickmark: true
       });
-      advices.push({
-        minAngle: 270 - outer,
-        maxAngle: 270 - inner,
-        type: AdviceType.caution,
-        state,
-        hideMinTickmark: true
-      });
-      advices.push({
-        minAngle: 270 + inner,
-        maxAngle: 270 + outer,
-        type: AdviceType.caution,
-        state,
-        hideMaxTickmark: true
-      });
+      if (!this.isSingleScale) {
+        advices.push({
+          minAngle: 270 - outer,
+          maxAngle: 270 - inner,
+          type: AdviceType.caution,
+          state,
+          hideMinTickmark: true
+        });
+        advices.push({
+          minAngle: 270 + inner,
+          maxAngle: 270 + outer,
+          type: AdviceType.caution,
+          state,
+          hideMaxTickmark: true
+        });
+      }
     }
     if (this.maxRollAdvice !== void 0) {
       const outer = Math.min(rollReq, 45);
       const inner = Math.min(this.maxRollAdvice, outer);
       const state = this.triggerRollAdvice ? AdviceState.triggered : AdviceState.regular;
-      advices.push({
-        minAngle: -outer,
-        maxAngle: -inner,
-        type: AdviceType.caution,
-        state,
-        hideMinTickmark: true
-      });
-      advices.push({
-        minAngle: inner,
-        maxAngle: outer,
-        type: AdviceType.caution,
-        state,
-        hideMaxTickmark: true
-      });
       advices.push({
         minAngle: 180 - outer,
         maxAngle: 180 - inner,
@@ -223361,6 +223439,22 @@ let ObcPitchRoll = class extends i$4 {
         state,
         hideMaxTickmark: true
       });
+      if (!this.isSingleScale) {
+        advices.push({
+          minAngle: -outer,
+          maxAngle: -inner,
+          type: AdviceType.caution,
+          state,
+          hideMinTickmark: true
+        });
+        advices.push({
+          minAngle: inner,
+          maxAngle: outer,
+          type: AdviceType.caution,
+          state,
+          hideMaxTickmark: true
+        });
+      }
     }
     return advices;
   }
@@ -223393,6 +223487,9 @@ ObcPitchRoll.styles = [
       }
     `
 ];
+__decorateClass$n([
+  n$3({ type: String })
+], ObcPitchRoll.prototype, "type", 2);
 __decorateClass$n([
   n$3({ type: Number })
 ], ObcPitchRoll.prototype, "pitch", 2);