@operato/ocr 0.2.9 → 0.2.20

package/src/ox-camera-capturer.ts

@@ -0,0 +1,189 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { FileDropHelper } from './utils/file-drop-helper'
+
+@customElement('ox-camera-capturer')
+export class CameraCapturer extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--border-radius);
+        align-items: center;
+        justify-content: center;
+        padding: var(--padding-default, 9px);
+        min-height: 100px;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--main-section-background-color);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+      }
+      :host > mwc-icon {
+        color: var(--file-uploader-icon-color);
+      }
+
+      :host(.candrop) {
+        background-color: var(--file-uploader-candrop-background-color);
+      }
+
+      #input-file {
+        display: none;
+      }
+
+      label {
+        position: relative;
+        width: auto;
+        border: none;
+        text-transform: capitalize;
+
+        padding: var(--file-uploader-label-padding);
+        border-radius: var(--file-uploader-label-border-radius);
+        background-color: var(--file-uploader-label-background-color);
+        color: var(--file-uploader-label-color);
+        font: var(--file-uploader-label-font) !important;
+      }
+
+      ul {
+        max-width: 500px;
+        list-style: none;
+        margin: 5px 0 0 0;
+        padding: 0;
+        max-height: 46px;
+        overflow: auto;
+        background-color: rgba(var(--primary-color-rgb), 0.1);
+      }
+      li {
+        text-align: left;
+
+        padding: 3px 5px 2px 5px;
+        border-bottom: var(--file-uploader-li-border-bottom);
+        font: normal 14px var(--theme-font);
+      }
+      li mwc-icon {
+        float: right;
+        cursor: pointer;
+        margin: var(--file-uploader-li-icon-margin);
+        font-size: 1em;
+      }
+      li mwc-icon:hover,
+      li mwc-icon:active {
+        color: var(--file-uploader-li-icon-focus-color);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) multiple?: boolean
+  @property({ type: String }) accept?: string
+  @property({ type: String }) label?: string
+  @property({ type: Array }) _files?: File[]
+
+  render() {
+    var files = this._files || []
+
+    return html`
+      <mwc-icon>camera</mwc-icon>
+      <span>Capture image or drop files here!</span>
+      <input
+        id="input-file"
+        type="file"
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        hidden
+        capture="environment"
+        @change=${(e: Event) => {
+          const fileInput = e.currentTarget as HTMLInputElement
+
+          this._files = [...files, ...Array.from(fileInput.files as FileList)]
+
+          this.dispatchEvent(
+            new CustomEvent('files-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                files: files
+              }
+            })
+          )
+
+          // fileInput.value = null
+          fileInput.files = null
+        }}
+      />
+      <!-- <label for="input-file">${this.label || 'capture image'}</label> -->
+
+      ${files?.length
+        ? html` <ul>
+            ${files.map(
+              file => html`
+                <li>
+                  - ${file.name}
+                  <mwc-icon
+                    @click=${(e: Event) => {
+                      files.splice(files.indexOf(file), 1)
+                      this._files = [...files]
+                      this.dispatchEvent(
+                        new CustomEvent('files-change', {
+                          bubbles: true,
+                          composed: true,
+                          detail: {
+                            files: this._files
+                          }
+                        })
+                      )
+                    }}
+                    >delete_outline</mwc-icon
+                  >
+                </li>
+              `
+            )}
+          </ul>`
+        : ''}
+    `
+  }
+
+  firstUpdated() {
+    FileDropHelper.set(this)
+
+    this.addEventListener('file-drop', (e: Event) => {
+      const detail = (e as CustomEvent).detail
+      this._files = this.multiple ? detail : detail[0] ? [detail[0]] : []
+
+      this.dispatchEvent(
+        new CustomEvent('files-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            files: this._files
+          }
+        })
+      )
+    })
+  }
+
+  @query('#input-file') fileInput!: HTMLInputElement
+
+  get files() {
+    return this._files
+  }
+
+  reset() {
+    this.fileInput.value = ''
+    this._files = []
+
+    this.dispatchEvent(
+      new CustomEvent('files-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          files: this._files
+        }
+      })
+    )
+  }
+}

package/src/{ocr-helper.ts → ox-ocr-helper.ts}

@@ -1,12 +1,13 @@
-import './camera-capturer'
 import '@material/mwc-button'
+import './ox-camera-capturer'
+import './ox-ocr-result-image'
 
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { gql } from 'graphql-tag'
+import { NOTHING_RESULT, ScanResult } from './type'
 
-@customElement('ocr-helper')
+@customElement('ox-ocr-helper')
 export class OcrHelper extends LitElement {
   static styles = [
     css`
@@ -23,7 +24,7 @@ export class OcrHelper extends LitElement {
 
       #images {
         flex: 1;
-        background-color: black;
+        background-color: var(--main-section-background-color, #f4f7fb);
         color: white;
 
         display: flex;
@@ -37,46 +38,41 @@ export class OcrHelper extends LitElement {
 
       [i] {
         min-width: 50px;
-        background-color: black;
+        background-color: var(--secondary-color, #394e64);
+        border-right: 1px solid rgba(0, 0, 0, 0.2);
+        padding: var(--padding-narrow, 4px);
         text-align: center;
+        height: 1.4em;
       }
 
       [i][active] {
-        background-color: red;
+        background-color: var(--primary-color, #22a6a7);
+        font-weight: bold;
       }
 
-      [image] {
+      ox-ocr-result-image {
         flex: 1;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      img {
-        style=width: 100%;
       }
     `
   ]
 
-  @property({ type: Array }) _files: any
-  @property({ type: Number }) index: number = 0
+  @property({ type: Array }) result: ScanResult[] = []
+
+  @state() _files: any
+  @state() _index: number = 0
 
   @query('#capturer') fileUploader!: any
-  @query('#result') result!: any
+  @query('#copied') copied!: HTMLElement
 
   render() {
     const files = this._files || []
-    const index = this.index || 0
+    const index = this._index || 0
     const file = files[index]
-    const image = file && URL.createObjectURL(file)
-    if (image) {
-      requestAnimationFrame(() => URL.revokeObjectURL(image))
-    }
+    const result = this.result?.[index] || NOTHING_RESULT
 
     return html`
       <div attachment-wrap>
-        <camera-capturer
+        <ox-camera-capturer
           name="scanner"
           id="capturer"
           label="Capture Images"
@@ -85,10 +81,10 @@ export class OcrHelper extends LitElement {
           ?hidden=${false}
           custom-input
           @files-change=${(e: Event) => this.fileschange(e)}
-        ></camera-capturer>
+        ></ox-camera-capturer>
       </div>
       <div buttons>
-        <mwc-button @click=${(e: Event) => this.upload()}>submit</mwc-button>
+        <mwc-button @click=${(e: Event) => this.submit()}>submit</mwc-button>
         <mwc-button @click=${(e: Event) => this.reset()}>reset</mwc-button>
       </div>
       <div id="images">
@@ -98,15 +94,20 @@ export class OcrHelper extends LitElement {
             const item = (e.target as HTMLElement)?.closest('[i]')
             const children = (e.currentTarget as HTMLElement)?.querySelectorAll('[i]')
             if (item) {
-              this.index = Array.from(children).indexOf(item)
+              this._index = Array.from(children).indexOf(item)
             }
           }}
         >
           ${files.map((file: any, idx: number) => html`<div i ?active=${idx === index}>${idx}</div>`)}
         </div>
-        <div image>${file ? html` <img src=${URL.createObjectURL(file)} /> ` : html``}</div>
+        <ox-ocr-result-image
+          .file=${file}
+          @selected=${(e: CustomEvent) => this.onSelected(e)}
+          .result=${result}
+        ></ox-ocr-result-image>
       </div>
-      <div id="result"></div>
+
+      <div id="copied"></div>
     `
   }
 
@@ -116,25 +117,18 @@ export class OcrHelper extends LitElement {
 
   reset() {
     this.fileUploader.reset()
-    this.result.textContent = ''
+    this.copied.textContent = ''
+  }
+
+  onSelected(e: CustomEvent) {
+    navigator.clipboard.writeText(e.detail)
   }
 
-  async upload() {
-    // const response = await client.query({
-    //   query: gql`
-    //     query ocrRequest($images: [Upload!]!) {
-    //       ocrRequest(images: $images)
-    //     }
-    //   `,
-    //   variables: {
-    //     images: this.fileUploader?.files
-    //   },
-    //   context: { hasUpload: true }
-    // })
-    // if (!response.errors) {
-    //   this.result.textContent = response.data.ocrRequest
-    // } else {
-    //   this.result.textContent = 'error'
-    // }
+  async submit() {
+    this.dispatchEvent(
+      new CustomEvent('attached', {
+        detail: this.fileUploader?.files
+      })
+    )
   }
 }

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

@@ -0,0 +1,303 @@
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { NOTHING_RESULT, ScanResult } from './type'
+import { touch2mouse } from './utils/touch-to-mouse-event'
+
+@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 = NOTHING_RESULT
+
+  @state() _ratio: { x: number; y: number } = { x: 1, y: 1 }
+  @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} @load=${() => this.calculateRatio()} />
+      <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
+    const { offsetWidth: overlayWidth, offsetHeight: overlayHeight } = this._overlay
+
+    if (!naturalWidth || !naturalHeight) {
+      return
+    }
+
+    this._ratio = {
+      x: offsetWidth / naturalWidth,
+      y: offsetHeight / naturalHeight
+    }
+
+    this._overlay.setAttribute('width', String(overlayWidth / this._ratio.x))
+    this._overlay.setAttribute('height', String(overlayHeight / this._ratio.y))
+  }
+
+  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()
+  }
+
+  initialize() {
+    this._selections = []
+    this._trails = []
+    this._text = ''
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('file') || changes.has('result')) {
+      this.initialize()
+    }
+
+    if (changes.has('file')) {
+      this._image = this.file && URL.createObjectURL(this.file)
+      if (this._image) {
+        requestAnimationFrame(() => {
+          URL.revokeObjectURL(this._image)
+        })
+
+        await this.updateComplete
+        this.calculateRatio()
+      }
+    }
+
+    this.renderOverlay()
+  }
+
+  findIndex(x: number, y: number): number {
+    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.initialize()
+    }
+
+    if (started) {
+      this._trails.push([])
+    }
+
+    var trail = this._trails[this._trails.length - 1]
+    if (!trail) {
+      return
+    }
+
+    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: x / this._ratio.x, y: y / this._ratio.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: x / this._ratio.x, y: y / this._ratio.y }, false)
+  }
+}

package/src/type.ts

@@ -0,0 +1,13 @@
+export type ScanResult = {
+  key_values: {
+    [key: string]: Array<string>
+  }
+  boundaries: Array<Array<{ x: number; y: number }>>
+  texts: Array<string>
+}
+
+export const NOTHING_RESULT = {
+  boundaries: [],
+  key_values: {},
+  texts: []
+}