@oicl/openbridge-webcomponents 2.0.0-next.100 → 2.0.0-next.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +2 -1
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +291 -399
- package/dist/bars-graphs/donut-chart/donut-chart.d.ts +18 -16
- package/dist/bars-graphs/donut-chart/donut-chart.d.ts.map +1 -1
- package/dist/bars-graphs/donut-chart/donut-chart.js.map +1 -1
- package/dist/bars-graphs/pie-chart/pie-chart.d.ts +14 -12
- package/dist/bars-graphs/pie-chart/pie-chart.d.ts.map +1 -1
- package/dist/bars-graphs/pie-chart/pie-chart.js.map +1 -1
- package/dist/bars-graphs/polar-chart/polar-chart.d.ts +19 -16
- package/dist/bars-graphs/polar-chart/polar-chart.d.ts.map +1 -1
- package/dist/bars-graphs/polar-chart/polar-chart.js.map +1 -1
- package/dist/bars-graphs/radial-bar-chart/radial-bar-chart.d.ts +8 -8
- package/dist/bars-graphs/radial-bar-chart/radial-bar-chart.d.ts.map +1 -1
- package/dist/bars-graphs/radial-bar-chart/radial-bar-chart.js.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.js +1 -1
- package/dist/building-blocks/alert-list/alert-list.js.map +1 -1
- package/dist/building-blocks/chart-line/chart-line-base.d.ts +8 -25
- package/dist/building-blocks/chart-line/chart-line-base.d.ts.map +1 -1
- package/dist/building-blocks/chart-line/chart-line-base.js.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts +20 -24
- package/dist/integration-systems/integration-bar/integration-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.js.map +1 -1
- package/dist/integration-systems/integration-button/integration-button.d.ts +15 -13
- package/dist/integration-systems/integration-button/integration-button.d.ts.map +1 -1
- package/dist/integration-systems/integration-button/integration-button.js.map +1 -1
- package/dist/navigation-instruments/compass/compass.d.ts +47 -30
- package/dist/navigation-instruments/compass/compass.d.ts.map +1 -1
- package/dist/navigation-instruments/compass/compass.js.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.d.ts +8 -9
- package/dist/navigation-instruments/compass-flat/compass-flat.d.ts.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.js.map +1 -1
- package/dist/navigation-instruments/gauge-trend/gauge-trend.d.ts +0 -5
- package/dist/navigation-instruments/gauge-trend/gauge-trend.d.ts.map +1 -1
- package/dist/navigation-instruments/gauge-trend/gauge-trend.js.map +1 -1
- package/dist/navigation-instruments/graph-mini/graph-mini.d.ts +1 -1
- package/dist/navigation-instruments/graph-mini/graph-mini.d.ts.map +1 -1
- package/dist/navigation-instruments/graph-mini/graph-mini.js.map +1 -1
- package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts +1 -1
- package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts.map +1 -1
- package/dist/navigation-instruments/indicator-graph/indicator-graph.js.map +1 -1
- package/dist/navigation-instruments/watch/watch.d.ts +16 -16
- package/dist/navigation-instruments/watch/watch.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/watch.js +1 -0
- package/dist/navigation-instruments/watch/watch.js.map +1 -1
- package/package.json +1 -1
|
@@ -44,14 +44,6 @@ export interface Label {
|
|
|
44
44
|
* - **Color priority**: Per-element priority for HDG, COG, and ROT via
|
|
45
45
|
* `priorityElements`.
|
|
46
46
|
*
|
|
47
|
-
* @property {number} heading - Current heading in degrees.
|
|
48
|
-
* @property {number} courseOverGround - Current COG in degrees.
|
|
49
|
-
* @property {RotType|undefined} rotType - ROT display mode: `'dots'`, `'bar'`, or `undefined` (hidden).
|
|
50
|
-
* @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (positive = starboard). Drives the bar extent and (after `× rotDotAnimationFactor`) the dot animation.
|
|
51
|
-
* @property {number} rotDotAnimationFactor - Visual amplification for the dot animation only. Default `18` (≈1 rpm at 20°/min).
|
|
52
|
-
* @property {number} rotationsPerMinute - **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead.
|
|
53
|
-
* @property {number} rotMaxValue - Bar-extent reference value in **degrees per minute**. Default `60` per ES-TRIN 2025/1 Art. 3.02.
|
|
54
|
-
* @property {number} rotArcExtent - Degrees of bar arc per max-value ROT (default 60).
|
|
55
47
|
*
|
|
56
48
|
* @ignition-base-height: 170px
|
|
57
49
|
* @ignition-base-width: 512px
|
|
@@ -59,7 +51,9 @@ export interface Label {
|
|
|
59
51
|
*/
|
|
60
52
|
export declare class ObcCompassFlat extends LitElement {
|
|
61
53
|
FOVIndicator: boolean;
|
|
54
|
+
/** Current heading in degrees. */
|
|
62
55
|
heading: number;
|
|
56
|
+
/** Current COG in degrees. */
|
|
63
57
|
courseOverGround: number;
|
|
64
58
|
tickInterval: number;
|
|
65
59
|
FOV: number;
|
|
@@ -67,6 +61,7 @@ export declare class ObcCompassFlat extends LitElement {
|
|
|
67
61
|
maxFOV: number;
|
|
68
62
|
priority: Priority;
|
|
69
63
|
priorityElements: CompassFlatPriorityElement[];
|
|
64
|
+
/** ROT display mode: `'dots'`, `'bar'`, or `undefined` (hidden). */
|
|
70
65
|
rotType: RotType | undefined;
|
|
71
66
|
/**
|
|
72
67
|
* Measured rate of turn in degrees per minute (positive = starboard).
|
|
@@ -80,6 +75,7 @@ export declare class ObcCompassFlat extends LitElement {
|
|
|
80
75
|
*/
|
|
81
76
|
rotDotAnimationFactor: number;
|
|
82
77
|
/**
|
|
78
|
+
* **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead.
|
|
83
79
|
* @deprecated Use `rateOfTurnDegreesPerMinute` instead.
|
|
84
80
|
* @availableWhen rotType!=undefined
|
|
85
81
|
*/
|
|
@@ -90,7 +86,10 @@ export declare class ObcCompassFlat extends LitElement {
|
|
|
90
86
|
* @availableWhen rotType!=undefined
|
|
91
87
|
*/
|
|
92
88
|
rotMaxValue: number;
|
|
93
|
-
/**
|
|
89
|
+
/**
|
|
90
|
+
* Degrees of bar arc per max-value ROT (default 60).
|
|
91
|
+
* @availableWhen rotType!=undefined
|
|
92
|
+
*/
|
|
94
93
|
rotArcExtent: number;
|
|
95
94
|
/** @availableWhen rotType!=undefined */
|
|
96
95
|
rotPortStarboard: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA0C,MAAM,KAAK,CAAC;AAIxE,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,OAAO,EAGR,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,OAAO,EAAC,CAAC;AAEjB,oBAAY,0BAA0B;IACpC,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,oBAAY,aAAa;IACvB,GAAG,MAAM;IACT,MAAM,KAAK;CACZ;AAED,oBAAY,UAAU;IACpB,OAAO,gDAAgD;CACxD;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,aAAa,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED
|
|
1
|
+
{"version":3,"file":"compass-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA0C,MAAM,KAAK,CAAC;AAIxE,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,OAAO,EAGR,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,OAAO,EAAC,CAAC;AAEjB,oBAAY,0BAA0B;IACpC,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,oBAAY,aAAa;IACvB,GAAG,MAAM;IACT,MAAM,KAAK;CACZ;AAED,oBAAY,UAAU;IACpB,OAAO,gDAAgD;CACxD;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,aAAa,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,cAAe,SAAQ,UAAU;IACjB,YAAY,EAAE,OAAO,CAAS;IACzD,kCAAkC;IACR,OAAO,SAAK;IACtC,8BAA8B;IACJ,gBAAgB,SAAK;IACrB,YAAY,SAAK;IACjB,GAAG,SAAM;IACT,MAAM,SAAM;IACZ,MAAM,SAAO;IACb,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,gBAAgB,EAAE,0BAA0B,EAAE,CAE5C;IACF,oEAAoE;IAC1C,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IACvD;;;;OAIG;IACuB,0BAA0B,EAAE,MAAM,GAAG,SAAS,CAAC;IACzE;;;OAGG;IACuB,qBAAqB,EAAE,MAAM,CAAM;IAC7D;;;;OAIG;IACuB,kBAAkB,EAAE,MAAM,CAAK;IACzD;;;;OAIG;IACuB,WAAW,EAAE,MAAM,CAAM;IACnD;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAAM;IACpD,wCAAwC;IACb,gBAAgB,EAAE,OAAO,CAAS;IAC7D,wCAAwC;IACd,iBAAiB,EAAE,MAAM,CAAyB;IAEnE,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,iBAAiB,CAAK;IAEvC,OAAO,CAAC,cAAc,CASnB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,cAAc;;;;;IAsCd,OAAO,CAAC,yBAAyB;IAiCjC,OAAO,CAAC,yBAAyB;IAajC,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,WAAW;IAOnB,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,CAAC,aAAa;IAMrB,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,MAAM;IAQL,MAAM;IAyDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, html, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {property, state} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat.js';\nimport '../watch-flat/watch-flat.js';\nimport {customElement} from '../../decorator.js';\nimport {Priority} from '../types.js';\nimport {\n RotType,\n LINEAR_DOT_ANGLE_SPACING,\n ROT_ZERO_DEADBAND_DEG,\n} from '../rate-of-turn/rot-renderer.js';\n\nexport {RotType};\n\nexport enum CompassFlatPriorityElement {\n hdg = 'hdg',\n cog = 'cog',\n rot = 'rot',\n}\n\nexport enum LabelPosition {\n top = -45,\n bottom = 50,\n}\n\nexport enum LabelStyle {\n regular = 'var(--instrument-tick-mark-secondary-color)',\n}\n\nexport interface Label {\n x: number;\n y: LabelPosition;\n text: string;\n}\n\n/**\n * `<obc-compass-flat>` — Horizontal strip compass with HDG/COG arrows and optional rate-of-turn indicator.\n *\n * Renders a flat (non-circular) compass strip that scrolls horizontally to\n * display the current heading. A filled HDG arrow sits at the center while a\n * hollow COG arrow is positioned at the angular difference. The strip\n * auto-scales its field of view so both arrows remain visible. Cardinal\n * labels (N, S, E, W) and tickmarks are generated at densities responsive to\n * the strip width.\n *\n * ## Features\n *\n * - **Auto-scaling FOV**: The visible compass range widens to keep both HDG\n * and COG arrows in view, bounded by `minFOV` / `maxFOV`.\n * - **HDG / COG arrows**: Filled (HDG) and hollow (COG) arrow SVGs positioned\n * along the strip.\n * - **FOV indicator**: Optional numeric labels showing the port/starboard\n * bearing range and current heading.\n * - **Rate of turn**: Animated linear ROT indicator (spinning dots or\n * horizontal bar) via `rotType`. When enabled, a bottom bar is added to\n * the strip to house the indicator.\n * - **Color priority**: Per-element priority for HDG, COG, and ROT via\n * `priorityElements`.\n *\n * @property {number} heading - Current heading in degrees.\n * @property {number} courseOverGround - Current COG in degrees.\n * @property {RotType|undefined} rotType - ROT display mode: `'dots'`, `'bar'`, or `undefined` (hidden).\n * @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (positive = starboard). Drives the bar extent and (after `× rotDotAnimationFactor`) the dot animation.\n * @property {number} rotDotAnimationFactor - Visual amplification for the dot animation only. Default `18` (≈1 rpm at 20°/min).\n * @property {number} rotationsPerMinute - **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead.\n * @property {number} rotMaxValue - Bar-extent reference value in **degrees per minute**. Default `60` per ES-TRIN 2025/1 Art. 3.02.\n * @property {number} rotArcExtent - Degrees of bar arc per max-value ROT (default 60).\n *\n * @ignition-base-height: 170px\n * @ignition-base-width: 512px\n * @stable\n */\n@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n @property({type: Boolean}) FOVIndicator: boolean = false;\n @property({type: Number}) heading = 0;\n @property({type: Number}) courseOverGround = 0;\n @property({type: Number}) tickInterval = 5;\n @property({type: Number}) FOV = 45;\n @property({type: Number}) minFOV = 45;\n @property({type: Number}) maxFOV = 180;\n @property({type: String}) priority: Priority = Priority.regular;\n @property({type: Array, attribute: false})\n priorityElements: CompassFlatPriorityElement[] = [\n CompassFlatPriorityElement.hdg,\n ];\n @property({type: String}) rotType: RotType | undefined;\n /**\n * Measured rate of turn in degrees per minute (positive = starboard).\n * When `undefined`, falls back to the deprecated `rotationsPerMinute`.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rateOfTurnDegreesPerMinute: number | undefined;\n /**\n * Visual amplification applied only to the spinning dot animation.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotDotAnimationFactor: number = 18;\n /**\n * @deprecated Use `rateOfTurnDegreesPerMinute` instead.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotationsPerMinute: number = 1;\n /**\n * Bar-extent reference value in **degrees per minute**. Default `60`\n * per ES-TRIN 2025/1 Art. 3.02.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotMaxValue: number = 60;\n /** @availableWhen rotType!=undefined */\n @property({type: Number}) rotArcExtent: number = 60;\n /** @availableWhen rotType!=undefined */\n @property({type: Boolean}) rotPortStarboard: boolean = false;\n /** @availableWhen rotType!=undefined */\n @property({type: Number}) rotAtZeroDeadband: number = ROT_ZERO_DEADBAND_DEG;\n\n @state() private containerWidth = 0;\n @state() private maxContainerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n // Made by chatGPT so that the text is inside the wrapper\n this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;\n this.containerWidth = Math.min(\n entry.contentRect.width,\n this.maxContainerWidth\n );\n }\n });\n\n override connectedCallback() {\n super.connectedCallback();\n this.resizeObserver.observe(this);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n generateLabels() {\n if (this.containerWidth < 192) {\n return [];\n } else if (this.containerWidth <= 300) {\n return [\n {x: -180, y: LabelPosition.top, text: 'S'},\n {x: -90, y: LabelPosition.top, text: 'W'},\n {x: 0, y: LabelPosition.top, text: 'N'},\n {x: 90, y: LabelPosition.top, text: 'E'},\n {x: 180, y: LabelPosition.top, text: 'S'},\n {x: 270, y: LabelPosition.top, text: 'W'},\n {x: 360, y: LabelPosition.top, text: 'N'},\n {x: 450, y: LabelPosition.top, text: 'E'},\n {x: 540, y: LabelPosition.top, text: 'S'},\n ];\n } else {\n return [\n {x: -180, y: LabelPosition.top, text: 'S'},\n {x: -135, y: LabelPosition.top, text: 'SW'},\n {x: -90, y: LabelPosition.top, text: 'W'},\n {x: -45, y: LabelPosition.top, text: 'NW'},\n {x: 0, y: LabelPosition.top, text: 'N'},\n {x: 45, y: LabelPosition.top, text: 'NE'},\n {x: 90, y: LabelPosition.top, text: 'E'},\n {x: 135, y: LabelPosition.top, text: 'SE'},\n {x: 180, y: LabelPosition.top, text: 'S'},\n {x: 225, y: LabelPosition.top, text: 'SW'},\n {x: 270, y: LabelPosition.top, text: 'W'},\n {x: 315, y: LabelPosition.top, text: 'NW'},\n {x: 360, y: LabelPosition.top, text: 'N'},\n {x: 405, y: LabelPosition.top, text: 'NE'},\n {x: 450, y: LabelPosition.top, text: 'E'},\n {x: 495, y: LabelPosition.top, text: 'SE'},\n {x: 540, y: LabelPosition.top, text: 'S'},\n ];\n }\n }\n\n private generateIntervalTickmarks(scale: number): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n let cardinalInterval = 90;\n\n if (this.containerWidth > 300) {\n cardinalInterval = 45;\n } else if (this.containerWidth < 192) {\n cardinalInterval = 0;\n }\n\n // Guard against zero/negative/non-finite interval to prevent infinite loops\n if (\n !this.tickInterval ||\n this.tickInterval <= 0 ||\n !Number.isFinite(this.tickInterval)\n ) {\n return tickmarks;\n }\n\n for (\n let angle = -180;\n angle < this.maxFOV * 3;\n angle += this.tickInterval\n ) {\n if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\n continue;\n }\n tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\n }\n\n return tickmarks;\n }\n\n private generateCardinalTickmarks(\n scale: number,\n labels: Label[]\n ): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n\n for (const label of labels) {\n tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n }\n\n return tickmarks;\n }\n\n private generateTickmarks(scale: number, labels: Label[]): Tickmark[] {\n return [\n ...this.generateCardinalTickmarks(scale, labels),\n ...this.generateIntervalTickmarks(scale),\n ];\n }\n\n private renderFOVIndicator(): SVGTemplateResult[] {\n const indicators: SVGTemplateResult[] = [];\n\n const maxAdjustment = 10;\n const minContainerWidth = 300;\n const maxContainerWidth = 512;\n\n let yAdjustment = 0;\n if (this.containerWidth < maxContainerWidth) {\n const widthRange = maxContainerWidth - minContainerWidth;\n const scaleFactor =\n (maxContainerWidth - this.containerWidth) / widthRange;\n yAdjustment = scaleFactor * maxAdjustment;\n }\n\n const y = LabelPosition.bottom + yAdjustment + (this.rotType ? 12 : 0);\n\n indicators.push(svg`\n <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\n ${-this.FOV}\\u00B0\n </text>`);\n\n indicators.push(svg`\n <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\n ${this.heading}\\u00B0\n </text>`);\n\n indicators.push(svg`\n <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\n ${this.FOV}\\u00B0\n </text>`);\n\n return indicators;\n }\n\n private priorityFor(element: CompassFlatPriorityElement): Priority {\n const selected = Array.isArray(this.priorityElements)\n ? this.priorityElements\n : [];\n return selected.includes(element) ? this.priority : Priority.regular;\n }\n\n private get _effectiveRotDegPerMin(): number {\n return this.rateOfTurnDegreesPerMinute ?? this.rotationsPerMinute;\n }\n\n private arrowColorFor(element: CompassFlatPriorityElement): string {\n return this.priorityFor(element) === Priority.enhanced\n ? 'var(--instrument-enhanced-secondary-color)'\n : 'var(--instrument-regular-secondary-color)';\n }\n\n private get HDGSvg(): SVGTemplateResult {\n return svg`<g transform=\"translate(-24, -74)\">\n <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"${this.arrowColorFor(CompassFlatPriorityElement.hdg)}\" stroke=\"var(--border-silhouette-color)\"/>\n </g>`;\n }\n\n private COGSvg(translation: number): SVGTemplateResult {\n return svg`\n <g transform=\"translate(${-24 + translation}, -74)\">\n <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"${this.arrowColorFor(CompassFlatPriorityElement.cog)}\" stroke=\"var(--border-silhouette-color)\"/>\n </g>\n `;\n }\n\n override render() {\n let angleDiff = this.courseOverGround - this.heading;\n\n if (angleDiff > this.maxFOV) {\n angleDiff -= 360;\n } else if (angleDiff < -this.maxFOV) {\n angleDiff += 360;\n }\n\n this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\n\n const baseOffset = 5;\n const translationScale = (baseOffset * 35) / this.FOV;\n\n const translation = angleDiff * translationScale;\n const labels = this.generateLabels();\n const tickmarks = this.generateTickmarks(translationScale, labels);\n const scaledLabels = labels.map((l) => ({\n ...l,\n x: l.x * translationScale,\n }));\n\n const hasBottomBar = !!this.rotType;\n const arrowViewBoxY = hasBottomBar\n ? -128 + Math.round((12 * 384) / 352)\n : -128;\n const viewBox = `-192 ${arrowViewBoxY} 384 128`;\n\n return html`\n <div class=\"container\" style=\"max-width:${this.maxContainerWidth}px\">\n <obc-watch-flat\n .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []}\n .labels=${scaledLabels}\n .rotation=${this.heading}\n .tickmarks=${tickmarks}\n .tickmarkSpacing=${translationScale}\n .bottomBar=${!!this.rotType}\n .rotType=${this.rotType}\n .rotStartX=${0}\n .rotEndX=${(this._effectiveRotDegPerMin / (this.rotMaxValue || 1)) *\n this.rotArcExtent *\n translationScale}\n .rotDotSpacing=${LINEAR_DOT_ANGLE_SPACING * translationScale}\n .rateOfTurnDegreesPerMinute=${this.rateOfTurnDegreesPerMinute}\n .rotDotAnimationFactor=${this.rotDotAnimationFactor}\n .rotationsPerMinute=${this.rotationsPerMinute}\n .rotPriority=${this.priorityFor(CompassFlatPriorityElement.rot)}\n .rotPortStarboard=${this.rotPortStarboard}\n .rotAtZeroDeadband=${this.rotAtZeroDeadband * translationScale}\n ></obc-watch-flat>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\">\n ${this.HDGSvg}${this.COGSvg(translation)}\n </svg>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-compass-flat': ObcCompassFlat;\n }\n}\n"],"names":["CompassFlatPriorityElement","LabelPosition","LabelStyle"],"mappings":";;;;;;;;;;;;;;;;;;;AAeO,IAAK,+CAAAA,gCAAL;AACLA,8BAAA,KAAA,IAAM;AACNA,8BAAA,KAAA,IAAM;AACNA,8BAAA,KAAA,IAAM;AAHI,SAAAA;AAAA,GAAA,8BAAA,CAAA,CAAA;AAML,IAAK,kCAAAC,mBAAL;AACLA,iBAAAA,eAAA,SAAM,GAAA,IAAN;AACAA,iBAAAA,eAAA,YAAS,EAAA,IAAT;AAFU,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAKL,IAAK,+BAAAC,gBAAL;AACLA,cAAA,SAAA,IAAU;AADA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAgDL,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,eAAwB;AACzB,SAAA,UAAU;AACV,SAAA,mBAAmB;AACnB,SAAA,eAAe;AACf,SAAA,MAAM;AACN,SAAA,SAAS;AACT,SAAA,SAAS;AACT,SAAA,WAAqB,SAAS;AAExD,SAAA,mBAAiD;AAAA,MAC/C;AAAA;AAAA,IAAA;AAawB,SAAA,wBAAgC;AAKhC,SAAA,qBAA6B;AAM7B,SAAA,cAAsB;AAEtB,SAAA,eAAuB;AAEtB,SAAA,mBAA4B;AAE7B,SAAA,oBAA4B;AAE7C,SAAQ,iBAAiB;AACzB,SAAQ,oBAAoB;AAErC,SAAQ,iBAAiC,IAAI,eAAe,CAAC,YAAY;AACvE,iBAAW,SAAS,SAAS;AAE3B,aAAK,oBAAoB,UAAU,OAAO,MAAM,YAAY;AAC5D,aAAK,iBAAiB,KAAK;AAAA,UACzB,MAAM,YAAY;AAAA,UAClB,KAAK;AAAA,QAAA;AAAA,MAET;AAAA,IACF,CAAC;AAAA,EAAA;AAAA,EAEQ,oBAAoB;AAC3B,UAAM,kBAAA;AACN,SAAK,eAAe,QAAQ,IAAI;AAAA,EAClC;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA;AACN,SAAK,eAAe,UAAU,IAAI;AAAA,EACpC;AAAA,EAEA,iBAAiB;AACf,QAAI,KAAK,iBAAiB,KAAK;AAC7B,aAAO,CAAA;AAAA,IACT,WAAW,KAAK,kBAAkB,KAAK;AACrC,aAAO;AAAA,QACL,EAAC,GAAG,MAAM,GAAG,KAAmB,MAAM,IAAA;AAAA,QACtC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,GAAG,GAAG,KAAmB,MAAM,IAAA;AAAA,QACnC,EAAC,GAAG,IAAI,GAAG,KAAmB,MAAM,IAAA;AAAA,QACpC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,MAAG;AAAA,IAE5C,OAAO;AACL,aAAO;AAAA,QACL,EAAC,GAAG,MAAM,GAAG,KAAmB,MAAM,IAAA;AAAA,QACtC,EAAC,GAAG,MAAM,GAAG,KAAmB,MAAM,KAAA;AAAA,QACtC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,KAAA;AAAA,QACrC,EAAC,GAAG,GAAG,GAAG,KAAmB,MAAM,IAAA;AAAA,QACnC,EAAC,GAAG,IAAI,GAAG,KAAmB,MAAM,KAAA;AAAA,QACpC,EAAC,GAAG,IAAI,GAAG,KAAmB,MAAM,IAAA;AAAA,QACpC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,KAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,KAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,KAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,KAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,KAAA;AAAA,QACrC,EAAC,GAAG,KAAK,GAAG,KAAmB,MAAM,IAAA;AAAA,MAAG;AAAA,IAE5C;AAAA,EACF;AAAA,EAEQ,0BAA0B,OAA2B;AAC3D,UAAM,YAAwB,CAAA;AAC9B,QAAI,mBAAmB;AAEvB,QAAI,KAAK,iBAAiB,KAAK;AAC7B,yBAAmB;AAAA,IACrB,WAAW,KAAK,iBAAiB,KAAK;AACpC,yBAAmB;AAAA,IACrB;AAGA,QACE,CAAC,KAAK,gBACN,KAAK,gBAAgB,KACrB,CAAC,OAAO,SAAS,KAAK,YAAY,GAClC;AACA,aAAO;AAAA,IACT;AAEA,aACM,QAAQ,MACZ,QAAQ,KAAK,SAAS,GACtB,SAAS,KAAK,cACd;AACA,UAAI,qBAAqB,KAAK,QAAQ,qBAAqB,GAAG;AAC5D;AAAA,MACF;AACA,gBAAU,KAAK,EAAC,OAAO,QAAQ,OAAO,MAAM,aAAa,WAAU;AAAA,IACrE;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,0BACN,OACA,QACY;AACZ,UAAM,YAAwB,CAAA;AAE9B,eAAW,SAAS,QAAQ;AAC1B,gBAAU,KAAK,EAAC,OAAO,MAAM,IAAI,OAAO,MAAM,aAAa,MAAK;AAAA,IAClE;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,kBAAkB,OAAe,QAA6B;AACpE,WAAO;AAAA,MACL,GAAG,KAAK,0BAA0B,OAAO,MAAM;AAAA,MAC/C,GAAG,KAAK,0BAA0B,KAAK;AAAA,IAAA;AAAA,EAE3C;AAAA,EAEQ,qBAA0C;AAChD,UAAM,aAAkC,CAAA;AAExC,UAAM,gBAAgB;AACtB,UAAM,oBAAoB;AAC1B,UAAM,oBAAoB;AAE1B,QAAI,cAAc;AAClB,QAAI,KAAK,iBAAiB,mBAAmB;AAC3C,YAAM,aAAa,oBAAoB;AACvC,YAAM,eACH,oBAAoB,KAAK,kBAAkB;AAC9C,oBAAc,cAAc;AAAA,IAC9B;AAEA,UAAM,IAAI,KAAuB,eAAe,KAAK,UAAU,KAAK;AAEpE,eAAW,KAAK;AAAA,6BACS,CAAC,4BAA4B,6CAAA;AAAA,cAC5C,CAAC,KAAK,GAAG;AAAA,kBACL;AAEd,eAAW,KAAK;AAAA,0BACM,CAAC,uBAAuB,6CAAA;AAAA,cACpC,KAAK,OAAO;AAAA,kBACR;AAEd,eAAW,KAAK;AAAA,4BACQ,CAAC,6BAA6B,6CAAA;AAAA,cAC5C,KAAK,GAAG;AAAA,kBACJ;AAEd,WAAO;AAAA,EACT;AAAA,EAEQ,YAAY,SAA+C;AACjE,UAAM,WAAW,MAAM,QAAQ,KAAK,gBAAgB,IAChD,KAAK,mBACL,CAAA;AACJ,WAAO,SAAS,SAAS,OAAO,IAAI,KAAK,WAAW,SAAS;AAAA,EAC/D;AAAA,EAEA,IAAY,yBAAiC;AAC3C,WAAO,KAAK,8BAA8B,KAAK;AAAA,EACjD;AAAA,EAEQ,cAAc,SAA6C;AACjE,WAAO,KAAK,YAAY,OAAO,MAAM,SAAS,WAC1C,+CACA;AAAA,EACN;AAAA,EAEA,IAAY,SAA4B;AACtC,WAAO;AAAA,4VACiV,KAAK;AAAA,MAAc;AAAA;AAAA,KAA+B;AAAA;AAAA,EAE5Y;AAAA,EAEQ,OAAO,aAAwC;AACrD,WAAO;AAAA,gCACqB,MAAM,WAAW;AAAA,wgBACud,KAAK;AAAA,MAAc;AAAA;AAAA,KAA+B;AAAA;AAAA;AAAA,EAGxjB;AAAA,EAES,SAAS;AAChB,QAAI,YAAY,KAAK,mBAAmB,KAAK;AAE7C,QAAI,YAAY,KAAK,QAAQ;AAC3B,mBAAa;AAAA,IACf,WAAW,YAAY,CAAC,KAAK,QAAQ;AACnC,mBAAa;AAAA,IACf;AAEA,SAAK,MAAM,KAAK,IAAI,KAAK,QAAQ,KAAK,IAAI,SAAS,CAAC;AAEpD,UAAM,aAAa;AACnB,UAAM,mBAAoB,aAAa,KAAM,KAAK;AAElD,UAAM,cAAc,YAAY;AAChC,UAAM,SAAS,KAAK,eAAA;AACpB,UAAM,YAAY,KAAK,kBAAkB,kBAAkB,MAAM;AACjE,UAAM,eAAe,OAAO,IAAI,CAAC,OAAO;AAAA,MACtC,GAAG;AAAA,MACH,GAAG,EAAE,IAAI;AAAA,IAAA,EACT;AAEF,UAAM,eAAe,CAAC,CAAC,KAAK;AAC5B,UAAM,gBAAgB,eAClB,OAAO,KAAK,MAAO,KAAK,MAAO,GAAG,IAClC;AACJ,UAAM,UAAU,QAAQ,aAAa;AAErC,WAAO;AAAA,gDACqC,KAAK,iBAAiB;AAAA;AAAA,0BAE5C,KAAK,eAAe,KAAK,mBAAA,IAAuB,CAAA,CAAE;AAAA,oBACxD,YAAY;AAAA,sBACV,KAAK,OAAO;AAAA,uBACX,SAAS;AAAA,6BACH,gBAAgB;AAAA,uBACtB,CAAC,CAAC,KAAK,OAAO;AAAA,qBAChB,KAAK,OAAO;AAAA,uBACV,CAAC;AAAA,qBACF,KAAK,0BAA0B,KAAK,eAAe,KAC/D,KAAK,eACL,gBAAgB;AAAA,2BACC,2BAA2B,gBAAgB;AAAA,wCAC9B,KAAK,0BAA0B;AAAA,mCACpC,KAAK,qBAAqB;AAAA,gCAC7B,KAAK,kBAAkB;AAAA,yBAC9B,KAAK;AAAA,MAAY;AAAA;AAAA,IAAA,CAA+B;AAAA,8BAC3C,KAAK,gBAAgB;AAAA,+BACpB,KAAK,oBAAoB,gBAAgB;AAAA;AAAA,uBAEjD,OAAO;AAAA,YAClB,KAAK,MAAM,GAAG,KAAK,OAAO,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,EAIhD;AAGF;AA1Ra,eAyRK,SAAS,UAAU,cAAc;AAxRtB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,eACgB,WAAA,gBAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,eAEe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,eAGe,WAAA,oBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,eAIe,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,eAKe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,eAMe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,eAOe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,eAQe,WAAA,YAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAT9B,eAUX,WAAA,oBAAA,CAAA;AAG0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,eAae,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAnBb,eAmBe,WAAA,8BAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxBb,eAwBe,WAAA,yBAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA7Bb,eA6Be,WAAA,sBAAA,CAAA;AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAnCb,eAmCe,WAAA,eAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArCb,eAqCe,WAAA,gBAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvCd,eAuCgB,WAAA,oBAAA,CAAA;AAED,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzCb,eAyCe,WAAA,qBAAA,CAAA;AAET,gBAAA;AAAA,EAAhB,MAAA;AAAM,GA3CI,eA2CM,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAAhB,MAAA;AAAM,GA5CI,eA4CM,WAAA,qBAAA,CAAA;AA5CN,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
|
|
1
|
+
{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, html, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {property, state} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat.js';\nimport '../watch-flat/watch-flat.js';\nimport {customElement} from '../../decorator.js';\nimport {Priority} from '../types.js';\nimport {\n RotType,\n LINEAR_DOT_ANGLE_SPACING,\n ROT_ZERO_DEADBAND_DEG,\n} from '../rate-of-turn/rot-renderer.js';\n\nexport {RotType};\n\nexport enum CompassFlatPriorityElement {\n hdg = 'hdg',\n cog = 'cog',\n rot = 'rot',\n}\n\nexport enum LabelPosition {\n top = -45,\n bottom = 50,\n}\n\nexport enum LabelStyle {\n regular = 'var(--instrument-tick-mark-secondary-color)',\n}\n\nexport interface Label {\n x: number;\n y: LabelPosition;\n text: string;\n}\n\n/**\n * `<obc-compass-flat>` — Horizontal strip compass with HDG/COG arrows and optional rate-of-turn indicator.\n *\n * Renders a flat (non-circular) compass strip that scrolls horizontally to\n * display the current heading. A filled HDG arrow sits at the center while a\n * hollow COG arrow is positioned at the angular difference. The strip\n * auto-scales its field of view so both arrows remain visible. Cardinal\n * labels (N, S, E, W) and tickmarks are generated at densities responsive to\n * the strip width.\n *\n * ## Features\n *\n * - **Auto-scaling FOV**: The visible compass range widens to keep both HDG\n * and COG arrows in view, bounded by `minFOV` / `maxFOV`.\n * - **HDG / COG arrows**: Filled (HDG) and hollow (COG) arrow SVGs positioned\n * along the strip.\n * - **FOV indicator**: Optional numeric labels showing the port/starboard\n * bearing range and current heading.\n * - **Rate of turn**: Animated linear ROT indicator (spinning dots or\n * horizontal bar) via `rotType`. When enabled, a bottom bar is added to\n * the strip to house the indicator.\n * - **Color priority**: Per-element priority for HDG, COG, and ROT via\n * `priorityElements`.\n *\n *\n * @ignition-base-height: 170px\n * @ignition-base-width: 512px\n * @stable\n */\n@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n @property({type: Boolean}) FOVIndicator: boolean = false;\n /** Current heading in degrees. */\n @property({type: Number}) heading = 0;\n /** Current COG in degrees. */\n @property({type: Number}) courseOverGround = 0;\n @property({type: Number}) tickInterval = 5;\n @property({type: Number}) FOV = 45;\n @property({type: Number}) minFOV = 45;\n @property({type: Number}) maxFOV = 180;\n @property({type: String}) priority: Priority = Priority.regular;\n @property({type: Array, attribute: false})\n priorityElements: CompassFlatPriorityElement[] = [\n CompassFlatPriorityElement.hdg,\n ];\n /** ROT display mode: `'dots'`, `'bar'`, or `undefined` (hidden). */\n @property({type: String}) rotType: RotType | undefined;\n /**\n * Measured rate of turn in degrees per minute (positive = starboard).\n * When `undefined`, falls back to the deprecated `rotationsPerMinute`.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rateOfTurnDegreesPerMinute: number | undefined;\n /**\n * Visual amplification applied only to the spinning dot animation.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotDotAnimationFactor: number = 18;\n /**\n * **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead.\n * @deprecated Use `rateOfTurnDegreesPerMinute` instead.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotationsPerMinute: number = 1;\n /**\n * Bar-extent reference value in **degrees per minute**. Default `60`\n * per ES-TRIN 2025/1 Art. 3.02.\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotMaxValue: number = 60;\n /**\n * Degrees of bar arc per max-value ROT (default 60).\n * @availableWhen rotType!=undefined\n */\n @property({type: Number}) rotArcExtent: number = 60;\n /** @availableWhen rotType!=undefined */\n @property({type: Boolean}) rotPortStarboard: boolean = false;\n /** @availableWhen rotType!=undefined */\n @property({type: Number}) rotAtZeroDeadband: number = ROT_ZERO_DEADBAND_DEG;\n\n @state() private containerWidth = 0;\n @state() private maxContainerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n // Made by chatGPT so that the text is inside the wrapper\n this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;\n this.containerWidth = Math.min(\n entry.contentRect.width,\n this.maxContainerWidth\n );\n }\n });\n\n override connectedCallback() {\n super.connectedCallback();\n this.resizeObserver.observe(this);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n generateLabels() {\n if (this.containerWidth < 192) {\n return [];\n } else if (this.containerWidth <= 300) {\n return [\n {x: -180, y: LabelPosition.top, text: 'S'},\n {x: -90, y: LabelPosition.top, text: 'W'},\n {x: 0, y: LabelPosition.top, text: 'N'},\n {x: 90, y: LabelPosition.top, text: 'E'},\n {x: 180, y: LabelPosition.top, text: 'S'},\n {x: 270, y: LabelPosition.top, text: 'W'},\n {x: 360, y: LabelPosition.top, text: 'N'},\n {x: 450, y: LabelPosition.top, text: 'E'},\n {x: 540, y: LabelPosition.top, text: 'S'},\n ];\n } else {\n return [\n {x: -180, y: LabelPosition.top, text: 'S'},\n {x: -135, y: LabelPosition.top, text: 'SW'},\n {x: -90, y: LabelPosition.top, text: 'W'},\n {x: -45, y: LabelPosition.top, text: 'NW'},\n {x: 0, y: LabelPosition.top, text: 'N'},\n {x: 45, y: LabelPosition.top, text: 'NE'},\n {x: 90, y: LabelPosition.top, text: 'E'},\n {x: 135, y: LabelPosition.top, text: 'SE'},\n {x: 180, y: LabelPosition.top, text: 'S'},\n {x: 225, y: LabelPosition.top, text: 'SW'},\n {x: 270, y: LabelPosition.top, text: 'W'},\n {x: 315, y: LabelPosition.top, text: 'NW'},\n {x: 360, y: LabelPosition.top, text: 'N'},\n {x: 405, y: LabelPosition.top, text: 'NE'},\n {x: 450, y: LabelPosition.top, text: 'E'},\n {x: 495, y: LabelPosition.top, text: 'SE'},\n {x: 540, y: LabelPosition.top, text: 'S'},\n ];\n }\n }\n\n private generateIntervalTickmarks(scale: number): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n let cardinalInterval = 90;\n\n if (this.containerWidth > 300) {\n cardinalInterval = 45;\n } else if (this.containerWidth < 192) {\n cardinalInterval = 0;\n }\n\n // Guard against zero/negative/non-finite interval to prevent infinite loops\n if (\n !this.tickInterval ||\n this.tickInterval <= 0 ||\n !Number.isFinite(this.tickInterval)\n ) {\n return tickmarks;\n }\n\n for (\n let angle = -180;\n angle < this.maxFOV * 3;\n angle += this.tickInterval\n ) {\n if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\n continue;\n }\n tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\n }\n\n return tickmarks;\n }\n\n private generateCardinalTickmarks(\n scale: number,\n labels: Label[]\n ): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n\n for (const label of labels) {\n tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n }\n\n return tickmarks;\n }\n\n private generateTickmarks(scale: number, labels: Label[]): Tickmark[] {\n return [\n ...this.generateCardinalTickmarks(scale, labels),\n ...this.generateIntervalTickmarks(scale),\n ];\n }\n\n private renderFOVIndicator(): SVGTemplateResult[] {\n const indicators: SVGTemplateResult[] = [];\n\n const maxAdjustment = 10;\n const minContainerWidth = 300;\n const maxContainerWidth = 512;\n\n let yAdjustment = 0;\n if (this.containerWidth < maxContainerWidth) {\n const widthRange = maxContainerWidth - minContainerWidth;\n const scaleFactor =\n (maxContainerWidth - this.containerWidth) / widthRange;\n yAdjustment = scaleFactor * maxAdjustment;\n }\n\n const y = LabelPosition.bottom + yAdjustment + (this.rotType ? 12 : 0);\n\n indicators.push(svg`\n <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\n ${-this.FOV}\\u00B0\n </text>`);\n\n indicators.push(svg`\n <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\n ${this.heading}\\u00B0\n </text>`);\n\n indicators.push(svg`\n <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\n ${this.FOV}\\u00B0\n </text>`);\n\n return indicators;\n }\n\n private priorityFor(element: CompassFlatPriorityElement): Priority {\n const selected = Array.isArray(this.priorityElements)\n ? this.priorityElements\n : [];\n return selected.includes(element) ? this.priority : Priority.regular;\n }\n\n private get _effectiveRotDegPerMin(): number {\n return this.rateOfTurnDegreesPerMinute ?? this.rotationsPerMinute;\n }\n\n private arrowColorFor(element: CompassFlatPriorityElement): string {\n return this.priorityFor(element) === Priority.enhanced\n ? 'var(--instrument-enhanced-secondary-color)'\n : 'var(--instrument-regular-secondary-color)';\n }\n\n private get HDGSvg(): SVGTemplateResult {\n return svg`<g transform=\"translate(-24, -74)\">\n <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"${this.arrowColorFor(CompassFlatPriorityElement.hdg)}\" stroke=\"var(--border-silhouette-color)\"/>\n </g>`;\n }\n\n private COGSvg(translation: number): SVGTemplateResult {\n return svg`\n <g transform=\"translate(${-24 + translation}, -74)\">\n <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"${this.arrowColorFor(CompassFlatPriorityElement.cog)}\" stroke=\"var(--border-silhouette-color)\"/>\n </g>\n `;\n }\n\n override render() {\n let angleDiff = this.courseOverGround - this.heading;\n\n if (angleDiff > this.maxFOV) {\n angleDiff -= 360;\n } else if (angleDiff < -this.maxFOV) {\n angleDiff += 360;\n }\n\n this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\n\n const baseOffset = 5;\n const translationScale = (baseOffset * 35) / this.FOV;\n\n const translation = angleDiff * translationScale;\n const labels = this.generateLabels();\n const tickmarks = this.generateTickmarks(translationScale, labels);\n const scaledLabels = labels.map((l) => ({\n ...l,\n x: l.x * translationScale,\n }));\n\n const hasBottomBar = !!this.rotType;\n const arrowViewBoxY = hasBottomBar\n ? -128 + Math.round((12 * 384) / 352)\n : -128;\n const viewBox = `-192 ${arrowViewBoxY} 384 128`;\n\n return html`\n <div class=\"container\" style=\"max-width:${this.maxContainerWidth}px\">\n <obc-watch-flat\n .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []}\n .labels=${scaledLabels}\n .rotation=${this.heading}\n .tickmarks=${tickmarks}\n .tickmarkSpacing=${translationScale}\n .bottomBar=${!!this.rotType}\n .rotType=${this.rotType}\n .rotStartX=${0}\n .rotEndX=${(this._effectiveRotDegPerMin / (this.rotMaxValue || 1)) *\n this.rotArcExtent *\n translationScale}\n .rotDotSpacing=${LINEAR_DOT_ANGLE_SPACING * translationScale}\n .rateOfTurnDegreesPerMinute=${this.rateOfTurnDegreesPerMinute}\n .rotDotAnimationFactor=${this.rotDotAnimationFactor}\n .rotationsPerMinute=${this.rotationsPerMinute}\n .rotPriority=${this.priorityFor(CompassFlatPriorityElement.rot)}\n .rotPortStarboard=${this.rotPortStarboard}\n .rotAtZeroDeadband=${this.rotAtZeroDeadband * translationScale}\n ></obc-watch-flat>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\">\n ${this.HDGSvg}${this.COGSvg(translation)}\n </svg>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-compass-flat': ObcCompassFlat;\n }\n}\n"],"names":["CompassFlatPriorityElement","LabelPosition","LabelStyle"],"mappings":"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"}
|
|
@@ -98,11 +98,6 @@ declare const ObcGaugeTrend_base: (new (...args: any[]) => import('../../svghelp
|
|
|
98
98
|
* ></obc-gauge-trend>
|
|
99
99
|
* ```
|
|
100
100
|
*
|
|
101
|
-
* @property {number} width - Chart width in pixels (defines aspect ratio)
|
|
102
|
-
* @property {number} height - Chart height in pixels (defines aspect ratio)
|
|
103
|
-
* @property {boolean} enhanced - Use enhanced color palette for chart and scales
|
|
104
|
-
* @property {InstrumentState} state - Instrument state (automatically applied to scale)
|
|
105
|
-
* @property {boolean} chartFill - Enable chart area fill (default: false for line-only)
|
|
106
101
|
*
|
|
107
102
|
* Setpoint properties are inherited from {@link SetpointMixin}.
|
|
108
103
|
* These are forwarded to the internal `obc-bar-vertical` scale:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-trend.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAKjB,MAAM,qDAAqD,CAAC;AAE7D,OAAO,EACL,QAAQ,EAGR,SAAS,EACV,MAAM,oDAAoD,CAAC;AAC5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,oDAAoD,CAAC;AAG5D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,CAAC;;AAE7B
|
|
1
|
+
{"version":3,"file":"gauge-trend.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAKjB,MAAM,qDAAqD,CAAC;AAE7D,OAAO,EACL,QAAQ,EAGR,SAAS,EACV,MAAM,oDAAoD,CAAC;AAC5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,oDAAoD,CAAC;AAG5D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,CAAC;;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGG;AACH,qBACa,aAAc,SAAQ,kBAA+B;IAChE,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,qBAAqB,CAAC,CAAY;;IA6C3B,YAAY;IAWlB,oBAAoB;IAQ7B,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,4BAA4B;IAkFpC;;;;;;;OAOG;IAEH,SAAS,EAAE,SAAS,CAAqB;IAEzC;;;OAGG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,QAAQ,SAAO;IAEf;;;OAGG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;OAGG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAa;IAE3B;;;;;OAKG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;;;;OASG;IAEH,QAAQ,EAAE,QAAQ,CAAiB;IAEnC;;;;;OAKG;IAEH,OAAO,SAAK;IAEZ;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAa;IAE7B;;;OAGG;IAEH,MAAM,EAAE,YAAY,EAAE,CAAM;IAE5B;;OAEG;IAEH,uBAAuB,CAAC,EAAE,MAAM,CAAa;IAO7C;;;OAGG;IAEH,yBAAyB,SAAO;IAEhC;;;OAGG;IAEH,wBAAwB,CAAC,EAAE,MAAM,CAAa;IAE9C;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;OAEG;cACgB,eAAe,IAAI,OAAO;IAI7C;;;OAGG;cACgB,WAAW,IAAI,MAAM,GAAG,SAAS;IAIpD;;OAEG;cACgB,WAAW,IAAI,OAAO;IAIhC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAuD7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;CAkDpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-trend.js","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"sourcesContent":["import {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcChartLineBase,\n XAxisType,\n YAxisPosition,\n LineMode,\n TimeDisplay,\n} from '../../building-blocks/chart-line/chart-line-base.js';\nimport {BorderRadiusPosition} from '../types.js';\nimport {\n FillMode,\n AdvicePosition,\n BarContainerStyle,\n ScaleType,\n} from '../../building-blocks/bar-vertical/bar-vertical.js';\nimport type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/bar-vertical/bar-vertical.js';\n\n// Re-export FillMode and ScaleType for user convenience\nexport {FillMode, ScaleType};\n\n/**\n * Gauge Trend - A navigation instrument combining a line/area chart with an integrated vertical scale.\n *\n * This is a high-level, self-contained component that combines:\n * - A line/area chart (based on `ObcChartLineBase`) with configurable fill mode\n * - An integrated vertical scale (`obc-bar-vertical`) on the right side\n *\n * The component is designed for displaying time-series or categorical trend data alongside a calibrated\n * vertical measurement scale, commonly used in maritime navigation instruments.\n *\n * ## Architecture\n *\n * Internally composed of:\n * - **Base**: `ObcChartLineBase` (line/area graph functionality)\n * - **Right scale**: `obc-bar-vertical` (external scale component)\n *\n * ## Locked Configuration (not user-configurable)\n * - Fixed aspect ratio scaling: always enabled\n * - Instrument mode: always enabled (8px border radius)\n * - X-axis type: auto-detected — 'category' for `{label, value}` data,\n * 'time' for `{x, value}` data (uneven intervals position proportionally).\n * Assigning `xAxisType` explicitly disables auto-detection.\n * - Line mode: always 'smooth'\n * - Grid, tick marks, points, legend: always hidden\n * - Scale advice position: always 'inner'\n * - Scale state: automatically inherits from `state` property\n *\n * ## Usage Examples\n *\n * ### Basic gauge trend with default area fill\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {label: 'Jan', value: 3.5},\n * {label: 'Feb', value: 4.2},\n * {label: 'Mar', value: 5.0}\n * ]}\n * .minValue=${3}\n * .maxValue=${7}\n * .value=${5}\n * .width=${480}\n * .height=${480}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Line-only (no fill) - default\n * ```html\n * <obc-gauge-trend\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With area fill\n * ```html\n * <obc-gauge-trend\n * .chartFill=${true}\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With enhanced colors and setpoint\n * ```html\n * <obc-gauge-trend\n * .enhanced=${true}\n * .state=${'in-command'}\n * .setpoint=${5.5}\n * .value=${5.2}\n * .hasBar=${true}\n * .hasScale=${true}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With advice overlays\n * ```html\n * <obc-gauge-trend\n * .hasAdvice=${true}\n * .advice=${[\n * {min: 3, max: 5, type: 'caution', hinted: true},\n * {min: 6, max: 7, type: 'advice', hinted: false}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Time-based data with uneven intervals\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {x: '2026-07-06T10:00:00Z', value: 3.5},\n * {x: '2026-07-06T10:03:00Z', value: 4.2},\n * {x: '2026-07-06T10:15:00Z', value: 5.0}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n * @property {number} width - Chart width in pixels (defines aspect ratio)\n * @property {number} height - Chart height in pixels (defines aspect ratio)\n * @property {boolean} enhanced - Use enhanced color palette for chart and scales\n * @property {InstrumentState} state - Instrument state (automatically applied to scale)\n * @property {boolean} chartFill - Enable chart area fill (default: false for line-only)\n *\n * Setpoint properties are inherited from {@link SetpointMixin}.\n * These are forwarded to the internal `obc-bar-vertical` scale:\n * `setpoint`, `newSetpoint`, `touching`, `atSetpoint`, `autoAtSetpoint`,\n * `autoAtSetpointDeadband`, `setpointAtZeroDeadband`, `setpointOverride`.\n * See {@link SetpointMixinInterface} for full documentation.\n * @stable\n */\n@customElement('obc-gauge-trend')\nexport class ObcGaugeTrend extends SetpointMixin(ObcChartLineBase) {\n private _barVerticalElement?: HTMLElement;\n private _isFirstUpdate = false;\n private _explicitXAxisType = false;\n private _autoAppliedXAxisType?: XAxisType;\n\n constructor() {\n super();\n\n // Chart display options - locked for gauge-trend\n this.legend = false;\n this.showDebugOverlay = false;\n this.showGrid = false;\n this.showTickMarks = false;\n this.showPoints = false;\n\n // Axis configuration - locked for gauge-trend\n this.xAxisType = XAxisType.category;\n this.yAxisPosition = YAxisPosition.left;\n\n // Line rendering - locked for gauge-trend\n this.lineMode = LineMode.smooth;\n\n // Tooltip/unit - locked for gauge-trend (scale shows values)\n this.unit = '';\n this.timeDisplay = TimeDisplay.date;\n\n // Scaling and sizing - locked for gauge-trend\n this.fixedAspectRatioScaling = true;\n this.instrumentMode = true;\n this.borderRadius = 8;\n\n // Border radius positions for chart + scale composition\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n this.borderRadiusPositionExternalScales = BorderRadiusPosition.middleChild;\n\n // Y-axis configuration (managed internally, single axis only)\n // Note: yAxes will be properly set in willUpdate once properties are initialized\n // Using minValue/maxValue as defaults when chartMinValue/chartMaxValue are undefined\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: this.chartMinValue ?? this.minValue,\n max: this.chartMaxValue ?? this.maxValue,\n },\n ];\n }\n\n override async firstUpdated() {\n // IMPORTANT: create the external scale *before* base firstUpdated runs.\n // The base waits for external scale dimensions to integrate chart padding.\n this._createBarVerticalElement();\n this._updateBorderRadiusPosition();\n\n await super.firstUpdated();\n\n this._isFirstUpdate = false;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Note: We intentionally don't remove _barVerticalElement here.\n // It's a light DOM child that naturally travels with the parent when\n // the component is moved in the DOM. Removing it would cause the scale\n // to be lost on reconnect since firstUpdated() only runs once.\n }\n\n private _createBarVerticalElement() {\n // Create bar-vertical element in light DOM so it can be slotted\n if (!this._barVerticalElement) {\n const barVertical = document.createElement('obc-bar-vertical');\n barVertical.setAttribute('slot', 'right-scale');\n this._barVerticalElement = barVertical;\n this.appendChild(barVertical);\n this._updateBarVerticalProperties();\n }\n }\n\n private _updateBorderRadiusPosition() {\n // When there's no bar and no scale (labels only), round all corners\n if (!this.hasBar && !this.hasScale) {\n this.borderRadiusPosition = BorderRadiusPosition.middleRoundedChild;\n } else {\n // Otherwise, use innerFirstChild (rounds left side when scale is on right)\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n }\n }\n\n private _updateBarVerticalProperties() {\n if (!this._barVerticalElement) {\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const barVertical = this._barVerticalElement as any;\n\n // Use getEffectiveHeight() which returns computed height in fixedAspectRatioScaling mode\n // This ensures the bar-vertical gets the correct height that matches the chart's actual size\n const effectiveHeight = this.getEffectiveHeight();\n\n barVertical.minValue = this.minValue;\n barVertical.maxValue = this.maxValue;\n barVertical.height = effectiveHeight;\n barVertical.side = 'right';\n barVertical.hasScale = this.hasScale;\n barVertical.hasBar = this.hasBar;\n // Bar thickness: 48 for scale mode, 24 for bar-only mode (internal, not user-configurable)\n barVertical.barThickness = this.hasScale ? 48 : 24;\n barVertical.scaleType = this.scaleType;\n barVertical.fillMode = this.fillMode;\n barVertical.fillMin = this.fillMin;\n // In 'fill' mode: fillMax always tracks value (bar shows current value)\n // In 'tint' mode: fillMax uses explicit value or defaults to value\n barVertical.fillMax =\n this.fillMode === FillMode.fill\n ? this.value\n : (this.fillMax ?? this.value);\n barVertical.value = this.value;\n barVertical.setpoint = this.setpoint;\n barVertical.newSetpoint = this.newSetpoint;\n barVertical.touching = this.touching;\n barVertical.atSetpoint = this.atSetpoint;\n barVertical.autoAtSetpoint = this.autoAtSetpoint;\n barVertical.autoAtSetpointDeadband = this.autoAtSetpointDeadband;\n barVertical.setpointAtZeroDeadband = this.setpointAtZeroDeadband;\n barVertical.animateSetpoint = this.animateSetpoint;\n barVertical.setpointOverride = this.setpointOverride;\n // Advice position is always 'inner' for gauge-trend\n barVertical.advicePosition = AdvicePosition.inner;\n // obc-bar-vertical uses 'advices' (plural), not 'advice' or 'hasAdvice'\n barVertical.advices = this.hasAdvice ? this.advice : [];\n barVertical.primaryTickmarkInterval = this.primaryTickmarkInterval;\n barVertical.secondaryTickmarkInterval = this.secondaryTickmarkInterval;\n barVertical.tertiaryTickmarkInterval = this.tertiaryTickmarkInterval;\n barVertical.scaleBackground = this.hasScale;\n // When hasScale=false, use gray (secondary) background for the bar container\n barVertical.barContainerStyle = this.hasScale\n ? undefined\n : BarContainerStyle.secondary;\n // Pass fixedAspectRatio to match parent's fixedAspectRatioScaling\n barVertical.fixedAspectRatio = this.fixedAspectRatioScaling;\n // Pass scaleReferenceSize from parent (inherited from ObcChartLineBase)\n barVertical.scaleReferenceSize = this.scaleReferenceSize;\n // Derive tickmark visibility from whether intervals are defined\n barVertical.hasPrimaryTickmarks =\n this.primaryTickmarkInterval !== undefined;\n barVertical.hasTertiaryTickmarks =\n this.tertiaryTickmarkInterval !== undefined;\n barVertical.priority = this.priority;\n // Scale state inherits from parent 'state' property automatically\n barVertical.state = this.state;\n\n // Enable instrument mode: only label font size responds to .obc-component-size-* CSS classes\n // Border radius and bar thickness are controlled by explicit values, not CSS variables\n barVertical.instrumentMode = true;\n // Use fixed border radius of 8px (same as medium component size) for consistent instrument appearance\n // This matches the chart's border radius for visual consistency\n barVertical.borderRadius = 8;\n\n // Automatically adjust border radius position based on hasScale\n // When hasScale=false, the bar-vertical should have outerLastChild border radius\n // When hasScale=true, it should be middleChild (has scale background as neighbor)\n barVertical.borderRadiusPosition = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n\n // Auto-derive: show dot indicator when no bar is shown\n barVertical.highlightCurrentValue = !this.hasBar;\n }\n\n /**\n * Scale type for the vertical scale.\n * - `'regular'`: Standard tick lengths (default)\n * - `'condensed'`: Shorter tick lengths for compact display\n *\n * Hidden from Storybook controls via argTypes configuration.\n * @availableWhen hasScale==true\n */\n @property({type: String})\n scaleType: ScaleType = ScaleType.regular;\n\n /**\n * Minimum value for the scale range.\n * Also used as chart y-axis minimum when `chartMinValue` is undefined.\n */\n @property({type: Number})\n minValue = 0;\n\n /**\n * Maximum value for the scale range.\n * Also used as chart y-axis maximum when `chartMaxValue` is undefined.\n */\n @property({type: Number})\n maxValue = 100;\n\n /**\n * Minimum value for the chart y-axis.\n * When undefined, defaults to `minValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMinValue?: number = undefined;\n\n /**\n * Maximum value for the chart y-axis.\n * When undefined, defaults to `maxValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMaxValue?: number = undefined;\n\n /**\n * Current value displayed on the vertical scale.\n *\n * This is the primary value property that drives:\n * - The bar fill level (when `hasBar=true`)\n * - The dot indicator position (when `hasBar=false`)\n * - The `fillMax` value (when `fillMax` is not explicitly set)\n *\n * In typical usage, you only need to set this property to update the gauge.\n * @availableWhen hasBar==true || hasScale==true\n */\n @property({type: Number})\n value?: number = undefined;\n\n /**\n * Show bar on the vertical scale.\n *\n * When `true`, displays a filled bar indicating the current value.\n * When `false`, a dot indicator is automatically shown at the value position instead.\n */\n @property({type: Boolean})\n hasBar = false;\n\n /**\n * Show scale tick marks and labels.\n */\n @property({type: Boolean})\n hasScale = false;\n\n /**\n * Show advice overlays on the vertical scale.\n */\n @property({type: Boolean})\n hasAdvice = false;\n\n /**\n * Fill mode for the bar.\n * - `'fill'`: Bar fills from `fillMin` to `value` — the bar visually tracks the current value.\n * The `fillMax` property is **ignored** in this mode.\n * - `'tint'`: Bar fills from `fillMin` to `fillMax` — an explicit highlighted range.\n * Use this when you want to show a fixed range independent of the current value.\n *\n * In both modes, `fillMin` is the origin point (e.g., 0 in a -100..100 scale).\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: String})\n fillMode: FillMode = FillMode.fill;\n\n /**\n * Fill origin value - the starting point for the bar fill.\n * In both fill modes, the bar fills from this value toward the current value.\n * For scales like -100..100, set this to 0 to have the bar fill up or down from zero.\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number})\n fillMin = 0;\n\n /**\n * Maximum fill value for the bar (only used in `'tint'` mode).\n *\n * In `'fill'` mode, this property is **ignored** — the bar always fills to `value`.\n *\n * In `'tint'` mode, this defines the upper bound of the highlighted range.\n * When `undefined`, defaults to `value`.\n * @availableWhen hasBar==true && value!=undefined && fillMode==tint\n */\n @property({type: Number})\n fillMax?: number = undefined;\n\n /**\n * Advice/alert overlays for the vertical scale.\n * @availableWhen hasAdvice==true\n */\n @property({type: Array, attribute: false})\n advice: LinearAdvice[] = [];\n\n /**\n * Primary tick interval for the vertical scale (longest ticks with labels).\n */\n @property({type: Number})\n primaryTickmarkInterval?: number = undefined;\n\n // Setpoint properties (setpoint, newSetpoint, touching, atSetpoint,\n // autoAtSetpoint, autoAtSetpointDeadband, setpointAtZeroDeadband,\n // setpointOverride, computeAtSetpoint()) are provided by SetpointMixin.\n // See setpoint-mixin.ts for full docs.\n\n /**\n * Secondary tick interval for the vertical scale (medium ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n secondaryTickmarkInterval = 0.5;\n\n /**\n * Tertiary tick interval for the vertical scale (shortest ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n tertiaryTickmarkInterval?: number = undefined;\n\n /**\n * Enable chart area fill.\n * When true, fills the area under the line with semitransparent color.\n * When false (default), renders as line-only chart.\n */\n @property({type: Boolean})\n chartFill = false;\n\n /**\n * Apply fill when chartFill is true.\n */\n protected override shouldApplyFill(): boolean {\n return this.chartFill;\n }\n\n /**\n * Return the fill mode for area rendering.\n * Maps chartFill boolean to base class fillMode.\n */\n protected override getFillMode(): string | undefined {\n return this.chartFill ? 'semitransparent' : undefined;\n }\n\n /**\n * Stacking is not used in gauge-trend (always false).\n */\n protected override shouldStack(): boolean {\n return false;\n }\n\n override willUpdate(changed: Map<PropertyKey, unknown>) {\n // Auto axis detection: {x, value} data switches to time spacing, {label,\n // value} stays category. An explicit xAxisType assignment (anything we\n // did not auto-apply) permanently disables auto-detection. The\n // constructor's 'category' default lands in the first changed-map but is\n // not treated as explicit (hasUpdated is false and it equals the default).\n if (\n changed.has('xAxisType') &&\n this.xAxisType !== this._autoAppliedXAxisType &&\n (this.hasUpdated || this.xAxisType !== XAxisType.category)\n ) {\n this._explicitXAxisType = true;\n }\n if (!this._explicitXAxisType && changed.has('data')) {\n const allHaveX =\n (this.data?.length ?? 0) > 0 && this.data.every((d) => d.x != null);\n const target = allHaveX ? XAxisType.time : XAxisType.category;\n if (this.xAxisType !== target) {\n this._autoAppliedXAxisType = target;\n this.xAxisType = target;\n }\n }\n\n super.willUpdate(changed);\n\n // Update y-axis range when chart or scale min/max changes\n // Note: yAxes is managed internally - users cannot set multiple axes\n // When chartMinValue/chartMaxValue are undefined, fall back to minValue/maxValue\n if (\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue') ||\n changed.has('minValue') ||\n changed.has('maxValue')\n ) {\n const chartMin = this.chartMinValue ?? this.minValue;\n const chartMax = this.chartMaxValue ?? this.maxValue;\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: chartMin,\n max: chartMax,\n },\n ];\n }\n\n // Adjust chart's border radius position for external scales based on hasScale\n // This needs to be set before render, so we do it in willUpdate\n if (changed.has('hasScale')) {\n this.borderRadiusPositionExternalScales = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n }\n }\n\n override updated(changed: Map<PropertyKey, unknown>) {\n // Handle chartFill changes by forcing a data refresh\n // This triggers the base class to update the chart with new fill settings\n if (changed.has('chartFill') && this.data) {\n // Create a shallow copy to trigger the base class's watched property detection\n this.data = [...this.data];\n }\n\n super.updated(changed);\n // Update border radius position when bar/scale visibility changes\n if (changed.has('hasBar') || changed.has('hasScale')) {\n this._updateBorderRadiusPosition();\n }\n // Keep the internal right-scale in sync with public API changes.\n // (Mirrors the storybook “chart integration” examples, but encapsulated.)\n if (!this._barVerticalElement || this._isFirstUpdate) return;\n\n const shouldUpdateScale =\n changed.has('minValue') ||\n changed.has('maxValue') ||\n changed.has('value') ||\n changed.has('setpoint') ||\n changed.has('newSetpoint') ||\n changed.has('touching') ||\n changed.has('atSetpoint') ||\n changed.has('autoAtSetpoint') ||\n changed.has('autoAtSetpointDeadband') ||\n changed.has('setpointAtZeroDeadband') ||\n changed.has('setpointOverride') ||\n changed.has('hasBar') ||\n changed.has('hasScale') ||\n changed.has('hasAdvice') ||\n changed.has('fillMode') ||\n changed.has('fillMin') ||\n changed.has('fillMax') ||\n changed.has('advice') ||\n changed.has('primaryTickmarkInterval') ||\n changed.has('secondaryTickmarkInterval') ||\n changed.has('tertiaryTickmarkInterval') ||\n changed.has('scaleType') ||\n changed.has('state') || // Scale state inherits from parent 'state'\n changed.has('priority') ||\n changed.has('height') ||\n changed.has('width') ||\n changed.has('scaleReferenceSize') ||\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue');\n\n if (shouldUpdateScale) this._updateBarVerticalProperties();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-gauge-trend': ObcGaugeTrend;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"gauge-trend.js","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"sourcesContent":["import {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcChartLineBase,\n XAxisType,\n YAxisPosition,\n LineMode,\n TimeDisplay,\n} from '../../building-blocks/chart-line/chart-line-base.js';\nimport {BorderRadiusPosition} from '../types.js';\nimport {\n FillMode,\n AdvicePosition,\n BarContainerStyle,\n ScaleType,\n} from '../../building-blocks/bar-vertical/bar-vertical.js';\nimport type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/bar-vertical/bar-vertical.js';\n\n// Re-export FillMode and ScaleType for user convenience\nexport {FillMode, ScaleType};\n\n/**\n * Gauge Trend - A navigation instrument combining a line/area chart with an integrated vertical scale.\n *\n * This is a high-level, self-contained component that combines:\n * - A line/area chart (based on `ObcChartLineBase`) with configurable fill mode\n * - An integrated vertical scale (`obc-bar-vertical`) on the right side\n *\n * The component is designed for displaying time-series or categorical trend data alongside a calibrated\n * vertical measurement scale, commonly used in maritime navigation instruments.\n *\n * ## Architecture\n *\n * Internally composed of:\n * - **Base**: `ObcChartLineBase` (line/area graph functionality)\n * - **Right scale**: `obc-bar-vertical` (external scale component)\n *\n * ## Locked Configuration (not user-configurable)\n * - Fixed aspect ratio scaling: always enabled\n * - Instrument mode: always enabled (8px border radius)\n * - X-axis type: auto-detected — 'category' for `{label, value}` data,\n * 'time' for `{x, value}` data (uneven intervals position proportionally).\n * Assigning `xAxisType` explicitly disables auto-detection.\n * - Line mode: always 'smooth'\n * - Grid, tick marks, points, legend: always hidden\n * - Scale advice position: always 'inner'\n * - Scale state: automatically inherits from `state` property\n *\n * ## Usage Examples\n *\n * ### Basic gauge trend with default area fill\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {label: 'Jan', value: 3.5},\n * {label: 'Feb', value: 4.2},\n * {label: 'Mar', value: 5.0}\n * ]}\n * .minValue=${3}\n * .maxValue=${7}\n * .value=${5}\n * .width=${480}\n * .height=${480}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Line-only (no fill) - default\n * ```html\n * <obc-gauge-trend\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With area fill\n * ```html\n * <obc-gauge-trend\n * .chartFill=${true}\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With enhanced colors and setpoint\n * ```html\n * <obc-gauge-trend\n * .enhanced=${true}\n * .state=${'in-command'}\n * .setpoint=${5.5}\n * .value=${5.2}\n * .hasBar=${true}\n * .hasScale=${true}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With advice overlays\n * ```html\n * <obc-gauge-trend\n * .hasAdvice=${true}\n * .advice=${[\n * {min: 3, max: 5, type: 'caution', hinted: true},\n * {min: 6, max: 7, type: 'advice', hinted: false}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Time-based data with uneven intervals\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {x: '2026-07-06T10:00:00Z', value: 3.5},\n * {x: '2026-07-06T10:03:00Z', value: 4.2},\n * {x: '2026-07-06T10:15:00Z', value: 5.0}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n *\n * Setpoint properties are inherited from {@link SetpointMixin}.\n * These are forwarded to the internal `obc-bar-vertical` scale:\n * `setpoint`, `newSetpoint`, `touching`, `atSetpoint`, `autoAtSetpoint`,\n * `autoAtSetpointDeadband`, `setpointAtZeroDeadband`, `setpointOverride`.\n * See {@link SetpointMixinInterface} for full documentation.\n * @stable\n */\n@customElement('obc-gauge-trend')\nexport class ObcGaugeTrend extends SetpointMixin(ObcChartLineBase) {\n private _barVerticalElement?: HTMLElement;\n private _isFirstUpdate = false;\n private _explicitXAxisType = false;\n private _autoAppliedXAxisType?: XAxisType;\n\n constructor() {\n super();\n\n // Chart display options - locked for gauge-trend\n this.legend = false;\n this.showDebugOverlay = false;\n this.showGrid = false;\n this.showTickMarks = false;\n this.showPoints = false;\n\n // Axis configuration - locked for gauge-trend\n this.xAxisType = XAxisType.category;\n this.yAxisPosition = YAxisPosition.left;\n\n // Line rendering - locked for gauge-trend\n this.lineMode = LineMode.smooth;\n\n // Tooltip/unit - locked for gauge-trend (scale shows values)\n this.unit = '';\n this.timeDisplay = TimeDisplay.date;\n\n // Scaling and sizing - locked for gauge-trend\n this.fixedAspectRatioScaling = true;\n this.instrumentMode = true;\n this.borderRadius = 8;\n\n // Border radius positions for chart + scale composition\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n this.borderRadiusPositionExternalScales = BorderRadiusPosition.middleChild;\n\n // Y-axis configuration (managed internally, single axis only)\n // Note: yAxes will be properly set in willUpdate once properties are initialized\n // Using minValue/maxValue as defaults when chartMinValue/chartMaxValue are undefined\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: this.chartMinValue ?? this.minValue,\n max: this.chartMaxValue ?? this.maxValue,\n },\n ];\n }\n\n override async firstUpdated() {\n // IMPORTANT: create the external scale *before* base firstUpdated runs.\n // The base waits for external scale dimensions to integrate chart padding.\n this._createBarVerticalElement();\n this._updateBorderRadiusPosition();\n\n await super.firstUpdated();\n\n this._isFirstUpdate = false;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Note: We intentionally don't remove _barVerticalElement here.\n // It's a light DOM child that naturally travels with the parent when\n // the component is moved in the DOM. Removing it would cause the scale\n // to be lost on reconnect since firstUpdated() only runs once.\n }\n\n private _createBarVerticalElement() {\n // Create bar-vertical element in light DOM so it can be slotted\n if (!this._barVerticalElement) {\n const barVertical = document.createElement('obc-bar-vertical');\n barVertical.setAttribute('slot', 'right-scale');\n this._barVerticalElement = barVertical;\n this.appendChild(barVertical);\n this._updateBarVerticalProperties();\n }\n }\n\n private _updateBorderRadiusPosition() {\n // When there's no bar and no scale (labels only), round all corners\n if (!this.hasBar && !this.hasScale) {\n this.borderRadiusPosition = BorderRadiusPosition.middleRoundedChild;\n } else {\n // Otherwise, use innerFirstChild (rounds left side when scale is on right)\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n }\n }\n\n private _updateBarVerticalProperties() {\n if (!this._barVerticalElement) {\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const barVertical = this._barVerticalElement as any;\n\n // Use getEffectiveHeight() which returns computed height in fixedAspectRatioScaling mode\n // This ensures the bar-vertical gets the correct height that matches the chart's actual size\n const effectiveHeight = this.getEffectiveHeight();\n\n barVertical.minValue = this.minValue;\n barVertical.maxValue = this.maxValue;\n barVertical.height = effectiveHeight;\n barVertical.side = 'right';\n barVertical.hasScale = this.hasScale;\n barVertical.hasBar = this.hasBar;\n // Bar thickness: 48 for scale mode, 24 for bar-only mode (internal, not user-configurable)\n barVertical.barThickness = this.hasScale ? 48 : 24;\n barVertical.scaleType = this.scaleType;\n barVertical.fillMode = this.fillMode;\n barVertical.fillMin = this.fillMin;\n // In 'fill' mode: fillMax always tracks value (bar shows current value)\n // In 'tint' mode: fillMax uses explicit value or defaults to value\n barVertical.fillMax =\n this.fillMode === FillMode.fill\n ? this.value\n : (this.fillMax ?? this.value);\n barVertical.value = this.value;\n barVertical.setpoint = this.setpoint;\n barVertical.newSetpoint = this.newSetpoint;\n barVertical.touching = this.touching;\n barVertical.atSetpoint = this.atSetpoint;\n barVertical.autoAtSetpoint = this.autoAtSetpoint;\n barVertical.autoAtSetpointDeadband = this.autoAtSetpointDeadband;\n barVertical.setpointAtZeroDeadband = this.setpointAtZeroDeadband;\n barVertical.animateSetpoint = this.animateSetpoint;\n barVertical.setpointOverride = this.setpointOverride;\n // Advice position is always 'inner' for gauge-trend\n barVertical.advicePosition = AdvicePosition.inner;\n // obc-bar-vertical uses 'advices' (plural), not 'advice' or 'hasAdvice'\n barVertical.advices = this.hasAdvice ? this.advice : [];\n barVertical.primaryTickmarkInterval = this.primaryTickmarkInterval;\n barVertical.secondaryTickmarkInterval = this.secondaryTickmarkInterval;\n barVertical.tertiaryTickmarkInterval = this.tertiaryTickmarkInterval;\n barVertical.scaleBackground = this.hasScale;\n // When hasScale=false, use gray (secondary) background for the bar container\n barVertical.barContainerStyle = this.hasScale\n ? undefined\n : BarContainerStyle.secondary;\n // Pass fixedAspectRatio to match parent's fixedAspectRatioScaling\n barVertical.fixedAspectRatio = this.fixedAspectRatioScaling;\n // Pass scaleReferenceSize from parent (inherited from ObcChartLineBase)\n barVertical.scaleReferenceSize = this.scaleReferenceSize;\n // Derive tickmark visibility from whether intervals are defined\n barVertical.hasPrimaryTickmarks =\n this.primaryTickmarkInterval !== undefined;\n barVertical.hasTertiaryTickmarks =\n this.tertiaryTickmarkInterval !== undefined;\n barVertical.priority = this.priority;\n // Scale state inherits from parent 'state' property automatically\n barVertical.state = this.state;\n\n // Enable instrument mode: only label font size responds to .obc-component-size-* CSS classes\n // Border radius and bar thickness are controlled by explicit values, not CSS variables\n barVertical.instrumentMode = true;\n // Use fixed border radius of 8px (same as medium component size) for consistent instrument appearance\n // This matches the chart's border radius for visual consistency\n barVertical.borderRadius = 8;\n\n // Automatically adjust border radius position based on hasScale\n // When hasScale=false, the bar-vertical should have outerLastChild border radius\n // When hasScale=true, it should be middleChild (has scale background as neighbor)\n barVertical.borderRadiusPosition = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n\n // Auto-derive: show dot indicator when no bar is shown\n barVertical.highlightCurrentValue = !this.hasBar;\n }\n\n /**\n * Scale type for the vertical scale.\n * - `'regular'`: Standard tick lengths (default)\n * - `'condensed'`: Shorter tick lengths for compact display\n *\n * Hidden from Storybook controls via argTypes configuration.\n * @availableWhen hasScale==true\n */\n @property({type: String})\n scaleType: ScaleType = ScaleType.regular;\n\n /**\n * Minimum value for the scale range.\n * Also used as chart y-axis minimum when `chartMinValue` is undefined.\n */\n @property({type: Number})\n minValue = 0;\n\n /**\n * Maximum value for the scale range.\n * Also used as chart y-axis maximum when `chartMaxValue` is undefined.\n */\n @property({type: Number})\n maxValue = 100;\n\n /**\n * Minimum value for the chart y-axis.\n * When undefined, defaults to `minValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMinValue?: number = undefined;\n\n /**\n * Maximum value for the chart y-axis.\n * When undefined, defaults to `maxValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMaxValue?: number = undefined;\n\n /**\n * Current value displayed on the vertical scale.\n *\n * This is the primary value property that drives:\n * - The bar fill level (when `hasBar=true`)\n * - The dot indicator position (when `hasBar=false`)\n * - The `fillMax` value (when `fillMax` is not explicitly set)\n *\n * In typical usage, you only need to set this property to update the gauge.\n * @availableWhen hasBar==true || hasScale==true\n */\n @property({type: Number})\n value?: number = undefined;\n\n /**\n * Show bar on the vertical scale.\n *\n * When `true`, displays a filled bar indicating the current value.\n * When `false`, a dot indicator is automatically shown at the value position instead.\n */\n @property({type: Boolean})\n hasBar = false;\n\n /**\n * Show scale tick marks and labels.\n */\n @property({type: Boolean})\n hasScale = false;\n\n /**\n * Show advice overlays on the vertical scale.\n */\n @property({type: Boolean})\n hasAdvice = false;\n\n /**\n * Fill mode for the bar.\n * - `'fill'`: Bar fills from `fillMin` to `value` — the bar visually tracks the current value.\n * The `fillMax` property is **ignored** in this mode.\n * - `'tint'`: Bar fills from `fillMin` to `fillMax` — an explicit highlighted range.\n * Use this when you want to show a fixed range independent of the current value.\n *\n * In both modes, `fillMin` is the origin point (e.g., 0 in a -100..100 scale).\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: String})\n fillMode: FillMode = FillMode.fill;\n\n /**\n * Fill origin value - the starting point for the bar fill.\n * In both fill modes, the bar fills from this value toward the current value.\n * For scales like -100..100, set this to 0 to have the bar fill up or down from zero.\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number})\n fillMin = 0;\n\n /**\n * Maximum fill value for the bar (only used in `'tint'` mode).\n *\n * In `'fill'` mode, this property is **ignored** — the bar always fills to `value`.\n *\n * In `'tint'` mode, this defines the upper bound of the highlighted range.\n * When `undefined`, defaults to `value`.\n * @availableWhen hasBar==true && value!=undefined && fillMode==tint\n */\n @property({type: Number})\n fillMax?: number = undefined;\n\n /**\n * Advice/alert overlays for the vertical scale.\n * @availableWhen hasAdvice==true\n */\n @property({type: Array, attribute: false})\n advice: LinearAdvice[] = [];\n\n /**\n * Primary tick interval for the vertical scale (longest ticks with labels).\n */\n @property({type: Number})\n primaryTickmarkInterval?: number = undefined;\n\n // Setpoint properties (setpoint, newSetpoint, touching, atSetpoint,\n // autoAtSetpoint, autoAtSetpointDeadband, setpointAtZeroDeadband,\n // setpointOverride, computeAtSetpoint()) are provided by SetpointMixin.\n // See setpoint-mixin.ts for full docs.\n\n /**\n * Secondary tick interval for the vertical scale (medium ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n secondaryTickmarkInterval = 0.5;\n\n /**\n * Tertiary tick interval for the vertical scale (shortest ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n tertiaryTickmarkInterval?: number = undefined;\n\n /**\n * Enable chart area fill.\n * When true, fills the area under the line with semitransparent color.\n * When false (default), renders as line-only chart.\n */\n @property({type: Boolean})\n chartFill = false;\n\n /**\n * Apply fill when chartFill is true.\n */\n protected override shouldApplyFill(): boolean {\n return this.chartFill;\n }\n\n /**\n * Return the fill mode for area rendering.\n * Maps chartFill boolean to base class fillMode.\n */\n protected override getFillMode(): string | undefined {\n return this.chartFill ? 'semitransparent' : undefined;\n }\n\n /**\n * Stacking is not used in gauge-trend (always false).\n */\n protected override shouldStack(): boolean {\n return false;\n }\n\n override willUpdate(changed: Map<PropertyKey, unknown>) {\n // Auto axis detection: {x, value} data switches to time spacing, {label,\n // value} stays category. An explicit xAxisType assignment (anything we\n // did not auto-apply) permanently disables auto-detection. The\n // constructor's 'category' default lands in the first changed-map but is\n // not treated as explicit (hasUpdated is false and it equals the default).\n if (\n changed.has('xAxisType') &&\n this.xAxisType !== this._autoAppliedXAxisType &&\n (this.hasUpdated || this.xAxisType !== XAxisType.category)\n ) {\n this._explicitXAxisType = true;\n }\n if (!this._explicitXAxisType && changed.has('data')) {\n const allHaveX =\n (this.data?.length ?? 0) > 0 && this.data.every((d) => d.x != null);\n const target = allHaveX ? XAxisType.time : XAxisType.category;\n if (this.xAxisType !== target) {\n this._autoAppliedXAxisType = target;\n this.xAxisType = target;\n }\n }\n\n super.willUpdate(changed);\n\n // Update y-axis range when chart or scale min/max changes\n // Note: yAxes is managed internally - users cannot set multiple axes\n // When chartMinValue/chartMaxValue are undefined, fall back to minValue/maxValue\n if (\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue') ||\n changed.has('minValue') ||\n changed.has('maxValue')\n ) {\n const chartMin = this.chartMinValue ?? this.minValue;\n const chartMax = this.chartMaxValue ?? this.maxValue;\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: chartMin,\n max: chartMax,\n },\n ];\n }\n\n // Adjust chart's border radius position for external scales based on hasScale\n // This needs to be set before render, so we do it in willUpdate\n if (changed.has('hasScale')) {\n this.borderRadiusPositionExternalScales = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n }\n }\n\n override updated(changed: Map<PropertyKey, unknown>) {\n // Handle chartFill changes by forcing a data refresh\n // This triggers the base class to update the chart with new fill settings\n if (changed.has('chartFill') && this.data) {\n // Create a shallow copy to trigger the base class's watched property detection\n this.data = [...this.data];\n }\n\n super.updated(changed);\n // Update border radius position when bar/scale visibility changes\n if (changed.has('hasBar') || changed.has('hasScale')) {\n this._updateBorderRadiusPosition();\n }\n // Keep the internal right-scale in sync with public API changes.\n // (Mirrors the storybook “chart integration” examples, but encapsulated.)\n if (!this._barVerticalElement || this._isFirstUpdate) return;\n\n const shouldUpdateScale =\n changed.has('minValue') ||\n changed.has('maxValue') ||\n changed.has('value') ||\n changed.has('setpoint') ||\n changed.has('newSetpoint') ||\n changed.has('touching') ||\n changed.has('atSetpoint') ||\n changed.has('autoAtSetpoint') ||\n changed.has('autoAtSetpointDeadband') ||\n changed.has('setpointAtZeroDeadband') ||\n changed.has('setpointOverride') ||\n changed.has('hasBar') ||\n changed.has('hasScale') ||\n changed.has('hasAdvice') ||\n changed.has('fillMode') ||\n changed.has('fillMin') ||\n changed.has('fillMax') ||\n changed.has('advice') ||\n changed.has('primaryTickmarkInterval') ||\n changed.has('secondaryTickmarkInterval') ||\n changed.has('tertiaryTickmarkInterval') ||\n changed.has('scaleType') ||\n changed.has('state') || // Scale state inherits from parent 'state'\n changed.has('priority') ||\n changed.has('height') ||\n changed.has('width') ||\n changed.has('scaleReferenceSize') ||\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue');\n\n if (shouldUpdateScale) this._updateBarVerticalProperties();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-gauge-trend': ObcGaugeTrend;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,10 +3,10 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
3
3
|
* @element obc-graph-mini
|
|
4
4
|
* @description A mini graph component
|
|
5
5
|
*
|
|
6
|
-
* @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
|
|
7
6
|
* @beta
|
|
8
7
|
*/
|
|
9
8
|
export declare class ObcGraphMini extends LitElement {
|
|
9
|
+
/** The data to display in the graph, first array is the x values, second array is the y values */
|
|
10
10
|
data: [number[], number[]];
|
|
11
11
|
minY: number | undefined;
|
|
12
12
|
maxY: number | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph-mini.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE
|
|
1
|
+
{"version":3,"file":"graph-mini.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,kGAAkG;IAElG,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,KAAK,EAAG,cAAc,CAAC;IAGvB,OAAO,CAAC,CAAC,CAAc;IAEvB,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,WAAW;IAKV,YAAY;IA2CrB,aAAa;IASb,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAUf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph-mini.js","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './graph-mini.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @element obc-graph-mini\n * @description A mini graph component\n *\n * @
|
|
1
|
+
{"version":3,"file":"graph-mini.js","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './graph-mini.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @element obc-graph-mini\n * @description A mini graph component\n *\n * @beta\n */\n@customElement('obc-graph-mini')\nexport class ObcGraphMini extends LitElement {\n /** The data to display in the graph, first array is the x values, second array is the y values */\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Number})\n minY: number | undefined;\n\n @property({type: Number})\n maxY: number | undefined;\n\n @query('#chart')\n chart!: HTMLDivElement;\n\n @state()\n private y: number = 24;\n\n private uplot: uPlot | null = null;\n\n private getCssColor(name: string) {\n const color = getComputedStyle(this).getPropertyValue(name).trim();\n return color;\n }\n\n override firstUpdated() {\n const opts = {\n width: 32,\n height: 32,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: (\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ) => {\n const range = this.maxY ?? initMax - (this.minY ?? initMin);\n return [\n this.minY ?? initMin - range * 0.1,\n this.maxY ?? initMax + range * 0.1,\n ] as [number, number];\n },\n },\n },\n series: [\n {},\n {\n stroke: this.getCssColor('--element-neutral-color'),\n width: 1,\n points: {show: false},\n },\n ],\n axes: [\n {show: false},\n {ticks: {show: false}, show: false, grid: {show: false}},\n ],\n legend: {show: false},\n cursor: {show: false},\n };\n\n this.uplot = new uPlot(opts, this.data, this.chart);\n requestAnimationFrame(() => this.updateY());\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const stroke = this.getCssColor('--element-neutral-color');\n // @ts-expect-error - stroke is not a property of the Series interface\n this.uplot.setSeries(1, {stroke: stroke, width: 1, points: {show: false}});\n }\n\n private updateY() {\n if (!this.uplot) {\n return;\n }\n const lastY = this.data[1][this.data[1].length - 1];\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(lastY);\n this.y = yRatio * 32 - 3;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div class=\"chart-container\">\n <div id=\"chart\">\n <div id=\"dot\" style=\"transform: translateY(${-this.y}px);\"></div>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-graph-mini': ObcGraphMini;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAGL,SAAA,OAA6B,CAAC,CAAA,GAAI,EAAE;AAYpC,SAAQ,IAAY;AAEpB,SAAQ,QAAsB;AAAA,EAAA;AAAA,EAEtB,YAAY,MAAc;AAChC,UAAM,QAAQ,iBAAiB,IAAI,EAAE,iBAAiB,IAAI,EAAE,KAAA;AAC5D,WAAO;AAAA,EACT;AAAA,EAES,eAAe;AACtB,UAAM,OAAO;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,QACN,GAAG,EAAC,MAAM,OAAO,MAAM,MAAA;AAAA,QACvB,GAAG;AAAA,UACD,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,CACL,OACA,SACA,SACA,cACG;AACH,kBAAM,QAAQ,KAAK,QAAQ,WAAW,KAAK,QAAQ;AACnD,mBAAO;AAAA,cACL,KAAK,QAAQ,UAAU,QAAQ;AAAA,cAC/B,KAAK,QAAQ,UAAU,QAAQ;AAAA,YAAA;AAAA,UAEnC;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,QAAQ;AAAA,QACN,CAAA;AAAA,QACA;AAAA,UACE,QAAQ,KAAK,YAAY,yBAAyB;AAAA,UAClD,OAAO;AAAA,UACP,QAAQ,EAAC,MAAM,MAAA;AAAA,QAAK;AAAA,MACtB;AAAA,MAEF,MAAM;AAAA,QACJ,EAAC,MAAM,MAAA;AAAA,QACP,EAAC,OAAO,EAAC,MAAM,MAAA,GAAQ,MAAM,OAAO,MAAM,EAAC,MAAM,MAAA,EAAK;AAAA,MAAC;AAAA,MAEzD,QAAQ,EAAC,MAAM,MAAA;AAAA,MACf,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK;AAGtB,SAAK,QAAQ,IAAI,MAAM,MAAM,KAAK,MAAM,KAAK,KAAK;AAClD,0BAAsB,MAAM,KAAK,SAAS;AAAA,EAC5C;AAAA,EAEA,gBAAgB;AACd,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,SAAS,KAAK,YAAY,yBAAyB;AAEzD,SAAK,MAAM,UAAU,GAAG,EAAC,QAAgB,OAAO,GAAG,QAAQ,EAAC,MAAM,MAAA,EAAK,CAAE;AAAA,EAC3E;AAAA,EAEQ,UAAU;AAChB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,QAAQ,KAAK,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,CAAC;AAElD,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,KAAK;AACjD,SAAK,IAAI,SAAS,KAAK;AAAA,EACzB;AAAA,EAES,QAAQ,mBAAmC;AAClD,QAAI,kBAAkB,IAAI,MAAM,GAAG;AACjC,WAAK,cAAA;AACL,WAAK,OAAO,QAAQ,KAAK,IAAI;AAC7B,4BAAsB,MAAM,KAAK,SAAS;AAAA,IAC5C;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,uDAG4C,CAAC,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,EAI5D;AAGF;AAzGa,aAwGK,SAAS,UAAU,YAAY;AArG/C,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GAFZ,aAGX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,aAMX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,aASX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,MAAM,QAAQ;AAAA,GAXJ,aAYX,WAAA,SAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAdI,aAeH,WAAA,KAAA,CAAA;AAfG,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
|
|
@@ -21,10 +21,10 @@ export interface ObcIndicatorGraphLayout {
|
|
|
21
21
|
* @element obc-indicator-graph
|
|
22
22
|
* @description A mini graph component
|
|
23
23
|
*
|
|
24
|
-
* @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
|
|
25
24
|
* @beta
|
|
26
25
|
*/
|
|
27
26
|
export declare class ObcIndicatorGraph extends LitElement {
|
|
27
|
+
/** The data to display in the graph, first array is the x values, second array is the y values */
|
|
28
28
|
data: [number[], number[]];
|
|
29
29
|
layout: ObcIndicatorGraphLayout;
|
|
30
30
|
private chart;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indicator-graph.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAGD,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,CAAC,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;AAED
|
|
1
|
+
{"version":3,"file":"indicator-graph.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAGD,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,CAAC,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;AAED;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,kGAAkG;IAElG,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,MAAM,EAAE,uBAAuB,CAAM;IAGrC,OAAO,CAAC,KAAK,CAAkB;IAG/B,OAAO,CAAC,CAAC,CAAiC;IAG1C,OAAO,CAAC,SAAS,CAAiC;IAElD,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,WAAW;IAKV,YAAY;IAmCZ,oBAAoB;IAQ7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAed,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IASvB,aAAa;IAUb,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,cAAc;IAab,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAuBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n small = 'small',\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n size?: ObcIndicatorGraphSize;\n priority?: ObcIndicatorGraphPriority;\n y?: {min?: number; max?: number; showZeroLine?: boolean};\n}\n\n/**\n * @element obc-indicator-graph\n * @description A mini graph component\n *\n * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n * @beta\n */\n@customElement('obc-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Object})\n layout: ObcIndicatorGraphLayout = {};\n\n @query('#chart')\n private chart!: HTMLDivElement;\n\n @state()\n private y: number | undefined = undefined;\n\n @state()\n private zeroLineY: number | undefined = undefined;\n\n private uplot: uPlot | null = null;\n private resizeObserver: ResizeObserver | null = null;\n\n private getCssColor(name: string) {\n const color = getComputedStyle(this).getPropertyValue(name).trim();\n return color;\n }\n\n override firstUpdated() {\n const opts = {\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: this._range.bind(this),\n },\n },\n series: [\n {},\n {\n stroke: this._getStrokeColor(),\n width: this._getStrokeWidth(),\n points: {show: false},\n },\n ],\n axes: [\n {show: false},\n {ticks: {show: false}, show: false, grid: {show: false}},\n ],\n legend: {show: false},\n cursor: {show: false},\n };\n\n this.uplot = new uPlot(opts, this.data, this.chart);\n requestAnimationFrame(() => this.updateY());\n\n this.resizeObserver = new ResizeObserver(() => this.updateSize());\n this.resizeObserver.observe(this.chart);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.uplot?.destroy();\n this.uplot = null;\n }\n\n private updateSize() {\n if (!this.uplot) {\n return;\n }\n this.uplot.setSize({\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n });\n this.updateY();\n }\n\n private _range(\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ): [number, number] {\n const {min: minY, max: maxY} = this.layout.y ?? {};\n const range = maxY ?? initMax - (minY ?? initMin);\n let min = minY ?? initMin - range * 0.1;\n if (minY === undefined && this.layout.y?.showZeroLine !== false) {\n min = Math.min(0, min);\n }\n return [min, maxY ?? initMax + range * 0.1] as [number, number];\n }\n\n private get _effectiveSize() {\n return this.layout.size ?? ObcIndicatorGraphSize.medium;\n }\n\n private get _effectivePriority() {\n return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n }\n\n private _getStrokeWidth() {\n switch (this._effectiveSize) {\n case ObcIndicatorGraphSize.small:\n return 1;\n case ObcIndicatorGraphSize.medium:\n return 1.5;\n case ObcIndicatorGraphSize.large:\n return 2;\n }\n }\n\n private _getStrokeColor() {\n switch (this._effectivePriority) {\n case ObcIndicatorGraphPriority.regular:\n return this.getCssColor('--element-neutral-color');\n case ObcIndicatorGraphPriority.enhanced:\n return this.getCssColor('--element-neutral-enhanced-color');\n }\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const series = this.uplot.series[1];\n series.stroke = () => this._getStrokeColor();\n series.width = this._getStrokeWidth();\n this.uplot.redraw();\n }\n\n private updateY() {\n if (!this.uplot) {\n return;\n }\n const lastY = this.data[1][this.data[1].length - 1];\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(lastY);\n if (yRatio < 0 || yRatio > 1) {\n this.y = undefined;\n } else {\n this.y = yRatio * this.chart.clientHeight;\n }\n this.updateZeroLine();\n }\n\n private updateZeroLine() {\n if (!this.uplot) {\n return;\n }\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(0);\n if (yRatio < 0 || yRatio > 1) {\n this.zeroLineY = undefined;\n return;\n }\n this.zeroLineY = yRatio * this.chart.clientHeight;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data') || changedProperties.has('layout')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div\n class=\"chart-container ${this._effectivePriority} ${this\n ._effectiveSize}\"\n >\n <div id=\"chart\"></div>\n <div\n id=\"zero-line\"\n style=\"transform: translateY(${-(this.zeroLineY ?? 0)}px);\n display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n \"\n ></div>\n <div\n id=\"dot\"\n style=\"transform: translateY(${-(this.y ?? 0)}px);\n display: ${this.y !== undefined ? 'block' : 'none'};\n \"\n ></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-indicator-graph': ObcIndicatorGraph;\n }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n small = 'small',\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n size?: ObcIndicatorGraphSize;\n priority?: ObcIndicatorGraphPriority;\n y?: {min?: number; max?: number; showZeroLine?: boolean};\n}\n\n/**\n * @element obc-indicator-graph\n * @description A mini graph component\n *\n * @beta\n */\n@customElement('obc-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n /** The data to display in the graph, first array is the x values, second array is the y values */\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Object})\n layout: ObcIndicatorGraphLayout = {};\n\n @query('#chart')\n private chart!: HTMLDivElement;\n\n @state()\n private y: number | undefined = undefined;\n\n @state()\n private zeroLineY: number | undefined = undefined;\n\n private uplot: uPlot | null = null;\n private resizeObserver: ResizeObserver | null = null;\n\n private getCssColor(name: string) {\n const color = getComputedStyle(this).getPropertyValue(name).trim();\n return color;\n }\n\n override firstUpdated() {\n const opts = {\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: this._range.bind(this),\n },\n },\n series: [\n {},\n {\n stroke: this._getStrokeColor(),\n width: this._getStrokeWidth(),\n points: {show: false},\n },\n ],\n axes: [\n {show: false},\n {ticks: {show: false}, show: false, grid: {show: false}},\n ],\n legend: {show: false},\n cursor: {show: false},\n };\n\n this.uplot = new uPlot(opts, this.data, this.chart);\n requestAnimationFrame(() => this.updateY());\n\n this.resizeObserver = new ResizeObserver(() => this.updateSize());\n this.resizeObserver.observe(this.chart);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.uplot?.destroy();\n this.uplot = null;\n }\n\n private updateSize() {\n if (!this.uplot) {\n return;\n }\n this.uplot.setSize({\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n });\n this.updateY();\n }\n\n private _range(\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ): [number, number] {\n const {min: minY, max: maxY} = this.layout.y ?? {};\n const range = maxY ?? initMax - (minY ?? initMin);\n let min = minY ?? initMin - range * 0.1;\n if (minY === undefined && this.layout.y?.showZeroLine !== false) {\n min = Math.min(0, min);\n }\n return [min, maxY ?? initMax + range * 0.1] as [number, number];\n }\n\n private get _effectiveSize() {\n return this.layout.size ?? ObcIndicatorGraphSize.medium;\n }\n\n private get _effectivePriority() {\n return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n }\n\n private _getStrokeWidth() {\n switch (this._effectiveSize) {\n case ObcIndicatorGraphSize.small:\n return 1;\n case ObcIndicatorGraphSize.medium:\n return 1.5;\n case ObcIndicatorGraphSize.large:\n return 2;\n }\n }\n\n private _getStrokeColor() {\n switch (this._effectivePriority) {\n case ObcIndicatorGraphPriority.regular:\n return this.getCssColor('--element-neutral-color');\n case ObcIndicatorGraphPriority.enhanced:\n return this.getCssColor('--element-neutral-enhanced-color');\n }\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const series = this.uplot.series[1];\n series.stroke = () => this._getStrokeColor();\n series.width = this._getStrokeWidth();\n this.uplot.redraw();\n }\n\n private updateY() {\n if (!this.uplot) {\n return;\n }\n const lastY = this.data[1][this.data[1].length - 1];\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(lastY);\n if (yRatio < 0 || yRatio > 1) {\n this.y = undefined;\n } else {\n this.y = yRatio * this.chart.clientHeight;\n }\n this.updateZeroLine();\n }\n\n private updateZeroLine() {\n if (!this.uplot) {\n return;\n }\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(0);\n if (yRatio < 0 || yRatio > 1) {\n this.zeroLineY = undefined;\n return;\n }\n this.zeroLineY = yRatio * this.chart.clientHeight;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data') || changedProperties.has('layout')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div\n class=\"chart-container ${this._effectivePriority} ${this\n ._effectiveSize}\"\n >\n <div id=\"chart\"></div>\n <div\n id=\"zero-line\"\n style=\"transform: translateY(${-(this.zeroLineY ?? 0)}px);\n display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n \"\n ></div>\n <div\n id=\"dot\"\n style=\"transform: translateY(${-(this.y ?? 0)}px);\n display: ${this.y !== undefined ? 'block' : 'none'};\n \"\n ></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-indicator-graph': ObcIndicatorGraph;\n }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":"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"}
|
|
@@ -85,36 +85,27 @@ export declare function innerRingRadiusFor(type: WatchCircleType): number;
|
|
|
85
85
|
* `_setpointCssAngle` tracks the accumulated CSS angle to avoid long-way-around
|
|
86
86
|
* transitions across the 0°/360° boundary.
|
|
87
87
|
*
|
|
88
|
-
* @property {InstrumentState} state - Instrument state (active, loading, off)
|
|
89
|
-
* @property {Priority} priority - Color priority (enhanced = blue palette, regular = gray palette)
|
|
90
|
-
* @property {number|undefined} angleSetpoint - Setpoint angle in degrees (0° = 12 o'clock)
|
|
91
|
-
* @property {number|undefined} newAngleSetpoint - New setpoint being adjusted (focus mode)
|
|
92
|
-
* @property {boolean} atAngleSetpoint - Whether value matches setpoint (within deadband)
|
|
93
|
-
* @property {number} angleSetpointAtZeroDeadband - Deadband for zero detection (default 0.5°)
|
|
94
|
-
* @property {boolean} setpointOverride - Override to derive setpoint color from priority regardless of state
|
|
95
|
-
* @property {RotType|undefined} rotType - ROT visualization type: `'dots'` (spinning dots) or `'bar'` (arc bar with clipped dots). Undefined hides the ROT layer.
|
|
96
|
-
* @property {RotPosition} rotPosition - Track on which ROT elements are placed: `'scale'` (on the outer ring) or `'innerCircle'` (default, inside the inner ring)
|
|
97
|
-
* @property {number} rotStartAngle - Start angle of the ROT bar arc in degrees (0° = 12 o'clock, clockwise). Only used when `rotType` is `'bar'`.
|
|
98
|
-
* @property {number} rotEndAngle - End angle of the ROT bar arc in degrees. The bar is hidden when the difference from `rotStartAngle` is less than 0.1°.
|
|
99
|
-
* @property {Priority|undefined} rotPriority - Override priority for ROT color derivation. When set, ROT colors use this instead of the main `priority`. Useful when the ROT element has independent priority (e.g. compass per-element priority).
|
|
100
|
-
* @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (the maritime/AIS convention, see ES-TRIN 2025/1 Art. 3.02 and ITU-R M.1371). Sign controls direction (positive = starboard/clockwise). When defined, this drives both the dot animation (multiplied by `rotDotAnimationFactor`) and the port/starboard direction sign.
|
|
101
|
-
* @property {number} rotDotAnimationFactor - Visual amplification factor applied only to the spinning-dot animation (not to bar extent). Default `18` keeps the legacy visual feel (≈1 rpm at 20°/min).
|
|
102
|
-
* @property {number} rotationsPerMinute - **Deprecated.** Spin speed of the ROT dot ring in rotations per minute. Sign controls direction (positive = clockwise). Use `rateOfTurnDegreesPerMinute` instead.
|
|
103
|
-
* @property {ZoomToFitArcFrame|undefined} arcFrame - Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation. If you pass `arcFrame`, you own keeping it in sync with `areas` / `watchCircleType` — obc-watch will NOT recompute it, so a stale frame renders stale geometry.
|
|
104
88
|
* @experimental
|
|
105
89
|
*/
|
|
106
90
|
export declare class ObcWatch extends LitElement {
|
|
107
91
|
private _setpointId;
|
|
108
92
|
private _newSetpointId;
|
|
93
|
+
/** Instrument state (active, loading, off) */
|
|
109
94
|
state: InstrumentState;
|
|
95
|
+
/** Color priority (enhanced = blue palette, regular = gray palette) */
|
|
110
96
|
priority: Priority;
|
|
111
97
|
watchCircleType: WatchCircleType;
|
|
112
98
|
northArrow: boolean;
|
|
113
99
|
northArrowInside: boolean | undefined;
|
|
100
|
+
/** Setpoint angle in degrees (0° = 12 o'clock) */
|
|
114
101
|
angleSetpoint: number | undefined;
|
|
102
|
+
/** New setpoint being adjusted (focus mode) */
|
|
115
103
|
newAngleSetpoint: number | undefined;
|
|
104
|
+
/** Whether value matches setpoint (within deadband) */
|
|
116
105
|
atAngleSetpoint: boolean;
|
|
106
|
+
/** Deadband for zero detection (default 0.5°) */
|
|
117
107
|
angleSetpointAtZeroDeadband: number;
|
|
108
|
+
/** Override to derive setpoint color from priority regardless of state */
|
|
118
109
|
setpointOverride: boolean;
|
|
119
110
|
touching: boolean;
|
|
120
111
|
animateSetpoint: boolean;
|
|
@@ -166,16 +157,24 @@ export declare class ObcWatch extends LitElement {
|
|
|
166
157
|
scaleWindIcon: number;
|
|
167
158
|
rotation: number | undefined;
|
|
168
159
|
zoomToFitArc: boolean;
|
|
160
|
+
/** Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation. If you pass `arcFrame`, you own keeping it in sync with `areas` / `watchCircleType` — obc-watch will NOT recompute it, so a stale frame renders stale geometry. */
|
|
169
161
|
arcFrame: ZoomToFitArcFrame | undefined;
|
|
170
162
|
tickFadeAngle: number;
|
|
163
|
+
/** ROT visualization type: `'dots'` (spinning dots) or `'bar'` (arc bar with clipped dots). Undefined hides the ROT layer. */
|
|
171
164
|
rotType: RotType | undefined;
|
|
165
|
+
/** Track on which ROT elements are placed: `'scale'` (on the outer ring) or `'innerCircle'` (default, inside the inner ring) */
|
|
172
166
|
rotPosition: RotPosition;
|
|
167
|
+
/** Start angle of the ROT bar arc in degrees (0° = 12 o'clock, clockwise). Only used when `rotType` is `'bar'`. */
|
|
173
168
|
rotStartAngle: number;
|
|
169
|
+
/** End angle of the ROT bar arc in degrees. The bar is hidden when the difference from `rotStartAngle` is less than 0.1°. */
|
|
174
170
|
rotEndAngle: number;
|
|
171
|
+
/** Override priority for ROT color derivation. When set, ROT colors use this instead of the main `priority`. Useful when the ROT element has independent priority (e.g. compass per-element priority). */
|
|
175
172
|
rotPriority: Priority | undefined;
|
|
176
173
|
rotPortStarboard: boolean;
|
|
177
174
|
rotAtZeroDeadband: number;
|
|
175
|
+
/** Measured rate of turn in degrees per minute (the maritime/AIS convention, see ES-TRIN 2025/1 Art. 3.02 and ITU-R M.1371). Sign controls direction (positive = starboard/clockwise). When defined, this drives both the dot animation (multiplied by `rotDotAnimationFactor`) and the port/starboard direction sign. */
|
|
178
176
|
rateOfTurnDegreesPerMinute: number | undefined;
|
|
177
|
+
/** Visual amplification factor applied only to the spinning-dot animation (not to bar extent). Default `18` keeps the legacy visual feel (≈1 rpm at 20°/min). */
|
|
179
178
|
rotDotAnimationFactor: number;
|
|
180
179
|
/**
|
|
181
180
|
* @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally `rotDotAnimationFactor`) instead.
|
|
@@ -183,6 +182,7 @@ export declare class ObcWatch extends LitElement {
|
|
|
183
182
|
* `rateOfTurnDegreesPerMinute` is `undefined`.
|
|
184
183
|
*/
|
|
185
184
|
set rotationsPerMinute(value: number);
|
|
185
|
+
/** Legacy spin speed of the ROT dot ring, in rotations per minute (sign controls direction; positive = clockwise). */
|
|
186
186
|
get rotationsPerMinute(): number;
|
|
187
187
|
private _legacyRotationsPerMinute;
|
|
188
188
|
private _rotController?;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EAMf,MAAM,KAAK,CAAC;AAeb,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAa,cAAc,EAAe,MAAM,aAAa,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAW,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,aAAa,EAAC,CAAC;AACvB,OAAO,EACL,OAAO,EACP,WAAW,EAQZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAC,OAAO,EAAE,WAAW,EAAC,CAAC;AAW9B,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAGvE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,YAAY,EAAC,CAAC;AAEpD,oBAAY,eAAe;IACzB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,eAAe,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,QAAU,CAAC;AAMzC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,MAAM,CAahE;AAID
|
|
1
|
+
{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"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"}
|
|
@@ -107,6 +107,7 @@ let ObcWatch = class extends LitElement {
|
|
|
107
107
|
set rotationsPerMinute(value) {
|
|
108
108
|
this._legacyRotationsPerMinute = value;
|
|
109
109
|
}
|
|
110
|
+
/** Legacy spin speed of the ROT dot ring, in rotations per minute (sign controls direction; positive = clockwise). */
|
|
110
111
|
get rotationsPerMinute() {
|
|
111
112
|
return this._legacyRotationsPerMinute;
|
|
112
113
|
}
|