@oicl/openbridge-webcomponents 0.0.15-dev-20240916083108 → 0.0.15-dev-20240923184809

package/dist/navigation-instruments/compass-flat/compass-flat.js

@@ -0,0 +1,223 @@
+import { unsafeCSS, LitElement, svg } from "lit";
+import componentStyle from "./compass-flat.css.js";
+import { property, customElement } from "lit/decorators.js";
+import { TickmarkType } from "../watch-flat/tickmark-flat.js";
+import "../watch-flat/watch-flat.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var LabelPosition = /* @__PURE__ */ ((LabelPosition2) => {
+  LabelPosition2[LabelPosition2["top"] = -45] = "top";
+  LabelPosition2[LabelPosition2["bottom"] = 50] = "bottom";
+  return LabelPosition2;
+})(LabelPosition || {});
+var LabelStyle = /* @__PURE__ */ ((LabelStyle2) => {
+  LabelStyle2["regular"] = "var(--instrument-tick-mark-secondary-color)";
+  return LabelStyle2;
+})(LabelStyle || {});
+let ObcCompassFlat = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.noPadding = true;
+    this.FOVIndicator = false;
+    this.padding = 16;
+    this.heading = 0;
+    this.courseOverGround = 0;
+    this.tickInterval = 5;
+    this.FOV = 45;
+    this.minFOV = 45;
+    this.maxFOV = 180;
+    this.labels = [];
+    this.containerWidth = 0;
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.containerWidth = entry.contentRect.width;
+        this.updateLabels();
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+  updateLabels() {
+    if (this.containerWidth < 192) {
+      this.labels = [];
+    } else if (this.containerWidth <= 300) {
+      this.labels = [
+        { x: -180, y: -45, text: "S" },
+        { x: -90, y: -45, text: "W" },
+        { x: 0, y: -45, text: "N" },
+        { x: 90, y: -45, text: "E" },
+        { x: 180, y: -45, text: "S" },
+        { x: 270, y: -45, text: "W" },
+        { x: 360, y: -45, text: "N" },
+        { x: 450, y: -45, text: "E" },
+        { x: 540, y: -45, text: "S" }
+      ];
+    } else {
+      this.labels = [
+        { x: -180, y: -45, text: "S" },
+        { x: -135, y: -45, text: "SW" },
+        { x: -90, y: -45, text: "W" },
+        { x: -45, y: -45, text: "NW" },
+        { x: 0, y: -45, text: "N" },
+        { x: 45, y: -45, text: "NE" },
+        { x: 90, y: -45, text: "E" },
+        { x: 135, y: -45, text: "SE" },
+        { x: 180, y: -45, text: "S" },
+        { x: 225, y: -45, text: "SW" },
+        { x: 270, y: -45, text: "W" },
+        { x: 315, y: -45, text: "NW" },
+        { x: 360, y: -45, text: "N" },
+        { x: 405, y: -45, text: "NE" },
+        { x: 450, y: -45, text: "E" },
+        { x: 495, y: -45, text: "SE" },
+        { x: 540, y: -45, text: "S" }
+      ];
+    }
+  }
+  generateIntervalTickmarks(scale) {
+    const tickmarks = [];
+    let cardinalInterval = 90;
+    if (this.containerWidth > 300) {
+      cardinalInterval = 45;
+    } else if (this.containerWidth < 192) {
+      cardinalInterval = 0;
+    }
+    for (let angle = -180; angle < this.maxFOV * 3; angle += this.tickInterval) {
+      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {
+        continue;
+      }
+      tickmarks.push({ angle: angle * scale, type: TickmarkType.secondary });
+    }
+    return tickmarks;
+  }
+  generateCardinalTickmarks(scale) {
+    const tickmarks = [];
+    for (const label of this.labels) {
+      tickmarks.push({ angle: label.x * scale, type: TickmarkType.main });
+    }
+    return tickmarks;
+  }
+  generateTickmarks(scale) {
+    return [
+      ...this.generateCardinalTickmarks(scale),
+      ...this.generateIntervalTickmarks(scale)
+    ];
+  }
+  renderFOVIndicator() {
+    const indicators = [];
+    const maxAdjustment = 10;
+    const minContainerWidth = 300;
+    const maxContainerWidth = 512;
+    let yAdjustment = 0;
+    if (this.containerWidth < maxContainerWidth) {
+      const widthRange = maxContainerWidth - minContainerWidth;
+      const scaleFactor = (maxContainerWidth - this.containerWidth) / widthRange;
+      yAdjustment = scaleFactor * maxAdjustment;
+    }
+    const y = 50 + yAdjustment;
+    indicators.push(svg`
+          <text x="-175" y=${y} class="label left" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${-this.FOV}\u00B0
+          </text>`);
+    indicators.push(svg`
+          <text x="0" y=${y} class="label" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${this.heading}\u00B0
+          </text>`);
+    indicators.push(svg`
+          <text x="175" y=${y} class="label right" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${this.FOV}\u00B0
+          </text>`);
+    return indicators;
+  }
+  get HDGSvg() {
+    return svg`<g transform="translate(-24, -74)">
+          <path d="M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z" fill="var(--instrument-enhanced-secondary-color)" stroke="var(--border-silhouette-color)"/>
+        </g>`;
+  }
+  COGSvg(translation) {
+    return svg`
+      <g transform="translate(${-24 + translation}, -74)">
+        <path d="M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z" fill="var(--instrument-enhanced-secondary-color)" stroke="var(--border-silhouette-color)"/>
+      </g>
+    `;
+  }
+  render() {
+    let angleDiff = this.courseOverGround - this.heading;
+    if (angleDiff > this.maxFOV) {
+      angleDiff -= 360;
+    } else if (angleDiff < -this.maxFOV) {
+      angleDiff += 360;
+    }
+    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));
+    const baseOffset = 5;
+    const translationScale = baseOffset * 35 / this.FOV;
+    const translation = angleDiff * translationScale;
+    const tickmarks = this.generateTickmarks(translationScale);
+    this.labels.map((l) => {
+      l.x = l.x * translationScale;
+    });
+    const viewBox = this.noPadding ? "-192 -128 384 128" : "-200 -144 400 144";
+    return svg`
+      <div class="container">
+        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
+        <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg"> 
+        ${this.HDGSvg}${this.COGSvg(translation)}
+      </div>
+    `;
+  }
+};
+ObcCompassFlat.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcCompassFlat.prototype, "noPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcCompassFlat.prototype, "FOVIndicator", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "heading", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "courseOverGround", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "tickInterval", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "FOV", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "minFOV", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "maxFOV", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "containerWidth", 2);
+ObcCompassFlat = __decorateClass([
+  customElement("obc-compass-flat")
+], ObcCompassFlat);
+export {
+  LabelPosition,
+  LabelStyle,
+  ObcCompassFlat
+};
+//# sourceMappingURL=compass-flat.js.map

package/dist/navigation-instruments/compass-flat/compass-flat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\nimport '../watch-flat/watch-flat';\n\nexport enum LabelPosition {\n  top = -45,\n  bottom = 50,\n}\n\nexport enum LabelStyle {\n  regular = 'var(--instrument-tick-mark-secondary-color)',\n}\n\nexport interface Label {\n  x: number;\n  y: LabelPosition;\n  text: string;\n}\n\n@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n  @property({type: Boolean}) noPadding: boolean = true;\n  @property({type: Boolean}) FOVIndicator: boolean = false;\n  @property({type: Number}) padding: number = 16;\n  @property({type: Number}) heading = 0;\n  @property({type: Number}) courseOverGround = 0;\n  @property({type: Number}) tickInterval = 5;\n  @property({type: Number}) FOV = 45;\n  @property({type: Number}) minFOV = 45;\n  @property({type: Number}) maxFOV = 180;\n  labels: Label[] = [];\n\n  @property({type: Number}) containerWidth = 0;\n\n  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\n      this.updateLabels();\n    }\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  private updateLabels() {\n    if (this.containerWidth < 192) {\n      this.labels = [];\n    } else if (this.containerWidth <= 300) {\n      this.labels = [\n        {x: -180, y: LabelPosition.top, text: 'S'},\n        {x: -90, y: LabelPosition.top, text: 'W'},\n        {x: 0, y: LabelPosition.top, text: 'N'},\n        {x: 90, y: LabelPosition.top, text: 'E'},\n        {x: 180, y: LabelPosition.top, text: 'S'},\n        {x: 270, y: LabelPosition.top, text: 'W'},\n        {x: 360, y: LabelPosition.top, text: 'N'},\n        {x: 450, y: LabelPosition.top, text: 'E'},\n        {x: 540, y: LabelPosition.top, text: 'S'},\n      ];\n    } else {\n      this.labels = [\n        {x: -180, y: LabelPosition.top, text: 'S'},\n        {x: -135, y: LabelPosition.top, text: 'SW'},\n        {x: -90, y: LabelPosition.top, text: 'W'},\n        {x: -45, y: LabelPosition.top, text: 'NW'},\n        {x: 0, y: LabelPosition.top, text: 'N'},\n        {x: 45, y: LabelPosition.top, text: 'NE'},\n        {x: 90, y: LabelPosition.top, text: 'E'},\n        {x: 135, y: LabelPosition.top, text: 'SE'},\n        {x: 180, y: LabelPosition.top, text: 'S'},\n        {x: 225, y: LabelPosition.top, text: 'SW'},\n        {x: 270, y: LabelPosition.top, text: 'W'},\n        {x: 315, y: LabelPosition.top, text: 'NW'},\n        {x: 360, y: LabelPosition.top, text: 'N'},\n        {x: 405, y: LabelPosition.top, text: 'NE'},\n        {x: 450, y: LabelPosition.top, text: 'E'},\n        {x: 495, y: LabelPosition.top, text: 'SE'},\n        {x: 540, y: LabelPosition.top, text: 'S'},\n      ];\n    }\n  }\n\n  private generateIntervalTickmarks(scale: number): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n    let cardinalInterval = 90;\n\n    if (this.containerWidth > 300) {\n      cardinalInterval = 45;\n    } else if (this.containerWidth < 192) {\n      cardinalInterval = 0;\n    }\n\n    for (\n      let angle = -180;\n      angle < this.maxFOV * 3;\n      angle += this.tickInterval\n    ) {\n      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\n        continue;\n      }\n      tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\n    }\n\n    return tickmarks;\n  }\n\n  private generateCardinalTickmarks(scale: number): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n\n    for (const label of this.labels) {\n      tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n    }\n\n    return tickmarks;\n  }\n\n  private generateTickmarks(scale: number): Tickmark[] {\n    return [\n      ...this.generateCardinalTickmarks(scale),\n      ...this.generateIntervalTickmarks(scale),\n    ];\n  }\n\n  private renderFOVIndicator(): SVGTemplateResult[] {\n    const indicators: SVGTemplateResult[] = [];\n\n    const maxAdjustment = 10;\n    const minContainerWidth = 300;\n    const maxContainerWidth = 512;\n\n    let yAdjustment = 0;\n    if (this.containerWidth < maxContainerWidth) {\n      const widthRange = maxContainerWidth - minContainerWidth;\n      const scaleFactor =\n        (maxContainerWidth - this.containerWidth) / widthRange;\n      yAdjustment = scaleFactor * maxAdjustment;\n    }\n\n    const y = LabelPosition.bottom + yAdjustment;\n\n    indicators.push(svg`\n          <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\n            ${-this.FOV}\\u00B0\n          </text>`);\n\n    indicators.push(svg`\n          <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\n            ${this.heading}\\u00B0\n          </text>`);\n\n    indicators.push(svg`\n          <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\n            ${this.FOV}\\u00B0\n          </text>`);\n\n    return indicators;\n  }\n\n  private get HDGSvg(): SVGTemplateResult {\n    return svg`<g transform=\"translate(-24, -74)\">\n          <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n        </g>`;\n  }\n\n  private COGSvg(translation: number): SVGTemplateResult {\n    return svg`\n      <g transform=\"translate(${-24 + translation}, -74)\">\n        <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n      </g>\n    `;\n  }\n\n  override render() {\n    let angleDiff = this.courseOverGround - this.heading;\n\n    if (angleDiff > this.maxFOV) {\n      angleDiff -= 360;\n    } else if (angleDiff < -this.maxFOV) {\n      angleDiff += 360;\n    }\n\n    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\n\n    const baseOffset = 5;\n    const translationScale = (baseOffset * 35) / this.FOV;\n\n    const translation = angleDiff * translationScale;\n\n    const tickmarks = this.generateTickmarks(translationScale);\n    this.labels.map((l) => {\n      l.x = l.x * translationScale;\n    });\n\n    const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\n\n    return svg`\n      <div class=\"container\">\n        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\n        <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \n        ${this.HDGSvg}${this.COGSvg(translation)}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-compass-flat': ObcCompassFlat;\n  }\n}\n"],"names":["LabelPosition","LabelStyle"],"mappings":"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"}

package/dist/navigation-instruments/main-engine/main-engine.css.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+const compentStyle = css`* {
+    box-sizing: border-box;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.container>* {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=main-engine.css.js.map

package/dist/navigation-instruments/main-engine/main-engine.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-engine.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/main-engine/main-engine.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { InstrumentState } from '../types';
+import { LinearAdvice } from '../thruster/advice';
+export declare class ObcMainEngine extends LitElement {
+    thrust: number;
+    thrustSetpoint: number | undefined;
+    thrustTouching: boolean;
+    atThrustSetpoint: boolean;
+    speed: number;
+    speedSetpoint: number | undefined;
+    speedTouching: boolean;
+    atSpeedSetpoint: boolean;
+    disableAutoAtThrustSetpoint: boolean;
+    disableAutoAtSpeedSetpoint: boolean;
+    autoAtThrustSetpointDeadband: number;
+    autoAtSpeedSetpointDeadband: number;
+    thrustSetpointAtZeroDeadband: number;
+    speedSetpointAtZeroDeadband: number;
+    state: InstrumentState;
+    thrustAdvices: LinearAdvice[];
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-main-engine': ObcMainEngine;
+    }
+}
+//# sourceMappingURL=main-engine.d.ts.map

package/dist/navigation-instruments/main-engine/main-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-engine.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/main-engine/main-engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgC,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAQzC,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAEhD,qBACa,aAAc,SAAQ,UAAU;IACjB,MAAM,EAAE,MAAM,CAAK;IACnB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,cAAc,EAAE,OAAO,CAAS;IAChC,gBAAgB,EAAE,OAAO,CAAS;IACnC,KAAK,EAAE,MAAM,CAAK;IAClB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,OAAO,CAAS;IAC/B,eAAe,EAAE,OAAO,CAAS;IACjC,2BAA2B,EAAE,OAAO,CAAS;IAC7C,0BAA0B,EAAE,OAAO,CAAS;IAC7C,4BAA4B,EAAE,MAAM,CAAK;IACzC,2BAA2B,EAAE,MAAM,CAAK;IACxC,4BAA4B,EAAE,MAAM,CAAO;IAC3C,2BAA2B,EAAE,MAAM,CAAO;IAC1C,KAAK,EAAE,eAAe,CAA6B;IACpD,aAAa,EAAE,YAAY,EAAE,CAAM;IAEnD,MAAM;IAwHf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/navigation-instruments/main-engine/main-engine.js

@@ -0,0 +1,196 @@
+import { unsafeCSS, LitElement, svg, nothing, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./main-engine.css.js";
+import { InstrumentState } from "../types.js";
+import { atSetpoint, thrusterColors, convertThrustAdvices, thrusterTopSingleSided, setpointSvg } from "../thruster/thruster.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcMainEngine = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.thrust = 0;
+    this.thrustTouching = false;
+    this.atThrustSetpoint = false;
+    this.speed = 0;
+    this.speedTouching = false;
+    this.atSpeedSetpoint = false;
+    this.disableAutoAtThrustSetpoint = false;
+    this.disableAutoAtSpeedSetpoint = false;
+    this.autoAtThrustSetpointDeadband = 1;
+    this.autoAtSpeedSetpointDeadband = 1;
+    this.thrustSetpointAtZeroDeadband = 0.5;
+    this.speedSetpointAtZeroDeadband = 0.5;
+    this.state = InstrumentState.inCommand;
+    this.thrustAdvices = [];
+  }
+  render() {
+    const thrustSetpointAtZero = Math.abs(this.thrustSetpoint || 0) < this.thrustSetpointAtZeroDeadband;
+    const speedSetpointAtZero = Math.abs(this.speedSetpoint || 0) < this.speedSetpointAtZeroDeadband;
+    const thrustAtSetpoint = atSetpoint(this.thrust, this.thrustSetpoint, {
+      atSetpoint: this.atThrustSetpoint,
+      autoAtSetpoint: !this.disableAutoAtThrustSetpoint,
+      autoSetpointDeadband: this.autoAtThrustSetpointDeadband,
+      touching: this.thrustTouching
+    });
+    const cThrust = thrusterColors(
+      {
+        atSetpoint: thrustAtSetpoint,
+        touching: this.thrustTouching
+      },
+      this.state
+    );
+    const speedAtSetpoint = atSetpoint(this.speed, this.speedSetpoint, {
+      atSetpoint: this.atSpeedSetpoint,
+      autoAtSetpoint: !this.disableAutoAtSpeedSetpoint,
+      autoSetpointDeadband: this.autoAtSpeedSetpointDeadband,
+      touching: this.speedTouching
+    });
+    const cSpeed = thrusterColors(
+      {
+        atSetpoint: speedAtSetpoint,
+        touching: this.speedTouching
+      },
+      this.state
+    );
+    const container = svg`<rect x="-80" y="-176" width="160" height="352" fill="var(--instrument-frame-primary-color)" stroke="var(--instrument-frame-tertiary-color)" rx="8"/>`;
+    const border = svg`<rect x="-80" y="-176" width="160" height="352" fill="none" stroke="var(--instrument-frame-tertiary-color)" rx="8" vector-effect="non-scaling-stroke"/>`;
+    const frameLeft = svg`<rect x="-56" y="-176" width="48" height="352" fill="var(--instrument-frame-secondary-color)" vector-effect="non-scaling-stroke" stroke="var(--instrument-frame-secondary-color)"/>`;
+    const frameRight = svg`<rect x="8" y="-176" width="48" height="352" fill="var(--instrument-frame-secondary-color)" vector-effect="non-scaling-stroke" stroke="var(--instrument-frame-secondary-color)"/>`;
+    const thrustCenter = svg`<rect x="8" y="-2" height="4" width="72" fill="${cThrust.zeroLineColor}" stroke=${cThrust.zeroLineColor} vector-effect="non-scaling-stroke"/>`;
+    const { topAdvices: topThrustAdvice, bottomAdvices: bottomThrustAdvice } = convertThrustAdvices(this.thrustAdvices, this.thrust);
+    const thrustTop = svg`<g transform="translate(44, 0)">
+      ${thrusterTopSingleSided(
+      174,
+      Math.max(this.thrust, 0),
+      { box: cThrust.boxColor, container: "" },
+      {
+        hideContainer: true,
+        hideTicks: cThrust.hideTicks,
+        flipAdicePattern: false,
+        narrow: false
+      },
+      topThrustAdvice
+    )}</g>`;
+    const thrusterBottom = svg`<g transform="rotate(180) scale(-1,1) translate(44)">
+     ${thrusterTopSingleSided(
+      174,
+      Math.max(-this.thrust, 0),
+      { box: cThrust.boxColor, container: "" },
+      {
+        hideContainer: true,
+        hideTicks: cThrust.hideTicks,
+        flipAdicePattern: false,
+        narrow: false
+      },
+      bottomThrustAdvice
+    )}</g>`;
+    const thrustSetpoint = this.thrustSetpoint !== void 0 ? svg`<g transform="translate(44, 0)">${setpointSvg(
+      174,
+      this.thrustSetpoint,
+      thrustSetpointAtZero,
+      {
+        fill: cThrust.setPointColor,
+        stroke: "var(--border-silhouette-color)"
+      },
+      {
+        inCommand: this.state === InstrumentState.inCommand,
+        singleSided: true,
+        narrow: false
+      }
+    )}</g>` : nothing;
+    const speedHeight = 352 * (this.speed / 100) + 2;
+    const speedY = 176 - speedHeight;
+    const speedBoxColor = this.state === InstrumentState.inCommand ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
+    const speedBox = svg`<rect x="-56" y=${speedY} width="48" height=${speedHeight} fill=${speedBoxColor} stroke=${speedBoxColor} vector-effect="non-scaling-stroke">`;
+    const speedLine = svg`<rect x="-56" y=${speedY - 2} width="48" height="4" rx="2" fill=${cSpeed.boxColor} stroke=${cSpeed.boxColor}/>
+`;
+    const speedSetpoint = this.speedSetpoint !== void 0 ? svg`<g transform="scale(-1 1) translate(44, 176)">${setpointSvg(
+      350,
+      this.speedSetpoint,
+      speedSetpointAtZero,
+      {
+        fill: cSpeed.setPointColor,
+        stroke: "var(--border-silhouette-color)"
+      },
+      {
+        inCommand: this.state === InstrumentState.inCommand,
+        singleSided: true,
+        narrow: false
+      }
+    )}</g>` : nothing;
+    return html`
+      <div class="container">
+        <svg viewbox="-100 -200 200 400">
+          ${container} ${frameLeft} ${frameRight} ${thrustCenter} ${thrustTop}
+          ${thrusterBottom} ${speedBox} ${speedLine} ${border} ${thrustSetpoint}
+          ${speedSetpoint}
+        </svg>
+      </div>
+    `;
+  }
+};
+ObcMainEngine.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "thrust", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "thrustSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcMainEngine.prototype, "thrustTouching", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcMainEngine.prototype, "atThrustSetpoint", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "speed", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "speedSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcMainEngine.prototype, "speedTouching", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcMainEngine.prototype, "atSpeedSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcMainEngine.prototype, "disableAutoAtThrustSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcMainEngine.prototype, "disableAutoAtSpeedSetpoint", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "autoAtThrustSetpointDeadband", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "autoAtSpeedSetpointDeadband", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "thrustSetpointAtZeroDeadband", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcMainEngine.prototype, "speedSetpointAtZeroDeadband", 2);
+__decorateClass([
+  property({ type: String })
+], ObcMainEngine.prototype, "state", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcMainEngine.prototype, "thrustAdvices", 2);
+ObcMainEngine = __decorateClass([
+  customElement("obc-main-engine")
+], ObcMainEngine);
+export {
+  ObcMainEngine
+};
+//# sourceMappingURL=main-engine.js.map

package/dist/navigation-instruments/main-engine/main-engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-engine.js","sources":["../../../src/navigation-instruments/main-engine/main-engine.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, svg, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './main-engine.css?inline';\nimport {InstrumentState} from '../types';\nimport {\n  atSetpoint,\n  convertThrustAdvices,\n  thrusterColors,\n  thrusterTopSingleSided,\n  setpointSvg,\n} from '../thruster/thruster';\nimport {LinearAdvice} from '../thruster/advice';\n\n@customElement('obc-main-engine')\nexport class ObcMainEngine extends LitElement {\n  @property({type: Number}) thrust: number = 0;\n  @property({type: Number}) thrustSetpoint: number | undefined;\n  @property({type: Boolean}) thrustTouching: boolean = false;\n  @property({type: Boolean}) atThrustSetpoint: boolean = false;\n  @property({type: Number}) speed: number = 0;\n  @property({type: Number}) speedSetpoint: number | undefined;\n  @property({type: Boolean}) speedTouching: boolean = false;\n  @property({type: Boolean}) atSpeedSetpoint: boolean = false;\n  @property({type: Boolean}) disableAutoAtThrustSetpoint: boolean = false;\n  @property({type: Boolean}) disableAutoAtSpeedSetpoint: boolean = false;\n  @property({type: Number}) autoAtThrustSetpointDeadband: number = 1;\n  @property({type: Number}) autoAtSpeedSetpointDeadband: number = 1;\n  @property({type: Number}) thrustSetpointAtZeroDeadband: number = 0.5;\n  @property({type: Number}) speedSetpointAtZeroDeadband: number = 0.5;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Array}) thrustAdvices: LinearAdvice[] = [];\n\n  override render() {\n    const thrustSetpointAtZero =\n      Math.abs(this.thrustSetpoint || 0) < this.thrustSetpointAtZeroDeadband;\n    const speedSetpointAtZero =\n      Math.abs(this.speedSetpoint || 0) < this.speedSetpointAtZeroDeadband;\n    const thrustAtSetpoint = atSetpoint(this.thrust, this.thrustSetpoint, {\n      atSetpoint: this.atThrustSetpoint,\n      autoAtSetpoint: !this.disableAutoAtThrustSetpoint,\n      autoSetpointDeadband: this.autoAtThrustSetpointDeadband,\n      touching: this.thrustTouching,\n    });\n    const cThrust = thrusterColors(\n      {\n        atSetpoint: thrustAtSetpoint,\n        touching: this.thrustTouching,\n      },\n      this.state\n    );\n    const speedAtSetpoint = atSetpoint(this.speed, this.speedSetpoint, {\n      atSetpoint: this.atSpeedSetpoint,\n      autoAtSetpoint: !this.disableAutoAtSpeedSetpoint,\n      autoSetpointDeadband: this.autoAtSpeedSetpointDeadband,\n      touching: this.speedTouching,\n    });\n    const cSpeed = thrusterColors(\n      {\n        atSetpoint: speedAtSetpoint,\n        touching: this.speedTouching,\n      },\n      this.state\n    );\n    const container = svg`<rect x=\"-80\" y=\"-176\" width=\"160\" height=\"352\" fill=\"var(--instrument-frame-primary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" rx=\"8\"/>`;\n    const border = svg`<rect x=\"-80\" y=\"-176\" width=\"160\" height=\"352\" fill=\"none\" stroke=\"var(--instrument-frame-tertiary-color)\" rx=\"8\" vector-effect=\"non-scaling-stroke\"/>`;\n    const frameLeft = svg`<rect x=\"-56\" y=\"-176\" width=\"48\" height=\"352\" fill=\"var(--instrument-frame-secondary-color)\" vector-effect=\"non-scaling-stroke\" stroke=\"var(--instrument-frame-secondary-color)\"/>`;\n    const frameRight = svg`<rect x=\"8\" y=\"-176\" width=\"48\" height=\"352\" fill=\"var(--instrument-frame-secondary-color)\" vector-effect=\"non-scaling-stroke\" stroke=\"var(--instrument-frame-secondary-color)\"/>`;\n    const thrustCenter = svg`<rect x=\"8\" y=\"-2\" height=\"4\" width=\"72\" fill=\"${cThrust.zeroLineColor}\" stroke=${cThrust.zeroLineColor} vector-effect=\"non-scaling-stroke\"/>`;\n    const {topAdvices: topThrustAdvice, bottomAdvices: bottomThrustAdvice} =\n      convertThrustAdvices(this.thrustAdvices, this.thrust);\n    const thrustTop = svg`<g transform=\"translate(44, 0)\">\n      ${thrusterTopSingleSided(\n        174,\n        Math.max(this.thrust, 0),\n        {box: cThrust.boxColor, container: ''},\n        {\n          hideContainer: true,\n          hideTicks: cThrust.hideTicks,\n          flipAdicePattern: false,\n          narrow: false,\n        },\n        topThrustAdvice\n      )}</g>`;\n    const thrusterBottom = svg`<g transform=\"rotate(180) scale(-1,1) translate(44)\">\n     ${thrusterTopSingleSided(\n       174,\n       Math.max(-this.thrust, 0),\n       {box: cThrust.boxColor, container: ''},\n       {\n         hideContainer: true,\n         hideTicks: cThrust.hideTicks,\n         flipAdicePattern: false,\n         narrow: false,\n       },\n       bottomThrustAdvice\n     )}</g>`;\n    const thrustSetpoint =\n      this.thrustSetpoint !== undefined\n        ? svg`<g transform=\"translate(44, 0)\">${setpointSvg(\n            174,\n            this.thrustSetpoint,\n            thrustSetpointAtZero,\n            {\n              fill: cThrust.setPointColor,\n              stroke: 'var(--border-silhouette-color)',\n            },\n            {\n              inCommand: this.state === InstrumentState.inCommand,\n              singleSided: true,\n              narrow: false,\n            }\n          )}</g>`\n        : nothing;\n\n    const speedHeight = 352 * (this.speed / 100) + 2;\n    const speedY = 176 - speedHeight;\n    const speedBoxColor =\n      this.state === InstrumentState.inCommand\n        ? 'var(--instrument-enhanced-tertiary-color)'\n        : 'var(--instrument-regular-tertiary-color)';\n    const speedBox = svg`<rect x=\"-56\" y=${speedY} width=\"48\" height=${speedHeight} fill=${speedBoxColor} stroke=${speedBoxColor} vector-effect=\"non-scaling-stroke\">`;\n    const speedLine = svg`<rect x=\"-56\" y=${speedY - 2} width=\"48\" height=\"4\" rx=\"2\" fill=${cSpeed.boxColor} stroke=${cSpeed.boxColor}/>\n`;\n    const speedSetpoint =\n      this.speedSetpoint !== undefined\n        ? svg`<g transform=\"scale(-1 1) translate(44, 176)\">${setpointSvg(\n            350,\n            this.speedSetpoint,\n            speedSetpointAtZero,\n            {\n              fill: cSpeed.setPointColor,\n              stroke: 'var(--border-silhouette-color)',\n            },\n            {\n              inCommand: this.state === InstrumentState.inCommand,\n              singleSided: true,\n              narrow: false,\n            }\n          )}</g>`\n        : nothing;\n\n    return html`\n      <div class=\"container\">\n        <svg viewbox=\"-100 -200 200 400\">\n          ${container} ${frameLeft} ${frameRight} ${thrustCenter} ${thrustTop}\n          ${thrusterBottom} ${speedBox} ${speedLine} ${border} ${thrustSetpoint}\n          ${speedSetpoint}\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-main-engine': ObcMainEngine;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/thruster/advice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"advice.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAe,MAAM,KAAK,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAIxD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAwBD,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,OAAO,GACrB,iBAAiB,CA2DnB"}
+{"version":3,"file":"advice.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAe,MAAM,KAAK,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAIxD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAwBD,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,OAAO,GACrB,iBAAiB,CA+DnB"}

package/dist/navigation-instruments/thruster/advice.js

@@ -56,20 +56,24 @@ function renderAdvice(height, advice, flipDirection) {
             ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
         `;
   } else {
-    let mainColor;
+    let strokeColor;
     let tickmarkStyle;
+    let fillColor;
     if (advice.state === AdviceState.hinted) {
-      mainColor = "var(--instrument-frame-tertiary-color)";
+      strokeColor = "var(--instrument-frame-tertiary-color)";
+      fillColor = "none";
       tickmarkStyle = TickmarkStyle.hinted;
     } else if (advice.state === AdviceState.regular) {
-      mainColor = "var(--instrument-regular-secondary-color)";
+      strokeColor = "var(--instrument-regular-secondary-color)";
+      fillColor = "none";
       tickmarkStyle = TickmarkStyle.regular;
     } else {
-      mainColor = "var(--instrument-enhanced-secondary-color)";
+      strokeColor = "var(--instrument-enhanced-secondary-color)";
+      fillColor = strokeColor;
       tickmarkStyle = TickmarkStyle.regular;
     }
     return svg`
-            ${adviceMask(height, advice.min, advice.max, mainColor, mainColor)}
+            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}
             ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
             ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
         `;

package/dist/navigation-instruments/thruster/advice.js.map

@@ -1 +1 @@
-{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {AdviceState, AdviceType} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\n\nexport interface LinearAdviceRaw {\n  min: number;\n  max: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface LinearAdvice {\n  min: number;\n  max: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nfunction adviceMask(\n  height: number,\n  min: number,\n  max: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const width = 8;\n  const x1 = 12;\n  const x2 = x1 + width;\n  const r = width / 2;\n  const yL = (-min * height) / 100 - 2 * r - 2;\n  const yH = (-max * height) / 100 + 2 * r - 2;\n\n  const path = `M ${x1} ${yL} \n                    A ${r} ${r} 0 0 0 ${x2} ${yL}\n                    V ${yH}\n                    A ${r} ${r} 0 0 0 ${x1} ${yH}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(\n  height: number,\n  advice: LinearAdviceRaw,\n  flipDirection: boolean\n): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const pattern = [];\n    const ypattern = flipDirection ? 50 : -50;\n    for (let i = -100; i < 300; i += 16) {\n      pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\n            <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.min}-${advice.max}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\n                ${pattern}\n            </g>\n            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  } else {\n    let mainColor;\n    let tickmarkStyle;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-regular-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      mainColor = 'var(--instrument-enhanced-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(height, advice.min, advice.max, mainColor, mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  }\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACO,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,CAAC;AAAA,cAChE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}
+{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {AdviceState, AdviceType} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\n\nexport interface LinearAdviceRaw {\n  min: number;\n  max: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface LinearAdvice {\n  min: number;\n  max: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nfunction adviceMask(\n  height: number,\n  min: number,\n  max: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const width = 8;\n  const x1 = 12;\n  const x2 = x1 + width;\n  const r = width / 2;\n  const yL = (-min * height) / 100 - 2 * r - 2;\n  const yH = (-max * height) / 100 + 2 * r - 2;\n\n  const path = `M ${x1} ${yL} \n                    A ${r} ${r} 0 0 0 ${x2} ${yL}\n                    V ${yH}\n                    A ${r} ${r} 0 0 0 ${x1} ${yH}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(\n  height: number,\n  advice: LinearAdviceRaw,\n  flipDirection: boolean\n): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const pattern = [];\n    const ypattern = flipDirection ? 50 : -50;\n    for (let i = -100; i < 300; i += 16) {\n      pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\n            <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.min}-${advice.max}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\n                ${pattern}\n            </g>\n            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  } else {\n    let strokeColor;\n    let tickmarkStyle;\n    let fillColor: string;\n    if (advice.state === AdviceState.hinted) {\n      strokeColor = 'var(--instrument-frame-tertiary-color)';\n      fillColor = 'none';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      strokeColor = 'var(--instrument-regular-secondary-color)';\n      fillColor = 'none';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      strokeColor = 'var(--instrument-enhanced-secondary-color)';\n      fillColor = strokeColor;\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  }\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AACzB,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACjC,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACS,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,WAAW,CAAC;AAAA,cAClE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}