@operato/image-marker 9.0.0-beta.0 → 9.0.0-beta.11
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 +46 -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":"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"]}
|