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

package/src/ox-image-marker.ts

@@ -5,6 +5,8 @@ import { query, state, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { keyed } from 'lit/directives/keyed.js'
 
+import { GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-helper.js'
+
 import { ImageMarkerMode, Shape, ShapeType } from './types'
 import { BaseImageMarker } from './base-image-marker'
 import { OxImageMarkerMode } from './ox-image-marker-mode'
@@ -47,12 +49,13 @@ export class OxImageMarker extends BaseImageMarker {
 
   @query('ox-image-marker-mode') imageMarkerMode!: OxImageMarkerMode
 
-  private drawing = false
-  private startX = 0
-  private startY = 0
-  private offsetX = 0
-  private offsetY = 0
-  private shapeMoveThreshold = 10
+  // private drawingStarted: boolean = false
+  private drawing: boolean = false
+  private startX: number = 0
+  private startY: number = 0
+  private offsetX: number = 0
+  private offsetY: number = 0
+  private shapeMoveThreshold: number = 10
   private shapeMoveInitiated = false
 
   connectedCallback() {
@@ -72,14 +75,15 @@ export class OxImageMarker extends BaseImageMarker {
     return html`
       <div class="container">
         <svg
-          @mousedown=${this.onSvgMouseDown}
-          @touchstart=${this.onSvgTouchStart}
           @wheel=${this.onSvgWheel}
-          @dblclick=${this.onSvgDoubleClick}
+          @doubletap=${this.onSvgDoubleTap}
+          @pinch=${this.onSvgPinch}
+          @drag=${this.onSvgDrag}
+          @click=${this.onSvgClick}
           viewBox=${this.viewBox}
           ?drawing=${this.currentMode == 'shape'}
         >
-          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
+          <image href=${this.currentImage} @load=${this.onImageLoad}></image>
           ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
         </svg>
       </div>
@@ -91,7 +95,7 @@ export class OxImageMarker extends BaseImageMarker {
           const { mode, shapeType } = e.detail
           this.setMode(mode, shapeType)
         }}
-        @tap-fit-size=${() => this.resetZoom()}
+        @tap-fit-size=${() => this.reset()}
         @tap-delete=${() => this.deleteSelectedShape()}
         @tap-save=${() => {
           this.dispatchEvent(
@@ -106,42 +110,48 @@ export class OxImageMarker extends BaseImageMarker {
     `
   }
 
-  protected onSvgMouseDown(event: MouseEvent) {
-    event.preventDefault()
+  private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
+    if (mode == 'view') {
+      this.setSelectedShape(null)
+    }
 
-    this.setSelectedShape(null)
+    this.currentMode = mode
+    this.currentShapeType = shapeType
+  }
+
+  protected onSvgPinch(e: GestureEventPinch) {
+    e.stopPropagation()
+
+    const { scale, centerX, centerY } = e.detail
+
+    this.zoom(scale, centerX, centerY)
+  }
+
+  protected onSvgDrag(e: GestureEventDrag) {
+    const { deltaX, deltaY, end } = e.detail
 
     if (this.currentMode === 'shape') {
-      this.startDrawing(event)
+      this.drawShape(e)
     } else {
-      this.startPanning(event)
-    }
-  }
+      const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
 
-  protected onSvgTouchStart = (event: TouchEvent) => {
-    event.preventDefault()
+      const scaleX = vbWidth / this.svg.clientWidth
+      const scaleY = vbHeight / this.svg.clientHeight
+      const scale = Math.max(scaleX, scaleY)
 
-    if (this.isDoubleTouch(event)) {
-      this.resetZoom()
-    }
+      const newVbX = vbX - deltaX * scale
+      const newVbY = vbY - deltaY * scale
 
-    if (event.touches.length === 1) {
-      this.setSelectedShape(null)
+      this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`
 
-      if (this.currentMode === 'shape') {
-        this.startDrawing(event)
-      } else {
-        this.startPanning(event)
-      }
-    } else if (event.touches.length === 2) {
-      this.startPinchZooming(event)
+      this.debouncedUpdateImage()
     }
   }
 
-  private startDrawing(event: MouseEvent | TouchEvent) {
-    const { x, y } = this.getSvgPoint(event)
+  protected onSvgClick(e: MouseEvent) {
+    if (this.currentMode === 'shape' && this.currentShapeType === 'text') {
+      const { x, y } = this.getSvgPoint(e)
 
-    if (this.currentShapeType === 'text') {
       const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
       textElement.setAttribute('x', x.toString())
@@ -150,156 +160,126 @@ export class OxImageMarker extends BaseImageMarker {
 
       this.svg.appendChild(textElement)
 
-      requestAnimationFrame(() => {
-        this.showTextInput(textElement, null, { x, y })
-      })
-    } else {
-      this.startX = x
-      this.startY = y
-      this.drawing = true
-    }
+      /* 강제 지연은 iOS에서 input focus를 받지 못하는 현상이 있다. */
+      this.showTextInput(textElement, null, { x, y })
 
-    if ('touches' in event) {
-      this.svg.addEventListener('touchmove', this.onMouseMoveForDrawing)
-      this.svg.addEventListener('touchend', this.onMouseUpForDrawing)
-    } else {
-      this.svg.addEventListener('mousemove', this.onMouseMoveForDrawing)
-      this.svg.addEventListener('mouseup', this.onMouseUpForDrawing)
+      this.imageMarkerMode.setMode('edit')
     }
   }
 
-  private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
-    if (mode == 'view') {
-      this.setSelectedShape(null)
-    }
-
-    this.currentMode = mode
-    this.currentShapeType = shapeType
-  }
+  private drawShape(e: GestureEventDrag) {
+    const { end } = e.detail
+    const { x, y } = this.getSvgPoint(e)
 
-  private onMouseMoveForDrawing = (event: MouseEvent | TouchEvent) => {
     if (!this.drawing) {
-      return
-    }
+      this.startX = x
+      this.startY = y
+      this.setSelectedShape(null)
 
-    event.preventDefault()
+      this.drawing = true
+    } else if (this.drawing) {
+      const minDistance = 5
+      const distance = Math.sqrt(Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2))
 
-    const { x, y } = this.getSvgPoint(event)
+      if (!this.selectedShape && distance >= minDistance) {
+        let newShape: Shape
 
-    const minDistance = 5
-    const distance = Math.sqrt(Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2))
-
-    if (!this.selectedShape && distance >= minDistance) {
-      let newShape: Shape
-
-      switch (this.currentShapeType) {
-        case 'rectangle':
-          newShape = {
-            id: Date.now().toString(),
-            type: 'rectangle',
-            x: this.startX,
-            y: this.startY,
-            width: 0,
-            height: 0
-          }
-          break
-        case 'circle':
-          newShape = {
-            id: Date.now().toString(),
-            type: 'circle',
-            cx: this.startX,
-            cy: this.startY,
-            r: 0
-          }
-          break
-        case 'triangle':
-          newShape = {
-            id: Date.now().toString(),
-            type: 'triangle',
-            x1: this.startX,
-            y1: this.startY,
-            width: 0,
-            height: 0,
-            points: `${this.startX},${this.startY} ${this.startX},${this.startY} ${this.startX},${this.startY}`
-          }
-          break
-        case 'line':
-          newShape = {
-            id: Date.now().toString(),
-            type: 'line',
-            x1: this.startX,
-            y1: this.startY,
-            width: 0,
-            height: 0
-          }
-          break
-        case 'arrow':
-          newShape = {
-            id: Date.now().toString(),
-            type: 'arrow',
-            x1: this.startX,
-            y1: this.startY,
-            width: 0,
-            height: 0
-          }
-          break
-        default:
-          return
-      }
-
-      this.shapes = [...this.shapes, newShape]
-      this.setSelectedShape(newShape)
-    }
+        switch (this.currentShapeType) {
+          case 'rectangle':
+            newShape = {
+              id: Date.now().toString(),
+              type: 'rectangle',
+              x: this.startX,
+              y: this.startY,
+              width: 0,
+              height: 0
+            }
+            break
+          case 'circle':
+            newShape = {
+              id: Date.now().toString(),
+              type: 'circle',
+              cx: this.startX,
+              cy: this.startY,
+              r: 0
+            }
+            break
+          case 'triangle':
+            newShape = {
+              id: Date.now().toString(),
+              type: 'triangle',
+              x1: this.startX,
+              y1: this.startY,
+              width: 0,
+              height: 0,
+              points: `${this.startX},${this.startY} ${this.startX},${this.startY} ${this.startX},${this.startY}`
+            }
+            break
+          case 'line':
+            newShape = {
+              id: Date.now().toString(),
+              type: 'line',
+              x1: this.startX,
+              y1: this.startY,
+              width: 0,
+              height: 0
+            }
+            break
+          case 'arrow':
+            newShape = {
+              id: Date.now().toString(),
+              type: 'arrow',
+              x1: this.startX,
+              y1: this.startY,
+              width: 0,
+              height: 0
+            }
+            break
+          default:
+            return
+        }
 
-    if (this.selectedShape) {
-      switch (this.selectedShape.type) {
-        case 'rectangle':
-          this.selectedShape.x = Math.min(x, this.startX)
-          this.selectedShape.y = Math.min(y, this.startY)
-          this.selectedShape.width = Math.abs(x - this.startX)
-          this.selectedShape.height = Math.abs(y - this.startY)
-          break
-        case 'circle':
-          const dx = x - this.selectedShape.cx!
-          const dy = y - this.selectedShape.cy!
-          this.selectedShape.r = Math.sqrt(dx * dx + dy * dy)
-          break
-        case 'triangle':
-          const x2 = x
-          const y2 = y
-          const x3 = this.startX - (x - this.startX)
-          const y3 = y
-          this.selectedShape.points = `${this.startX},${this.startY} ${x2},${y2} ${x3},${y3}`
-          break
-        case 'line':
-        case 'arrow':
-          this.selectedShape.x2 = x
-          this.selectedShape.y2 = y
-          break
+        this.shapes = [...this.shapes, newShape]
+        this.setSelectedShape(newShape)
       }
 
-      this.requestUpdate()
-    }
-  }
-
-  private onMouseUpForDrawing = (event: MouseEvent | TouchEvent) => {
-    event.preventDefault()
+      if (this.selectedShape) {
+        switch (this.selectedShape.type) {
+          case 'rectangle':
+            this.selectedShape.x = Math.min(x, this.startX)
+            this.selectedShape.y = Math.min(y, this.startY)
+            this.selectedShape.width = Math.abs(x - this.startX)
+            this.selectedShape.height = Math.abs(y - this.startY)
+            break
+          case 'circle':
+            const dx = x - this.selectedShape.cx!
+            const dy = y - this.selectedShape.cy!
+            this.selectedShape.r = Math.sqrt(dx * dx + dy * dy)
+            break
+          case 'triangle':
+            const x2 = x
+            const y2 = y
+            const x3 = this.startX - (x - this.startX)
+            const y3 = y
+            this.selectedShape.points = `${this.startX},${this.startY} ${x2},${y2} ${x3},${y3}`
+            break
+          case 'line':
+          case 'arrow':
+            this.selectedShape.x2 = x
+            this.selectedShape.y2 = y
+            break
+        }
 
-    this.drawing = false
+        this.requestUpdate()
+      }
 
-    const svg = this.svg as SVGSVGElement
+      if (end) {
+        this.drawing = false
+        this.imageMarkerMode.setMode('edit')
 
-    if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onMouseMoveForDrawing)
-      svg.removeEventListener('touchend', this.onMouseUpForDrawing)
-    } else {
-      svg.removeEventListener('mousemove', this.onMouseMoveForDrawing)
-      svg.removeEventListener('mouseup', this.onMouseUpForDrawing)
+        this.requestUpdate()
+      }
     }
-
-    this.imageMarkerMode.setMode('edit')
-
-    this.requestUpdate()
   }
 
   private setSelectedShape(shape: Shape | null) {
@@ -314,7 +294,7 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private getSvgPoint(event: MouseEvent | TouchEvent) {
+  private getSvgPoint(event: MouseEvent | PointerEvent | GestureEventDrag) {
     const { x, y } = this.getPointFromEvent(event)
 
     const svg = this.svg
@@ -342,8 +322,7 @@ export class OxImageMarker extends BaseImageMarker {
             y="${shape.y!}"
             fill="${commonAttrs.stroke}"
             style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
-            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
             @dblclick="${(e: MouseEvent) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
         `
@@ -359,8 +338,7 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
           ></rect>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -375,8 +353,7 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -389,8 +366,7 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
           ></polygon>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -415,8 +391,7 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="25"
             stroke-opacity="0"
             pointer-events="stroke"
-            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
             @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
             @mouseleave="${() => (this.svg.style.cursor = 'default')}"
           ></line>
@@ -449,10 +424,10 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="25"
             stroke-opacity="0"
             pointer-events="stroke"
-            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @mousedown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
             @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
             @mouseleave="${() => (this.svg.style.cursor = 'default')}"
+            @pointerdown="${(e: PointerEvent) => this.currentMode == 'edit' && e.stopPropagation()}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -462,14 +437,15 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onMouseDownOnShape(event: MouseEvent | TouchEvent, shape: Shape) {
+  private onPointerDownOnShape(event: PointerEvent, shape: Shape) {
     if (this.currentMode !== 'edit') {
       return
     }
 
-    if ('touches' in event && event.touches.length > 1) {
-      return
-    }
+    // TODO check if single touch ... (멀티터치를 제외해야한다).
+    // if ('touches' in event && event.touches.length > 1) {
+    //   return
+    // }
 
     event.stopPropagation()
     event.preventDefault()
@@ -487,25 +463,19 @@ export class OxImageMarker extends BaseImageMarker {
     this.offsetX = x
     this.offsetY = y
 
-    const svg = this.svg as SVGSVGElement
-
-    if ('touches' in event) {
-      svg.addEventListener('touchmove', this.onMouseMoveOnShape)
-      svg.addEventListener('touchend', this.onMouseUpOnShape)
-    } else {
-      svg.addEventListener('mousemove', this.onMouseMoveOnShape)
-      svg.addEventListener('mouseup', this.onMouseUpOnShape)
-    }
+    document.addEventListener('pointermove', this.onPointerMoveOnShape)
+    document.addEventListener('pointerup', this.onPointerUpOnShape)
   }
 
-  private onMouseMoveOnShape = (event: MouseEvent | TouchEvent) => {
+  private onPointerMoveOnShape = (event: PointerEvent) => {
     if (!this.selectedShape) {
       return
     }
 
-    if ('touches' in event && event.touches.length > 1) {
-      return
-    }
+    // TODO check if single touch ... (멀티터치를 제외해야한다).
+    // if ('touches' in event && event.touches.length > 1) {
+    //   return
+    // }
 
     event.preventDefault()
 
@@ -554,26 +524,20 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onMouseUpOnShape = (event: MouseEvent | TouchEvent) => {
+  private onPointerUpOnShape = (event: PointerEvent) => {
     if (!this.selectedShape) {
       return
     }
 
-    if ('touches' in event && event.touches.length > 1) {
-      return
-    }
+    // TODO
+    // if ('touches' in event && event.touches.length > 1) {
+    //   return
+    // }
 
     event.preventDefault()
 
-    const svg = this.svg as SVGSVGElement
-
-    if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onMouseMoveOnShape)
-      svg.removeEventListener('touchend', this.onMouseUpOnShape)
-    } else {
-      svg.removeEventListener('mousemove', this.onMouseMoveOnShape)
-      svg.removeEventListener('mouseup', this.onMouseUpOnShape)
-    }
+    document.removeEventListener('pointermove', this.onPointerMoveOnShape)
+    document.removeEventListener('pointerup', this.onPointerUpOnShape)
   }
 
   private renderResizeHandles(shape: Shape) {
@@ -626,8 +590,7 @@ export class OxImageMarker extends BaseImageMarker {
               stroke="black"
               class="resize-handle"
               style="cursor: ${handle.cursor};"
-              @mousedown="${(e: MouseEvent) => this.onResizeHandleMouseDown(e, shape, handle)}"
-              @touchstart="${(e: TouchEvent) => this.onResizeHandleMouseDown(e, shape, handle)}"
+              @pointerdown="${(e: PointerEvent) => this.onResizeHandlePointerDown(e, shape, handle)}"
             ></rect>
           </g>
         `
@@ -635,7 +598,7 @@ export class OxImageMarker extends BaseImageMarker {
     `
   }
 
-  private onResizeHandleMouseDown(event: MouseEvent | TouchEvent, shape: Shape, handle: any) {
+  private onResizeHandlePointerDown(event: PointerEvent, shape: Shape, handle: any) {
     event.stopPropagation()
     event.preventDefault()
 
@@ -643,18 +606,12 @@ export class OxImageMarker extends BaseImageMarker {
 
     this.offsetX = handle.x
     this.offsetY = handle.y
-    const svg = this.svg as SVGSVGElement
 
-    if ('touches' in event) {
-      svg.addEventListener('touchmove', this.onResizeHandleMouseMove)
-      svg.addEventListener('touchend', this.onResizeHandleMouseUp)
-    } else {
-      svg.addEventListener('mousemove', this.onResizeHandleMouseMove)
-      svg.addEventListener('mouseup', this.onResizeHandleMouseUp)
-    }
+    document.addEventListener('pointermove', this.onResizeHandlePointerMove)
+    document.addEventListener('pointerup', this.onResizeHandlePointerUp)
   }
 
-  private onResizeHandleMouseMove = (event: MouseEvent | TouchEvent) => {
+  private onResizeHandlePointerMove = (event: PointerEvent) => {
     if (!this.selectedShape) {
       return
     }
@@ -733,18 +690,11 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onResizeHandleMouseUp = (event: MouseEvent | TouchEvent) => {
+  private onResizeHandlePointerUp = (event: PointerEvent) => {
     event.preventDefault()
 
-    const svg = this.svg as SVGSVGElement
-
-    if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onResizeHandleMouseMove)
-      svg.removeEventListener('touchend', this.onResizeHandleMouseUp)
-    } else {
-      svg.removeEventListener('mousemove', this.onResizeHandleMouseMove)
-      svg.removeEventListener('mouseup', this.onResizeHandleMouseUp)
-    }
+    document.removeEventListener('pointermove', this.onResizeHandlePointerMove)
+    document.removeEventListener('pointerup', this.onResizeHandlePointerUp)
   }
 
   private onTextDoubleClick(event: MouseEvent, shape: Shape) {
@@ -795,7 +745,9 @@ export class OxImageMarker extends BaseImageMarker {
 
     document.body.appendChild(input)
     this.adjustInputWidth(input)
-    requestAnimationFrame(() => input.focus())
+
+    /* iOS에서는 딜레이를 주었을 때 focus()를 받지 못하는 현상이 있으므로, delay 없이 바로 focus를 설정함. */
+    input.focus()
 
     input.addEventListener('input', () => {
       this.adjustInputWidth(input)

package/src/types.ts

@@ -18,3 +18,15 @@ export interface Shape {
   selected?: boolean
   text?: string
 }
+
+export interface ImageOptions {
+  id: string
+  scale: number
+  offsetX: number
+  offsetY: number
+  currentImage?: string // 기존 이미지 객체
+}
+
+export interface ImageProvider {
+  getImage(options: ImageOptions): Promise<string>
+}