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

package/dist/navigation-instruments/watch/label.d.ts

@@ -0,0 +1,3 @@
+import { SVGTemplateResult } from 'lit-html';
+export declare function renderLabels(scale: number): SVGTemplateResult;
+//# sourceMappingURL=label.d.ts.map

package/dist/navigation-instruments/watch/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAEhD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAkE7D"}

package/dist/navigation-instruments/watch/label.js

@@ -0,0 +1,68 @@
+import { svg } from "lit-html";
+function renderLabels(scale) {
+  const labelWidth = 32;
+  const gap = 8;
+  const radius = 368 / 2;
+  const labels = [
+    {
+      label: "E",
+      x: radius + gap / scale + labelWidth / 2,
+      y: 0,
+      class: "label"
+    },
+    {
+      label: "S",
+      x: 0,
+      y: radius + gap / scale + labelWidth / 2,
+      class: "label"
+    },
+    {
+      label: "W",
+      x: -(radius + gap / scale + labelWidth / 2),
+      y: 0,
+      class: "label"
+    }
+  ];
+  let arrow = svg`<defs>
+        <mask id="circleMask">
+            <rect x="-${radius}" y="-${radius}" width="${radius * 2}" height="${radius * 2}" fill="black"/>
+            <circle cx="0" cy="0" r="${radius}" fill="white"/>
+        </mask>
+    </defs>
+    <g mask="url(#circleMask)" transform="translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z" 
+      fill="var(--instrument-tick-mark-secondary-color)"/>
+        <path d="M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z" fill="var(--element-active-inverted-color)"/>
+      </g>`;
+  if (scale < 0.58) {
+    arrow = svg`
+      <g mask="url(#circleMask)" transform="translate(0, ${-radius})">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z" fill="var(--instrument-frame-tertiary-color)"/>
+        </g>`;
+    labels.push({
+      label: "N",
+      x: 0,
+      y: -(radius + gap / scale + labelWidth / 2),
+      class: "label"
+    });
+  }
+  return svg`
+    ${arrow}
+
+    ${labels.map(
+    (l) => svg`
+        <text
+          x="${l.x}"
+          y="${l.y}"
+          class="${l.class}"
+        >
+          ${l.label}
+        </text>
+      `
+  )}
+  `;
+}
+export {
+  renderLabels
+};
+//# sourceMappingURL=label.js.map

package/dist/navigation-instruments/watch/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../src/navigation-instruments/watch/label.ts"],"sourcesContent":["import {svg, SVGTemplateResult} from 'lit-html';\n\nexport function renderLabels(scale: number): SVGTemplateResult {\n  const labelWidth = 32;\n  const gap = 8;\n  const radius: number = 368 / 2;\n  const labels = [\n    {\n      label: 'E',\n      x: radius + gap / scale + labelWidth / 2,\n      y: 0,\n      class: 'label',\n    },\n    {\n      label: 'S',\n      x: 0,\n      y: radius + gap / scale + labelWidth / 2,\n      class: 'label',\n    },\n    {\n      label: 'W',\n      x: -(radius + gap / scale + labelWidth / 2),\n      y: 0,\n      class: 'label',\n    },\n  ];\n\n  let arrow = svg`<defs>\n        <mask id=\"circleMask\">\n            <rect x=\"-${radius}\" y=\"-${radius}\" width=\"${radius * 2}\" height=\"${radius * 2}\" fill=\"black\"/>\n            <circle cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"white\"/>\n        </mask>\n    </defs>\n    <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z\" \n      fill=\"var(--instrument-tick-mark-secondary-color)\"/>\n        <path d=\"M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z\" fill=\"var(--element-active-inverted-color)\"/>\n      </g>`;\n\n  if (scale < 0.58) {\n    arrow = svg`\n      <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-radius})\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z\" fill=\"var(--instrument-frame-tertiary-color)\"/>\n        </g>`;\n\n    labels.push({\n      label: 'N',\n      x: 0,\n      y: -(radius + gap / scale + labelWidth / 2),\n      class: 'label',\n    });\n  }\n\n  return svg`\n    ${arrow}\n\n    ${labels.map(\n      (l) => svg`\n        <text\n          x=\"${l.x}\"\n          y=\"${l.y}\"\n          class=\"${l.class}\"\n        >\n          ${l.label}\n        </text>\n      `\n    )}\n  `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,aAAa,OAAkC;AAC7D,QAAM,aAAa;AACnB,QAAM,MAAM;AACZ,QAAM,SAAiB,MAAM;AAC7B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EAAA;AAGF,MAAI,QAAQ;AAAA;AAAA,wBAEU,MAAM,SAAS,MAAM,YAAY,SAAS,CAAC,aAAa,SAAS,CAAC;AAAA,uCACnD,MAAM;AAAA;AAAA;AAAA,yDAGY,EAAE,SAAS,KAAK,MAAM,WAAW,IAAI,KAAK,KAAK,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAI,QAAQ,MAAM;AACR,YAAA;AAAA,2DAC+C,CAAC,MAAM;AAAA;AAAA;AAI9D,WAAO,KAAK;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,OAAO;AAAA,IAAA,CACR;AAAA,EACH;AAEO,SAAA;AAAA,MACH,KAAK;AAAA;AAAA,MAEL,OAAO;AAAA,IACP,CAAC,MAAM;AAAA;AAAA,eAEE,EAAE,CAAC;AAAA,eACH,EAAE,CAAC;AAAA,mBACC,EAAE,KAAK;AAAA;AAAA,YAEd,EAAE,KAAK;AAAA;AAAA;AAAA,EAAA,CAGd;AAAA;AAEL;"}

package/dist/navigation-instruments/watch/watch.css.js

@@ -1,22 +1,23 @@
 import { css } from "lit";
 const compentStyle = css`* {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .label {
-    /* UI/Body */
-    font-family: 'Noto Sans';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 370;
-    line-height: 24px;
-    /* 150% */
-    text-decoration: none;
-    font-size: calc(16px / var(--scale));
-    fill: var(--element-neutral-color);
-    alignment-baseline: middle;
-    text-anchor: middle;
-}`;
+  /* UI/Body */
+  font-family: 'Noto Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 370;
+  line-height: 24px;
+  /* 150% */
+  text-decoration: none;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}
+`;
 export {
   compentStyle as default
 };

package/dist/navigation-instruments/watch/watch.css.js.map

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

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

@@ -13,8 +13,11 @@ export declare class ObcWatch extends LitElement {
     roundInsideCut: boolean;
     tickmarks: Tickmark[];
     advices: AngleAdviceRaw[];
+    crosshairEnabled: boolean;
+    labelFrameEnabled: boolean;
     private _resizeController;
     private watchCircle;
+    private renderCrosshair;
     render(): import("lit-html").TemplateResult<1>;
     private renderSetpoint;
     static styles: import("lit").CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAMX,MAAM,KAAK,CAAC;AAIb,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAC,cAAc,EAAe,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,QAAQ,EAA0B,MAAM,YAAY,CAAC;AAE7D,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,EAAE,eAAe,CAA6B;IACnD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,EAAE,OAAO,CAAS;IAClC,OAAO,SAAM;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjC,eAAe,UAAS;IACxB,cAAc,UAAS;IACP,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAM;IAI1E,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,WAAW;IA2DV,MAAM;IAuBf,OAAO,CAAC,cAAc;IA8CtB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAMX,MAAM,KAAK,CAAC;AAIb,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAC,cAAc,EAAe,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,QAAQ,EAA0B,MAAM,YAAY,CAAC;AAG7D,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,EAAE,eAAe,CAA6B;IACnD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,EAAE,OAAO,CAAS;IAClC,OAAO,SAAM;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjC,eAAe,UAAS;IACxB,cAAc,UAAS;IACP,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAM;IAC/C,gBAAgB,EAAE,OAAO,CAAS;IAClC,iBAAiB,EAAE,OAAO,CAAS;IAI9D,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,WAAW;IA2DnB,OAAO,CAAC,eAAe;IAuBd,MAAM;IA0Bf,OAAO,CAAC,cAAc;IA8CtB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -7,6 +7,7 @@ import compentStyle from "./watch.css.js";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { renderAdvice } from "./advice.js";
 import { tickmark, TickmarkStyle } from "./tickmark.js";
+import { renderLabels } from "./label.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -30,6 +31,8 @@ let ObcWatch = class extends LitElement {
     this.roundInsideCut = false;
     this.tickmarks = [];
     this.advices = [];
+    this.crosshairEnabled = false;
+    this.labelFrameEnabled = false;
     this._resizeController = new ResizeController(this, {});
   }
   watchCircle() {
@@ -82,6 +85,28 @@ let ObcWatch = class extends LitElement {
       `;
     }
   }
+  renderCrosshair(radius) {
+    return svg`
+      <line
+        x1="-${radius}"
+        y1="0"
+        x2="${radius}"
+        y2="0"
+        stroke="var(--instrument-frame-tertiary-color)"
+        stroke-width="1"
+        vector-effect="non-scaling-stroke"
+      />
+      <line
+        x1="0"
+        y1="-${radius}"
+        x2="0"
+        y2="${radius}"
+        stroke="var(--instrument-frame-tertiary-color)"
+        stroke-width="1"
+        vector-effect="non-scaling-stroke"
+      />
+    `;
+  }
   render() {
     const width = (176 + this.padding) * 2;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
@@ -91,6 +116,7 @@ let ObcWatch = class extends LitElement {
       (t) => tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
     );
     const advices = this.advices ? this.advices.map((a) => renderAdvice(a)) : nothing;
+    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;
     return html`
       <svg
         width="100%"
@@ -98,7 +124,8 @@ let ObcWatch = class extends LitElement {
         viewBox=${viewBox}
         style="--scale: ${scale}"
       >
-        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}
+        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}
+        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}
       </svg>
     `;
   }
@@ -176,6 +203,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcWatch.prototype, "advices", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "crosshairEnabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "labelFrameEnabled", 2);
 ObcWatch = __decorateClass([
   customElement("obc-watch")
 ], ObcWatch);

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

@@ -1 +1 @@
-{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n  LitElement,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Boolean}) atAngleSetpoint: boolean = false;\n  @property({type: Number}) padding = 24;\n  @property({type: Number}) cutAngleStart: number | null = null;\n  @property({type: Number}) cutAngleEnd: number | null = null;\n  @property({type: Boolean}) roundOutsideCut = false;\n  @property({type: Boolean}) roundInsideCut = false;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n\n  // @ts-expect-error TS6133: The controller unsures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private watchCircle(): SVGTemplateResult {\n    if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n      return svg`\n        <defs>\n          <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n            <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n          </mask>\n        </defs>\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"184\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\n        />`\n        }\n        ${circle('innerRing', {\n          radius: 320 / 2,\n          strokeWidth: 1,\n          strokeColor: 'var(--instrument-frame-tertiary-color)',\n          strokePosition: 'center',\n          fillColor: 'none',\n        })}\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : circle('outerRing', {\n                radius: 368 / 2,\n                strokeWidth: 1,\n                strokeColor: 'var(--instrument-frame-tertiary-color)',\n                strokePosition: 'center',\n                fillColor: 'none',\n              })\n        }\n    `;\n    } else {\n      const R = 184;\n      const r = 160;\n      const svgPath = roundedArch({\n        startAngle: this.cutAngleStart,\n        endAngle: this.cutAngleEnd,\n        R,\n        r,\n        roundOutsideCut: this.roundOutsideCut,\n        roundInsideCut: this.roundInsideCut,\n      });\n      return svg`\n        <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n        stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"/>\n      `;\n    }\n  }\n\n  override render() {\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n    const angleSetpoint = this.renderSetpoint();\n    const scale = this.clientWidth / width;\n    const tickmarks = this.tickmarks.map((t) =>\n      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n    );\n    const advices = this.advices\n      ? this.advices.map((a) => renderAdvice(a))\n      : nothing;\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}\n      </svg>\n    `;\n  }\n\n  private renderSetpoint(): SVGTemplateResult | typeof nothing {\n    let setPointColor = 'var(--instrument-enhanced-primary-color)';\n    if (this.atAngleSetpoint) {\n      setPointColor = 'var(--instrument-enhanced-secondary-color)';\n    }\n    if (this.state === InstrumentState.active) {\n      setPointColor = 'var(--instrument-regular-primary-color)';\n      if (this.atAngleSetpoint) {\n        setPointColor = 'var(--instrument-regular-secondary-color)';\n      }\n    } else if (this.state === InstrumentState.loading) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (this.state === InstrumentState.off) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n\n    if (this.angleSetpoint === undefined) {\n      return nothing;\n    } else {\n      let path;\n      if (this.state === InstrumentState.inCommand) {\n        path =\n          'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      } else {\n        path =\n          'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      }\n      return svg`\n        <defs>\n          <g id=\"setpoint\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n          </g>\n          <mask id=\"setpointMask\">\n            <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n            <use href=\"#setpoint\" fill=\"black\" />\n          </mask>\n        </defs>\n        <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n          <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n          \n          <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n        </g>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n  LitElement,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\nimport {renderLabels} from './label';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Boolean}) atAngleSetpoint: boolean = false;\n  @property({type: Number}) padding = 24;\n  @property({type: Number}) cutAngleStart: number | null = null;\n  @property({type: Number}) cutAngleEnd: number | null = null;\n  @property({type: Boolean}) roundOutsideCut = false;\n  @property({type: Boolean}) roundInsideCut = false;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n  @property({type: Boolean}) crosshairEnabled: boolean = false;\n  @property({type: Boolean}) labelFrameEnabled: boolean = false;\n\n  // @ts-expect-error TS6133: The controller unsures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private watchCircle(): SVGTemplateResult {\n    if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n      return svg`\n        <defs>\n          <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n            <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n          </mask>\n        </defs>\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"184\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\n        />`\n        }\n        ${circle('innerRing', {\n          radius: 320 / 2,\n          strokeWidth: 1,\n          strokeColor: 'var(--instrument-frame-tertiary-color)',\n          strokePosition: 'center',\n          fillColor: 'none',\n        })}\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : circle('outerRing', {\n                radius: 368 / 2,\n                strokeWidth: 1,\n                strokeColor: 'var(--instrument-frame-tertiary-color)',\n                strokePosition: 'center',\n                fillColor: 'none',\n              })\n        }\n    `;\n    } else {\n      const R = 184;\n      const r = 160;\n      const svgPath = roundedArch({\n        startAngle: this.cutAngleStart,\n        endAngle: this.cutAngleEnd,\n        R,\n        r,\n        roundOutsideCut: this.roundOutsideCut,\n        roundInsideCut: this.roundInsideCut,\n      });\n      return svg`\n        <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n        stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"/>\n      `;\n    }\n  }\n\n  private renderCrosshair(radius: number): SVGTemplateResult {\n    return svg`\n      <line\n        x1=\"-${radius}\"\n        y1=\"0\"\n        x2=\"${radius}\"\n        y2=\"0\"\n        stroke=\"var(--instrument-frame-tertiary-color)\"\n        stroke-width=\"1\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      <line\n        x1=\"0\"\n        y1=\"-${radius}\"\n        x2=\"0\"\n        y2=\"${radius}\"\n        stroke=\"var(--instrument-frame-tertiary-color)\"\n        stroke-width=\"1\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n    `;\n  }\n\n  override render() {\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n    const angleSetpoint = this.renderSetpoint();\n    const scale = this.clientWidth / width;\n    const tickmarks = this.tickmarks.map((t) =>\n      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n    );\n    const advices = this.advices\n      ? this.advices.map((a) => renderAdvice(a))\n      : nothing;\n    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\n        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\n      </svg>\n    `;\n  }\n\n  private renderSetpoint(): SVGTemplateResult | typeof nothing {\n    let setPointColor = 'var(--instrument-enhanced-primary-color)';\n    if (this.atAngleSetpoint) {\n      setPointColor = 'var(--instrument-enhanced-secondary-color)';\n    }\n    if (this.state === InstrumentState.active) {\n      setPointColor = 'var(--instrument-regular-primary-color)';\n      if (this.atAngleSetpoint) {\n        setPointColor = 'var(--instrument-regular-secondary-color)';\n      }\n    } else if (this.state === InstrumentState.loading) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (this.state === InstrumentState.off) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n\n    if (this.angleSetpoint === undefined) {\n      return nothing;\n    } else {\n      let path;\n      if (this.state === InstrumentState.inCommand) {\n        path =\n          'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      } else {\n        path =\n          'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      }\n      return svg`\n        <defs>\n          <g id=\"setpoint\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n          </g>\n          <mask id=\"setpointMask\">\n            <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n            <use href=\"#setpoint\" fill=\"black\" />\n          </mask>\n        </defs>\n        <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n          <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n          \n          <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n        </g>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/watch-flat/tickmark-flat.d.ts

@@ -0,0 +1,20 @@
+import { SVGTemplateResult } from 'lit';
+export interface Tickmark {
+    angle: number;
+    type: TickmarkType;
+    text?: string;
+}
+export declare enum TickmarkType {
+    main = "main",
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+export declare enum TickmarkStyle {
+    hinted = "hinted",
+    regular = "regular",
+    enhanced = "enhanced"
+}
+export declare function tickmarkColor(style: TickmarkStyle): string;
+export declare function tickmark(angle: number, tickmarkSize: TickmarkType, style: TickmarkStyle, text?: string): SVGTemplateResult | SVGTemplateResult[];
+//# sourceMappingURL=tickmark-flat.d.ts.map

package/dist/navigation-instruments/watch-flat/tickmark-flat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAQ1D;AAED,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,aAAa,EACpB,IAAI,CAAC,EAAE,MAAM,GACZ,iBAAiB,GAAG,iBAAiB,EAAE,CAyBzC"}

package/dist/navigation-instruments/watch-flat/tickmark-flat.js

@@ -0,0 +1,53 @@
+import { svg } from "lit";
+var TickmarkType = /* @__PURE__ */ ((TickmarkType2) => {
+  TickmarkType2["main"] = "main";
+  TickmarkType2["primary"] = "primary";
+  TickmarkType2["secondary"] = "secondary";
+  TickmarkType2["tertiary"] = "tertiary";
+  return TickmarkType2;
+})(TickmarkType || {});
+var TickmarkStyle = /* @__PURE__ */ ((TickmarkStyle2) => {
+  TickmarkStyle2["hinted"] = "hinted";
+  TickmarkStyle2["regular"] = "regular";
+  TickmarkStyle2["enhanced"] = "enhanced";
+  return TickmarkStyle2;
+})(TickmarkStyle || {});
+function tickmarkColor(style) {
+  if (style === "hinted") {
+    return "var(--instrument-frame-tertiary-color)";
+  } else if (style === "regular") {
+    return "var(--instrument-tick-mark-secondary-color)";
+  } else {
+    return "var(--instrument-tick-mark-primary-color)";
+  }
+}
+function tickmark(angle, tickmarkSize, style, text) {
+  const textHeight = -32;
+  let lineStartY = -35;
+  let lineEndY = -34;
+  if (tickmarkSize === "secondary") {
+    lineStartY = -24;
+    lineEndY = lineStartY + 8;
+  } else if (tickmarkSize === "main") {
+    lineEndY = lineStartY + 20;
+  } else if (tickmarkSize === "tertiary") {
+    throw new Error("Tertiary tickmarks are not supported");
+  }
+  const colorName = tickmarkColor(style);
+  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+  if (text) {
+    const textY = lineEndY + textHeight;
+    return [
+      tick,
+      svg`<text x=${angle} y=${textY} class="label" text-anchor="middle">${text}</text>`
+    ];
+  }
+  return tick;
+}
+export {
+  TickmarkStyle,
+  TickmarkType,
+  tickmark,
+  tickmarkColor
+};
+//# sourceMappingURL=tickmark-flat.js.map

package/dist/navigation-instruments/watch-flat/tickmark-flat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark-flat.js","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n}\n\nexport enum TickmarkType {\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n}\n\nexport enum TickmarkStyle {\n  hinted = 'hinted',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(style: TickmarkStyle): string {\n  if (style === TickmarkStyle.hinted) {\n    return 'var(--instrument-frame-tertiary-color)';\n  } else if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-secondary-color)';\n  } else {\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  tickmarkSize: TickmarkType,\n  style: TickmarkStyle,\n  text?: string\n): SVGTemplateResult | SVGTemplateResult[] {\n  const textHeight = -32;\n  let lineStartY: number = -35;\n  let lineEndY: number = -34;\n\n  if (tickmarkSize === TickmarkType.secondary) {\n    lineStartY = -24;\n    lineEndY = lineStartY + 8;\n  } else if (tickmarkSize === TickmarkType.main) {\n    lineEndY = lineStartY + 20;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n\n  const colorName = tickmarkColor(style);\n  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    const textY = lineEndY + textHeight;\n    return [\n      tick,\n      svg`<text x=${angle} y=${textY} class=\"label\" text-anchor=\"middle\">${text}</text>`,\n    ];\n  }\n\n  return tick;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":";AAQY,IAAA,iCAAAA,kBAAL;AACLA,gBAAA,MAAO,IAAA;AACPA,gBAAA,SAAU,IAAA;AACVA,gBAAA,WAAY,IAAA;AACZA,gBAAA,UAAW,IAAA;AAJDA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOA,IAAA,kCAAAC,mBAAL;AACLA,iBAAA,QAAS,IAAA;AACTA,iBAAA,SAAU,IAAA;AACVA,iBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAML,SAAS,cAAc,OAA8B;AAC1D,MAAI,UAAU,UAAsB;AAC3B,WAAA;AAAA,EAAA,WACE,UAAU,WAAuB;AACnC,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EACT;AACF;AAEO,SAAS,SACd,OACA,cACA,OACA,MACyC;AACzC,QAAM,aAAa;AACnB,MAAI,aAAqB;AACzB,MAAI,WAAmB;AAEvB,MAAI,iBAAiB,aAAwB;AAC9B,iBAAA;AACb,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,QAAmB;AAC7C,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEM,QAAA,YAAY,cAAc,KAAK;AAC/B,QAAA,OAAO,eAAe,KAAK,OAAO,UAAU,OAAO,KAAK,OAAO,QAAQ,WAAW,SAAS;AACjG,MAAI,MAAM;AACR,UAAM,QAAQ,WAAW;AAClB,WAAA;AAAA,MACL;AAAA,MACA,cAAc,KAAK,MAAM,KAAK,uCAAuC,IAAI;AAAA,IAAA;AAAA,EAE7E;AAEO,SAAA;AACT;"}

package/dist/navigation-instruments/watch-flat/watch-flat.css.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+const compentStyle = css`* {
+  box-sizing: border-box;
+}
+
+.label {
+  /* UI/Body */
+  font-family: 'Noto Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 370;
+  line-height: 24px;
+  /* 150% */
+  text-decoration: none;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}
+
+.label.left {
+  text-anchor: start;
+}
+
+.label.right {
+  text-anchor: end;
+}
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=watch-flat.css.js.map

package/dist/navigation-instruments/watch-flat/watch-flat.css.js.map

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

package/dist/navigation-instruments/watch-flat/watch-flat.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, SVGTemplateResult } from 'lit';
+import { Tickmark } from './tickmark-flat';
+import { Label } from '../compass-flat/compass-flat';
+export declare class ObcWatchFlat extends LitElement {
+    width: number;
+    height: number;
+    padding: number;
+    rotation: number;
+    tickmarkSpacing: number;
+    angleSetpoint: number | undefined;
+    tickmarks: Tickmark[];
+    labels: Label[];
+    FOVIndicator: SVGTemplateResult[];
+    trackHeight: number;
+    ticksHeight: number;
+    borderRadius: number;
+    private renderClipPath;
+    private renderLabelMask;
+    private renderLabels;
+    private watchFace;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-watch-flat': ObcWatchFlat;
+    }
+}
+//# sourceMappingURL=watch-flat.d.ts.map

package/dist/navigation-instruments/watch-flat/watch-flat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,iBAAiB,EAAuB,MAAM,KAAK,CAAC;AAGxE,OAAO,EAAC,QAAQ,EAA0B,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAO;IACZ,MAAM,SAAM;IACZ,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,eAAe,SAAK;IACpB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAM;IACrB,YAAY,EAAE,iBAAiB,EAAE,CACvE;IACqB,WAAW,SAAyB;IACpC,WAAW,SAAkC;IAC7C,YAAY,SAAK;IAE3C,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,SAAS;IAwCR,MAAM;IA8Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,184 @@
+import { unsafeCSS, LitElement, svg, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./watch-flat.css.js";
+import { tickmark, TickmarkStyle } from "./tickmark-flat.js";
+import { rect } from "../../svghelpers/rectangular.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 ObcWatchFlat = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.width = 352;
+    this.height = 72;
+    this.padding = 0;
+    this.rotation = 0;
+    this.tickmarkSpacing = 0;
+    this.tickmarks = [];
+    this.labels = [];
+    this.FOVIndicator = [];
+    this.trackHeight = 2 / 3 * this.height;
+    this.ticksHeight = this.height - this.trackHeight;
+    this.borderRadius = 8;
+  }
+  renderClipPath(offsetY = 0) {
+    return svg`
+      <clipPath id="frameClipPath${offsetY === 0 ? "" : "Tickmarks"}">
+        <rect x="${-this.width / 2}" y="${-this.height / 2 + offsetY}" 
+              width="${this.width}" height="${this.height}" 
+              rx="${this.borderRadius}" />
+      </clipPath>
+    `;
+  }
+  renderLabelMask() {
+    return svg`
+      <mask id="labelMask">
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+               />
+        <linearGradient id="fadeGradient" gradientUnits="userSpaceOnUse"
+                        x1="${-this.width / 2}" y1="0" x2="${this.width / 2}" y2="0">
+          <stop offset="0%" style="stop-color:black; stop-opacity:1;" />
+          <stop offset="10%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="50%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="90%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="100%" style="stop-color:black; stop-opacity:1;" />
+        </linearGradient>
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+              fill="url(#fadeGradient)" />
+      </mask>
+    `;
+  }
+  renderLabels(scale) {
+    const labels = [];
+    for (const l of this.labels) {
+      labels.push(
+        svg`<g transform="translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})">
+          <text x=${l.x} y=${l.y} class="label" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${l.text}
+          </text>
+          </g>`
+      );
+    }
+    return labels;
+  }
+  watchFace() {
+    const strokeWidth = 1;
+    return svg`
+      ${this.renderClipPath()}
+      ${this.renderClipPath(-40)}
+      <g clip-path="url(#frameClipPath)">
+        ${rect("frame-track", {
+      width: this.width,
+      height: this.trackHeight,
+      y: this.height / 2 - this.trackHeight,
+      strokeWidth,
+      strokeColor: "var(--instrument-frame-secondary-color)",
+      strokePosition: "inside",
+      fillColor: "var(--instrument-frame-secondary-color)",
+      borderRadius: 0
+    })}
+        ${rect("frame-ticks", {
+      width: this.width,
+      height: this.ticksHeight,
+      y: this.height / 2 - this.trackHeight - this.ticksHeight,
+      strokeWidth,
+      strokeColor: "var(--instrument-frame-primary-color)",
+      strokePosition: "inside",
+      fillColor: "var(--instrument-frame-primary-color)",
+      borderRadius: 0
+    })}
+      </g>
+      ${rect("frame-outline", {
+      width: this.width,
+      height: this.height,
+      strokeWidth,
+      strokeColor: "var(--instrument-frame-tertiary-color)",
+      strokePosition: "inside",
+      fillColor: "none",
+      borderRadius: this.borderRadius
+    })}
+    `;
+  }
+  render() {
+    const width = (this.width / 2 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;
+    const scale = this.clientWidth / width;
+    return html`
+      <svg
+        width="100%"
+        height="100%"
+        viewBox=${viewBox}
+        style="--scale: ${scale}"
+      >
+        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}
+
+        <g clip-path="url(#frameClipPath)">
+          ${this.tickmarks.map(
+      (t) => svg`
+            <g transform="translate(${-this.rotation * this.tickmarkSpacing}, 0)">
+              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}
+            </g>
+          `
+    )}
+        </g>
+
+        <g mask="url(#labelMask)">
+          ${this.renderLabels(scale)}
+      </svg>
+    `;
+  }
+};
+ObcWatchFlat.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "width", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "height", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "rotation", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "tickmarkSpacing", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "angleSetpoint", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatchFlat.prototype, "tickmarks", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatchFlat.prototype, "labels", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatchFlat.prototype, "FOVIndicator", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "trackHeight", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "ticksHeight", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "borderRadius", 2);
+ObcWatchFlat = __decorateClass([
+  customElement("obc-watch-flat")
+], ObcWatchFlat);
+export {
+  ObcWatchFlat
+};
+//# sourceMappingURL=watch-flat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"watch-flat.js","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"sourcesContent":["import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './watch-flat.css?inline';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat';\nimport {rect} from '../../svghelpers/rectangular';\nimport {Label} from '../compass-flat/compass-flat';\n\n@customElement('obc-watch-flat')\nexport class ObcWatchFlat extends LitElement {\n  @property({type: Number}) width = 352;\n  @property({type: Number}) height = 72;\n  @property({type: Number}) padding = 0;\n  @property({type: Number}) rotation = 0;\n  @property({type: Number}) tickmarkSpacing = 0;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) labels: Label[] = [];\n  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =\n    [];\n  @property({type: Number}) trackHeight = (2 / 3) * this.height;\n  @property({type: Number}) ticksHeight = this.height - this.trackHeight;\n  @property({type: Number}) borderRadius = 8;\n\n  private renderClipPath(offsetY: number = 0): SVGTemplateResult {\n    return svg`\n      <clipPath id=\"frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}\">\n        <rect x=\"${-this.width / 2}\" y=\"${-this.height / 2 + offsetY}\" \n              width=\"${this.width}\" height=\"${this.height}\" \n              rx=\"${this.borderRadius}\" />\n      </clipPath>\n    `;\n  }\n\n  private renderLabelMask(): SVGTemplateResult {\n    return svg`\n      <mask id=\"labelMask\">\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n               />\n        <linearGradient id=\"fadeGradient\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"${-this.width / 2}\" y1=\"0\" x2=\"${this.width / 2}\" y2=\"0\">\n          <stop offset=\"0%\" style=\"stop-color:black; stop-opacity:1;\" />\n          <stop offset=\"10%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"50%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"90%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"100%\" style=\"stop-color:black; stop-opacity:1;\" />\n        </linearGradient>\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n              fill=\"url(#fadeGradient)\" />\n      </mask>\n    `;\n  }\n\n  private renderLabels(scale: number): SVGTemplateResult[] {\n    const labels: SVGTemplateResult[] = [];\n\n    for (const l of this.labels) {\n      labels.push(\n        svg`<g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})\">\n          <text x=${l.x} y=${l.y} class=\"label\" fill=${'var(--instrument-tick-mark-secondary-color)'}>\n            ${l.text}\n          </text>\n          </g>`\n      );\n    }\n\n    return labels;\n  }\n\n  private watchFace(): SVGTemplateResult {\n    const strokeWidth = 1;\n\n    return svg`\n      ${this.renderClipPath()}\n      ${this.renderClipPath(-40)}\n      <g clip-path=\"url(#frameClipPath)\">\n        ${rect('frame-track', {\n          width: this.width,\n          height: this.trackHeight,\n          y: this.height / 2 - this.trackHeight,\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-secondary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-secondary-color)',\n          borderRadius: 0,\n        })}\n        ${rect('frame-ticks', {\n          width: this.width,\n          height: this.ticksHeight,\n          y: this.height / 2 - this.trackHeight - this.ticksHeight,\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-primary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-primary-color)',\n          borderRadius: 0,\n        })}\n      </g>\n      ${rect('frame-outline', {\n        width: this.width,\n        height: this.height,\n        strokeWidth: strokeWidth,\n        strokeColor: 'var(--instrument-frame-tertiary-color)',\n        strokePosition: 'inside',\n        fillColor: 'none',\n        borderRadius: this.borderRadius,\n      })}\n    `;\n  }\n\n  override render() {\n    const width = (this.width / 2 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;\n    const scale = this.clientWidth / width;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}\n\n        <g clip-path=\"url(#frameClipPath)\">\n          ${this.tickmarks.map(\n            (t) => svg`\n            <g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, 0)\">\n              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}\n            </g>\n          `\n          )}\n        </g>\n\n        <g mask=\"url(#labelMask)\">\n          ${this.renderLabels(scale)}\n      </svg>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch-flat': ObcWatchFlat;\n  }\n}\n"],"names":[],"mappings":"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"}