@oicl/openbridge-webcomponents 0.0.15-dev-20241112205851 → 0.0.15-dev-20241113182547
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 +19 -39
- package/dist/automation/automation-tank/automation-tank.d.ts +7 -0
- package/dist/automation/automation-tank/automation-tank.d.ts.map +1 -1
- package/dist/automation/automation-tank/automation-tank.js.map +1 -1
- package/dist/navigation-instruments/compass/compass.d.ts +7 -6
- package/dist/navigation-instruments/compass/compass.d.ts.map +1 -1
- package/dist/navigation-instruments/compass/compass.js +12 -33
- package/dist/navigation-instruments/compass/compass.js.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.css.js +2 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.css.js.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.d.ts +6 -0
- package/dist/navigation-instruments/compass-flat/compass-flat.d.ts.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.js +10 -2
- package/dist/navigation-instruments/compass-flat/compass-flat.js.map +1 -1
- package/dist/storybook-util.d.ts +1 -0
- package/dist/storybook-util.d.ts.map +1 -1
- package/dist/storybook-util.js +3 -1
- package/dist/storybook-util.js.map +1 -1
- package/package.json +1 -1
- package/src/automation/automation-tank/automation-tank.ts +7 -0
- package/src/navigation-instruments/compass/compass.ts +17 -27
- package/src/navigation-instruments/compass-flat/compass-flat.css +2 -1
- package/src/navigation-instruments/compass-flat/compass-flat.stories.ts +2 -1
- package/src/navigation-instruments/compass-flat/compass-flat.ts +13 -2
- package/src/storybook-util.ts +4 -2
package/custom-elements.json
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
{
|
|
85
85
|
"name": "context",
|
|
86
86
|
"type": {
|
|
87
|
-
"text": "{args: {width: number}}"
|
|
87
|
+
"text": "{args: {width: number; height?: number}}"
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
]
|
|
@@ -242,6 +242,12 @@
|
|
|
242
242
|
}
|
|
243
243
|
]
|
|
244
244
|
},
|
|
245
|
+
{
|
|
246
|
+
"kind": "javascript-module",
|
|
247
|
+
"path": "src/navigation-instruments/types.ts",
|
|
248
|
+
"declarations": [],
|
|
249
|
+
"exports": []
|
|
250
|
+
},
|
|
245
251
|
{
|
|
246
252
|
"kind": "javascript-module",
|
|
247
253
|
"path": "src/icons/icon-01-add.ts",
|
|
@@ -38216,12 +38222,6 @@
|
|
|
38216
38222
|
}
|
|
38217
38223
|
]
|
|
38218
38224
|
},
|
|
38219
|
-
{
|
|
38220
|
-
"kind": "javascript-module",
|
|
38221
|
-
"path": "src/navigation-instruments/types.ts",
|
|
38222
|
-
"declarations": [],
|
|
38223
|
-
"exports": []
|
|
38224
|
-
},
|
|
38225
38225
|
{
|
|
38226
38226
|
"kind": "javascript-module",
|
|
38227
38227
|
"path": "src/svghelpers/circle.ts",
|
|
@@ -44526,15 +44526,6 @@
|
|
|
44526
44526
|
"default": "0",
|
|
44527
44527
|
"attribute": "courseOverGround"
|
|
44528
44528
|
},
|
|
44529
|
-
{
|
|
44530
|
-
"kind": "field",
|
|
44531
|
-
"name": "padding",
|
|
44532
|
-
"type": {
|
|
44533
|
-
"text": "number"
|
|
44534
|
-
},
|
|
44535
|
-
"default": "48",
|
|
44536
|
-
"attribute": "padding"
|
|
44537
|
-
},
|
|
44538
44529
|
{
|
|
44539
44530
|
"kind": "field",
|
|
44540
44531
|
"name": "headingAdvices",
|
|
@@ -44545,24 +44536,13 @@
|
|
|
44545
44536
|
},
|
|
44546
44537
|
{
|
|
44547
44538
|
"kind": "field",
|
|
44548
|
-
"name": "
|
|
44549
|
-
"type": {
|
|
44550
|
-
"text": "number"
|
|
44551
|
-
},
|
|
44552
|
-
"default": "0"
|
|
44553
|
-
},
|
|
44554
|
-
{
|
|
44555
|
-
"kind": "field",
|
|
44556
|
-
"name": "resizeObserver",
|
|
44557
|
-
"type": {
|
|
44558
|
-
"text": "ResizeObserver"
|
|
44559
|
-
},
|
|
44539
|
+
"name": "_resizeController",
|
|
44560
44540
|
"privacy": "private",
|
|
44561
|
-
"default": "new
|
|
44541
|
+
"default": "new ResizeController(this, {})"
|
|
44562
44542
|
},
|
|
44563
44543
|
{
|
|
44564
44544
|
"kind": "method",
|
|
44565
|
-
"name": "
|
|
44545
|
+
"name": "getPadding",
|
|
44566
44546
|
"privacy": "private"
|
|
44567
44547
|
},
|
|
44568
44548
|
{
|
|
@@ -44591,14 +44571,6 @@
|
|
|
44591
44571
|
},
|
|
44592
44572
|
"default": "0",
|
|
44593
44573
|
"fieldName": "courseOverGround"
|
|
44594
|
-
},
|
|
44595
|
-
{
|
|
44596
|
-
"name": "padding",
|
|
44597
|
-
"type": {
|
|
44598
|
-
"text": "number"
|
|
44599
|
-
},
|
|
44600
|
-
"default": "48",
|
|
44601
|
-
"fieldName": "padding"
|
|
44602
44574
|
}
|
|
44603
44575
|
],
|
|
44604
44576
|
"superclass": {
|
|
@@ -44771,6 +44743,14 @@
|
|
|
44771
44743
|
},
|
|
44772
44744
|
"default": "0"
|
|
44773
44745
|
},
|
|
44746
|
+
{
|
|
44747
|
+
"kind": "field",
|
|
44748
|
+
"name": "maxContainerWidth",
|
|
44749
|
+
"type": {
|
|
44750
|
+
"text": "number"
|
|
44751
|
+
},
|
|
44752
|
+
"default": "0"
|
|
44753
|
+
},
|
|
44774
44754
|
{
|
|
44775
44755
|
"kind": "field",
|
|
44776
44756
|
"name": "resizeObserver",
|
|
@@ -44778,7 +44758,7 @@
|
|
|
44778
44758
|
"text": "ResizeObserver"
|
|
44779
44759
|
},
|
|
44780
44760
|
"privacy": "private",
|
|
44781
|
-
"default": "new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\n }\n })"
|
|
44761
|
+
"default": "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 })"
|
|
44782
44762
|
},
|
|
44783
44763
|
{
|
|
44784
44764
|
"kind": "method",
|
|
@@ -16,6 +16,13 @@ export declare enum TankVariant {
|
|
|
16
16
|
vertical = "vertical",
|
|
17
17
|
compact = "compact"
|
|
18
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
*
|
|
21
|
+
*
|
|
22
|
+
* @ignition-base-height: 173px
|
|
23
|
+
* @ignition-base-width: 168px
|
|
24
|
+
* @ignition-center
|
|
25
|
+
*/
|
|
19
26
|
export declare class ObcAutomationTank extends LitElement {
|
|
20
27
|
medium: LineMedium;
|
|
21
28
|
value: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,IAAI,CAAC;AAE9B,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gCAAgC,CAAC;AACxC,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AAGjC,oBAAY,SAAS;IACnB,UAAU,gBAAgB;IAC1B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,WAAW;IACrB,QAAQ,aAAa;IACrB,OAAO,YAAY;CACpB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAoB;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,GAAG,EAAE,MAAM,CAAO;IAClB,KAAK,EAAE,SAAS,CAAoB;IACpC,OAAO,EAAE,WAAW,CAAwB;IAC5C,GAAG,EAAE,MAAM,CAAM;IAE3C,SAAS,IAAI,kBAAkB;IAoBtB,MAAM;IA8Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
|
|
1
|
+
{"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,IAAI,CAAC;AAE9B,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gCAAgC,CAAC;AACxC,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AAGjC,oBAAY,SAAS;IACnB,UAAU,gBAAgB;IAC1B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,WAAW;IACrB,QAAQ,aAAa;IACrB,OAAO,YAAY;CACpB;AAED;;;;;;GAMG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAoB;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,GAAG,EAAE,MAAM,CAAO;IAClB,KAAK,EAAE,SAAS,CAAoB;IACpC,OAAO,EAAE,WAAW,CAAwB;IAC5C,GAAG,EAAE,MAAM,CAAM;IAE3C,SAAS,IAAI,kBAAkB;IAoBtB,MAAM;IA8Cf,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":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '..';\n\nimport '../../icons/icon-02-chevron-double-up';\nimport '../../icons/icon-02-chevron-up';\nimport '../../icons/icon-02-chevron-double-down';\nimport '../../icons/icon-02-chevron-down';\nimport '../../icons/icon-01-off';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum TankTrend {\n fastRising = 'fast-rising',\n rising = 'rising',\n stable = 'stable',\n falling = 'falling',\n fastFalling = 'fast-falling',\n}\n\nexport enum TankVariant {\n vertical = 'vertical',\n compact = 'compact',\n}\n\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n @property({type: String}) medium: LineMedium = LineMedium.water;\n @property({type: Number}) value: number = 0;\n @property({type: Number}) max: number = 100;\n @property({type: String}) trend: TankTrend = TankTrend.stable;\n @property({type: String}) variant: TankVariant = TankVariant.vertical;\n @property({type: String}) tag: string = '';\n\n trendIcon(): HTMLTemplateResult {\n if (this.trend === TankTrend.fastRising) {\n return html`<obi-02-chevron-double-up\n class=\"trend-icon\"\n ></obi-02-chevron-double-up>`;\n } else if (this.trend === TankTrend.rising) {\n return html`<obi-02-chevron-up class=\"trend-icon\"></obi-02-chevron-up>`;\n } else if (this.trend === TankTrend.fastFalling) {\n return html`<obi-02-chevron-double-down\n class=\"trend-icon\"\n ></obi-02-chevron-double-down>`;\n } else if (this.trend === TankTrend.falling) {\n return html`<obi-02-chevron-down\n class=\"trend-icon\"\n ></obi-02-chevron-down>`;\n } else {\n return html`<obi-01-off class=\"trend-icon\"></obi-01-off>`;\n }\n }\n\n override render() {\n const percent = (this.value / this.max) * 100;\n\n return html`\n <div class=\"outer\">\n <div class=\"badges\">\n <slot name=\"badges\"></slot>\n </div>\n <button\n class=${classMap({\n wrapper: true,\n [this.variant]: true,\n [this.medium]: true,\n })}\n style=\"--percent: ${percent / 100}\"\n >\n <div class=\"bar-container\">\n <div class=\"bar\"></div>\n </div>\n <div class=\"content\">\n <div class=\"header\">\n ${this.trendIcon()}\n <div class=\"percent\">\n ${percent.toFixed(0)}<span class=\"percent-symbol\">%</span>\n </div>\n </div>\n <div class=\"value\">\n <div class=\"current\">\n <slot name=\"current-value\" class=\"current-value\"\n >${this.value.toFixed(0)}</slot\n ><span class=\"divider\">/</span>\n </div>\n <div class=\"max\">\n <slot class=\"max-value\" name=\"max-value\"\n >${this.max.toFixed(0)}</slot\n >\n <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n </div>\n </div>\n </div>\n </button>\n <div class=\"tag\"><slot name=\"tag\">${this.tag}</slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-tank': ObcAutomationTank;\n }\n}\n"],"names":["TankTrend","TankVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,8BAAAA,eAAL;AACLA,aAAA,YAAa,IAAA;AACbA,aAAA,QAAS,IAAA;AACTA,aAAA,QAAS,IAAA;AACTA,aAAA,SAAU,IAAA;AACVA,aAAA,aAAc,IAAA;AALJA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAQA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,UAAW,IAAA;AACXA,eAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '..';\n\nimport '../../icons/icon-02-chevron-double-up';\nimport '../../icons/icon-02-chevron-up';\nimport '../../icons/icon-02-chevron-double-down';\nimport '../../icons/icon-02-chevron-down';\nimport '../../icons/icon-01-off';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum TankTrend {\n fastRising = 'fast-rising',\n rising = 'rising',\n stable = 'stable',\n falling = 'falling',\n fastFalling = 'fast-falling',\n}\n\nexport enum TankVariant {\n vertical = 'vertical',\n compact = 'compact',\n}\n\n/**\n *\n *\n * @ignition-base-height: 173px\n * @ignition-base-width: 168px\n * @ignition-center\n */\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n @property({type: String}) medium: LineMedium = LineMedium.water;\n @property({type: Number}) value: number = 0;\n @property({type: Number}) max: number = 100;\n @property({type: String}) trend: TankTrend = TankTrend.stable;\n @property({type: String}) variant: TankVariant = TankVariant.vertical;\n @property({type: String}) tag: string = '';\n\n trendIcon(): HTMLTemplateResult {\n if (this.trend === TankTrend.fastRising) {\n return html`<obi-02-chevron-double-up\n class=\"trend-icon\"\n ></obi-02-chevron-double-up>`;\n } else if (this.trend === TankTrend.rising) {\n return html`<obi-02-chevron-up class=\"trend-icon\"></obi-02-chevron-up>`;\n } else if (this.trend === TankTrend.fastFalling) {\n return html`<obi-02-chevron-double-down\n class=\"trend-icon\"\n ></obi-02-chevron-double-down>`;\n } else if (this.trend === TankTrend.falling) {\n return html`<obi-02-chevron-down\n class=\"trend-icon\"\n ></obi-02-chevron-down>`;\n } else {\n return html`<obi-01-off class=\"trend-icon\"></obi-01-off>`;\n }\n }\n\n override render() {\n const percent = (this.value / this.max) * 100;\n\n return html`\n <div class=\"outer\">\n <div class=\"badges\">\n <slot name=\"badges\"></slot>\n </div>\n <button\n class=${classMap({\n wrapper: true,\n [this.variant]: true,\n [this.medium]: true,\n })}\n style=\"--percent: ${percent / 100}\"\n >\n <div class=\"bar-container\">\n <div class=\"bar\"></div>\n </div>\n <div class=\"content\">\n <div class=\"header\">\n ${this.trendIcon()}\n <div class=\"percent\">\n ${percent.toFixed(0)}<span class=\"percent-symbol\">%</span>\n </div>\n </div>\n <div class=\"value\">\n <div class=\"current\">\n <slot name=\"current-value\" class=\"current-value\"\n >${this.value.toFixed(0)}</slot\n ><span class=\"divider\">/</span>\n </div>\n <div class=\"max\">\n <slot class=\"max-value\" name=\"max-value\"\n >${this.max.toFixed(0)}</slot\n >\n <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n </div>\n </div>\n </div>\n </button>\n <div class=\"tag\"><slot name=\"tag\">${this.tag}</slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-tank': ObcAutomationTank;\n }\n}\n"],"names":["TankTrend","TankVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,8BAAAA,eAAL;AACLA,aAAA,YAAa,IAAA;AACbA,aAAA,QAAS,IAAA;AACTA,aAAA,QAAS,IAAA;AACTA,aAAA,SAAU,IAAA;AACVA,aAAA,aAAc,IAAA;AALJA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAQA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,UAAW,IAAA;AACXA,eAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAaC,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChB,SAAA,QAAA;AACF,SAAA,MAAA;AACK,SAAA,QAAA;AACI,SAAA,UAAA;AACT,SAAA,MAAA;AAAA,EAAA;AAAA,EAExC,YAAgC;AAC1B,QAAA,KAAK,UAAU,eAAsB;AAChC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,UAAkB;AACnC,aAAA;AAAA,IAAA,WACE,KAAK,UAAU,gBAAuB;AACxC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,WAAmB;AACpC,aAAA;AAAA;AAAA;AAAA,IAAA,OAGF;AACE,aAAA;AAAA,IACT;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAW,KAAK,QAAQ,KAAK,MAAO;AAEnC,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,CAAC,KAAK,MAAM,GAAG;AAAA,IAAA,CAChB,CAAC;AAAA,8BACkB,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO3B,KAAK,WAAW;AAAA;AAAA,kBAEd,QAAQ,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMf,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrB,KAAK,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4CAOI,KAAK,GAAG;AAAA;AAAA;AAAA,EAGlD;AAGF;AA3Ea,kBA0EK,SAAS,UAAU,YAAY;AAzErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,kBAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,kBAIe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GALb,kBAKe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,kBAMe,WAAA,OAAA,CAAA;AANf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import '../watch/watch';
|
|
3
3
|
import { AngleAdvice } from '../watch/advice';
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* @ignition-base-height: 512px
|
|
7
|
+
* @ignition-base-width: 512px
|
|
8
|
+
*/
|
|
4
9
|
export declare class ObcCompass extends LitElement {
|
|
5
10
|
heading: number;
|
|
6
11
|
courseOverGround: number;
|
|
7
|
-
padding: number;
|
|
8
12
|
headingAdvices: AngleAdvice[];
|
|
9
|
-
|
|
10
|
-
private
|
|
11
|
-
connectedCallback(): void;
|
|
12
|
-
disconnectedCallback(): void;
|
|
13
|
-
private adjustPadding;
|
|
13
|
+
private _resizeController;
|
|
14
|
+
private getPadding;
|
|
14
15
|
private get angleAdviceRaw();
|
|
15
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
16
17
|
static styles: import("lit").CSSResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAGxB,OAAO,EAGL,WAAW,EAEZ,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAGxB,OAAO,EAGL,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAIzB;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACJ,cAAc,EAAE,WAAW,EAAE,CAAM;IAI9E,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,UAAU;IAclB,OAAO,KAAK,cAAc,GAUzB;IAEQ,MAAM;IAsCf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { css, LitElement, html } from "lit";
|
|
2
|
-
import { property,
|
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
|
3
3
|
import "../watch/watch.js";
|
|
4
4
|
import { TickmarkType } from "../watch/tickmark.js";
|
|
5
5
|
import { arrow, ArrowStyle } from "./arrow.js";
|
|
6
6
|
import { AdviceState, AdviceType } from "../watch/advice.js";
|
|
7
7
|
import { radialTickmarks } from "./radial-tickmark.js";
|
|
8
|
+
import { ResizeController } from "@lit-labs/observers/resize-controller.js";
|
|
8
9
|
var __defProp = Object.defineProperty;
|
|
9
10
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
11
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -21,29 +22,12 @@ let ObcCompass = class extends LitElement {
|
|
|
21
22
|
super(...arguments);
|
|
22
23
|
this.heading = 0;
|
|
23
24
|
this.courseOverGround = 0;
|
|
24
|
-
this.padding = 48;
|
|
25
25
|
this.headingAdvices = [];
|
|
26
|
-
this.
|
|
27
|
-
this.resizeObserver = new ResizeObserver((entries) => {
|
|
28
|
-
for (const entry of entries) {
|
|
29
|
-
this.containerWidth = Math.min(
|
|
30
|
-
entry.contentRect.width,
|
|
31
|
-
entry.contentRect.height
|
|
32
|
-
);
|
|
33
|
-
this.adjustPadding();
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
connectedCallback() {
|
|
38
|
-
super.connectedCallback();
|
|
39
|
-
this.resizeObserver.observe(this);
|
|
40
|
-
}
|
|
41
|
-
disconnectedCallback() {
|
|
42
|
-
super.disconnectedCallback();
|
|
43
|
-
this.resizeObserver.unobserve(this);
|
|
26
|
+
this._resizeController = new ResizeController(this, {});
|
|
44
27
|
}
|
|
45
|
-
|
|
46
|
-
const
|
|
28
|
+
getPadding() {
|
|
29
|
+
const size = Math.min(this.clientHeight, this.clientWidth);
|
|
30
|
+
const deltaWidth = 512 - size;
|
|
47
31
|
const steps = deltaWidth / 128;
|
|
48
32
|
let deltaPadding = 0;
|
|
49
33
|
if (deltaWidth > 0) {
|
|
@@ -51,12 +35,12 @@ let ObcCompass = class extends LitElement {
|
|
|
51
35
|
} else {
|
|
52
36
|
deltaPadding = steps * 6;
|
|
53
37
|
}
|
|
54
|
-
|
|
38
|
+
return 72 + deltaPadding;
|
|
55
39
|
}
|
|
56
40
|
get angleAdviceRaw() {
|
|
57
41
|
return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
|
|
58
|
-
const
|
|
59
|
-
return { minAngle, maxAngle, type, state
|
|
42
|
+
const state = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
|
|
43
|
+
return { minAngle, maxAngle, type, state };
|
|
60
44
|
});
|
|
61
45
|
}
|
|
62
46
|
render() {
|
|
@@ -73,12 +57,13 @@ let ObcCompass = class extends LitElement {
|
|
|
73
57
|
type === AdviceType.caution ? TickmarkType.secondary : void 0
|
|
74
58
|
)
|
|
75
59
|
);
|
|
76
|
-
const
|
|
60
|
+
const padding = this.getPadding();
|
|
61
|
+
const width = (176 + padding) * 2;
|
|
77
62
|
const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
|
|
78
63
|
return html`
|
|
79
64
|
<div class="container">
|
|
80
65
|
<obc-watch
|
|
81
|
-
.padding=${
|
|
66
|
+
.padding=${padding}
|
|
82
67
|
.advices=${this.angleAdviceRaw}
|
|
83
68
|
.tickmarks=${tickmarks}
|
|
84
69
|
.labelFrameEnabled=${true}
|
|
@@ -124,15 +109,9 @@ __decorateClass([
|
|
|
124
109
|
__decorateClass([
|
|
125
110
|
property({ type: Number })
|
|
126
111
|
], ObcCompass.prototype, "courseOverGround", 2);
|
|
127
|
-
__decorateClass([
|
|
128
|
-
property({ type: Number })
|
|
129
|
-
], ObcCompass.prototype, "padding", 2);
|
|
130
112
|
__decorateClass([
|
|
131
113
|
property({ type: Array, attribute: false })
|
|
132
114
|
], ObcCompass.prototype, "headingAdvices", 2);
|
|
133
|
-
__decorateClass([
|
|
134
|
-
state()
|
|
135
|
-
], ObcCompass.prototype, "containerWidth", 2);
|
|
136
115
|
ObcCompass = __decorateClass([
|
|
137
116
|
customElement("obc-compass")
|
|
138
117
|
], ObcCompass);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property
|
|
1
|
+
{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport '../watch/watch';\nimport {Tickmark, TickmarkType} from '../watch/tickmark';\nimport {arrow, ArrowStyle} from './arrow';\nimport {\n AdviceState,\n AdviceType,\n AngleAdvice,\n AngleAdviceRaw,\n} from '../watch/advice';\nimport {radialTickmarks} from './radial-tickmark';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\n\n/**\n *\n * @ignition-base-height: 512px\n * @ignition-base-width: 512px\n */\n@customElement('obc-compass')\nexport class ObcCompass extends LitElement {\n @property({type: Number}) heading = 0;\n @property({type: Number}) courseOverGround = 0;\n @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n\n // @ts-expect-error TS6133: The controller ensures that the render\n // function is called on resize of the element\n private _resizeController = new ResizeController(this, {});\n\n private getPadding() {\n const size = Math.min(this.clientHeight, this.clientWidth);\n const deltaWidth = 512 - size;\n const steps = deltaWidth / 128;\n let deltaPadding = 0;\n if (deltaWidth > 0) {\n deltaPadding = steps * 48;\n } else {\n deltaPadding = steps * 6;\n }\n\n return 72 + deltaPadding;\n }\n\n private get angleAdviceRaw(): AngleAdviceRaw[] {\n return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\n const state =\n this.heading >= minAngle && this.heading <= maxAngle\n ? AdviceState.triggered\n : hinted\n ? AdviceState.hinted\n : AdviceState.regular;\n return {minAngle, maxAngle, type, state};\n });\n }\n\n override render() {\n const tickmarks: Tickmark[] = [\n {angle: 0, type: TickmarkType.main},\n {angle: 90, type: TickmarkType.main},\n {angle: 180, type: TickmarkType.main},\n {angle: 270, type: TickmarkType.main},\n ];\n\n const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>\n radialTickmarks(\n minAngle,\n maxAngle,\n type === AdviceType.caution ? TickmarkType.secondary : undefined\n )\n );\n\n const padding = this.getPadding();\n const width = (176 + padding) * 2;\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n return html`\n <div class=\"container\">\n <obc-watch\n .padding=${padding}\n .advices=${this.angleAdviceRaw}\n .tickmarks=${tickmarks}\n .labelFrameEnabled=${true}\n .crosshairEnabled=${true}\n >\n </obc-watch>\n <svg viewBox=\"${viewBox}\">\n ${rt} ${arrow(ArrowStyle.HDG, this.heading)}\n ${arrow(ArrowStyle.COG, this.courseOverGround)}\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n * {\n box-sizing: border-box;\n }\n\n .container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .container > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-compass': ObcCompass;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBa,IAAA,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC+B,SAAA,UAAA;AACS,SAAA,mBAAA;AACF,SAAA,iBAAgC;AAI3E,SAAQ,oBAAoB,IAAI,iBAAiB,MAAM,CAAE,CAAA;AAAA,EAAA;AAAA,EAEjD,aAAa;AACnB,UAAM,OAAO,KAAK,IAAI,KAAK,cAAc,KAAK,WAAW;AACzD,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,aAAa;AAC3B,QAAI,eAAe;AACnB,QAAI,aAAa,GAAG;AAClB,qBAAe,QAAQ;AAAA,IAAA,OAClB;AACL,qBAAe,QAAQ;AAAA,IACzB;AAEA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAY,iBAAmC;AACtC,WAAA,KAAK,eAAe,IAAI,CAAC,EAAC,UAAU,UAAU,QAAQ,WAAU;AACrE,YAAM,QACJ,KAAK,WAAW,YAAY,KAAK,WAAW,WACxC,YAAY,YACZ,SACE,YAAY,SACZ,YAAY;AACpB,aAAO,EAAC,UAAU,UAAU,MAAM,MAAK;AAAA,IAAA,CACxC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,UAAM,YAAwB;AAAA,MAC5B,EAAC,OAAO,GAAG,MAAM,aAAa,KAAI;AAAA,MAClC,EAAC,OAAO,IAAI,MAAM,aAAa,KAAI;AAAA,MACnC,EAAC,OAAO,KAAK,MAAM,aAAa,KAAI;AAAA,MACpC,EAAC,OAAO,KAAK,MAAM,aAAa,KAAI;AAAA,IAAA;AAGhC,UAAA,KAAK,KAAK,eAAe;AAAA,MAAI,CAAC,EAAC,UAAU,UAAU,KACvD,MAAA;AAAA,QACE;AAAA,QACA;AAAA,QACA,SAAS,WAAW,UAAU,aAAa,YAAY;AAAA,MACzD;AAAA,IAAA;AAGI,UAAA,UAAU,KAAK;AACf,UAAA,SAAS,MAAM,WAAW;AAC1B,UAAA,UAAU,IAAI,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,KAAK,IAAI,KAAK;AAEtD,WAAA;AAAA;AAAA;AAAA,qBAGU,OAAO;AAAA,qBACP,KAAK,cAAc;AAAA,uBACjB,SAAS;AAAA,+BACD,IAAI;AAAA,8BACL,IAAI;AAAA;AAAA;AAAA,wBAGV,OAAO;AAAA,YACnB,EAAE,IAAI,MAAM,WAAW,KAAK,KAAK,OAAO,CAAC;AAAA,YACzC,MAAM,WAAW,KAAK,KAAK,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,EAItD;AA2BF;AAlGa,WAyEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,WACe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,WAEe,WAAA,oBAAA,CAAA;AACiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAH9B,WAGgC,WAAA,kBAAA,CAAA;AAHhC,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"compass-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,6 +12,11 @@ export interface Label {
|
|
|
12
12
|
y: LabelPosition;
|
|
13
13
|
text: string;
|
|
14
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
*
|
|
17
|
+
* @ignition-base-height: 170px
|
|
18
|
+
* @ignition-base-width: 512px
|
|
19
|
+
*/
|
|
15
20
|
export declare class ObcCompassFlat extends LitElement {
|
|
16
21
|
noPadding: boolean;
|
|
17
22
|
FOVIndicator: boolean;
|
|
@@ -23,6 +28,7 @@ export declare class ObcCompassFlat extends LitElement {
|
|
|
23
28
|
minFOV: number;
|
|
24
29
|
maxFOV: number;
|
|
25
30
|
containerWidth: number;
|
|
31
|
+
maxContainerWidth: number;
|
|
26
32
|
private resizeObserver;
|
|
27
33
|
connectedCallback(): void;
|
|
28
34
|
disconnectedCallback(): void;
|
|
@@ -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;IAE9B,cAAc,SAAK;
|
|
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;;;;GAIG;AACH,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;IACnB,iBAAiB,SAAK;IAE/B,OAAO,CAAC,cAAc,CASnB;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"}
|
|
@@ -36,9 +36,14 @@ let ObcCompassFlat = class extends LitElement {
|
|
|
36
36
|
this.minFOV = 45;
|
|
37
37
|
this.maxFOV = 180;
|
|
38
38
|
this.containerWidth = 0;
|
|
39
|
+
this.maxContainerWidth = 0;
|
|
39
40
|
this.resizeObserver = new ResizeObserver((entries) => {
|
|
40
41
|
for (const entry of entries) {
|
|
41
|
-
this.
|
|
42
|
+
this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;
|
|
43
|
+
this.containerWidth = Math.min(
|
|
44
|
+
entry.contentRect.width,
|
|
45
|
+
this.maxContainerWidth
|
|
46
|
+
);
|
|
42
47
|
}
|
|
43
48
|
});
|
|
44
49
|
}
|
|
@@ -173,7 +178,7 @@ let ObcCompassFlat = class extends LitElement {
|
|
|
173
178
|
}));
|
|
174
179
|
const viewBox = this.noPadding ? "-192 -128 384 128" : "-200 -144 400 144";
|
|
175
180
|
return svg`
|
|
176
|
-
<div class="container">
|
|
181
|
+
<div class="container" style="max-width:${this.maxContainerWidth}px">
|
|
177
182
|
<obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
|
|
178
183
|
<svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
|
|
179
184
|
${this.HDGSvg}${this.COGSvg(translation)}
|
|
@@ -212,6 +217,9 @@ __decorateClass([
|
|
|
212
217
|
__decorateClass([
|
|
213
218
|
state()
|
|
214
219
|
], ObcCompassFlat.prototype, "containerWidth", 2);
|
|
220
|
+
__decorateClass([
|
|
221
|
+
state()
|
|
222
|
+
], ObcCompassFlat.prototype, "maxContainerWidth", 2);
|
|
215
223
|
ObcCompassFlat = __decorateClass([
|
|
216
224
|
customElement("obc-compass-flat")
|
|
217
225
|
], ObcCompassFlat);
|
|
@@ -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, 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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"}
|
|
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/**\n *\n * @ignition-base-height: 170px\n * @ignition-base-width: 512px\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 @state() 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 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\" style=\"max-width:${this.maxContainerWidth}px\">\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/dist/storybook-util.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export declare function crossDecorator(story: () => unknown): HTMLTemplateResult
|
|
|
12
12
|
export declare function widthDecorator(story: () => unknown, context: {
|
|
13
13
|
args: {
|
|
14
14
|
width: number;
|
|
15
|
+
height?: number;
|
|
15
16
|
};
|
|
16
17
|
}): HTMLTemplateResult;
|
|
17
18
|
export declare function beta6Decorator(story: () => unknown): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAG7D,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAsCvE;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,OAAO,EACpB,OAAO,EAAE;IAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,
|
|
1
|
+
{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAG7D,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAsCvE;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,OAAO,EACpB,OAAO,EAAE;IAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,GAChD,kBAAkB,CASpB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAyBvE"}
|
package/dist/storybook-util.js
CHANGED
|
@@ -82,9 +82,11 @@ function crossDecorator(story) {
|
|
|
82
82
|
<div class="wrapper">${story()}</div>`;
|
|
83
83
|
}
|
|
84
84
|
function widthDecorator(story, context) {
|
|
85
|
+
const width = context.args.width;
|
|
86
|
+
const height = context.args.height ?? width;
|
|
85
87
|
return html` <div
|
|
86
88
|
class="wrapper"
|
|
87
|
-
style="width: ${
|
|
89
|
+
style="width: ${width}px; height: ${height}px"
|
|
88
90
|
>
|
|
89
91
|
${story()}
|
|
90
92
|
</div>`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {HTMLTemplateResult, TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n '01-placeholder',\n '01-search',\n '04-brilliance-low',\n '04-brilliance-high',\n '06-radar',\n '04-day',\n '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n id: string,\n attributes: Record<string, string> = {}\n): TemplateResult {\n switch (id) {\n case '01-placeholder':\n return html`<obi-01-placeholder\n ${spread(attributes)}\n ></obi-01-placeholder>`;\n case '01-search':\n return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n case '04-day':\n return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n case '04-brilliance-low':\n return html`<obi-04-brilliance-low\n ${spread(attributes)}\n ></obi-04-brilliance-low>`;\n case '04-brilliance-high':\n return html`<obi-04-brilliance-high\n ${spread(attributes)}\n ></obi-04-brilliance-high>`;\n case '06-radar':\n return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n case '06-ship':\n return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n default:\n throw new Error(`Unknown icon id: ${id}`);\n }\n}\n\nexport function crossDecorator(story: () => unknown): HTMLTemplateResult {\n return html` <style>\n .wrapper {\n width: 100%;\n height: 100vh;\n position: relative;\n }\n\n .wrapper > * {\n position: absolute;\n top: 50%;\n left: 50%;\n }\n\n .wrapper::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n left: calc(50% - 0.5px);\n background-color: rgb(0, 0, 0, 0.3);\n }\n\n .wrapper::after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n height: 1px;\n top: calc(50% - 0.5px);\n background-color: rgb(0, 0, 0, 0.3);\n z-index: -100;\n }\n </style>\n <div class=\"wrapper\">${story()}</div>`;\n}\n\nexport function widthDecorator(\n story: () => unknown,\n context: {args: {width: number}}\n): HTMLTemplateResult {\n return html` <div\n class=\"wrapper\"\n style=\"width: ${
|
|
1
|
+
{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {HTMLTemplateResult, TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n '01-placeholder',\n '01-search',\n '04-brilliance-low',\n '04-brilliance-high',\n '06-radar',\n '04-day',\n '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n id: string,\n attributes: Record<string, string> = {}\n): TemplateResult {\n switch (id) {\n case '01-placeholder':\n return html`<obi-01-placeholder\n ${spread(attributes)}\n ></obi-01-placeholder>`;\n case '01-search':\n return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n case '04-day':\n return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n case '04-brilliance-low':\n return html`<obi-04-brilliance-low\n ${spread(attributes)}\n ></obi-04-brilliance-low>`;\n case '04-brilliance-high':\n return html`<obi-04-brilliance-high\n ${spread(attributes)}\n ></obi-04-brilliance-high>`;\n case '06-radar':\n return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n case '06-ship':\n return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n default:\n throw new Error(`Unknown icon id: ${id}`);\n }\n}\n\nexport function crossDecorator(story: () => unknown): HTMLTemplateResult {\n return html` <style>\n .wrapper {\n width: 100%;\n height: 100vh;\n position: relative;\n }\n\n .wrapper > * {\n position: absolute;\n top: 50%;\n left: 50%;\n }\n\n .wrapper::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n left: calc(50% - 0.5px);\n background-color: rgb(0, 0, 0, 0.3);\n }\n\n .wrapper::after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n height: 1px;\n top: calc(50% - 0.5px);\n background-color: rgb(0, 0, 0, 0.3);\n z-index: -100;\n }\n </style>\n <div class=\"wrapper\">${story()}</div>`;\n}\n\nexport function widthDecorator(\n story: () => unknown,\n context: {args: {width: number; height?: number}}\n): HTMLTemplateResult {\n const width = context.args.width;\n const height = context.args.height ?? width;\n return html` <div\n class=\"wrapper\"\n style=\"width: ${width}px; height: ${height}px\"\n >\n ${story()}\n </div>`;\n}\n\nexport function beta6Decorator(story: () => unknown): HTMLTemplateResult {\n return html`\n <div\n style=\"\n border-radius: 100px; \n background-color: var(--instrument-enhanced-primary-color); \n color: var(--instrument-frame-primary-color); \n height: 32px; \n padding: 0 24px; \n box-sizing: border-box; \n width: fit-content; \n display: grid; \n place-content: center;\n font-family: 'Noto Sans';\n font-size: 16px;\n font-style: normal;\n font-weight: 570;\n line-height: 24px; /* 150% */\n margin-bottom: 64px;\n\"\n >\n Beta 6.0\n </div>\n ${story()}\n `;\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAoCkB,OAAO;AAClC;AAEgB,SAAA,eACd,OACA,SACoB;AACd,QAAA,QAAQ,QAAQ,KAAK;AACrB,QAAA,SAAS,QAAQ,KAAK,UAAU;AAC/B,SAAA;AAAA;AAAA,oBAEW,KAAK,eAAe,MAAM;AAAA;AAAA,MAExC,OAAO;AAAA;AAEb;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsBH,OAAO;AAAA;AAEb;"}
|
package/package.json
CHANGED
|
@@ -23,6 +23,13 @@ export enum TankVariant {
|
|
|
23
23
|
compact = 'compact',
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
*
|
|
28
|
+
*
|
|
29
|
+
* @ignition-base-height: 173px
|
|
30
|
+
* @ignition-base-width: 168px
|
|
31
|
+
* @ignition-center
|
|
32
|
+
*/
|
|
26
33
|
@customElement('obc-automation-tank')
|
|
27
34
|
export class ObcAutomationTank extends LitElement {
|
|
28
35
|
@property({type: String}) medium: LineMedium = LineMedium.water;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {LitElement, css, html} from 'lit';
|
|
2
|
-
import {customElement, property
|
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
3
3
|
import '../watch/watch';
|
|
4
4
|
import {Tickmark, TickmarkType} from '../watch/tickmark';
|
|
5
5
|
import {arrow, ArrowStyle} from './arrow';
|
|
@@ -10,37 +10,26 @@ import {
|
|
|
10
10
|
AngleAdviceRaw,
|
|
11
11
|
} from '../watch/advice';
|
|
12
12
|
import {radialTickmarks} from './radial-tickmark';
|
|
13
|
+
import {ResizeController} from '@lit-labs/observers/resize-controller.js';
|
|
13
14
|
|
|
15
|
+
/**
|
|
16
|
+
*
|
|
17
|
+
* @ignition-base-height: 512px
|
|
18
|
+
* @ignition-base-width: 512px
|
|
19
|
+
*/
|
|
14
20
|
@customElement('obc-compass')
|
|
15
21
|
export class ObcCompass extends LitElement {
|
|
16
22
|
@property({type: Number}) heading = 0;
|
|
17
23
|
@property({type: Number}) courseOverGround = 0;
|
|
18
|
-
@property({type: Number}) padding = 48;
|
|
19
24
|
@property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
|
|
20
|
-
@state() containerWidth = 0;
|
|
21
25
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
entry.contentRect.width,
|
|
26
|
-
entry.contentRect.height
|
|
27
|
-
);
|
|
28
|
-
this.adjustPadding();
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
override connectedCallback() {
|
|
33
|
-
super.connectedCallback();
|
|
34
|
-
this.resizeObserver.observe(this);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
override disconnectedCallback() {
|
|
38
|
-
super.disconnectedCallback();
|
|
39
|
-
this.resizeObserver.unobserve(this);
|
|
40
|
-
}
|
|
26
|
+
// @ts-expect-error TS6133: The controller ensures that the render
|
|
27
|
+
// function is called on resize of the element
|
|
28
|
+
private _resizeController = new ResizeController(this, {});
|
|
41
29
|
|
|
42
|
-
private
|
|
43
|
-
const
|
|
30
|
+
private getPadding() {
|
|
31
|
+
const size = Math.min(this.clientHeight, this.clientWidth);
|
|
32
|
+
const deltaWidth = 512 - size;
|
|
44
33
|
const steps = deltaWidth / 128;
|
|
45
34
|
let deltaPadding = 0;
|
|
46
35
|
if (deltaWidth > 0) {
|
|
@@ -49,7 +38,7 @@ export class ObcCompass extends LitElement {
|
|
|
49
38
|
deltaPadding = steps * 6;
|
|
50
39
|
}
|
|
51
40
|
|
|
52
|
-
|
|
41
|
+
return 72 + deltaPadding;
|
|
53
42
|
}
|
|
54
43
|
|
|
55
44
|
private get angleAdviceRaw(): AngleAdviceRaw[] {
|
|
@@ -80,13 +69,14 @@ export class ObcCompass extends LitElement {
|
|
|
80
69
|
)
|
|
81
70
|
);
|
|
82
71
|
|
|
83
|
-
const
|
|
72
|
+
const padding = this.getPadding();
|
|
73
|
+
const width = (176 + padding) * 2;
|
|
84
74
|
const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
|
|
85
75
|
|
|
86
76
|
return html`
|
|
87
77
|
<div class="container">
|
|
88
78
|
<obc-watch
|
|
89
|
-
.padding=${
|
|
79
|
+
.padding=${padding}
|
|
90
80
|
.advices=${this.angleAdviceRaw}
|
|
91
81
|
.tickmarks=${tickmarks}
|
|
92
82
|
.labelFrameEnabled=${true}
|
|
@@ -2,7 +2,6 @@ import type {Meta, StoryObj} from '@storybook/web-components';
|
|
|
2
2
|
import {ObcCompassFlat} from './compass-flat';
|
|
3
3
|
import './compass-flat';
|
|
4
4
|
import {beta6Decorator, widthDecorator} from '../../storybook-util';
|
|
5
|
-
import {LabelPosition} from './compass-flat';
|
|
6
5
|
|
|
7
6
|
const meta: Meta<typeof ObcCompassFlat> = {
|
|
8
7
|
title: 'Navigation Instruments/Compass flat',
|
|
@@ -10,6 +9,7 @@ const meta: Meta<typeof ObcCompassFlat> = {
|
|
|
10
9
|
component: 'obc-compass-flat',
|
|
11
10
|
args: {
|
|
12
11
|
width: 512,
|
|
12
|
+
height: 512,
|
|
13
13
|
heading: 45,
|
|
14
14
|
courseOverGround: 50,
|
|
15
15
|
FOVIndicator: false,
|
|
@@ -17,6 +17,7 @@ const meta: Meta<typeof ObcCompassFlat> = {
|
|
|
17
17
|
},
|
|
18
18
|
argTypes: {
|
|
19
19
|
width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
|
|
20
|
+
height: {control: {type: 'range', min: 32, max: 1028, step: 1}},
|
|
20
21
|
heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
|
|
21
22
|
courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
|
|
22
23
|
},
|
|
@@ -19,6 +19,11 @@ export interface Label {
|
|
|
19
19
|
text: string;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
/**
|
|
23
|
+
*
|
|
24
|
+
* @ignition-base-height: 170px
|
|
25
|
+
* @ignition-base-width: 512px
|
|
26
|
+
*/
|
|
22
27
|
@customElement('obc-compass-flat')
|
|
23
28
|
export class ObcCompassFlat extends LitElement {
|
|
24
29
|
@property({type: Boolean}) noPadding: boolean = true;
|
|
@@ -32,10 +37,16 @@ export class ObcCompassFlat extends LitElement {
|
|
|
32
37
|
@property({type: Number}) maxFOV = 180;
|
|
33
38
|
|
|
34
39
|
@state() containerWidth = 0;
|
|
40
|
+
@state() maxContainerWidth = 0;
|
|
35
41
|
|
|
36
42
|
private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
|
|
37
43
|
for (const entry of entries) {
|
|
38
|
-
|
|
44
|
+
// Made by chatGPT so that the text is inside the wrapper
|
|
45
|
+
this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;
|
|
46
|
+
this.containerWidth = Math.min(
|
|
47
|
+
entry.contentRect.width,
|
|
48
|
+
this.maxContainerWidth
|
|
49
|
+
);
|
|
39
50
|
}
|
|
40
51
|
});
|
|
41
52
|
|
|
@@ -205,7 +216,7 @@ export class ObcCompassFlat extends LitElement {
|
|
|
205
216
|
const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';
|
|
206
217
|
|
|
207
218
|
return svg`
|
|
208
|
-
<div class="container">
|
|
219
|
+
<div class="container" style="max-width:${this.maxContainerWidth}px">
|
|
209
220
|
<obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
|
|
210
221
|
<svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
|
|
211
222
|
${this.HDGSvg}${this.COGSvg(translation)}
|
package/src/storybook-util.ts
CHANGED
|
@@ -90,11 +90,13 @@ export function crossDecorator(story: () => unknown): HTMLTemplateResult {
|
|
|
90
90
|
|
|
91
91
|
export function widthDecorator(
|
|
92
92
|
story: () => unknown,
|
|
93
|
-
context: {args: {width: number}}
|
|
93
|
+
context: {args: {width: number; height?: number}}
|
|
94
94
|
): HTMLTemplateResult {
|
|
95
|
+
const width = context.args.width;
|
|
96
|
+
const height = context.args.height ?? width;
|
|
95
97
|
return html` <div
|
|
96
98
|
class="wrapper"
|
|
97
|
-
style="width: ${
|
|
99
|
+
style="width: ${width}px; height: ${height}px"
|
|
98
100
|
>
|
|
99
101
|
${story()}
|
|
100
102
|
</div>`;
|