@oicl/openbridge-webcomponents 0.0.15-dev-20240923191659 → 0.0.15-dev-20240923194534
Sign up to get free protection for your applications and to get access to all the features.
- package/.storybook/main.ts +58 -58
- package/.storybook/preview.ts +55 -55
- package/custom-elements.json +2745 -2745
- package/dist/navigation-instruments/compass/arrow.js.map +1 -1
- package/dist/navigation-instruments/compass/compass.js.map +1 -1
- package/dist/navigation-instruments/compass/radial-tickmark.js.map +1 -1
- package/dist/navigation-instruments/compass-flat/compass-flat.js.map +1 -1
- package/dist/navigation-instruments/thruster/advice.js.map +1 -1
- package/dist/navigation-instruments/watch/advice.js.map +1 -1
- package/dist/navigation-instruments/watch/label.js.map +1 -1
- package/dist/navigation-instruments/watch/watch.js.map +1 -1
- package/dist/navigation-instruments/watch-flat/tickmark-flat.js.map +1 -1
- package/dist/navigation-instruments/watch-flat/watch-flat.js.map +1 -1
- package/dist/svghelpers/rectangular.js.map +1 -1
- package/package.json +83 -83
- package/src/navigation-instruments/compass/arrow.ts +61 -61
- package/src/navigation-instruments/compass/compass.stories.ts +37 -37
- package/src/navigation-instruments/compass/compass.ts +132 -132
- package/src/navigation-instruments/compass/radial-tickmark.ts +77 -77
- package/src/navigation-instruments/compass-flat/compass-flat.css +23 -23
- package/src/navigation-instruments/compass-flat/compass-flat.stories.ts +35 -35
- package/src/navigation-instruments/compass-flat/compass-flat.ts +221 -221
- package/src/navigation-instruments/thruster/advice.ts +109 -109
- package/src/navigation-instruments/watch/advice.ts +120 -120
- package/src/navigation-instruments/watch/label.ts +69 -69
- package/src/navigation-instruments/watch/watch.css +11 -11
- package/src/navigation-instruments/watch/watch.ts +199 -199
- package/src/navigation-instruments/watch-flat/tickmark-flat.ts +62 -62
- package/src/navigation-instruments/watch-flat/watch-flat.css +19 -19
- package/src/navigation-instruments/watch-flat/watch-flat.stories.ts +17 -17
- package/src/navigation-instruments/watch-flat/watch-flat.ts +148 -148
- package/src/svghelpers/rectangular.ts +42 -42
- package/oicl-openbridge-webcomponents-0.0.15-dev-20240923191659.tgz +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\
|
|
1
|
+
{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport enum ArrowStyle {\n HDG = 'HDG',\n COG = 'COG',\n}\n\nexport function arrow(\n style: ArrowStyle,\n angle: number\n): SVGTemplateResult | SVGTemplateResult[] {\n const colorName = 'var(--instrument-enhanced-secondary-color)';\n\n if (style === ArrowStyle.HDG) {\n return svg`\n <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\n <rect x=\"28\" y=\"118\" width=\"8\" height=\"139\" rx=\"4\" fill=\"${colorName}\" />\n <rect x=\"30.0039\" y=\"256\" width=\"4\" height=\"156\" rx=\"2\" fill=\"${colorName}\" />\n <circle cx=\"32\" cy=\"256\" r=\"8\" fill=\"${colorName}\" />\n <mask\n id=\"mask0_262_65165\"\n style=\"mask-type:luminance\"\n maskUnits=\"userSpaceOnUse\"\n x=\"8\"\n y=\"94\"\n width=\"48\"\n height=\"50\"\n >\n <path\n d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\n fill=\"white\"\n stroke=\"black\"\n />\n </mask>\n <g mask=\"url(#mask0_262_65165)\">\n <path\n d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\n fill=\"${colorName}\"\n />\n </g>\n </g>\n `;\n } else if (style === ArrowStyle.COG) {\n return svg`\n <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z\"\n fill=\"${colorName}\"\n />\n <rect x=\"30\" y=\"133\" width=\"4\" height=\"124\" rx=\"2\" fill=\"${colorName}\" />\n <circle cx=\"32\" cy=\"256\" r=\"4\" fill=\"${colorName}\" />\n </g>\n `;\n } else {\n return [];\n }\n\n // return [...shaft, circle, arrowTip];\n}\n"],"names":["ArrowStyle"],"mappings":";AAEY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,KAAM,IAAA;AACNA,cAAA,KAAM,IAAA;AAFIA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKI,SAAA,MACd,OACA,OACyC;AACzC,QAAM,YAAY;AAElB,MAAI,UAAU,OAAgB;AACrB,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA,mEACS,SAAS;AAAA,wEACJ,SAAS;AAAA,+CAClC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAmBpC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,WAKhB,UAAU,OAAgB;AAC5B,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKxC,SAAS;AAAA;AAAA,mEAEwC,SAAS;AAAA,+CAC7B,SAAS;AAAA;AAAA;AAAA,EAAA,OAG/C;AACL,WAAO;EACT;AAGF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\
|
|
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 @property({type: Number}) containerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\n this.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":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radial-tickmark.js","sources":["../../../src/navigation-instruments/compass/radial-tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\
|
|
1
|
+
{"version":3,"file":"radial-tickmark.js","sources":["../../../src/navigation-instruments/compass/radial-tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\nimport {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';\n\nexport function radialTickmarks(\n minAngle: number,\n maxAngle: number,\n type: TickmarkType | undefined\n): SVGTemplateResult[] {\n if (type === TickmarkType.main || type === TickmarkType.tertiary) {\n throw new Error(\n 'Only secondary tickmarks or undefined tickmarks (dots) are supported'\n );\n }\n\n const origin = {x: 0, y: 0};\n const radius = 320 / 2;\n const strokeWidth = '1.2';\n const margin = 1.5;\n const colorName = tickmarkColor(TickmarkStyle.hinted);\n const tickWidth = type === TickmarkType.secondary ? 4 : 1;\n const tickmarks: SVGTemplateResult[] = [];\n\n const sinMin = Math.sin((minAngle * Math.PI) / 180);\n const cosMin = Math.cos((minAngle * Math.PI) / 180);\n const sinMax = Math.sin((maxAngle * Math.PI) / 180);\n const cosMax = Math.cos((maxAngle * Math.PI) / 180);\n\n const deltaIncrement = tickWidth * margin;\n\n for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {\n const xMin = origin.x + sinMin * deltaR;\n const yMin = origin.y - cosMin * deltaR;\n const xMax = origin.x + sinMax * deltaR;\n const yMax = origin.y - cosMax * deltaR;\n\n if (type === undefined) {\n const size = 1;\n tickmarks.push(\n svg`<rect \n x=${xMin - size / 2} \n y=${yMin - size / 2} \n width=${size} \n height=${size} \n fill=${colorName} \n transform=\"rotate(${minAngle} ${xMin} ${yMin})\" \n vector-effect=\"non-scaling-stroke\"/>`\n );\n tickmarks.push(\n svg`<rect \n x=${xMax - size / 2} \n y=${yMax - size / 2} \n width=${size} \n height=${size} \n fill=${colorName} \n transform=\"rotate(${maxAngle} ${xMax} ${yMax})\" \n vector-effect=\"non-scaling-stroke\"/>`\n );\n } else {\n const currentRadius = Math.min(deltaR + tickWidth, radius);\n const x2Min = origin.x + sinMin * currentRadius;\n const y2Min = origin.y - cosMin * currentRadius;\n const x2Max = origin.x + sinMax * currentRadius;\n const y2Max = origin.y - cosMax * currentRadius;\n\n tickmarks.push(\n svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\n );\n tickmarks.push(\n svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\n );\n\n if (currentRadius >= radius) break;\n }\n }\n\n return tickmarks;\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,gBACd,UACA,UACA,MACqB;AACrB,MAAI,SAAS,aAAa,QAAQ,SAAS,aAAa,UAAU;AAChE,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,SAAS,EAAC,GAAG,GAAG,GAAG,EAAC;AAC1B,QAAM,SAAS,MAAM;AACrB,QAAM,cAAc;AACpB,QAAM,SAAS;AACT,QAAA,YAAY,cAAc,cAAc,MAAM;AACpD,QAAM,YAAY,SAAS,aAAa,YAAY,IAAI;AACxD,QAAM,YAAiC,CAAA;AAEvC,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAElD,QAAM,iBAAiB,YAAY;AAEnC,WAAS,SAAS,GAAG,UAAU,QAAQ,UAAU,gBAAgB;AACzD,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAEjC,QAAI,SAAS,QAAW;AACtB,YAAM,OAAO;AACH,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAGtC,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAAA,IAEhD,OACK;AACL,YAAM,gBAAgB,KAAK,IAAI,SAAS,WAAW,MAAM;AACnD,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAExB,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAE9F,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAGxG,UAAI,iBAAiB;AAAQ;AAAA,IAC/B;AAAA,EACF;AAEO,SAAA;AACT;"}
|
|
@@ -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';\r\nimport componentStyle from './compass-flat.css?inline';\r\nimport {customElement, property} from 'lit/decorators.js';\r\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\r\nimport '../watch-flat/watch-flat';\r\n\r\nexport enum LabelPosition {\r\n top = -45,\r\n bottom = 50,\r\n}\r\n\r\nexport enum LabelStyle {\r\n regular = 'var(--instrument-tick-mark-secondary-color)',\r\n}\r\n\r\nexport interface Label {\r\n x: number;\r\n y: LabelPosition;\r\n text: string;\r\n}\r\n\r\n@customElement('obc-compass-flat')\r\nexport class ObcCompassFlat extends LitElement {\r\n @property({type: Boolean}) noPadding: boolean = true;\r\n @property({type: Boolean}) FOVIndicator: boolean = false;\r\n @property({type: Number}) padding: number = 16;\r\n @property({type: Number}) heading = 0;\r\n @property({type: Number}) courseOverGround = 0;\r\n @property({type: Number}) tickInterval = 5;\r\n @property({type: Number}) FOV = 45;\r\n @property({type: Number}) minFOV = 45;\r\n @property({type: Number}) maxFOV = 180;\r\n labels: Label[] = [];\r\n\r\n @property({type: Number}) containerWidth = 0;\r\n\r\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\r\n for (const entry of entries) {\r\n this.containerWidth = entry.contentRect.width;\r\n this.updateLabels();\r\n }\r\n });\r\n\r\n override connectedCallback() {\r\n super.connectedCallback();\r\n this.resizeObserver.observe(this);\r\n }\r\n\r\n override disconnectedCallback() {\r\n super.disconnectedCallback();\r\n this.resizeObserver.unobserve(this);\r\n }\r\n\r\n private updateLabels() {\r\n if (this.containerWidth < 192) {\r\n this.labels = [];\r\n } else if (this.containerWidth <= 300) {\r\n this.labels = [\r\n {x: -180, y: LabelPosition.top, text: 'S'},\r\n {x: -90, y: LabelPosition.top, text: 'W'},\r\n {x: 0, y: LabelPosition.top, text: 'N'},\r\n {x: 90, y: LabelPosition.top, text: 'E'},\r\n {x: 180, y: LabelPosition.top, text: 'S'},\r\n {x: 270, y: LabelPosition.top, text: 'W'},\r\n {x: 360, y: LabelPosition.top, text: 'N'},\r\n {x: 450, y: LabelPosition.top, text: 'E'},\r\n {x: 540, y: LabelPosition.top, text: 'S'},\r\n ];\r\n } else {\r\n this.labels = [\r\n {x: -180, y: LabelPosition.top, text: 'S'},\r\n {x: -135, y: LabelPosition.top, text: 'SW'},\r\n {x: -90, y: LabelPosition.top, text: 'W'},\r\n {x: -45, y: LabelPosition.top, text: 'NW'},\r\n {x: 0, y: LabelPosition.top, text: 'N'},\r\n {x: 45, y: LabelPosition.top, text: 'NE'},\r\n {x: 90, y: LabelPosition.top, text: 'E'},\r\n {x: 135, y: LabelPosition.top, text: 'SE'},\r\n {x: 180, y: LabelPosition.top, text: 'S'},\r\n {x: 225, y: LabelPosition.top, text: 'SW'},\r\n {x: 270, y: LabelPosition.top, text: 'W'},\r\n {x: 315, y: LabelPosition.top, text: 'NW'},\r\n {x: 360, y: LabelPosition.top, text: 'N'},\r\n {x: 405, y: LabelPosition.top, text: 'NE'},\r\n {x: 450, y: LabelPosition.top, text: 'E'},\r\n {x: 495, y: LabelPosition.top, text: 'SE'},\r\n {x: 540, y: LabelPosition.top, text: 'S'},\r\n ];\r\n }\r\n }\r\n\r\n private generateIntervalTickmarks(scale: number): Tickmark[] {\r\n const tickmarks: Tickmark[] = [];\r\n let cardinalInterval = 90;\r\n\r\n if (this.containerWidth > 300) {\r\n cardinalInterval = 45;\r\n } else if (this.containerWidth < 192) {\r\n cardinalInterval = 0;\r\n }\r\n\r\n for (\r\n let angle = -180;\r\n angle < this.maxFOV * 3;\r\n angle += this.tickInterval\r\n ) {\r\n if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\r\n continue;\r\n }\r\n tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\r\n }\r\n\r\n return tickmarks;\r\n }\r\n\r\n private generateCardinalTickmarks(scale: number): Tickmark[] {\r\n const tickmarks: Tickmark[] = [];\r\n\r\n for (const label of this.labels) {\r\n tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\r\n }\r\n\r\n return tickmarks;\r\n }\r\n\r\n private generateTickmarks(scale: number): Tickmark[] {\r\n return [\r\n ...this.generateCardinalTickmarks(scale),\r\n ...this.generateIntervalTickmarks(scale),\r\n ];\r\n }\r\n\r\n private renderFOVIndicator(): SVGTemplateResult[] {\r\n const indicators: SVGTemplateResult[] = [];\r\n\r\n const maxAdjustment = 10;\r\n const minContainerWidth = 300;\r\n const maxContainerWidth = 512;\r\n\r\n let yAdjustment = 0;\r\n if (this.containerWidth < maxContainerWidth) {\r\n const widthRange = maxContainerWidth - minContainerWidth;\r\n const scaleFactor =\r\n (maxContainerWidth - this.containerWidth) / widthRange;\r\n yAdjustment = scaleFactor * maxAdjustment;\r\n }\r\n\r\n const y = LabelPosition.bottom + yAdjustment;\r\n\r\n indicators.push(svg`\r\n <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\r\n ${-this.FOV}\\u00B0\r\n </text>`);\r\n\r\n indicators.push(svg`\r\n <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\r\n ${this.heading}\\u00B0\r\n </text>`);\r\n\r\n indicators.push(svg`\r\n <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\r\n ${this.FOV}\\u00B0\r\n </text>`);\r\n\r\n return indicators;\r\n }\r\n\r\n private get HDGSvg(): SVGTemplateResult {\r\n return svg`<g transform=\"translate(-24, -74)\">\r\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)\"/>\r\n </g>`;\r\n }\r\n\r\n private COGSvg(translation: number): SVGTemplateResult {\r\n return svg`\r\n <g transform=\"translate(${-24 + translation}, -74)\">\r\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)\"/>\r\n </g>\r\n `;\r\n }\r\n\r\n override render() {\r\n let angleDiff = this.courseOverGround - this.heading;\r\n\r\n if (angleDiff > this.maxFOV) {\r\n angleDiff -= 360;\r\n } else if (angleDiff < -this.maxFOV) {\r\n angleDiff += 360;\r\n }\r\n\r\n this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\r\n\r\n const baseOffset = 5;\r\n const translationScale = (baseOffset * 35) / this.FOV;\r\n\r\n const translation = angleDiff * translationScale;\r\n\r\n const tickmarks = this.generateTickmarks(translationScale);\r\n this.labels.map((l) => {\r\n l.x = l.x * translationScale;\r\n });\r\n\r\n const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\r\n\r\n return svg`\r\n <div class=\"container\">\r\n <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\r\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \r\n ${this.HDGSvg}${this.COGSvg(translation)}\r\n </div>\r\n `;\r\n }\r\n\r\n static override styles = unsafeCSS(componentStyle);\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'obc-compass-flat': ObcCompassFlat;\r\n }\r\n}\r\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} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\nimport '../watch-flat/watch-flat';\n\nexport enum LabelPosition {\n top = -45,\n bottom = 50,\n}\n\nexport enum LabelStyle {\n regular = 'var(--instrument-tick-mark-secondary-color)',\n}\n\nexport interface Label {\n x: number;\n y: LabelPosition;\n text: string;\n}\n\n@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n @property({type: Boolean}) noPadding: boolean = true;\n @property({type: Boolean}) FOVIndicator: boolean = false;\n @property({type: Number}) padding: number = 16;\n @property({type: Number}) heading = 0;\n @property({type: Number}) courseOverGround = 0;\n @property({type: Number}) tickInterval = 5;\n @property({type: Number}) FOV = 45;\n @property({type: Number}) minFOV = 45;\n @property({type: Number}) maxFOV = 180;\n labels: Label[] = [];\n\n @property({type: Number}) containerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\n this.updateLabels();\n }\n });\n\n override connectedCallback() {\n super.connectedCallback();\n this.resizeObserver.observe(this);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n private updateLabels() {\n if (this.containerWidth < 192) {\n this.labels = [];\n } else if (this.containerWidth <= 300) {\n this.labels = [\n {x: -180, y: LabelPosition.top, text: 'S'},\n {x: -90, y: LabelPosition.top, text: 'W'},\n {x: 0, y: LabelPosition.top, text: 'N'},\n {x: 90, y: LabelPosition.top, text: 'E'},\n {x: 180, y: LabelPosition.top, text: 'S'},\n {x: 270, y: LabelPosition.top, text: 'W'},\n {x: 360, y: LabelPosition.top, text: 'N'},\n {x: 450, y: LabelPosition.top, text: 'E'},\n {x: 540, y: LabelPosition.top, text: 'S'},\n ];\n } else {\n this.labels = [\n {x: -180, y: LabelPosition.top, text: 'S'},\n {x: -135, y: LabelPosition.top, text: 'SW'},\n {x: -90, y: LabelPosition.top, text: 'W'},\n {x: -45, y: LabelPosition.top, text: 'NW'},\n {x: 0, y: LabelPosition.top, text: 'N'},\n {x: 45, y: LabelPosition.top, text: 'NE'},\n {x: 90, y: LabelPosition.top, text: 'E'},\n {x: 135, y: LabelPosition.top, text: 'SE'},\n {x: 180, y: LabelPosition.top, text: 'S'},\n {x: 225, y: LabelPosition.top, text: 'SW'},\n {x: 270, y: LabelPosition.top, text: 'W'},\n {x: 315, y: LabelPosition.top, text: 'NW'},\n {x: 360, y: LabelPosition.top, text: 'N'},\n {x: 405, y: LabelPosition.top, text: 'NE'},\n {x: 450, y: LabelPosition.top, text: 'E'},\n {x: 495, y: LabelPosition.top, text: 'SE'},\n {x: 540, y: LabelPosition.top, text: 'S'},\n ];\n }\n }\n\n private generateIntervalTickmarks(scale: number): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n let cardinalInterval = 90;\n\n if (this.containerWidth > 300) {\n cardinalInterval = 45;\n } else if (this.containerWidth < 192) {\n cardinalInterval = 0;\n }\n\n for (\n let angle = -180;\n angle < this.maxFOV * 3;\n angle += this.tickInterval\n ) {\n if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\n continue;\n }\n tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\n }\n\n return tickmarks;\n }\n\n private generateCardinalTickmarks(scale: number): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n\n for (const label of this.labels) {\n tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n }\n\n return tickmarks;\n }\n\n private generateTickmarks(scale: number): Tickmark[] {\n return [\n ...this.generateCardinalTickmarks(scale),\n ...this.generateIntervalTickmarks(scale),\n ];\n }\n\n private renderFOVIndicator(): SVGTemplateResult[] {\n const indicators: SVGTemplateResult[] = [];\n\n const maxAdjustment = 10;\n const minContainerWidth = 300;\n const maxContainerWidth = 512;\n\n let yAdjustment = 0;\n if (this.containerWidth < maxContainerWidth) {\n const widthRange = maxContainerWidth - minContainerWidth;\n const scaleFactor =\n (maxContainerWidth - this.containerWidth) / widthRange;\n yAdjustment = scaleFactor * maxAdjustment;\n }\n\n const y = LabelPosition.bottom + yAdjustment;\n\n indicators.push(svg`\n <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\n ${-this.FOV}\\u00B0\n </text>`);\n\n indicators.push(svg`\n <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\n ${this.heading}\\u00B0\n </text>`);\n\n indicators.push(svg`\n <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\n ${this.FOV}\\u00B0\n </text>`);\n\n return indicators;\n }\n\n private get HDGSvg(): SVGTemplateResult {\n return svg`<g transform=\"translate(-24, -74)\">\n <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n </g>`;\n }\n\n private COGSvg(translation: number): SVGTemplateResult {\n return svg`\n <g transform=\"translate(${-24 + translation}, -74)\">\n <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n </g>\n `;\n }\n\n override render() {\n let angleDiff = this.courseOverGround - this.heading;\n\n if (angleDiff > this.maxFOV) {\n angleDiff -= 360;\n } else if (angleDiff < -this.maxFOV) {\n angleDiff += 360;\n }\n\n this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\n\n const baseOffset = 5;\n const translationScale = (baseOffset * 35) / this.FOV;\n\n const translation = angleDiff * translationScale;\n\n const tickmarks = this.generateTickmarks(translationScale);\n this.labels.map((l) => {\n l.x = l.x * translationScale;\n });\n\n const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\n\n return svg`\n <div class=\"container\">\n <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \n ${this.HDGSvg}${this.COGSvg(translation)}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-compass-flat': ObcCompassFlat;\n }\n}\n"],"names":["LabelPosition","LabelStyle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\
|
|
1
|
+
{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {AdviceState, AdviceType} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\n\nexport interface LinearAdviceRaw {\n min: number;\n max: number;\n type: AdviceType;\n state: AdviceState;\n}\n\nexport interface LinearAdvice {\n min: number;\n max: number;\n type: AdviceType;\n hinted: boolean;\n}\n\nfunction adviceMask(\n height: number,\n min: number,\n max: number,\n fill: string,\n stroke: string\n): SVGTemplateResult {\n const width = 8;\n const x1 = 12;\n const x2 = x1 + width;\n const r = width / 2;\n const yL = (-min * height) / 100 - 2 * r - 2;\n const yH = (-max * height) / 100 + 2 * r - 2;\n\n const path = `M ${x1} ${yL} \n A ${r} ${r} 0 0 0 ${x2} ${yL}\n V ${yH}\n A ${r} ${r} 0 0 0 ${x1} ${yH}\n Z`;\n return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(\n height: number,\n advice: LinearAdviceRaw,\n flipDirection: boolean\n): SVGTemplateResult {\n if (advice.type === AdviceType.caution) {\n let mainColor;\n let fillColor: string | null = null;\n if (advice.state === AdviceState.hinted) {\n mainColor = 'var(--instrument-frame-tertiary-color)';\n } else if (advice.state === AdviceState.regular) {\n mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n } else {\n mainColor = 'var(--on-caution-active-color)';\n fillColor = 'var(--alert-caution-color)';\n }\n const pattern = [];\n const ypattern = flipDirection ? 50 : -50;\n for (let i = -100; i < 300; i += 16) {\n pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\n <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\n </g>\n `);\n }\n const maskId = `adviceMask-${advice.min}-${advice.max}`;\n let tickmarkStyle = TickmarkStyle.hinted;\n if (advice.state === AdviceState.regular) {\n tickmarkStyle = TickmarkStyle.regular;\n } else if (advice.state === AdviceState.triggered) {\n tickmarkStyle = TickmarkStyle.enhanced;\n }\n\n return svg`\n <mask id=${maskId}>\n ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\n </mask>\n <g mask=\"url(#${maskId})\">\n ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\n ${pattern}\n </g>\n ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\n ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n `;\n } else {\n let strokeColor;\n let tickmarkStyle;\n let fillColor: string;\n if (advice.state === AdviceState.hinted) {\n strokeColor = 'var(--instrument-frame-tertiary-color)';\n fillColor = 'none';\n tickmarkStyle = TickmarkStyle.hinted;\n } else if (advice.state === AdviceState.regular) {\n strokeColor = 'var(--instrument-regular-secondary-color)';\n fillColor = 'none';\n tickmarkStyle = TickmarkStyle.regular;\n } else {\n strokeColor = 'var(--instrument-enhanced-secondary-color)';\n fillColor = strokeColor;\n tickmarkStyle = TickmarkStyle.regular;\n }\n return svg`\n ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}\n ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n `;\n }\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AACzB,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACjC,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACS,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,WAAW,CAAC;AAAA,cAClE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/watch/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\
|
|
1
|
+
{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/watch/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {TickmarkStyle, TickmarkType, tickmark} from './tickmark';\n\nexport enum AdviceType {\n advice = 'advice',\n caution = 'caution',\n}\n\nexport enum AdviceState {\n regular = 'regular',\n hinted = 'hinted',\n triggered = 'triggered',\n}\n\nexport interface AngleAdviceRaw {\n minAngle: number;\n maxAngle: number;\n type: AdviceType;\n state: AdviceState;\n}\n\nexport interface AngleAdvice {\n minAngle: number;\n maxAngle: number;\n type: AdviceType;\n hinted: boolean;\n}\n\nconst margin = (344 - 328) / 2 + 8;\nconst deltaAngle = Math.atan2(margin, (344 + 328) / 2);\n\nfunction adviceMask(\n minAngle: number,\n maxAngle: number,\n fill: string,\n stroke: string\n): SVGTemplateResult {\n const radl = (minAngle * Math.PI) / 180 + deltaAngle;\n const radh = (maxAngle * Math.PI) / 180 - deltaAngle;\n const r1 = 328 / 2;\n const r2 = 344 / 2;\n const R = (r2 - r1) / 2;\n const x1l = Math.sin(radl) * r1;\n const y1l = -Math.cos(radl) * r1;\n const x2l = Math.sin(radl) * r2;\n const y2l = -Math.cos(radl) * r2;\n\n const x1h = Math.sin(radh) * r1;\n const y1h = -Math.cos(radh) * r1;\n const x2h = Math.sin(radh) * r2;\n const y2h = -Math.cos(radh) * r2;\n\n const path = `M ${x1l} ${y1l} \n A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}\n A ${R} ${R} 0 0 0 ${x2h} ${y2h}\n A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}\n A ${R} ${R} 0 0 0 ${x1l} ${y1l}\n Z`;\n return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {\n if (advice.type === AdviceType.caution) {\n let mainColor;\n let fillColor: string | null = null;\n if (advice.state === AdviceState.hinted) {\n mainColor = 'var(--instrument-frame-tertiary-color)';\n } else if (advice.state === AdviceState.regular) {\n mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n } else {\n mainColor = 'var(--on-caution-active-color)';\n fillColor = 'var(--alert-caution-color)';\n }\n const radialPattern = [];\n for (let i = 0; i < 180; i += 4) {\n radialPattern.push(svg`<g transform=\"rotate(${i}) translate(-256 -256) \">\n <path d=\"M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z\" fill=${mainColor}/>\n </g>\n `);\n }\n const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;\n let tickmarkStyle = TickmarkStyle.hinted;\n if (advice.state === AdviceState.regular) {\n tickmarkStyle = TickmarkStyle.regular;\n } else if (advice.state === AdviceState.triggered) {\n tickmarkStyle = TickmarkStyle.enhanced;\n }\n\n return svg`\n <mask id=${maskId}>\n ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}\n </mask>\n <g mask=\"url(#${maskId})\">\n ${fillColor ? svg`<rect x=\"-256\" y=\"-256\" width=\"512\" height=\"512\" fill=\"${fillColor}\"/>` : nothing}\n ${radialPattern}\n </g>\n ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}\n ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n `;\n } else {\n let mainColor;\n let tickmarkStyle;\n if (advice.state === AdviceState.hinted) {\n mainColor = 'var(--instrument-frame-tertiary-color)';\n tickmarkStyle = TickmarkStyle.hinted;\n } else if (advice.state === AdviceState.regular) {\n mainColor = 'var(--instrument-regular-secondary-color)';\n tickmarkStyle = TickmarkStyle.regular;\n } else {\n mainColor = 'var(--instrument-enhanced-secondary-color)';\n tickmarkStyle = TickmarkStyle.regular;\n }\n return svg`\n ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}\n ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n `;\n }\n}\n"],"names":["AdviceType","AdviceState"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","sources":["../../../src/navigation-instruments/watch/label.ts"],"sourcesContent":["import {svg, SVGTemplateResult} from 'lit-html';\
|
|
1
|
+
{"version":3,"file":"label.js","sources":["../../../src/navigation-instruments/watch/label.ts"],"sourcesContent":["import {svg, SVGTemplateResult} from 'lit-html';\n\nexport function renderLabels(scale: number): SVGTemplateResult {\n const labelWidth = 32;\n const gap = 8;\n const radius: number = 368 / 2;\n const labels = [\n {\n label: 'E',\n x: radius + gap / scale + labelWidth / 2,\n y: 0,\n class: 'label',\n },\n {\n label: 'S',\n x: 0,\n y: radius + gap / scale + labelWidth / 2,\n class: 'label',\n },\n {\n label: 'W',\n x: -(radius + gap / scale + labelWidth / 2),\n y: 0,\n class: 'label',\n },\n ];\n\n let arrow = svg`<defs>\n <mask id=\"circleMask\">\n <rect x=\"-${radius}\" y=\"-${radius}\" width=\"${radius * 2}\" height=\"${radius * 2}\" fill=\"black\"/>\n <circle cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"white\"/>\n </mask>\n </defs>\n <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z\" \n fill=\"var(--instrument-tick-mark-secondary-color)\"/>\n <path d=\"M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z\" fill=\"var(--element-active-inverted-color)\"/>\n </g>`;\n\n if (scale < 0.58) {\n arrow = svg`\n <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-radius})\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z\" fill=\"var(--instrument-frame-tertiary-color)\"/>\n </g>`;\n\n labels.push({\n label: 'N',\n x: 0,\n y: -(radius + gap / scale + labelWidth / 2),\n class: 'label',\n });\n }\n\n return svg`\n ${arrow}\n\n ${labels.map(\n (l) => svg`\n <text\n x=\"${l.x}\"\n y=\"${l.y}\"\n class=\"${l.class}\"\n >\n ${l.label}\n </text>\n `\n )}\n `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,aAAa,OAAkC;AAC7D,QAAM,aAAa;AACnB,QAAM,MAAM;AACZ,QAAM,SAAiB,MAAM;AAC7B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EAAA;AAGF,MAAI,QAAQ;AAAA;AAAA,wBAEU,MAAM,SAAS,MAAM,YAAY,SAAS,CAAC,aAAa,SAAS,CAAC;AAAA,uCACnD,MAAM;AAAA;AAAA;AAAA,yDAGY,EAAE,SAAS,KAAK,MAAM,WAAW,IAAI,KAAK,KAAK,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAI,QAAQ,MAAM;AACR,YAAA;AAAA,2DAC+C,CAAC,MAAM;AAAA;AAAA;AAI9D,WAAO,KAAK;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,OAAO;AAAA,IAAA,CACR;AAAA,EACH;AAEO,SAAA;AAAA,MACH,KAAK;AAAA;AAAA,MAEL,OAAO;AAAA,IACP,CAAC,MAAM;AAAA;AAAA,eAEE,EAAE,CAAC;AAAA,eACH,EAAE,CAAC;AAAA,mBACC,EAAE,KAAK;AAAA;AAAA,YAEd,EAAE,KAAK;AAAA;AAAA;AAAA,EAAA,CAGd;AAAA;AAEL;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\r\n LitElement,\r\n SVGTemplateResult,\r\n html,\r\n nothing,\r\n svg,\r\n unsafeCSS,\r\n} from 'lit';\r\nimport {customElement, property} from 'lit/decorators.js';\r\nimport {circle} from '../../svghelpers';\r\nimport {roundedArch} from '../../svghelpers/roundedArch';\r\nimport {InstrumentState} from '../types';\r\nimport compentStyle from './watch.css?inline';\r\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\r\nimport {AngleAdviceRaw, renderAdvice} from './advice';\r\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\r\nimport {renderLabels} from './label';\r\n\r\n@customElement('obc-watch')\r\nexport class ObcWatch extends LitElement {\r\n @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\r\n @property({type: Number}) angleSetpoint: number | undefined;\r\n @property({type: Boolean}) atAngleSetpoint: boolean = false;\r\n @property({type: Number}) padding = 24;\r\n @property({type: Number}) cutAngleStart: number | null = null;\r\n @property({type: Number}) cutAngleEnd: number | null = null;\r\n @property({type: Boolean}) roundOutsideCut = false;\r\n @property({type: Boolean}) roundInsideCut = false;\r\n @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\r\n @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\r\n @property({type: Boolean}) crosshairEnabled: boolean = false;\r\n @property({type: Boolean}) labelFrameEnabled: boolean = false;\r\n\r\n // @ts-expect-error TS6133: The controller unsures that the render\r\n // function is called on resize of the element\r\n private _resizeController = new ResizeController(this, {});\r\n\r\n private watchCircle(): SVGTemplateResult {\r\n if (this.cutAngleStart === null || this.cutAngleEnd === null) {\r\n return svg`\r\n <defs>\r\n <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\r\n <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\r\n <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\r\n </mask>\r\n </defs>\r\n ${\r\n this.state === InstrumentState.off\r\n ? null\r\n : svg`\r\n <circle\r\n cx=\"0\"\r\n cy=\"0\"\r\n r=\"184\"\r\n fill=\"var(--instrument-frame-primary-color)\"\r\n mask=\"url(#mask1)\"\r\n />`\r\n }\r\n ${circle('innerRing', {\r\n radius: 320 / 2,\r\n strokeWidth: 1,\r\n strokeColor: 'var(--instrument-frame-tertiary-color)',\r\n strokePosition: 'center',\r\n fillColor: 'none',\r\n })}\r\n ${\r\n this.state === InstrumentState.off\r\n ? null\r\n : circle('outerRing', {\r\n radius: 368 / 2,\r\n strokeWidth: 1,\r\n strokeColor: 'var(--instrument-frame-tertiary-color)',\r\n strokePosition: 'center',\r\n fillColor: 'none',\r\n })\r\n }\r\n `;\r\n } else {\r\n const R = 184;\r\n const r = 160;\r\n const svgPath = roundedArch({\r\n startAngle: this.cutAngleStart,\r\n endAngle: this.cutAngleEnd,\r\n R,\r\n r,\r\n roundOutsideCut: this.roundOutsideCut,\r\n roundInsideCut: this.roundInsideCut,\r\n });\r\n return svg`\r\n <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \r\n stroke=\"var(--instrument-frame-tertiary-color)\"\r\n vector-effect=\"non-scaling-stroke\"/>\r\n `;\r\n }\r\n }\r\n\r\n private renderCrosshair(radius: number): SVGTemplateResult {\r\n return svg`\r\n <line\r\n x1=\"-${radius}\"\r\n y1=\"0\"\r\n x2=\"${radius}\"\r\n y2=\"0\"\r\n stroke=\"var(--instrument-frame-tertiary-color)\"\r\n stroke-width=\"1\"\r\n vector-effect=\"non-scaling-stroke\"\r\n />\r\n <line\r\n x1=\"0\"\r\n y1=\"-${radius}\"\r\n x2=\"0\"\r\n y2=\"${radius}\"\r\n stroke=\"var(--instrument-frame-tertiary-color)\"\r\n stroke-width=\"1\"\r\n vector-effect=\"non-scaling-stroke\"\r\n />\r\n `;\r\n }\r\n\r\n override render() {\r\n const width = (176 + this.padding) * 2;\r\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\r\n const angleSetpoint = this.renderSetpoint();\r\n const scale = this.clientWidth / width;\r\n const tickmarks = this.tickmarks.map((t) =>\r\n tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\r\n );\r\n const advices = this.advices\r\n ? this.advices.map((a) => renderAdvice(a))\r\n : nothing;\r\n const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\r\n\r\n return html`\r\n <svg\r\n width=\"100%\"\r\n height=\"100%\"\r\n viewBox=${viewBox}\r\n style=\"--scale: ${scale}\"\r\n >\r\n ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\r\n ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\r\n </svg>\r\n `;\r\n }\r\n\r\n private renderSetpoint(): SVGTemplateResult | typeof nothing {\r\n let setPointColor = 'var(--instrument-enhanced-primary-color)';\r\n if (this.atAngleSetpoint) {\r\n setPointColor = 'var(--instrument-enhanced-secondary-color)';\r\n }\r\n if (this.state === InstrumentState.active) {\r\n setPointColor = 'var(--instrument-regular-primary-color)';\r\n if (this.atAngleSetpoint) {\r\n setPointColor = 'var(--instrument-regular-secondary-color)';\r\n }\r\n } else if (this.state === InstrumentState.loading) {\r\n setPointColor = 'var(--instrument-frame-tertiary-color)';\r\n } else if (this.state === InstrumentState.off) {\r\n setPointColor = 'var(--instrument-frame-tertiary-color)';\r\n }\r\n\r\n if (this.angleSetpoint === undefined) {\r\n return nothing;\r\n } else {\r\n let path;\r\n if (this.state === InstrumentState.inCommand) {\r\n path =\r\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';\r\n } else {\r\n path =\r\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';\r\n }\r\n return svg`\r\n <defs>\r\n <g id=\"setpoint\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\r\n </g>\r\n <mask id=\"setpointMask\">\r\n <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\r\n <use href=\"#setpoint\" fill=\"black\" />\r\n </mask>\r\n </defs>\r\n <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\r\n <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\r\n \r\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)\" />\r\n </g>\r\n `;\r\n }\r\n }\r\n\r\n static override styles = unsafeCSS(compentStyle);\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'obc-watch': ObcWatch;\r\n }\r\n}\r\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 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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tickmark-flat.js","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\
|
|
1
|
+
{"version":3,"file":"tickmark-flat.js","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n angle: number;\n type: TickmarkType;\n text?: string;\n}\n\nexport enum TickmarkType {\n main = 'main',\n primary = 'primary',\n secondary = 'secondary',\n tertiary = 'tertiary',\n}\n\nexport enum TickmarkStyle {\n hinted = 'hinted',\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(style: TickmarkStyle): string {\n if (style === TickmarkStyle.hinted) {\n return 'var(--instrument-frame-tertiary-color)';\n } else if (style === TickmarkStyle.regular) {\n return 'var(--instrument-tick-mark-secondary-color)';\n } else {\n return 'var(--instrument-tick-mark-primary-color)';\n }\n}\n\nexport function tickmark(\n angle: number,\n tickmarkSize: TickmarkType,\n style: TickmarkStyle,\n text?: string\n): SVGTemplateResult | SVGTemplateResult[] {\n const textHeight = -32;\n let lineStartY: number = -35;\n let lineEndY: number = -34;\n\n if (tickmarkSize === TickmarkType.secondary) {\n lineStartY = -24;\n lineEndY = lineStartY + 8;\n } else if (tickmarkSize === TickmarkType.main) {\n lineEndY = lineStartY + 20;\n } else if (tickmarkSize === TickmarkType.tertiary) {\n throw new Error('Tertiary tickmarks are not supported');\n }\n\n const colorName = tickmarkColor(style);\n const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n if (text) {\n const textY = lineEndY + textHeight;\n return [\n tick,\n svg`<text x=${angle} y=${textY} class=\"label\" text-anchor=\"middle\">${text}</text>`,\n ];\n }\n\n return tick;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":";AAQY,IAAA,iCAAAA,kBAAL;AACLA,gBAAA,MAAO,IAAA;AACPA,gBAAA,SAAU,IAAA;AACVA,gBAAA,WAAY,IAAA;AACZA,gBAAA,UAAW,IAAA;AAJDA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOA,IAAA,kCAAAC,mBAAL;AACLA,iBAAA,QAAS,IAAA;AACTA,iBAAA,SAAU,IAAA;AACVA,iBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAML,SAAS,cAAc,OAA8B;AAC1D,MAAI,UAAU,UAAsB;AAC3B,WAAA;AAAA,EAAA,WACE,UAAU,WAAuB;AACnC,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EACT;AACF;AAEO,SAAS,SACd,OACA,cACA,OACA,MACyC;AACzC,QAAM,aAAa;AACnB,MAAI,aAAqB;AACzB,MAAI,WAAmB;AAEvB,MAAI,iBAAiB,aAAwB;AAC9B,iBAAA;AACb,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,QAAmB;AAC7C,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEM,QAAA,YAAY,cAAc,KAAK;AAC/B,QAAA,OAAO,eAAe,KAAK,OAAO,UAAU,OAAO,KAAK,OAAO,QAAQ,WAAW,SAAS;AACjG,MAAI,MAAM;AACR,UAAM,QAAQ,WAAW;AAClB,WAAA;AAAA,MACL;AAAA,MACA,cAAc,KAAK,MAAM,KAAK,uCAAuC,IAAI;AAAA,IAAA;AAAA,EAE7E;AAEO,SAAA;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watch-flat.js","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"sourcesContent":["import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';\
|
|
1
|
+
{"version":3,"file":"watch-flat.js","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"sourcesContent":["import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './watch-flat.css?inline';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat';\nimport {rect} from '../../svghelpers/rectangular';\nimport {Label} from '../compass-flat/compass-flat';\n\n@customElement('obc-watch-flat')\nexport class ObcWatchFlat extends LitElement {\n @property({type: Number}) width = 352;\n @property({type: Number}) height = 72;\n @property({type: Number}) padding = 0;\n @property({type: Number}) rotation = 0;\n @property({type: Number}) tickmarkSpacing = 0;\n @property({type: Number}) angleSetpoint: number | undefined;\n @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n @property({type: Array, attribute: false}) labels: Label[] = [];\n @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =\n [];\n @property({type: Number}) trackHeight = (2 / 3) * this.height;\n @property({type: Number}) ticksHeight = this.height - this.trackHeight;\n @property({type: Number}) borderRadius = 8;\n\n private renderClipPath(offsetY: number = 0): SVGTemplateResult {\n return svg`\n <clipPath id=\"frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}\">\n <rect x=\"${-this.width / 2}\" y=\"${-this.height / 2 + offsetY}\" \n width=\"${this.width}\" height=\"${this.height}\" \n rx=\"${this.borderRadius}\" />\n </clipPath>\n `;\n }\n\n private renderLabelMask(): SVGTemplateResult {\n return svg`\n <mask id=\"labelMask\">\n <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n width=\"${this.width}\" height=\"${32}\"\n />\n <linearGradient id=\"fadeGradient\" gradientUnits=\"userSpaceOnUse\"\n x1=\"${-this.width / 2}\" y1=\"0\" x2=\"${this.width / 2}\" y2=\"0\">\n <stop offset=\"0%\" style=\"stop-color:black; stop-opacity:1;\" />\n <stop offset=\"10%\" style=\"stop-color:white; stop-opacity:1;\" />\n <stop offset=\"50%\" style=\"stop-color:white; stop-opacity:1;\" />\n <stop offset=\"90%\" style=\"stop-color:white; stop-opacity:1;\" />\n <stop offset=\"100%\" style=\"stop-color:black; stop-opacity:1;\" />\n </linearGradient>\n <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n width=\"${this.width}\" height=\"${32}\"\n fill=\"url(#fadeGradient)\" />\n </mask>\n `;\n }\n\n private renderLabels(scale: number): SVGTemplateResult[] {\n const labels: SVGTemplateResult[] = [];\n\n for (const l of this.labels) {\n labels.push(\n svg`<g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})\">\n <text x=${l.x} y=${l.y} class=\"label\" fill=${'var(--instrument-tick-mark-secondary-color)'}>\n ${l.text}\n </text>\n </g>`\n );\n }\n\n return labels;\n }\n\n private watchFace(): SVGTemplateResult {\n const strokeWidth = 1;\n\n return svg`\n ${this.renderClipPath()}\n ${this.renderClipPath(-40)}\n <g clip-path=\"url(#frameClipPath)\">\n ${rect('frame-track', {\n width: this.width,\n height: this.trackHeight,\n y: this.height / 2 - this.trackHeight,\n strokeWidth: strokeWidth,\n strokeColor: 'var(--instrument-frame-secondary-color)',\n strokePosition: 'inside',\n fillColor: 'var(--instrument-frame-secondary-color)',\n borderRadius: 0,\n })}\n ${rect('frame-ticks', {\n width: this.width,\n height: this.ticksHeight,\n y: this.height / 2 - this.trackHeight - this.ticksHeight,\n strokeWidth: strokeWidth,\n strokeColor: 'var(--instrument-frame-primary-color)',\n strokePosition: 'inside',\n fillColor: 'var(--instrument-frame-primary-color)',\n borderRadius: 0,\n })}\n </g>\n ${rect('frame-outline', {\n width: this.width,\n height: this.height,\n strokeWidth: strokeWidth,\n strokeColor: 'var(--instrument-frame-tertiary-color)',\n strokePosition: 'inside',\n fillColor: 'none',\n borderRadius: this.borderRadius,\n })}\n `;\n }\n\n override render() {\n const width = (this.width / 2 + this.padding) * 2;\n const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;\n const scale = this.clientWidth / width;\n\n return html`\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=${viewBox}\n style=\"--scale: ${scale}\"\n >\n ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}\n\n <g clip-path=\"url(#frameClipPath)\">\n ${this.tickmarks.map(\n (t) => svg`\n <g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, 0)\">\n ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}\n </g>\n `\n )}\n </g>\n\n <g mask=\"url(#labelMask)\">\n ${this.renderLabels(scale)}\n </svg>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-watch-flat': ObcWatchFlat;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\
|
|
1
|
+
{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function rect(\n id: string,\n data: {\n width: number;\n height: number;\n strokeWidth: number;\n strokeColor: string;\n fillColor: string;\n borderRadius: number;\n strokePosition: 'inside' | 'outside';\n y?: number;\n }\n) {\n const yPosition = data.y !== undefined ? data.y : -data.height / 2;\n\n if (data.strokePosition === 'inside') {\n return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\n data.width\n } height=${data.height} rx=${\n data.borderRadius\n } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\n data.width\n } height=${data.height} rx=${\n data.borderRadius\n } vector-effect=\"non-scaling-stroke\" stroke=${\n data.strokeColor\n } stroke-width=${data.strokeWidth * 2} fill=${\n data.fillColor\n } clip-path=\"url(#clip${id})\"/> \n\t\t `;\n } else {\n return null;\n }\n}\n"],"names":[],"mappings":";AAEgB,SAAA,KACd,IACA,MAUA;AACM,QAAA,YAAY,KAAK,MAAM,SAAY,KAAK,IAAI,CAAC,KAAK,SAAS;AAE7D,MAAA,KAAK,mBAAmB,UAAU;AAC7B,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,eACV,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,SAAS,UAC3C,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP;AAAA;AAAA;AAAA,aAGK,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,SAAS,UAC7C,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA,EAAA,OAErB;AACE,WAAA;AAAA,EACT;AACF;"}
|
package/package.json
CHANGED
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@oicl/openbridge-webcomponents",
|
|
3
|
-
"version": "0.0.15-dev-
|
|
4
|
-
"type": "module",
|
|
5
|
-
"repository": {
|
|
6
|
-
"type": "git",
|
|
7
|
-
"url": "git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git",
|
|
8
|
-
"directory": "packages/openbridge-webcomponents"
|
|
9
|
-
},
|
|
10
|
-
"license": "Apache-2.0",
|
|
11
|
-
"scripts": {
|
|
12
|
-
"build": "yarn run typecheck && yarn run build:ts && yarn run analyze && yarn run build:wrappers",
|
|
13
|
-
"build:ts": "vite build",
|
|
14
|
-
"build:ts:watch": "vite build --watch",
|
|
15
|
-
"build:wrappers": "lit labs gen --framework=vue --framework=react --out=.. && node fix-generated.cjs",
|
|
16
|
-
"typecheck": "tsc --noEmit",
|
|
17
|
-
"preview": "vite preview",
|
|
18
|
-
"storybook": "storybook dev -p 6006",
|
|
19
|
-
"build-storybook": "storybook build",
|
|
20
|
-
"download:icons": "tsx ./script/download-icons.ts",
|
|
21
|
-
"new:component": "tsx ./new-component.ts",
|
|
22
|
-
"test-storybook": "test-storybook",
|
|
23
|
-
"prepack": "yarn build",
|
|
24
|
-
"format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write",
|
|
25
|
-
"format:check": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --check",
|
|
26
|
-
"lint": "yarn run lint:lit-analyzer && yarn run lint:eslint",
|
|
27
|
-
"lint:eslint": "eslint 'src/**/*.ts'",
|
|
28
|
-
"lint:lit-analyzer": "lit-analyzer",
|
|
29
|
-
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\"",
|
|
30
|
-
"analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --watch",
|
|
31
|
-
"release": "release-it"
|
|
32
|
-
},
|
|
33
|
-
"dependencies": {
|
|
34
|
-
"@lit-labs/observers": "^2.0.2",
|
|
35
|
-
"lit": "^3.1.0"
|
|
36
|
-
},
|
|
37
|
-
"devDependencies": {
|
|
38
|
-
"@chromatic-com/storybook": "^1.7.0",
|
|
39
|
-
"@custom-elements-manifest/analyzer": "^0.9.0",
|
|
40
|
-
"@lit-labs/cli": "^0.6.4",
|
|
41
|
-
"@lit-labs/gen-wrapper-react": "^0.3.2",
|
|
42
|
-
"@lit-labs/gen-wrapper-vue": "^0.3.3",
|
|
43
|
-
"@open-wc/lit-helpers": "^0.7.0",
|
|
44
|
-
"@playwright/test": "^1.46.1",
|
|
45
|
-
"@storybook/addon-essentials": "^8.2.9",
|
|
46
|
-
"@storybook/addon-interactions": "^8.2.9",
|
|
47
|
-
"@storybook/addon-links": "^8.2.9",
|
|
48
|
-
"@storybook/addon-storysource": "^8.2.9",
|
|
49
|
-
"@storybook/addon-themes": "^8.2.9",
|
|
50
|
-
"@storybook/blocks": "^8.2.9",
|
|
51
|
-
"@storybook/manager-api": "^8.2.9",
|
|
52
|
-
"@storybook/test": "^8.2.9",
|
|
53
|
-
"@storybook/test-runner": "^0.17.0",
|
|
54
|
-
"@storybook/theming": "^8.2.9",
|
|
55
|
-
"@storybook/web-components": "^8.2.9",
|
|
56
|
-
"@storybook/web-components-vite": "^8.2.9",
|
|
57
|
-
"@topcli/prompts": "^1.8.0",
|
|
58
|
-
"@types/jest-image-snapshot": "^6",
|
|
59
|
-
"@types/node": "^22.4.1",
|
|
60
|
-
"concurrently": "^8.2.2",
|
|
61
|
-
"dotenv": "^16.3.1",
|
|
62
|
-
"eslint": "^8.56.0",
|
|
63
|
-
"eslint-plugin-storybook": "^0.8.0",
|
|
64
|
-
"figma-api": "^1.11.0",
|
|
65
|
-
"jest-image-snapshot": "^6.2.0",
|
|
66
|
-
"lit-analyzer": "^2.0.3",
|
|
67
|
-
"nodemon": "^3.0.2",
|
|
68
|
-
"playwright": "^1.40.0",
|
|
69
|
-
"postcss": "^8.4.36",
|
|
70
|
-
"postcss-mixins": "^10.0.0",
|
|
71
|
-
"postcss-nesting": "^12.0.1",
|
|
72
|
-
"prettier": "^3.1.1",
|
|
73
|
-
"release-it": "^17.1.1",
|
|
74
|
-
"rollup-plugin-postcss-lit": "^2.1.0",
|
|
75
|
-
"storybook": "^8.2.9",
|
|
76
|
-
"tsx": "^4.7.1",
|
|
77
|
-
"typescript": "^5.3.3",
|
|
78
|
-
"vite": "^5.2.7",
|
|
79
|
-
"vite-plugin-dts": "^3.6.3"
|
|
80
|
-
},
|
|
81
|
-
"types": "./dist/index.d.ts",
|
|
82
|
-
"customElements": "custom-elements.json"
|
|
83
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@oicl/openbridge-webcomponents",
|
|
3
|
+
"version": "0.0.15-dev-20240923194534",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git",
|
|
8
|
+
"directory": "packages/openbridge-webcomponents"
|
|
9
|
+
},
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "yarn run typecheck && yarn run build:ts && yarn run analyze && yarn run build:wrappers",
|
|
13
|
+
"build:ts": "vite build",
|
|
14
|
+
"build:ts:watch": "vite build --watch",
|
|
15
|
+
"build:wrappers": "lit labs gen --framework=vue --framework=react --out=.. && node fix-generated.cjs",
|
|
16
|
+
"typecheck": "tsc --noEmit",
|
|
17
|
+
"preview": "vite preview",
|
|
18
|
+
"storybook": "storybook dev -p 6006",
|
|
19
|
+
"build-storybook": "storybook build",
|
|
20
|
+
"download:icons": "tsx ./script/download-icons.ts",
|
|
21
|
+
"new:component": "tsx ./new-component.ts",
|
|
22
|
+
"test-storybook": "test-storybook",
|
|
23
|
+
"prepack": "yarn build",
|
|
24
|
+
"format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write",
|
|
25
|
+
"format:check": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --check",
|
|
26
|
+
"lint": "yarn run lint:lit-analyzer && yarn run lint:eslint",
|
|
27
|
+
"lint:eslint": "eslint 'src/**/*.ts'",
|
|
28
|
+
"lint:lit-analyzer": "lit-analyzer",
|
|
29
|
+
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\"",
|
|
30
|
+
"analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --watch",
|
|
31
|
+
"release": "release-it"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@lit-labs/observers": "^2.0.2",
|
|
35
|
+
"lit": "^3.1.0"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@chromatic-com/storybook": "^1.7.0",
|
|
39
|
+
"@custom-elements-manifest/analyzer": "^0.9.0",
|
|
40
|
+
"@lit-labs/cli": "^0.6.4",
|
|
41
|
+
"@lit-labs/gen-wrapper-react": "^0.3.2",
|
|
42
|
+
"@lit-labs/gen-wrapper-vue": "^0.3.3",
|
|
43
|
+
"@open-wc/lit-helpers": "^0.7.0",
|
|
44
|
+
"@playwright/test": "^1.46.1",
|
|
45
|
+
"@storybook/addon-essentials": "^8.2.9",
|
|
46
|
+
"@storybook/addon-interactions": "^8.2.9",
|
|
47
|
+
"@storybook/addon-links": "^8.2.9",
|
|
48
|
+
"@storybook/addon-storysource": "^8.2.9",
|
|
49
|
+
"@storybook/addon-themes": "^8.2.9",
|
|
50
|
+
"@storybook/blocks": "^8.2.9",
|
|
51
|
+
"@storybook/manager-api": "^8.2.9",
|
|
52
|
+
"@storybook/test": "^8.2.9",
|
|
53
|
+
"@storybook/test-runner": "^0.17.0",
|
|
54
|
+
"@storybook/theming": "^8.2.9",
|
|
55
|
+
"@storybook/web-components": "^8.2.9",
|
|
56
|
+
"@storybook/web-components-vite": "^8.2.9",
|
|
57
|
+
"@topcli/prompts": "^1.8.0",
|
|
58
|
+
"@types/jest-image-snapshot": "^6",
|
|
59
|
+
"@types/node": "^22.4.1",
|
|
60
|
+
"concurrently": "^8.2.2",
|
|
61
|
+
"dotenv": "^16.3.1",
|
|
62
|
+
"eslint": "^8.56.0",
|
|
63
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
64
|
+
"figma-api": "^1.11.0",
|
|
65
|
+
"jest-image-snapshot": "^6.2.0",
|
|
66
|
+
"lit-analyzer": "^2.0.3",
|
|
67
|
+
"nodemon": "^3.0.2",
|
|
68
|
+
"playwright": "^1.40.0",
|
|
69
|
+
"postcss": "^8.4.36",
|
|
70
|
+
"postcss-mixins": "^10.0.0",
|
|
71
|
+
"postcss-nesting": "^12.0.1",
|
|
72
|
+
"prettier": "^3.1.1",
|
|
73
|
+
"release-it": "^17.1.1",
|
|
74
|
+
"rollup-plugin-postcss-lit": "^2.1.0",
|
|
75
|
+
"storybook": "^8.2.9",
|
|
76
|
+
"tsx": "^4.7.1",
|
|
77
|
+
"typescript": "^5.3.3",
|
|
78
|
+
"vite": "^5.2.7",
|
|
79
|
+
"vite-plugin-dts": "^3.6.3"
|
|
80
|
+
},
|
|
81
|
+
"types": "./dist/index.d.ts",
|
|
82
|
+
"customElements": "custom-elements.json"
|
|
83
|
+
}
|