@operato/ocr 0.2.15 → 0.2.19

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.2.19](https://github.com/hatiolab/operato/compare/v0.2.18...v0.2.19) (2021-11-23)
+
+
+### :bug: Bug Fix
+
+* automatically paste selected text into clipboard ([eb260d3](https://github.com/hatiolab/operato/commit/eb260d3e59bd9799f8d8bb1359608b33790a5939))
+* ocr result style ([f6479a1](https://github.com/hatiolab/operato/commit/f6479a1aa2bc36b87b8aec47caf6ac3853094317))
+* ocr style ([a5a8169](https://github.com/hatiolab/operato/commit/a5a816939872b277c49997f802d191a68f477e38))
+* ocr-helper ..ing ([d7bf7f2](https://github.com/hatiolab/operato/commit/d7bf7f2654f2df83719e0b07c8cd1764e800a8cc))
+* operato/ocr ([dd46fc1](https://github.com/hatiolab/operato/commit/dd46fc1125ef63c745b4b9ece3935cb7c56a8b36))
+* ox-camera-capture bug ([16834ee](https://github.com/hatiolab/operato/commit/16834ee5fbfb213c8cfdb832a60abe188a483728))
+* ox-camera-capture font ([dd994e1](https://github.com/hatiolab/operato/commit/dd994e1cddd238932a3941e9604e6115cc3450c6))
+* ox-ocr-helper modified ([6f474de](https://github.com/hatiolab/operato/commit/6f474de4c79faf12456f7c992fa33784a3590ff7))
+* ox-ocr-helper to issue an event when it submitted ([a0d7209](https://github.com/hatiolab/operato/commit/a0d72091567e22593a114e3eb877ead79d973200))
+* support shiftkey to make path continuously ([758b444](https://github.com/hatiolab/operato/commit/758b44458b32045d4903f18546fbaa9ed2ad2a25))
+* tuned ocr-result-image ([d1b8816](https://github.com/hatiolab/operato/commit/d1b881600e6759cf3620a981a332829b52e8d877))
+
+
+
 ### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
 
 **Note:** Version bump only for package @operato/ocr

package/demo/index.html

@@ -1,29 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
 
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../dist/src/ocr-helper.js';
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
 
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <ocr-helper .title=${title}>
-          some light-dom
-        </ocr-helper>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
+      #demo {
+        height: 100vh;
+      }
+
+      ox-ocr-helper {
+        height: 100%;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-ocr-helper.js'
+
+      const title = 'Hello owc World!'
+      render(html` <ox-ocr-helper .title=${title}> some light-dom </ox-ocr-helper> `, document.querySelector('#demo'))
+    </script>
+  </body>
 </html>

package/dist/src/camera-capturer.js

@@ -1,6 +1,6 @@
 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';
 let CameraCapturer = class CameraCapturer extends LitElement {
@@ -164,7 +164,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

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

@@ -1 +1 @@
-{"version":3,"file":"camera-capturer.js","sourceRoot":"","sources":["../../src/camera-capturer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from './file-drop-helper'\n\n@customElement('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        text-align: center;\n        padding-bottom: 5px !important;\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        padding: 0;\n      }\n      li {\n        text-align: left;\n\n        padding: var(--file-uploader-li-padding);\n        border-bottom: var(--file-uploader-li-border-bottom);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        font: var(--file-uploader-li-icon-font);\n        margin: var(--file-uploader-li-icon-margin);\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<br />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                      this._files = [...files.splice(files.indexOf(file), 1)]\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"]}
+{"version":3,"file":"camera-capturer.js","sourceRoot":"","sources":["../../src/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 './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        text-align: center;\n        padding-bottom: 5px !important;\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        padding: 0;\n      }\n      li {\n        text-align: left;\n\n        padding: var(--file-uploader-li-padding);\n        border-bottom: var(--file-uploader-li-border-bottom);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        font: var(--file-uploader-li-icon-font);\n        margin: var(--file-uploader-li-icon-margin);\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<br />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                      this._files = [...files.splice(files.indexOf(file), 1)]\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/index.d.ts

@@ -1 +1 @@
-export * from './ocr-helper.js';
+export * from './ox-ocr-helper.js';

package/dist/src/index.js

@@ -1,2 +1,2 @@
-export * from './ocr-helper.js';
+export * from './ox-ocr-helper.js';
 //# sourceMappingURL=index.js.map

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,5 +1,6 @@
-import './camera-capturer';
 import '@material/mwc-button';
+import './ox-camera-capturer';
+import './ox-ocr-result-image';
 import { LitElement } from 'lit';
 export declare class OcrHelper extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -10,5 +11,6 @@ export declare class OcrHelper extends LitElement {
     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,7 +1,8 @@
 import { __decorate } from "tslib";
-import './camera-capturer';
 import '@material/mwc-button';
-import { LitElement, css, html } from 'lit';
+import './ox-camera-capturer';
+import './ox-ocr-result-image';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 let OcrHelper = class OcrHelper extends LitElement {
     constructor() {
@@ -12,13 +13,9 @@ let OcrHelper = class OcrHelper extends LitElement {
         const files = this._files || [];
         const index = this.index || 0;
         const file = files[index];
-        const image = file && URL.createObjectURL(file);
-        if (image) {
-            requestAnimationFrame(() => URL.revokeObjectURL(image));
-        }
         return html `
       <div attachment-wrap>
-        <camera-capturer
+        <ox-camera-capturer
           name="scanner"
           id="capturer"
           label="Capture Images"
@@ -27,10 +24,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">
@@ -47,8 +44,9 @@ let OcrHelper = class OcrHelper extends LitElement {
         >
           ${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)}></ox-ocr-result-image>
       </div>
+
       <div id="result"></div>
     `;
     }
@@ -59,7 +57,14 @@ let OcrHelper = class OcrHelper extends LitElement {
         this.fileUploader.reset();
         this.result.textContent = '';
     }
-    async upload() {
+    onSelected(e) {
+        navigator.clipboard.writeText(e.detail);
+    }
+    async submit() {
+        var _a;
+        this.dispatchEvent(new CustomEvent('attached', {
+            detail: (_a = this.fileUploader) === null || _a === void 0 ? void 0 : _a.files
+        }));
         // const response = await client.query({
         //   query: gql`
         //     query ocrRequest($images: [Upload!]!) {
@@ -93,7 +98,7 @@ OcrHelper.styles = [
 
       #images {
         flex: 1;
-        background-color: black;
+        background-color: var(--main-section-background-color, #f4f7fb);
         color: white;
 
         display: flex;
@@ -107,24 +112,20 @@ 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%;
       }
     `
 ];
@@ -141,7 +142,7 @@ __decorate([
     query('#result')
 ], OcrHelper.prototype, "result", 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 } from 'lit/decorators.js'\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 }) _files: any\n  @property({ type: Number }) index: number = 0\n\n  @query('#capturer') fileUploader!: any\n  @query('#result') result!: any\n\n  render() {\n    const files = this._files || []\n    const index = this.index || 0\n    const file = files[index]\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 .file=${file} @selected=${(e: CustomEvent) => this.onSelected(e)}></ox-ocr-result-image>\n      </div>\n\n      <div id=\"result\"></div>\n    `\n  }\n\n  fileschange(e: Event) {\n    this._files = this.fileUploader.files\n  }\n\n  reset() {\n    this.fileUploader.reset()\n    this.result.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    // const response = await client.query({\n    //   query: gql`\n    //     query ocrRequest($images: [Upload!]!) {\n    //       ocrRequest(images: $images)\n    //     }\n    //   `,\n    //   variables: {\n    //     images: this.fileUploader?.files\n    //   },\n    //   context: { hasUpload: true }\n    // })\n    // if (!response.errors) {\n    //   this.result.textContent = response.data.ocrRequest\n    // } else {\n    //   this.result.textContent = 'error'\n    // }\n  }\n}\n"]}

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

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+declare type ScanResult = {
+    status_code: number;
+    key_values: {
+        [key: string]: Array<string>;
+    };
+    boundaries: Array<Array<{
+        x: number;
+        y: number;
+    }>>;
+    texts: Array<string>;
+};
+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;
+    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;
+}
+export {};