@operato/image-marker 8.0.0-alpha.10

package/src/base-image-marker.ts

@@ -0,0 +1,144 @@
+import { LitElement, css, html, svg, nothing } from 'lit'
+import { property, state, query } from 'lit/decorators.js'
+
+import { Shape } from './types'
+
+export class BaseImageMarker extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+
+      .container {
+        flex: 1;
+        position: relative;
+      }
+
+      svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+      }
+    `
+  ]
+
+  @property({ type: String }) imageUrl: string = ''
+  @property({ type: Array }) shapes: Shape[] = []
+
+  @state() protected viewBox = '0 0 800 600'
+  @state() protected zoomLevel = 1
+
+  protected zoomFactor = 0.1
+  protected isPanning = false
+  protected panStart = { x: 0, y: 0 }
+  protected initialViewBox = '0 0 800 600'
+
+  @query('svg') protected svg!: SVGSVGElement
+
+  protected onImageLoad(event: Event) {
+    const img = new Image()
+    img.onload = () => {
+      const width = img.naturalWidth
+      const height = img.naturalHeight
+      this.viewBox = `0 0 ${width} ${height}`
+      this.initialViewBox = `0 0 ${width} ${height}`
+    }
+    img.src = this.imageUrl
+  }
+
+  protected onWheel(event: WheelEvent) {
+    event.preventDefault()
+
+    const { offsetX, offsetY, deltaY } = event
+    const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor
+    this.zoomLevel *= scale
+
+    const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
+    const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth
+    const mouseY = vbY + (offsetY / this.svg.clientHeight) * vbHeight
+
+    const newVbWidth = vbWidth / scale
+    const newVbHeight = vbHeight / scale
+
+    const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth
+    const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight
+
+    this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`
+  }
+
+  protected onSvgMouseDown(event: MouseEvent) {
+    const svg = this.svg
+
+    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)
+  }
+
+  protected onPanMouseMove = (event: MouseEvent) => {
+    if (!this.isPanning) return
+
+    const dx = event.clientX - this.panStart.x
+    const dy = event.clientY - this.panStart.y
+
+    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 - dx * scale
+    const newVbY = vbY - dy * scale
+
+    this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`
+    this.panStart = { x: event.clientX, y: event.clientY }
+  }
+
+  protected onPanMouseUp = () => {
+    const svg = this.svg
+
+    this.isPanning = false
+    svg.classList.remove('dragging')
+    svg.removeEventListener('mousemove', this.onPanMouseMove)
+    svg.removeEventListener('mouseup', this.onPanMouseUp)
+  }
+
+  protected onDoubleClick() {
+    this.viewBox = this.initialViewBox
+    this.zoomLevel = 1
+  }
+
+  protected renderShape(shape: Shape) {
+    const commonAttrs = {
+      stroke: 'red',
+      'stroke-width': 1,
+      fill: 'transparent'
+    }
+
+    switch (shape.type) {
+      case 'text':
+        return svg`<text x="${shape.x}" y="${shape.y}" text-anchor="middle" alignment-baseline="middle" fill="black">${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}"></rect>`
+      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}"></circle>`
+      case 'line':
+        return svg`<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" stroke="${commonAttrs.stroke}" stroke-width="${commonAttrs['stroke-width']}"></line>`
+      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}" y2="${shape.y2}" stroke="${commonAttrs.stroke}" stroke-width="${commonAttrs['stroke-width']}" marker-end="url(#arrowhead-${shape.id})"></line>`
+      default:
+        return nothing
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+import '@material/web/icon/icon.js'
+
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ImageMarkerMode, ShapeType } from './types'
+
+@customElement('ox-image-marker-mode')
+export class OxImageMarkerMode extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium);
+    }
+
+    .palette {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-small);
+      justify-content: center;
+      margin: var(--spacing-medium);
+
+      --md-icon-size: 16px;
+    }
+
+    .palette > * {
+      padding: var(--spacing-small);
+      cursor: pointer;
+      background-color: #f0f0f0;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      width: 12px;
+      height: 12px;
+    }
+
+    .palette [selected] {
+      background-color: #d0d0d0;
+    }
+  `
+
+  @property({ type: String }) currentMode: ImageMarkerMode = 'select'
+  @property({ type: String }) currentShapeType?: ShapeType
+
+  render() {
+    return html`
+      <div class="palette">
+        <md-icon
+          title="Move or Select"
+          ?selected=${this.currentMode !== 'draw'}
+          @click=${() => this.setMode(this.currentMode !== 'select' ? 'select' : 'move')}
+          >${this.currentMode !== 'move' ? 'select' : 'drag_pan'}</md-icon
+        >
+
+        <md-icon
+          title="Text"
+          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'text'}
+          @click=${() => this.setShape('text')}
+          >match_case</md-icon
+        >
+
+        <md-icon
+          title="Rectangle"
+          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'rectangle'}
+          @click=${() => this.setShape('rectangle')}
+          >rectangle</md-icon
+        >
+
+        <md-icon
+          title="Circle"
+          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'circle'}
+          @click=${() => this.setShape('circle')}
+          >circle</md-icon
+        >
+
+        <md-icon
+          title="Triangle"
+          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'triangle'}
+          @click=${() => this.setShape('triangle')}
+          >change_history</md-icon
+        >
+
+        <md-icon
+          title="Line"
+          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'line'}
+          @click=${() => this.setShape('line')}
+          >shape_line</md-icon
+        >
+
+        <md-icon
+          title="Arrow"
+          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'arrow'}
+          @click=${() => this.setShape('arrow')}
+          >line_end_arrow</md-icon
+        >
+      </div>
+
+      <div class="palette">
+        <md-icon title="Delete" @click=${() => this.onClickDelete()}>delete</md-icon>
+        <md-icon title="Save" @click=${() => this.onClickSave()}>save</md-icon>
+      </div>
+    `
+  }
+
+  private setMode(mode: ImageMarkerMode) {
+    this.currentMode = mode
+
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        detail: { mode: this.currentMode, shapeType: this.currentShapeType },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private setShape(shapeType: ShapeType) {
+    this.currentMode = 'draw'
+    this.currentShapeType = shapeType
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        detail: { mode: 'draw', shapeType: this.currentShapeType },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private onClickDelete() {
+    this.dispatchEvent(
+      new CustomEvent('clicked-delete', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private onClickSave() {
+    this.dispatchEvent(
+      new CustomEvent('clicked-save', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+}

package/src/ox-image-marker-view.ts

@@ -0,0 +1,23 @@
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { BaseImageMarker } from './base-image-marker.js'
+
+@customElement('ox-image-marker-view')
+export class OxImageMarkerView extends BaseImageMarker {
+  render() {
+    return html`
+      <div class="container">
+        <svg
+          @wheel=${this.onWheel}
+          @mousedown=${this.onSvgMouseDown}
+          @dblclick=${this.onDoubleClick}
+          viewBox=${this.viewBox}
+        >
+          <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
+          ${this.shapes.map(shape => this.renderShape(shape))}
+        </svg>
+      </div>
+    `
+  }
+}