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

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%;
+}

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

@@ -1,35 +1,35 @@
-import type {Meta, StoryObj} from '@storybook/web-components';
-import {ObcCompassFlat} from './compass-flat';
-import './compass-flat';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
-import {LabelPosition} from './compass-flat';
-
-const meta: Meta<typeof ObcCompassFlat> = {
-  title: 'Navigation Instruments/Compass flat',
-  tags: ['autodocs'],
-  component: 'obc-compass-flat',
-  args: {
-    width: 512,
-    heading: 45,
-    courseOverGround: 50,
-    FOVIndicator: false,
-    minFOV: 90,
-  },
-  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<ObcCompassFlat>;
-
-export default meta;
-type Story = StoryObj<ObcCompassFlat>;
-
-export const Primary: Story = {};
-
-export const WithFOVIndicator: Story = {
-  args: {
-    FOVIndicator: true,
-  },
-};
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcCompassFlat} from './compass-flat';
+import './compass-flat';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {LabelPosition} from './compass-flat';
+
+const meta: Meta<typeof ObcCompassFlat> = {
+  title: 'Navigation Instruments/Compass flat',
+  tags: ['autodocs'],
+  component: 'obc-compass-flat',
+  args: {
+    width: 512,
+    heading: 45,
+    courseOverGround: 50,
+    FOVIndicator: false,
+    minFOV: 90,
+  },
+  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<ObcCompassFlat>;
+
+export default meta;
+type Story = StoryObj<ObcCompassFlat>;
+
+export const Primary: Story = {};
+
+export const WithFOVIndicator: Story = {
+  args: {
+    FOVIndicator: true,
+  },
+};