@operato/ocr 0.2.9 → 0.2.20

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/ox-camera-capturer.d.ts

@@ -0,0 +1,14 @@
+import '@material/mwc-icon';
+import { LitElement } from 'lit';
+export declare class CameraCapturer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    multiple?: boolean;
+    accept?: string;
+    label?: string;
+    _files?: File[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    fileInput: HTMLInputElement;
+    get files(): File[] | undefined;
+    reset(): void;
+}

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

@@ -0,0 +1,178 @@
+import { __decorate } from "tslib";
+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';
+let CameraCapturer = class CameraCapturer extends LitElement {
+    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) => {
+            const fileInput = e.currentTarget;
+            this._files = [...files, ...Array.from(fileInput.files)];
+            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 === null || files === void 0 ? void 0 : files.length)
+            ? html ` <ul>
+            ${files.map(file => html `
+                <li>
+                  - ${file.name}
+                  <mwc-icon
+                    @click=${(e) => {
+                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) => {
+            const detail = e.detail;
+            this._files = this.multiple ? detail : detail[0] ? [detail[0]] : [];
+            this.dispatchEvent(new CustomEvent('files-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    files: this._files
+                }
+            }));
+        });
+    }
+    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
+            }
+        }));
+    }
+};
+CameraCapturer.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);
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean })
+], CameraCapturer.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], CameraCapturer.prototype, "accept", void 0);
+__decorate([
+    property({ type: String })
+], CameraCapturer.prototype, "label", void 0);
+__decorate([
+    property({ type: Array })
+], CameraCapturer.prototype, "_files", void 0);
+__decorate([
+    query('#input-file')
+], CameraCapturer.prototype, "fileInput", void 0);
+CameraCapturer = __decorate([
+    customElement('ox-camera-capturer')
+], CameraCapturer);
+export { CameraCapturer };
+//# 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":"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","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;
+    initialize(): 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;
+}