@operato/image-marker 8.0.0-alpha.33 → 8.0.0-alpha.38

package/src/base-image-marker.ts

@@ -1,7 +1,15 @@
-import { LitElement, css, html, svg, nothing } from 'lit'
+import { LitElement, css, html, svg, nothing, PropertyValues } from 'lit'
 import { property, state, query } from 'lit/decorators.js'
+import { debounce } from 'lodash-es'
 
-import { Shape } from './types'
+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 = [
@@ -22,6 +30,11 @@ export class BaseImageMarker extends LitElement {
         cursor: pointer;
         width: 100%;
         height: 100%;
+        touch-action: none;
+      }
+
+      .link:hover {
+        cursor: pointer;
       }
     `
   ]
@@ -29,217 +42,174 @@ export class BaseImageMarker extends LitElement {
   @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 isPanning = false
-  protected panStart = { x: 0, y: 0 }
-  protected panInitiated = false
-  protected panThreshold = 20
 
-  protected initialViewBox = '0 0 800 600'
-  private initialPinchDistance: number | null = null
-  private initialZoomLevel: number = 1
-  private lastTouchEnd: number = 0
+  protected initialViewBox: string | null = null
 
   @query('svg') protected svg!: SVGSVGElement
+  @query('image') protected image!: SVGImageElement
 
-  protected onImageLoad(event: Event) {
-    const img = new Image()
-    img.onload = () => {
-      const width = img.naturalWidth
-      const height = img.naturalHeight
-      this.viewBox = `0 0 ${width} ${height}`
-      this.initialViewBox = `0 0 ${width} ${height}`
-    }
-    img.src = this.imageUrl
-  }
-
-  protected onSvgWheel(event: WheelEvent) {
-    event.preventDefault()
+  private gestureHelper: GestureHelper | null = null
 
-    const { offsetX, offsetY, deltaY } = event
-    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor
-    if (Math.abs(scale - 1) > 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
+  connectedCallback(): void {
+    super.connectedCallback()
+    requestAnimationFrame(() => {
+      this.gestureHelper = new GestureHelper(this.svg)
+    })
+  }
 
-      const newVbWidth = vbWidth / scale
-      const newVbHeight = vbHeight / scale
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
 
-      const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth
-      const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight
+    this.gestureHelper?.dispose()
+    this.gestureHelper = null
+  }
 
-      this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`
+  protected updated(changes: PropertyValues): void {
+    if (changes.has('imageUrl') || changes.has('imageProvider')) {
+      this.initialViewBox = null
+      this.updateImage()
     }
   }
 
-  protected onSvgMouseDown(event: MouseEvent) {
-    event.preventDefault()
-
-    this.startPanning(event)
-
-    this.svg.addEventListener('mousemove', this.onPanMouseMove)
-    this.svg.addEventListener('mouseup', this.onPanMouseUp)
+  public setImageProvider(provider: ImageProvider) {
+    this.imageProvider = provider
   }
 
-  protected isDoubleTouch(event: TouchEvent) {
-    const currentTime = new Date().getTime()
-    const tapLength = currentTime - this.lastTouchEnd
-
-    const result = tapLength < 300 && event.touches.length == 1
-    this.lastTouchEnd = currentTime
+  protected onImageLoad(event: Event) {
+    const element = event.target as SVGImageElement
+    const img = new Image()
 
-    return result
-  }
+    img.onload = () => {
+      const width = img.naturalWidth
+      const height = img.naturalHeight
 
-  protected onSvgTouchStart = (event: TouchEvent) => {
-    event.preventDefault()
+      if (!this.initialViewBox) {
+        this.initialViewBox = `0 0 ${width} ${height}`
+        this.viewBox = this.initialViewBox
 
-    if (this.isDoubleTouch(event)) {
-      this.resetZoom()
-    }
+        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
 
-    if (event.touches.length === 1) {
-      this.startPanning(event)
-    } else if (event.touches.length === 2) {
-      this.startPinchZooming(event)
+        element.setAttribute('width', (width * scale).toString())
+        element.setAttribute('height', (height * scale).toString())
+      }
     }
-  }
-
-  protected startPinchZooming(event: TouchEvent) {
-    const touch1 = event.touches[0]
-    const touch2 = event.touches[1]
-
-    const dx = touch2.clientX - touch1.clientX
-    const dy = touch2.clientY - touch1.clientY
 
-    this.initialPinchDistance = Math.sqrt(dx * dx + dy * dy)
-    this.initialZoomLevel = this.zoomLevel
-
-    this.svg.addEventListener('touchmove', this.onZoomTouchMove)
-    this.svg.addEventListener('touchend', this.onZoomTouchEnd)
+    img.src = this.currentImage!
   }
 
-  protected onZoomTouchMove = (event: TouchEvent) => {
-    event.preventDefault()
-
-    if (event.touches.length === 2 && this.initialPinchDistance) {
-      const touch1 = event.touches[0]
-      const touch2 = event.touches[1]
-      const dx = touch2.clientX - touch1.clientX
-      const dy = touch2.clientY - touch1.clientY
-      const currentPinchDistance = Math.sqrt(dx * dx + dy * dy)
-
-      const scaleFactor = currentPinchDistance / this.initialPinchDistance
-
-      // 줌 threshold 확인 후 줌 적용
-      if (Math.abs(scaleFactor - 1) > this.zoomThreshold) {
-        this.zoomLevel = this.initialZoomLevel * scaleFactor
-        this.applyZoom()
-      }
+  protected async updateImage() {
+    if (!this.imageProvider) {
+      throw new Error('ImageProvider is not set')
     }
-  }
 
-  protected onZoomTouchEnd = (event: TouchEvent) => {
-    event.preventDefault()
+    if (!this.imageUrl) {
+      return
+    }
 
-    if (event.touches.length < 2) {
-      this.initialPinchDistance = null
+    const options = {
+      id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용
+      scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용
+      offsetX: 0, // offsetX는 0으로 설정
+      offsetY: 0, // offsetY는 0으로 설정
+      currentImage: this.currentImage // 기존 이미지 객체 전달
     }
 
-    this.svg.removeEventListener('touchmove', this.onZoomTouchMove)
-    this.svg.removeEventListener('touchend', this.onZoomTouchEnd)
+    this.currentImage = await this.imageProvider.getImage(options)
   }
 
-  protected applyZoom() {
-    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
-    const initialViewBoxNumbers = this.initialViewBox.split(' ').map(Number)
-    const newVbWidth = initialViewBoxNumbers[2] / this.zoomLevel
-    const newVbHeight = initialViewBoxNumbers[3] / this.zoomLevel
-    const newVbX = vbX + (vbWidth - newVbWidth) / 2
-    const newVbY = vbY + (vbHeight - newVbHeight) / 2
+  protected onSvgWheel(event: WheelEvent) {
+    event.preventDefault()
 
-    this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`
-  }
+    const { offsetX, offsetY, deltaY } = event
+    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor
 
-  protected onSvgDoubleClick() {
-    this.resetZoom()
+    this.zoom(scale, offsetX, offsetY)
   }
 
-  protected resetZoom() {
-    this.viewBox = this.initialViewBox
-    this.zoomLevel = 1
-  }
+  protected onSvgPinch(e: GestureEventPinch) {
+    e.stopPropagation()
 
-  protected startPanning(event: MouseEvent | TouchEvent) {
-    const { x, y } = this.getPointFromEvent(event)
+    const { scale, centerX, centerY } = e.detail
 
-    this.isPanning = true
-    this.panStart = { x, y }
-    this.panInitiated = false // 팬 동작이 아직 시작되지 않았음을 나타냄
-    this.svg.classList.add('dragging')
+    console.log('pinch', e.detail)
 
-    if ('touches' in event) {
-      this.svg.addEventListener('touchmove', this.onPanMouseMove)
-      this.svg.addEventListener('touchend', this.onPanMouseUp)
-    } else {
-      this.svg.addEventListener('mousemove', this.onPanMouseMove)
-      this.svg.addEventListener('mouseup', this.onPanMouseUp)
-    }
+    this.zoom(scale, centerX, centerY)
   }
 
-  protected onPanMouseMove = (event: MouseEvent | TouchEvent) => {
-    if (!this.isPanning) {
-      return
-    }
-    event.preventDefault()
-
-    const { x, y } = this.getPointFromEvent(event)
+  protected onSvgDoubleTap(e: GestureEventDoubleTap) {
+    e.stopPropagation()
 
-    const dx = x - this.panStart.x
-    const dy = y - this.panStart.y
-
-    if (!this.panInitiated && Math.sqrt(dx * dx + dy * dy) < this.panThreshold) {
-      return
-    }
+    this.reset()
+  }
 
-    this.panInitiated = true
+  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 - dx * scale
-    const newVbY = vbY - dy * scale
+    const newVbX = vbX - deltaX * scale
+    const newVbY = vbY - deltaY * scale
 
     this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`
-    this.panStart = { x, y }
+
+    this.debouncedUpdateImage()
   }
 
-  protected onPanMouseUp = (event: MouseEvent | TouchEvent) => {
-    event.preventDefault()
+  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 svg = this.svg
+      const newVbWidth = vbWidth / scale
+      const newVbHeight = vbHeight / scale
 
-    this.isPanning = false
-    svg.classList.remove('dragging')
+      const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth
+      const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight
 
-    if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onPanMouseMove)
-      svg.removeEventListener('touchend', this.onPanMouseUp)
-    } else {
-      svg.removeEventListener('mousemove', this.onPanMouseMove)
-      svg.removeEventListener('mouseup', this.onPanMouseUp)
+      this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`
+
+      this.debouncedUpdateImage()
     }
   }
 
+  protected reset() {
+    this.viewBox = this.initialViewBox!
+    this.zoomLevel = 1
+
+    this.debouncedUpdateImage()
+  }
+
+  protected handleLinkClick(shape: Shape) {
+    this.dispatchEvent(
+      new CustomEvent('link-clicked', {
+        detail: { shapeId: shape.id, link: shape.link },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   protected renderShape(shape: Shape) {
     const commonAttrs = {
       stroke: 'red',
@@ -264,21 +234,28 @@ export class BaseImageMarker extends LitElement {
             </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="${commonAttrs['stroke-width']}" 
+            fill="${commonAttrs.fill}" fill-opacity="0.5" @click="${() => this.handleLinkClick(shape)}">
+          </rect>`
       default:
         return nothing
     }
   }
 
-  protected getPointFromEvent(event: MouseEvent | TouchEvent) {
-    if ('touches' in event) {
+  protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag) {
+    if ('clientX' in event) {
       return {
-        x: event.touches[0].clientX,
-        y: event.touches[0].clientY
+        x: event.clientX,
+        y: event.clientY
       }
     } else {
+      const { clientX, clientY } = event.detail
       return {
-        x: event.clientX,
-        y: event.clientY
+        x: clientX,
+        y: clientY
       }
     }
   }

package/src/default-image-provider.ts

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

package/src/index.ts

@@ -0,0 +1,6 @@
+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-view.ts

@@ -10,12 +10,12 @@ export class OxImageMarkerView extends BaseImageMarker {
       <div class="container">
         <svg
           @wheel=${this.onSvgWheel}
-          @mousedown=${this.onSvgMouseDown}
-          @touchstart=${this.onSvgTouchStart}
-          @dblclick=${this.onSvgDoubleClick}
+          @doubletap=${this.onSvgDoubleTap}
+          @pinch=${this.onSvgPinch}
+          @drag=${this.onSvgDrag}
           viewBox=${this.viewBox}
         >
-          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
+          <image href=${this.currentImage} @load=${this.onImageLoad}></image>
           ${this.shapes.map(shape => this.renderShape(shape))}
         </svg>
       </div>