@operato/image-marker 8.0.0-alpha.50 → 8.0.0-beta.1

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": "8.0.0-alpha.50",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -50,9 +50,9 @@
     }
   },
   "dependencies": {
-    "@operato/i18n": "^8.0.0-alpha.37",
-    "@operato/styles": "^8.0.0-alpha.50",
-    "@operato/utils": "^8.0.0-alpha.37",
+    "@operato/i18n": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "d3": "^7.8.5",
     "d3-time-format": "^4.1.0",
     "i18next": "^23.11.5",
@@ -94,5 +94,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "4a218d16762f21bec5de8d2551cf18073e6703ff"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
-}

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook'
-import baseConfig from '../web-dev-server.config.mjs'
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
-})

package/src/base-image-marker.ts

@@ -1,268 +0,0 @@
-import { LitElement, css, html, svg, nothing, PropertyValues } from 'lit'
-import { property, state, query } from 'lit/decorators.js'
-import { debounce } from 'lodash-es'
-
-import {
-  GestureEventDoubleTap,
-  GestureEventDrag,
-  GestureEventPinch,
-  GestureHelper
-} from '@operato/utils/gesture-helper.js'
-import { ImageProvider, Shape } from './types'
-import { DefaultImageProvider } from './default-image-provider'
-
-export class BaseImageMarker extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-      }
-
-      .container {
-        flex: 1;
-        position: relative;
-      }
-
-      svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        cursor: pointer;
-        width: 100%;
-        height: 100%;
-        touch-action: none;
-      }
-
-      .link:hover {
-        cursor: pointer;
-      }
-    `
-  ]
-
-  @property({ type: String }) imageUrl: string = ''
-  @property({ type: Array }) shapes: Shape[] = []
-
-  @state() protected currentImage?: string
-  @state() protected viewBox = '0 0 800 600'
-  @state() protected zoomLevel = 1
-  @state() private imageProvider?: ImageProvider = new DefaultImageProvider()
-
-  protected debouncedUpdateImage = debounce(this.updateImage.bind(this), 300)
-  protected zoomFactor = 0.1
-  protected zoomThreshold = 0.05
-
-  protected initialViewBox: string | null = null
-
-  @query('svg') protected svg!: SVGSVGElement
-  @query('image') protected image!: SVGImageElement
-
-  private gestureHelper: GestureHelper | null = null
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    requestAnimationFrame(() => {
-      this.gestureHelper = new GestureHelper(this.svg)
-    })
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this.gestureHelper?.dispose()
-    this.gestureHelper = null
-  }
-
-  protected updated(changes: PropertyValues): void {
-    if (changes.has('imageUrl') || changes.has('imageProvider')) {
-      this.zoomLevel = 1
-      this.initialViewBox = null
-      this.updateImage()
-    }
-  }
-
-  public setImageProvider(provider: ImageProvider) {
-    this.imageProvider = provider
-  }
-
-  protected onImageLoad(event: Event) {
-    const element = event.target as SVGImageElement
-    const img = new Image()
-
-    img.onload = () => {
-      const width = img.naturalWidth
-      const height = img.naturalHeight
-
-      if (!this.initialViewBox) {
-        this.initialViewBox = `0 0 ${width} ${height}`
-        this.viewBox = this.initialViewBox
-
-        element.setAttribute('width', width.toString())
-        element.setAttribute('height', height.toString())
-        element.setAttribute('preserveAspectRatio', 'xMidYMid meet')
-      } else {
-        const [initialX, initialY, initialWidth, initialHeight] = this.initialViewBox.split(' ').map(Number)
-        const scale = initialWidth / width
-
-        element.setAttribute('width', (width * scale).toString())
-        element.setAttribute('height', (height * scale).toString())
-      }
-    }
-
-    img.src = this.currentImage!
-  }
-
-  protected async updateImage() {
-    if (!this.imageProvider) {
-      throw new Error('ImageProvider is not set')
-    }
-
-    if (!this.imageUrl) {
-      return
-    }
-
-    const options = {
-      id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용
-      scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용
-      offsetX: 0, // offsetX는 0으로 설정
-      offsetY: 0, // offsetY는 0으로 설정
-      currentImage: this.currentImage // 기존 이미지 객체 전달
-    }
-
-    this.currentImage = await this.imageProvider.getImage(options)
-  }
-
-  protected onSvgWheel(event: WheelEvent) {
-    event.preventDefault()
-
-    const { offsetX, offsetY, deltaY } = event
-    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor
-
-    this.zoom(scale, offsetX, offsetY)
-  }
-
-  protected onSvgPinch(e: GestureEventPinch) {
-    e.stopPropagation()
-
-    const { scale, centerX, centerY } = e.detail
-
-    console.log('pinch', e.detail)
-
-    this.zoom(scale, centerX, centerY)
-  }
-
-  protected onSvgDoubleTap(e: GestureEventDoubleTap) {
-    e.stopPropagation()
-
-    this.reset()
-  }
-
-  protected onSvgDrag(e: GestureEventDrag) {
-    const { deltaX, deltaY } = e.detail
-    console.log('drag', e.detail)
-
-    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
-
-    const scaleX = vbWidth / this.svg.clientWidth
-    const scaleY = vbHeight / this.svg.clientHeight
-    const scale = Math.max(scaleX, scaleY)
-
-    const newVbX = vbX - deltaX * scale
-    const newVbY = vbY - deltaY * scale
-
-    this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`
-
-    this.debouncedUpdateImage()
-  }
-
-  zoom(scale: number, offsetX: number, offsetY: number) {
-    if (Math.abs(scale) > this.zoomThreshold) {
-      this.zoomLevel *= scale
-
-      const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
-      const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth
-      const mouseY = vbY + (offsetY / this.svg.clientHeight) * vbHeight
-
-      const newVbWidth = vbWidth / scale
-      const newVbHeight = vbHeight / scale
-
-      const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth
-      const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight
-
-      this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`
-
-      this.debouncedUpdateImage()
-    }
-  }
-
-  public reset() {
-    if (!this.initialViewBox) {
-      this.zoomLevel = 1
-      return
-    }
-
-    this.viewBox = this.initialViewBox!
-    this.zoomLevel = 1
-
-    this.debouncedUpdateImage()
-  }
-
-  protected handleLinkClick(shape: Shape) {
-    this.dispatchEvent(
-      new CustomEvent('link-clicked', {
-        detail: { id: shape.id, link: shape.link },
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  protected renderShape(shape: Shape) {
-    const commonAttrs = {
-      stroke: 'red',
-      'stroke-width': 1,
-      fill: 'transparent'
-    }
-
-    switch (shape.type) {
-      case 'text':
-        return svg`<text x="${shape.x}" y="${shape.y}" text-anchor="middle" alignment-baseline="middle" fill="black">${shape.text}</text>`
-      case 'rectangle':
-        return svg`<rect x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}" stroke="${commonAttrs.stroke}" stroke-width="${commonAttrs['stroke-width']}" fill="${commonAttrs.fill}"></rect>`
-      case 'circle':
-        return svg`<circle cx="${shape.cx}" cy="${shape.cy}" r="${shape.r}" stroke="${commonAttrs.stroke}" stroke-width="${commonAttrs['stroke-width']}" fill="${commonAttrs.fill}"></circle>`
-      case 'line':
-        return svg`<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" stroke="${commonAttrs.stroke}" stroke-width="${commonAttrs['stroke-width']}"></line>`
-      case 'arrow':
-        return svg`
-          <defs>
-            <marker id="arrowhead-${shape.id}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
-              <polygon points="0 0, 10 3.5, 0 7" fill="${commonAttrs.stroke}"></polygon>
-            </marker>
-          </defs>
-          <line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" stroke="${commonAttrs.stroke}" stroke-width="${commonAttrs['stroke-width']}" marker-end="url(#arrowhead-${shape.id})"></line>`
-      case 'link':
-        return svg`
-          <rect class="link" x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}" 
-            stroke="${commonAttrs.stroke}" stroke-width="0" 
-            fill="${commonAttrs.stroke}" fill-opacity="0.3" @click="${() => this.handleLinkClick(shape)}">
-          </rect>`
-      default:
-        return nothing
-    }
-  }
-
-  protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag) {
-    if ('clientX' in event) {
-      return {
-        x: event.clientX,
-        y: event.clientY
-      }
-    } else {
-      const { clientX, clientY } = event.detail
-      return {
-        x: clientX,
-        y: clientY
-      }
-    }
-  }
-}

package/src/default-image-provider.ts

@@ -1,7 +0,0 @@
-import { ImageOptions, ImageProvider } from './types'
-
-export class DefaultImageProvider implements ImageProvider {
-  async getImage(options: ImageOptions): Promise<string> {
-    return options.id
-  }
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from './types.js'
-export * from './base-image-marker.js'
-
-export * from './ox-image-marker.js'
-export * from './ox-image-marker-view.js'
-export * from './ox-image-marker-mode.js'

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

@@ -1,158 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ImageMarkerMode, ShapeType } from './types'
-
-@customElement('ox-image-marker-mode')
-export class OxImageMarkerMode extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-medium);
-    }
-
-    .palette {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-small);
-      justify-content: center;
-      margin: var(--spacing-medium);
-
-      --md-icon-size: 16px;
-    }
-
-    .palette > * {
-      padding: var(--spacing-small);
-      cursor: pointer;
-      background-color: #f0f0f0;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      width: 12px;
-      height: 12px;
-    }
-
-    .palette [selected] {
-      background-color: #d0d0d0;
-    }
-  `
-
-  @property({ type: String }) currentMode: ImageMarkerMode = 'edit'
-  @property({ type: String }) currentShapeType?: ShapeType
-
-  render() {
-    return html`
-      <div class="palette">
-        <md-icon
-          title="Edit or View"
-          ?selected=${this.currentMode !== 'shape'}
-          @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}
-          >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon
-        >
-
-        <md-icon
-          title="Text"
-          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}
-          @click=${() => this.setShape('text')}
-          >match_case</md-icon
-        >
-
-        <md-icon
-          title="Rectangle"
-          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}
-          @click=${() => this.setShape('rectangle')}
-          >rectangle</md-icon
-        >
-
-        <md-icon
-          title="Circle"
-          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}
-          @click=${() => this.setShape('circle')}
-          >circle</md-icon
-        >
-
-        <md-icon
-          title="Triangle"
-          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}
-          @click=${() => this.setShape('triangle')}
-          >change_history</md-icon
-        >
-
-        <md-icon
-          title="Line"
-          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}
-          @click=${() => this.setShape('line')}
-          >shape_line</md-icon
-        >
-
-        <md-icon
-          title="Arrow"
-          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}
-          @click=${() => this.setShape('arrow')}
-          >line_end_arrow</md-icon
-        >
-      </div>
-
-      <div class="palette">
-        <md-icon title="Fit size" @click=${() => this.onClickFitSize()}>recenter</md-icon>
-      </div>
-
-      <div class="palette">
-        <md-icon title="Delete" @click=${() => this.onClickDelete()}>delete</md-icon>
-        <md-icon title="Save" @click=${() => this.onClickSave()}>save</md-icon>
-      </div>
-    `
-  }
-
-  public setMode(mode: ImageMarkerMode) {
-    this.currentMode = mode
-
-    this.dispatchEvent(
-      new CustomEvent('mode-changed', {
-        detail: { mode: this.currentMode, shapeType: this.currentShapeType },
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  protected setShape(shapeType: ShapeType) {
-    this.currentMode = 'shape'
-    this.currentShapeType = shapeType
-    this.dispatchEvent(
-      new CustomEvent('mode-changed', {
-        detail: { mode: 'shape', shapeType: this.currentShapeType },
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  private onClickDelete() {
-    this.dispatchEvent(
-      new CustomEvent('tap-delete', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  private onClickSave() {
-    this.dispatchEvent(
-      new CustomEvent('tap-save', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  private onClickFitSize() {
-    this.dispatchEvent(
-      new CustomEvent('tap-fit-size', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-}

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

@@ -1,24 +0,0 @@
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { BaseImageMarker } from './base-image-marker.js'
-
-@customElement('ox-image-marker-view')
-export class OxImageMarkerView extends BaseImageMarker {
-  render() {
-    return html`
-      <div class="container">
-        <svg
-          @wheel=${this.onSvgWheel}
-          @doubletap=${this.onSvgDoubleTap}
-          @pinch=${this.onSvgPinch}
-          @drag=${this.onSvgDrag}
-          viewBox=${this.viewBox}
-        >
-          <image href=${this.currentImage} @load=${this.onImageLoad}></image>
-          ${this.shapes.map(shape => this.renderShape(shape))}
-        </svg>
-      </div>
-    `
-  }
-}