@operato/image-marker 9.0.0-beta.5 → 9.0.0-beta.68

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/image-marker",
   "description": "Webcomponents for image-marker chart following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.68",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -50,12 +50,12 @@
     }
   },
   "dependencies": {
-    "@operato/i18n": "^9.0.0-beta.5",
-    "@operato/styles": "^9.0.0-beta.4",
-    "@operato/utils": "^9.0.0-beta.4",
+    "@operato/i18n": "^9.0.0-beta.37",
+    "@operato/styles": "^9.0.0-beta.47",
+    "@operato/utils": "^9.0.0-beta.38",
     "d3": "^7.8.5",
     "d3-time-format": "^4.1.0",
-    "i18next": "^23.11.5",
+    "i18next": "^24.2.1",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
     "pdfjs": "^2.5.3"
@@ -94,5 +94,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d1b2da3d89cfb76336bfe4a596f6e77e0c93d2fd"
+  "gitHead": "fde7b9bb442cb9dc7d344930b41f4b0f971d06e8"
 }

package/dist/stories/ox-image-marker-mode.stories.d.ts

@@ -1,16 +0,0 @@
-import '../src/ox-image-marker-mode.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {};
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-}
-export declare const Default: Story<ArgTypes>;

package/dist/stories/ox-image-marker-mode.stories.js

@@ -1,31 +0,0 @@
-import '../src/ox-image-marker-mode.js';
-import { html } from 'lit';
-export default {
-    title: 'ox-image-marker-mode',
-    component: 'ox-image-marker-mode',
-    argTypes: {}
-};
-const Template = ({}) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <ox-image-marker-mode @mode-changed=${(e) => console.log(e.detail)}></ox-image-marker-mode>
-`;
-export const Default = Template.bind({});
-Default.args = {};
-//# sourceMappingURL=ox-image-marker-mode.stories.js.map

package/dist/stories/ox-image-marker-mode.stories.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,41 +0,0 @@
-import '../src/ox-image-marker-view.js';
-import { TemplateResult } from 'lit';
-import { ShapeType } from '../src/types.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        imageUrl: {
-            control: string;
-        };
-        shapes: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    imageUrl: string;
-    shapes: Array<{
-        id: string;
-        type: ShapeType;
-        x?: number;
-        y?: number;
-        width?: number;
-        height?: number;
-        cx?: number;
-        cy?: number;
-        r?: number;
-        x1?: number;
-        y1?: number;
-        x2?: number;
-        y2?: number;
-        text?: string;
-    }>;
-}
-export declare const ViewOnly: Story<ArgTypes>;

package/dist/stories/ox-image-marker-view.stories.js

@@ -1,103 +0,0 @@
-import '../src/ox-image-marker-view.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
-export default {
-    title: 'ox-image-marker-view',
-    component: 'ox-image-marker-view',
-    argTypes: {
-        imageUrl: { control: 'text' },
-        shapes: { control: 'object' }
-    }
-};
-const Template = ({ imageUrl, shapes }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 800px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    ox-image-marker-view {
-      height: 650px;
-      box-sizing: border-box;
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <ox-image-marker-view .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker-view>
-`;
-export const ViewOnly = Template.bind({});
-ViewOnly.args = {
-    imageUrl: 'https://via.placeholder.com/800x600',
-    shapes: [
-        {
-            id: '1',
-            type: 'rectangle',
-            x: 100,
-            y: 100,
-            width: 200,
-            height: 150,
-            text: 'Rectangle 1'
-        },
-        {
-            id: '2',
-            type: 'circle',
-            cx: 300,
-            cy: 300,
-            r: 50,
-            text: 'Circle 1'
-        },
-        {
-            id: '3',
-            type: 'line',
-            x1: 400,
-            y1: 400,
-            x2: 500,
-            y2: 500,
-            text: 'Line 1'
-        },
-        {
-            id: '4',
-            type: 'arrow',
-            x1: 600,
-            y1: 100,
-            x2: 700,
-            y2: 200,
-            text: 'Arrow 1'
-        },
-        {
-            id: '5',
-            type: 'text',
-            x: 600,
-            y: 300,
-            text: 'Text 1'
-        }
-    ]
-};
-//# sourceMappingURL=ox-image-marker-view.stories.js.map

package/dist/stories/ox-image-marker-view.stories.js.map

@@ -1 +0,0 @@
-{"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,8CAA8C,CAAA;AAI1F,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'\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

@@ -1,33 +0,0 @@
-import '../src/ox-image-marker.js';
-import { TemplateResult } from 'lit';
-import { Shape } from '../src/types.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        imageUrl: {
-            control: string;
-            description: string;
-        };
-        shapes: {
-            control: string;
-            description: string;
-        };
-        currentShapeType: {
-            control: string;
-            options: string[];
-            description: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    imageUrl: string;
-    shapes: Shape[];
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-image-marker.stories.js

@@ -1,102 +0,0 @@
-import '../src/ox-image-marker.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
-export default {
-    title: 'ox-image-marker',
-    component: 'ox-image-marker',
-    argTypes: {
-        imageUrl: { control: 'text', description: 'Image URL to display in the marker.' },
-        shapes: { control: 'object', description: 'List of shapes to display on the image.' },
-        currentShapeType: {
-            control: 'select',
-            options: ['text', 'rectangle', 'circle', 'triangle', 'line', 'arrow'],
-            description: 'The type of shape to draw on the image.'
-        }
-    }
-};
-const Template = ({ imageUrl, shapes = [] }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-
-      overscroll-behavior-y: none;
-
-      /* This is a font-stack that tries to use the system-default sans-serifs first */
-      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-      line-height: 1.5;
-      -webkit-font-smoothing: antialiased;
-
-      accent-color: var(--md-sys-color-primary);
-    }
-
-    body {
-      width: 100%;
-      height: 800px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    ox-image-marker {
-      height: 650px;
-      box-sizing: border-box;
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    imageUrl: 'https://via.placeholder.com/800x600',
-    shapes: [
-        {
-            id: '1',
-            type: 'rectangle',
-            x: 100,
-            y: 100,
-            width: 200,
-            height: 150,
-            selected: true,
-            text: 'Rectangle 1'
-        },
-        {
-            id: '2',
-            type: 'circle',
-            cx: 300,
-            cy: 300,
-            r: 50,
-            selected: false,
-            text: 'Circle 1'
-        }
-    ]
-};
-//# sourceMappingURL=ox-image-marker.stories.js.map

package/dist/stories/ox-image-marker.stories.js.map

@@ -1 +0,0 @@
-{"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,8CAA8C,CAAA;AAI1F,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'\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

@@ -1,7 +0,0 @@
-import { ImageOptions, ImageProvider } from '../src/types.js';
-export declare class TestImageProvider implements ImageProvider {
-    private width;
-    private height;
-    constructor(width: number, height: number);
-    getImage(options: ImageOptions): Promise<string>;
-}

package/dist/stories/test-image-provider.js

@@ -1,42 +0,0 @@
-export class TestImageProvider {
-    constructor(width, height) {
-        this.width = 0;
-        this.height = 0;
-        this.width = width;
-        this.height = height;
-    }
-    async getImage(options) {
-        // 무작위 색상 생성 함수
-        const getRandomColor = () => {
-            const letters = '0123456789ABCDEF';
-            let color = '#';
-            for (let i = 0; i < 6; i++) {
-                color += letters[Math.floor(Math.random() * 16)];
-            }
-            return color;
-        };
-        // 무작위 색상 그라데이션 이미지 생성
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            throw new Error('Failed to get canvas context');
-        }
-        const { scale } = options;
-        const width = this.width * scale;
-        const height = this.height * scale;
-        canvas.width = width;
-        canvas.height = height;
-        const gradient = ctx.createLinearGradient(0, 0, width, height);
-        gradient.addColorStop(0, getRandomColor());
-        gradient.addColorStop(0.15, getRandomColor());
-        gradient.addColorStop(0.3, getRandomColor());
-        gradient.addColorStop(0.5, getRandomColor());
-        gradient.addColorStop(0.65, getRandomColor());
-        gradient.addColorStop(0.8, getRandomColor());
-        gradient.addColorStop(1, getRandomColor());
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, width, height);
-        return canvas.toDataURL();
-    }
-}
-//# sourceMappingURL=test-image-provider.js.map

package/dist/stories/test-image-provider.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,33 +0,0 @@
-import '../src/ox-image-marker.js';
-import { TemplateResult } from 'lit';
-import { Shape } from '../src/types.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        imageUrl: {
-            control: string;
-            description: string;
-        };
-        shapes: {
-            control: string;
-            description: string;
-        };
-        currentShapeType: {
-            control: string;
-            options: string[];
-            description: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    imageUrl: string;
-    shapes: Shape[];
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/test-image-provider.stories.js

@@ -1,119 +0,0 @@
-import '../src/ox-image-marker.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
-export default {
-    title: 'test-image-provider',
-    component: 'test-image-provider',
-    argTypes: {
-        imageUrl: { control: 'text', description: 'Image URL to display in the marker.' },
-        shapes: { control: 'object', description: 'List of shapes to display on the image.' },
-        currentShapeType: {
-            control: 'select',
-            options: ['text', 'rectangle', 'circle', 'triangle', 'line', 'arrow'],
-            description: 'The type of shape to draw on the image.'
-        }
-    }
-};
-const Template = ({ imageUrl, shapes = [] }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-
-      overscroll-behavior-y: none;
-
-      /* This is a font-stack that tries to use the system-default sans-serifs first */
-      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-      line-height: 1.5;
-      -webkit-font-smoothing: antialiased;
-
-      accent-color: var(--md-sys-color-primary);
-    }
-
-    body {
-      width: 100%;
-      height: 800px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    ox-image-marker {
-      height: 650px;
-      box-sizing: border-box;
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <script type="module">
-    import { TestImageProvider } from '../dist/stories/test-image-provider.js'
-    const imageMarker = document.body.querySelector('ox-image-marker')
-
-    imageMarker.setImageProvider(new TestImageProvider(1080, 720))
-    document.body.querySelector('[button1]').addEventListener('click', e => {
-      imageMarker.setImageProvider(new TestImageProvider(1600, 400))
-    })
-    document.body.querySelector('[button2]').addEventListener('click', e => {
-      imageMarker.setImageProvider(new TestImageProvider(800, 600))
-    })
-  </script>
-
-  <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>
-  <div buttons>
-    <button button1>1600 x 400</button>
-    <button button2>800 x 600</button>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    imageUrl: 'https://via.placeholder.com/800x600',
-    shapes: [
-        {
-            id: '1',
-            type: 'rectangle',
-            x: 100,
-            y: 100,
-            width: 200,
-            height: 150,
-            selected: true,
-            text: 'Rectangle 1'
-        },
-        {
-            id: '2',
-            type: 'circle',
-            cx: 300,
-            cy: 300,
-            r: 50,
-            selected: false,
-            text: 'Circle 1'
-        }
-    ]
-};
-//# sourceMappingURL=test-image-provider.stories.js.map

package/dist/stories/test-image-provider.stories.js.map

@@ -1 +0,0 @@
-{"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,8CAA8C,CAAA;AAI1F,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'\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"]}