@operato/ocr 0.2.15 → 0.2.22

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './ocr-helper.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './ox-ocr-helper.js'\n"]}

package/dist/src/{camera-capturer.js → ox-camera-capturer.js}

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { FileDropHelper } from './file-drop-helper';
+import { FileDropHelper } from './utils/file-drop-helper';
 let CameraCapturer = class CameraCapturer extends LitElement {
     render() {
         var files = this._files || [];
         return html `
       <mwc-icon>camera</mwc-icon>
-      <span>Capture image<br />or drop files here!</span>
+      <span>Capture image or drop files here!</span>
       <input
         id="input-file"
         type="file"
@@ -39,7 +39,8 @@ let CameraCapturer = class CameraCapturer extends LitElement {
                   - ${file.name}
                   <mwc-icon
                     @click=${(e) => {
-                this._files = [...files.splice(files.indexOf(file), 1)];
+                files.splice(files.indexOf(file), 1);
+                this._files = [...files];
                 this.dispatchEvent(new CustomEvent('files-change', {
                     bubbles: true,
                     composed: true,
@@ -91,8 +92,10 @@ CameraCapturer.styles = [
         display: flex;
         flex-direction: column;
         border-radius: var(--border-radius);
-        text-align: center;
-        padding-bottom: 5px !important;
+        align-items: center;
+        justify-content: center;
+        padding: var(--padding-default, 9px);
+        min-height: 100px;
         text-transform: capitalize;
 
         border: var(--file-uploader-border);
@@ -128,19 +131,24 @@ CameraCapturer.styles = [
       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: var(--file-uploader-li-padding);
+        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;
-        font: var(--file-uploader-li-icon-font);
         margin: var(--file-uploader-li-icon-margin);
+        font-size: 1em;
       }
       li mwc-icon:hover,
       li mwc-icon:active {
@@ -164,7 +172,7 @@ __decorate([
     query('#input-file')
 ], CameraCapturer.prototype, "fileInput", void 0);
 CameraCapturer = __decorate([
-    customElement('camera-capturer')
+    customElement('ox-camera-capturer')
 ], CameraCapturer);
 export { CameraCapturer };
-//# sourceMappingURL=camera-capturer.js.map
+//# sourceMappingURL=ox-camera-capturer.js.map

package/dist/src/ox-camera-capturer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-camera-capturer.js","sourceRoot":"","sources":["../../src/ox-camera-capturer.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAGzD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IA6E5C,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE7B,OAAO,IAAI,CAAA;;;;;;iBAME,IAAI,CAAC,MAAM;oBACR,IAAI,CAAC,QAAQ;;;kBAGf,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,CAAC,CAAC,aAAiC,CAAA;YAErD,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC,CAAA;YAEpE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,KAAK,EAAE,KAAK;iBACb;aACF,CAAC,CACH,CAAA;YAED,yBAAyB;YACzB,SAAS,CAAC,KAAK,GAAG,IAAI,CAAA;QACxB,CAAC;;gCAEuB,IAAI,CAAC,KAAK,IAAI,eAAe;;QAErD,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM;YACb,CAAC,CAAC,IAAI,CAAA;cACA,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;sBAEJ,IAAI,CAAC,IAAI;;6BAEF,CAAC,CAAQ,EAAE,EAAE;gBACpB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;gBACpC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAA;gBACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;oBAC9B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,KAAK,EAAE,IAAI,CAAC,MAAM;qBACnB;iBACF,CAAC,CACH,CAAA;YACH,CAAC;;;;eAIN,CACF;gBACG;YACR,CAAC,CAAC,EAAE;KACP,CAAA;IACH,CAAC;IAED,YAAY;QACV,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC9C,MAAM,MAAM,GAAI,CAAiB,CAAC,MAAM,CAAA;YACxC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YAEnE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,MAAM;iBACnB;aACF,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAID,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAEhB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,MAAM;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAnLQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmEF;CACF,CAAA;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAmB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAgB;AAqFpB;IAArB,KAAK,CAAC,aAAa,CAAC;iDAA6B;AAhKvC,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAoL1B;SApLY,cAAc","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from './utils/file-drop-helper'\n\n@customElement('ox-camera-capturer')\nexport class CameraCapturer extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) label?: string\n  @property({ type: Array }) _files?: File[]\n\n  render() {\n    var files = this._files || []\n\n    return html`\n      <mwc-icon>camera</mwc-icon>\n      <span>Capture image or drop files here!</span>\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => {\n          const fileInput = e.currentTarget as HTMLInputElement\n\n          this._files = [...files, ...Array.from(fileInput.files as FileList)]\n\n          this.dispatchEvent(\n            new CustomEvent('files-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                files: files\n              }\n            })\n          )\n\n          // fileInput.value = null\n          fileInput.files = null\n        }}\n      />\n      <label for=\"input-file\">${this.label || 'capture image'}</label>\n\n      ${files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      files.splice(files.indexOf(file), 1)\n                      this._files = [...files]\n                      this.dispatchEvent(\n                        new CustomEvent('files-change', {\n                          bubbles: true,\n                          composed: true,\n                          detail: {\n                            files: this._files\n                          }\n                        })\n                      )\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : ''}\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this._files = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this.dispatchEvent(\n        new CustomEvent('files-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            files: this._files\n          }\n        })\n      )\n    })\n  }\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  get files() {\n    return this._files\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this._files = []\n\n    this.dispatchEvent(\n      new CustomEvent('files-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          files: this._files\n        }\n      })\n    )\n  }\n}\n"]}

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

@@ -1,14 +1,18 @@
-import './camera-capturer';
 import '@material/mwc-button';
+import './ox-camera-capturer';
+import './ox-ocr-result-image';
 import { LitElement } from 'lit';
+import { ScanResult } from './type';
 export declare class OcrHelper extends LitElement {
     static styles: import("lit").CSSResult[];
+    result: ScanResult[];
     _files: any;
-    index: number;
+    _index: number;
     fileUploader: any;
-    result: any;
+    copied: HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
     fileschange(e: Event): void;
     reset(): void;
-    upload(): Promise<void>;
+    onSelected(e: CustomEvent): void;
+    submit(): Promise<void>;
 }

package/dist/src/{ocr-helper.js → ox-ocr-helper.js}

@@ -1,24 +1,25 @@
 import { __decorate } from "tslib";
-import './camera-capturer';
 import '@material/mwc-button';
-import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import './ox-camera-capturer';
+import './ox-ocr-result-image';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { NOTHING_RESULT } from './type';
 let OcrHelper = class OcrHelper extends LitElement {
     constructor() {
         super(...arguments);
-        this.index = 0;
+        this.result = [];
+        this._index = 0;
     }
     render() {
+        var _a;
         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 = ((_a = this.result) === null || _a === void 0 ? void 0 : _a[index]) || NOTHING_RESULT;
         return html `
       <div attachment-wrap>
-        <camera-capturer
+        <ox-camera-capturer
           name="scanner"
           id="capturer"
           label="Capture Images"
@@ -27,10 +28,10 @@ let OcrHelper = class OcrHelper extends LitElement {
           ?hidden=${false}
           custom-input
           @files-change=${(e) => this.fileschange(e)}
-        ></camera-capturer>
+        ></ox-camera-capturer>
       </div>
       <div buttons>
-        <mwc-button @click=${(e) => this.upload()}>submit</mwc-button>
+        <mwc-button @click=${(e) => this.submit()}>submit</mwc-button>
         <mwc-button @click=${(e) => this.reset()}>reset</mwc-button>
       </div>
       <div id="images">
@@ -41,15 +42,20 @@ let OcrHelper = class OcrHelper extends LitElement {
             const item = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[i]');
             const children = (_b = e.currentTarget) === null || _b === void 0 ? void 0 : _b.querySelectorAll('[i]');
             if (item) {
-                this.index = Array.from(children).indexOf(item);
+                this._index = Array.from(children).indexOf(item);
             }
         }}
         >
           ${files.map((file, idx) => 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) => this.onSelected(e)}
+          .result=${result}
+        ></ox-ocr-result-image>
       </div>
-      <div id="result"></div>
+
+      <div id="copied"></div>
     `;
     }
     fileschange(e) {
@@ -57,25 +63,16 @@ let OcrHelper = class OcrHelper extends LitElement {
     }
     reset() {
         this.fileUploader.reset();
-        this.result.textContent = '';
+        this.copied.textContent = '';
+    }
+    onSelected(e) {
+        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() {
+        var _a;
+        this.dispatchEvent(new CustomEvent('attached', {
+            detail: (_a = this.fileUploader) === null || _a === void 0 ? void 0 : _a.files
+        }));
     }
 };
 OcrHelper.styles = [
@@ -93,7 +90,7 @@ OcrHelper.styles = [
 
       #images {
         flex: 1;
-        background-color: black;
+        background-color: var(--main-section-background-color, #f4f7fb);
         color: white;
 
         display: flex;
@@ -107,41 +104,40 @@ OcrHelper.styles = [
 
       [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%;
       }
     `
 ];
 __decorate([
     property({ type: Array })
+], OcrHelper.prototype, "result", void 0);
+__decorate([
+    state()
 ], OcrHelper.prototype, "_files", void 0);
 __decorate([
-    property({ type: Number })
-], OcrHelper.prototype, "index", void 0);
+    state()
+], OcrHelper.prototype, "_index", void 0);
 __decorate([
     query('#capturer')
 ], OcrHelper.prototype, "fileUploader", void 0);
 __decorate([
-    query('#result')
-], OcrHelper.prototype, "result", void 0);
+    query('#copied')
+], OcrHelper.prototype, "copied", void 0);
 OcrHelper = __decorate([
-    customElement('ocr-helper')
+    customElement('ox-ocr-helper')
 ], OcrHelper);
 export { OcrHelper };
-//# sourceMappingURL=ocr-helper.js.map
+//# sourceMappingURL=ox-ocr-helper.js.map

package/dist/src/ox-ocr-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-ocr-helper.js","sourceRoot":"","sources":["../../src/ox-ocr-helper.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport './ox-camera-capturer'\nimport './ox-ocr-result-image'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { NOTHING_RESULT, ScanResult } from './type'\n\n@customElement('ox-ocr-helper')\nexport class OcrHelper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-width: 240px;\n      }\n\n      [buttons] {\n        display: flex;\n        flex-direction: row-reverse;\n      }\n\n      #images {\n        flex: 1;\n        background-color: var(--main-section-background-color, #f4f7fb);\n        color: white;\n\n        display: flex;\n        flex-direction: column;\n      }\n\n      [tab] {\n        display: flex;\n        flex-direction: row;\n      }\n\n      [i] {\n        min-width: 50px;\n        background-color: var(--secondary-color, #394e64);\n        border-right: 1px solid rgba(0, 0, 0, 0.2);\n        padding: var(--padding-narrow, 4px);\n        text-align: center;\n        height: 1.4em;\n      }\n\n      [i][active] {\n        background-color: var(--primary-color, #22a6a7);\n        font-weight: bold;\n      }\n\n      ox-ocr-result-image {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) result: ScanResult[] = []\n\n  @state() _files: any\n  @state() _index: number = 0\n\n  @query('#capturer') fileUploader!: any\n  @query('#copied') copied!: HTMLElement\n\n  render() {\n    const files = this._files || []\n    const index = this._index || 0\n    const file = files[index]\n    const result = this.result?.[index] || NOTHING_RESULT\n\n    return html`\n      <div attachment-wrap>\n        <ox-camera-capturer\n          name=\"scanner\"\n          id=\"capturer\"\n          label=\"Capture Images\"\n          accept=\"image/*\"\n          multiple=\"true\"\n          ?hidden=${false}\n          custom-input\n          @files-change=${(e: Event) => this.fileschange(e)}\n        ></ox-camera-capturer>\n      </div>\n      <div buttons>\n        <mwc-button @click=${(e: Event) => this.submit()}>submit</mwc-button>\n        <mwc-button @click=${(e: Event) => this.reset()}>reset</mwc-button>\n      </div>\n      <div id=\"images\">\n        <div\n          tab\n          @click=${(e: MouseEvent) => {\n            const item = (e.target as HTMLElement)?.closest('[i]')\n            const children = (e.currentTarget as HTMLElement)?.querySelectorAll('[i]')\n            if (item) {\n              this._index = Array.from(children).indexOf(item)\n            }\n          }}\n        >\n          ${files.map((file: any, idx: number) => html`<div i ?active=${idx === index}>${idx}</div>`)}\n        </div>\n        <ox-ocr-result-image\n          .file=${file}\n          @selected=${(e: CustomEvent) => this.onSelected(e)}\n          .result=${result}\n        ></ox-ocr-result-image>\n      </div>\n\n      <div id=\"copied\"></div>\n    `\n  }\n\n  fileschange(e: Event) {\n    this._files = this.fileUploader.files\n  }\n\n  reset() {\n    this.fileUploader.reset()\n    this.copied.textContent = ''\n  }\n\n  onSelected(e: CustomEvent) {\n    navigator.clipboard.writeText(e.detail)\n  }\n\n  async submit() {\n    this.dispatchEvent(\n      new CustomEvent('attached', {\n        detail: this.fileUploader?.files\n      })\n    )\n  }\n}\n"]}

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

@@ -0,0 +1,37 @@
+import { LitElement, PropertyValues } from 'lit';
+import { ScanResult } from './type';
+export declare class OcrResultImage extends LitElement {
+    static styles: import("lit").CSSResult[];
+    file: any;
+    result: ScanResult;
+    _ratio: {
+        x: number;
+        y: number;
+    };
+    _image: string;
+    _resizeObserver: ResizeObserver;
+    _trails: Array<Array<{
+        x: number;
+        y: number;
+    }>>;
+    _tracking: boolean;
+    _selections: Array<number>;
+    _text: string;
+    _img: HTMLImageElement;
+    _overlay: HTMLCanvasElement;
+    render(): import("lit-html").TemplateResult<1>;
+    renderOverlay(): void;
+    calculateRatio(): Promise<void>;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    reset(): void;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    findIndex(x: number, y: number): number;
+    updateTrails(point: {
+        x: number;
+        y: number;
+    }, started: boolean, attached?: boolean): void;
+    onTrailStart(e: MouseEvent): void;
+    onTrailEnd(e: MouseEvent): void;
+    onTrail(e: MouseEvent): void;
+}

package/dist/src/ox-ocr-result-image.js

@@ -0,0 +1,279 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { NOTHING_RESULT } from './type';
+import { touch2mouse } from './utils/touch-to-mouse-event';
+let OcrResultImage = class OcrResultImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.result = NOTHING_RESULT;
+        this._ratio = { x: 1, y: 1 };
+        this._trails = [];
+        this._tracking = false;
+        this._selections = [];
+        this._text = '';
+    }
+    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) => {
+                return bounds.map(bound => {
+                    return {
+                        x: bound.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));
+        this.addEventListener('mouseup', this.onTrailEnd.bind(this));
+        this.addEventListener('mousemove', this.onTrail.bind(this));
+        this.addEventListener('touchstart', touch2mouse);
+        this.addEventListener('touchend', touch2mouse);
+        this.addEventListener('touchmove', touch2mouse);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver.disconnect();
+    }
+    reset() {
+        this._selections = [];
+        this._trails = [];
+        this._text = '';
+    }
+    async updated(changes) {
+        if (changes.has('file') || changes.has('result')) {
+            this.reset();
+        }
+        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, 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, started, attached) {
+        if (started && !attached) {
+            this.reset();
+        }
+        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) {
+        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) {
+        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) {
+        const { offsetX: x, offsetY: y } = e;
+        if (!this._tracking) {
+            return;
+        }
+        this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, false);
+    }
+};
+OcrResultImage.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;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], OcrResultImage.prototype, "file", void 0);
+__decorate([
+    property({ type: Array })
+], OcrResultImage.prototype, "result", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_ratio", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_image", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_resizeObserver", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_trails", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_tracking", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_selections", void 0);
+__decorate([
+    state()
+], OcrResultImage.prototype, "_text", void 0);
+__decorate([
+    query('img')
+], OcrResultImage.prototype, "_img", void 0);
+__decorate([
+    query('[overlay]')
+], OcrResultImage.prototype, "_overlay", void 0);
+OcrResultImage = __decorate([
+    customElement('ox-ocr-result-image')
+], OcrResultImage);
+export { OcrResultImage };
+//# sourceMappingURL=ox-ocr-result-image.js.map

package/dist/src/ox-ocr-result-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-ocr-result-image.js","sourceRoot":"","sources":["../../src/ox-ocr-result-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { NOTHING_RESULT, ScanResult } from './type'\nimport { touch2mouse } from './utils/touch-to-mouse-event'\n\n@customElement('ox-ocr-result-image')\nexport class OcrResultImage extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      img {\n        display: block;\n        flex: 1;\n        border: 0;\n        padding: 0;\n        margin: 0;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      [overlay] {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n\n        border: 0;\n        padding: 0;\n        margin: 0;\n        opacity: 50%;\n      }\n\n      [notice] {\n        position: absolute;\n        bottom: 0;\n        background-color: var(--primary-color, #38a25b);\n        padding: var(--padding-default, 9px) var(--padding-wide, 15px);\n        opacity: 0.95;\n\n        overflow-wrap: anywhere;\n\n        color: #fff;\n        font-size: 1.5em;\n      }\n    `\n  ]\n\n  @property({ type: Array }) file: any\n  @property({ type: Array }) result: ScanResult = NOTHING_RESULT\n\n  @state() _ratio: { x: number; y: number } = { x: 1, y: 1 }\n  @state() _image!: string\n  @state() _resizeObserver!: ResizeObserver\n  @state() _trails: Array<Array<{ x: number; y: number }>> = []\n  @state() _tracking: boolean = false\n  @state() _selections: Array<number> = []\n  @state() _text: string = ''\n\n  @query('img') _img!: HTMLImageElement\n  @query('[overlay]') _overlay!: HTMLCanvasElement\n\n  render() {\n    return html`\n      <img src=${this._image} @load=${() => this.calculateRatio()} />\n      <canvas overlay></canvas>\n\n      ${this._text ? html` <div notice>${this._text} copied!</div> ` : html``}\n    `\n  }\n\n  renderOverlay() {\n    const { boundaries } = this.result\n\n    const context = this._overlay.getContext('2d')\n    if (!context) {\n      return\n    }\n\n    context.save()\n\n    context.clearRect(0, 0, this._overlay.width, this._overlay.height)\n\n    context.lineWidth = 5\n    context.strokeStyle = 'red'\n    context.fillStyle = 'red'\n    context.lineJoin = 'round'\n    context.lineCap = 'round'\n\n    this._image &&\n      boundaries\n        .map((bounds): Array<{ x: number; y: number }> => {\n          return bounds.map(bound => {\n            return {\n              x: bound.x, //* this._ratio.x,\n              y: bound.y // * this._ratio.y\n            }\n          })\n        })\n        .forEach((bounds, idx) => {\n          context.beginPath()\n          context.moveTo(bounds[0].x, bounds[0].y)\n          context.lineTo(bounds[1].x, bounds[1].y)\n          context.lineTo(bounds[2].x, bounds[2].y)\n          context.lineTo(bounds[3].x, bounds[3].y)\n          context.closePath()\n\n          if (this._selections.includes(idx)) {\n            context.fill()\n          }\n          context.stroke()\n        })\n\n    /* draw trails */\n    if (this._trails && this._trails.length > 0) {\n      context.lineWidth = 10\n      context.strokeStyle = 'blue'\n\n      context.beginPath()\n\n      this._trails.forEach(trail => {\n        if (trail && trail.length > 0) {\n          const { x, y } = trail[0]\n          context.moveTo(x, y)\n\n          trail.slice(1).forEach(point => {\n            const { x, y } = point\n            context.lineTo(x, y)\n          })\n        }\n      })\n\n      context.stroke()\n    }\n\n    context.restore()\n  }\n\n  async calculateRatio() {\n    const { naturalWidth, naturalHeight, offsetWidth, offsetHeight } = this._img\n    const { offsetWidth: overlayWidth, offsetHeight: overlayHeight } = this._overlay\n\n    if (!naturalWidth || !naturalHeight) {\n      return\n    }\n\n    this._ratio = {\n      x: offsetWidth / naturalWidth,\n      y: offsetHeight / naturalHeight\n    }\n\n    this._overlay.setAttribute('width', String(overlayWidth / this._ratio.x))\n    this._overlay.setAttribute('height', String(overlayHeight / this._ratio.y))\n  }\n\n  async connectedCallback() {\n    await super.connectedCallback()\n\n    this._resizeObserver = new ResizeObserver(entries => {\n      this.calculateRatio()\n      this.renderOverlay()\n    })\n\n    await this.updateComplete\n    this._resizeObserver.observe(this._overlay)\n\n    this.calculateRatio()\n\n    this.addEventListener('mousedown', this.onTrailStart.bind(this) as EventListener)\n    this.addEventListener('mouseup', this.onTrailEnd.bind(this) as EventListener)\n    this.addEventListener('mousemove', this.onTrail.bind(this) as EventListener)\n    this.addEventListener('touchstart', touch2mouse as EventListener)\n    this.addEventListener('touchend', touch2mouse as EventListener)\n    this.addEventListener('touchmove', touch2mouse as EventListener)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._resizeObserver.disconnect()\n  }\n\n  reset() {\n    this._selections = []\n    this._trails = []\n    this._text = ''\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('file') || changes.has('result')) {\n      this.reset()\n    }\n\n    if (changes.has('file')) {\n      this._image = this.file && URL.createObjectURL(this.file)\n      if (this._image) {\n        requestAnimationFrame(() => {\n          URL.revokeObjectURL(this._image)\n        })\n\n        await this.updateComplete\n        this.calculateRatio()\n      }\n    }\n\n    this.renderOverlay()\n  }\n\n  findIndex(x: number, y: number): number {\n    const { boundaries } = this.result\n\n    return boundaries.findIndex(path => {\n      var result = false\n\n      path.forEach((p, idx) => {\n        let j = (idx + path.length + 1) % path.length\n\n        let x1 = p.x\n        let y1 = p.y\n        let x2 = path[j].x\n        let y2 = path[j].y\n\n        if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) {\n          result = !result\n        }\n      })\n\n      return result\n    })\n  }\n\n  updateTrails(point: { x: number; y: number }, started: boolean, attached?: boolean) {\n    if (started && !attached) {\n      this.reset()\n    }\n\n    if (started) {\n      this._trails.push([])\n    }\n\n    var trail = this._trails[this._trails.length - 1]\n    if (!trail) {\n      return\n    }\n\n    trail.push(point)\n\n    this._trails.flat().forEach(({ x, y }) => {\n      const idx = this.findIndex(x, y)\n      if (idx === -1) {\n        return\n      }\n\n      if (!this._selections.includes(idx)) {\n        this._selections.push(idx)\n      }\n    })\n\n    this.requestUpdate()\n  }\n\n  onTrailStart(e: MouseEvent) {\n    const { offsetX: x, offsetY: y, button, shiftKey } = e\n\n    if (button !== 0) {\n      return\n    }\n\n    this._tracking = true\n    this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, true, shiftKey)\n  }\n\n  onTrailEnd(e: MouseEvent) {\n    if (!this._tracking) {\n      return\n    }\n\n    this._text = this._selections.map(idx => this.result.texts[idx]).join('')\n\n    this.dispatchEvent(\n      new CustomEvent('selected', {\n        detail: this._text\n      })\n    )\n\n    this._tracking = false\n  }\n\n  onTrail(e: MouseEvent) {\n    const { offsetX: x, offsetY: y } = e\n\n    if (!this._tracking) {\n      return\n    }\n\n    this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, false)\n  }\n}\n"]}