@operato/ocr 0.2.19 → 0.2.23

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ocr following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh@hatiolab.com",
-  "version": "0.2.19",
+  "version": "0.2.23",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -68,5 +68,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5d37e55fbed0193831675a3d5fcc941e33083bc9"
+  "gitHead": "dac60531adc2e2583937eef3945c8aee3daa0958"
 }

package/src/ox-camera-capturer.ts

@@ -1,7 +1,7 @@
 import '@material/mwc-icon'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { FileDropHelper } from './utils/file-drop-helper'
 
@@ -81,7 +81,12 @@ export class CameraCapturer extends LitElement {
   @property({ type: Boolean }) multiple?: boolean
   @property({ type: String }) accept?: string
   @property({ type: String }) label?: string
-  @property({ type: Array }) _files?: File[]
+  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })
+  hideFileList: boolean = false
+  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })
+  attachFileList: boolean = false
+
+  @state() _files?: File[]
 
   render() {
     var files = this._files || []
@@ -99,7 +104,9 @@ export class CameraCapturer extends LitElement {
         @change=${(e: Event) => {
           const fileInput = e.currentTarget as HTMLInputElement
 
-          this._files = [...files, ...Array.from(fileInput.files as FileList)]
+          this._files = this.attachFileList
+            ? [...files, ...Array.from(fileInput.files as FileList)]
+            : [...Array.from(fileInput.files as FileList)]
 
           this.dispatchEvent(
             new CustomEvent('files-change', {
@@ -115,9 +122,9 @@ export class CameraCapturer extends LitElement {
           fileInput.files = null
         }}
       />
-      <!-- <label for="input-file">${this.label || 'capture image'}</label> -->
+      <label for="input-file">${this.label || 'capture image'}</label>
 
-      ${files?.length
+      ${!this.hideFileList && files?.length
         ? html` <ul>
             ${files.map(
               file => html`
@@ -143,7 +150,7 @@ export class CameraCapturer extends LitElement {
               `
             )}
           </ul>`
-        : ''}
+        : html``}
     `
   }
 

package/src/ox-ocr-helper.ts

@@ -3,7 +3,9 @@ import './ox-camera-capturer'
 import './ox-ocr-result-image'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { NOTHING_RESULT, ScanResult } from './type'
 
 @customElement('ox-ocr-helper')
 export class OcrHelper extends LitElement {
@@ -54,16 +56,19 @@ export class OcrHelper extends LitElement {
     `
   ]
 
-  @property({ type: Array }) _files: any
-  @property({ type: Number }) index: number = 0
+  @property({ type: Array }) result: ScanResult[] = []
+  @property({ type: Array }) files: Array<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 files = this.files || []
+    const index = this._index || 0
     const file = files[index]
+    const result = this.result?.[index] || NOTHING_RESULT
 
     return html`
       <div attachment-wrap>
@@ -76,12 +81,9 @@ export class OcrHelper extends LitElement {
           ?hidden=${false}
           custom-input
           @files-change=${(e: Event) => this.fileschange(e)}
+          hide-filelist
         ></ox-camera-capturer>
       </div>
-      <div buttons>
-        <mwc-button @click=${(e: Event) => this.submit()}>submit</mwc-button>
-        <mwc-button @click=${(e: Event) => this.reset()}>reset</mwc-button>
-      </div>
       <div id="images">
         <div
           tab
@@ -89,53 +91,39 @@ 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>
-        <ox-ocr-result-image .file=${file} @selected=${(e: CustomEvent) => this.onSelected(e)}></ox-ocr-result-image>
+        <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>
     `
   }
 
   fileschange(e: Event) {
-    this._files = this.fileUploader.files
+    this.files = this.fileUploader.files
+
+    this.dispatchEvent(
+      new CustomEvent('attached', {
+        detail: this.fileUploader?.files
+      })
+    )
   }
 
   reset() {
     this.fileUploader.reset()
-    this.result.textContent = ''
+    this.copied.textContent = ''
   }
 
   onSelected(e: CustomEvent) {
     navigator.clipboard.writeText(e.detail)
   }
-
-  async submit() {
-    this.dispatchEvent(
-      new CustomEvent('attached', {
-        detail: this.fileUploader?.files
-      })
-    )
-    // 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'
-    // }
-  }
 }