@oicl/openbridge-webcomponents 0.0.14 → 0.0.15-dev-20240814145458

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

@@ -1,26 +1,109 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcWatch} from './watch';
 import './watch';
-import {html} from 'lit';
+import {widthDecorator} from '../../storybook-util';
+import {AdviceState, AdviceType} from './advice';
+import {InstrumentState} from '../types';
 
 const meta: Meta<typeof ObcWatch> = {
   title: 'Building blocks/Watch',
   tags: ['autodocs'],
   component: 'obc-watch',
-  argTypes: {width: {control: {type: 'range', min: 32, max: 800, step: 10}}},
+  argTypes: {
+    width: {control: {type: 'range', min: 32, max: 800, step: 10}},
+    cutAngleStart: {control: {type: 'range', min: 0, max: 360, step: 1}},
+    cutAngleEnd: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
   args: {
     width: 400,
   },
-  render: (args) => {
-    return html`<div style="width: ${args.width}px; height: ${args.width}px">
-      <obc-watch ?hide-all-tickmarks=${args.hideAllTickmarks}></obc-watch>
-    </div>`;
-  },
+  decorators: [widthDecorator],
 } satisfies Meta<ObcWatch>;
 
 export default meta;
 type Story = StoryObj<ObcWatch>;
 
-export const Primary: Story = {
-  args: {},
+export const InCommand: Story = {
+  args: {
+    angleSetpoint: 90,
+    state: InstrumentState.inCommand,
+  },
+  argTypes: {
+    angleSetpoint: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
+};
+
+export const Active: Story = {
+  args: {
+    angleSetpoint: 90,
+    state: InstrumentState.active,
+  },
+  argTypes: {
+    angleSetpoint: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
+};
+
+export const CutRounded: Story = {
+  args: {
+    roundInsideCut: true,
+    roundOutsideCut: true,
+    cutAngleStart: 90,
+    cutAngleEnd: 270,
+  },
+};
+
+export const Cut: Story = {
+  args: {
+    roundInsideCut: false,
+    roundOutsideCut: false,
+    cutAngleStart: 90,
+    cutAngleEnd: 270,
+  },
+};
+
+export const Advice: Story = {
+  args: {
+    angleSetpoint: 90,
+    advices: [
+      {
+        minAngle: 20,
+        maxAngle: 50,
+        type: AdviceType.advice,
+        state: AdviceState.hinted,
+      },
+      {
+        minAngle: 60,
+        maxAngle: 100,
+        type: AdviceType.advice,
+        state: AdviceState.regular,
+      },
+      {
+        minAngle: 110,
+        maxAngle: 140,
+        type: AdviceType.advice,
+        state: AdviceState.triggered,
+      },
+      {
+        minAngle: 190,
+        maxAngle: 230,
+        type: AdviceType.caution,
+        state: AdviceState.hinted,
+      },
+      {
+        minAngle: 240,
+        maxAngle: 280,
+        type: AdviceType.caution,
+        state: AdviceState.regular,
+      },
+      {
+        minAngle: 290,
+        maxAngle: 320,
+        type: AdviceType.caution,
+        state: AdviceState.triggered,
+      },
+    ],
+  },
+  argTypes: {
+    angleSetpoint: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
 };

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

@@ -1,71 +1,58 @@
-import {LitElement, html, svg} from 'lit';
+import {
+  LitElement,
+  SVGTemplateResult,
+  html,
+  nothing,
+  svg,
+  unsafeCSS,
+} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {circle} from '../../svghelpers';
-
-enum TickmarkType {
-  primary = 'primary',
-  secondary = 'secondary',
-  tertiary = 'tertiary',
-}
-
-function tickmarks(
-  tickmarksDeg: number,
-  tickmarkSize: TickmarkType,
-  colorName: string
-) {
-  let innerRadius = 200 - 24;
-  let outerRadius = 200;
-  if (tickmarkSize === TickmarkType.primary) {
-    throw new Error('Primary tickmarks are not supported');
-  }
-  if (tickmarkSize === TickmarkType.secondary) {
-    innerRadius = 164.5;
-    outerRadius = 172.5;
-  } else if (tickmarkSize === TickmarkType.tertiary) {
-    throw new Error('Tertiary tickmarks are not supported');
-  }
-
-  let svgPath = '';
-  for (let i = 0; i < 360; i += tickmarksDeg) {
-    const angle = (i * Math.PI) / 180;
-    const x1 = Math.cos(angle) * innerRadius;
-    const y1 = Math.sin(angle) * innerRadius;
-    const x2 = Math.cos(angle) * outerRadius;
-    const y2 = Math.sin(angle) * outerRadius;
-    svgPath += `M ${x1} ${y1} L ${x2} ${y2} `;
-  }
-  return svg`<path d=${svgPath} stroke="var(--${colorName}" stroke-width="1" vector-effect="non-scaling-stroke"/>`;
-}
+import {roundedArch} from '../../svghelpers/roundedArch';
+import {InstrumentState} from '../types';
+import compentStyle from './watch.css?inline';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {AngleAdviceRaw, renderAdvice} from './advice';
+import {Tickmark, TickmarkStyle, tickmark} from './tickmark';
 
 @customElement('obc-watch')
 export class ObcWatch extends LitElement {
-  @property({type: Boolean, attribute: 'hide-all-tickmarks'}) hideAllTickmarks =
-    false;
-  @property({type: Boolean}) off = false;
+  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;
+  @property({type: Number}) angleSetpoint: number | undefined;
+  @property({type: Boolean}) atAngleSetpoint: boolean = false;
   @property({type: Number}) padding = 24;
+  @property({type: Number}) cutAngleStart: number | null = null;
+  @property({type: Number}) cutAngleEnd: number | null = null;
+  @property({type: Boolean}) roundOutsideCut = false;
+  @property({type: Boolean}) roundInsideCut = false;
+  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];
+  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];
 
-  override render() {
-    const width = (176 + this.padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+  // @ts-expect-error TS6133: The controller unsures that the render
+  // function is called on resize of the element
+  private _resizeController = new ResizeController(this, {});
 
-    return html`
-      <svg width="100%" height="100%" viewBox=${viewBox}>
+  private watchCircle(): SVGTemplateResult {
+    if (this.cutAngleStart === null || this.cutAngleEnd === null) {
+      return svg`
         <defs>
           <mask id="mask1" x="0" y="0" width="100%" height="100%">
             <rect x="-200" y="-200" width="400" height="400" fill="white" />
             <circle cx="0" cy="0" r="160" fill="black" />
           </mask>
         </defs>
-        ${this.off
-          ? null
-          : svg`
+        ${
+          this.state === InstrumentState.off
+            ? null
+            : svg`
         <circle
           cx="0"
           cy="0"
-          r="176"
+          r="184"
           fill="var(--instrument-frame-primary-color)"
           mask="url(#mask1)"
-        />`}
+        />`
+        }
         ${circle('innerRing', {
           radius: 320 / 2,
           strokeWidth: 1,
@@ -73,44 +60,107 @@ export class ObcWatch extends LitElement {
           strokePosition: 'center',
           fillColor: 'none',
         })}
-        ${this.off
-          ? null
-          : circle('outerRing', {
-              radius: 352 / 2,
-              strokeWidth: 1,
-              strokeColor: 'var(--instrument-frame-tertiary-color)',
-              strokePosition: 'center',
-              fillColor: 'none',
-            })}
-        ${this.hideAllTickmarks
-          ? null
-          : tickmarks(
-              90,
-              TickmarkType.secondary,
-              'instrument-frame-tertiary-color'
-            )}
-        ${this.hideAllTickmarks
-          ? null
-          : svg`
-        <line
-          x2="0"
-          x1="0"
-          y2="-160"
-          y1="-176"
-          stroke="var(--instrument-frame-tertiary-color)"
-          vector-effect="non-scaling-stroke"
-        />
-        <line
-          x2="0"
-          x1="0"
-          y2="160"
-          y1="176"
-          stroke="var(--instrument-frame-tertiary-color)"
-          vector-effect="non-scaling-stroke"
-        />`}
+        ${
+          this.state === InstrumentState.off
+            ? null
+            : circle('outerRing', {
+                radius: 368 / 2,
+                strokeWidth: 1,
+                strokeColor: 'var(--instrument-frame-tertiary-color)',
+                strokePosition: 'center',
+                fillColor: 'none',
+              })
+        }
+    `;
+    } else {
+      const R = 184;
+      const r = 160;
+      const svgPath = roundedArch({
+        startAngle: this.cutAngleStart,
+        endAngle: this.cutAngleEnd,
+        R,
+        r,
+        roundOutsideCut: this.roundOutsideCut,
+        roundInsideCut: this.roundInsideCut,
+      });
+      return svg`
+        <path d=${svgPath} fill="var(--instrument-frame-primary-color)" 
+        stroke="var(--instrument-frame-tertiary-color)"
+          vector-effect="non-scaling-stroke"/>
+      `;
+    }
+  }
+
+  override render() {
+    const width = (176 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const angleSetpoint = this.renderSetpoint();
+    const scale = this.clientWidth / width;
+    const tickmarks = this.tickmarks.map((t) =>
+      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
+    );
+    const advices = this.advices
+      ? this.advices.map((a) => renderAdvice(a))
+      : nothing;
+    return html`
+      <svg
+        width="100%"
+        height="100%"
+        viewBox=${viewBox}
+        style="--scale: ${scale}"
+      >
+        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}
       </svg>
     `;
   }
+
+  private renderSetpoint(): SVGTemplateResult | typeof nothing {
+    let setPointColor = 'var(--instrument-enhanced-primary-color)';
+    if (this.atAngleSetpoint) {
+      setPointColor = 'var(--instrument-enhanced-secondary-color)';
+    }
+    if (this.state === InstrumentState.active) {
+      setPointColor = 'var(--instrument-regular-primary-color)';
+      if (this.atAngleSetpoint) {
+        setPointColor = 'var(--instrument-regular-secondary-color)';
+      }
+    } else if (this.state === InstrumentState.loading) {
+      setPointColor = 'var(--instrument-frame-tertiary-color)';
+    } else if (this.state === InstrumentState.off) {
+      setPointColor = 'var(--instrument-frame-tertiary-color)';
+    }
+
+    if (this.angleSetpoint === undefined) {
+      return nothing;
+    } else {
+      let path;
+      if (this.state === InstrumentState.inCommand) {
+        path =
+          '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';
+      } else {
+        path =
+          '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';
+      }
+      return svg`
+        <defs>
+          <g id="setpoint">
+            <path fill-rule="evenodd" clip-rule="evenodd" transform="translate(-24 12) rotate(-90)" d=${path} vector-effect="non-scaling-stroke"/>
+          </g>
+          <mask id="setpointMask">
+            <rect x="-20" y="-20" width="50" height="50" fill="white" />
+            <use href="#setpoint" fill="black" />
+          </mask>
+        </defs>
+        <g transform="rotate(${this.angleSetpoint + 90}) translate(-168 0) ">
+          <use href="#setpoint" fill=${setPointColor} stroke-width="0" />
+          
+          <use href="#setpoint" vector-effect="non-scaling-stroke" fill="none" stroke="var(--border-silhouette-color)" stroke-width="2" stroke-linejoin="round" mask="url(#setpointMask)" />
+        </g>
+      `;
+    }
+  }
+
+  static override styles = unsafeCSS(compentStyle);
 }
 
 declare global {

package/src/storybook-util.ts

@@ -87,3 +87,42 @@ export function crossDecorator(story: () => unknown): HTMLTemplateResult {
     </style>
     <div class="wrapper">${story()}</div>`;
 }
+
+export function widthDecorator(
+  story: () => unknown,
+  context: {args: {width: number}}
+): HTMLTemplateResult {
+  return html` <div
+    class="wrapper"
+    style="width: ${context.args.width}px; height: ${context.args.width}px"
+  >
+    ${story()}
+  </div>`;
+}
+
+export function beta6Decorator(story: () => unknown): HTMLTemplateResult {
+  return html`
+    <div
+      style="
+  border-radius: 100px; 
+  background-color: var(--instrument-enhanced-primary-color); 
+  color: var(--instrument-frame-primary-color); 
+  height: 32px; 
+  padding: 0 24px; 
+  box-sizing: border-box; 
+  width: fit-content; 
+  display: grid; 
+  place-content: center;
+  font-family: 'Noto Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 570;
+  line-height: 24px; /* 150% */
+  margin-bottom: 64px;
+"
+    >
+      Beta 6.0
+    </div>
+    ${story()}
+  `;
+}

package/src/svghelpers/roundedArch.ts

@@ -0,0 +1,77 @@
+export function roundedArch({
+  startAngle,
+  endAngle,
+  r,
+  R,
+  roundOutsideCut,
+  roundInsideCut,
+}: {
+  startAngle: number;
+  R: number;
+  r: number;
+  endAngle: number;
+  roundOutsideCut: boolean;
+  roundInsideCut: boolean;
+}) {
+  const a1 = (startAngle * Math.PI) / 180;
+  const a2 = (endAngle * Math.PI) / 180;
+
+  const X1 = Math.sin(a1) * R;
+  const Y1 = -Math.cos(a1) * R;
+  const x1 = Math.sin(a1) * r;
+  const y1 = -Math.cos(a1) * r;
+  const X2 = Math.sin(a2) * R;
+  const Y2 = -Math.cos(a2) * R;
+  const x2 = Math.sin(a2) * r;
+  const y2 = -Math.cos(a2) * r;
+  const roundRadius = 8;
+
+  let svgPath = '';
+  if (roundOutsideCut) {
+    const roundDeltaAngle = Math.asin(roundRadius / R);
+    const largeArcFlag =
+      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;
+    const x1i = Math.sin(a1) * (R - roundRadius);
+    const y1i = -Math.cos(a1) * (R - roundRadius);
+    const x1o = Math.sin(a1 + roundDeltaAngle) * R;
+    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;
+    const x2i = Math.sin(a2) * (R - roundRadius);
+    const y2i = -Math.cos(a2) * (R - roundRadius);
+    const x2o = Math.sin(a2 - roundDeltaAngle) * R;
+    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;
+    // Rounded start
+    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;
+    // Arch
+    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;
+    // Rounded end
+    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;
+  } else {
+    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;
+    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;
+  }
+
+  if (roundInsideCut) {
+    const roundDeltaAngle = Math.asin(roundRadius / r);
+    const largeArcFlag =
+      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;
+    const x1i = Math.sin(a1) * (r + roundRadius);
+    const y1i = -Math.cos(a1) * (r + roundRadius);
+    const x1o = Math.sin(a1 + roundDeltaAngle) * r;
+    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;
+    const x2i = Math.sin(a2) * (r + roundRadius);
+    const y2i = -Math.cos(a2) * (r + roundRadius);
+    const x2o = Math.sin(a2 - roundDeltaAngle) * r;
+    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;
+    // Rounded start
+    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;
+    // Arch
+    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;
+    // Rounded end
+    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;
+  } else {
+    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;
+    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;
+  }
+  svgPath += `Z`;
+  return svgPath;
+}