@operato/image-marker 8.0.0-beta.0 → 8.0.0-beta.1

package/src/ox-image-marker.ts

@@ -1,857 +0,0 @@
-import './ox-image-marker-mode'
-
-import { html, css, svg, nothing } from 'lit'
-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'
-
-@customElement('ox-image-marker')
-export class OxImageMarker extends BaseImageMarker {
-  static styles = [
-    ...BaseImageMarker.styles,
-    css`
-      :host {
-        position: relative;
-        display: flex;
-        width: 100%;
-        height: 100%;
-      }
-
-      ox-image-marker-mode {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-
-      svg {
-        cursor: default;
-      }
-
-      svg[drawing] {
-        cursor: crosshair;
-      }
-
-      .resize-handle {
-        cursor: nwse-resize;
-      }
-    `
-  ]
-
-  @state() private currentShapeType?: ShapeType
-  @state() private currentMode: ImageMarkerMode = 'edit'
-  @state() private selectedShape: Shape | null = null
-
-  @query('ox-image-marker-mode') imageMarkerMode!: OxImageMarkerMode
-
-  // 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() {
-    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
-          @wheel=${this.onSvgWheel}
-          @doubletap=${this.onSvgDoubleTap}
-          @pinch=${this.onSvgPinch}
-          @drag=${this.onSvgDrag}
-          @click=${this.onSvgClick}
-          viewBox=${this.viewBox}
-          ?drawing=${this.currentMode == 'shape'}
-        >
-          <image href=${this.currentImage} @load=${this.onImageLoad}></image>
-          ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
-        </svg>
-      </div>
-
-      <ox-image-marker-mode
-        currentMode=${this.currentMode}
-        currentShapeType=${ifDefined(this.currentShapeType)}
-        @mode-changed=${(e: CustomEvent) => {
-          const { mode, shapeType } = e.detail
-          this.setMode(mode, shapeType)
-        }}
-        @tap-fit-size=${() => this.reset()}
-        @tap-delete=${() => this.deleteSelectedShape()}
-        @tap-save=${() => {
-          this.dispatchEvent(
-            new CustomEvent('shapes-changed', {
-              detail: this.shapes,
-              bubbles: true,
-              composed: true
-            })
-          )
-        }}
-      ></ox-image-marker-mode>
-    `
-  }
-
-  private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
-    if (mode == 'view') {
-      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.drawShape(e)
-    } else {
-      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 - deltaX * scale
-      const newVbY = vbY - deltaY * scale
-
-      this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`
-
-      this.debouncedUpdateImage()
-    }
-  }
-
-  protected onSvgClick(e: MouseEvent) {
-    if (this.currentMode === 'shape' && this.currentShapeType === 'text') {
-      const { x, y } = this.getSvgPoint(e)
-
-      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)
-
-      /* 강제 지연은 iOS에서 input focus를 받지 못하는 현상이 있다. */
-      this.showTextInput(textElement, null, { x, y })
-
-      this.imageMarkerMode.setMode('edit')
-    }
-  }
-
-  private drawShape(e: GestureEventDrag) {
-    const { end } = e.detail
-    const { x, y } = this.getSvgPoint(e)
-
-    if (!this.drawing) {
-      this.startX = x
-      this.startY = y
-      this.setSelectedShape(null)
-
-      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))
-
-      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)
-      }
-
-      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()
-      }
-
-      if (end) {
-        this.drawing = false
-        this.imageMarkerMode.setMode('edit')
-
-        this.requestUpdate()
-      }
-    }
-  }
-
-  private setSelectedShape(shape: Shape | null) {
-    this.selectedShape = shape
-
-    if (!shape) {
-      this.shapes = this.shapes.map(s => {
-        return { ...s, selected: false }
-      })
-    } else {
-      this.selectedShape!.selected = true
-    }
-  }
-
-  private getSvgPoint(event: MouseEvent | PointerEvent | GestureEventDrag) {
-    const { x, y } = this.getPointFromEvent(event)
-
-    const svg = this.svg
-    const point = svg.createSVGPoint()
-    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',
-      'stroke-width': 1,
-      fill: 'transparent',
-      cursor: 'pointer'
-    }
-
-    switch (shape.type) {
-      case 'text':
-        return svg`
-          <text
-            x="${shape.x!}"
-            y="${shape.y!}"
-            fill="${commonAttrs.stroke}"
-            style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
-            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
-            @dblclick="${(e: MouseEvent) => this.onTextDoubleClick(e, shape)}"
-          >${shape.text}</text>
-        `
-
-      case 'rectangle':
-        return svg`
-          <rect
-            x="${shape.x!}"
-            y="${shape.y!}"
-            width="${shape.width!}"
-            height="${shape.height!}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="${commonAttrs['stroke-width']}"
-            fill="${commonAttrs.fill}"
-            style="cursor: ${commonAttrs.cursor}"
-            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
-          ></rect>
-          ${shape.selected ? this.renderResizeHandles(shape) : ''}
-        `
-
-      case 'circle':
-        return svg`
-          <circle
-            cx="${shape.cx!}"
-            cy="${shape.cy!}"
-            r="${shape.r!}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="${commonAttrs['stroke-width']}"
-            fill="${commonAttrs.fill}"
-            style="cursor: ${commonAttrs.cursor}"
-            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
-          ></circle>
-          ${shape.selected ? this.renderResizeHandles(shape) : ''}
-        `
-
-      case 'triangle':
-        return svg`
-          <polygon
-            points="${shape.points!}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="${commonAttrs['stroke-width']}"
-            fill="${commonAttrs.fill}"
-            style="cursor: ${commonAttrs.cursor}"
-            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
-          ></polygon>
-          ${shape.selected ? this.renderResizeHandles(shape) : ''}
-        `
-
-      case 'line':
-        return svg`
-          <line
-            x1="${shape.x1!}"
-            y1="${shape.y1!}"
-            x2="${shape.x2 ?? shape.x1}"
-            y2="${shape.y2 ?? shape.y1}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="${commonAttrs['stroke-width']}"
-            style="cursor: ${commonAttrs.cursor}"
-          ></line>
-          <line
-            x1="${shape.x1!}"
-            y1="${shape.y1!}"
-            x2="${shape.x2 ?? shape.x1}"
-            y2="${shape.y2 ?? shape.y1}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="25"
-            stroke-opacity="0"
-            pointer-events="stroke"
-            @pointerdown="${(e: PointerEvent) => this.onPointerDownOnShape(e, shape)}"
-            @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
-            @mouseleave="${() => (this.svg.style.cursor = 'default')}"
-          ></line>
-          ${shape.selected ? this.renderResizeHandles(shape) : ''}
-        `
-
-      case 'arrow':
-        return svg`
-          <defs>
-            <marker id="arrowhead-${shape.id}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
-              <polygon points="0 0, 10 3.5, 0 7" fill="${commonAttrs.stroke}"></polygon>
-            </marker>
-          </defs>
-          <line
-            x1="${shape.x1!}"
-            y1="${shape.y1!}"
-            x2="${shape.x2 ?? shape.x1}"
-            y2="${shape.y2 ?? shape.y1}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="${commonAttrs['stroke-width']}"
-            marker-end="url(#arrowhead-${shape.id})"
-            style="cursor: ${commonAttrs.cursor}"
-          ></line>
-          <line
-            x1="${shape.x1!}"
-            y1="${shape.y1!}"
-            x2="${shape.x2 ?? shape.x1}"
-            y2="${shape.y2 ?? shape.y1}"
-            stroke="${commonAttrs.stroke}"
-            stroke-width="25"
-            stroke-opacity="0"
-            pointer-events="stroke"
-            @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) : ''}
-        `
-
-      case 'link':
-        return svg`
-          <rect class="link" x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}" 
-            stroke="${commonAttrs.stroke}" stroke-width="0" 
-            fill="${commonAttrs.stroke}" fill-opacity="0.3" @click="${() => this.handleLinkClick(shape)}">
-          </rect>
-        `
-      default:
-        return nothing
-    }
-  }
-
-  private onPointerDownOnShape(event: PointerEvent, shape: Shape) {
-    if (this.currentMode !== 'edit') {
-      return
-    }
-
-    // TODO check if single touch ... (멀티터치를 제외해야한다).
-    // if ('touches' in event && event.touches.length > 1) {
-    //   return
-    // }
-
-    event.stopPropagation()
-    event.preventDefault()
-
-    this.shapes = this.shapes.map(s => ({
-      ...s,
-      selected: s.id === shape.id
-    }))
-
-    this.shapeMoveInitiated = false
-    this.setSelectedShape(this.shapes.find(s => s.id == shape.id)!)
-
-    const { x, y } = this.getSvgPoint(event)
-
-    this.offsetX = x
-    this.offsetY = y
-
-    document.addEventListener('pointermove', this.onPointerMoveOnShape)
-    document.addEventListener('pointerup', this.onPointerUpOnShape)
-  }
-
-  private onPointerMoveOnShape = (event: PointerEvent) => {
-    if (!this.selectedShape) {
-      return
-    }
-
-    // TODO check if single touch ... (멀티터치를 제외해야한다).
-    // if ('touches' in event && event.touches.length > 1) {
-    //   return
-    // }
-
-    event.preventDefault()
-
-    const { x, y } = this.getSvgPoint(event)
-
-    const dx = x - this.offsetX
-    const dy = y - this.offsetY
-
-    if (!this.shapeMoveInitiated) {
-      const distance = Math.sqrt(dx * dx + dy * dy)
-
-      if (distance < this.shapeMoveThreshold) {
-        return
-      }
-
-      this.shapeMoveInitiated = true
-    }
-
-    this.offsetX = x
-    this.offsetY = y
-
-    switch (this.selectedShape.type) {
-      case 'text':
-      case 'rectangle':
-        this.selectedShape.x! += dx
-        this.selectedShape.y! += dy
-        break
-      case 'circle':
-        this.selectedShape.cx! += dx
-        this.selectedShape.cy! += dy
-        break
-      case 'triangle':
-        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
-
-        this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ')
-        break
-      case 'line':
-      case 'arrow':
-        this.selectedShape.x1! += dx
-        this.selectedShape.x2! += dx
-        this.selectedShape.y1! += dy
-        this.selectedShape.y2! += dy
-        break
-    }
-
-    this.requestUpdate()
-  }
-
-  private onPointerUpOnShape = (event: PointerEvent) => {
-    if (!this.selectedShape) {
-      return
-    }
-
-    // TODO
-    // if ('touches' in event && event.touches.length > 1) {
-    //   return
-    // }
-
-    event.preventDefault()
-
-    document.removeEventListener('pointermove', this.onPointerMoveOnShape)
-    document.removeEventListener('pointerup', this.onPointerUpOnShape)
-  }
-
-  private renderResizeHandles(shape: Shape) {
-    let handles: Array<{ x: number; y: number; cursor: string }> = []
-
-    switch (shape.type) {
-      case 'text':
-      case 'rectangle':
-        handles = [
-          { x: shape.x!, y: shape.y!, cursor: 'nwse-resize' },
-          { x: shape.x! + shape.width!, y: shape.y!, cursor: 'nesw-resize' },
-          { x: shape.x!, y: shape.y! + shape.height!, cursor: 'nesw-resize' },
-          { x: shape.x! + shape.width!, y: shape.y! + shape.height!, cursor: 'nwse-resize' }
-        ]
-        break
-      case 'circle':
-        handles = [
-          { x: shape.cx! + shape.r!, y: shape.cy!, cursor: 'ew-resize' },
-          { x: shape.cx! - shape.r!, y: shape.cy!, cursor: 'ew-resize' },
-          { x: shape.cx!, y: shape.cy! + shape.r!, cursor: 'ns-resize' },
-          { x: shape.cx!, y: shape.cy! - shape.r!, cursor: 'ns-resize' }
-        ]
-        break
-      case 'triangle':
-        const points = shape.points!.split(' ').map(p => p.split(',').map(Number))
-        handles = points.map(([x, y]) => ({ x, y, cursor: 'move' }))
-        break
-      case 'line':
-      case 'arrow':
-        handles = [
-          { x: shape.x1!, y: shape.y1!, cursor: 'move' },
-          { x: shape.x2!, y: shape.y2!, cursor: 'move' }
-        ]
-        break
-    }
-
-    return svg`
-      ${handles.map(
-        handle => svg`
-          <g
-            class="resize-handle-group"
-            style="transform: translate(${handle.x}px, ${handle.y}px) scale(${1 / this.zoomLevel});"
-          >
-            <rect
-              x="-5"
-              y="-5"
-              width="10"
-              height="10"
-              fill="white"
-              stroke="black"
-              class="resize-handle"
-              style="cursor: ${handle.cursor};"
-              @pointerdown="${(e: PointerEvent) => this.onResizeHandlePointerDown(e, shape, handle)}"
-            ></rect>
-          </g>
-        `
-      )}
-    `
-  }
-
-  private onResizeHandlePointerDown(event: PointerEvent, shape: Shape, handle: any) {
-    event.stopPropagation()
-    event.preventDefault()
-
-    this.setSelectedShape(shape)
-
-    this.offsetX = handle.x
-    this.offsetY = handle.y
-
-    document.addEventListener('pointermove', this.onResizeHandlePointerMove)
-    document.addEventListener('pointerup', this.onResizeHandlePointerUp)
-  }
-
-  private onResizeHandlePointerMove = (event: PointerEvent) => {
-    if (!this.selectedShape) {
-      return
-    }
-
-    event.preventDefault()
-
-    const { x, y } = this.getSvgPoint(event)
-
-    switch (this.selectedShape.type) {
-      case 'rectangle':
-        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!
-        const dy = y - this.selectedShape.cy!
-        this.selectedShape.r = Math.sqrt(dx * dx + dy * dy)
-        break
-      case 'triangle':
-        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
-        const index = points.findIndex(([px, py]) => px === this.offsetX && py === this.offsetY)
-        if (index !== -1) {
-          points[index] = [x, y]
-          this.selectedShape.points = points.map(p => p.join(',')).join(' ')
-          this.offsetX = x
-          this.offsetY = y
-        }
-        break
-      case 'line':
-      case 'arrow':
-        if (this.offsetX === this.selectedShape.x1 && this.offsetY === this.selectedShape.y1) {
-          this.selectedShape.x1 = x
-          this.selectedShape.y1 = y
-        } else if (this.offsetX === this.selectedShape.x2 && this.offsetY === this.selectedShape.y2) {
-          this.selectedShape.x2 = x
-          this.selectedShape.y2 = y
-        }
-        this.offsetX = x
-        this.offsetY = y
-        break
-    }
-
-    this.requestUpdate()
-  }
-
-  private onResizeHandlePointerUp = (event: PointerEvent) => {
-    event.preventDefault()
-
-    document.removeEventListener('pointermove', this.onResizeHandlePointerMove)
-    document.removeEventListener('pointerup', this.onResizeHandlePointerUp)
-  }
-
-  private onTextDoubleClick(event: MouseEvent, shape: Shape) {
-    event.stopPropagation()
-    event.preventDefault()
-
-    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'
-
-    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)
-    this.adjustInputWidth(input)
-
-    /* iOS에서는 딜레이를 주었을 때 focus()를 받지 못하는 현상이 있으므로, delay 없이 바로 focus를 설정함. */
-    input.focus()
-
-    input.addEventListener('input', () => {
-      this.adjustInputWidth(input)
-    })
-
-    input.addEventListener('keydown', e => {
-      if (e.key === 'Enter') {
-        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)
-
-        if (!shape) {
-          this.svg.removeChild(textElement)
-        } else {
-          textElement.style.visibility = 'visible'
-        }
-      }
-    })
-
-    input.addEventListener('blur', () => {
-      requestAnimationFrame(() => {
-        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
-  }
-
-  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.setSelectedShape(null)
-
-      this.requestUpdate()
-    }
-  }
-}