@operato/ocr 0.2.19 → 0.2.20

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.20",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -68,5 +68,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5d37e55fbed0193831675a3d5fcc941e33083bc9"
+  "gitHead": "7142b87dbb0923c5f0efb95fedf3363a336092d8"
 }

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[] = []
+
+  @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 result = this.result?.[index] || NOTHING_RESULT
 
     return html`
       <div attachment-wrap>
@@ -89,16 +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>
-        <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>
     `
   }
 
@@ -108,7 +117,7 @@ export class OcrHelper extends LitElement {
 
   reset() {
     this.fileUploader.reset()
-    this.result.textContent = ''
+    this.copied.textContent = ''
   }
 
   onSelected(e: CustomEvent) {
@@ -121,21 +130,5 @@ export class OcrHelper extends LitElement {
         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'
-    // }
   }
 }