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

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

@@ -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,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"]}
+{"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"]}