@operato/image-marker 9.0.0-beta.4 → 9.0.0-beta.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +135 -0
- package/dist/src/base-image-marker.d.ts +1 -1
- package/dist/src/base-image-marker.js +1 -1
- package/dist/src/base-image-marker.js.map +1 -1
- package/dist/src/default-image-provider.d.ts +1 -1
- package/dist/src/default-image-provider.js.map +1 -1
- package/dist/src/ox-image-marker-mode.d.ts +1 -1
- package/dist/src/ox-image-marker-mode.js.map +1 -1
- package/dist/src/ox-image-marker.d.ts +4 -4
- package/dist/src/ox-image-marker.js +2 -2
- package/dist/src/ox-image-marker.js.map +1 -1
- package/dist/stories/ox-image-marker-view.stories.js +1 -1
- package/dist/stories/ox-image-marker-view.stories.js.map +1 -1
- package/dist/stories/ox-image-marker.stories.js +1 -1
- package/dist/stories/ox-image-marker.stories.js.map +1 -1
- package/dist/stories/test-image-provider.d.ts +1 -1
- package/dist/stories/test-image-provider.js.map +1 -1
- package/dist/stories/test-image-provider.stories.js +1 -1
- package/dist/stories/test-image-provider.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../src/ox-image-marker.js';
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
3
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
|
4
4
|
export default {
|
|
5
5
|
title: 'ox-image-marker',
|
|
6
6
|
component: 'ox-image-marker',
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
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'\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"]}
|
|
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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../src/ox-image-marker.js';
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
3
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
|
4
4
|
export default {
|
|
5
5
|
title: 'test-image-provider',
|
|
6
6
|
component: 'test-image-provider',
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"]}
|