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

package/src/ox-image-marker.ts

@@ -1,7 +1,7 @@
 import './ox-image-marker-mode'
 
 import { html, css, svg, nothing } from 'lit'
-import { property, state, customElement, query } from 'lit/decorators.js'
+import { state, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { keyed } from 'lit/directives/keyed.js'
 
@@ -50,6 +50,32 @@ export class OxImageMarker extends BaseImageMarker {
   private offsetX = 0
   private offsetY = 0
 
+  connectedCallback() {
+    super.connectedCallback()
+    // 키다운 이벤트 리스너 추가
+    window.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  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()
+    }
+  }
+
   render() {
     return html`
       <div class="container">
@@ -71,12 +97,7 @@ 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-delete=${() => this.deleteSelectedShape()}
         @clicked-save=${() => {
           this.dispatchEvent(
             new CustomEvent('shapes-changed', {
@@ -125,78 +146,25 @@ export class OxImageMarker extends BaseImageMarker {
   }
 
   private startDrawing(event: MouseEvent) {
-    this.drawing = true
     const { x, y } = this.getSvgPoint(event)
-    this.startX = x
-    this.startY = y
 
-    let newShape: Shape
-    switch (this.currentShapeType) {
-      case 'text':
-        newShape = {
-          id: Date.now().toString(),
-          type: 'text',
-          x: this.startX,
-          y: this.startY,
-          text: 'ABC'
-        }
-        break
-      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.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'
+
+      this.svg.appendChild(textElement)
 
-    this.selectedShape = newShape
-    this.shapes = [...this.shapes, newShape]
+      requestAnimationFrame(() => {
+        this.showTextInput(textElement, null, { x, y })
+      })
+    } else {
+      this.startX = x
+      this.startY = y
+      this.drawing = true
+    }
   }
 
   private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
@@ -204,52 +172,120 @@ export class OxImageMarker extends BaseImageMarker {
     this.currentShapeType = shapeType
   }
 
-  // 마우스 이동 이벤트 핸들러 (도형 그리기 중)
   private onMouseMove = (event: MouseEvent) => {
-    if (!this.drawing || !this.selectedShape) return
+    if (!this.drawing) return
+
     const { x, y } = this.getSvgPoint(event)
 
-    switch (this.selectedShape.type) {
-      case 'text':
-        break
-      case 'rectangle':
-        this.selectedShape.width = x - this.startX
-        this.selectedShape.height = 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
+    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.selectedShape = newShape
+      this.shapes = [...this.shapes, newShape]
     }
 
-    this.requestUpdate()
+    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.requestUpdate()
+    }
   }
 
-  // 마우스 업 이벤트 핸들러 (도형 그리기 종료)
   private onMouseUp = () => {
     this.drawing = false
     const svg = this.svg as SVGSVGElement
     svg.removeEventListener('mousemove', this.onMouseMove)
     svg.removeEventListener('mouseup', this.onMouseUp)
 
-    this.selectedShape!.selected = true
+    if (this.selectedShape) {
+      this.selectedShape.selected = true
+    }
+
     this.requestUpdate()
   }
 
-  // SVG 좌표계로 마우스 좌표 변환
   private getSvgPoint(event: MouseEvent) {
     const svg = this.svg
     const point = svg.createSVGPoint()
@@ -259,11 +295,10 @@ export class OxImageMarker extends BaseImageMarker {
     return point.matrixTransform(ctm)
   }
 
-  // 도형 렌더링 함수
   protected renderShape(shape: Shape) {
     const commonAttrs = {
       stroke: shape.selected ? 'blue' : 'red',
-      'stroke-width': shape.selected ? 2 : 1,
+      'stroke-width': 1,
       fill: 'transparent',
       cursor: 'pointer'
     }
@@ -271,12 +306,11 @@ export class OxImageMarker extends BaseImageMarker {
     switch (shape.type) {
       case 'text':
         return svg`
-          
           <text
             x="${shape.x!}"
             y="${shape.y!}"
             fill="${commonAttrs.stroke}"
-            style="cursor: ${commonAttrs.cursor}; font-size: 16px; text-decoration: ${shape.selected ? 'underline' : 'none'};"
+            style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
             @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
             @dblclick="${(e: MouseEvent) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
@@ -377,7 +411,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) {
@@ -404,20 +437,16 @@ export class OxImageMarker extends BaseImageMarker {
         break
     }
 
-    // 드래그 이벤트 리스너 추가
     const svg = this.svg as SVGSVGElement
     svg.addEventListener('mousemove', this.onShapeMouseMove)
     svg.addEventListener('mouseup', this.onShapeMouseUp)
   }
 
   private onShapeMouseMove = (event: MouseEvent) => {
-    if (!this.selectedShape) {
-      return
-    }
+    if (!this.selectedShape) return
 
     const { x, y } = this.getSvgPoint(event)
 
-    // 마우스 이동에 따라 도형의 위치 업데이트
     switch (this.selectedShape.type) {
       case 'text':
       case 'rectangle':
@@ -449,7 +478,7 @@ export class OxImageMarker extends BaseImageMarker {
         break
     }
 
-    this.requestUpdate() // 화면 업데이트
+    this.requestUpdate()
   }
 
   private onShapeMouseUp = () => {
@@ -459,9 +488,7 @@ export class OxImageMarker extends BaseImageMarker {
   }
 
   private getScale(): number {
-    if (!this.svg) {
-      return 1
-    }
+    if (!this.svg) return 1
 
     const [vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
 
@@ -593,34 +620,124 @@ export class OxImageMarker extends BaseImageMarker {
   private onTextDoubleClick(event: MouseEvent, shape: Shape) {
     event.stopPropagation()
 
-    var input: HTMLInputElement | null = document.createElement('input')
+    const textElement = event.target as SVGTextElement
+
+    this.showTextInput(textElement, shape)
+  }
+
+  private showTextInput(textElement: SVGTextElement, shape: Shape | null = null, options?: { x: number; y: number }) {
+    const input: HTMLInputElement = document.createElement('input')
     input.style.position = 'absolute'
-    input.style.left = `${event.clientX}px`
-    input.style.top = `${event.clientY}px`
-    input.value = shape.text || ''
+
+    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.style.left = `${screenX}px`
+    input.style.top = `${screenY}px`
+
+    const computedStyle = window.getComputedStyle(textElement)
+    const fontSize = parseFloat(computedStyle.fontSize) * ctm.a
+    const fontFamily = computedStyle.fontFamily
+    const fontWeight = computedStyle.fontWeight
+    const textColor = computedStyle.fill || computedStyle.color
+    const lineHeight = parseFloat(computedStyle.lineHeight) * ctm.d
+
+    input.style.fontSize = `${fontSize}px`
+    input.style.fontFamily = fontFamily
+    input.style.fontWeight = fontWeight
+    input.style.color = textColor
+    input.style.lineHeight = `${lineHeight}px`
+    input.style.padding = '0'
+    input.style.margin = '0'
+    input.style.border = 'none'
+    input.style.outline = 'none'
+    input.style.background = 'transparent'
+
+    if (shape) {
+      input.value = shape.text || ''
+    }
+
+    textElement.style.visibility = 'hidden'
+
     document.body.appendChild(input)
-    input.focus()
+    this.adjustInputWidth(input)
+    requestAnimationFrame(() => input.focus())
+
+    input.addEventListener('input', () => {
+      this.adjustInputWidth(input)
+    })
 
     input.addEventListener('keydown', e => {
       if (e.key === 'Enter') {
-        shape.text = input!.value
-        document.body.removeChild(input!)
-        input = null
+        const textValue = input.value.trim()
+
+        if (textValue) {
+          if (shape) {
+            shape.text = textValue
+          } else {
+            const newShape: Shape = {
+              id: Date.now().toString(),
+              type: 'text',
+              x: options!.x,
+              y: options!.y,
+              text: textValue
+            }
+
+            this.shapes = [...this.shapes, newShape]
+          }
+        } else if (shape) {
+          this.shapes = this.shapes.filter(s => s.id !== shape.id)
+        }
+
+        document.body.removeChild(input)
+
+        if (!shape) {
+          this.svg.removeChild(textElement)
+        } else {
+          textElement.style.visibility = 'visible'
+        }
 
         this.requestUpdate()
       } else if (e.key === 'Escape') {
-        document.body.removeChild(input!)
-        input = null
+        document.body.removeChild(input)
 
-        this.requestUpdate()
+        if (!shape) {
+          this.svg.removeChild(textElement)
+        } else {
+          textElement.style.visibility = 'visible'
+        }
       }
     })
 
     input.addEventListener('blur', () => {
       requestAnimationFrame(() => {
-        input && document.body.removeChild(input)
-        input = null
+        if (!shape) {
+          this.svg.removeChild(textElement)
+        } else {
+          textElement.style.visibility = 'visible'
+        }
+
+        if (input.parentElement) {
+          document.body.removeChild(input)
+        }
       })
     })
   }
+
+  private adjustInputWidth(input: HTMLInputElement) {
+    const minWidth = 50
+    const textWidth = this.measureTextWidth(input.value || input.placeholder, input)
+    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')!
+    context.font = window.getComputedStyle(input).font
+
+    return context.measureText(text).width
+  }
 }