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

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

@@ -1,148 +1,148 @@
-import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-import compentStyle from './watch-flat.css?inline';
-import {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat';
-import {rect} from '../../svghelpers/rectangular';
-import {Label} from '../compass-flat/compass-flat';
-
-@customElement('obc-watch-flat')
-export class ObcWatchFlat extends LitElement {
-  @property({type: Number}) width = 352;
-  @property({type: Number}) height = 72;
-  @property({type: Number}) padding = 0;
-  @property({type: Number}) rotation = 0;
-  @property({type: Number}) tickmarkSpacing = 0;
-  @property({type: Number}) angleSetpoint: number | undefined;
-  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];
-  @property({type: Array, attribute: false}) labels: Label[] = [];
-  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =
-    [];
-  @property({type: Number}) trackHeight = (2 / 3) * this.height;
-  @property({type: Number}) ticksHeight = this.height - this.trackHeight;
-  @property({type: Number}) borderRadius = 8;
-
-  private renderClipPath(offsetY: number = 0): SVGTemplateResult {
-    return svg`
-      <clipPath id="frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}">
-        <rect x="${-this.width / 2}" y="${-this.height / 2 + offsetY}" 
-              width="${this.width}" height="${this.height}" 
-              rx="${this.borderRadius}" />
-      </clipPath>
-    `;
-  }
-
-  private renderLabelMask(): SVGTemplateResult {
-    return svg`
-      <mask id="labelMask">
-        <rect x="${-this.width / 2}" y="${-70}" 
-              width="${this.width}" height="${32}"
-               />
-        <linearGradient id="fadeGradient" gradientUnits="userSpaceOnUse"
-                        x1="${-this.width / 2}" y1="0" x2="${this.width / 2}" y2="0">
-          <stop offset="0%" style="stop-color:black; stop-opacity:1;" />
-          <stop offset="10%" style="stop-color:white; stop-opacity:1;" />
-          <stop offset="50%" style="stop-color:white; stop-opacity:1;" />
-          <stop offset="90%" style="stop-color:white; stop-opacity:1;" />
-          <stop offset="100%" style="stop-color:black; stop-opacity:1;" />
-        </linearGradient>
-        <rect x="${-this.width / 2}" y="${-70}" 
-              width="${this.width}" height="${32}"
-              fill="url(#fadeGradient)" />
-      </mask>
-    `;
-  }
-
-  private renderLabels(scale: number): SVGTemplateResult[] {
-    const labels: SVGTemplateResult[] = [];
-
-    for (const l of this.labels) {
-      labels.push(
-        svg`<g transform="translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})">
-          <text x=${l.x} y=${l.y} class="label" fill=${'var(--instrument-tick-mark-secondary-color)'}>
-            ${l.text}
-          </text>
-          </g>`
-      );
-    }
-
-    return labels;
-  }
-
-  private watchFace(): SVGTemplateResult {
-    const strokeWidth = 1;
-
-    return svg`
-      ${this.renderClipPath()}
-      ${this.renderClipPath(-40)}
-      <g clip-path="url(#frameClipPath)">
-        ${rect('frame-track', {
-          width: this.width,
-          height: this.trackHeight,
-          y: this.height / 2 - this.trackHeight,
-          strokeWidth: strokeWidth,
-          strokeColor: 'var(--instrument-frame-secondary-color)',
-          strokePosition: 'inside',
-          fillColor: 'var(--instrument-frame-secondary-color)',
-          borderRadius: 0,
-        })}
-        ${rect('frame-ticks', {
-          width: this.width,
-          height: this.ticksHeight,
-          y: this.height / 2 - this.trackHeight - this.ticksHeight,
-          strokeWidth: strokeWidth,
-          strokeColor: 'var(--instrument-frame-primary-color)',
-          strokePosition: 'inside',
-          fillColor: 'var(--instrument-frame-primary-color)',
-          borderRadius: 0,
-        })}
-      </g>
-      ${rect('frame-outline', {
-        width: this.width,
-        height: this.height,
-        strokeWidth: strokeWidth,
-        strokeColor: 'var(--instrument-frame-tertiary-color)',
-        strokePosition: 'inside',
-        fillColor: 'none',
-        borderRadius: this.borderRadius,
-      })}
-    `;
-  }
-
-  override render() {
-    const width = (this.width / 2 + this.padding) * 2;
-    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;
-    const scale = this.clientWidth / width;
-
-    return html`
-      <svg
-        width="100%"
-        height="100%"
-        viewBox=${viewBox}
-        style="--scale: ${scale}"
-      >
-        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}
-
-        <g clip-path="url(#frameClipPath)">
-          ${this.tickmarks.map(
-            (t) => svg`
-            <g transform="translate(${-this.rotation * this.tickmarkSpacing}, 0)">
-              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}
-            </g>
-          `
-          )}
-        </g>
-
-        <g mask="url(#labelMask)">
-          ${this.renderLabels(scale)}
-      </svg>
-    `;
-  }
-
-  static override styles = unsafeCSS(compentStyle);
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'obc-watch-flat': ObcWatchFlat;
-  }
-}
+import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './watch-flat.css?inline';
+import {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat';
+import {rect} from '../../svghelpers/rectangular';
+import {Label} from '../compass-flat/compass-flat';
+
+@customElement('obc-watch-flat')
+export class ObcWatchFlat extends LitElement {
+  @property({type: Number}) width = 352;
+  @property({type: Number}) height = 72;
+  @property({type: Number}) padding = 0;
+  @property({type: Number}) rotation = 0;
+  @property({type: Number}) tickmarkSpacing = 0;
+  @property({type: Number}) angleSetpoint: number | undefined;
+  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];
+  @property({type: Array, attribute: false}) labels: Label[] = [];
+  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =
+    [];
+  @property({type: Number}) trackHeight = (2 / 3) * this.height;
+  @property({type: Number}) ticksHeight = this.height - this.trackHeight;
+  @property({type: Number}) borderRadius = 8;
+
+  private renderClipPath(offsetY: number = 0): SVGTemplateResult {
+    return svg`
+      <clipPath id="frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}">
+        <rect x="${-this.width / 2}" y="${-this.height / 2 + offsetY}" 
+              width="${this.width}" height="${this.height}" 
+              rx="${this.borderRadius}" />
+      </clipPath>
+    `;
+  }
+
+  private renderLabelMask(): SVGTemplateResult {
+    return svg`
+      <mask id="labelMask">
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+               />
+        <linearGradient id="fadeGradient" gradientUnits="userSpaceOnUse"
+                        x1="${-this.width / 2}" y1="0" x2="${this.width / 2}" y2="0">
+          <stop offset="0%" style="stop-color:black; stop-opacity:1;" />
+          <stop offset="10%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="50%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="90%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="100%" style="stop-color:black; stop-opacity:1;" />
+        </linearGradient>
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+              fill="url(#fadeGradient)" />
+      </mask>
+    `;
+  }
+
+  private renderLabels(scale: number): SVGTemplateResult[] {
+    const labels: SVGTemplateResult[] = [];
+
+    for (const l of this.labels) {
+      labels.push(
+        svg`<g transform="translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})">
+          <text x=${l.x} y=${l.y} class="label" fill=${'var(--instrument-tick-mark-secondary-color)'}>
+            ${l.text}
+          </text>
+          </g>`
+      );
+    }
+
+    return labels;
+  }
+
+  private watchFace(): SVGTemplateResult {
+    const strokeWidth = 1;
+
+    return svg`
+      ${this.renderClipPath()}
+      ${this.renderClipPath(-40)}
+      <g clip-path="url(#frameClipPath)">
+        ${rect('frame-track', {
+          width: this.width,
+          height: this.trackHeight,
+          y: this.height / 2 - this.trackHeight,
+          strokeWidth: strokeWidth,
+          strokeColor: 'var(--instrument-frame-secondary-color)',
+          strokePosition: 'inside',
+          fillColor: 'var(--instrument-frame-secondary-color)',
+          borderRadius: 0,
+        })}
+        ${rect('frame-ticks', {
+          width: this.width,
+          height: this.ticksHeight,
+          y: this.height / 2 - this.trackHeight - this.ticksHeight,
+          strokeWidth: strokeWidth,
+          strokeColor: 'var(--instrument-frame-primary-color)',
+          strokePosition: 'inside',
+          fillColor: 'var(--instrument-frame-primary-color)',
+          borderRadius: 0,
+        })}
+      </g>
+      ${rect('frame-outline', {
+        width: this.width,
+        height: this.height,
+        strokeWidth: strokeWidth,
+        strokeColor: 'var(--instrument-frame-tertiary-color)',
+        strokePosition: 'inside',
+        fillColor: 'none',
+        borderRadius: this.borderRadius,
+      })}
+    `;
+  }
+
+  override render() {
+    const width = (this.width / 2 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;
+    const scale = this.clientWidth / width;
+
+    return html`
+      <svg
+        width="100%"
+        height="100%"
+        viewBox=${viewBox}
+        style="--scale: ${scale}"
+      >
+        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}
+
+        <g clip-path="url(#frameClipPath)">
+          ${this.tickmarks.map(
+            (t) => svg`
+            <g transform="translate(${-this.rotation * this.tickmarkSpacing}, 0)">
+              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}
+            </g>
+          `
+          )}
+        </g>
+
+        <g mask="url(#labelMask)">
+          ${this.renderLabels(scale)}
+      </svg>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-watch-flat': ObcWatchFlat;
+  }
+}

package/src/svghelpers/rectangular.ts

@@ -1,42 +1,42 @@
-import {svg} from 'lit';
-
-export function rect(
-  id: string,
-  data: {
-    width: number;
-    height: number;
-    strokeWidth: number;
-    strokeColor: string;
-    fillColor: string;
-    borderRadius: number;
-    strokePosition: 'inside' | 'outside';
-    y?: number;
-  }
-) {
-  const yPosition = data.y !== undefined ? data.y : -data.height / 2;
-
-  if (data.strokePosition === 'inside') {
-    return svg`
-		<defs>
-			<clipPath id="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" />
-			</clipPath>
-		</defs>
-		<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;
-  }
-}
+import {svg} from 'lit';
+
+export function rect(
+  id: string,
+  data: {
+    width: number;
+    height: number;
+    strokeWidth: number;
+    strokeColor: string;
+    fillColor: string;
+    borderRadius: number;
+    strokePosition: 'inside' | 'outside';
+    y?: number;
+  }
+) {
+  const yPosition = data.y !== undefined ? data.y : -data.height / 2;
+
+  if (data.strokePosition === 'inside') {
+    return svg`
+		<defs>
+			<clipPath id="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" />
+			</clipPath>
+		</defs>
+		<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;
+  }
+}