@oicl/openbridge-webcomponents 0.0.14 → 0.0.15

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

@@ -0,0 +1,120 @@
+import {SVGTemplateResult, nothing, svg} from 'lit';
+import {TickmarkStyle, TickmarkType, tickmark} from './tickmark';
+
+export enum AdviceType {
+  advice = 'advice',
+  caution = 'caution',
+}
+
+export enum AdviceState {
+  regular = 'regular',
+  hinted = 'hinted',
+  triggered = 'triggered',
+}
+
+export interface AngleAdviceRaw {
+  minAngle: number;
+  maxAngle: number;
+  type: AdviceType;
+  state: AdviceState;
+}
+
+export interface AngleAdvice {
+  minAngle: number;
+  maxAngle: number;
+  type: AdviceType;
+  hinted: boolean;
+}
+
+const margin = (344 - 328) / 2 + 8;
+const deltaAngle = Math.atan2(margin, (344 + 328) / 2);
+
+function adviceMask(
+  minAngle: number,
+  maxAngle: number,
+  fill: string,
+  stroke: string
+): SVGTemplateResult {
+  const radl = (minAngle * Math.PI) / 180 + deltaAngle;
+  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;
+  const r1 = 328 / 2;
+  const r2 = 344 / 2;
+  const R = (r2 - r1) / 2;
+  const x1l = Math.sin(radl) * r1;
+  const y1l = -Math.cos(radl) * r1;
+  const x2l = Math.sin(radl) * r2;
+  const y2l = -Math.cos(radl) * r2;
+
+  const x1h = Math.sin(radh) * r1;
+  const y1h = -Math.cos(radh) * r1;
+  const x2h = Math.sin(radh) * r2;
+  const y2h = -Math.cos(radh) * r2;
+
+  const path = `M ${x1l} ${y1l} 
+                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}
+                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}
+                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}
+                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}
+                    Z`;
+  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
+}
+
+export function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {
+  if (advice.type === AdviceType.caution) {
+    let mainColor;
+    let fillColor: string | null = null;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-tick-mark-tertiary-color)';
+    } else {
+      mainColor = 'var(--on-caution-active-color)';
+      fillColor = 'var(--alert-caution-color)';
+    }
+    const radialPattern = [];
+    for (let i = 0; i < 180; i += 4) {
+      radialPattern.push(svg`<g transform="rotate(${i}) translate(-256 -256) ">
+            <path d="M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z" fill=${mainColor}/>
+            </g>
+            `);
+    }
+    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;
+    let tickmarkStyle = TickmarkStyle.hinted;
+    if (advice.state === AdviceState.regular) {
+      tickmarkStyle = TickmarkStyle.regular;
+    } else if (advice.state === AdviceState.triggered) {
+      tickmarkStyle = TickmarkStyle.enhanced;
+    }
+
+    return svg`
+            <mask id=${maskId}>
+                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}
+            </mask>
+            <g mask="url(#${maskId})">
+                ${fillColor ? svg`<rect x="-256" y="-256" width="512" height="512" fill="${fillColor}"/>` : nothing}
+                ${radialPattern}
+            </g>
+            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}
+            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
+            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
+        `;
+  } else {
+    let mainColor;
+    let tickmarkStyle;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+      tickmarkStyle = TickmarkStyle.hinted;
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-regular-secondary-color)';
+      tickmarkStyle = TickmarkStyle.regular;
+    } else {
+      mainColor = 'var(--instrument-enhanced-secondary-color)';
+      tickmarkStyle = TickmarkStyle.regular;
+    }
+    return svg`
+            ${adviceMask(advice.minAngle, advice.maxAngle, mainColor, mainColor)}
+            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
+            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
+        `;
+  }
+}

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

@@ -0,0 +1,68 @@
+import {SVGTemplateResult, svg} from 'lit';
+
+export interface Tickmark {
+  angle: number;
+  type: TickmarkType;
+  text?: string;
+}
+
+export enum TickmarkType {
+  main = 'main',
+  primary = 'primary',
+  secondary = 'secondary',
+  tertiary = 'tertiary',
+}
+
+export enum TickmarkStyle {
+  hinted = 'hinted',
+  regular = 'regular',
+  enhanced = 'enhanced',
+}
+
+export function tickmarkColor(style: TickmarkStyle): string {
+  if (style === TickmarkStyle.hinted) {
+    return 'var(--instrument-frame-tertiary-color)';
+  } else if (style === TickmarkStyle.regular) {
+    return 'var(--instrument-tick-mark-tertiary-color)';
+  } else {
+    return 'var(--instrument-tick-mark-primary-color)';
+  }
+}
+
+export function tickmark(
+  angle: number,
+  tickmarkSize: TickmarkType,
+  style: TickmarkStyle,
+  scale: number,
+  text?: string
+): SVGTemplateResult | SVGTemplateResult[] {
+  let innerRadius: number = 328 / 2;
+  let outerRadius: number = 368 / 2;
+  const textRadius = outerRadius + 18 / scale;
+  if (tickmarkSize === TickmarkType.secondary) {
+    innerRadius = 164.5;
+    outerRadius = 172.5;
+  } else if (tickmarkSize === TickmarkType.main) {
+    innerRadius = 320 / 2;
+    outerRadius = 368 / 2;
+  } else if (tickmarkSize === TickmarkType.tertiary) {
+    throw new Error('Tertiary tickmarks are not supported');
+  }
+  const colorName = tickmarkColor(style);
+
+  const rad = (angle * Math.PI) / 180;
+  const x1 = Math.sin(rad) * innerRadius;
+  const y1 = -Math.cos(rad) * innerRadius;
+  const x2 = Math.sin(rad) * outerRadius;
+  const y2 = -Math.cos(rad) * outerRadius;
+  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+  if (text) {
+    const textX = Math.sin(rad) * textRadius;
+    const textY = -Math.cos(rad) * textRadius;
+    return [
+      tick,
+      svg`<text x=${textX} y=${textY} class="label">${text}</text>`,
+    ];
+  }
+  return tick;
+}

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

@@ -0,0 +1,11 @@
+* {
+    box-sizing: border-box;
+}
+
+.label {
+    @mixin font-body;
+    font-size: calc(16px / var(--scale));
+    fill: var(--element-neutral-color);
+    alignment-baseline: middle;
+    text-anchor: middle;
+}

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