@oicl/openbridge-webcomponents 2.0.0-next.55 → 2.0.0-next.57

package/dist/navigation-instruments/pitch/pitch.d.ts

@@ -1,6 +1,24 @@
 import { LitElement } from 'lit';
 import { VesselImage } from '../watch/watch.js';
+import { Priority } from '../types.js';
 import '../watch/watch.js';
+import '../readout/readout.js';
+export declare enum ObcPitchType {
+    /** Single arc scale on the right (default). */
+    singleScale = "single-scale",
+    /** Right scale duplicated to the opposite (left) arc as well. */
+    dualScale = "dual-scale"
+}
+/**
+ * `<obc-pitch>` — Pitch (trim) indicator with a side arc scale.
+ *
+ * Shows `pitch` against a watch arc centred on the right, with an average-pitch
+ * band and a rotating indicator. Supports an optional opposite-side scale
+ * (`dual-scale`), a centre readout (`hasReadout`), and a `regular`/`enhanced`
+ * palette.
+ *
+ * @element obc-pitch
+ */
 export declare class ObcPitch extends LitElement {
     pitch: number;
     minAvgPitch: number;
@@ -9,6 +27,22 @@ export declare class ObcPitch extends LitElement {
     maxPitchAdvice: number | undefined;
     triggerPitchAdvice: boolean;
     zoomToFitArc: boolean;
+    /**
+     * When `true`, the centre shows an `<obc-readout>` with the pitch value
+     * (label `Pitch`, unit `DEG`) instead of the horizon line, rotating indicator
+     * and vessel. Default `false`.
+     */
+    hasReadout: boolean;
+    /**
+     * `single-scale` shows one arc on the right (default); `dual-scale` also
+     * shows the scale on the opposite (left) arc (the indicator's opposite end).
+     */
+    type: ObcPitchType;
+    /**
+     * Colour palette for the scale fill / indicator and the readout value:
+     * `regular` (default) or `enhanced`.
+     */
+    priority: Priority;
     /**
      * Half-extent of the watch arc in degrees. The arc spans `90° ± arcAngle`
      * and pitch values are placed at their true position within it. Default
@@ -22,7 +56,10 @@ export declare class ObcPitch extends LitElement {
      */
     arcAngle: number;
     private _arcFrame;
+    private get scaleFillColor();
+    private get indicatorColor();
     render(): import('lit-html').TemplateResult<1>;
+    private renderScale;
     private get advices();
     static styles: import('lit').CSSResult;
 }

package/dist/navigation-instruments/pitch/pitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pitch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/pitch/pitch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA0B,MAAM,KAAK,CAAC;AAExD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EAMZ,MAAM,mBAAmB,CAAC;AAe3B,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,SAAK;IACV,WAAW,SAAK;IAChB,WAAW,SAAK;IAChB,eAAe,EAAE,WAAW,CAAuB;IACnD,cAAc,EAAE,MAAM,GAAG,SAAS,CAAa;IAC9C,kBAAkB,UAAS;IAC3B,YAAY,EAAE,OAAO,CAAS;IACzD;;;;;;;;;;OAUG;IACuB,QAAQ,EAAE,MAAM,CAAM;IAEhD,OAAO,CAAC,SAAS,CAAgC;IAExC,MAAM;IA6Hf,OAAO,KAAK,OAAO,GA2BlB;IAED,OAAgB,MAAM,0BAkBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"pitch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/pitch/pitch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA0B,MAAM,KAAK,CAAC;AAExD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EAOZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAerC,oBAAY,YAAY;IACtB,+CAA+C;IAC/C,WAAW,iBAAiB;IAC5B,iEAAiE;IACjE,SAAS,eAAe;CACzB;AAED;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,SAAK;IACV,WAAW,SAAK;IAChB,WAAW,SAAK;IAChB,eAAe,EAAE,WAAW,CAAuB;IACnD,cAAc,EAAE,MAAM,GAAG,SAAS,CAAa;IAC9C,kBAAkB,UAAS;IAC3B,YAAY,EAAE,OAAO,CAAS;IACzD;;;;OAIG;IACwB,UAAU,EAAE,OAAO,CAAS;IACvD;;;OAGG;IACuB,IAAI,EAAE,YAAY,CAA4B;IACxE;;;OAGG;IACuB,QAAQ,EAAE,QAAQ,CAAoB;IAChE;;;;;;;;;;OAUG;IACuB,QAAQ,EAAE,MAAM,CAAM;IAEhD,OAAO,CAAC,SAAS,CAAgC;IAEjD,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,cAAc,GAIzB;IAEQ,MAAM;IA4Hf,OAAO,CAAC,WAAW;IAuCnB,OAAO,KAAK,OAAO,GA4BlB;IAED,OAAgB,MAAM,0BA4BpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/navigation-instruments/pitch/pitch.js

@@ -1,11 +1,13 @@
 import { css, LitElement, nothing, svg, html } from "lit";
 import { property } from "lit/decorators.js";
 import { innerRingRadiusFor, WatchCircleType, OUTER_RING_RADIUS } from "../watch/watch.js";
+import { ReadoutVariant, ReadoutDirection } from "../readout/readout.js";
+import { Priority } from "../types.js";
 import { TickmarkType } from "../watch/tickmark.js";
 import { AdviceState, AdviceType } from "../watch/advice.js";
 import { customElement } from "../../decorator.js";
 import { normalizeArcAngle, computeZoomToFitArcFrame, shiftArcFrameToOuterEdge } from "../../svghelpers/arc-frame.js";
-import { VesselImage, VesselImageSize, vesselImages } from "../watch/vessel.js";
+import { VesselImage, vesselImages, VesselImageSize } from "../watch/vessel.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,6 +20,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const watchRadius = OUTER_RING_RADIUS;
 const CENTRE_HALF = 200;
+var ObcPitchType = /* @__PURE__ */ ((ObcPitchType2) => {
+  ObcPitchType2["singleScale"] = "single-scale";
+  ObcPitchType2["dualScale"] = "dual-scale";
+  return ObcPitchType2;
+})(ObcPitchType || {});
 let ObcPitch = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -28,8 +35,17 @@ let ObcPitch = class extends LitElement {
     this.maxPitchAdvice = void 0;
     this.triggerPitchAdvice = false;
     this.zoomToFitArc = false;
+    this.hasReadout = false;
+    this.type = "single-scale";
+    this.priority = Priority.regular;
     this.arcAngle = 45;
   }
+  get scaleFillColor() {
+    return this.priority === Priority.enhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
+  }
+  get indicatorColor() {
+    return this.priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
+  }
   render() {
     const arcAngle = normalizeArcAngle(this.arcAngle, 45);
     const x = watchRadius * Math.cos(arcAngle * Math.PI / 180);
@@ -67,96 +83,128 @@ let ObcPitch = class extends LitElement {
     return html`
       <div class="container">
         <svg viewBox="${centreViewBox}">
-          ${svg`
-            <line
-              x1="-${watchRadius}"
-              y1="0"
-              x2="${watchRadius}"
-              y2="0"
-              stroke="var(--instrument-frame-tertiary-color)"
-            />
-            <line
-              x1="0"
-              y1="0"
-              x2="${watchRadius - 10}"
-              y2="0"
-              stroke="var(--instrument-enhanced-secondary-color)"
-              transform="${needleTransform}"
-            />
-            <g
-              style="transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);"
-            >
-              ${vesselImages[this.vesselImageSide]}
-            </g>
-            ${this.zoomToFitArc ? nothing : svg`
-                    <path
-                      d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}"
-                      fill="none"
-                      stroke="var(--instrument-frame-tertiary-color)"
-                    />
-                  `}
-          `}
+          ${this.hasReadout ? nothing : svg`
+                <line
+                  x1="-${watchRadius}"
+                  y1="0"
+                  x2="${watchRadius}"
+                  y2="0"
+                  stroke="var(--instrument-frame-tertiary-color)"
+                />
+                <line
+                  x1="0"
+                  y1="0"
+                  x2="${watchRadius - 10}"
+                  y2="0"
+                  stroke="${this.indicatorColor}"
+                  transform="${needleTransform}"
+                />
+                <g
+                  style="transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);"
+                >
+                  ${this.zoomToFitArc ? vesselImages[this.vesselImageSide] : nothing}
+                </g>
+              `}
+          ${this.zoomToFitArc ? nothing : this.type === "dual-scale" ? svg`
+                  <path
+                    d="M ${x} ${-y} A ${watchRadius} ${watchRadius} 0 0 0 ${-x} ${-y}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                  <path
+                    d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 0 1 ${-x} ${y}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                ` : svg`
+                  <path
+                    d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                `}
         </svg>
-        <obc-watch
-          .watchCircleType=${WatchCircleType.double}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
-          .areas=${areas}
-          .barAreas=${[
+        ${this.renderScale(areas, false)}
+        ${this.type === "dual-scale" ? this.renderScale(areas, true) : nothing}
+        ${this.hasReadout ? html`<div class="readout">
+              <obc-readout
+                .variant=${ReadoutVariant.enhanced}
+                .direction=${ReadoutDirection.vertical}
+                .hasSetpoint=${false}
+                .hasAdvice=${false}
+                .value=${this.pitch}
+                .fractionDigits=${0}
+                .valuePriority=${this.priority}
+                label="Pitch"
+                unit="DEG"
+              ></obc-readout>
+            </div>` : nothing}
+      </div>
+    `;
+  }
+  // `opposite` rotates a second watch 180° onto the opposite (left) arc for
+  // dual-scale — a rotation (opposite end of the indicator), not a mirror. A
+  // separate watch keeps the zoomed `arcFrame` correct.
+  renderScale(areas, opposite) {
+    return html`
+      <obc-watch
+        class=${opposite ? "scale-opposite" : nothing}
+        .priority=${this.priority}
+        .watchCircleType=${WatchCircleType.double}
+        .zoomToFitArc=${this.zoomToFitArc}
+        .arcFrame=${this._arcFrame}
+        tickmarksInside
+        .areas=${areas}
+        .barAreas=${[
       {
         startAngle: 90 + this.minAvgPitch,
         endAngle: 90 + this.maxAvgPitch,
-        fillColor: "var(--instrument-enhanced-tertiary-color)"
+        fillColor: this.scaleFillColor
       }
     ]}
-          .needles=${[
+        .needles=${[
       {
         angle: 90 + this.pitch,
-        fillColor: "var(--instrument-enhanced-secondary-color)",
+        fillColor: this.indicatorColor,
         strokeColor: "var(--border-silhouette-color)"
       }
     ]}
-          .vessels=${this.zoomToFitArc ? [] : [
+        .vessels=${opposite || this.zoomToFitArc || this.hasReadout ? [] : [
       {
         size: VesselImageSize.large,
         vesselImage: this.vesselImageSide,
         transform: `rotate(${this.pitch}deg)`
       }
     ]}
-          .tickmarks=${[
-      {
-        angle: 90,
-        type: TickmarkType.main
-      }
-    ]}
-          .advices=${this.advices}
-        ></obc-watch>
-      </div>
+        .tickmarks=${[{ angle: 90, type: TickmarkType.main }]}
+        .advices=${this.advices}
+      ></obc-watch>
     `;
   }
   get advices() {
-    const advices = [];
-    if (this.maxPitchAdvice !== void 0) {
-      const arcAngle = normalizeArcAngle(this.arcAngle, 45);
-      const outer = Math.min(arcAngle, 30);
-      const inner = Math.min(this.maxPitchAdvice, outer);
-      const state = this.triggerPitchAdvice ? AdviceState.triggered : AdviceState.regular;
-      advices.push({
+    if (this.maxPitchAdvice === void 0) {
+      return [];
+    }
+    const arcAngle = normalizeArcAngle(this.arcAngle, 45);
+    const outer = Math.min(arcAngle, 30);
+    const inner = Math.min(this.maxPitchAdvice, outer);
+    const state = this.triggerPitchAdvice ? AdviceState.triggered : AdviceState.regular;
+    return [
+      {
         minAngle: 90 - outer,
         maxAngle: 90 - inner,
         type: AdviceType.caution,
         state,
         hideMinTickmark: true
-      });
-      advices.push({
+      },
+      {
         minAngle: 90 + inner,
         maxAngle: 90 + outer,
         type: AdviceType.caution,
         state,
         hideMaxTickmark: true
-      });
-    }
-    return advices;
+      }
+    ];
   }
 };
 ObcPitch.styles = css`
@@ -177,6 +225,16 @@ ObcPitch.styles = css`
       width: 100%;
       height: 100%;
     }
+
+    .readout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .scale-opposite {
+      transform: rotate(180deg);
+    }
   `;
 __decorateClass([
   property({ type: Number })
@@ -199,6 +257,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcPitch.prototype, "zoomToFitArc", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcPitch.prototype, "hasReadout", 2);
+__decorateClass([
+  property({ type: String })
+], ObcPitch.prototype, "type", 2);
+__decorateClass([
+  property({ type: String })
+], ObcPitch.prototype, "priority", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcPitch.prototype, "arcAngle", 2);
@@ -206,6 +273,7 @@ ObcPitch = __decorateClass([
   customElement("obc-pitch")
 ], ObcPitch);
 export {
-  ObcPitch
+  ObcPitch,
+  ObcPitchType
 };
 //# sourceMappingURL=pitch.js.map

package/dist/navigation-instruments/pitch/pitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"pitch.js","sources":["../../../src/navigation-instruments/pitch/pitch.ts"],"sourcesContent":["import {LitElement, css, html, nothing, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {\n  VesselImage,\n  VesselImageSize,\n  WatchCircleType,\n  OUTER_RING_RADIUS,\n  innerRingRadiusFor,\n  vesselImages,\n} from '../watch/watch.js';\nimport {TickmarkType} from '../watch/tickmark.js';\nimport {AdviceState, AdviceType, AngleAdviceRaw} from '../watch/advice.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  computeZoomToFitArcFrame,\n  normalizeArcAngle,\n  shiftArcFrameToOuterEdge,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\nconst watchRadius = OUTER_RING_RADIUS;\n/** Half-side of the centre overlay viewBox in SVG units. */\nconst CENTRE_HALF = 200;\n\n@customElement('obc-pitch')\nexport class ObcPitch extends LitElement {\n  @property({type: Number}) pitch = 0;\n  @property({type: Number}) minAvgPitch = 0;\n  @property({type: Number}) maxAvgPitch = 0;\n  @property({type: String}) vesselImageSide: VesselImage = VesselImage.psvSide;\n  @property({type: Number}) maxPitchAdvice: number | undefined = undefined;\n  @property({type: Boolean}) triggerPitchAdvice = false;\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  /**\n   * Half-extent of the watch arc in degrees. The arc spans `90° ± arcAngle`\n   * and pitch values are placed at their true position within it. Default\n   * `45` reproduces the historical 90°-wide arc.\n   *\n   * Smaller values render a narrower arc. Combined with `zoomToFitArc`, the\n   * narrower arc is enlarged (its radius grows) on its own layer, while the\n   * vessel image and the rotating indicator line stay at their natural size\n   * and position on a separate central layer. The two layers are\n   * intentionally visually disconnected.\n   */\n  @property({type: Number}) arcAngle: number = 45;\n\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  override render() {\n    const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n    // Outer thin-ring complement endpoints. The arc band is centred at\n    // watch angle 90° (right side) and spans 90° ± arcAngle, so its edges\n    // sit at SVG coords (R·cos(arcAngle), ±R·sin(arcAngle)).\n    const x = watchRadius * Math.cos((arcAngle * Math.PI) / 180);\n    const y = watchRadius * Math.sin((arcAngle * Math.PI) / 180);\n\n    const areas = [\n      {\n        startAngle: 90 - arcAngle,\n        endAngle: 90 + arcAngle,\n        roundOutsideCut: true,\n        roundInsideCut: true,\n      },\n    ];\n\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      // Pure arc-only fit (compass-sector style). The viewBox is centred on\n      // the enlarged arc bbox, so the origin (centre of the instrument) is\n      // typically OUTSIDE this viewBox. The vessel and central elements\n      // therefore need their own normal-scale layer.\n      const baseFrame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(WatchCircleType.double),\n        extension: ext,\n        targetSize,\n      });\n      // Push the enlarged arc to the side so its outer edge aligns with the\n      // central layer's outer ring. Direction is derived from the arc bbox\n      // centre so left/right/top/bottom is handled automatically.\n      this._arcFrame = shiftArcFrameToOuterEdge(\n        baseFrame,\n        OUTER_RING_RADIUS + baseFrame.radiusOffset,\n        OUTER_RING_RADIUS,\n        CENTRE_HALF\n      );\n    } else {\n      this._arcFrame = undefined;\n    }\n\n    const needleTransform = `rotate(${this.pitch} 0 0)`;\n    const centreViewBox = `-${CENTRE_HALF} -${CENTRE_HALF} ${CENTRE_HALF * 2} ${CENTRE_HALF * 2}`;\n    const vesselScale = 224 / 160;\n\n    return html`\n      <div class=\"container\">\n        <svg viewBox=\"${centreViewBox}\">\n          ${svg`\n            <line\n              x1=\"-${watchRadius}\"\n              y1=\"0\"\n              x2=\"${watchRadius}\"\n              y2=\"0\"\n              stroke=\"var(--instrument-frame-tertiary-color)\"\n            />\n            <line\n              x1=\"0\"\n              y1=\"0\"\n              x2=\"${watchRadius - 10}\"\n              y2=\"0\"\n              stroke=\"var(--instrument-enhanced-secondary-color)\"\n              transform=\"${needleTransform}\"\n            />\n            <g\n              style=\"transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);\"\n            >\n              ${vesselImages[this.vesselImageSide]}\n            </g>\n            ${\n              this.zoomToFitArc\n                ? nothing\n                : svg`\n                    <path\n                      d=\"M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}\"\n                      fill=\"none\"\n                      stroke=\"var(--instrument-frame-tertiary-color)\"\n                    />\n                  `\n            }\n          `}\n        </svg>\n        <obc-watch\n          .watchCircleType=${WatchCircleType.double}\n          .zoomToFitArc=${this.zoomToFitArc}\n          .arcFrame=${this._arcFrame}\n          .areas=${areas}\n          .barAreas=${[\n            {\n              startAngle: 90 + this.minAvgPitch,\n              endAngle: 90 + this.maxAvgPitch,\n              fillColor: 'var(--instrument-enhanced-tertiary-color)',\n            },\n          ]}\n          .needles=${[\n            {\n              angle: 90 + this.pitch,\n              fillColor: 'var(--instrument-enhanced-secondary-color)',\n              strokeColor: 'var(--border-silhouette-color)',\n            },\n          ]}\n          .vessels=${this.zoomToFitArc\n            ? []\n            : [\n                {\n                  size: VesselImageSize.large,\n                  vesselImage: this.vesselImageSide,\n                  transform: `rotate(${this.pitch}deg)`,\n                },\n              ]}\n          .tickmarks=${[\n            {\n              angle: 90,\n              type: TickmarkType.main,\n            },\n          ]}\n          .advices=${this.advices}\n        ></obc-watch>\n      </div>\n    `;\n  }\n\n  private get advices(): AngleAdviceRaw[] {\n    const advices = [];\n    if (this.maxPitchAdvice !== undefined) {\n      const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n      // Caution band fills the remainder of the arc out to a default 30°\n      // caution range (clamped to the arc edge).\n      const outer = Math.min(arcAngle, 30);\n      const inner = Math.min(this.maxPitchAdvice, outer);\n      const state = this.triggerPitchAdvice\n        ? AdviceState.triggered\n        : AdviceState.regular;\n      advices.push({\n        minAngle: 90 - outer,\n        maxAngle: 90 - inner,\n        type: AdviceType.caution,\n        state: state,\n        hideMinTickmark: true,\n      });\n      advices.push({\n        minAngle: 90 + inner,\n        maxAngle: 90 + outer,\n        type: AdviceType.caution,\n        state: state,\n        hideMaxTickmark: true,\n      });\n    }\n    return advices;\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pitch': ObcPitch;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pitch.js","sources":["../../../src/navigation-instruments/pitch/pitch.ts"],"sourcesContent":["import {LitElement, css, html, nothing, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {\n  VesselImage,\n  VesselImageSize,\n  WatchCircleType,\n  OUTER_RING_RADIUS,\n  innerRingRadiusFor,\n  vesselImages,\n  type WatchArea,\n} from '../watch/watch.js';\nimport '../readout/readout.js';\nimport {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';\nimport {Priority} from '../types.js';\nimport {TickmarkType} from '../watch/tickmark.js';\nimport {AdviceState, AdviceType, AngleAdviceRaw} from '../watch/advice.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  computeZoomToFitArcFrame,\n  normalizeArcAngle,\n  shiftArcFrameToOuterEdge,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\nconst watchRadius = OUTER_RING_RADIUS;\n/** Half-side of the centre overlay viewBox in SVG units. */\nconst CENTRE_HALF = 200;\n\nexport enum ObcPitchType {\n  /** Single arc scale on the right (default). */\n  singleScale = 'single-scale',\n  /** Right scale duplicated to the opposite (left) arc as well. */\n  dualScale = 'dual-scale',\n}\n\n/**\n * `<obc-pitch>` — Pitch (trim) indicator with a side arc scale.\n *\n * Shows `pitch` against a watch arc centred on the right, with an average-pitch\n * band and a rotating indicator. Supports an optional opposite-side scale\n * (`dual-scale`), a centre readout (`hasReadout`), and a `regular`/`enhanced`\n * palette.\n *\n * @element obc-pitch\n */\n@customElement('obc-pitch')\nexport class ObcPitch extends LitElement {\n  @property({type: Number}) pitch = 0;\n  @property({type: Number}) minAvgPitch = 0;\n  @property({type: Number}) maxAvgPitch = 0;\n  @property({type: String}) vesselImageSide: VesselImage = VesselImage.psvSide;\n  @property({type: Number}) maxPitchAdvice: number | undefined = undefined;\n  @property({type: Boolean}) triggerPitchAdvice = false;\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  /**\n   * When `true`, the centre shows an `<obc-readout>` with the pitch value\n   * (label `Pitch`, unit `DEG`) instead of the horizon line, rotating indicator\n   * and vessel. Default `false`.\n   */\n  @property({type: Boolean}) hasReadout: boolean = false;\n  /**\n   * `single-scale` shows one arc on the right (default); `dual-scale` also\n   * shows the scale on the opposite (left) arc (the indicator's opposite end).\n   */\n  @property({type: String}) type: ObcPitchType = ObcPitchType.singleScale;\n  /**\n   * Colour palette for the scale fill / indicator and the readout value:\n   * `regular` (default) or `enhanced`.\n   */\n  @property({type: String}) priority: Priority = Priority.regular;\n  /**\n   * Half-extent of the watch arc in degrees. The arc spans `90° ± arcAngle`\n   * and pitch values are placed at their true position within it. Default\n   * `45` reproduces the historical 90°-wide arc.\n   *\n   * Smaller values render a narrower arc. Combined with `zoomToFitArc`, the\n   * narrower arc is enlarged (its radius grows) on its own layer, while the\n   * vessel image and the rotating indicator line stay at their natural size\n   * and position on a separate central layer. The two layers are\n   * intentionally visually disconnected.\n   */\n  @property({type: Number}) arcAngle: number = 45;\n\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  private get scaleFillColor(): string {\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-tertiary-color)'\n      : 'var(--instrument-regular-tertiary-color)';\n  }\n\n  private get indicatorColor(): string {\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n  }\n\n  override render() {\n    const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n    // Outer thin-ring complement endpoints. The arc band is centred at\n    // watch angle 90° (right side) and spans 90° ± arcAngle, so its edges\n    // sit at SVG coords (R·cos(arcAngle), ±R·sin(arcAngle)).\n    const x = watchRadius * Math.cos((arcAngle * Math.PI) / 180);\n    const y = watchRadius * Math.sin((arcAngle * Math.PI) / 180);\n\n    const areas: WatchArea[] = [\n      {\n        startAngle: 90 - arcAngle,\n        endAngle: 90 + arcAngle,\n        roundOutsideCut: true,\n        roundInsideCut: true,\n      },\n    ];\n\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      // Pure arc-only fit (compass-sector style). The viewBox is centred on\n      // the enlarged arc bbox, so the origin (centre of the instrument) is\n      // typically OUTSIDE this viewBox. The vessel and central elements\n      // therefore need their own normal-scale layer.\n      const baseFrame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(WatchCircleType.double),\n        extension: ext,\n        targetSize,\n      });\n      // Push the enlarged arc to the side so its outer edge aligns with the\n      // central layer's outer ring. Direction is derived from the arc bbox\n      // centre so left/right/top/bottom is handled automatically.\n      this._arcFrame = shiftArcFrameToOuterEdge(\n        baseFrame,\n        OUTER_RING_RADIUS + baseFrame.radiusOffset,\n        OUTER_RING_RADIUS,\n        CENTRE_HALF\n      );\n    } else {\n      this._arcFrame = undefined;\n    }\n\n    const needleTransform = `rotate(${this.pitch} 0 0)`;\n    const centreViewBox = `-${CENTRE_HALF} -${CENTRE_HALF} ${CENTRE_HALF * 2} ${CENTRE_HALF * 2}`;\n    const vesselScale = 224 / 160;\n\n    return html`\n      <div class=\"container\">\n        <svg viewBox=\"${centreViewBox}\">\n          ${this.hasReadout\n            ? nothing\n            : svg`\n                <line\n                  x1=\"-${watchRadius}\"\n                  y1=\"0\"\n                  x2=\"${watchRadius}\"\n                  y2=\"0\"\n                  stroke=\"var(--instrument-frame-tertiary-color)\"\n                />\n                <line\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"${watchRadius - 10}\"\n                  y2=\"0\"\n                  stroke=\"${this.indicatorColor}\"\n                  transform=\"${needleTransform}\"\n                />\n                <g\n                  style=\"transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);\"\n                >\n                  ${this.zoomToFitArc ? vesselImages[this.vesselImageSide] : nothing}\n                </g>\n              `}\n          ${this.zoomToFitArc\n            ? nothing\n            : this.type === ObcPitchType.dualScale\n              ? svg`\n                  <path\n                    d=\"M ${x} ${-y} A ${watchRadius} ${watchRadius} 0 0 0 ${-x} ${-y}\"\n                    fill=\"none\"\n                    stroke=\"var(--instrument-frame-tertiary-color)\"\n                  />\n                  <path\n                    d=\"M ${x} ${y} A ${watchRadius} ${watchRadius} 0 0 1 ${-x} ${y}\"\n                    fill=\"none\"\n                    stroke=\"var(--instrument-frame-tertiary-color)\"\n                  />\n                `\n              : svg`\n                  <path\n                    d=\"M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}\"\n                    fill=\"none\"\n                    stroke=\"var(--instrument-frame-tertiary-color)\"\n                  />\n                `}\n        </svg>\n        ${this.renderScale(areas, false)}\n        ${this.type === ObcPitchType.dualScale\n          ? this.renderScale(areas, true)\n          : nothing}\n        ${this.hasReadout\n          ? html`<div class=\"readout\">\n              <obc-readout\n                .variant=${ReadoutVariant.enhanced}\n                .direction=${ReadoutDirection.vertical}\n                .hasSetpoint=${false}\n                .hasAdvice=${false}\n                .value=${this.pitch}\n                .fractionDigits=${0}\n                .valuePriority=${this.priority}\n                label=\"Pitch\"\n                unit=\"DEG\"\n              ></obc-readout>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  // `opposite` rotates a second watch 180° onto the opposite (left) arc for\n  // dual-scale — a rotation (opposite end of the indicator), not a mirror. A\n  // separate watch keeps the zoomed `arcFrame` correct.\n  private renderScale(areas: WatchArea[], opposite: boolean) {\n    return html`\n      <obc-watch\n        class=${opposite ? 'scale-opposite' : nothing}\n        .priority=${this.priority}\n        .watchCircleType=${WatchCircleType.double}\n        .zoomToFitArc=${this.zoomToFitArc}\n        .arcFrame=${this._arcFrame}\n        tickmarksInside\n        .areas=${areas}\n        .barAreas=${[\n          {\n            startAngle: 90 + this.minAvgPitch,\n            endAngle: 90 + this.maxAvgPitch,\n            fillColor: this.scaleFillColor,\n          },\n        ]}\n        .needles=${[\n          {\n            angle: 90 + this.pitch,\n            fillColor: this.indicatorColor,\n            strokeColor: 'var(--border-silhouette-color)',\n          },\n        ]}\n        .vessels=${opposite || this.zoomToFitArc || this.hasReadout\n          ? []\n          : [\n              {\n                size: VesselImageSize.large,\n                vesselImage: this.vesselImageSide,\n                transform: `rotate(${this.pitch}deg)`,\n              },\n            ]}\n        .tickmarks=${[{angle: 90, type: TickmarkType.main}]}\n        .advices=${this.advices}\n      ></obc-watch>\n    `;\n  }\n\n  private get advices(): AngleAdviceRaw[] {\n    if (this.maxPitchAdvice === undefined) {\n      return [];\n    }\n    const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n    // Caution band fills the remainder of the arc out to a default 30° caution\n    // range (clamped to the arc edge).\n    const outer = Math.min(arcAngle, 30);\n    const inner = Math.min(this.maxPitchAdvice, outer);\n    const state = this.triggerPitchAdvice\n      ? AdviceState.triggered\n      : AdviceState.regular;\n    return [\n      {\n        minAngle: 90 - outer,\n        maxAngle: 90 - inner,\n        type: AdviceType.caution,\n        state: state,\n        hideMinTickmark: true,\n      },\n      {\n        minAngle: 90 + inner,\n        maxAngle: 90 + outer,\n        type: AdviceType.caution,\n        state: state,\n        hideMaxTickmark: true,\n      },\n    ];\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    .readout {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .scale-opposite {\n      transform: rotate(180deg);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pitch': ObcPitch;\n  }\n}\n"],"names":["ObcPitchType"],"mappings":"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"}

package/dist/navigation-instruments/pitch-roll/pitch-roll.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 import { VesselImage } from '../watch/watch.js';
 import { Priority } from '../types.js';
 import '../watch/watch.js';
+import '../readout/readout.js';
 export declare enum PitchRollPriorityElement {
     pitch = "pitch",
     roll = "roll"
@@ -22,6 +23,11 @@ export declare class ObcPitchRoll extends LitElement {
     triggerRollAdvice: boolean;
     priority: Priority;
     priorityElements: PitchRollPriorityElement[];
+    /**
+     * When `true`, the centre shows two stacked `<obc-readout>`s (pitch above
+     * roll) instead of the vessel images. Default `false`.
+     */
+    hasReadout: boolean;
     zoomToFitArc: boolean;
     /**
      * Half-extent of each of the four watch arcs in degrees, measured from the
@@ -50,6 +56,7 @@ export declare class ObcPitchRoll extends LitElement {
     private get requestedPitchArcAngle();
     private get requestedRollArcAngle();
     render(): import('lit-html').TemplateResult<1>;
+    private renderReadout;
     /**
      * Zoomed-arc layer: four CSS-rotated `<obc-watch>` instances, each
      * containing a single arc rendered at the watch's natural top

package/dist/navigation-instruments/pitch-roll/pitch-roll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pitch-roll.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/pitch-roll/pitch-roll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA0B,MAAM,KAAK,CAAC;AAExD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EAOZ,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAOrC,oBAAY,wBAAwB;IAClC,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAqBD,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAK;IACV,IAAI,SAAK;IACT,WAAW,SAAK;IAChB,WAAW,SAAK;IAChB,UAAU,SAAK;IACf,UAAU,SAAK;IACf,eAAe,EAAE,WAAW,CAAuB;IACnD,eAAe,EAAE,WAAW,CAAuB;IACnD,cAAc,SAAK;IACnB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAa;IAC/C,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAC7C,kBAAkB,UAAS;IAC3B,iBAAiB,UAAS;IAC3B,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,gBAAgB,EAAE,wBAAwB,EAAE,CAG1C;IACyB,YAAY,EAAE,OAAO,CAAS;IACzD;;;;;;OAMG;IACuB,QAAQ,EAAE,MAAM,CAAM;IAChD;;;;OAIG;IACuB,aAAa,CAAC,EAAE,MAAM,CAAC;IACjD;;;OAGG;IACuB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEhD,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,KAAK,wBAAwB,GAKnC;IAED,kEAAkE;IAClE,OAAO,KAAK,sBAAsB,GAEjC;IACD,OAAO,KAAK,qBAAqB,GAEhC;IAEQ,MAAM;IA+Df;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,gBAAgB;IA6RxB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IA8BlB,6DAA6D;IAC7D,OAAO,CAAC,eAAe;IAyEvB,OAAO,KAAK,OAAO,GA2ElB;IAED,OAAgB,MAAM,0BAkBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"pitch-roll.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/pitch-roll/pitch-roll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA0B,MAAM,KAAK,CAAC;AAExD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EAOZ,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,uBAAuB,CAAC;AAQ/B,oBAAY,wBAAwB;IAClC,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAqBD,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAK;IACV,IAAI,SAAK;IACT,WAAW,SAAK;IAChB,WAAW,SAAK;IAChB,UAAU,SAAK;IACf,UAAU,SAAK;IACf,eAAe,EAAE,WAAW,CAAuB;IACnD,eAAe,EAAE,WAAW,CAAuB;IACnD,cAAc,SAAK;IACnB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAa;IAC/C,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAC7C,kBAAkB,UAAS;IAC3B,iBAAiB,UAAS;IAC3B,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,gBAAgB,EAAE,wBAAwB,EAAE,CAG1C;IACF;;;OAGG;IACwB,UAAU,EAAE,OAAO,CAAS;IAC5B,YAAY,EAAE,OAAO,CAAS;IACzD;;;;;;OAMG;IACuB,QAAQ,EAAE,MAAM,CAAM;IAChD;;;;OAIG;IACuB,aAAa,CAAC,EAAE,MAAM,CAAC;IACjD;;;OAGG;IACuB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEhD,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,KAAK,wBAAwB,GAKnC;IAED,kEAAkE;IAClE,OAAO,KAAK,sBAAsB,GAEjC;IACD,OAAO,KAAK,qBAAqB,GAEhC;IAEQ,MAAM;IAkFf,OAAO,CAAC,aAAa;IAoBrB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,gBAAgB;IA6RxB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IA8BlB,6DAA6D;IAC7D,OAAO,CAAC,eAAe;IA2EvB,OAAO,KAAK,OAAO,GA2ElB;IAED,OAAgB,MAAM,0BAqCpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/navigation-instruments/pitch-roll/pitch-roll.js

@@ -5,6 +5,7 @@ import { TickmarkType } from "../watch/tickmark.js";
 import { AdviceState, AdviceType } from "../watch/advice.js";
 import { customElement } from "../../decorator.js";
 import { Priority } from "../types.js";
+import { ReadoutVariant, ReadoutDirection } from "../readout/readout.js";
 import { normalizeArcAngle, computeZoomToFitArcFrame, shiftArcFrameToOuterEdge } from "../../svghelpers/arc-frame.js";
 import { VesselImage, vesselImages, VesselImageSize } from "../watch/vessel.js";
 var __defProp = Object.defineProperty;
@@ -47,6 +48,7 @@ let ObcPitchRoll = class extends LitElement {
       "roll"
       /* roll */
     ];
+    this.hasReadout = false;
     this.zoomToFitArc = false;
     this.arcAngle = 30;
   }
@@ -107,7 +109,7 @@ let ObcPitchRoll = class extends LitElement {
     return html`
       <div class="container">
         <svg viewBox="${overlayViewBox}">
-          ${svg`
+          ${this.hasReadout ? nothing : svg`
             <line
               x1="-150"
               y1="0"
@@ -128,9 +130,41 @@ let ObcPitchRoll = class extends LitElement {
           `}
         </svg>
         ${this.zoomToFitArc ? this.renderZoomedArcs(pitchReq, rollReq) : this.renderFullWatch(areas)}
+        ${this.hasReadout ? html`<div class="readout">
+              <div class="readout-group">
+                ${this.renderReadout(
+      this.pitch,
+      "Pitch",
+      "pitch"
+      /* pitch */
+    )}
+                <div class="readout-divider"></div>
+                ${this.renderReadout(
+      this.roll,
+      "Roll",
+      "roll"
+      /* roll */
+    )}
+              </div>
+            </div>` : nothing}
       </div>
     `;
   }
+  renderReadout(value, label, element) {
+    return html`
+      <obc-readout
+        .variant=${ReadoutVariant.enhanced}
+        .direction=${ReadoutDirection.vertical}
+        .hasSetpoint=${false}
+        .hasAdvice=${false}
+        .value=${value}
+        .fractionDigits=${0}
+        .valuePriority=${this.priorityFor(element)}
+        label=${label}
+        unit="DEG"
+      ></obc-readout>
+    `;
+  }
   /**
    * Zoomed-arc layer: four CSS-rotated `<obc-watch>` instances, each
    * containing a single arc rendered at the watch's natural top
@@ -460,7 +494,7 @@ let ObcPitchRoll = class extends LitElement {
         strokeColor: "var(--border-silhouette-color)"
       }
     ]}
-        .vessels=${[
+        .vessels=${this.hasReadout ? [] : [
       {
         size: VesselImageSize.large,
         vesselImage: this.vesselImageSide,
@@ -573,6 +607,25 @@ ObcPitchRoll.styles = css`
       width: 100%;
       height: 100%;
     }
+
+    .readout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .readout-group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: fit-content;
+    }
+
+    .readout-divider {
+      align-self: stretch;
+      height: 1px;
+      background: var(--border-divider-color);
+    }
   `;
 __decorateClass([
   property({ type: Number })
@@ -619,6 +672,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcPitchRoll.prototype, "priorityElements", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcPitchRoll.prototype, "hasReadout", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcPitchRoll.prototype, "zoomToFitArc", 2);