@operato/ocr 0.2.15 → 0.2.19

package/src/ox-ocr-result-image.ts

@@ -0,0 +1,954 @@
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { touch2mouse } from './utils/touch-to-mouse-event'
+
+type ScanResult = {
+  status_code: number
+  key_values: {
+    [key: string]: Array<string>
+  }
+  boundaries: Array<Array<{ x: number; y: number }>>
+  texts: Array<string>
+}
+
+@customElement('ox-ocr-result-image')
+export class OcrResultImage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      img {
+        display: block;
+        flex: 1;
+        border: 0;
+        padding: 0;
+        margin: 0;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      [overlay] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        border: 0;
+        padding: 0;
+        margin: 0;
+        opacity: 50%;
+      }
+
+      [notice] {
+        position: absolute;
+        bottom: 0;
+        background-color: var(--primary-color, #38a25b);
+        padding: var(--padding-default, 9px) var(--padding-wide, 15px);
+        opacity: 0.95;
+
+        overflow-wrap: anywhere;
+
+        color: #fff;
+        font-size: 1.5em;
+      }
+    `
+  ]
+
+  @property({ type: Array }) file: any
+  @property({ type: Array }) result: ScanResult = RESULT
+
+  @state() _ratio!: { x: number; y: number }
+  @state() _image!: string
+  @state() _resizeObserver!: ResizeObserver
+  @state() _trails: Array<Array<{ x: number; y: number }>> = []
+  @state() _tracking: boolean = false
+  @state() _selections: Array<number> = []
+  @state() _text: string = ''
+
+  @query('img') _img!: HTMLImageElement
+  @query('[overlay]') _overlay!: HTMLCanvasElement
+
+  render() {
+    return html`
+      <img src=${this._image} />
+      <canvas overlay></canvas>
+
+      ${this._text ? html` <div notice>${this._text} copied!</div> ` : html``}
+    `
+  }
+
+  renderOverlay() {
+    const { boundaries } = this.result
+
+    const context = this._overlay.getContext('2d')
+    if (!context) {
+      return
+    }
+
+    context.save()
+
+    context.clearRect(0, 0, this._overlay.width, this._overlay.height)
+
+    context.lineWidth = 5
+    context.strokeStyle = 'red'
+    context.fillStyle = 'red'
+    context.lineJoin = 'round'
+    context.lineCap = 'round'
+
+    this._image &&
+      boundaries
+        .map((bounds): Array<{ x: number; y: number }> => {
+          return bounds.map(bound => {
+            return {
+              x: bound.x * this._ratio.x,
+              y: bound.y * this._ratio.y
+            }
+          })
+        })
+        .forEach((bounds, idx) => {
+          context.beginPath()
+          context.moveTo(bounds[0].x, bounds[0].y)
+          context.lineTo(bounds[1].x, bounds[1].y)
+          context.lineTo(bounds[2].x, bounds[2].y)
+          context.lineTo(bounds[3].x, bounds[3].y)
+          context.closePath()
+
+          if (this._selections.includes(idx)) {
+            context.fill()
+          }
+          context.stroke()
+        })
+
+    /* draw trails */
+    if (this._trails && this._trails.length > 0) {
+      context.lineWidth = 10
+      context.strokeStyle = 'blue'
+
+      context.beginPath()
+
+      this._trails.forEach(trail => {
+        if (trail && trail.length > 0) {
+          const { x, y } = trail[0]
+          context.moveTo(x, y)
+
+          trail.slice(1).forEach(point => {
+            const { x, y } = point
+            context.lineTo(x, y)
+          })
+        }
+      })
+
+      context.stroke()
+    }
+
+    context.restore()
+  }
+
+  async calculateRatio() {
+    const { naturalWidth, naturalHeight, offsetWidth, offsetHeight } = this._img
+
+    this._overlay.setAttribute('width', String(offsetWidth))
+    this._overlay.setAttribute('height', String(offsetHeight))
+
+    this._ratio = {
+      x: offsetWidth / naturalWidth,
+      y: offsetHeight / naturalHeight
+    }
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback()
+
+    this._resizeObserver = new ResizeObserver(entries => {
+      this.calculateRatio()
+      this.renderOverlay()
+    })
+
+    await this.updateComplete
+    this._resizeObserver.observe(this._overlay)
+
+    this.calculateRatio()
+
+    this.addEventListener('mousedown', this.onTrailStart.bind(this) as EventListener)
+    this.addEventListener('mouseup', this.onTrailEnd.bind(this) as EventListener)
+    this.addEventListener('mousemove', this.onTrail.bind(this) as EventListener)
+    this.addEventListener('touchstart', touch2mouse as EventListener)
+    this.addEventListener('touchend', touch2mouse as EventListener)
+    this.addEventListener('touchmove', touch2mouse as EventListener)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._resizeObserver.disconnect()
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('file')) {
+      this._image = this.file && URL.createObjectURL(this.file)
+      if (this._image) {
+        requestAnimationFrame(() => URL.revokeObjectURL(this._image))
+      }
+    }
+
+    await this.updateComplete
+
+    this.renderOverlay()
+  }
+
+  findIndex(x: number, y: number): number {
+    x /= this._ratio.x
+    y /= this._ratio.y
+
+    const { boundaries } = this.result
+
+    return boundaries.findIndex(path => {
+      var result = false
+
+      path.forEach((p, idx) => {
+        let j = (idx + path.length + 1) % path.length
+
+        let x1 = p.x
+        let y1 = p.y
+        let x2 = path[j].x
+        let y2 = path[j].y
+
+        if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) {
+          result = !result
+        }
+      })
+
+      return result
+    })
+  }
+
+  updateTrails(point: { x: number; y: number }, started: boolean, attached?: boolean) {
+    if (started && !attached) {
+      this._selections = []
+      this._trails = []
+    }
+
+    if (started) {
+      this._trails.push([])
+    }
+
+    var trail = this._trails[this._trails.length - 1]
+
+    trail.push(point)
+
+    this._trails.flat().forEach(({ x, y }) => {
+      const idx = this.findIndex(x, y)
+      if (idx === -1) {
+        return
+      }
+
+      if (!this._selections.includes(idx)) {
+        this._selections.push(idx)
+      }
+    })
+
+    this.requestUpdate()
+  }
+
+  onTrailStart(e: MouseEvent) {
+    const { offsetX: x, offsetY: y, button, shiftKey } = e
+
+    if (button !== 0) {
+      return
+    }
+
+    this._tracking = true
+    this.updateTrails({ x, y }, true, shiftKey)
+  }
+
+  onTrailEnd(e: MouseEvent) {
+    if (!this._tracking) {
+      return
+    }
+
+    this._text = this._selections.map(idx => this.result.texts[idx]).join('')
+
+    this.dispatchEvent(
+      new CustomEvent('selected', {
+        detail: this._text
+      })
+    )
+
+    this._tracking = false
+  }
+
+  onTrail(e: MouseEvent) {
+    const { offsetX: x, offsetY: y } = e
+
+    if (!this._tracking) {
+      return
+    }
+
+    this.updateTrails({ x, y }, false)
+  }
+}
+
+const RESULT = {
+  status_code: 200,
+  key_values: {
+    '1P': ['LNK304PG'],
+    Q: ['259', '311', '430'],
+    '9D': ['2139', '2139', '2135'],
+    '1T': ['BA268F', 'BA268C', 'BC488D']
+  },
+  boundaries: [
+    [
+      {
+        x: 217.0,
+        y: 117.0
+      },
+      {
+        x: 291.0,
+        y: 120.0
+      },
+      {
+        x: 291.0,
+        y: 143.0
+      },
+      {
+        x: 216.0,
+        y: 140.0
+      }
+    ],
+    [
+      {
+        x: 294.0,
+        y: 120.0
+      },
+      {
+        x: 442.0,
+        y: 129.0
+      },
+      {
+        x: 441.0,
+        y: 151.0
+      },
+      {
+        x: 292.0,
+        y: 143.0
+      }
+    ],
+    [
+      {
+        x: 443.0,
+        y: 130.0
+      },
+      {
+        x: 484.0,
+        y: 130.0
+      },
+      {
+        x: 484.0,
+        y: 151.0
+      },
+      {
+        x: 443.0,
+        y: 151.0
+      }
+    ],
+    [
+      {
+        x: 549.0,
+        y: 134.0
+      },
+      {
+        x: 642.0,
+        y: 138.0
+      },
+      {
+        x: 642.0,
+        y: 157.0
+      },
+      {
+        x: 548.0,
+        y: 152.0
+      }
+    ],
+    [
+      {
+        x: 255.0,
+        y: 163.0
+      },
+      {
+        x: 390.0,
+        y: 167.0
+      },
+      {
+        x: 389.0,
+        y: 191.0
+      },
+      {
+        x: 254.0,
+        y: 187.0
+      }
+    ],
+    [
+      {
+        x: 212.0,
+        y: 208.0
+      },
+      {
+        x: 255.0,
+        y: 208.0
+      },
+      {
+        x: 255.0,
+        y: 235.0
+      },
+      {
+        x: 212.0,
+        y: 235.0
+      }
+    ],
+    [
+      {
+        x: 257.0,
+        y: 210.0
+      },
+      {
+        x: 320.0,
+        y: 210.0
+      },
+      {
+        x: 320.0,
+        y: 232.0
+      },
+      {
+        x: 257.0,
+        y: 232.0
+      }
+    ],
+    [
+      {
+        x: 383.0,
+        y: 214.0
+      },
+      {
+        x: 480.0,
+        y: 218.0
+      },
+      {
+        x: 480.0,
+        y: 240.0
+      },
+      {
+        x: 383.0,
+        y: 236.0
+      }
+    ],
+    [
+      {
+        x: 215.0,
+        y: 301.0
+      },
+      {
+        x: 382.0,
+        y: 301.0
+      },
+      {
+        x: 382.0,
+        y: 325.0
+      },
+      {
+        x: 215.0,
+        y: 325.0
+      }
+    ],
+    [
+      {
+        x: 436.0,
+        y: 305.0
+      },
+      {
+        x: 539.0,
+        y: 305.0
+      },
+      {
+        x: 539.0,
+        y: 327.0
+      },
+      {
+        x: 436.0,
+        y: 327.0
+      }
+    ],
+    [
+      {
+        x: 537.0,
+        y: 308.0
+      },
+      {
+        x: 582.0,
+        y: 308.0
+      },
+      {
+        x: 582.0,
+        y: 328.0
+      },
+      {
+        x: 537.0,
+        y: 328.0
+      }
+    ],
+    [
+      {
+        x: 594.0,
+        y: 309.0
+      },
+      {
+        x: 624.0,
+        y: 309.0
+      },
+      {
+        x: 624.0,
+        y: 334.0
+      },
+      {
+        x: 594.0,
+        y: 334.0
+      }
+    ],
+    [
+      {
+        x: 624.0,
+        y: 310.0
+      },
+      {
+        x: 659.0,
+        y: 310.0
+      },
+      {
+        x: 659.0,
+        y: 330.0
+      },
+      {
+        x: 624.0,
+        y: 330.0
+      }
+    ],
+    [
+      {
+        x: 675.0,
+        y: 311.0
+      },
+      {
+        x: 707.0,
+        y: 311.0
+      },
+      {
+        x: 707.0,
+        y: 330.0
+      },
+      {
+        x: 675.0,
+        y: 330.0
+      }
+    ],
+    [
+      {
+        x: 735.0,
+        y: 342.0
+      },
+      {
+        x: 775.0,
+        y: 342.0
+      },
+      {
+        x: 775.0,
+        y: 360.0
+      },
+      {
+        x: 735.0,
+        y: 360.0
+      }
+    ],
+    [
+      {
+        x: 806.0,
+        y: 341.0
+      },
+      {
+        x: 829.0,
+        y: 341.0
+      },
+      {
+        x: 829.0,
+        y: 359.0
+      },
+      {
+        x: 806.0,
+        y: 359.0
+      }
+    ],
+    [
+      {
+        x: 217.0,
+        y: 386.0
+      },
+      {
+        x: 381.0,
+        y: 383.0
+      },
+      {
+        x: 381.0,
+        y: 407.0
+      },
+      {
+        x: 217.0,
+        y: 410.0
+      }
+    ],
+    [
+      {
+        x: 436.0,
+        y: 387.0
+      },
+      {
+        x: 536.0,
+        y: 387.0
+      },
+      {
+        x: 536.0,
+        y: 410.0
+      },
+      {
+        x: 436.0,
+        y: 410.0
+      }
+    ],
+    [
+      {
+        x: 535.0,
+        y: 388.0
+      },
+      {
+        x: 577.0,
+        y: 388.0
+      },
+      {
+        x: 577.0,
+        y: 407.0
+      },
+      {
+        x: 535.0,
+        y: 407.0
+      }
+    ],
+    [
+      {
+        x: 590.0,
+        y: 387.0
+      },
+      {
+        x: 617.0,
+        y: 387.0
+      },
+      {
+        x: 617.0,
+        y: 411.0
+      },
+      {
+        x: 590.0,
+        y: 411.0
+      }
+    ],
+    [
+      {
+        x: 618.0,
+        y: 388.0
+      },
+      {
+        x: 653.0,
+        y: 388.0
+      },
+      {
+        x: 653.0,
+        y: 409.0
+      },
+      {
+        x: 618.0,
+        y: 409.0
+      }
+    ],
+    [
+      {
+        x: 669.0,
+        y: 389.0
+      },
+      {
+        x: 702.0,
+        y: 389.0
+      },
+      {
+        x: 702.0,
+        y: 408.0
+      },
+      {
+        x: 669.0,
+        y: 408.0
+      }
+    ],
+    [
+      {
+        x: 728.0,
+        y: 416.0
+      },
+      {
+        x: 769.0,
+        y: 416.0
+      },
+      {
+        x: 769.0,
+        y: 436.0
+      },
+      {
+        x: 728.0,
+        y: 436.0
+      }
+    ],
+    [
+      {
+        x: 798.0,
+        y: 416.0
+      },
+      {
+        x: 822.0,
+        y: 416.0
+      },
+      {
+        x: 822.0,
+        y: 433.0
+      },
+      {
+        x: 798.0,
+        y: 433.0
+      }
+    ],
+    [
+      {
+        x: 219.0,
+        y: 465.0
+      },
+      {
+        x: 381.0,
+        y: 460.0
+      },
+      {
+        x: 382.0,
+        y: 482.0
+      },
+      {
+        x: 220.0,
+        y: 487.0
+      }
+    ],
+    [
+      {
+        x: 434.0,
+        y: 463.0
+      },
+      {
+        x: 534.0,
+        y: 461.0
+      },
+      {
+        x: 534.0,
+        y: 481.0
+      },
+      {
+        x: 435.0,
+        y: 483.0
+      }
+    ],
+    [
+      {
+        x: 532.0,
+        y: 462.0
+      },
+      {
+        x: 574.0,
+        y: 462.0
+      },
+      {
+        x: 574.0,
+        y: 479.0
+      },
+      {
+        x: 532.0,
+        y: 479.0
+      }
+    ],
+    [
+      {
+        x: 587.0,
+        y: 461.0
+      },
+      {
+        x: 614.0,
+        y: 461.0
+      },
+      {
+        x: 614.0,
+        y: 482.0
+      },
+      {
+        x: 587.0,
+        y: 482.0
+      }
+    ],
+    [
+      {
+        x: 616.0,
+        y: 461.0
+      },
+      {
+        x: 650.0,
+        y: 463.0
+      },
+      {
+        x: 649.0,
+        y: 481.0
+      },
+      {
+        x: 615.0,
+        y: 479.0
+      }
+    ],
+    [
+      {
+        x: 664.0,
+        y: 461.0
+      },
+      {
+        x: 697.0,
+        y: 461.0
+      },
+      {
+        x: 697.0,
+        y: 479.0
+      },
+      {
+        x: 664.0,
+        y: 479.0
+      }
+    ],
+    [
+      {
+        x: 723.0,
+        y: 486.0
+      },
+      {
+        x: 761.0,
+        y: 486.0
+      },
+      {
+        x: 761.0,
+        y: 504.0
+      },
+      {
+        x: 723.0,
+        y: 504.0
+      }
+    ],
+    [
+      {
+        x: 792.0,
+        y: 485.0
+      },
+      {
+        x: 814.0,
+        y: 485.0
+      },
+      {
+        x: 814.0,
+        y: 500.0
+      },
+      {
+        x: 792.0,
+        y: 500.0
+      }
+    ],
+    [
+      {
+        x: 586.0,
+        y: 535.0
+      },
+      {
+        x: 626.0,
+        y: 535.0
+      },
+      {
+        x: 626.0,
+        y: 551.0
+      },
+      {
+        x: 586.0,
+        y: 551.0
+      }
+    ],
+    [
+      {
+        x: 664.0,
+        y: 533.0
+      },
+      {
+        x: 700.0,
+        y: 533.0
+      },
+      {
+        x: 700.0,
+        y: 548.0
+      },
+      {
+        x: 664.0,
+        y: 548.0
+      }
+    ]
+  ],
+  texts: [
+    'POWER',
+    'INTEGRATIONS',
+    'INC.',
+    '15/10/2021',
+    'LinkSwitchTM',
+    '(1P)',
+    'PROD:',
+    'LNK304PG',
+    '(1T)LotNo:BA268F',
+    '(9D)DtCode:',
+    '2139',
+    '(Q)',
+    'Qty:',
+    '259',
+    'COO:',
+    'CN',
+    '(1T)LotNo:BA268C',
+    '(9D)DtCode:',
+    '2139',
+    '(Q)',
+    'Qty:',
+    '311',
+    'COO:',
+    'CN',
+    '(1T)LotNo:BC488D',
+    '(9D)DtCode:',
+    '2135',
+    '(Q)',
+    'Qty:',
+    '430',
+    'COO:',
+    'CN',
+    'Total',
+    '1000'
+  ]
+}