@operato/ocr 0.2.9 → 0.2.20

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();
+    }
+    initialize() {
+        this._selections = [];
+        this._trails = [];
+        this._text = '';
+    }
+    async updated(changes) {
+        if (changes.has('file') || changes.has('result')) {
+            this.initialize();
+        }
+        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.initialize();
+        }
+        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  initialize() {\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.initialize()\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.initialize()\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"]}

package/dist/src/type.d.ts

@@ -0,0 +1,15 @@
+export declare type ScanResult = {
+    key_values: {
+        [key: string]: Array<string>;
+    };
+    boundaries: Array<Array<{
+        x: number;
+        y: number;
+    }>>;
+    texts: Array<string>;
+};
+export declare const NOTHING_RESULT: {
+    boundaries: never[];
+    key_values: {};
+    texts: never[];
+};

package/dist/src/type.js

@@ -0,0 +1,6 @@
+export const NOTHING_RESULT = {
+    boundaries: [],
+    key_values: {},
+    texts: []
+};
+//# sourceMappingURL=type.js.map

package/dist/src/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../src/type.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["export type ScanResult = {\n  key_values: {\n    [key: string]: Array<string>\n  }\n  boundaries: Array<Array<{ x: number; y: number }>>\n  texts: Array<string>\n}\n\nexport const NOTHING_RESULT = {\n  boundaries: [],\n  key_values: {},\n  texts: []\n}\n"]}

package/dist/src/utils/file-drop-helper.d.ts

@@ -0,0 +1,16 @@
+/**
+ * judge callback function for FileDropHelper.set
+ */
+declare type JudgeCallback = () => boolean;
+/**
+ * file drop assist class
+ */
+export declare class FileDropHelper {
+    /**
+     * 파일 드롭 영역에서의 file drag&drop과 관련된 이벤트에 대한 처리를 설정한다.
+     * @param dropArea file drag&drop target area
+     * @param [judge] file drag&drop과 관련된 이벤트에 대한 judge callback function
+     */
+    static set(dropArea: HTMLElement, judge?: JudgeCallback): void;
+}
+export {};

package/dist/src/utils/file-drop-helper.js

@@ -0,0 +1,47 @@
+/**
+ * file drop assist class
+ */
+export class FileDropHelper {
+    /**
+     * 파일 드롭 영역에서의 file drag&drop과 관련된 이벤트에 대한 처리를 설정한다.
+     * @param dropArea file drag&drop target area
+     * @param [judge] file drag&drop과 관련된 이벤트에 대한 judge callback function
+     */
+    static set(dropArea, judge) {
+        var preventDefaults = (e) => {
+            if (!judge || judge()) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        var highlight = (e) => {
+            if (!judge || judge()) {
+                dropArea.classList.add('candrop');
+            }
+        };
+        var unhighlight = (e) => {
+            if (!judge || judge()) {
+                dropArea.classList.remove('candrop');
+            }
+        };
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
+            dropArea.addEventListener(event, preventDefaults, false);
+        });
+        ['dragenter', 'dragover'].forEach(event => {
+            dropArea.addEventListener(event, highlight, false);
+        });
+        ['dragleave', 'drop'].forEach(event => {
+            dropArea.addEventListener(event, unhighlight, false);
+        });
+        dropArea.addEventListener('drop', e => {
+            if (!judge || judge()) {
+                let dt = e.dataTransfer;
+                let files = dt.files;
+                dropArea.dispatchEvent(new CustomEvent('file-drop', {
+                    detail: [...Array.from(files)]
+                }));
+            }
+        }, false);
+    }
+}
+//# sourceMappingURL=file-drop-helper.js.map

package/dist/src/utils/file-drop-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-drop-helper.js","sourceRoot":"","sources":["../../../src/utils/file-drop-helper.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,OAAO,cAAc;IACzB;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,QAAqB,EAAE,KAAqB;QACrD,IAAI,eAAe,GAAG,CAAC,CAAQ,EAAE,EAAE;YACjC,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;aACpB;QACH,CAAC,CAAA;QAED,IAAI,SAAS,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;aAClC;QACH,CAAC,CAAA;QAED,IAAI,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC7B,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;aACrC;QACH,CAAC,CAEA;QAAA,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC9D,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,CAAA;QAC1D,CAAC,CAAC,CACD;QAAA,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACzC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;QACpD,CAAC,CAAC,CACD;QAAA,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,CAAA;QACtD,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,gBAAgB,CACvB,MAAM,EACN,CAAC,CAAC,EAAE;YACF,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,IAAI,EAAE,GAAG,CAAC,CAAC,YAAa,CAAA;gBACxB,IAAI,KAAK,GAAG,EAAE,CAAC,KAAK,CAAA;gBAEpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,WAAW,EAAE;oBAC3B,MAAM,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC/B,CAAC,CACH,CAAA;aACF;QACH,CAAC,EACD,KAAK,CACN,CAAA;IACH,CAAC;CACF","sourcesContent":["/**\n * judge callback function for FileDropHelper.set\n */\ntype JudgeCallback = () => boolean\n\n/**\n * file drop assist class\n */\nexport class FileDropHelper {\n  /**\n   * 파일 드롭 영역에서의 file drag&drop과 관련된 이벤트에 대한 처리를 설정한다.\n   * @param dropArea file drag&drop target area\n   * @param [judge] file drag&drop과 관련된 이벤트에 대한 judge callback function\n   */\n  static set(dropArea: HTMLElement, judge?: JudgeCallback) {\n    var preventDefaults = (e: Event) => {\n      if (!judge || judge()) {\n        e.preventDefault()\n        e.stopPropagation()\n      }\n    }\n\n    var highlight = (e: Event) => {\n      if (!judge || judge()) {\n        dropArea.classList.add('candrop')\n      }\n    }\n\n    var unhighlight = (e: Event) => {\n      if (!judge || judge()) {\n        dropArea.classList.remove('candrop')\n      }\n    }\n\n    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {\n      dropArea.addEventListener(event, preventDefaults, false)\n    })\n    ;['dragenter', 'dragover'].forEach(event => {\n      dropArea.addEventListener(event, highlight, false)\n    })\n    ;['dragleave', 'drop'].forEach(event => {\n      dropArea.addEventListener(event, unhighlight, false)\n    })\n\n    dropArea.addEventListener(\n      'drop',\n      e => {\n        if (!judge || judge()) {\n          let dt = e.dataTransfer!\n          let files = dt.files\n\n          dropArea.dispatchEvent(\n            new CustomEvent('file-drop', {\n              detail: [...Array.from(files)]\n            })\n          )\n        }\n      },\n      false\n    )\n  }\n}\n"]}

package/dist/src/utils/touch-to-mouse-event.d.ts

@@ -0,0 +1 @@
+export declare function touch2mouse(e: TouchEvent): void;

package/dist/src/utils/touch-to-mouse-event.js

@@ -0,0 +1,34 @@
+export function touch2mouse(e) {
+    var _a;
+    e.preventDefault();
+    if (e.touches.length > 1 || (e.type == 'touchend' && e.touches.length > 0)) {
+        return;
+    }
+    var type = '';
+    const touch = e.changedTouches[0];
+    switch (e.type) {
+        case 'touchstart':
+            type = 'mousedown';
+            break;
+        case 'touchmove':
+            type = 'mousemove';
+            break;
+        case 'touchend':
+            type = 'mouseup';
+            break;
+    }
+    const { screenX, screenY, clientX, clientY } = touch;
+    const { ctrlKey, altKey, shiftKey, metaKey } = e;
+    (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent(type, {
+        screenX,
+        screenY,
+        clientX,
+        clientY,
+        ctrlKey,
+        altKey,
+        shiftKey,
+        metaKey,
+        button: 0
+    }));
+}
+//# sourceMappingURL=touch-to-mouse-event.js.map

package/dist/src/utils/touch-to-mouse-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-to-mouse-event.js","sourceRoot":"","sources":["../../../src/utils/touch-to-mouse-event.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,CAAa;;IACvC,CAAC,CAAC,cAAc,EAAE,CAAA;IAElB,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,UAAU,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;QAC1E,OAAM;KACP;IAED,IAAI,IAAI,GAAG,EAAE,CAAA;IACb,MAAM,KAAK,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;IAEjC,QAAQ,CAAC,CAAC,IAAI,EAAE;QACd,KAAK,YAAY;YACf,IAAI,GAAG,WAAW,CAAA;YAClB,MAAK;QACP,KAAK,WAAW;YACd,IAAI,GAAG,WAAW,CAAA;YAClB,MAAK;QACP,KAAK,UAAU;YACb,IAAI,GAAG,SAAS,CAAA;YAChB,MAAK;KACR;IAED,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IACpD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,CAAC,CAAA;IAEhD,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CACrB,IAAI,UAAU,CAAC,IAAI,EAAE;QACnB,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,MAAM;QACN,QAAQ;QACR,OAAO;QACP,MAAM,EAAE,CAAC;KACV,CAAC,CACH,CAAA;AACH,CAAC","sourcesContent":["export function touch2mouse(e: TouchEvent) {\n  e.preventDefault()\n\n  if (e.touches.length > 1 || (e.type == 'touchend' && e.touches.length > 0)) {\n    return\n  }\n\n  var type = ''\n  const touch = e.changedTouches[0]\n\n  switch (e.type) {\n    case 'touchstart':\n      type = 'mousedown'\n      break\n    case 'touchmove':\n      type = 'mousemove'\n      break\n    case 'touchend':\n      type = 'mouseup'\n      break\n  }\n\n  const { screenX, screenY, clientX, clientY } = touch\n  const { ctrlKey, altKey, shiftKey, metaKey } = e\n\n  e.target?.dispatchEvent(\n    new MouseEvent(type, {\n      screenX,\n      screenY,\n      clientX,\n      clientY,\n      ctrlKey,\n      altKey,\n      shiftKey,\n      metaKey,\n      button: 0\n    })\n  )\n}\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,5 +1,5 @@
+import '../src/ox-ocr-helper.js';
 import { TemplateResult } from 'lit';
-import '../src/ocr-helper.js';
 declare const _default: {
     title: string;
     component: string;

package/dist/stories/index.stories.js

@@ -1,37 +1,33 @@
+import '../src/ox-ocr-helper.js';
 import { html } from 'lit';
-import '../src/ocr-helper.js';
 export default {
     title: 'OcrHelper',
-    component: 'ocr-helper',
+    component: 'ox-ocr-helper',
     argTypes: {
         title: { control: 'text' },
         counter: { control: 'number' },
-        textColor: { control: 'color' },
-    },
+        textColor: { control: 'color' }
+    }
 };
-const Template = ({ title = 'Hello world', counter = 5, textColor, slot, }) => html `
-  <ocr-helper
-    style="--ocr-helper-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
+const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
+  <ocr-helper style="--ocr-helper-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
     ${slot}
   </ocr-helper>
 `;
 export const Regular = Template.bind({});
 export const CustomTitle = Template.bind({});
 CustomTitle.args = {
-    title: 'My title',
+    title: 'My title'
 };
 export const CustomCounter = Template.bind({});
 CustomCounter.args = {
-    counter: 123456,
+    counter: 123456
 };
 export const SlottedContent = Template.bind({});
 SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
+    slot: html `<p>Slotted content</p>`
 };
 SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
+    slot: { table: { disable: true } }
 };
 //# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,aAAa,EACrB,OAAO,GAAG,CAAC,EACX,SAAS,EACT,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;;sCAEkB,SAAS,IAAI,OAAO;aAC7C,KAAK;eACH,OAAO;;MAEhB,IAAI;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/ocr-helper.js';\n\nexport default {\n  title: 'OcrHelper',\n  component: 'ocr-helper',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  title?: string;\n  counter?: number;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = 'Hello world',\n  counter = 5,\n  textColor,\n  slot,\n}: ArgTypes) => html`\n  <ocr-helper\n    style=\"--ocr-helper-text-color: ${textColor || 'black'}\"\n    .title=${title}\n    .counter=${counter}\n  >\n    ${slot}\n  </ocr-helper>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\nCustomTitle.args = {\n  title: 'My title',\n};\n\nexport const CustomCounter = Template.bind({});\nCustomCounter.args = {\n  counter: 123456,\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;gDAC7D,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MACnG,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../src/ox-ocr-helper.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'OcrHelper',\n  component: 'ox-ocr-helper',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n  <ocr-helper style=\"--ocr-helper-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n    ${slot}\n  </ocr-helper>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n  title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n  counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } }\n}\n"]}

package/dist/test/ox-ocr-helper.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-ocr-helper.js';

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

@@ -1,24 +1,24 @@
-import '../src/ocr-helper.js';
-import { expect, fixture } from '@open-wc/testing';
+import '../src/ox-ocr-helper.js';
 import { html } from 'lit';
+import { expect, fixture } from '@open-wc/testing';
 describe('OcrHelper', () => {
     it('has a default title "Hey there" and counter 5', async () => {
-        const el = await fixture(html `<ocr-helper></ocr-helper>`);
+        const el = await fixture(html `<ox-ocr-helper></ox-ocr-helper>`);
         expect(el.title).to.equal('Hey there');
         // expect(el.counter).to.equal(5)
     });
     it('increases the counter on button click', async () => {
-        const el = await fixture(html `<ocr-helper></ocr-helper>`);
+        const el = await fixture(html `<ox-ocr-helper></ox-ocr-helper>`);
         el.shadowRoot.querySelector('button').click();
         // expect(el.counter).to.equal(6)
     });
     it('can override the title via attribute', async () => {
-        const el = await fixture(html `<ocr-helper title="attribute title"></ocr-helper>`);
+        const el = await fixture(html `<ox-ocr-helper title="attribute title"></ox-ocr-helper>`);
         expect(el.title).to.equal('attribute title');
     });
     it('passes the a11y audit', async () => {
-        const el = await fixture(html `<ocr-helper></ocr-helper>`);
+        const el = await fixture(html `<ox-ocr-helper></ox-ocr-helper>`);
         await expect(el).shadowDom.to.be.accessible();
     });
 });
-//# sourceMappingURL=ocr-helper.test.js.map
+//# sourceMappingURL=ox-ocr-helper.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-ocr-helper.test.js","sourceRoot":"","sources":["../../test/ox-ocr-helper.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAIlD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,iCAAiC,CAAC,CAAA;QAE1E,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,iCAAiC,CAAC,CAAA;QAC1E,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,yDAAyD,CAAC,CAAA;QAElG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,iCAAiC,CAAC,CAAA;QAE1E,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import '../src/ox-ocr-helper.js'\n\nimport { html } from 'lit'\n\nimport { expect, fixture } from '@open-wc/testing'\n\nimport { OcrHelper } from '../src/ox-ocr-helper.js'\n\ndescribe('OcrHelper', () => {\n  it('has a default title \"Hey there\" and counter 5', async () => {\n    const el = await fixture<OcrHelper>(html`<ox-ocr-helper></ox-ocr-helper>`)\n\n    expect(el.title).to.equal('Hey there')\n    // expect(el.counter).to.equal(5)\n  })\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<OcrHelper>(html`<ox-ocr-helper></ox-ocr-helper>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    // expect(el.counter).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<OcrHelper>(html`<ox-ocr-helper title=\"attribute title\"></ox-ocr-helper>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<OcrHelper>(html`<ox-ocr-helper></ox-ocr-helper>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}