@operato/image-marker 9.0.0-beta.6 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +134 -0
  2. package/dist/src/base-image-marker.d.ts +1 -1
  3. package/dist/src/base-image-marker.js +4 -6
  4. package/dist/src/base-image-marker.js.map +1 -1
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +6 -6
  7. package/dist/stories/ox-image-marker-mode.stories.d.ts +0 -16
  8. package/dist/stories/ox-image-marker-mode.stories.js +0 -31
  9. package/dist/stories/ox-image-marker-mode.stories.js.map +0 -1
  10. package/dist/stories/ox-image-marker-view.stories.d.ts +0 -41
  11. package/dist/stories/ox-image-marker-view.stories.js +0 -103
  12. package/dist/stories/ox-image-marker-view.stories.js.map +0 -1
  13. package/dist/stories/ox-image-marker.stories.d.ts +0 -33
  14. package/dist/stories/ox-image-marker.stories.js +0 -102
  15. package/dist/stories/ox-image-marker.stories.js.map +0 -1
  16. package/dist/stories/test-image-provider.d.ts +0 -7
  17. package/dist/stories/test-image-provider.js +0 -42
  18. package/dist/stories/test-image-provider.js.map +0 -1
  19. package/dist/stories/test-image-provider.stories.d.ts +0 -33
  20. package/dist/stories/test-image-provider.stories.js +0 -119
  21. package/dist/stories/test-image-provider.stories.js.map +0 -1
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/image-marker",
3
3
  "description": "Webcomponents for image-marker chart following open-wc recommendations",
4
4
  "author": "heartyoh@hatiolab.com",
5
- "version": "9.0.0-beta.6",
5
+ "version": "9.0.0",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.js",
8
8
  "license": "MIT",
@@ -50,12 +50,12 @@
50
50
  }
51
51
  },
52
52
  "dependencies": {
53
- "@operato/i18n": "^9.0.0-beta.5",
54
- "@operato/styles": "^9.0.0-beta.6",
55
- "@operato/utils": "^9.0.0-beta.6",
53
+ "@operato/i18n": "^9.0.0",
54
+ "@operato/styles": "^9.0.0",
55
+ "@operato/utils": "^9.0.0",
56
56
  "d3": "^7.8.5",
57
57
  "d3-time-format": "^4.1.0",
58
- "i18next": "^23.11.5",
58
+ "i18next": "^24.2.1",
59
59
  "lit": "^3.1.2",
60
60
  "lodash-es": "^4.17.21",
61
61
  "pdfjs": "^2.5.3"
@@ -94,5 +94,5 @@
94
94
  "prettier --write"
95
95
  ]
96
96
  },
97
- "gitHead": "7e4dd57049f0a3dd0cbd194f7998e81f3b2c7559"
97
+ "gitHead": "0bc5364428dab277009469a253396ddbf0cec46f"
98
98
  }
package/dist/stories/ox-image-marker-mode.stories.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import '../src/ox-image-marker-mode.js';
2
- import { TemplateResult } from 'lit';
3
- declare const _default: {
4
- title: string;
5
- component: string;
6
- argTypes: {};
7
- };
8
- export default _default;
9
- interface Story<T> {
10
- (args: T): TemplateResult;
11
- args?: Partial<T>;
12
- argTypes?: Record<string, unknown>;
13
- }
14
- interface ArgTypes {
15
- }
16
- export declare const Default: Story<ArgTypes>;
package/dist/stories/ox-image-marker-mode.stories.js DELETED
@@ -1,31 +0,0 @@
1
- import '../src/ox-image-marker-mode.js';
2
- import { html } from 'lit';
3
- export default {
4
- title: 'ox-image-marker-mode',
5
- component: 'ox-image-marker-mode',
6
- argTypes: {}
7
- };
8
- const Template = ({}) => html `
9
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
10
- <link href="/themes/light.css" rel="stylesheet" />
11
- <link href="/themes/dark.css" rel="stylesheet" />
12
- <link href="/themes/spacing.css" rel="stylesheet" />
13
- <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
14
- <link
15
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
16
- rel="stylesheet"
17
- />
18
- <link
19
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
20
- rel="stylesheet"
21
- />
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
-
27
- <ox-image-marker-mode @mode-changed=${(e) => console.log(e.detail)}></ox-image-marker-mode>
28
- `;
29
- export const Default = Template.bind({});
30
- Default.args = {};
31
- //# sourceMappingURL=ox-image-marker-mode.stories.js.map
package/dist/stories/ox-image-marker-mode.stories.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-image-marker-mode.stories.js","sourceRoot":"","sources":["../../stories/ox-image-marker-mode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAA;AACvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;wCAmBhB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;CAChF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '../src/ox-image-marker-mode.js'\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-image-marker-mode',\n component: 'ox-image-marker-mode',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <ox-image-marker-mode @mode-changed=${(e: CustomEvent) => console.log(e.detail)}></ox-image-marker-mode>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n"]}
package/dist/stories/ox-image-marker-view.stories.d.ts DELETED
@@ -1,41 +0,0 @@
1
- import '../src/ox-image-marker-view.js';
2
- import { TemplateResult } from 'lit';
3
- import { ShapeType } from '../src/types.js';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- imageUrl: {
9
- control: string;
10
- };
11
- shapes: {
12
- control: string;
13
- };
14
- };
15
- };
16
- export default _default;
17
- interface Story<T> {
18
- (args: T): TemplateResult;
19
- args?: Partial<T>;
20
- argTypes?: Record<string, unknown>;
21
- }
22
- interface ArgTypes {
23
- imageUrl: string;
24
- shapes: Array<{
25
- id: string;
26
- type: ShapeType;
27
- x?: number;
28
- y?: number;
29
- width?: number;
30
- height?: number;
31
- cx?: number;
32
- cy?: number;
33
- r?: number;
34
- x1?: number;
35
- y1?: number;
36
- x2?: number;
37
- y2?: number;
38
- text?: string;
39
- }>;
40
- }
41
- export declare const ViewOnly: Story<ArgTypes>;
package/dist/stories/ox-image-marker-view.stories.js DELETED
@@ -1,103 +0,0 @@
1
- import '../src/ox-image-marker-view.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-image-marker-view',
6
- component: 'ox-image-marker-view',
7
- argTypes: {
8
- imageUrl: { control: 'text' },
9
- shapes: { control: 'object' }
10
- }
11
- };
12
- const Template = ({ imageUrl, shapes }) => html `
13
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
14
- <link href="/themes/light.css" rel="stylesheet" />
15
- <link href="/themes/dark.css" rel="stylesheet" />
16
- <link href="/themes/spacing.css" rel="stylesheet" />
17
- <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
18
- <link
19
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
20
- rel="stylesheet"
21
- />
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
- <link
27
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
28
- rel="stylesheet"
29
- />
30
-
31
- <style>
32
- ${MDTypeScaleStyles.cssText}
33
- </style>
34
-
35
- <style>
36
- body {
37
- width: 100%;
38
- height: 800px;
39
- text-align: center;
40
-
41
- background-color: var(--md-sys-color-background);
42
- color: var(--md-sys-color-on-background);
43
- }
44
-
45
- ox-image-marker-view {
46
- height: 650px;
47
- box-sizing: border-box;
48
- background-color: var(--md-sys-color-primary-container);
49
- color: var(--md-sys-color-on-primary-container);
50
- }
51
- </style>
52
-
53
- <ox-image-marker-view .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker-view>
54
- `;
55
- export const ViewOnly = Template.bind({});
56
- ViewOnly.args = {
57
- imageUrl: 'https://via.placeholder.com/800x600',
58
- shapes: [
59
- {
60
- id: '1',
61
- type: 'rectangle',
62
- x: 100,
63
- y: 100,
64
- width: 200,
65
- height: 150,
66
- text: 'Rectangle 1'
67
- },
68
- {
69
- id: '2',
70
- type: 'circle',
71
- cx: 300,
72
- cy: 300,
73
- r: 50,
74
- text: 'Circle 1'
75
- },
76
- {
77
- id: '3',
78
- type: 'line',
79
- x1: 400,
80
- y1: 400,
81
- x2: 500,
82
- y2: 500,
83
- text: 'Line 1'
84
- },
85
- {
86
- id: '4',
87
- type: 'arrow',
88
- x1: 600,
89
- y1: 100,
90
- x2: 700,
91
- y2: 200,
92
- text: 'Arrow 1'
93
- },
94
- {
95
- id: '5',
96
- type: 'text',
97
- x: 600,
98
- y: 300,
99
- text: 'Text 1'
100
- }
101
- ]
102
- };
103
- //# sourceMappingURL=ox-image-marker-view.stories.js.map
package/dist/stories/ox-image-marker-view.stories.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-image-marker-view.stories.js","sourceRoot":"","sources":["../../stories/ox-image-marker-view.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC7B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC9B;CACF,CAAA;AA4BD,MAAM,QAAQ,GAAoB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;MAoBpE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;oCAqBK,QAAQ,YAAY,MAAM;CAC7D,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,qCAAqC;IAC/C,MAAM,EAAE;QACN;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,WAAW;YACjB,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,aAAa;SACpB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,CAAC,EAAE,EAAE;YACL,IAAI,EAAE,UAAU;SACjB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;SACf;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,SAAS;SAChB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,MAAM;YACZ,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,IAAI,EAAE,QAAQ;SACf;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-image-marker-view.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { Shape, ShapeType } from '../src/types.js'\n\nexport default {\n title: 'ox-image-marker-view',\n component: 'ox-image-marker-view',\n argTypes: {\n imageUrl: { control: 'text' },\n shapes: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n imageUrl: string\n shapes: Array<{\n id: string\n type: ShapeType\n x?: number\n y?: number\n width?: number\n height?: number\n cx?: number\n cy?: number\n r?: number\n x1?: number\n y1?: number\n x2?: number\n y2?: number\n text?: string\n }>\n}\n\nconst Template: Story<ArgTypes> = ({ imageUrl, shapes }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n body {\n width: 100%;\n height: 800px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n ox-image-marker-view {\n height: 650px;\n box-sizing: border-box;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <ox-image-marker-view .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker-view>\n`\n\nexport const ViewOnly = Template.bind({})\nViewOnly.args = {\n imageUrl: 'https://via.placeholder.com/800x600',\n shapes: [\n {\n id: '1',\n type: 'rectangle',\n x: 100,\n y: 100,\n width: 200,\n height: 150,\n text: 'Rectangle 1'\n },\n {\n id: '2',\n type: 'circle',\n cx: 300,\n cy: 300,\n r: 50,\n text: 'Circle 1'\n },\n {\n id: '3',\n type: 'line',\n x1: 400,\n y1: 400,\n x2: 500,\n y2: 500,\n text: 'Line 1'\n },\n {\n id: '4',\n type: 'arrow',\n x1: 600,\n y1: 100,\n x2: 700,\n y2: 200,\n text: 'Arrow 1'\n },\n {\n id: '5',\n type: 'text',\n x: 600,\n y: 300,\n text: 'Text 1'\n }\n ]\n}\n"]}
package/dist/stories/ox-image-marker.stories.d.ts DELETED
@@ -1,33 +0,0 @@
1
- import '../src/ox-image-marker.js';
2
- import { TemplateResult } from 'lit';
3
- import { Shape } from '../src/types.js';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- imageUrl: {
9
- control: string;
10
- description: string;
11
- };
12
- shapes: {
13
- control: string;
14
- description: string;
15
- };
16
- currentShapeType: {
17
- control: string;
18
- options: string[];
19
- description: string;
20
- };
21
- };
22
- };
23
- export default _default;
24
- interface Story<T> {
25
- (args: T): TemplateResult;
26
- args?: Partial<T>;
27
- argTypes?: Record<string, unknown>;
28
- }
29
- interface ArgTypes {
30
- imageUrl: string;
31
- shapes: Shape[];
32
- }
33
- export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-image-marker.stories.js DELETED
@@ -1,102 +0,0 @@
1
- import '../src/ox-image-marker.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-image-marker',
6
- component: 'ox-image-marker',
7
- argTypes: {
8
- imageUrl: { control: 'text', description: 'Image URL to display in the marker.' },
9
- shapes: { control: 'object', description: 'List of shapes to display on the image.' },
10
- currentShapeType: {
11
- control: 'select',
12
- options: ['text', 'rectangle', 'circle', 'triangle', 'line', 'arrow'],
13
- description: 'The type of shape to draw on the image.'
14
- }
15
- }
16
- };
17
- const Template = ({ imageUrl, shapes = [] }) => html `
18
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
19
- <link href="/themes/light.css" rel="stylesheet" />
20
- <link href="/themes/dark.css" rel="stylesheet" />
21
- <link href="/themes/spacing.css" rel="stylesheet" />
22
- <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
23
-
24
- <link
25
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
26
- rel="stylesheet"
27
- />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
- <link
33
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
34
- rel="stylesheet"
35
- />
36
-
37
- <style>
38
- ${MDTypeScaleStyles.cssText}
39
- </style>
40
-
41
- <style>
42
- html,
43
- body {
44
- margin: 0;
45
- padding: 0;
46
- overflow: hidden;
47
-
48
- overscroll-behavior-y: none;
49
-
50
- /* This is a font-stack that tries to use the system-default sans-serifs first */
51
- font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
52
- line-height: 1.5;
53
- -webkit-font-smoothing: antialiased;
54
-
55
- accent-color: var(--md-sys-color-primary);
56
- }
57
-
58
- body {
59
- width: 100%;
60
- height: 800px;
61
- text-align: center;
62
-
63
- background-color: var(--md-sys-color-background);
64
- color: var(--md-sys-color-on-background);
65
- }
66
-
67
- ox-image-marker {
68
- height: 650px;
69
- box-sizing: border-box;
70
- background-color: var(--md-sys-color-primary-container);
71
- color: var(--md-sys-color-on-primary-container);
72
- }
73
- </style>
74
-
75
- <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>
76
- `;
77
- export const Regular = Template.bind({});
78
- Regular.args = {
79
- imageUrl: 'https://via.placeholder.com/800x600',
80
- shapes: [
81
- {
82
- id: '1',
83
- type: 'rectangle',
84
- x: 100,
85
- y: 100,
86
- width: 200,
87
- height: 150,
88
- selected: true,
89
- text: 'Rectangle 1'
90
- },
91
- {
92
- id: '2',
93
- type: 'circle',
94
- cx: 300,
95
- cy: 300,
96
- r: 50,
97
- selected: false,
98
- text: 'Circle 1'
99
- }
100
- ]
101
- };
102
- //# sourceMappingURL=ox-image-marker.stories.js.map
package/dist/stories/ox-image-marker.stories.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-image-marker.stories.js","sourceRoot":"","sources":["../../stories/ox-image-marker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,qCAAqC,EAAE;QACjF,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,yCAAyC,EAAE;QACrF,gBAAgB,EAAE;YAChB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;YACrE,WAAW,EAAE,yCAAyC;SACvD;KACF;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBzE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAqCA,QAAQ,YAAY,MAAM;CACxD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,qCAAqC;IAC/C,MAAM,EAAE;QACN;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,WAAW;YACjB,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,aAAa;SACpB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,CAAC,EAAE,EAAE;YACL,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,UAAU;SACjB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-image-marker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { Shape } from '../src/types.js'\n\nexport default {\n title: 'ox-image-marker',\n component: 'ox-image-marker',\n argTypes: {\n imageUrl: { control: 'text', description: 'Image URL to display in the marker.' },\n shapes: { control: 'object', description: 'List of shapes to display on the image.' },\n currentShapeType: {\n control: 'select',\n options: ['text', 'rectangle', 'circle', 'triangle', 'line', 'arrow'],\n description: 'The type of shape to draw on the image.'\n }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n imageUrl: string\n shapes: Shape[]\n}\n\nconst Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n html,\n body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n overscroll-behavior-y: none;\n\n /* This is a font-stack that tries to use the system-default sans-serifs first */\n font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n\n accent-color: var(--md-sys-color-primary);\n }\n\n body {\n width: 100%;\n height: 800px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n ox-image-marker {\n height: 650px;\n box-sizing: border-box;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n imageUrl: 'https://via.placeholder.com/800x600',\n shapes: [\n {\n id: '1',\n type: 'rectangle',\n x: 100,\n y: 100,\n width: 200,\n height: 150,\n selected: true,\n text: 'Rectangle 1'\n },\n {\n id: '2',\n type: 'circle',\n cx: 300,\n cy: 300,\n r: 50,\n selected: false,\n text: 'Circle 1'\n }\n ]\n}\n"]}
package/dist/stories/test-image-provider.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import { ImageOptions, ImageProvider } from '../src/types.js';
2
- export declare class TestImageProvider implements ImageProvider {
3
- private width;
4
- private height;
5
- constructor(width: number, height: number);
6
- getImage(options: ImageOptions): Promise<string>;
7
- }
package/dist/stories/test-image-provider.js DELETED
@@ -1,42 +0,0 @@
1
- export class TestImageProvider {
2
- constructor(width, height) {
3
- this.width = 0;
4
- this.height = 0;
5
- this.width = width;
6
- this.height = height;
7
- }
8
- async getImage(options) {
9
- // 무작위 색상 생성 함수
10
- const getRandomColor = () => {
11
- const letters = '0123456789ABCDEF';
12
- let color = '#';
13
- for (let i = 0; i < 6; i++) {
14
- color += letters[Math.floor(Math.random() * 16)];
15
- }
16
- return color;
17
- };
18
- // 무작위 색상 그라데이션 이미지 생성
19
- const canvas = document.createElement('canvas');
20
- const ctx = canvas.getContext('2d');
21
- if (!ctx) {
22
- throw new Error('Failed to get canvas context');
23
- }
24
- const { scale } = options;
25
- const width = this.width * scale;
26
- const height = this.height * scale;
27
- canvas.width = width;
28
- canvas.height = height;
29
- const gradient = ctx.createLinearGradient(0, 0, width, height);
30
- gradient.addColorStop(0, getRandomColor());
31
- gradient.addColorStop(0.15, getRandomColor());
32
- gradient.addColorStop(0.3, getRandomColor());
33
- gradient.addColorStop(0.5, getRandomColor());
34
- gradient.addColorStop(0.65, getRandomColor());
35
- gradient.addColorStop(0.8, getRandomColor());
36
- gradient.addColorStop(1, getRandomColor());
37
- ctx.fillStyle = gradient;
38
- ctx.fillRect(0, 0, width, height);
39
- return canvas.toDataURL();
40
- }
41
- }
42
- //# sourceMappingURL=test-image-provider.js.map
package/dist/stories/test-image-provider.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"test-image-provider.js","sourceRoot":"","sources":["../../stories/test-image-provider.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,iBAAiB;IAI5B,YAAY,KAAa,EAAE,MAAc;QAHjC,UAAK,GAAW,CAAC,CAAA;QACjB,WAAM,GAAW,CAAC,CAAA;QAGxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACtB,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,OAAqB;QAClC,eAAe;QACf,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,OAAO,GAAG,kBAAkB,CAAA;YAClC,IAAI,KAAK,GAAG,GAAG,CAAA;YACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;YAClD,CAAC;YACD,OAAO,KAAK,CAAA;QACd,CAAC,CAAA;QAED,sBAAsB;QACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;QAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;QACnC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAA;QACjD,CAAC;QAED,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAA;QAEzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QAClC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAA;QAEtB,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAC9D,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,CAAA;QAC1C,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;QAC7C,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,cAAc,EAAE,CAAC,CAAA;QAC5C,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,cAAc,EAAE,CAAC,CAAA;QAC5C,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;QAC7C,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,cAAc,EAAE,CAAC,CAAA;QAC5C,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,CAAA;QAE1C,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAA;QACxB,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEjC,OAAO,MAAM,CAAC,SAAS,EAAE,CAAA;IAC3B,CAAC;CACF","sourcesContent":["import { ImageOptions, ImageProvider } from '../src/types.js'\n\nexport class TestImageProvider implements ImageProvider {\n private width: number = 0\n private height: number = 0\n\n constructor(width: number, height: number) {\n this.width = width\n this.height = height\n }\n\n async getImage(options: ImageOptions): Promise<string> {\n // 무작위 색상 생성 함수\n const getRandomColor = () => {\n const letters = '0123456789ABCDEF'\n let color = '#'\n for (let i = 0; i < 6; i++) {\n color += letters[Math.floor(Math.random() * 16)]\n }\n return color\n }\n\n // 무작위 색상 그라데이션 이미지 생성\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n if (!ctx) {\n throw new Error('Failed to get canvas context')\n }\n\n const { scale } = options\n\n const width = this.width * scale\n const height = this.height * scale\n canvas.width = width\n canvas.height = height\n\n const gradient = ctx.createLinearGradient(0, 0, width, height)\n gradient.addColorStop(0, getRandomColor())\n gradient.addColorStop(0.15, getRandomColor())\n gradient.addColorStop(0.3, getRandomColor())\n gradient.addColorStop(0.5, getRandomColor())\n gradient.addColorStop(0.65, getRandomColor())\n gradient.addColorStop(0.8, getRandomColor())\n gradient.addColorStop(1, getRandomColor())\n\n ctx.fillStyle = gradient\n ctx.fillRect(0, 0, width, height)\n\n return canvas.toDataURL()\n }\n}\n"]}
package/dist/stories/test-image-provider.stories.d.ts DELETED
@@ -1,33 +0,0 @@
1
- import '../src/ox-image-marker.js';
2
- import { TemplateResult } from 'lit';
3
- import { Shape } from '../src/types.js';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- imageUrl: {
9
- control: string;
10
- description: string;
11
- };
12
- shapes: {
13
- control: string;
14
- description: string;
15
- };
16
- currentShapeType: {
17
- control: string;
18
- options: string[];
19
- description: string;
20
- };
21
- };
22
- };
23
- export default _default;
24
- interface Story<T> {
25
- (args: T): TemplateResult;
26
- args?: Partial<T>;
27
- argTypes?: Record<string, unknown>;
28
- }
29
- interface ArgTypes {
30
- imageUrl: string;
31
- shapes: Shape[];
32
- }
33
- export declare const Regular: Story<ArgTypes>;
package/dist/stories/test-image-provider.stories.js DELETED
@@ -1,119 +0,0 @@
1
- import '../src/ox-image-marker.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'test-image-provider',
6
- component: 'test-image-provider',
7
- argTypes: {
8
- imageUrl: { control: 'text', description: 'Image URL to display in the marker.' },
9
- shapes: { control: 'object', description: 'List of shapes to display on the image.' },
10
- currentShapeType: {
11
- control: 'select',
12
- options: ['text', 'rectangle', 'circle', 'triangle', 'line', 'arrow'],
13
- description: 'The type of shape to draw on the image.'
14
- }
15
- }
16
- };
17
- const Template = ({ imageUrl, shapes = [] }) => html `
18
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
19
- <link href="/themes/light.css" rel="stylesheet" />
20
- <link href="/themes/dark.css" rel="stylesheet" />
21
- <link href="/themes/spacing.css" rel="stylesheet" />
22
- <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
23
-
24
- <link
25
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
26
- rel="stylesheet"
27
- />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
- <link
33
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
34
- rel="stylesheet"
35
- />
36
-
37
- <style>
38
- ${MDTypeScaleStyles.cssText}
39
- </style>
40
-
41
- <style>
42
- html,
43
- body {
44
- margin: 0;
45
- padding: 0;
46
- overflow: hidden;
47
-
48
- overscroll-behavior-y: none;
49
-
50
- /* This is a font-stack that tries to use the system-default sans-serifs first */
51
- font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
52
- line-height: 1.5;
53
- -webkit-font-smoothing: antialiased;
54
-
55
- accent-color: var(--md-sys-color-primary);
56
- }
57
-
58
- body {
59
- width: 100%;
60
- height: 800px;
61
- text-align: center;
62
-
63
- background-color: var(--md-sys-color-background);
64
- color: var(--md-sys-color-on-background);
65
- }
66
-
67
- ox-image-marker {
68
- height: 650px;
69
- box-sizing: border-box;
70
- background-color: var(--md-sys-color-primary-container);
71
- color: var(--md-sys-color-on-primary-container);
72
- }
73
- </style>
74
-
75
- <script type="module">
76
- import { TestImageProvider } from '../dist/stories/test-image-provider.js'
77
- const imageMarker = document.body.querySelector('ox-image-marker')
78
-
79
- imageMarker.setImageProvider(new TestImageProvider(1080, 720))
80
- document.body.querySelector('[button1]').addEventListener('click', e => {
81
- imageMarker.setImageProvider(new TestImageProvider(1600, 400))
82
- })
83
- document.body.querySelector('[button2]').addEventListener('click', e => {
84
- imageMarker.setImageProvider(new TestImageProvider(800, 600))
85
- })
86
- </script>
87
-
88
- <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>
89
- <div buttons>
90
- <button button1>1600 x 400</button>
91
- <button button2>800 x 600</button>
92
- </div>
93
- `;
94
- export const Regular = Template.bind({});
95
- Regular.args = {
96
- imageUrl: 'https://via.placeholder.com/800x600',
97
- shapes: [
98
- {
99
- id: '1',
100
- type: 'rectangle',
101
- x: 100,
102
- y: 100,
103
- width: 200,
104
- height: 150,
105
- selected: true,
106
- text: 'Rectangle 1'
107
- },
108
- {
109
- id: '2',
110
- type: 'circle',
111
- cx: 300,
112
- cy: 300,
113
- r: 50,
114
- selected: false,
115
- text: 'Circle 1'
116
- }
117
- ]
118
- };
119
- //# sourceMappingURL=test-image-provider.stories.js.map
package/dist/stories/test-image-provider.stories.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"test-image-provider.stories.js","sourceRoot":"","sources":["../../stories/test-image-provider.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,qCAAqC,EAAE;QACjF,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,yCAAyC,EAAE;QACrF,gBAAgB,EAAE;YAChB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;YACrE,WAAW,EAAE,yCAAyC;SACvD;KACF;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBzE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAkDA,QAAQ,YAAY,MAAM;;;;;CAKxD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,qCAAqC;IAC/C,MAAM,EAAE;QACN;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,WAAW;YACjB,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,aAAa;SACpB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,CAAC,EAAE,EAAE;YACL,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,UAAU;SACjB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-image-marker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { Shape } from '../src/types.js'\n\nexport default {\n title: 'test-image-provider',\n component: 'test-image-provider',\n argTypes: {\n imageUrl: { control: 'text', description: 'Image URL to display in the marker.' },\n shapes: { control: 'object', description: 'List of shapes to display on the image.' },\n currentShapeType: {\n control: 'select',\n options: ['text', 'rectangle', 'circle', 'triangle', 'line', 'arrow'],\n description: 'The type of shape to draw on the image.'\n }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n imageUrl: string\n shapes: Shape[]\n}\n\nconst Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n html,\n body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n overscroll-behavior-y: none;\n\n /* This is a font-stack that tries to use the system-default sans-serifs first */\n font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n\n accent-color: var(--md-sys-color-primary);\n }\n\n body {\n width: 100%;\n height: 800px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n ox-image-marker {\n height: 650px;\n box-sizing: border-box;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script type=\"module\">\n import { TestImageProvider } from '../dist/stories/test-image-provider.js'\n const imageMarker = document.body.querySelector('ox-image-marker')\n\n imageMarker.setImageProvider(new TestImageProvider(1080, 720))\n document.body.querySelector('[button1]').addEventListener('click', e => {\n imageMarker.setImageProvider(new TestImageProvider(1600, 400))\n })\n document.body.querySelector('[button2]').addEventListener('click', e => {\n imageMarker.setImageProvider(new TestImageProvider(800, 600))\n })\n </script>\n\n <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>\n <div buttons>\n <button button1>1600 x 400</button>\n <button button2>800 x 600</button>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n imageUrl: 'https://via.placeholder.com/800x600',\n shapes: [\n {\n id: '1',\n type: 'rectangle',\n x: 100,\n y: 100,\n width: 200,\n height: 150,\n selected: true,\n text: 'Rectangle 1'\n },\n {\n id: '2',\n type: 'circle',\n cx: 300,\n cy: 300,\n r: 50,\n selected: false,\n text: 'Circle 1'\n }\n ]\n}\n"]}