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

package/dist/svghelpers/rectangular.d.ts

@@ -6,5 +6,6 @@ export declare function rect(id: string, data: {
     fillColor: string;
     borderRadius: number;
     strokePosition: 'inside' | 'outside';
+    y?: number;
 }): import("lit-html").TemplateResult<2> | null;
 //# sourceMappingURL=rectangular.d.ts.map

package/dist/svghelpers/rectangular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rectangular.d.ts","sourceRoot":"","sources":["../../src/svghelpers/rectangular.ts"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAClB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;CACtC,+CA0BF"}
+{"version":3,"file":"rectangular.d.ts","sourceRoot":"","sources":["../../src/svghelpers/rectangular.ts"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAClB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,+CA4BF"}

package/dist/svghelpers/rectangular.js

@@ -1,13 +1,14 @@
 import { svg } from "lit";
 function rect(id, data) {
+  const yPosition = data.y !== void 0 ? data.y : -data.height / 2;
   if (data.strokePosition === "inside") {
     return svg`
 		<defs>
 			<clipPath id="clip${id}">
-				<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" />
+				<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" />
 			</clipPath>
 		</defs>
-		<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor}  stroke-width=${data.strokeWidth * 2} fill=${data.fillColor} clip-path="url(#clip${id})"/>
+		<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor}  stroke-width=${data.strokeWidth * 2} fill=${data.fillColor} clip-path="url(#clip${id})"/> 
 		  `;
   } else {
     return null;

package/dist/svghelpers/rectangular.js.map

@@ -1 +1 @@
-{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function rect(\n  id: string,\n  data: {\n    width: number;\n    height: number;\n    strokeWidth: number;\n    strokeColor: string;\n    fillColor: string;\n    borderRadius: number;\n    strokePosition: 'inside' | 'outside';\n  }\n) {\n  if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${\n          data.width\n        } height=${data.height} rx=${\n          data.borderRadius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${\n      data.width\n    } height=${data.height} rx=${\n      data.borderRadius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    }  stroke-width=${data.strokeWidth * 2} fill=${\n      data.fillColor\n    } clip-path=\"url(#clip${id})\"/>\n\t\t  `;\n  } else {\n    return null;\n  }\n}\n"],"names":[],"mappings":";AAEgB,SAAA,KACd,IACA,MASA;AACI,MAAA,KAAK,mBAAmB,UAAU;AAC7B,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,eACV,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,UAClD,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP;AAAA;AAAA;AAAA,aAGK,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,UACpD,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA,EAAA,OAErB;AACE,WAAA;AAAA,EACT;AACF;"}
+{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function rect(\n  id: string,\n  data: {\n    width: number;\n    height: number;\n    strokeWidth: number;\n    strokeColor: string;\n    fillColor: string;\n    borderRadius: number;\n    strokePosition: 'inside' | 'outside';\n    y?: number;\n  }\n) {\n  const yPosition = data.y !== undefined ? data.y : -data.height / 2;\n\n  if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\n          data.width\n        } height=${data.height} rx=${\n          data.borderRadius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\n      data.width\n    } height=${data.height} rx=${\n      data.borderRadius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    }  stroke-width=${data.strokeWidth * 2} fill=${\n      data.fillColor\n    } clip-path=\"url(#clip${id})\"/> \n\t\t  `;\n  } else {\n    return null;\n  }\n}\n"],"names":[],"mappings":";AAEgB,SAAA,KACd,IACA,MAUA;AACM,QAAA,YAAY,KAAK,MAAM,SAAY,KAAK,IAAI,CAAC,KAAK,SAAS;AAE7D,MAAA,KAAK,mBAAmB,UAAU;AAC7B,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,eACV,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,SAAS,UAC3C,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP;AAAA;AAAA;AAAA,aAGK,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,SAAS,UAC7C,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA,EAAA,OAErB;AACE,WAAA;AAAA,EACT;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20240916083108",
+  "version": "0.0.15-dev-20240923184809",
   "type": "module",
   "repository": {
     "type": "git",
@@ -35,23 +35,28 @@
     "lit": "^3.1.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.7.0",
     "@custom-elements-manifest/analyzer": "^0.9.0",
     "@lit-labs/cli": "^0.6.4",
     "@lit-labs/gen-wrapper-react": "^0.3.2",
     "@lit-labs/gen-wrapper-vue": "^0.3.3",
     "@open-wc/lit-helpers": "^0.7.0",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-storysource": "^8.1.11",
-    "@storybook/addon-themes": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/test": "^8.1.11",
+    "@playwright/test": "^1.46.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.17.0",
-    "@storybook/web-components": "^8.1.11",
-    "@storybook/web-components-vite": "^8.1.11",
+    "@storybook/theming": "^8.2.9",
+    "@storybook/web-components": "^8.2.9",
+    "@storybook/web-components-vite": "^8.2.9",
     "@topcli/prompts": "^1.8.0",
     "@types/jest-image-snapshot": "^6",
+    "@types/node": "^22.4.1",
     "concurrently": "^8.2.2",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
@@ -67,7 +72,7 @@
     "prettier": "^3.1.1",
     "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.9",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vite": "^5.2.7",

package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts

@@ -130,6 +130,7 @@ export class ObcAzimuthThruster extends LitElement {
           advices: this.thrustAdvices,
           topPropeller: this.topPropeller,
           bottomPropeller: this.bottomPropeller,
+          narrow: true,
         })}
         </svg>
         </g>

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

@@ -0,0 +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];
+}

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

@@ -0,0 +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: {},
+};

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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +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;
+}

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

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

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

@@ -0,0 +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,
+  },
+};