@oicl/openbridge-webcomponents 0.0.15-dev-20241203183951 → 0.0.15-dev-20241203184948

package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.stories.ts

@@ -5,7 +5,7 @@ import {POIStyle} from './poi-config';
 
 const meta: Meta<typeof ObcPoiGraphicLine> = {
   title: 'Building blocks/POI Graphic Line',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs'],
   component: 'obc-poi-graphic-line',
   argTypes: {
     lineStyle: {
@@ -15,13 +15,12 @@ const meta: Meta<typeof ObcPoiGraphicLine> = {
       },
     },
 
-    height: {control: {type: 'range', min: 32, max: 192, step: 2}},
+    lineHeight: {control: {type: 'range', min: 32, max: 192, step: 2}},
   },
   args: {
-    height: 100,
+    lineHeight: 96,
     lineStyle: POIStyle.Enhanced,
   },
-  decorators: [],
 } satisfies Meta<ObcPoiGraphicLine>;
 
 export default meta;

package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.ts

@@ -1,67 +1,67 @@
 import {LitElement, html, unsafeCSS} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import {POIStyle, POIState, POIStyleConfig, POI_STYLES} from './poi-config';
+import {POILineParams, POIStyle, POI_LINE_CONFIG} from './poi-config';
 import componentStyle from './poi-graphic-line.css?inline';
 
-function getLineColors(style: POIStyle): POIStyleConfig {
-  const colors = POI_STYLES[style];
-  if (!colors) {
-    throw new Error(`Style: ${style} not supported`);
-  }
-  return colors;
-}
-
 @customElement('obc-poi-graphic-line')
 export class ObcPoiGraphicLine extends LitElement {
-  @property({type: Number}) height: number = 100;
+  @property({type: Number}) lineHeight: number = 96;
+  @property({type: Number}) width: number = 4;
+  @property({type: Number}) lineStart: number = 1;
   @property({type: String}) lineStyle: POIStyle = POIStyle.Enhanced;
-  @property({type: String}) lineState: POIState = POIState.solid;
 
   override render() {
-    const colors = getLineColors(this.lineStyle);
-    const path = `M2 1L2 ${this.height}`;
+    const style = POI_LINE_CONFIG[this.lineStyle];
+    const filterDimensions = style.filterDimensions;
+    const path = `M${this.width / 2} ${this.lineStart}L${this.width / 2} ${this.lineHeight + this.lineStart}`;
 
-    return html`<div class="wrapper">
-      <svg width="4" height="${this.height}" viewBox="0 0 4 ${this.height}">
+    return html`
+      <svg
+        width="${this.width}"
+        height="${this.lineHeight + style.lineEnd}"
+        viewBox="0 0 ${this.width} ${this.lineHeight + style.lineEnd}"
+        fill="none"
+        vector-effect="non-scaling-stroke"
+      >
         <mask
-          id="mask0_903_40238"
+          id="poi_graphic_line_mask"
           style="mask-type:alpha"
           maskUnits="userSpaceOnUse"
-          x="0"
-          y="0"
+          x="${this.width / 2 - 2}"
+          y="-1"
           width="4"
-          height="${this.height}"
+          height="${this.lineHeight + 4}"
         >
           <path
             d="${path}"
-            stroke="url(#paint0_linear_903_40238)"
+            stroke="url(#poi_graphic_line_linear_gradient)"
             stroke-width="4"
             stroke-linecap="round"
           />
         </mask>
-        <g mask="url(#mask0_903_40238)">
-          <g filter="url(#filter0_d_903_40238)">
+        <g mask="url(#poi_graphic_line_mask)">
+          <g filter="url(#poi_graphic_line_filter)">
             <path
               d=${path}
-              stroke="${colors.outlineColor}"
-              stroke-width="2"
+              stroke="${style.outlineColor}"
+              stroke-width="${style.outlineWidth}"
               stroke-linecap="round"
             />
           </g>
           <path
             d=${path}
-            stroke="${colors.lineColor}"
-            stroke-width="1"
+            stroke="${style.lineColor}"
+            stroke-width="${style.lineWidth}"
             stroke-linecap="round"
           />
         </g>
         <defs>
           <filter
-            id="filter0_d_903_40238"
-            x="0"
-            y="0"
-            width="4"
-            height="${this.height}"
+            id="poi_graphic_line_filter"
+            x="${filterDimensions.x}"
+            y="${filterDimensions.y}"
+            width="${filterDimensions.width}"
+            height="${this.lineHeight + filterDimensions.width}"
             filterUnits="userSpaceOnUse"
             color-interpolation-filters="sRGB"
           >
@@ -76,7 +76,7 @@ export class ObcPoiGraphicLine extends LitElement {
             <feGaussianBlur stdDeviation="0.5" />
             <feColorMatrix
               type="matrix"
-              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ${style.shadowAlpha} 0"
             />
             <feBlend
               mode="normal"
@@ -91,11 +91,11 @@ export class ObcPoiGraphicLine extends LitElement {
             />
           </filter>
           <linearGradient
-            id="paint0_linear_903_40238"
-            x1="2.5"
-            y1="1"
-            x2="2.5"
-            y2="${this.height}"
+            id="poi_graphic_line_linear_gradient"
+            x1="${this.width / 2 + 0.5}"
+            y1="${this.lineStart}"
+            x2="${this.width / 2 + 0.5}"
+            y2="${this.lineHeight + this.lineStart}"
             gradientUnits="userSpaceOnUse"
           >
             <stop stop-color="#C2C2C2" />
@@ -103,12 +103,119 @@ export class ObcPoiGraphicLine extends LitElement {
           </linearGradient>
         </defs>
       </svg>
-    </div> `;
+    `;
   }
 
   static override styles = unsafeCSS(componentStyle);
 }
 
+export function graphicLine({
+  style,
+  lineHeight,
+  totalHeight,
+}: {
+  style: POILineParams;
+  lineHeight: number;
+  totalHeight: number;
+}) {
+  const lineStart = 1;
+  const lineEnd = lineStart + lineHeight;
+
+  const width = style.width;
+  const filterDimensions = style.filterDimensions;
+  const path = `M${width / 2} ${lineStart}L${width / 2} ${lineEnd}`;
+
+  return html`
+    <svg
+      width="${width}"
+      height="${totalHeight}"
+      viewBox="0 0 ${width} ${totalHeight}"
+      fill="none"
+      vector-effect="non-scaling-stroke"
+    >
+      <mask
+        id="poi_graphic_line_mask"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="${width / 2 - 2}"
+        y="-1"
+        width="4"
+        height="${lineHeight + 4}"
+      >
+        <path
+          d="${path}"
+          stroke="url(#poi_graphic_line_linear_gradient)"
+          stroke-width="4"
+          stroke-linecap="round"
+        />
+      </mask>
+      <g mask="url(#poi_graphic_line_mask)">
+        <g filter="url(#poi_graphic_line_filter)">
+          <path
+            d=${path}
+            stroke="${style.outlineColor}"
+            stroke-width="${style.outlineWidth}"
+            stroke-linecap="round"
+          />
+        </g>
+        <path
+          d=${path}
+          stroke="${style.lineColor}"
+          stroke-width="${style.lineWidth}"
+          stroke-linecap="round"
+        />
+      </g>
+      <defs>
+        <filter
+          id="poi_graphic_line_filter"
+          x="${filterDimensions.x + width / 2 - 2}"
+          y="${filterDimensions.y}"
+          width="${filterDimensions.width}"
+          height="${lineHeight + filterDimensions.width}"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="0.5" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ${style.shadowAlpha} 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_903_40238"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_903_40238"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="poi_graphic_line_linear_gradient"
+          x1="${width / 2 + 0.5}"
+          y1="${lineStart}"
+          x2="${width / 2 + 0.5}"
+          y2="${lineEnd}"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#C2C2C2" />
+          <stop offset="0.989583" stop-color="#C2C2C2" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'obc-poi-graphic-line': ObcPoiGraphicLine;

package/src/navigation-instruments/poi-line/poi-line.css

@@ -1,8 +1,9 @@
-.wrapper {
-  padding: 0;
-  width: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.container {
+  position: relative;
+}
+
+.container > * {
+  position: absolute;
+  top: -1px;
+  left: 0;
 }

package/src/navigation-instruments/poi-line/poi-line.stories.ts

@@ -5,18 +5,18 @@ import {POIStyle} from '../poi-graphic-line/poi-config';
 
 const meta: Meta<typeof ObcPoiLine> = {
   title: 'Building blocks/POI Line',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs'],
   component: 'obc-poi-line',
   argTypes: {
-    lineStyle: {
+    poiStyle: {
       options: [POIStyle.Normal, POIStyle.Enhanced],
       control: {type: 'select'},
     },
-    height: {control: {type: 'range', min: 32, max: 196, step: 1}},
+    height: {control: {type: 'range', min: 32, max: 200, step: 1}},
   },
   args: {
-    lineStyle: POIStyle.Enhanced,
-    height: 100,
+    poiStyle: POIStyle.Enhanced,
+    height: 96,
   },
 } satisfies Meta<ObcPoiLine>;
 

package/src/navigation-instruments/poi-line/poi-line.ts

@@ -3,21 +3,42 @@ import {customElement, property} from 'lit/decorators.js';
 import compentStyle from './poi-line.css?inline';
 import '../poi-graphic-line/poi-graphic-line';
 import {renderPointerDot} from './pointerDot';
-import {POIStyle} from '../poi-graphic-line/poi-config';
+import {POI_LINE_CONFIG, POIStyle} from '../poi-graphic-line/poi-config';
+import {graphicLine} from '../poi-graphic-line/poi-graphic-line';
 
 @customElement('obc-poi-line')
 export class ObcPoiLine extends LitElement {
   @property({type: Number}) height: number = 96;
-  @property({type: String}) lineStyle: POIStyle = POIStyle.Normal;
+  @property({type: String}) poiStyle: POIStyle = POIStyle.Normal;
 
   override render() {
+    const style = POI_LINE_CONFIG[this.poiStyle];
+    let lineHeight = this.height - 4;
+    let centerX = 2;
+    let centerYOffset = 1;
+    if (this.poiStyle === POIStyle.Normal) {
+      lineHeight = this.height - 3;
+      centerYOffset = 2;
+      centerX = 1;
+    }
+
+    const totalHeight = lineHeight + style.width + style.dotStart;
+
     return html`
-      <div class="wrapper">
-        <obc-poi-graphic-line
-          height=${this.height}
-          lineStyle=${this.lineStyle}
-        ></obc-poi-graphic-line>
-        ${renderPointerDot({lineStyle: this.lineStyle})}
+      <div
+        class="container"
+        style="height: ${totalHeight}px; width: ${style.width}px;"
+      >
+        ${graphicLine({style, lineHeight, totalHeight})}
+        ${renderPointerDot({
+          lineStyle: this.poiStyle,
+          centerX: centerX,
+          centerY: lineHeight + centerYOffset,
+          width: style.width,
+          vbHeight: totalHeight,
+          lineColor: style.lineColor,
+          outlineColor: style.outlineColor,
+        })}
       </div>
     `;
   }

package/src/navigation-instruments/poi-line/pointerDot.ts

@@ -1,102 +1,118 @@
-import {html} from 'lit';
+import {html, svg} from 'lit';
 import {POIStyle} from '../poi-graphic-line/poi-config';
 
-export function renderPointerDot({lineStyle}: {lineStyle: POIStyle}) {
-  if (lineStyle === POIStyle.Enhanced)
-    return html`<svg
-      width="8"
-      height="8"
-      viewBox="0 0 8 8"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g filter="url(#filter0_d_1761_3883)">
-        <rect x="2" y="1" width="4" height="4" rx="2" fill="#2E5389" />
-        <rect x="1.5" y="0.5" width="5" height="5" rx="2.5" stroke="white" />
-      </g>
-      <defs>
-        <filter
-          id="filter0_d_1761_3883"
-          x="0"
-          y="0"
-          width="8"
-          height="8"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
-        >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="0.5" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1761_3883"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1761_3883"
-            result="shape"
-          />
-        </filter>
-      </defs>
-    </svg>`;
-  else
-    return html`<svg
-      width="4"
-      height="4"
-      viewBox="0 0 4 4"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g filter="url(#filter0_d_1761_4250)">
-        <rect x="1" width="2" height="2" rx="1" fill="white" />
-      </g>
-      <defs>
-        <filter
-          id="filter0_d_1761_4250"
-          x="0"
-          y="0"
-          width="4"
-          height="4"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
-        >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="0.5" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1761_4250"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1761_4250"
-            result="shape"
-          />
-        </filter>
-      </defs>
-    </svg> `;
+function createCircle({
+  x,
+  y,
+  width,
+  height,
+  rx,
+  stroke,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rx: number;
+  stroke: string;
+}) {
+  return svg`<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${rx}" stroke="${stroke}">`;
+}
+
+export function renderPointerDot({
+  lineStyle,
+  centerX,
+  centerY,
+  width,
+  vbHeight,
+  lineColor,
+  outlineColor,
+}: {
+  lineStyle: POIStyle;
+  centerX: number;
+  centerY: number;
+  width: number;
+  vbHeight: number;
+  lineColor: string;
+  outlineColor: string;
+}) {
+  let innerCircle = svg`<rect
+        x="${centerX}"
+        y="${centerY}"
+        width="4"
+        height="4"
+        rx="2"
+        fill="${lineColor}"
+      />`;
+
+  let outerCircle = null;
+  let filterY = centerY;
+
+  if (lineStyle !== POIStyle.Normal) {
+    outerCircle = createCircle({
+      x: centerX - 0.5,
+      y: centerY - 0.5,
+      width: 5,
+      height: 5,
+      rx: 2.5,
+      stroke: outlineColor,
+    });
+    filterY = centerY - 1;
+  } else {
+    innerCircle = svg`<rect
+        x="${centerX}"
+        y="${centerY}"
+        width="2"
+        height="2"
+        rx="1"
+        fill="${lineColor}"
+      />`;
+  }
+
+  return html`<svg
+    width=${width}
+    height="${vbHeight}"
+    viewBox="0 0 ${width} ${vbHeight}"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    vector-effect="non-scaling-stroke"
+  >
+    <g filter="url(#pointerDotFilter)">${innerCircle} ${outerCircle}</g>
+    <defs>
+      <filter
+        id="pointerDotFilter"
+        x="${0}"
+        y="${filterY}"
+        width="${width}"
+        height="${width}"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="0.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="pointerDotDropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="pointerDotDropShadow"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>`;
 }

package/src/navigation-instruments/poi-target/arrow.ts

@@ -16,6 +16,7 @@ export function pointerArrow(pointerType: Pointer, value: string) {
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    vector-effect="non-scaling-stroke"
   >
     <g filter="url(#filter0_d_903_44142)">
       <path d=${path} fill="${fill}" stroke="var(--border-silhouette-color)" />

package/src/navigation-instruments/poi-target/poi-target.css

@@ -1,22 +1,18 @@
-.wrapper {
+.container {
   padding: 0;
   background: transparent;
   appearance: none;
-  width: 48px;
+  width: 200px;
   height: auto;
   border: none;
   display: flex;
+  flex-direction: row;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-
-  &.type-arrow-left {
-    width: 56px;
-    flex-direction: row-reverse;
-  }
-
-  &.type-arrow-right {
-    width: 56px;
-    flex-direction: row;
-  }
+  width: 48px;
 }

package/src/navigation-instruments/poi-target/poi-target.stories.ts

@@ -1,21 +1,21 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
-import {ObcPoiTarget, Pointer} from './poi-target';
+import {ObcPoiTarget, Pointer, TargetValue} from './poi-target';
 import './poi-target';
 
 const meta: Meta<typeof ObcPoiTarget> = {
   title: 'Navigation Instruments/POI Target',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs'],
   component: 'obc-poi-target',
   args: {
-    height: 188,
-    value: 'checked',
+    height: 192,
+    value: TargetValue.checked,
     pointerType: Pointer.Line,
     relativeDirection: 0,
   },
   argTypes: {
     height: {control: {type: 'range', min: 32, max: 243, step: 1}},
     value: {
-      options: ['enabled', 'checked'],
+      options: [TargetValue.enabled, TargetValue.checked],
       control: {type: 'select'},
     },
     pointerType: {