@oicl/openbridge-webcomponents 0.0.15-dev-20240923191659 → 0.0.15-dev-20240923194534

package/src/navigation-instruments/compass/arrow.ts

@@ -1,61 +1,61 @@
-import {SVGTemplateResult, svg} from 'lit';
-
-export enum ArrowStyle {
-  HDG = 'HDG',
-  COG = 'COG',
-}
-
-export function arrow(
-  style: ArrowStyle,
-  angle: number
-): SVGTemplateResult | SVGTemplateResult[] {
-  const colorName = 'var(--instrument-enhanced-secondary-color)';
-
-  if (style === ArrowStyle.HDG) {
-    return svg`
-      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
-        <rect x="28" y="118" width="8" height="139" rx="4" fill="${colorName}" />
-        <rect x="30.0039" y="256" width="4" height="156" rx="2" fill="${colorName}" />
-        <circle cx="32" cy="256" r="8" fill="${colorName}" />
-        <mask
-          id="mask0_262_65165"
-          style="mask-type:luminance"
-          maskUnits="userSpaceOnUse"
-          x="8"
-          y="94"
-          width="48"
-          height="50"
-        >
-          <path
-            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
-            fill="white"
-            stroke="black"
-          />
-        </mask>
-        <g mask="url(#mask0_262_65165)">
-          <path
-            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
-            fill="${colorName}"
-          />
-        </g>
-      </g>
-    `;
-  } else if (style === ArrowStyle.COG) {
-    return svg`
-      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z"
-          fill="${colorName}"
-        />
-        <rect x="30" y="133" width="4" height="124" rx="2" fill="${colorName}" />
-        <circle cx="32" cy="256" r="4" fill="${colorName}" />
-      </g>
-    `;
-  } else {
-    return [];
-  }
-
-  // return [...shaft, circle, arrowTip];
-}
+import {SVGTemplateResult, svg} from 'lit';
+
+export enum ArrowStyle {
+  HDG = 'HDG',
+  COG = 'COG',
+}
+
+export function arrow(
+  style: ArrowStyle,
+  angle: number
+): SVGTemplateResult | SVGTemplateResult[] {
+  const colorName = 'var(--instrument-enhanced-secondary-color)';
+
+  if (style === ArrowStyle.HDG) {
+    return svg`
+      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
+        <rect x="28" y="118" width="8" height="139" rx="4" fill="${colorName}" />
+        <rect x="30.0039" y="256" width="4" height="156" rx="2" fill="${colorName}" />
+        <circle cx="32" cy="256" r="8" fill="${colorName}" />
+        <mask
+          id="mask0_262_65165"
+          style="mask-type:luminance"
+          maskUnits="userSpaceOnUse"
+          x="8"
+          y="94"
+          width="48"
+          height="50"
+        >
+          <path
+            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
+            fill="white"
+            stroke="black"
+          />
+        </mask>
+        <g mask="url(#mask0_262_65165)">
+          <path
+            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
+            fill="${colorName}"
+          />
+        </g>
+      </g>
+    `;
+  } else if (style === ArrowStyle.COG) {
+    return svg`
+      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z"
+          fill="${colorName}"
+        />
+        <rect x="30" y="133" width="4" height="124" rx="2" fill="${colorName}" />
+        <circle cx="32" cy="256" r="4" fill="${colorName}" />
+      </g>
+    `;
+  } else {
+    return [];
+  }
+
+  // return [...shaft, circle, arrowTip];
+}

package/src/navigation-instruments/compass/compass.stories.ts

@@ -1,37 +1,37 @@
-import type {Meta, StoryObj} from '@storybook/web-components';
-import {ObcCompass} from './compass';
-import './compass';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
-import {AdviceType} from '../watch/advice';
-
-const meta: Meta<typeof ObcCompass> = {
-  title: 'Navigation Instruments/Compass',
-  tags: ['autodocs'],
-  component: 'obc-compass',
-  args: {
-    width: 512,
-    heading: 311,
-    courseOverGround: 338,
-    headingAdvices: [
-      {
-        minAngle: 20,
-        maxAngle: 50,
-        type: AdviceType.advice,
-        hinted: false,
-      },
-    ],
-  },
-  argTypes: {
-    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
-    heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
-    courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
-  },
-  decorators: [widthDecorator, beta6Decorator],
-} satisfies Meta<ObcCompass>;
-
-export default meta;
-type Story = StoryObj<ObcCompass>;
-
-export const Primary: Story = {
-  args: {},
-};
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcCompass} from './compass';
+import './compass';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {AdviceType} from '../watch/advice';
+
+const meta: Meta<typeof ObcCompass> = {
+  title: 'Navigation Instruments/Compass',
+  tags: ['autodocs'],
+  component: 'obc-compass',
+  args: {
+    width: 512,
+    heading: 311,
+    courseOverGround: 338,
+    headingAdvices: [
+      {
+        minAngle: 20,
+        maxAngle: 50,
+        type: AdviceType.advice,
+        hinted: false,
+      },
+    ],
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
+    courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
+  decorators: [widthDecorator, beta6Decorator],
+} satisfies Meta<ObcCompass>;
+
+export default meta;
+type Story = StoryObj<ObcCompass>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/navigation-instruments/compass/compass.ts

@@ -1,132 +1,132 @@
-import {LitElement, css, html} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-import '../watch/watch';
-import {Tickmark, TickmarkType} from '../watch/tickmark';
-import {arrow, ArrowStyle} from './arrow';
-import {
-  AdviceState,
-  AdviceType,
-  AngleAdvice,
-  AngleAdviceRaw,
-} from '../watch/advice';
-import {radialTickmarks} from './radial-tickmark';
-
-@customElement('obc-compass')
-export class ObcCompass extends LitElement {
-  @property({type: Number}) heading = 0;
-  @property({type: Number}) courseOverGround = 0;
-  @property({type: Number}) padding = 48;
-  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
-  @property({type: Number}) containerWidth = 0;
-
-  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      this.containerWidth = entry.contentRect.width;
-      this.adjustPadding();
-    }
-  });
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.resizeObserver.observe(this);
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.resizeObserver.unobserve(this);
-  }
-
-  private adjustPadding() {
-    const deltaWidth = 512 - this.containerWidth;
-    const steps = deltaWidth / 128;
-    let deltaPadding = 0;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
-    }
-
-    this.padding = 72 + deltaPadding;
-  }
-
-  private get angleAdviceRaw(): AngleAdviceRaw[] {
-    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {
-      const state =
-        this.heading >= minAngle && this.heading <= maxAngle
-          ? AdviceState.triggered
-          : hinted
-            ? AdviceState.hinted
-            : AdviceState.regular;
-      return {minAngle, maxAngle, type, state};
-    });
-  }
-
-  override render() {
-    const tickmarks: Tickmark[] = [
-      {angle: 0, type: TickmarkType.main},
-      {angle: 90, type: TickmarkType.main},
-      {angle: 180, type: TickmarkType.main},
-      {angle: 270, type: TickmarkType.main},
-    ];
-
-    const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>
-      radialTickmarks(
-        minAngle,
-        maxAngle,
-        type === AdviceType.caution ? TickmarkType.secondary : undefined
-      )
-    );
-
-    const width = (176 + this.padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
-
-    return html`
-      <div class="container">
-        <obc-watch
-          .padding=${this.padding}
-          .advices=${this.angleAdviceRaw}
-          .tickmarks=${tickmarks}
-          .labelFrameEnabled=${true}
-          .crosshairEnabled=${true}
-        >
-        </obc-watch>
-        <svg viewBox="${viewBox}">
-          ${rt} ${arrow(ArrowStyle.HDG, this.heading)}
-          ${arrow(ArrowStyle.COG, this.courseOverGround)}
-        </svg>
-      </div>
-    `;
-  }
-
-  static override styles = css`
-    * {
-      box-sizing: border-box;
-    }
-
-    .container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    .container > * {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'obc-compass': ObcCompass;
-  }
-}
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import '../watch/watch';
+import {Tickmark, TickmarkType} from '../watch/tickmark';
+import {arrow, ArrowStyle} from './arrow';
+import {
+  AdviceState,
+  AdviceType,
+  AngleAdvice,
+  AngleAdviceRaw,
+} from '../watch/advice';
+import {radialTickmarks} from './radial-tickmark';
+
+@customElement('obc-compass')
+export class ObcCompass extends LitElement {
+  @property({type: Number}) heading = 0;
+  @property({type: Number}) courseOverGround = 0;
+  @property({type: Number}) padding = 48;
+  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
+  @property({type: Number}) containerWidth = 0;
+
+  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      this.containerWidth = entry.contentRect.width;
+      this.adjustPadding();
+    }
+  });
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  private adjustPadding() {
+    const deltaWidth = 512 - this.containerWidth;
+    const steps = deltaWidth / 128;
+    let deltaPadding = 0;
+    if (deltaWidth > 0) {
+      deltaPadding = steps * 48;
+    } else {
+      deltaPadding = steps * 6;
+    }
+
+    this.padding = 72 + deltaPadding;
+  }
+
+  private get angleAdviceRaw(): AngleAdviceRaw[] {
+    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {
+      const state =
+        this.heading >= minAngle && this.heading <= maxAngle
+          ? AdviceState.triggered
+          : hinted
+            ? AdviceState.hinted
+            : AdviceState.regular;
+      return {minAngle, maxAngle, type, state};
+    });
+  }
+
+  override render() {
+    const tickmarks: Tickmark[] = [
+      {angle: 0, type: TickmarkType.main},
+      {angle: 90, type: TickmarkType.main},
+      {angle: 180, type: TickmarkType.main},
+      {angle: 270, type: TickmarkType.main},
+    ];
+
+    const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>
+      radialTickmarks(
+        minAngle,
+        maxAngle,
+        type === AdviceType.caution ? TickmarkType.secondary : undefined
+      )
+    );
+
+    const width = (176 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+
+    return html`
+      <div class="container">
+        <obc-watch
+          .padding=${this.padding}
+          .advices=${this.angleAdviceRaw}
+          .tickmarks=${tickmarks}
+          .labelFrameEnabled=${true}
+          .crosshairEnabled=${true}
+        >
+        </obc-watch>
+        <svg viewBox="${viewBox}">
+          ${rt} ${arrow(ArrowStyle.HDG, this.heading)}
+          ${arrow(ArrowStyle.COG, this.courseOverGround)}
+        </svg>
+      </div>
+    `;
+  }
+
+  static override styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-compass': ObcCompass;
+  }
+}

package/src/navigation-instruments/compass/radial-tickmark.ts

@@ -1,77 +1,77 @@
-import {SVGTemplateResult, svg} from 'lit';
-import {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';
-
-export function radialTickmarks(
-  minAngle: number,
-  maxAngle: number,
-  type: TickmarkType | undefined
-): SVGTemplateResult[] {
-  if (type === TickmarkType.main || type === TickmarkType.tertiary) {
-    throw new Error(
-      'Only secondary tickmarks or undefined tickmarks (dots) are supported'
-    );
-  }
-
-  const origin = {x: 0, y: 0};
-  const radius = 320 / 2;
-  const strokeWidth = '1.2';
-  const margin = 1.5;
-  const colorName = tickmarkColor(TickmarkStyle.hinted);
-  const tickWidth = type === TickmarkType.secondary ? 4 : 1;
-  const tickmarks: SVGTemplateResult[] = [];
-
-  const sinMin = Math.sin((minAngle * Math.PI) / 180);
-  const cosMin = Math.cos((minAngle * Math.PI) / 180);
-  const sinMax = Math.sin((maxAngle * Math.PI) / 180);
-  const cosMax = Math.cos((maxAngle * Math.PI) / 180);
-
-  const deltaIncrement = tickWidth * margin;
-
-  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {
-    const xMin = origin.x + sinMin * deltaR;
-    const yMin = origin.y - cosMin * deltaR;
-    const xMax = origin.x + sinMax * deltaR;
-    const yMax = origin.y - cosMax * deltaR;
-
-    if (type === undefined) {
-      const size = 1;
-      tickmarks.push(
-        svg`<rect 
-          x=${xMin - size / 2} 
-          y=${yMin - size / 2} 
-          width=${size} 
-          height=${size} 
-          fill=${colorName} 
-          transform="rotate(${minAngle} ${xMin} ${yMin})" 
-          vector-effect="non-scaling-stroke"/>`
-      );
-      tickmarks.push(
-        svg`<rect 
-          x=${xMax - size / 2} 
-          y=${yMax - size / 2} 
-          width=${size} 
-          height=${size} 
-          fill=${colorName} 
-          transform="rotate(${maxAngle} ${xMax} ${yMax})" 
-          vector-effect="non-scaling-stroke"/>`
-      );
-    } else {
-      const currentRadius = Math.min(deltaR + tickWidth, radius);
-      const x2Min = origin.x + sinMin * currentRadius;
-      const y2Min = origin.y - cosMin * currentRadius;
-      const x2Max = origin.x + sinMax * currentRadius;
-      const y2Max = origin.y - cosMax * currentRadius;
-
-      tickmarks.push(
-        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
-      );
-      tickmarks.push(
-        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
-      );
-
-      if (currentRadius >= radius) break;
-    }
-  }
-
-  return tickmarks;
-}
+import {SVGTemplateResult, svg} from 'lit';
+import {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';
+
+export function radialTickmarks(
+  minAngle: number,
+  maxAngle: number,
+  type: TickmarkType | undefined
+): SVGTemplateResult[] {
+  if (type === TickmarkType.main || type === TickmarkType.tertiary) {
+    throw new Error(
+      'Only secondary tickmarks or undefined tickmarks (dots) are supported'
+    );
+  }
+
+  const origin = {x: 0, y: 0};
+  const radius = 320 / 2;
+  const strokeWidth = '1.2';
+  const margin = 1.5;
+  const colorName = tickmarkColor(TickmarkStyle.hinted);
+  const tickWidth = type === TickmarkType.secondary ? 4 : 1;
+  const tickmarks: SVGTemplateResult[] = [];
+
+  const sinMin = Math.sin((minAngle * Math.PI) / 180);
+  const cosMin = Math.cos((minAngle * Math.PI) / 180);
+  const sinMax = Math.sin((maxAngle * Math.PI) / 180);
+  const cosMax = Math.cos((maxAngle * Math.PI) / 180);
+
+  const deltaIncrement = tickWidth * margin;
+
+  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {
+    const xMin = origin.x + sinMin * deltaR;
+    const yMin = origin.y - cosMin * deltaR;
+    const xMax = origin.x + sinMax * deltaR;
+    const yMax = origin.y - cosMax * deltaR;
+
+    if (type === undefined) {
+      const size = 1;
+      tickmarks.push(
+        svg`<rect 
+          x=${xMin - size / 2} 
+          y=${yMin - size / 2} 
+          width=${size} 
+          height=${size} 
+          fill=${colorName} 
+          transform="rotate(${minAngle} ${xMin} ${yMin})" 
+          vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<rect 
+          x=${xMax - size / 2} 
+          y=${yMax - size / 2} 
+          width=${size} 
+          height=${size} 
+          fill=${colorName} 
+          transform="rotate(${maxAngle} ${xMax} ${yMax})" 
+          vector-effect="non-scaling-stroke"/>`
+      );
+    } else {
+      const currentRadius = Math.min(deltaR + tickWidth, radius);
+      const x2Min = origin.x + sinMin * currentRadius;
+      const y2Min = origin.y - cosMin * currentRadius;
+      const x2Max = origin.x + sinMax * currentRadius;
+      const y2Max = origin.y - cosMax * currentRadius;
+
+      tickmarks.push(
+        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
+      );
+
+      if (currentRadius >= radius) break;
+    }
+  }
+
+  return tickmarks;
+}

package/src/navigation-instruments/compass-flat/compass-flat.css

@@ -1,23 +1,23 @@
-* {
-  box-sizing: border-box;
-}
-
-.container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.container > * {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.container > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}