@operato/image-marker 8.0.0-alpha.18 → 8.0.0-alpha.23

package/src/ox-image-marker.ts

@@ -52,28 +52,15 @@ export class OxImageMarker extends BaseImageMarker {
 
   connectedCallback() {
     super.connectedCallback()
-    // 키다운 이벤트 리스너 추가
-    window.addEventListener('keydown', this.handleKeyDown)
+    this.setAttribute('tabindex', '0')
+    this.addEventListener('focus', this.onFocus)
+    this.addEventListener('blur', this.onBlur)
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
-    // 키다운 이벤트 리스너 제거
-    window.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()
-    }
+    this.removeEventListener('focus', this.onFocus)
+    this.removeEventListener('blur', this.onBlur)
   }
 
   render() {
@@ -81,8 +68,9 @@ export class OxImageMarker extends BaseImageMarker {
       <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>
@@ -97,8 +85,9 @@ export class OxImageMarker extends BaseImageMarker {
           const { mode, shapeType } = e.detail
           this.setMode(mode, shapeType)
         }}
-        @clicked-delete=${() => this.deleteSelectedShape()}
-        @clicked-save=${() => {
+        @tap-fit-size=${() => this.resetZoom()}
+        @tap-delete=${() => this.deleteSelectedShape()}
+        @tap-save=${() => {
           this.dispatchEvent(
             new CustomEvent('shapes-changed', {
               detail: this.shapes,
@@ -112,40 +101,44 @@ export class OxImageMarker extends BaseImageMarker {
   }
 
   protected onSvgMouseDown(event: MouseEvent) {
-    const svg = this.svg
+    event.preventDefault()
 
     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) => {
+    event.preventDefault()
+
+    if (this.isDoubleTouch(event)) {
+      this.resetZoom()
+    }
+
+    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)
 
     if (this.currentShapeType === 'text') {
@@ -165,6 +158,14 @@ export class OxImageMarker extends BaseImageMarker {
       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) {
@@ -172,8 +173,12 @@ 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
+    }
+
+    event.preventDefault()
 
     const { x, y } = this.getSvgPoint(event)
 
@@ -273,11 +278,20 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onMouseUp = () => {
+  private onDrawingMouseUp = (event: MouseEvent | TouchEvent) => {
+    event.preventDefault()
+
     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
@@ -286,12 +300,15 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  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)
   }
 
@@ -312,6 +329,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>
         `
@@ -328,6 +346,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) : ''}
         `
@@ -343,6 +362,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) : ''}
         `
@@ -356,6 +376,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) : ''}
         `
@@ -371,6 +392,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) : ''}
         `
@@ -392,6 +414,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) : ''}
         `
@@ -401,8 +424,9 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onShapeMouseDown(event: MouseEvent, shape: Shape) {
+  private onShapeMouseDown(event: MouseEvent | TouchEvent, shape: Shape) {
     event.stopPropagation()
+    event.preventDefault()
 
     this.shapes = this.shapes.map(s => ({
       ...s,
@@ -438,12 +462,22 @@ export class OxImageMarker extends BaseImageMarker {
     }
 
     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) => {
-    if (!this.selectedShape) return
+  private onShapeMouseMove = (event: MouseEvent | TouchEvent) => {
+    if (!this.selectedShape) {
+      return
+    }
+
+    event.preventDefault()
 
     const { x, y } = this.getSvgPoint(event)
 
@@ -481,21 +515,18 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onShapeMouseUp = () => {
-    const svg = this.svg as SVGSVGElement
-    svg.removeEventListener('mousemove', this.onShapeMouseMove)
-    svg.removeEventListener('mouseup', this.onShapeMouseUp)
-  }
-
-  private getScale(): number {
-    if (!this.svg) return 1
-
-    const [vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
+  private onShapeMouseUp = (event: MouseEvent | TouchEvent) => {
+    event.preventDefault()
 
-    const scaleX = vbWidth / this.svg.clientWidth
-    const scaleY = vbHeight / this.svg.clientHeight
+    const svg = this.svg as SVGSVGElement
 
-    return Math.max(scaleX, scaleY)
+    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)
+    }
   }
 
   private renderResizeHandles(shape: Shape) {
@@ -549,6 +580,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>
         `
@@ -556,27 +588,76 @@ export class OxImageMarker extends BaseImageMarker {
     `
   }
 
-  private onHandleMouseDown(event: MouseEvent, shape: Shape, handle: any) {
+  private onHandleMouseDown(event: MouseEvent | TouchEvent, shape: Shape, handle: any) {
     event.stopPropagation()
+    event.preventDefault()
+
     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
+    }
+
+    event.preventDefault()
+
     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!
@@ -610,15 +691,25 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onHandleMouseUp = () => {
+  private onHandleMouseUp = (event: MouseEvent | TouchEvent) => {
+    event.preventDefault()
+
     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
   }
 
   private onTextDoubleClick(event: MouseEvent, shape: Shape) {
     event.stopPropagation()
+    event.preventDefault()
 
     const textElement = event.target as SVGTextElement
 
@@ -740,4 +831,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;