@oicl/openbridge-webcomponents 0.0.15-dev-20241112185305 → 0.0.15-dev-20241112205851
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 +2 -11
- package/dist/navigation-instruments/compass/compass.d.ts.map +1 -1
- package/dist/navigation-instruments/compass/compass.js +8 -5
- package/dist/navigation-instruments/compass/compass.js.map +1 -1
- package/package.json +1 -1
- package/src/navigation-instruments/compass/compass.ts +6 -3
package/custom-elements.json
CHANGED
|
@@ -44549,8 +44549,7 @@
|
|
|
44549
44549
|
"type": {
|
|
44550
44550
|
"text": "number"
|
|
44551
44551
|
},
|
|
44552
|
-
"default": "0"
|
|
44553
|
-
"attribute": "containerWidth"
|
|
44552
|
+
"default": "0"
|
|
44554
44553
|
},
|
|
44555
44554
|
{
|
|
44556
44555
|
"kind": "field",
|
|
@@ -44559,7 +44558,7 @@
|
|
|
44559
44558
|
"text": "ResizeObserver"
|
|
44560
44559
|
},
|
|
44561
44560
|
"privacy": "private",
|
|
44562
|
-
"default": "new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\n this.adjustPadding();\n }\n })"
|
|
44561
|
+
"default": "new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = Math.min(\n entry.contentRect.width,\n entry.contentRect.height\n );\n this.adjustPadding();\n }\n })"
|
|
44563
44562
|
},
|
|
44564
44563
|
{
|
|
44565
44564
|
"kind": "method",
|
|
@@ -44600,14 +44599,6 @@
|
|
|
44600
44599
|
},
|
|
44601
44600
|
"default": "48",
|
|
44602
44601
|
"fieldName": "padding"
|
|
44603
|
-
},
|
|
44604
|
-
{
|
|
44605
|
-
"name": "containerWidth",
|
|
44606
|
-
"type": {
|
|
44607
|
-
"text": "number"
|
|
44608
|
-
},
|
|
44609
|
-
"default": "0",
|
|
44610
|
-
"fieldName": "containerWidth"
|
|
44611
44602
|
}
|
|
44612
44603
|
],
|
|
44613
44604
|
"superclass": {
|
|
@@ -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;AAGzB,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,OAAO,SAAM;IACI,cAAc,EAAE,WAAW,EAAE,CAAM;
|
|
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;AAGzB,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,OAAO,SAAM;IACI,cAAc,EAAE,WAAW,EAAE,CAAM;IACrE,cAAc,SAAK;IAE5B,OAAO,CAAC,cAAc,CAQnB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,aAAa;IAarB,OAAO,KAAK,cAAc,GAUzB;IAEQ,MAAM;IAqCf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css, LitElement, html } from "lit";
|
|
2
|
-
import { property, customElement } from "lit/decorators.js";
|
|
2
|
+
import { property, state, 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";
|
|
@@ -26,7 +26,10 @@ let ObcCompass = class extends LitElement {
|
|
|
26
26
|
this.containerWidth = 0;
|
|
27
27
|
this.resizeObserver = new ResizeObserver((entries) => {
|
|
28
28
|
for (const entry of entries) {
|
|
29
|
-
this.containerWidth =
|
|
29
|
+
this.containerWidth = Math.min(
|
|
30
|
+
entry.contentRect.width,
|
|
31
|
+
entry.contentRect.height
|
|
32
|
+
);
|
|
30
33
|
this.adjustPadding();
|
|
31
34
|
}
|
|
32
35
|
});
|
|
@@ -52,8 +55,8 @@ let ObcCompass = class extends LitElement {
|
|
|
52
55
|
}
|
|
53
56
|
get angleAdviceRaw() {
|
|
54
57
|
return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
|
|
55
|
-
const
|
|
56
|
-
return { minAngle, maxAngle, type, state };
|
|
58
|
+
const state2 = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
|
|
59
|
+
return { minAngle, maxAngle, type, state: state2 };
|
|
57
60
|
});
|
|
58
61
|
}
|
|
59
62
|
render() {
|
|
@@ -128,7 +131,7 @@ __decorateClass([
|
|
|
128
131
|
property({ type: Array, attribute: false })
|
|
129
132
|
], ObcCompass.prototype, "headingAdvices", 2);
|
|
130
133
|
__decorateClass([
|
|
131
|
-
|
|
134
|
+
state()
|
|
132
135
|
], ObcCompass.prototype, "containerWidth", 2);
|
|
133
136
|
ObcCompass = __decorateClass([
|
|
134
137
|
customElement("obc-compass")
|
|
@@ -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} 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';\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: Number}) padding = 48;\n @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n @
|
|
1
|
+
{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property, state} 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';\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: Number}) padding = 48;\n @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n @state() containerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = Math.min(\n entry.contentRect.width,\n entry.contentRect.height\n );\n this.adjustPadding();\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 adjustPadding() {\n const deltaWidth = 512 - this.containerWidth;\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 this.padding = 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 width = (176 + this.padding) * 2;\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n return html`\n <div class=\"container\">\n <obc-watch\n .padding=${this.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":["state"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {LitElement, css, html} from 'lit';
|
|
2
|
-
import {customElement, property} from 'lit/decorators.js';
|
|
2
|
+
import {customElement, property, state} from 'lit/decorators.js';
|
|
3
3
|
import '../watch/watch';
|
|
4
4
|
import {Tickmark, TickmarkType} from '../watch/tickmark';
|
|
5
5
|
import {arrow, ArrowStyle} from './arrow';
|
|
@@ -17,11 +17,14 @@ export class ObcCompass extends LitElement {
|
|
|
17
17
|
@property({type: Number}) courseOverGround = 0;
|
|
18
18
|
@property({type: Number}) padding = 48;
|
|
19
19
|
@property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
|
|
20
|
-
@
|
|
20
|
+
@state() containerWidth = 0;
|
|
21
21
|
|
|
22
22
|
private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
|
|
23
23
|
for (const entry of entries) {
|
|
24
|
-
this.containerWidth =
|
|
24
|
+
this.containerWidth = Math.min(
|
|
25
|
+
entry.contentRect.width,
|
|
26
|
+
entry.contentRect.height
|
|
27
|
+
);
|
|
25
28
|
this.adjustPadding();
|
|
26
29
|
}
|
|
27
30
|
});
|