@oicl/openbridge-webcomponents 0.0.15-dev-20241106185316 → 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/dist/navigation-instruments/watch/watch.js +1 -1
- package/dist/navigation-instruments/watch/watch.js.map +1 -1
- package/package.json +1 -1
- package/src/navigation-instruments/compass/compass.ts +6 -3
- package/src/navigation-instruments/watch/watch.ts +2 -2
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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"}
|
|
@@ -111,7 +111,7 @@ let ObcWatch = class extends LitElement {
|
|
|
111
111
|
const width = (176 + this.padding) * 2;
|
|
112
112
|
const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
|
|
113
113
|
const angleSetpoint = this.renderSetpoint();
|
|
114
|
-
const scale = this.clientWidth / width;
|
|
114
|
+
const scale = Math.min(this.clientWidth, this.clientHeight) / width;
|
|
115
115
|
const tickmarks = this.tickmarks.map(
|
|
116
116
|
(t) => tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
|
|
117
117
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n LitElement,\n SVGTemplateResult,\n html,\n nothing,\n svg,\n unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\nimport {renderLabels} from './label';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n @property({type: Number}) angleSetpoint: number | undefined;\n @property({type: Boolean}) atAngleSetpoint: boolean = false;\n @property({type: Number}) padding = 24;\n @property({type: Number}) cutAngleStart: number | null = null;\n @property({type: Number}) cutAngleEnd: number | null = null;\n @property({type: Boolean}) roundOutsideCut = false;\n @property({type: Boolean}) roundInsideCut = false;\n @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n @property({type: Boolean}) crosshairEnabled: boolean = false;\n @property({type: Boolean}) labelFrameEnabled: boolean = false;\n\n // @ts-expect-error TS6133: The controller unsures that the render\n // function is called on resize of the element\n private _resizeController = new ResizeController(this, {});\n\n private watchCircle(): SVGTemplateResult {\n if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n return svg`\n <defs>\n <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n </mask>\n </defs>\n ${\n this.state === InstrumentState.off\n ? null\n : svg`\n <circle\n cx=\"0\"\n cy=\"0\"\n r=\"184\"\n fill=\"var(--instrument-frame-primary-color)\"\n mask=\"url(#mask1)\"\n />`\n }\n ${circle('innerRing', {\n radius: 320 / 2,\n strokeWidth: 1,\n strokeColor: 'var(--instrument-frame-tertiary-color)',\n strokePosition: 'center',\n fillColor: 'none',\n })}\n ${\n this.state === InstrumentState.off\n ? null\n : circle('outerRing', {\n radius: 368 / 2,\n strokeWidth: 1,\n strokeColor: 'var(--instrument-frame-tertiary-color)',\n strokePosition: 'center',\n fillColor: 'none',\n })\n }\n `;\n } else {\n const R = 184;\n const r = 160;\n const svgPath = roundedArch({\n startAngle: this.cutAngleStart,\n endAngle: this.cutAngleEnd,\n R,\n r,\n roundOutsideCut: this.roundOutsideCut,\n roundInsideCut: this.roundInsideCut,\n });\n return svg`\n <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n stroke=\"var(--instrument-frame-tertiary-color)\"\n vector-effect=\"non-scaling-stroke\"/>\n `;\n }\n }\n\n private renderCrosshair(radius: number): SVGTemplateResult {\n return svg`\n <line\n x1=\"-${radius}\"\n y1=\"0\"\n x2=\"${radius}\"\n y2=\"0\"\n stroke=\"var(--instrument-frame-tertiary-color)\"\n stroke-width=\"1\"\n vector-effect=\"non-scaling-stroke\"\n />\n <line\n x1=\"0\"\n y1=\"-${radius}\"\n x2=\"0\"\n y2=\"${radius}\"\n stroke=\"var(--instrument-frame-tertiary-color)\"\n stroke-width=\"1\"\n vector-effect=\"non-scaling-stroke\"\n />\n `;\n }\n\n override render() {\n const width = (176 + this.padding) * 2;\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n const angleSetpoint = this.renderSetpoint();\n const scale = this.clientWidth / width;\n const tickmarks = this.tickmarks.map((t) =>\n tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n );\n const advices = this.advices\n ? this.advices.map((a) => renderAdvice(a))\n : nothing;\n const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\n\n return html`\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=${viewBox}\n style=\"--scale: ${scale}\"\n >\n ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\n ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\n </svg>\n `;\n }\n\n private renderSetpoint(): SVGTemplateResult | typeof nothing {\n let setPointColor = 'var(--instrument-enhanced-primary-color)';\n if (this.atAngleSetpoint) {\n setPointColor = 'var(--instrument-enhanced-secondary-color)';\n }\n if (this.state === InstrumentState.active) {\n setPointColor = 'var(--instrument-regular-primary-color)';\n if (this.atAngleSetpoint) {\n setPointColor = 'var(--instrument-regular-secondary-color)';\n }\n } else if (this.state === InstrumentState.loading) {\n setPointColor = 'var(--instrument-frame-tertiary-color)';\n } else if (this.state === InstrumentState.off) {\n setPointColor = 'var(--instrument-frame-tertiary-color)';\n }\n\n if (this.angleSetpoint === undefined) {\n return nothing;\n } else {\n let path;\n if (this.state === InstrumentState.inCommand) {\n path =\n 'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n } else {\n path =\n 'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n }\n return svg`\n <defs>\n <g id=\"setpoint\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n </g>\n <mask id=\"setpointMask\">\n <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n <use href=\"#setpoint\" fill=\"black\" />\n </mask>\n </defs>\n <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n \n <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n </g>\n `;\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-watch': ObcWatch;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n LitElement,\n SVGTemplateResult,\n html,\n nothing,\n svg,\n unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\nimport {renderLabels} from './label';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n @property({type: Number}) angleSetpoint: number | undefined;\n @property({type: Boolean}) atAngleSetpoint: boolean = false;\n @property({type: Number}) padding = 24;\n @property({type: Number}) cutAngleStart: number | null = null;\n @property({type: Number}) cutAngleEnd: number | null = null;\n @property({type: Boolean}) roundOutsideCut = false;\n @property({type: Boolean}) roundInsideCut = false;\n @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n @property({type: Boolean}) crosshairEnabled: boolean = false;\n @property({type: Boolean}) labelFrameEnabled: boolean = false;\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 watchCircle(): SVGTemplateResult {\n if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n return svg`\n <defs>\n <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n </mask>\n </defs>\n ${\n this.state === InstrumentState.off\n ? null\n : svg`\n <circle\n cx=\"0\"\n cy=\"0\"\n r=\"184\"\n fill=\"var(--instrument-frame-primary-color)\"\n mask=\"url(#mask1)\"\n />`\n }\n ${circle('innerRing', {\n radius: 320 / 2,\n strokeWidth: 1,\n strokeColor: 'var(--instrument-frame-tertiary-color)',\n strokePosition: 'center',\n fillColor: 'none',\n })}\n ${\n this.state === InstrumentState.off\n ? null\n : circle('outerRing', {\n radius: 368 / 2,\n strokeWidth: 1,\n strokeColor: 'var(--instrument-frame-tertiary-color)',\n strokePosition: 'center',\n fillColor: 'none',\n })\n }\n `;\n } else {\n const R = 184;\n const r = 160;\n const svgPath = roundedArch({\n startAngle: this.cutAngleStart,\n endAngle: this.cutAngleEnd,\n R,\n r,\n roundOutsideCut: this.roundOutsideCut,\n roundInsideCut: this.roundInsideCut,\n });\n return svg`\n <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n stroke=\"var(--instrument-frame-tertiary-color)\"\n vector-effect=\"non-scaling-stroke\"/>\n `;\n }\n }\n\n private renderCrosshair(radius: number): SVGTemplateResult {\n return svg`\n <line\n x1=\"-${radius}\"\n y1=\"0\"\n x2=\"${radius}\"\n y2=\"0\"\n stroke=\"var(--instrument-frame-tertiary-color)\"\n stroke-width=\"1\"\n vector-effect=\"non-scaling-stroke\"\n />\n <line\n x1=\"0\"\n y1=\"-${radius}\"\n x2=\"0\"\n y2=\"${radius}\"\n stroke=\"var(--instrument-frame-tertiary-color)\"\n stroke-width=\"1\"\n vector-effect=\"non-scaling-stroke\"\n />\n `;\n }\n\n override render() {\n const width = (176 + this.padding) * 2;\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n const angleSetpoint = this.renderSetpoint();\n const scale = Math.min(this.clientWidth, this.clientHeight) / width;\n const tickmarks = this.tickmarks.map((t) =>\n tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n );\n const advices = this.advices\n ? this.advices.map((a) => renderAdvice(a))\n : nothing;\n const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\n\n return html`\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=${viewBox}\n style=\"--scale: ${scale}\"\n >\n ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\n ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\n </svg>\n `;\n }\n\n private renderSetpoint(): SVGTemplateResult | typeof nothing {\n let setPointColor = 'var(--instrument-enhanced-primary-color)';\n if (this.atAngleSetpoint) {\n setPointColor = 'var(--instrument-enhanced-secondary-color)';\n }\n if (this.state === InstrumentState.active) {\n setPointColor = 'var(--instrument-regular-primary-color)';\n if (this.atAngleSetpoint) {\n setPointColor = 'var(--instrument-regular-secondary-color)';\n }\n } else if (this.state === InstrumentState.loading) {\n setPointColor = 'var(--instrument-frame-tertiary-color)';\n } else if (this.state === InstrumentState.off) {\n setPointColor = 'var(--instrument-frame-tertiary-color)';\n }\n\n if (this.angleSetpoint === undefined) {\n return nothing;\n } else {\n let path;\n if (this.state === InstrumentState.inCommand) {\n path =\n 'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n } else {\n path =\n 'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n }\n return svg`\n <defs>\n <g id=\"setpoint\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n </g>\n <mask id=\"setpointMask\">\n <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n <use href=\"#setpoint\" fill=\"black\" />\n </mask>\n </defs>\n <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n \n <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n </g>\n `;\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-watch': ObcWatch;\n }\n}\n"],"names":[],"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
|
});
|
|
@@ -31,7 +31,7 @@ export class ObcWatch extends LitElement {
|
|
|
31
31
|
@property({type: Boolean}) crosshairEnabled: boolean = false;
|
|
32
32
|
@property({type: Boolean}) labelFrameEnabled: boolean = false;
|
|
33
33
|
|
|
34
|
-
// @ts-expect-error TS6133: The controller
|
|
34
|
+
// @ts-expect-error TS6133: The controller ensures that the render
|
|
35
35
|
// function is called on resize of the element
|
|
36
36
|
private _resizeController = new ResizeController(this, {});
|
|
37
37
|
|
|
@@ -121,7 +121,7 @@ export class ObcWatch extends LitElement {
|
|
|
121
121
|
const width = (176 + this.padding) * 2;
|
|
122
122
|
const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
|
|
123
123
|
const angleSetpoint = this.renderSetpoint();
|
|
124
|
-
const scale = this.clientWidth / width;
|
|
124
|
+
const scale = Math.min(this.clientWidth, this.clientHeight) / width;
|
|
125
125
|
const tickmarks = this.tickmarks.map((t) =>
|
|
126
126
|
tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
|
|
127
127
|
);
|