@operato/image-marker 8.0.0-beta.0 → 8.0.0-beta.1

package/src/types.ts

@@ -1,34 +0,0 @@
-export type ShapeType = 'text' | 'rectangle' | 'circle' | 'triangle' | 'line' | 'arrow' | 'link'
-export type ImageMarkerMode = 'edit' | 'view' | 'shape'
-export interface Shape {
-  id: string
-  type: ShapeType
-  x?: number
-  y?: number
-  width?: number
-  height?: number
-  cx?: number
-  cy?: number
-  r?: number
-  points?: string
-  x1?: number
-  y1?: number
-  x2?: number
-  y2?: number
-  selected?: boolean
-  text?: string
-  link?: string
-  opacity?: number
-}
-
-export interface ImageOptions {
-  id: string
-  scale: number
-  offsetX: number
-  offsetY: number
-  currentImage?: string // 기존 이미지 객체
-}
-
-export interface ImageProvider {
-  getImage(options: ImageOptions): Promise<string>
-}

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

@@ -1,41 +0,0 @@
-import '../src/ox-image-marker-mode.js'
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-image-marker-mode',
-  component: 'ox-image-marker-mode',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const Template: Story<ArgTypes> = ({}: ArgTypes) => 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: CustomEvent) => console.log(e.detail)}></ox-image-marker-mode>
-`
-
-export const Default = Template.bind({})
-Default.args = {}

package/stories/ox-image-marker-view.stories.ts

@@ -1,134 +0,0 @@
-import '../src/ox-image-marker-view.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { Shape, ShapeType } from '../src/types.js'
-
-export default {
-  title: 'ox-image-marker-view',
-  component: 'ox-image-marker-view',
-  argTypes: {
-    imageUrl: { control: 'text' },
-    shapes: { control: 'object' }
-  }
-}
-
-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
-  }>
-}
-
-const Template: Story<ArgTypes> = ({ imageUrl, shapes }: ArgTypes) => 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'
-    }
-  ]
-}

package/stories/ox-image-marker.stories.ts

@@ -1,118 +0,0 @@
-import '../src/ox-image-marker.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { Shape } from '../src/types.js'
-
-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.'
-    }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  imageUrl: string
-  shapes: Shape[]
-}
-
-const Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => 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'
-    }
-  ]
-}

package/stories/test-image-provider.stories.ts

@@ -1,135 +0,0 @@
-import '../src/ox-image-marker.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { Shape } from '../src/types.js'
-
-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.'
-    }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  imageUrl: string
-  shapes: Shape[]
-}
-
-const Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => 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'
-    }
-  ]
-}

package/stories/test-image-provider.ts

@@ -1,51 +0,0 @@
-import { ImageOptions, ImageProvider } from '../src/types'
-
-export class TestImageProvider implements ImageProvider {
-  private width: number = 0
-  private height: number = 0
-
-  constructor(width: number, height: number) {
-    this.width = width
-    this.height = height
-  }
-
-  async getImage(options: ImageOptions): Promise<string> {
-    // 무작위 색상 생성 함수
-    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()
-  }
-}

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});