@oicl/openbridge-webcomponents 0.0.15-dev-20240915195432 → 0.0.15-dev-20240916185711

package/dist/navigation-instruments/thruster/thruster.js

@@ -1,4 +1,4 @@
-import { css, LitElement, html, svg } from "lit";
+import { css, LitElement, html, svg, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { InstrumentState } from "../types.js";
 import { renderAdvice } from "./advice.js";
@@ -49,7 +49,8 @@ let ObcThruster = class extends LitElement {
       singleDirection: this.singleDirection,
       singleDirectionHalfSize: this.singleDirectionHalfSize,
       topPropeller: this.topPropeller,
-      bottomPropeller: this.bottomPropeller
+      bottomPropeller: this.bottomPropeller,
+      narrow: !this.tunnel
     })}
     </div>`;
   }
@@ -113,7 +114,7 @@ __decorateClass([
 ObcThruster = __decorateClass([
   customElement("obc-thruster")
 ], ObcThruster);
-function thrusterTop(height, value, colors, hideTicks) {
+function thrusterTop(height, value, colors, options) {
   const container = svg`
       <path transform="translate(0 -2)" d="M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
@@ -121,7 +122,7 @@ function thrusterTop(height, value, colors, hideTicks) {
   const tickmarks = [];
   const nTicks = 2;
   const delta = height / nTicks;
-  if (!hideTicks) {
+  if (!options.hideTicks) {
     for (let i = 1; i < nTicks; i++) {
       tickmarks.push(
         svg`<line x1="-24" x2="-44" y1=${-i * delta - 2}  y2=${-i * delta - 2} stroke="var(--instrument-frame-tertiary-color)" stroke-width="1" vector-effect="non-scaling-stroke"/>`
@@ -134,49 +135,70 @@ function thrusterTop(height, value, colors, hideTicks) {
   const barHeight = height * value / 100;
   const barY = -2 - barHeight;
   const bar = svg`<rect width="40" height=${barHeight} x="-20" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
-  return [container, track, tickmarks, bar];
+  if (options.hideContainer) {
+    return [track, tickmarks, bar];
+  } else {
+    return [container, track, tickmarks, bar];
+  }
 }
-function thrusterTopSingleSided(height, value, colors, hideTicks, advice, flipAdicePattern = false) {
-  const container = svg`
+function thrusterTopSingleSided(height, value, colors, options, advice) {
+  const container = options.narrow ? svg`
       <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  ` : svg`
+      <path transform="translate(0 -2)" d="M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 56 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
-  const track = svg`
+  const track = options.narrow ? svg`
       <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  ` : svg`
+      <path transform="translate(0 -2)" d="M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 40 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
-  const tickmarks = hideTicks ? [] : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];
+  const tickmarks = options.hideTicks ? [] : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];
   const barHeight = height * value / 100;
+  const barWidth = options.narrow ? 40 : 48;
+  const barX = options.narrow ? -32 : -40;
   const barY = -2 - barHeight;
-  const maskId = flipAdicePattern ? "thrusterBarMask1" : "thrusterBarMask2";
-  const bar = svg`
+  const maskId = options.flipAdicePattern ? "thrusterBarMask1" : "thrusterBarMask2";
+  const mask = options.hideContainer ? nothing : svg`
   <defs>
   <mask id=${maskId}>
-  <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
-  </defs>
-  <rect mask="url(#${maskId})" width="40" height=${barHeight} x="-32" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
+  <path transform="translate(0 -2)" d="M ${barX} 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h ${barWidth} V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
+  </defs>`;
+  const maskAttr = options.hideContainer ? "" : `mask="url(#${maskId})"`;
+  const bar = svg`
+    ${mask}
+    <rect ${maskAttr} width=${barWidth} height=${barHeight} x=${barX} y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
   const advicesSvg = advice.map(
-    (a) => renderAdvice(height, a, flipAdicePattern)
+    (a) => renderAdvice(height, a, options.flipAdicePattern)
   );
-  return [container, track, tickmarks, bar, advicesSvg];
+  const all = [tickmarks, bar, advicesSvg];
+  if (!options.hideContainer) {
+    all.splice(0, 0, [container, track]);
+  }
+  if (!options.narrow) {
+    return svg`<g transform="translate(4 0)">${all}</g>`;
+  } else {
+    return all;
+  }
 }
-function thrusterBottom(height, value, colors, hideTicks) {
+function thrusterBottom(height, value, colors, options) {
   const container = svg`
       <g transform="rotate(180)">
-        ${thrusterTop(height, value, colors, hideTicks)}
+        ${thrusterTop(height, value, colors, options)}
       </g>
   `;
   return container;
 }
-function thrusterBottomSingleSided(height, value, colors, hideTicks, advices) {
+function thrusterBottomSingleSided(height, value, colors, options, advice) {
   const container = svg`
       <g transform="rotate(180) scale(-1,1)">
-        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}
+        ${thrusterTopSingleSided(height, value, colors, { hideTicks: options.hideTicks, flipAdicePattern: options.flipAdicePattern, hideContainer: options.hideContainer, narrow: options.narrow }, advice)}
       </g>
   `;
   return container;
 }
 function setpointSvg(height, value, setpointAtZero, colors, options) {
   const y = -(setpointAtZero ? 0 : Math.sign(value) * (height * Math.abs(value) / 100 + 2));
-  const extra = options.singleSided ? -12 : 0;
+  const extra = (options.singleSided ? -12 : 0) + (options.narrow ? 0 : 4);
   let path;
   if (options.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";
@@ -203,78 +225,38 @@ function setpointSvg(height, value, setpointAtZero, colors, options) {
   </g>
   `;
 }
-function thruster(thrust, setpoint, state, options) {
-  if (!options.singleSided && options.advices.length > 0) {
-    throw new Error("Double sided thruster does not support advice");
+function atSetpoint(thrust, setpoint, options) {
+  if (options.touching) {
+    return false;
   }
   if (options.autoAtSetpoint && setpoint !== void 0) {
-    options.atSetpoint = Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
-  }
-  if (options.touching) {
-    options.atSetpoint = false;
+    return Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
   }
-  let boxColor = "var(--instrument-enhanced-secondary-color)";
-  let setPointColor = "var(--instrument-enhanced-primary-color)";
-  let arrowColor = "var(--instrument-regular-secondary-color)";
-  let containerBackgroundColor = "var(--instrument-frame-primary-color)";
-  let zeroLineColor = "var(--instrument-enhanced-secondary-color)";
-  let hideTicks = false;
-  if (options.atSetpoint) {
-    setPointColor = boxColor;
+  return options.atSetpoint;
+}
+function thruster(thrust, setpoint, state, options) {
+  if (options.tunnel) {
+    thrust = -thrust;
+    setpoint = setpoint === void 0 ? void 0 : -setpoint;
   }
-  if (state === InstrumentState.active) {
-    boxColor = "var(--instrument-regular-secondary-color)";
-    zeroLineColor = "var(--instrument-regular-secondary-color)";
-    setPointColor = "var(--instrument-regular-primary-color)";
-    arrowColor = "var(--instrument-regular-secondary-color)";
-    if (options.atSetpoint) {
-      setPointColor = boxColor;
-    }
-  } else if (state === InstrumentState.loading) {
-    boxColor = "transparent";
-    setPointColor = "var(--instrument-frame-tertiary-color)";
-    zeroLineColor = "var(--instrument-frame-tertiary-color)";
-    arrowColor = "var(--instrument-regular-secondary-color)";
-    thrust = 0;
-    hideTicks = true;
-    if (setpoint !== void 0) {
-      setpoint = 0;
-    }
-  } else if (state === InstrumentState.off) {
-    boxColor = "transparent";
-    setPointColor = "var(--instrument-frame-tertiary-color)";
-    arrowColor = "var(--instrument-frame-tertiary-color)";
-    zeroLineColor = "var(--instrument-frame-tertiary-color)";
-    thrust = 0;
-    hideTicks = true;
-    containerBackgroundColor = "transparent";
-    if (setpoint !== void 0) {
-      setpoint = 0;
-    }
+  if (!options.singleSided && options.advices.length > 0) {
+    throw new Error("Double sided thruster does not support advice");
   }
-  const centerLine = options.singleSided ? svg`<rect x="-32" y="-2" width="64" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>` : svg`
-    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>
+  options.atSetpoint = atSetpoint(thrust, setpoint, options);
+  const tc = thrusterColors(options, state);
+  let centerLine = svg`
+    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect="non-scaling-stroke"/>
   `;
+  if (options.singleSided) {
+    const width = options.narrow ? 64 : 72;
+    const x = options.narrow ? -32 : -36;
+    centerLine = svg`<rect x=${x} y="-2" width=${width} height="4" stroke-width="1" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect="non-scaling-stroke"/>`;
+  }
   const setpointAtZero = Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;
-  const advices = options.advices.map((a) => {
-    const triggered = thrust >= a.min && thrust <= a.max;
-    let state2;
-    if (triggered) {
-      state2 = AdviceState.triggered;
-    } else if (a.hinted) {
-      state2 = AdviceState.hinted;
-    } else {
-      state2 = AdviceState.regular;
-    }
-    return {
-      min: a.min,
-      max: a.max,
-      type: a.type,
-      state: state2
-    };
-  });
-  const topAdvices = advices.filter((a) => a.min >= 0);
-  const bottomAdvices = advices.filter((a) => a.max <= 0).map((a) => ({ ...a, min: -a.max, max: -a.min }));
+  const { topAdvices, bottomAdvices } = convertThrustAdvices(
+    options.advices,
+    thrust
+  );
   const thrusterSvg = [];
   const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;
   const height = options.singleDirection ? baseheight * 2 : baseheight;
@@ -283,8 +265,13 @@ function thruster(thrust, setpoint, state, options) {
       thrusterTopSingleSided(
         height,
         Math.max(thrust, 0),
-        { box: boxColor, container: containerBackgroundColor },
-        hideTicks,
+        { box: tc.boxColor, container: tc.containerBackgroundColor },
+        {
+          hideTicks: tc.hideTicks,
+          flipAdicePattern: false,
+          hideContainer: false,
+          narrow: options.narrow
+        },
         topAdvices
       )
     );
@@ -293,8 +280,13 @@ function thruster(thrust, setpoint, state, options) {
         thrusterBottomSingleSided(
           height,
           Math.max(-thrust, 0),
-          { box: boxColor, container: containerBackgroundColor },
-          hideTicks,
+          { box: tc.boxColor, container: tc.containerBackgroundColor },
+          {
+            hideTicks: tc.hideTicks,
+            flipAdicePattern: true,
+            hideContainer: false,
+            narrow: options.narrow
+          },
           bottomAdvices
         )
       );
@@ -305,8 +297,8 @@ function thruster(thrust, setpoint, state, options) {
       thrusterTop(
         height,
         Math.max(thrust, 0),
-        { box: boxColor, container: containerBackgroundColor },
-        hideTicks
+        { box: tc.boxColor, container: tc.containerBackgroundColor },
+        { hideTicks: tc.hideTicks, hideContainer: false }
       )
     );
     if (!options.singleDirection) {
@@ -314,8 +306,8 @@ function thruster(thrust, setpoint, state, options) {
         thrusterBottom(
           height,
           Math.max(-thrust, 0),
-          { box: boxColor, container: containerBackgroundColor },
-          hideTicks
+          { box: tc.boxColor, container: tc.containerBackgroundColor },
+          { hideTicks: tc.hideTicks, hideContainer: false }
         )
       );
     }
@@ -328,12 +320,13 @@ function thruster(thrust, setpoint, state, options) {
         setpoint,
         setpointAtZero,
         {
-          fill: setPointColor,
+          fill: tc.setPointColor,
           stroke: "var(--border-silhouette-color)"
         },
         {
           inCommand: state === InstrumentState.inCommand,
-          singleSided: options.singleSided
+          singleSided: options.singleSided,
+          narrow: options.narrow
         }
       )
     );
@@ -341,7 +334,7 @@ function thruster(thrust, setpoint, state, options) {
   if (options.tunnel) {
     return svg`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64  320 128" x="-160" y="-64">
-        <g transform="rotate(90)">
+        <g transform="rotate(-90)">
           ${thrusterSvg}
         </g>
       </svg>`;
@@ -352,7 +345,7 @@ function thruster(thrust, setpoint, state, options) {
       viewBox = "-80 -300 160 320";
       y = -320;
     }
-    const top = topPropeller(height, arrowColor, options.topPropeller);
+    const top = topPropeller(height, tc.arrowColor, options.topPropeller);
     const bottom = bottomPropeller(
       options.singleDirectionHalfSize ? 0.5 : height,
       options.bottomPropeller
@@ -366,8 +359,79 @@ function thruster(thrust, setpoint, state, options) {
   `;
   }
 }
+function convertThrustAdvices(advices, thrust) {
+  const rawAdvices = advices.map((a) => {
+    const triggered = thrust >= a.min && thrust <= a.max;
+    let state;
+    if (triggered) {
+      state = AdviceState.triggered;
+    } else if (a.hinted) {
+      state = AdviceState.hinted;
+    } else {
+      state = AdviceState.regular;
+    }
+    return {
+      min: a.min,
+      max: a.max,
+      type: a.type,
+      state,
+      hinted: a.hinted
+    };
+  });
+  const topAdvices = rawAdvices.filter((a) => a.min >= 0);
+  const bottomAdvices = rawAdvices.filter((a) => a.max <= 0).map((a) => ({ ...a, min: -a.max, max: -a.min }));
+  return { topAdvices, bottomAdvices };
+}
+function thrusterColors(options, state) {
+  let boxColor = "var(--instrument-enhanced-secondary-color)";
+  let setPointColor = "var(--instrument-enhanced-primary-color)";
+  let arrowColor = "var(--instrument-regular-secondary-color)";
+  let containerBackgroundColor = "var(--instrument-frame-primary-color)";
+  let zeroLineColor = "var(--instrument-enhanced-secondary-color)";
+  let hideTicks = false;
+  if (options.atSetpoint) {
+    setPointColor = boxColor;
+  }
+  if (state === InstrumentState.active) {
+    boxColor = "var(--instrument-regular-secondary-color)";
+    zeroLineColor = "var(--instrument-regular-secondary-color)";
+    setPointColor = "var(--instrument-regular-primary-color)";
+    arrowColor = "var(--instrument-regular-secondary-color)";
+    if (options.atSetpoint) {
+      setPointColor = boxColor;
+    }
+  } else if (state === InstrumentState.loading) {
+    boxColor = "transparent";
+    setPointColor = "var(--instrument-frame-tertiary-color)";
+    zeroLineColor = "var(--instrument-frame-tertiary-color)";
+    arrowColor = "var(--instrument-regular-secondary-color)";
+    hideTicks = true;
+  } else if (state === InstrumentState.off) {
+    boxColor = "transparent";
+    setPointColor = "var(--instrument-frame-tertiary-color)";
+    arrowColor = "var(--instrument-frame-tertiary-color)";
+    zeroLineColor = "var(--instrument-frame-tertiary-color)";
+    hideTicks = true;
+    containerBackgroundColor = "transparent";
+  }
+  return {
+    zeroLineColor,
+    boxColor,
+    containerBackgroundColor,
+    hideTicks,
+    setPointColor,
+    arrowColor
+  };
+}
 export {
   ObcThruster,
-  thruster
+  atSetpoint,
+  convertThrustAdvices,
+  setpointSvg,
+  thruster,
+  thrusterBottom,
+  thrusterColors,
+  thrusterTop,
+  thrusterTopSingleSided
 };
 //# sourceMappingURL=thruster.js.map

package/dist/navigation-instruments/thruster/thruster.js.map

@@ -1 +1 @@
-{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {InstrumentState} from '../types';\nimport {LinearAdvice, LinearAdviceRaw, renderAdvice} from './advice';\nimport {AdviceState} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\nimport {PropellerType, bottomPropeller, topPropeller} from './propeller';\n\n/**\n * @element obc-thruster\n *\n * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)\n * @prop {boolean} touching - Highlight the thruster when the lever is being touched\n */\n@customElement('obc-thruster')\nexport class ObcThruster extends LitElement {\n  @property({type: Number}) thrust: number = 0;\n  @property({type: Number}) setpoint: number | undefined;\n  @property({type: Boolean}) touching: boolean = false;\n  @property({type: Boolean}) atSetpoint: boolean = false;\n  @property({type: Boolean}) disableAutoAtSetpoint: boolean = false;\n  @property({type: Number}) autoAtSetpointDeadband: number = 1;\n  @property({type: Number}) setpointAtZeroDeadband: number = 0.5;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Boolean}) tunnel: boolean = false;\n  @property({type: Boolean}) singleSided: boolean = false;\n  @property({type: Boolean}) singleDirection: boolean = false;\n  @property({type: Boolean}) singleDirectionHalfSize: boolean = false;\n  @property({type: Array}) advices: LinearAdvice[] = [];\n  @property({type: String}) topPropeller: PropellerType = PropellerType.none;\n  @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;\n\n  override render() {\n    return html`<div class=\"container\">\n      ${thruster(this.thrust, this.setpoint, this.state, {\n        atSetpoint: this.atSetpoint,\n        tunnel: this.tunnel,\n        setpointAtZeroDeadband: this.setpointAtZeroDeadband,\n        autoAtSetpoint: !this.disableAutoAtSetpoint,\n        autoSetpointDeadband: this.autoAtSetpointDeadband,\n        touching: this.touching,\n        singleSided: this.singleSided,\n        advices: this.advices,\n        singleDirection: this.singleDirection,\n        singleDirectionHalfSize: this.singleDirectionHalfSize,\n        topPropeller: this.topPropeller,\n        bottomPropeller: this.bottomPropeller,\n      })}\n    </div>`;\n  }\n\n  static override styles = css`\n    .container {\n      height: 100%;\n      width: 100%;\n    }\n\n    .container > svg {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\nfunction thrusterTop(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`<rect width=\"40\" height=${height} x=\"-20\" y=${-2 - height} fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>`;\n\n  const tickmarks = [];\n\n  const nTicks = 2;\n  const delta = height / nTicks;\n  if (!hideTicks) {\n    for (let i = 1; i < nTicks; i++) {\n      tickmarks.push(\n        svg`<line x1=\"-24\" x2=\"-44\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line  x1=\"24\"  x2=\"44\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n    }\n  }\n\n  const barHeight = (height * value) / 100;\n  const barY = -2 - barHeight;\n  const bar = svg`<rect width=\"40\" height=${barHeight} x=\"-20\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n\n  return [container, track, tickmarks, bar];\n}\n\nfunction thrusterTopSingleSided(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean,\n  advice: LinearAdviceRaw[],\n  flipAdicePattern: boolean = false\n) {\n  const container = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n\n  const tickmarks = hideTicks\n    ? []\n    : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];\n\n  const barHeight = (height * value) / 100;\n  const barY = -2 - barHeight;\n  const maskId = flipAdicePattern ? 'thrusterBarMask1' : 'thrusterBarMask2';\n  const bar = svg`\n  <defs>\n  <mask id=${maskId}>\n  <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z\" fill=\"white\" stroke=\"white\" vector-effect=\"non-scaling-stroke\"/>\n  </defs>\n  <rect mask=\"url(#${maskId})\" width=\"40\" height=${barHeight} x=\"-32\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n  const advicesSvg = advice.map((a) =>\n    renderAdvice(height, a, flipAdicePattern)\n  );\n\n  return [container, track, tickmarks, bar, advicesSvg];\n}\n\nfunction thrusterBottom(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <g transform=\"rotate(180)\">\n        ${thrusterTop(height, value, colors, hideTicks)}\n      </g>\n  `;\n  return container;\n}\n\nfunction thrusterBottomSingleSided(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean,\n  advices: LinearAdviceRaw[]\n) {\n  const container = svg`\n      <g transform=\"rotate(180) scale(-1,1)\">\n        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}\n      </g>\n  `;\n  return container;\n}\n\nfunction setpointSvg(\n  height: number,\n  value: number,\n  setpointAtZero: boolean,\n  colors: {fill: string; stroke: string},\n  options: {\n    inCommand: boolean;\n    singleSided: boolean;\n  }\n) {\n  const y = -(setpointAtZero\n    ? 0\n    : Math.sign(value) * ((height * Math.abs(value)) / 100 + 2));\n  const extra = options.singleSided ? -12 : 0;\n  let path;\n  if (options.inCommand) {\n    path =\n      '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';\n  } else {\n    path =\n      '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';\n  }\n  return svg`\n    <defs>\n      <g id=\"thrusterSetpoint\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(24 -12) rotate(90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n      </g>\n      <mask id=\"thrusterSetpointMask\">\n        <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n        <use href=\"#thrusterSetpoint\" fill=\"black\" />\n      </mask>\n    </defs>\n  <g transform=\"translate(0 ${y})\">\n    <use href=\"#thrusterSetpoint\" fill=${colors.fill} stroke=\"none\" transform=\"translate(${28 + extra} 0)\"/>\n    <use href=\"#thrusterSetpoint\" mask=\"url(#thrusterSetpointMask)\" transform=\"translate(${28 + extra} 0)\" fill=\"none\" stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n    ${\n      options.singleSided\n        ? null\n        : svg`\n    <use href=\"#thrusterSetpoint\" transform=\"rotate(180) translate(28 0)\" fill=${colors.fill} stroke=\"none\"/>\n    <use href=\"#thrusterSetpoint\" transform=\"rotate(180) translate(28 0)\" mask=\"url(#thrusterSetpointMask)\" fill=\"none\" stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n      `\n    }\n  </g>\n  `;\n}\n\nexport function thruster(\n  thrust: number,\n  setpoint: number | undefined,\n  state: InstrumentState,\n  options: {\n    atSetpoint: boolean;\n    tunnel: boolean;\n    singleSided: boolean;\n    singleDirection: boolean;\n    singleDirectionHalfSize: boolean;\n    setpointAtZeroDeadband: number;\n    autoAtSetpoint: boolean;\n    autoSetpointDeadband: number;\n    touching: boolean;\n    advices: LinearAdvice[];\n    topPropeller: PropellerType;\n    bottomPropeller: PropellerType;\n  }\n) {\n  if (!options.singleSided && options.advices.length > 0) {\n    throw new Error('Double sided thruster does not support advice');\n  }\n\n  if (options.autoAtSetpoint && setpoint !== undefined) {\n    options.atSetpoint =\n      Math.abs(thrust - setpoint) < options.autoSetpointDeadband;\n  }\n\n  if (options.touching) {\n    options.atSetpoint = false;\n  }\n\n  let boxColor = 'var(--instrument-enhanced-secondary-color)';\n  let setPointColor = 'var(--instrument-enhanced-primary-color)';\n  let arrowColor = 'var(--instrument-regular-secondary-color)';\n  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';\n  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';\n  let hideTicks = false;\n  if (options.atSetpoint) {\n    setPointColor = boxColor;\n  }\n  if (state === InstrumentState.active) {\n    boxColor = 'var(--instrument-regular-secondary-color)';\n    zeroLineColor = 'var(--instrument-regular-secondary-color)';\n    setPointColor = 'var(--instrument-regular-primary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    if (options.atSetpoint) {\n      setPointColor = boxColor;\n    }\n  } else if (state === InstrumentState.loading) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    thrust = 0;\n    hideTicks = true;\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  } else if (state === InstrumentState.off) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    thrust = 0;\n    hideTicks = true;\n    containerBackgroundColor = 'transparent';\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  }\n\n  const centerLine = options.singleSided\n    ? svg`<rect x=\"-32\" y=\"-2\" width=\"64\" height=\"4\" stroke-width=\"1\" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect=\"non-scaling-stroke\"/>`\n    : svg`\n    <rect x=\"-44\" y=\"-2\" width=\"88\" height=\"4\" stroke-width=\"1\" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect=\"non-scaling-stroke\"/>\n  `;\n\n  const setpointAtZero =\n    Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;\n\n  const advices: LinearAdviceRaw[] = options.advices.map((a) => {\n    const triggered = thrust >= a.min && thrust <= a.max;\n    let state: AdviceState;\n    if (triggered) {\n      state = AdviceState.triggered;\n    } else if (a.hinted) {\n      state = AdviceState.hinted;\n    } else {\n      state = AdviceState.regular;\n    }\n    return {\n      min: a.min,\n      max: a.max,\n      type: a.type,\n      state,\n    };\n  });\n\n  const topAdvices = advices.filter((a) => a.min >= 0);\n  const bottomAdvices = advices\n    .filter((a) => a.max <= 0)\n    .map((a) => ({...a, min: -a.max, max: -a.min}));\n\n  const thrusterSvg = [];\n  const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;\n  const height = options.singleDirection ? baseheight * 2 : baseheight;\n  if (options.singleSided) {\n    thrusterSvg.push(\n      thrusterTopSingleSided(\n        height,\n        Math.max(thrust, 0),\n        {box: boxColor, container: containerBackgroundColor},\n        hideTicks,\n        topAdvices\n      )\n    );\n    if (!(options.singleDirection || options.singleDirectionHalfSize)) {\n      thrusterSvg.push(\n        thrusterBottomSingleSided(\n          height,\n          Math.max(-thrust, 0),\n          {box: boxColor, container: containerBackgroundColor},\n          hideTicks,\n          bottomAdvices\n        )\n      );\n    }\n    thrusterSvg.push(centerLine);\n  } else {\n    thrusterSvg.push(\n      thrusterTop(\n        height,\n        Math.max(thrust, 0),\n        {box: boxColor, container: containerBackgroundColor},\n        hideTicks\n      )\n    );\n    if (!options.singleDirection) {\n      thrusterSvg.push(\n        thrusterBottom(\n          height,\n          Math.max(-thrust, 0),\n          {box: boxColor, container: containerBackgroundColor},\n          hideTicks\n        )\n      );\n    }\n    thrusterSvg.push(centerLine);\n  }\n  if (setpoint !== undefined) {\n    thrusterSvg.push(\n      setpointSvg(\n        height,\n        setpoint,\n        setpointAtZero,\n        {\n          fill: setPointColor,\n          stroke: 'var(--border-silhouette-color)',\n        },\n        {\n          inCommand: state === InstrumentState.inCommand,\n          singleSided: options.singleSided,\n        }\n      )\n    );\n  }\n\n  if (options.tunnel) {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-160 -64  320 128\" x=\"-160\" y=\"-64\">\n        <g transform=\"rotate(90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  } else {\n    let viewBox = '-80 -160 160 320';\n    let y = -160;\n    if (options.singleDirection) {\n      viewBox = '-80 -300 160 320';\n      y = -320;\n    }\n    const top = topPropeller(height, arrowColor, options.topPropeller);\n    const bottom = bottomPropeller(\n      options.singleDirectionHalfSize ? 0.5 : height,\n      options.bottomPropeller\n    );\n    return svg`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=${viewBox} x=\"-80\" y=${y} width=\"160\" height=\"320\">\n      ${top}\n      ${bottom}\n      ${thrusterSvg}\n    </svg>\n  `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n"],"names":["state"],"mappings":"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"}
+{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg, html, css, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {InstrumentState} from '../types';\nimport {LinearAdvice, LinearAdviceRaw, renderAdvice} from './advice';\nimport {AdviceState} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\nimport {PropellerType, bottomPropeller, topPropeller} from './propeller';\n\n/**\n * @element obc-thruster\n *\n * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)\n * @prop {boolean} touching - Highlight the thruster when the lever is being touched\n */\n@customElement('obc-thruster')\nexport class ObcThruster extends LitElement {\n  @property({type: Number}) thrust: number = 0;\n  @property({type: Number}) setpoint: number | undefined;\n  @property({type: Boolean}) touching: boolean = false;\n  @property({type: Boolean}) atSetpoint: boolean = false;\n  @property({type: Boolean}) disableAutoAtSetpoint: boolean = false;\n  @property({type: Number}) autoAtSetpointDeadband: number = 1;\n  @property({type: Number}) setpointAtZeroDeadband: number = 0.5;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Boolean}) tunnel: boolean = false;\n  @property({type: Boolean}) singleSided: boolean = false;\n  @property({type: Boolean}) singleDirection: boolean = false;\n  @property({type: Boolean}) singleDirectionHalfSize: boolean = false;\n  @property({type: Array}) advices: LinearAdvice[] = [];\n  @property({type: String}) topPropeller: PropellerType = PropellerType.none;\n  @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;\n\n  override render() {\n    return html`<div class=\"container\">\n      ${thruster(this.thrust, this.setpoint, this.state, {\n        atSetpoint: this.atSetpoint,\n        tunnel: this.tunnel,\n        setpointAtZeroDeadband: this.setpointAtZeroDeadband,\n        autoAtSetpoint: !this.disableAutoAtSetpoint,\n        autoSetpointDeadband: this.autoAtSetpointDeadband,\n        touching: this.touching,\n        singleSided: this.singleSided,\n        advices: this.advices,\n        singleDirection: this.singleDirection,\n        singleDirectionHalfSize: this.singleDirectionHalfSize,\n        topPropeller: this.topPropeller,\n        bottomPropeller: this.bottomPropeller,\n        narrow: !this.tunnel,\n      })}\n    </div>`;\n  }\n\n  static override styles = css`\n    .container {\n      height: 100%;\n      width: 100%;\n    }\n\n    .container > svg {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\nexport function thrusterTop(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  options: {hideTicks: boolean; hideContainer: boolean}\n) {\n  const container = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`<rect width=\"40\" height=${height} x=\"-20\" y=${-2 - height} fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>`;\n\n  const tickmarks = [];\n\n  const nTicks = 2;\n  const delta = height / nTicks;\n  if (!options.hideTicks) {\n    for (let i = 1; i < nTicks; i++) {\n      tickmarks.push(\n        svg`<line x1=\"-24\" x2=\"-44\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line  x1=\"24\"  x2=\"44\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n    }\n  }\n\n  const barHeight = (height * value) / 100;\n  const barY = -2 - barHeight;\n  const bar = svg`<rect width=\"40\" height=${barHeight} x=\"-20\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n  if (options.hideContainer) {\n    return [track, tickmarks, bar];\n  } else {\n    return [container, track, tickmarks, bar];\n  }\n}\n\nexport function thrusterTopSingleSided(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  options: {\n    hideTicks: boolean;\n    flipAdicePattern: boolean;\n    hideContainer: boolean;\n    narrow: boolean;\n  },\n  advice: LinearAdviceRaw[]\n) {\n  const container = options.narrow\n    ? svg`\n      <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `\n    : svg`\n      <path transform=\"translate(0 -2)\" d=\"M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 56 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = options.narrow\n    ? svg`\n      <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `\n    : svg`\n      <path transform=\"translate(0 -2)\" d=\"M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 40 V 0 Z\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n\n  const tickmarks = options.hideTicks\n    ? []\n    : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];\n\n  const barHeight = (height * value) / 100;\n  const barWidth = options.narrow ? 40 : 48;\n  const barX = options.narrow ? -32 : -40;\n  const barY = -2 - barHeight;\n  const maskId = options.flipAdicePattern\n    ? 'thrusterBarMask1'\n    : 'thrusterBarMask2';\n  // The mask is used to clip the bar to the container shape\n  const mask = options.hideContainer\n    ? nothing\n    : svg`\n  <defs>\n  <mask id=${maskId}>\n  <path transform=\"translate(0 -2)\" d=\"M ${barX} 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h ${barWidth} V 0 Z\" fill=\"white\" stroke=\"white\" vector-effect=\"non-scaling-stroke\"/>\n  </defs>`;\n  const maskAttr = options.hideContainer ? '' : `mask=\"url(#${maskId})\"`;\n  const bar = svg`\n    ${mask}\n    <rect ${maskAttr} width=${barWidth} height=${barHeight} x=${barX} y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n  const advicesSvg = advice.map((a) =>\n    renderAdvice(height, a, options.flipAdicePattern)\n  );\n  const all = [tickmarks, bar, advicesSvg];\n  if (!options.hideContainer) {\n    all.splice(0, 0, [container, track]);\n  }\n  if (!options.narrow) {\n    return svg`<g transform=\"translate(4 0)\">${all}</g>`;\n  } else {\n    return all;\n  }\n}\n\nexport function thrusterBottom(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  options: {hideTicks: boolean; hideContainer: boolean}\n) {\n  const container = svg`\n      <g transform=\"rotate(180)\">\n        ${thrusterTop(height, value, colors, options)}\n      </g>\n  `;\n  return container;\n}\n\nfunction thrusterBottomSingleSided(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  options: {\n    hideTicks: boolean;\n    flipAdicePattern: boolean;\n    hideContainer: boolean;\n    narrow: boolean;\n  },\n  advice: LinearAdviceRaw[]\n) {\n  const container = svg`\n      <g transform=\"rotate(180) scale(-1,1)\">\n        ${thrusterTopSingleSided(height, value, colors, {hideTicks: options.hideTicks, flipAdicePattern: options.flipAdicePattern, hideContainer: options.hideContainer, narrow: options.narrow}, advice)}\n      </g>\n  `;\n  return container;\n}\n\nexport function setpointSvg(\n  height: number,\n  value: number,\n  setpointAtZero: boolean,\n  colors: {fill: string; stroke: string},\n  options: {\n    inCommand: boolean;\n    singleSided: boolean;\n    narrow: boolean;\n  }\n) {\n  const y = -(setpointAtZero\n    ? 0\n    : Math.sign(value) * ((height * Math.abs(value)) / 100 + 2));\n  const extra = (options.singleSided ? -12 : 0) + (options.narrow ? 0 : 4);\n  let path;\n  if (options.inCommand) {\n    path =\n      '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';\n  } else {\n    path =\n      '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';\n  }\n  return svg`\n    <defs>\n      <g id=\"thrusterSetpoint\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(24 -12) rotate(90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n      </g>\n      <mask id=\"thrusterSetpointMask\">\n        <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n        <use href=\"#thrusterSetpoint\" fill=\"black\" />\n      </mask>\n    </defs>\n  <g transform=\"translate(0 ${y})\">\n    <use href=\"#thrusterSetpoint\" fill=${colors.fill} stroke=\"none\" transform=\"translate(${28 + extra} 0)\"/>\n    <use href=\"#thrusterSetpoint\" mask=\"url(#thrusterSetpointMask)\" transform=\"translate(${28 + extra} 0)\" fill=\"none\" stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n    ${\n      options.singleSided\n        ? null\n        : svg`\n    <use href=\"#thrusterSetpoint\" transform=\"rotate(180) translate(28 0)\" fill=${colors.fill} stroke=\"none\"/>\n    <use href=\"#thrusterSetpoint\" transform=\"rotate(180) translate(28 0)\" mask=\"url(#thrusterSetpointMask)\" fill=\"none\" stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n      `\n    }\n  </g>\n  `;\n}\n\nexport function atSetpoint(\n  thrust: number,\n  setpoint: number | undefined,\n  options: {\n    autoAtSetpoint: boolean;\n    autoSetpointDeadband: number;\n    touching: boolean;\n    atSetpoint: boolean;\n  }\n): boolean {\n  if (options.touching) {\n    return false;\n  }\n\n  if (options.autoAtSetpoint && setpoint !== undefined) {\n    return Math.abs(thrust - setpoint) < options.autoSetpointDeadband;\n  }\n\n  return options.atSetpoint;\n}\n\nexport function thruster(\n  thrust: number,\n  setpoint: number | undefined,\n  state: InstrumentState,\n  options: {\n    atSetpoint: boolean;\n    tunnel: boolean;\n    singleSided: boolean;\n    singleDirection: boolean;\n    singleDirectionHalfSize: boolean;\n    setpointAtZeroDeadband: number;\n    autoAtSetpoint: boolean;\n    autoSetpointDeadband: number;\n    touching: boolean;\n    advices: LinearAdvice[];\n    topPropeller: PropellerType;\n    bottomPropeller: PropellerType;\n    narrow: boolean;\n  }\n) {\n  if (options.tunnel) {\n    thrust = -thrust;\n    setpoint = setpoint === undefined ? undefined : -setpoint;\n  }\n\n  if (!options.singleSided && options.advices.length > 0) {\n    throw new Error('Double sided thruster does not support advice');\n  }\n\n  options.atSetpoint = atSetpoint(thrust, setpoint, options);\n\n  const tc = thrusterColors(options, state);\n\n  let centerLine = svg`\n    <rect x=\"-44\" y=\"-2\" width=\"88\" height=\"4\" stroke-width=\"1\" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect=\"non-scaling-stroke\"/>\n  `;\n  if (options.singleSided) {\n    const width = options.narrow ? 64 : 72;\n    const x = options.narrow ? -32 : -36;\n    centerLine = svg`<rect x=${x} y=\"-2\" width=${width} height=\"4\" stroke-width=\"1\" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect=\"non-scaling-stroke\"/>`;\n  }\n\n  const setpointAtZero =\n    Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;\n\n  const {topAdvices, bottomAdvices} = convertThrustAdvices(\n    options.advices,\n    thrust\n  );\n\n  const thrusterSvg = [];\n  const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;\n  const height = options.singleDirection ? baseheight * 2 : baseheight;\n  if (options.singleSided) {\n    thrusterSvg.push(\n      thrusterTopSingleSided(\n        height,\n        Math.max(thrust, 0),\n        {box: tc.boxColor, container: tc.containerBackgroundColor},\n        {\n          hideTicks: tc.hideTicks,\n          flipAdicePattern: false,\n          hideContainer: false,\n          narrow: options.narrow,\n        },\n        topAdvices\n      )\n    );\n    if (!(options.singleDirection || options.singleDirectionHalfSize)) {\n      thrusterSvg.push(\n        thrusterBottomSingleSided(\n          height,\n          Math.max(-thrust, 0),\n          {box: tc.boxColor, container: tc.containerBackgroundColor},\n          {\n            hideTicks: tc.hideTicks,\n            flipAdicePattern: true,\n            hideContainer: false,\n            narrow: options.narrow,\n          },\n          bottomAdvices\n        )\n      );\n    }\n    thrusterSvg.push(centerLine);\n  } else {\n    thrusterSvg.push(\n      thrusterTop(\n        height,\n        Math.max(thrust, 0),\n        {box: tc.boxColor, container: tc.containerBackgroundColor},\n        {hideTicks: tc.hideTicks, hideContainer: false}\n      )\n    );\n    if (!options.singleDirection) {\n      thrusterSvg.push(\n        thrusterBottom(\n          height,\n          Math.max(-thrust, 0),\n          {box: tc.boxColor, container: tc.containerBackgroundColor},\n          {hideTicks: tc.hideTicks, hideContainer: false}\n        )\n      );\n    }\n    thrusterSvg.push(centerLine);\n  }\n  if (setpoint !== undefined) {\n    thrusterSvg.push(\n      setpointSvg(\n        height,\n        setpoint,\n        setpointAtZero,\n        {\n          fill: tc.setPointColor,\n          stroke: 'var(--border-silhouette-color)',\n        },\n        {\n          inCommand: state === InstrumentState.inCommand,\n          singleSided: options.singleSided,\n          narrow: options.narrow,\n        }\n      )\n    );\n  }\n\n  if (options.tunnel) {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-160 -64  320 128\" x=\"-160\" y=\"-64\">\n        <g transform=\"rotate(-90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  } else {\n    let viewBox = '-80 -160 160 320';\n    let y = -160;\n    if (options.singleDirection) {\n      viewBox = '-80 -300 160 320';\n      y = -320;\n    }\n    const top = topPropeller(height, tc.arrowColor, options.topPropeller);\n    const bottom = bottomPropeller(\n      options.singleDirectionHalfSize ? 0.5 : height,\n      options.bottomPropeller\n    );\n    return svg`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=${viewBox} x=\"-80\" y=${y} width=\"160\" height=\"320\">\n      ${top}\n      ${bottom}\n      ${thrusterSvg}\n    </svg>\n  `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n\nexport function convertThrustAdvices(\n  advices: LinearAdvice[],\n  thrust: number\n): {topAdvices: LinearAdviceRaw[]; bottomAdvices: LinearAdviceRaw[]} {\n  const rawAdvices: LinearAdviceRaw[] = advices.map((a) => {\n    const triggered = thrust >= a.min && thrust <= a.max;\n    let state: AdviceState;\n    if (triggered) {\n      state = AdviceState.triggered;\n    } else if (a.hinted) {\n      state = AdviceState.hinted;\n    } else {\n      state = AdviceState.regular;\n    }\n    return {\n      min: a.min,\n      max: a.max,\n      type: a.type,\n      state,\n      hinted: a.hinted,\n    };\n  });\n\n  const topAdvices = rawAdvices.filter((a) => a.min >= 0);\n  const bottomAdvices = rawAdvices\n    .filter((a) => a.max <= 0)\n    .map((a) => ({...a, min: -a.max, max: -a.min}));\n  return {topAdvices, bottomAdvices};\n}\n\nexport function thrusterColors(\n  options: {atSetpoint: boolean; touching: boolean},\n  state: InstrumentState\n) {\n  let boxColor = 'var(--instrument-enhanced-secondary-color)';\n  let setPointColor = 'var(--instrument-enhanced-primary-color)';\n  let arrowColor = 'var(--instrument-regular-secondary-color)';\n  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';\n  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';\n  let hideTicks = false;\n  if (options.atSetpoint) {\n    setPointColor = boxColor;\n  }\n  if (state === InstrumentState.active) {\n    boxColor = 'var(--instrument-regular-secondary-color)';\n    zeroLineColor = 'var(--instrument-regular-secondary-color)';\n    setPointColor = 'var(--instrument-regular-primary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    if (options.atSetpoint) {\n      setPointColor = boxColor;\n    }\n  } else if (state === InstrumentState.loading) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    hideTicks = true;\n  } else if (state === InstrumentState.off) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    hideTicks = true;\n    containerBackgroundColor = 'transparent';\n  }\n  return {\n    zeroLineColor,\n    boxColor,\n    containerBackgroundColor,\n    hideTicks,\n    setPointColor,\n    arrowColor,\n  };\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20240915195432",
+  "version": "0.0.15-dev-20240916185711",
   "type": "module",
   "repository": {
     "type": "git",

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/main-engine/main-engine.css

@@ -0,0 +1,17 @@
+* {
+    box-sizing: border-box;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.container>* {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

package/src/navigation-instruments/main-engine/main-engine.stories.ts

@@ -0,0 +1,54 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcMainEngine} from './main-engine';
+import './main-engine';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {InstrumentState} from '../types';
+
+const meta: Meta<typeof ObcMainEngine> = {
+  title: 'Navigation instruments/Main Engine',
+  tags: ['autodocs'],
+  component: 'obc-main-engine',
+  args: {
+    width: 352,
+    thrust: 50,
+    thrustSetpoint: 30,
+    speed: 50,
+    speedSetpoint: 30,
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    thrust: {control: {type: 'range', min: -100, max: 100, step: 1}},
+    thrustSetpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
+    speed: {control: {type: 'range', min: 0, max: 100, step: 1}},
+    speedSetpoint: {control: {type: 'range', min: 0, max: 100, step: 1}},
+    state: {
+      options: Object.values(InstrumentState),
+    },
+  },
+  decorators: [widthDecorator, beta6Decorator],
+} satisfies Meta<ObcMainEngine>;
+
+export default meta;
+type Story = StoryObj<ObcMainEngine>;
+
+export const InCommand: Story = {
+  args: {
+    state: InstrumentState.inCommand,
+  },
+};
+
+export const Active: Story = {
+  args: {
+    state: InstrumentState.active,
+  },
+};
+
+export const Off: Story = {
+  args: {
+    state: InstrumentState.off,
+    speed: 0,
+    thrust: 0,
+    speedSetpoint: 0,
+    thrustSetpoint: 0,
+  },
+};