@oicl/openbridge-webcomponents 0.0.15-dev-20240925080218 → 0.0.15-dev-20241106154355
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/custom-elements.json +2777 -2764
- package/dist/components/brilliance-menu/brilliance-menu.d.ts +2 -0
- package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
- package/dist/components/brilliance-menu/brilliance-menu.js +25 -17
- package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.d.ts +5 -2
- package/dist/navigation-instruments/compass-flat/compass-flat.d.ts.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.js +17 -17
- package/dist/navigation-instruments/compass-flat/compass-flat.js.map +1 -1
- package/package.json +1 -1
- package/src/components/brilliance-menu/brilliance-menu.ts +27 -19
- package/src/navigation-instruments/compass-flat/compass-flat.ts +20 -18
@@ -17,6 +17,7 @@ import '../../icons/icon-04-day-bright';
|
|
17
17
|
* @prop {Number} brightness - The brightness value
|
18
18
|
* @prop {Boolean} showAutoBrightness - Show the auto brightness toggle
|
19
19
|
* @prop {Boolean} showAutoPalette - Show the auto palette toggle
|
20
|
+
* @prop {Boolean} hideBrightness - Show the auto brightness toggle
|
20
21
|
*
|
21
22
|
* @fires palette-changed - Fires when the palette is changed
|
22
23
|
* @fires brightness-changed - Fires when the brightness is changed
|
@@ -26,6 +27,7 @@ export declare class ObcBrillianceMenu extends LitElement {
|
|
26
27
|
brightness: number;
|
27
28
|
showAutoBrightness: boolean;
|
28
29
|
showAutoPalette: boolean;
|
30
|
+
hideBrightness: boolean;
|
29
31
|
onPaletteChanged(event: CustomEvent): void;
|
30
32
|
onBrightnessChanged(event: CustomEvent): void;
|
31
33
|
render(): import("lit-html").TemplateResult<1>;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC
|
1
|
+
{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAC9D;IACkB,UAAU,SAAM;IAE1C,kBAAkB,UAAS;IACA,eAAe,UAAS;IACxB,cAAc,UAAS;IAElD,gBAAgB,CAAC,KAAK,EAAE,WAAW;IASnC,mBAAmB,CAAC,KAAK,EAAE,WAAW;IAS7B,MAAM;IAwDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
|
@@ -30,6 +30,7 @@ let ObcBrillianceMenu = class extends LitElement {
|
|
30
30
|
this.brightness = 50;
|
31
31
|
this.showAutoBrightness = false;
|
32
32
|
this.showAutoPalette = false;
|
33
|
+
this.hideBrightness = false;
|
33
34
|
}
|
34
35
|
onPaletteChanged(event) {
|
35
36
|
this.palette = event.detail.value;
|
@@ -50,23 +51,27 @@ let ObcBrillianceMenu = class extends LitElement {
|
|
50
51
|
render() {
|
51
52
|
return html`
|
52
53
|
<div class="card">
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
54
|
+
${this.hideBrightness ? "" : html`
|
55
|
+
<h3>Brilliance</h3>
|
56
|
+
<obc-slider
|
57
|
+
value=${this.brightness}
|
58
|
+
@value=${this.onBrightnessChanged}
|
59
|
+
min="0"
|
60
|
+
max="100"
|
61
|
+
hugcontainer
|
62
|
+
haslefticon
|
63
|
+
hasrighticon
|
64
|
+
>
|
65
|
+
<obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
|
66
|
+
<obi-04-brilliance-high
|
67
|
+
slot="icon-right"
|
68
|
+
></obi-04-brilliance-high>
|
69
|
+
</obc-slider>
|
70
|
+
${this.showAutoBrightness ? html`<obc-toggle-switch
|
71
|
+
label="Auto brilliance"
|
72
|
+
></obc-toggle-switch>` : ""}
|
73
|
+
<div class="divider"></div>
|
74
|
+
`}
|
70
75
|
<h3>Day - Night</h3>
|
71
76
|
<obc-toggle-button-group
|
72
77
|
value=${this.palette}
|
@@ -106,6 +111,9 @@ __decorateClass([
|
|
106
111
|
__decorateClass([
|
107
112
|
property({ type: Boolean })
|
108
113
|
], ObcBrillianceMenu.prototype, "showAutoPalette", 2);
|
114
|
+
__decorateClass([
|
115
|
+
property({ type: Boolean })
|
116
|
+
], ObcBrillianceMenu.prototype, "hideBrightness", 2);
|
109
117
|
ObcBrillianceMenu = __decorateClass([
|
110
118
|
customElement("obc-brilliance-menu")
|
111
119
|
], ObcBrillianceMenu);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../icon-button/icon-button';\nimport '../slider/slider';\nimport '../toggle-switch/toggle-switch';\nimport '../toggle-button-group/toggle-button-group';\nimport '../toggle-button-option/toggle-button-option';\nimport '../../icons/icon-04-brilliance-low';\nimport '../../icons/icon-04-brilliance-high';\nimport '../../icons/icon-04-night';\nimport '../../icons/icon-04-dusk';\nimport '../../icons/icon-04-day';\nimport '../../icons/icon-04-day-bright';\n\n/**\n * @element obc-brilliance-menu\n *\n * @prop {String} palette - The palette to use. Possible values are 'night', 'dusk', 'day', 'bright'\n * @prop {Number} brightness - The brightness value\n * @prop {Boolean} showAutoBrightness - Show the auto brightness toggle\n * @prop {Boolean} showAutoPalette - Show the auto palette toggle\n *\n * @fires palette-changed - Fires when the palette is changed\n * @fires brightness-changed - Fires when the brightness is changed\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =\n 'day';\n @property({type: Number}) brightness = 50;\n @property({type: Boolean})\n showAutoBrightness = false;\n @property({type: Boolean}) showAutoPalette = false;\n\n onPaletteChanged(event: CustomEvent) {\n this.palette = event.detail.value;\n this.dispatchEvent(\n new CustomEvent('palette-changed', {\n detail: {value: event.detail.value},\n })\n );\n }\n\n onBrightnessChanged(event: CustomEvent) {\n this.brightness = event.detail;\n this.dispatchEvent(\n new CustomEvent('brightness-changed', {\n detail: {value: event.detail},\n })\n );\n }\n\n override render() {\n return html`\n <div class=\"card\">\n <h3>Brilliance</h3>\n
|
1
|
+
{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../icon-button/icon-button';\nimport '../slider/slider';\nimport '../toggle-switch/toggle-switch';\nimport '../toggle-button-group/toggle-button-group';\nimport '../toggle-button-option/toggle-button-option';\nimport '../../icons/icon-04-brilliance-low';\nimport '../../icons/icon-04-brilliance-high';\nimport '../../icons/icon-04-night';\nimport '../../icons/icon-04-dusk';\nimport '../../icons/icon-04-day';\nimport '../../icons/icon-04-day-bright';\n\n/**\n * @element obc-brilliance-menu\n *\n * @prop {String} palette - The palette to use. Possible values are 'night', 'dusk', 'day', 'bright'\n * @prop {Number} brightness - The brightness value\n * @prop {Boolean} showAutoBrightness - Show the auto brightness toggle\n * @prop {Boolean} showAutoPalette - Show the auto palette toggle\n * @prop {Boolean} hideBrightness - Show the auto brightness toggle\n *\n * @fires palette-changed - Fires when the palette is changed\n * @fires brightness-changed - Fires when the brightness is changed\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =\n 'day';\n @property({type: Number}) brightness = 50;\n @property({type: Boolean})\n showAutoBrightness = false;\n @property({type: Boolean}) showAutoPalette = false;\n @property({type: Boolean}) hideBrightness = false;\n\n onPaletteChanged(event: CustomEvent) {\n this.palette = event.detail.value;\n this.dispatchEvent(\n new CustomEvent('palette-changed', {\n detail: {value: event.detail.value},\n })\n );\n }\n\n onBrightnessChanged(event: CustomEvent) {\n this.brightness = event.detail;\n this.dispatchEvent(\n new CustomEvent('brightness-changed', {\n detail: {value: event.detail},\n })\n );\n }\n\n override render() {\n return html`\n <div class=\"card\">\n ${this.hideBrightness\n ? ''\n : html`\n <h3>Brilliance</h3>\n <obc-slider\n value=${this.brightness}\n @value=${this.onBrightnessChanged}\n min=\"0\"\n max=\"100\"\n hugcontainer\n haslefticon\n hasrighticon\n >\n <obi-04-brilliance-low slot=\"icon-left\"></obi-04-brilliance-low>\n <obi-04-brilliance-high\n slot=\"icon-right\"\n ></obi-04-brilliance-high>\n </obc-slider>\n ${this.showAutoBrightness\n ? html`<obc-toggle-switch\n label=\"Auto brilliance\"\n ></obc-toggle-switch>`\n : ''}\n <div class=\"divider\"></div>\n `}\n <h3>Day - Night</h3>\n <obc-toggle-button-group\n value=${this.palette}\n @value=${this.onPaletteChanged}\n >\n <obc-toggle-button-option value=\"night\">\n <obi-04-night slot=\"icon\"></obi-04-night>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"dusk\">\n <obi-04-dusk slot=\"icon\"></obi-04-dusk>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"day\">\n <obi-04-day slot=\"icon\"></obi-04-day>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"bright\">\n <obi-04-day-bright slot=\"icon\"></obi-04-day-bright>\n </obc-toggle-button-option>\n </obc-toggle-button-group>\n ${this.showAutoPalette\n ? html`<obc-toggle-switch\n label=\"Auto day - night\"\n checked\n ></obc-toggle-switch>`\n : ''}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-brilliance-menu': ObcBrillianceMenu;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4Ba,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,UAAA;AACqC,SAAA,aAAA;AAElB,SAAA,qBAAA;AACwB,SAAA,kBAAA;AACD,SAAA,iBAAA;AAAA,EAAA;AAAA,EAE5C,iBAAiB,OAAoB;AAC9B,SAAA,UAAU,MAAM,OAAO;AACvB,SAAA;AAAA,MACH,IAAI,YAAY,mBAAmB;AAAA,QACjC,QAAQ,EAAC,OAAO,MAAM,OAAO,MAAK;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,oBAAoB,OAAoB;AACtC,SAAK,aAAa,MAAM;AACnB,SAAA;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,MAAM,OAAM;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA,UAED,KAAK,iBACH,KACA;AAAA;AAAA;AAAA,wBAGY,KAAK,UAAU;AAAA,yBACd,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYjC,KAAK,qBACH;AAAA;AAAA,2CAGA,EAAE;AAAA;AAAA,aAEP;AAAA;AAAA;AAAA,kBAGK,KAAK,OAAO;AAAA,mBACX,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAe9B,KAAK,kBACH;AAAA;AAAA;AAAA,qCAIA,EAAE;AAAA;AAAA;AAAA,EAGZ;AAGF;AApFa,kBAmFK,SAAS,UAAU,cAAc;AAlFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,WAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,cAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAQ;AAAA,GAJd,kBAKX,WAAA,sBAAA,CAAA;AAC2B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GANd,kBAMgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAPd,kBAOgB,WAAA,kBAAA,CAAA;AAPhB,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
|
@@ -22,12 +22,15 @@ export declare class ObcCompassFlat extends LitElement {
|
|
22
22
|
FOV: number;
|
23
23
|
minFOV: number;
|
24
24
|
maxFOV: number;
|
25
|
-
labels: Label[];
|
26
25
|
containerWidth: number;
|
27
26
|
private resizeObserver;
|
28
27
|
connectedCallback(): void;
|
29
28
|
disconnectedCallback(): void;
|
30
|
-
|
29
|
+
generateLabels(): {
|
30
|
+
x: number;
|
31
|
+
y: LabelPosition;
|
32
|
+
text: string;
|
33
|
+
}[];
|
31
34
|
private generateIntervalTickmarks;
|
32
35
|
private generateCardinalTickmarks;
|
33
36
|
private generateTickmarks;
|
@@ -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,EAAoC,MAAM,KAAK,CAAC;AAIlE,OAAO,0BAA0B,CAAC;AAElC,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,qBACa,cAAe,SAAQ,UAAU;IACjB,SAAS,EAAE,OAAO,CAAQ;IAC1B,YAAY,EAAE,OAAO,CAAS;IAC/B,OAAO,EAAE,MAAM,CAAM;IACrB,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,YAAY,SAAK;IACjB,GAAG,SAAM;IACT,MAAM,SAAM;IACZ,MAAM,SAAO;
|
1
|
+
{"version":3,"file":"compass-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAoC,MAAM,KAAK,CAAC;AAIlE,OAAO,0BAA0B,CAAC;AAElC,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,qBACa,cAAe,SAAQ,UAAU;IACjB,SAAS,EAAE,OAAO,CAAQ;IAC1B,YAAY,EAAE,OAAO,CAAS;IAC/B,OAAO,EAAE,MAAM,CAAM;IACrB,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,YAAY,SAAK;IACjB,GAAG,SAAM;IACT,MAAM,SAAM;IACZ,MAAM,SAAO;IAE9B,cAAc,SAAK;IAE5B,OAAO,CAAC,cAAc,CAInB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,cAAc;;;;;IAsCd,OAAO,CAAC,yBAAyB;IAwBjC,OAAO,CAAC,yBAAyB;IAajC,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,MAAM;IAQL,MAAM;IAiCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { unsafeCSS, LitElement, svg } from "lit";
|
2
2
|
import componentStyle from "./compass-flat.css.js";
|
3
|
-
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import { property, state, customElement } from "lit/decorators.js";
|
4
4
|
import { TickmarkType } from "../watch-flat/tickmark-flat.js";
|
5
5
|
import "../watch-flat/watch-flat.js";
|
6
6
|
var __defProp = Object.defineProperty;
|
@@ -35,12 +35,10 @@ let ObcCompassFlat = class extends LitElement {
|
|
35
35
|
this.FOV = 45;
|
36
36
|
this.minFOV = 45;
|
37
37
|
this.maxFOV = 180;
|
38
|
-
this.labels = [];
|
39
38
|
this.containerWidth = 0;
|
40
39
|
this.resizeObserver = new ResizeObserver((entries) => {
|
41
40
|
for (const entry of entries) {
|
42
41
|
this.containerWidth = entry.contentRect.width;
|
43
|
-
this.updateLabels();
|
44
42
|
}
|
45
43
|
});
|
46
44
|
}
|
@@ -52,11 +50,11 @@ let ObcCompassFlat = class extends LitElement {
|
|
52
50
|
super.disconnectedCallback();
|
53
51
|
this.resizeObserver.unobserve(this);
|
54
52
|
}
|
55
|
-
|
53
|
+
generateLabels() {
|
56
54
|
if (this.containerWidth < 192) {
|
57
|
-
|
55
|
+
return [];
|
58
56
|
} else if (this.containerWidth <= 300) {
|
59
|
-
|
57
|
+
return [
|
60
58
|
{ x: -180, y: -45, text: "S" },
|
61
59
|
{ x: -90, y: -45, text: "W" },
|
62
60
|
{ x: 0, y: -45, text: "N" },
|
@@ -68,7 +66,7 @@ let ObcCompassFlat = class extends LitElement {
|
|
68
66
|
{ x: 540, y: -45, text: "S" }
|
69
67
|
];
|
70
68
|
} else {
|
71
|
-
|
69
|
+
return [
|
72
70
|
{ x: -180, y: -45, text: "S" },
|
73
71
|
{ x: -135, y: -45, text: "SW" },
|
74
72
|
{ x: -90, y: -45, text: "W" },
|
@@ -105,16 +103,16 @@ let ObcCompassFlat = class extends LitElement {
|
|
105
103
|
}
|
106
104
|
return tickmarks;
|
107
105
|
}
|
108
|
-
generateCardinalTickmarks(scale) {
|
106
|
+
generateCardinalTickmarks(scale, labels) {
|
109
107
|
const tickmarks = [];
|
110
|
-
for (const label of
|
108
|
+
for (const label of labels) {
|
111
109
|
tickmarks.push({ angle: label.x * scale, type: TickmarkType.main });
|
112
110
|
}
|
113
111
|
return tickmarks;
|
114
112
|
}
|
115
|
-
generateTickmarks(scale) {
|
113
|
+
generateTickmarks(scale, labels) {
|
116
114
|
return [
|
117
|
-
...this.generateCardinalTickmarks(scale),
|
115
|
+
...this.generateCardinalTickmarks(scale, labels),
|
118
116
|
...this.generateIntervalTickmarks(scale)
|
119
117
|
];
|
120
118
|
}
|
@@ -167,14 +165,16 @@ let ObcCompassFlat = class extends LitElement {
|
|
167
165
|
const baseOffset = 5;
|
168
166
|
const translationScale = baseOffset * 35 / this.FOV;
|
169
167
|
const translation = angleDiff * translationScale;
|
170
|
-
const
|
171
|
-
this.labels
|
172
|
-
|
173
|
-
|
168
|
+
const labels = this.generateLabels();
|
169
|
+
const tickmarks = this.generateTickmarks(translationScale, labels);
|
170
|
+
const scaledLabels = labels.map((l) => ({
|
171
|
+
...l,
|
172
|
+
x: l.x * translationScale
|
173
|
+
}));
|
174
174
|
const viewBox = this.noPadding ? "-192 -128 384 128" : "-200 -144 400 144";
|
175
175
|
return svg`
|
176
176
|
<div class="container">
|
177
|
-
<obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${
|
177
|
+
<obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
|
178
178
|
<svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
|
179
179
|
${this.HDGSvg}${this.COGSvg(translation)}
|
180
180
|
</div>
|
@@ -210,7 +210,7 @@ __decorateClass([
|
|
210
210
|
property({ type: Number })
|
211
211
|
], ObcCompassFlat.prototype, "maxFOV", 2);
|
212
212
|
__decorateClass([
|
213
|
-
|
213
|
+
state()
|
214
214
|
], ObcCompassFlat.prototype, "containerWidth", 2);
|
215
215
|
ObcCompassFlat = __decorateClass([
|
216
216
|
customElement("obc-compass-flat")
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\nimport '../watch-flat/watch-flat';\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@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n @property({type: Boolean}) noPadding: boolean = true;\n @property({type: Boolean}) FOVIndicator: boolean = false;\n @property({type: Number}) padding: number = 16;\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 labels: Label[] = [];\n\n @property({type: Number}) containerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\n this.updateLabels();\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 private updateLabels() {\n if (this.containerWidth < 192) {\n this.labels = [];\n } else if (this.containerWidth <= 300) {\n this.labels = [\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 this.labels = [\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 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(scale: number): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n\n for (const label of this.labels) {\n tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n }\n\n return tickmarks;\n }\n\n private generateTickmarks(scale: number): Tickmark[] {\n return [\n ...this.generateCardinalTickmarks(scale),\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;\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 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=\"var(--instrument-enhanced-secondary-color)\" 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=\"var(--instrument-enhanced-secondary-color)\" 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\n const tickmarks = this.generateTickmarks(translationScale);\n this.labels.map((l) => {\n l.x = l.x * translationScale;\n });\n\n const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\n\n return svg`\n <div class=\"container\">\n <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \n ${this.HDGSvg}${this.COGSvg(translation)}\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":["LabelPosition","LabelStyle"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\nimport '../watch-flat/watch-flat';\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@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n @property({type: Boolean}) noPadding: boolean = true;\n @property({type: Boolean}) FOVIndicator: boolean = false;\n @property({type: Number}) padding: number = 16;\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\n @state() containerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\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 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;\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 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=\"var(--instrument-enhanced-secondary-color)\" 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=\"var(--instrument-enhanced-secondary-color)\" 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 viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\n\n return svg`\n <div class=\"container\">\n <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \n ${this.HDGSvg}${this.COGSvg(translation)}\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":["LabelPosition","LabelStyle"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -20,6 +20,7 @@ import '../../icons/icon-04-day-bright';
|
|
20
20
|
* @prop {Number} brightness - The brightness value
|
21
21
|
* @prop {Boolean} showAutoBrightness - Show the auto brightness toggle
|
22
22
|
* @prop {Boolean} showAutoPalette - Show the auto palette toggle
|
23
|
+
* @prop {Boolean} hideBrightness - Show the auto brightness toggle
|
23
24
|
*
|
24
25
|
* @fires palette-changed - Fires when the palette is changed
|
25
26
|
* @fires brightness-changed - Fires when the brightness is changed
|
@@ -32,6 +33,7 @@ export class ObcBrillianceMenu extends LitElement {
|
|
32
33
|
@property({type: Boolean})
|
33
34
|
showAutoBrightness = false;
|
34
35
|
@property({type: Boolean}) showAutoPalette = false;
|
36
|
+
@property({type: Boolean}) hideBrightness = false;
|
35
37
|
|
36
38
|
onPaletteChanged(event: CustomEvent) {
|
37
39
|
this.palette = event.detail.value;
|
@@ -54,25 +56,31 @@ export class ObcBrillianceMenu extends LitElement {
|
|
54
56
|
override render() {
|
55
57
|
return html`
|
56
58
|
<div class="card">
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
59
|
+
${this.hideBrightness
|
60
|
+
? ''
|
61
|
+
: html`
|
62
|
+
<h3>Brilliance</h3>
|
63
|
+
<obc-slider
|
64
|
+
value=${this.brightness}
|
65
|
+
@value=${this.onBrightnessChanged}
|
66
|
+
min="0"
|
67
|
+
max="100"
|
68
|
+
hugcontainer
|
69
|
+
haslefticon
|
70
|
+
hasrighticon
|
71
|
+
>
|
72
|
+
<obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
|
73
|
+
<obi-04-brilliance-high
|
74
|
+
slot="icon-right"
|
75
|
+
></obi-04-brilliance-high>
|
76
|
+
</obc-slider>
|
77
|
+
${this.showAutoBrightness
|
78
|
+
? html`<obc-toggle-switch
|
79
|
+
label="Auto brilliance"
|
80
|
+
></obc-toggle-switch>`
|
81
|
+
: ''}
|
82
|
+
<div class="divider"></div>
|
83
|
+
`}
|
76
84
|
<h3>Day - Night</h3>
|
77
85
|
<obc-toggle-button-group
|
78
86
|
value=${this.palette}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';
|
2
2
|
import componentStyle from './compass-flat.css?inline';
|
3
|
-
import {customElement, property} from 'lit/decorators.js';
|
3
|
+
import {customElement, property, state} from 'lit/decorators.js';
|
4
4
|
import {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';
|
5
5
|
import '../watch-flat/watch-flat';
|
6
6
|
|
@@ -30,14 +30,12 @@ export class ObcCompassFlat extends LitElement {
|
|
30
30
|
@property({type: Number}) FOV = 45;
|
31
31
|
@property({type: Number}) minFOV = 45;
|
32
32
|
@property({type: Number}) maxFOV = 180;
|
33
|
-
labels: Label[] = [];
|
34
33
|
|
35
|
-
@
|
34
|
+
@state() containerWidth = 0;
|
36
35
|
|
37
36
|
private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
|
38
37
|
for (const entry of entries) {
|
39
38
|
this.containerWidth = entry.contentRect.width;
|
40
|
-
this.updateLabels();
|
41
39
|
}
|
42
40
|
});
|
43
41
|
|
@@ -51,11 +49,11 @@ export class ObcCompassFlat extends LitElement {
|
|
51
49
|
this.resizeObserver.unobserve(this);
|
52
50
|
}
|
53
51
|
|
54
|
-
|
52
|
+
generateLabels() {
|
55
53
|
if (this.containerWidth < 192) {
|
56
|
-
|
54
|
+
return [];
|
57
55
|
} else if (this.containerWidth <= 300) {
|
58
|
-
|
56
|
+
return [
|
59
57
|
{x: -180, y: LabelPosition.top, text: 'S'},
|
60
58
|
{x: -90, y: LabelPosition.top, text: 'W'},
|
61
59
|
{x: 0, y: LabelPosition.top, text: 'N'},
|
@@ -67,7 +65,7 @@ export class ObcCompassFlat extends LitElement {
|
|
67
65
|
{x: 540, y: LabelPosition.top, text: 'S'},
|
68
66
|
];
|
69
67
|
} else {
|
70
|
-
|
68
|
+
return [
|
71
69
|
{x: -180, y: LabelPosition.top, text: 'S'},
|
72
70
|
{x: -135, y: LabelPosition.top, text: 'SW'},
|
73
71
|
{x: -90, y: LabelPosition.top, text: 'W'},
|
@@ -113,19 +111,22 @@ export class ObcCompassFlat extends LitElement {
|
|
113
111
|
return tickmarks;
|
114
112
|
}
|
115
113
|
|
116
|
-
private generateCardinalTickmarks(
|
114
|
+
private generateCardinalTickmarks(
|
115
|
+
scale: number,
|
116
|
+
labels: Label[]
|
117
|
+
): Tickmark[] {
|
117
118
|
const tickmarks: Tickmark[] = [];
|
118
119
|
|
119
|
-
for (const label of
|
120
|
+
for (const label of labels) {
|
120
121
|
tickmarks.push({angle: label.x * scale, type: TickmarkType.main});
|
121
122
|
}
|
122
123
|
|
123
124
|
return tickmarks;
|
124
125
|
}
|
125
126
|
|
126
|
-
private generateTickmarks(scale: number): Tickmark[] {
|
127
|
+
private generateTickmarks(scale: number, labels: Label[]): Tickmark[] {
|
127
128
|
return [
|
128
|
-
...this.generateCardinalTickmarks(scale),
|
129
|
+
...this.generateCardinalTickmarks(scale, labels),
|
129
130
|
...this.generateIntervalTickmarks(scale),
|
130
131
|
];
|
131
132
|
}
|
@@ -194,17 +195,18 @@ export class ObcCompassFlat extends LitElement {
|
|
194
195
|
const translationScale = (baseOffset * 35) / this.FOV;
|
195
196
|
|
196
197
|
const translation = angleDiff * translationScale;
|
197
|
-
|
198
|
-
const tickmarks = this.generateTickmarks(translationScale);
|
199
|
-
|
200
|
-
l
|
201
|
-
|
198
|
+
const labels = this.generateLabels();
|
199
|
+
const tickmarks = this.generateTickmarks(translationScale, labels);
|
200
|
+
const scaledLabels = labels.map((l) => ({
|
201
|
+
...l,
|
202
|
+
x: l.x * translationScale,
|
203
|
+
}));
|
202
204
|
|
203
205
|
const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';
|
204
206
|
|
205
207
|
return svg`
|
206
208
|
<div class="container">
|
207
|
-
<obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${
|
209
|
+
<obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
|
208
210
|
<svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
|
209
211
|
${this.HDGSvg}${this.COGSvg(translation)}
|
210
212
|
</div>
|