@oicl/openbridge-webcomponents 0.0.15-dev-20240923191659 → 0.0.15-dev-20240923193604
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 +9 -9
- 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":"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-20240923193604",
|
|
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,61 +1,61 @@
|
|
|
1
|
-
import {SVGTemplateResult, svg} from 'lit';
|
|
2
|
-
|
|
3
|
-
export enum ArrowStyle {
|
|
4
|
-
HDG = 'HDG',
|
|
5
|
-
COG = 'COG',
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export function arrow(
|
|
9
|
-
style: ArrowStyle,
|
|
10
|
-
angle: number
|
|
11
|
-
): SVGTemplateResult | SVGTemplateResult[] {
|
|
12
|
-
const colorName = 'var(--instrument-enhanced-secondary-color)';
|
|
13
|
-
|
|
14
|
-
if (style === ArrowStyle.HDG) {
|
|
15
|
-
return svg`
|
|
16
|
-
<g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
|
|
17
|
-
<rect x="28" y="118" width="8" height="139" rx="4" fill="${colorName}" />
|
|
18
|
-
<rect x="30.0039" y="256" width="4" height="156" rx="2" fill="${colorName}" />
|
|
19
|
-
<circle cx="32" cy="256" r="8" fill="${colorName}" />
|
|
20
|
-
<mask
|
|
21
|
-
id="mask0_262_65165"
|
|
22
|
-
style="mask-type:luminance"
|
|
23
|
-
maskUnits="userSpaceOnUse"
|
|
24
|
-
x="8"
|
|
25
|
-
y="94"
|
|
26
|
-
width="48"
|
|
27
|
-
height="50"
|
|
28
|
-
>
|
|
29
|
-
<path
|
|
30
|
-
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"
|
|
31
|
-
fill="white"
|
|
32
|
-
stroke="black"
|
|
33
|
-
/>
|
|
34
|
-
</mask>
|
|
35
|
-
<g mask="url(#mask0_262_65165)">
|
|
36
|
-
<path
|
|
37
|
-
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"
|
|
38
|
-
fill="${colorName}"
|
|
39
|
-
/>
|
|
40
|
-
</g>
|
|
41
|
-
</g>
|
|
42
|
-
`;
|
|
43
|
-
} else if (style === ArrowStyle.COG) {
|
|
44
|
-
return svg`
|
|
45
|
-
<g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
|
|
46
|
-
<path
|
|
47
|
-
fill-rule="evenodd"
|
|
48
|
-
clip-rule="evenodd"
|
|
49
|
-
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"
|
|
50
|
-
fill="${colorName}"
|
|
51
|
-
/>
|
|
52
|
-
<rect x="30" y="133" width="4" height="124" rx="2" fill="${colorName}" />
|
|
53
|
-
<circle cx="32" cy="256" r="4" fill="${colorName}" />
|
|
54
|
-
</g>
|
|
55
|
-
`;
|
|
56
|
-
} else {
|
|
57
|
-
return [];
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// return [...shaft, circle, arrowTip];
|
|
61
|
-
}
|
|
1
|
+
import {SVGTemplateResult, svg} from 'lit';
|
|
2
|
+
|
|
3
|
+
export enum ArrowStyle {
|
|
4
|
+
HDG = 'HDG',
|
|
5
|
+
COG = 'COG',
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export function arrow(
|
|
9
|
+
style: ArrowStyle,
|
|
10
|
+
angle: number
|
|
11
|
+
): SVGTemplateResult | SVGTemplateResult[] {
|
|
12
|
+
const colorName = 'var(--instrument-enhanced-secondary-color)';
|
|
13
|
+
|
|
14
|
+
if (style === ArrowStyle.HDG) {
|
|
15
|
+
return svg`
|
|
16
|
+
<g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
|
|
17
|
+
<rect x="28" y="118" width="8" height="139" rx="4" fill="${colorName}" />
|
|
18
|
+
<rect x="30.0039" y="256" width="4" height="156" rx="2" fill="${colorName}" />
|
|
19
|
+
<circle cx="32" cy="256" r="8" fill="${colorName}" />
|
|
20
|
+
<mask
|
|
21
|
+
id="mask0_262_65165"
|
|
22
|
+
style="mask-type:luminance"
|
|
23
|
+
maskUnits="userSpaceOnUse"
|
|
24
|
+
x="8"
|
|
25
|
+
y="94"
|
|
26
|
+
width="48"
|
|
27
|
+
height="50"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
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"
|
|
31
|
+
fill="white"
|
|
32
|
+
stroke="black"
|
|
33
|
+
/>
|
|
34
|
+
</mask>
|
|
35
|
+
<g mask="url(#mask0_262_65165)">
|
|
36
|
+
<path
|
|
37
|
+
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"
|
|
38
|
+
fill="${colorName}"
|
|
39
|
+
/>
|
|
40
|
+
</g>
|
|
41
|
+
</g>
|
|
42
|
+
`;
|
|
43
|
+
} else if (style === ArrowStyle.COG) {
|
|
44
|
+
return svg`
|
|
45
|
+
<g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
|
|
46
|
+
<path
|
|
47
|
+
fill-rule="evenodd"
|
|
48
|
+
clip-rule="evenodd"
|
|
49
|
+
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"
|
|
50
|
+
fill="${colorName}"
|
|
51
|
+
/>
|
|
52
|
+
<rect x="30" y="133" width="4" height="124" rx="2" fill="${colorName}" />
|
|
53
|
+
<circle cx="32" cy="256" r="4" fill="${colorName}" />
|
|
54
|
+
</g>
|
|
55
|
+
`;
|
|
56
|
+
} else {
|
|
57
|
+
return [];
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// return [...shaft, circle, arrowTip];
|
|
61
|
+
}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import type {Meta, StoryObj} from '@storybook/web-components';
|
|
2
|
-
import {ObcCompass} from './compass';
|
|
3
|
-
import './compass';
|
|
4
|
-
import {beta6Decorator, widthDecorator} from '../../storybook-util';
|
|
5
|
-
import {AdviceType} from '../watch/advice';
|
|
6
|
-
|
|
7
|
-
const meta: Meta<typeof ObcCompass> = {
|
|
8
|
-
title: 'Navigation Instruments/Compass',
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
component: 'obc-compass',
|
|
11
|
-
args: {
|
|
12
|
-
width: 512,
|
|
13
|
-
heading: 311,
|
|
14
|
-
courseOverGround: 338,
|
|
15
|
-
headingAdvices: [
|
|
16
|
-
{
|
|
17
|
-
minAngle: 20,
|
|
18
|
-
maxAngle: 50,
|
|
19
|
-
type: AdviceType.advice,
|
|
20
|
-
hinted: false,
|
|
21
|
-
},
|
|
22
|
-
],
|
|
23
|
-
},
|
|
24
|
-
argTypes: {
|
|
25
|
-
width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
|
|
26
|
-
heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
|
|
27
|
-
courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
|
|
28
|
-
},
|
|
29
|
-
decorators: [widthDecorator, beta6Decorator],
|
|
30
|
-
} satisfies Meta<ObcCompass>;
|
|
31
|
-
|
|
32
|
-
export default meta;
|
|
33
|
-
type Story = StoryObj<ObcCompass>;
|
|
34
|
-
|
|
35
|
-
export const Primary: Story = {
|
|
36
|
-
args: {},
|
|
37
|
-
};
|
|
1
|
+
import type {Meta, StoryObj} from '@storybook/web-components';
|
|
2
|
+
import {ObcCompass} from './compass';
|
|
3
|
+
import './compass';
|
|
4
|
+
import {beta6Decorator, widthDecorator} from '../../storybook-util';
|
|
5
|
+
import {AdviceType} from '../watch/advice';
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof ObcCompass> = {
|
|
8
|
+
title: 'Navigation Instruments/Compass',
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
component: 'obc-compass',
|
|
11
|
+
args: {
|
|
12
|
+
width: 512,
|
|
13
|
+
heading: 311,
|
|
14
|
+
courseOverGround: 338,
|
|
15
|
+
headingAdvices: [
|
|
16
|
+
{
|
|
17
|
+
minAngle: 20,
|
|
18
|
+
maxAngle: 50,
|
|
19
|
+
type: AdviceType.advice,
|
|
20
|
+
hinted: false,
|
|
21
|
+
},
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
argTypes: {
|
|
25
|
+
width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
|
|
26
|
+
heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
|
|
27
|
+
courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
|
|
28
|
+
},
|
|
29
|
+
decorators: [widthDecorator, beta6Decorator],
|
|
30
|
+
} satisfies Meta<ObcCompass>;
|
|
31
|
+
|
|
32
|
+
export default meta;
|
|
33
|
+
type Story = StoryObj<ObcCompass>;
|
|
34
|
+
|
|
35
|
+
export const Primary: Story = {
|
|
36
|
+
args: {},
|
|
37
|
+
};
|