@operato/image-marker 8.0.0-alpha.17 → 8.0.0-alpha.22

package/src/ox-image-marker.ts

@@ -50,13 +50,27 @@ export class OxImageMarker extends BaseImageMarker {
   private offsetX = 0
   private offsetY = 0
 
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('tabindex', '0')
+    this.addEventListener('focus', this.onFocus)
+    this.addEventListener('blur', this.onBlur)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener('focus', this.onFocus)
+    this.removeEventListener('blur', this.onBlur)
+  }
+
   render() {
     return html`
       <div class="container">
         <svg
           @mousedown=${this.onSvgMouseDown}
-          @wheel=${this.onWheel}
-          @dblclick=${this.onDoubleClick}
+          @touchstart=${this.onSvgTouchStart}
+          @wheel=${this.onSvgWheel}
+          @dblclick=${this.onSvgDoubleClick}
           viewBox=${this.viewBox}
         >
           <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
@@ -71,13 +85,8 @@ export class OxImageMarker extends BaseImageMarker {
           const { mode, shapeType } = e.detail
           this.setMode(mode, shapeType)
         }}
-        @clicked-delete=${() => {
-          if (this.selectedShape) {
-            this.shapes = this.shapes.filter(s => s.id !== this.selectedShape!.id)
-            this.requestUpdate()
-          }
-        }}
-        @clicked-save=${() => {
+        @tap-delete=${() => this.deleteSelectedShape()}
+        @tap-save=${() => {
           this.dispatchEvent(
             new CustomEvent('shapes-changed', {
               detail: this.shapes,
@@ -91,63 +100,63 @@ export class OxImageMarker extends BaseImageMarker {
   }
 
   protected onSvgMouseDown(event: MouseEvent) {
-    const svg = this.svg
-
     this.selectedShape = null
     this.shapes = this.shapes.map(s => {
       return { ...s, selected: false }
     })
 
-    this.selectedShape = null
     if (this.currentMode === 'move') {
-      this.isPanning = true
-      this.panStart = { x: event.clientX, y: event.clientY }
-      svg.classList.add('dragging')
-      svg.addEventListener('mousemove', this.onPanMouseMove)
-      svg.addEventListener('mouseup', this.onPanMouseUp)
-    } else if (this.currentMode === 'select') {
-      this.startShapeDragging(event)
-      svg.addEventListener('mousemove', this.onShapeMouseMove)
-      svg.addEventListener('mouseup', this.onShapeMouseUp)
+      this.startPanning(event)
     } else if (this.currentMode === 'draw') {
       this.startDrawing(event)
-      svg.addEventListener('mousemove', this.onMouseMove)
-      svg.addEventListener('mouseup', this.onMouseUp)
     }
   }
 
-  private startShapeDragging(event: MouseEvent) {
-    const { x, y } = this.getSvgPoint(event)
-    if (this.selectedShape) {
-      this.offsetX = x - (this.selectedShape.x || this.selectedShape.cx || 0)
-      this.offsetY = y - (this.selectedShape.y || this.selectedShape.cy || 0)
+  protected onSvgTouchStart = (event: TouchEvent) => {
+    if (event.touches.length === 1) {
+      this.selectedShape = null
+      this.shapes = this.shapes.map(s => {
+        return { ...s, selected: false }
+      })
+
+      if (this.currentMode === 'move') {
+        this.startPanning(event)
+      } else if (this.currentMode === 'draw') {
+        this.startDrawing(event)
+      }
+    } else if (event.touches.length === 2) {
+      this.startPinchZooming(event)
     }
   }
 
-  private startDrawing(event: MouseEvent) {
+  private startDrawing(event: MouseEvent | TouchEvent) {
     const { x, y } = this.getSvgPoint(event)
 
-    // currentShapeType이 'text'일 경우에만 input을 보여 텍스트 입력을 받음
     if (this.currentShapeType === 'text') {
       const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
       textElement.setAttribute('x', x.toString())
       textElement.setAttribute('y', y.toString())
-      textElement.textContent = 'ABC' /* should not be empty space */
+      textElement.textContent = 'ABC'
 
       this.svg.appendChild(textElement)
 
-      // input 요소 생성
       requestAnimationFrame(() => {
         this.showTextInput(textElement, null, { x, y })
       })
     } else {
-      // 'text'가 아닌 경우 기존 도형 그리기 동작 유지
       this.startX = x
       this.startY = y
-
       this.drawing = true
     }
+
+    if ('touches' in event) {
+      this.svg.addEventListener('touchmove', this.onDrawingMouseMove)
+      this.svg.addEventListener('touchend', this.onDrawingMouseUp)
+    } else {
+      this.svg.addEventListener('mousemove', this.onDrawingMouseMove)
+      this.svg.addEventListener('mouseup', this.onDrawingMouseUp)
+    }
   }
 
   private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
@@ -155,18 +164,17 @@ export class OxImageMarker extends BaseImageMarker {
     this.currentShapeType = shapeType
   }
 
-  // 마우스 이동 이벤트 핸들러 (도형 그리기 중)
-  private onMouseMove = (event: MouseEvent) => {
-    if (!this.drawing) return
+  private onDrawingMouseMove = (event: MouseEvent | TouchEvent) => {
+    if (!this.drawing) {
+      return
+    }
 
     const { x, y } = this.getSvgPoint(event)
 
-    // 최소 거리 확인 (예: 5px 이상이어야 도형을 생성)
     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) {
@@ -225,14 +233,12 @@ export class OxImageMarker extends BaseImageMarker {
       }
 
       this.selectedShape = newShape
-      this.shapes = [...this.shapes, newShape] // 새로운 도형 추가
+      this.shapes = [...this.shapes, newShape]
     }
 
     if (this.selectedShape) {
-      // 선택된 도형의 크기를 업데이트
       switch (this.selectedShape.type) {
         case 'rectangle':
-          // x, y를 업데이트하여 음의 방향으로 드래그할 때도 사각형이 올바르게 그려지도록 함
           this.selectedShape.x = Math.min(x, this.startX)
           this.selectedShape.y = Math.min(y, this.startY)
           this.selectedShape.width = Math.abs(x - this.startX)
@@ -257,15 +263,22 @@ export class OxImageMarker extends BaseImageMarker {
           break
       }
 
-      this.requestUpdate() // 화면 업데이트
+      this.requestUpdate()
     }
   }
 
-  private onMouseUp = () => {
+  private onDrawingMouseUp = (event: MouseEvent | TouchEvent) => {
     this.drawing = false
+
     const svg = this.svg as SVGSVGElement
-    svg.removeEventListener('mousemove', this.onMouseMove)
-    svg.removeEventListener('mouseup', this.onMouseUp)
+
+    if ('touches' in event) {
+      svg.removeEventListener('touchmove', this.onDrawingMouseMove)
+      svg.removeEventListener('touchend', this.onDrawingMouseUp)
+    } else {
+      svg.removeEventListener('mousemove', this.onDrawingMouseMove)
+      svg.removeEventListener('mouseup', this.onDrawingMouseUp)
+    }
 
     if (this.selectedShape) {
       this.selectedShape.selected = true
@@ -274,17 +287,18 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  // SVG 좌표계로 마우스 좌표 변환
-  private getSvgPoint(event: MouseEvent) {
+  private getSvgPoint(event: MouseEvent | TouchEvent) {
+    const { x, y } = this.getPointFromEvent(event)
+
     const svg = this.svg
     const point = svg.createSVGPoint()
-    point.x = event.clientX
-    point.y = event.clientY
+    point.x = x
+    point.y = y
     const ctm = svg.getScreenCTM()!.inverse()
+
     return point.matrixTransform(ctm)
   }
 
-  // 도형 렌더링 함수
   protected renderShape(shape: Shape) {
     const commonAttrs = {
       stroke: shape.selected ? 'blue' : 'red',
@@ -302,6 +316,7 @@ export class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.stroke}"
             style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
             @dblclick="${(e: MouseEvent) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
         `
@@ -318,6 +333,7 @@ export class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
           ></rect>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -333,6 +349,7 @@ export class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -346,6 +363,7 @@ export class OxImageMarker extends BaseImageMarker {
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
           ></polygon>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -361,6 +379,7 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -382,6 +401,7 @@ export class OxImageMarker extends BaseImageMarker {
             marker-end="url(#arrowhead-${shape.id})"
             style="cursor: ${commonAttrs.cursor}"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -391,7 +411,7 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onShapeMouseDown(event: MouseEvent, shape: Shape) {
+  private onShapeMouseDown(event: MouseEvent | TouchEvent, shape: Shape) {
     event.stopPropagation()
 
     this.shapes = this.shapes.map(s => ({
@@ -401,7 +421,6 @@ export class OxImageMarker extends BaseImageMarker {
 
     this.selectedShape = this.shapes.find(s => s.id == shape.id)!
 
-    // 마우스 클릭 좌표와 도형의 현재 좌표 차이 계산
     const { x, y } = this.getSvgPoint(event)
 
     switch (shape.type) {
@@ -428,20 +447,24 @@ export class OxImageMarker extends BaseImageMarker {
         break
     }
 
-    // 드래그 이벤트 리스너 추가
     const svg = this.svg as SVGSVGElement
-    svg.addEventListener('mousemove', this.onShapeMouseMove)
-    svg.addEventListener('mouseup', this.onShapeMouseUp)
+
+    if ('touches' in event) {
+      svg.addEventListener('touchmove', this.onShapeMouseMove)
+      svg.addEventListener('touchend', this.onShapeMouseUp)
+    } else {
+      svg.addEventListener('mousemove', this.onShapeMouseMove)
+      svg.addEventListener('mouseup', this.onShapeMouseUp)
+    }
   }
 
-  private onShapeMouseMove = (event: MouseEvent) => {
+  private onShapeMouseMove = (event: MouseEvent | TouchEvent) => {
     if (!this.selectedShape) {
       return
     }
 
     const { x, y } = this.getSvgPoint(event)
 
-    // 마우스 이동에 따라 도형의 위치 업데이트
     switch (this.selectedShape.type) {
       case 'text':
       case 'rectangle':
@@ -473,26 +496,19 @@ export class OxImageMarker extends BaseImageMarker {
         break
     }
 
-    this.requestUpdate() // 화면 업데이트
+    this.requestUpdate()
   }
 
-  private onShapeMouseUp = () => {
+  private onShapeMouseUp = (event: MouseEvent | TouchEvent) => {
     const svg = this.svg as SVGSVGElement
-    svg.removeEventListener('mousemove', this.onShapeMouseMove)
-    svg.removeEventListener('mouseup', this.onShapeMouseUp)
-  }
 
-  private getScale(): number {
-    if (!this.svg) {
-      return 1
+    if ('touches' in event) {
+      svg.removeEventListener('touchmove', this.onShapeMouseMove)
+      svg.removeEventListener('touchend', this.onShapeMouseUp)
+    } else {
+      svg.removeEventListener('mousemove', this.onShapeMouseMove)
+      svg.removeEventListener('mouseup', this.onShapeMouseUp)
     }
-
-    const [vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
-
-    const scaleX = vbWidth / this.svg.clientWidth
-    const scaleY = vbHeight / this.svg.clientHeight
-
-    return Math.max(scaleX, scaleY)
   }
 
   private renderResizeHandles(shape: Shape) {
@@ -546,6 +562,7 @@ export class OxImageMarker extends BaseImageMarker {
               class="resize-handle"
               style="cursor: ${handle.cursor};"
               @mousedown="${(e: MouseEvent) => this.onHandleMouseDown(e, shape, handle)}"
+              @touchstart="${(e: TouchEvent) => this.onHandleMouseDown(e, shape, handle)}"
             ></rect>
           </g>
         `
@@ -553,27 +570,73 @@ export class OxImageMarker extends BaseImageMarker {
     `
   }
 
-  private onHandleMouseDown(event: MouseEvent, shape: Shape, handle: any) {
+  private onHandleMouseDown(event: MouseEvent | TouchEvent, shape: Shape, handle: any) {
     event.stopPropagation()
+
     this.selectedShape = shape
     this.offsetX = handle.x
     this.offsetY = handle.y
     const svg = this.svg as SVGSVGElement
-    svg.addEventListener('mousemove', this.onHandleMouseMove)
-    svg.addEventListener('mouseup', this.onHandleMouseUp)
+
+    if ('touches' in event) {
+      svg.addEventListener('touchmove', this.onHandleMouseMove)
+      svg.addEventListener('touchend', this.onHandleMouseUp)
+    } else {
+      svg.addEventListener('mousemove', this.onHandleMouseMove)
+      svg.addEventListener('mouseup', this.onHandleMouseUp)
+    }
   }
 
-  private onHandleMouseMove = (event: MouseEvent) => {
-    if (!this.selectedShape) return
+  private onHandleMouseMove = (event: MouseEvent | TouchEvent) => {
+    if (!this.selectedShape) {
+      return
+    }
+
     const { x, y } = this.getSvgPoint(event)
 
     switch (this.selectedShape.type) {
-      case 'text':
+      // case 'text':
+      //   this.selectedShape.width = Math.abs(x - this.selectedShape.x!)
+      //   this.selectedShape.height = Math.abs(y - this.selectedShape.y!)
+      //   if (x < this.selectedShape.x!) this.selectedShape.x = x
+      //   if (y < this.selectedShape.y!) this.selectedShape.y = y
+      //   break
       case 'rectangle':
-        this.selectedShape.width = Math.abs(x - this.selectedShape.x!)
-        this.selectedShape.height = Math.abs(y - this.selectedShape.y!)
-        if (x < this.selectedShape.x!) this.selectedShape.x = x
-        if (y < this.selectedShape.y!) this.selectedShape.y = y
+        const startX = this.selectedShape.x!
+        const startY = this.selectedShape.y!
+        const width = this.selectedShape.width!
+        const height = this.selectedShape.height!
+
+        // 핸들의 좌표에 따라 너비 및 높이 조정
+        if (this.offsetX === startX && this.offsetY === startY) {
+          // 상좌 핸들 (왼쪽 위)
+          this.selectedShape.x = x
+          this.selectedShape.y = y
+          this.selectedShape.width = width + (startX - x)
+          this.selectedShape.height = height + (startY - y)
+        } else if (this.offsetX === startX + width && this.offsetY === startY) {
+          // 상우 핸들 (오른쪽 위)
+          this.selectedShape.y = y
+          this.selectedShape.width = Math.abs(x - startX)
+          this.selectedShape.height = height + (startY - y)
+        } else if (this.offsetX === startX && this.offsetY === startY + height) {
+          // 하좌 핸들 (왼쪽 아래)
+          this.selectedShape.x = x
+          this.selectedShape.width = width + (startX - x)
+          this.selectedShape.height = Math.abs(y - startY)
+        } else if (this.offsetX === startX + width && this.offsetY === startY + height) {
+          // 하우 핸들 (오른쪽 아래)
+          this.selectedShape.width = Math.abs(x - startX)
+          this.selectedShape.height = Math.abs(y - startY)
+        }
+
+        // 최소 너비 및 높이 유지
+        this.selectedShape.width = Math.max(10, this.selectedShape.width!)
+        this.selectedShape.height = Math.max(10, this.selectedShape.height!)
+
+        this.offsetX = x
+        this.offsetY = y
+
         break
       case 'circle':
         const dx = x - this.selectedShape.cx!
@@ -607,10 +670,17 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onHandleMouseUp = () => {
+  private onHandleMouseUp = (event: MouseEvent | TouchEvent) => {
     const svg = this.svg as SVGSVGElement
-    svg.removeEventListener('mousemove', this.onHandleMouseMove)
-    svg.removeEventListener('mouseup', this.onHandleMouseUp)
+
+    if ('touches' in event) {
+      svg.removeEventListener('touchmove', this.onHandleMouseMove)
+      svg.removeEventListener('touchend', this.onHandleMouseUp)
+    } else {
+      svg.removeEventListener('mousemove', this.onHandleMouseMove)
+      svg.removeEventListener('mouseup', this.onHandleMouseUp)
+    }
+
     this.selectedShape = null
   }
 
@@ -623,23 +693,18 @@ export class OxImageMarker extends BaseImageMarker {
   }
 
   private showTextInput(textElement: SVGTextElement, shape: Shape | null = null, options?: { x: number; y: number }) {
-    // input 요소 생성
     const input: HTMLInputElement = document.createElement('input')
     input.style.position = 'absolute'
 
-    // SVG 텍스트의 CTM 얻기
     const ctm = textElement.getScreenCTM() || { a: 1, e: 0, d: 1, f: 0 }
     const bbox = textElement.getBBox()
 
-    // 텍스트의 화면 위치 계산
     const screenX = bbox.x * ctm.a + ctm.e
     const screenY = bbox.y * ctm.d + ctm.f
 
-    // input 위치 조정 (scale과 transform을 고려한 정확한 좌표로 변환)
     input.style.left = `${screenX}px`
     input.style.top = `${screenY}px`
 
-    // 텍스트 폰트 스타일을 가져와 input에 적용
     const computedStyle = window.getComputedStyle(textElement)
     const fontSize = parseFloat(computedStyle.fontSize) * ctm.a
     const fontFamily = computedStyle.fontFamily
@@ -647,7 +712,6 @@ export class OxImageMarker extends BaseImageMarker {
     const textColor = computedStyle.fill || computedStyle.color
     const lineHeight = parseFloat(computedStyle.lineHeight) * ctm.d
 
-    // input 스타일을 텍스트와 일치시킴
     input.style.fontSize = `${fontSize}px`
     input.style.fontFamily = fontFamily
     input.style.fontWeight = fontWeight
@@ -663,15 +727,12 @@ export class OxImageMarker extends BaseImageMarker {
       input.value = shape.text || ''
     }
 
-    // SVG 텍스트 숨김
     textElement.style.visibility = 'hidden'
 
-    // input 요소를 추가하고, 텍스트 길이에 따라 너비 조정
     document.body.appendChild(input)
-    this.adjustInputWidth(input) // 최초 너비 조정
+    this.adjustInputWidth(input)
     requestAnimationFrame(() => input.focus())
 
-    // 입력 중에 동적으로 input의 너비 조정
     input.addEventListener('input', () => {
       this.adjustInputWidth(input)
     })
@@ -733,14 +794,12 @@ export class OxImageMarker extends BaseImageMarker {
     })
   }
 
-  // 텍스트 길이에 맞춰 input 박스의 너비를 조정하는 함수 (최소 길이 유지)
   private adjustInputWidth(input: HTMLInputElement) {
-    const minWidth = 50 // 최소 너비 (픽셀 단위로 설정)
+    const minWidth = 50
     const textWidth = this.measureTextWidth(input.value || input.placeholder, input)
-    input.style.width = `${Math.max(textWidth + 10, minWidth)}px` // 텍스트 길이 + 여유 공간, 최소 너비 적용
+    input.style.width = `${Math.max(textWidth + 10, minWidth)}px`
   }
 
-  // 텍스트 길이를 측정하는 함수
   private measureTextWidth(text: string, input: HTMLInputElement): number {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')!
@@ -748,4 +807,26 @@ export class OxImageMarker extends BaseImageMarker {
 
     return context.measureText(text).width
   }
+
+  private onFocus = () => {
+    this.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  private onBlur = () => {
+    this.removeEventListener('keydown', this.handleKeyDown)
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedShape) {
+      this.deleteSelectedShape()
+    }
+  }
+
+  private deleteSelectedShape() {
+    if (this.selectedShape) {
+      this.shapes = this.shapes.filter(s => s.id !== this.selectedShape!.id)
+      this.selectedShape = null
+      this.requestUpdate()
+    }
+  }
 }

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

@@ -55,6 +55,22 @@ const Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => html`
   </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;