@operato/image-marker 8.0.0-alpha.10

package/src/ox-image-marker.ts

@@ -0,0 +1,626 @@
+import './ox-image-marker-mode'
+
+import { html, css, svg, nothing } from 'lit'
+import { property, state, customElement, query } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { keyed } from 'lit/directives/keyed.js'
+
+import { ImageMarkerMode, Shape, ShapeType } from './types'
+import { BaseImageMarker } from './base-image-marker'
+
+@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: crosshair;
+      }
+
+      svg.dragging {
+        cursor: move;
+      }
+
+      .resize-handle {
+        cursor: nwse-resize;
+      }
+    `
+  ]
+
+  @state() private currentShapeType?: ShapeType
+  @state() private currentMode: ImageMarkerMode = 'select'
+  @state() private selectedShape: Shape | null = null
+
+  private drawing = false
+  private startX = 0
+  private startY = 0
+  private offsetX = 0
+  private offsetY = 0
+
+  render() {
+    return html`
+      <div class="container">
+        <svg
+          @mousedown=${this.onSvgMouseDown}
+          @wheel=${this.onWheel}
+          @dblclick=${this.onDoubleClick}
+          viewBox=${this.viewBox}
+        >
+          <image href=${this.imageUrl} @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)
+        }}
+        @clicked-delete=${() => {
+          if (this.selectedShape) {
+            this.shapes = this.shapes.filter(s => s.id !== this.selectedShape!.id)
+            this.requestUpdate()
+          }
+        }}
+        @clicked-save=${() => {
+          this.dispatchEvent(
+            new CustomEvent('shapes-changed', {
+              detail: this.shapes,
+              bubbles: true,
+              composed: true
+            })
+          )
+        }}
+      ></ox-image-marker-mode>
+    `
+  }
+
+  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)
+    } 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)
+    }
+  }
+
+  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
+    }
+
+    this.selectedShape = newShape
+    this.shapes = [...this.shapes, newShape]
+  }
+
+  private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
+    this.currentMode = mode
+    this.currentShapeType = shapeType
+  }
+
+  // 마우스 이동 이벤트 핸들러 (도형 그리기 중)
+  private onMouseMove = (event: MouseEvent) => {
+    if (!this.drawing || !this.selectedShape) 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
+    }
+
+    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
+    this.requestUpdate()
+  }
+
+  // SVG 좌표계로 마우스 좌표 변환
+  private getSvgPoint(event: MouseEvent) {
+    const svg = this.svg
+    const point = svg.createSVGPoint()
+    point.x = event.clientX
+    point.y = event.clientY
+    const ctm = svg.getScreenCTM()!.inverse()
+    return point.matrixTransform(ctm)
+  }
+
+  // 도형 렌더링 함수
+  protected renderShape(shape: Shape) {
+    const commonAttrs = {
+      stroke: shape.selected ? 'blue' : 'red',
+      'stroke-width': shape.selected ? 2 : 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; text-decoration: ${shape.selected ? 'underline' : 'none'};"
+            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(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}"
+            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(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}"
+            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(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}"
+            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(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}"
+            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+          ></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}"
+            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          ${shape.selected ? this.renderResizeHandles(shape) : ''}
+        `
+
+      default:
+        return nothing
+    }
+  }
+
+  private onShapeMouseDown(event: MouseEvent, shape: Shape) {
+    event.stopPropagation()
+
+    this.shapes = this.shapes.map(s => ({
+      ...s,
+      selected: s.id === shape.id
+    }))
+
+    this.selectedShape = this.shapes.find(s => s.id == shape.id)!
+
+    // 마우스 클릭 좌표와 도형의 현재 좌표 차이 계산
+    const { x, y } = this.getSvgPoint(event)
+
+    switch (shape.type) {
+      case 'text':
+      case 'rectangle':
+      case 'circle':
+        this.offsetX = x - (shape.x || shape.cx || 0)
+        this.offsetY = y - (shape.y || shape.cy || 0)
+        break
+
+      case 'triangle':
+        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
+        const [px, py] = points[0] || [0, 0]
+
+        this.offsetX = x - px
+        this.offsetY = y - py
+
+        break
+
+      case 'line':
+      case 'arrow':
+        this.offsetX = x - shape.x1!
+        this.offsetY = y - shape.y1!
+        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
+    }
+
+    const { x, y } = this.getSvgPoint(event)
+
+    // 마우스 이동에 따라 도형의 위치 업데이트
+    switch (this.selectedShape.type) {
+      case 'text':
+      case 'rectangle':
+        this.selectedShape.x = x - this.offsetX
+        this.selectedShape.y = y - this.offsetY
+        break
+      case 'circle':
+        this.selectedShape.cx = x - this.offsetX
+        this.selectedShape.cy = y - this.offsetY
+        break
+      case 'triangle':
+        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
+        const [ox, oy] = points[0]
+
+        this.selectedShape.points = points
+          .map(([px, py]) => [px - ox + x - this.offsetX, py - oy + y - this.offsetY].join(','))
+          .join(' ')
+        break
+      case 'line':
+      case 'arrow':
+        const dxLine = x - this.offsetX
+        const dyLine = y - this.offsetY
+        const deltaX = dxLine - this.selectedShape.x1!
+        const deltaY = dyLine - this.selectedShape.y1!
+        this.selectedShape.x1 = dxLine
+        this.selectedShape.y1 = dyLine
+        this.selectedShape.x2 = this.selectedShape.x2! + deltaX
+        this.selectedShape.y2 = this.selectedShape.y2! + deltaY
+        break
+    }
+
+    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)
+
+    const scaleX = vbWidth / this.svg.clientWidth
+    const scaleY = vbHeight / this.svg.clientHeight
+
+    return Math.max(scaleX, scaleY)
+  }
+
+  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};"
+              @mousedown="${(e: MouseEvent) => this.onHandleMouseDown(e, shape, handle)}"
+            ></rect>
+          </g>
+        `
+      )}
+    `
+  }
+
+  private onHandleMouseDown(event: MouseEvent, 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)
+  }
+
+  private onHandleMouseMove = (event: MouseEvent) => {
+    if (!this.selectedShape) return
+    const { x, y } = this.getSvgPoint(event)
+
+    switch (this.selectedShape.type) {
+      case 'text':
+      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
+        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 onHandleMouseUp = () => {
+    const svg = this.svg as SVGSVGElement
+    svg.removeEventListener('mousemove', this.onHandleMouseMove)
+    svg.removeEventListener('mouseup', this.onHandleMouseUp)
+    this.selectedShape = null
+  }
+
+  private onTextDoubleClick(event: MouseEvent, shape: Shape) {
+    event.stopPropagation()
+
+    var input: HTMLInputElement | null = document.createElement('input')
+    input.style.position = 'absolute'
+    input.style.left = `${event.clientX}px`
+    input.style.top = `${event.clientY}px`
+    input.value = shape.text || ''
+    document.body.appendChild(input)
+    input.focus()
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter') {
+        shape.text = input!.value
+        document.body.removeChild(input!)
+        input = null
+
+        this.requestUpdate()
+      } else if (e.key === 'Escape') {
+        document.body.removeChild(input!)
+        input = null
+
+        this.requestUpdate()
+      }
+    })
+
+    input.addEventListener('blur', () => {
+      requestAnimationFrame(() => {
+        input && document.body.removeChild(input)
+        input = null
+      })
+    })
+  }
+}

package/src/types.ts

@@ -0,0 +1,20 @@
+export type ShapeType = 'text' | 'rectangle' | 'circle' | 'triangle' | 'line' | 'arrow'
+export type ImageMarkerMode = 'move' | 'select' | 'draw'
+export interface Shape {
+  id: string
+  type: ShapeType
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  cx?: number
+  cy?: number
+  r?: number
+  points?: string
+  x1?: number
+  y1?: number
+  x2?: number
+  y2?: number
+  selected?: boolean
+  text?: string
+}

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

@@ -0,0 +1,41 @@
+import '../src/ox-image-marker-mode.js'
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-image-marker-mode',
+  component: 'ox-image-marker-mode',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <ox-image-marker-mode @mode-changed=${(e: CustomEvent) => console.log(e.detail)}></ox-image-marker-mode>
+`
+
+export const Default = Template.bind({})
+Default.args = {}