@oicl/openbridge-webcomponents 0.0.15-dev-20241106185316 → 0.0.15-dev-20241112185305

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.
@@ -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,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "0.0.15-dev-20241106185316",
3
+ "version": "0.0.15-dev-20241112185305",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -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 unsures that the render
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
  );