@operato/ocr 0.2.15 → 0.2.19

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

@@ -0,0 +1,921 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { touch2mouse } from './utils/touch-to-mouse-event';
+let OcrResultImage = class OcrResultImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.result = RESULT;
+        this._trails = [];
+        this._tracking = false;
+        this._selections = [];
+        this._text = '';
+    }
+    render() {
+        return html `
+      <img src=${this._image} />
+      <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 * this._ratio.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;
+        this._overlay.setAttribute('width', String(offsetWidth));
+        this._overlay.setAttribute('height', String(offsetHeight));
+        this._ratio = {
+            x: offsetWidth / naturalWidth,
+            y: offsetHeight / naturalHeight
+        };
+    }
+    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();
+    }
+    async updated(changes) {
+        if (changes.has('file')) {
+            this._image = this.file && URL.createObjectURL(this.file);
+            if (this._image) {
+                requestAnimationFrame(() => URL.revokeObjectURL(this._image));
+            }
+        }
+        await this.updateComplete;
+        this.renderOverlay();
+    }
+    findIndex(x, y) {
+        x /= this._ratio.x;
+        y /= this._ratio.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._selections = [];
+            this._trails = [];
+        }
+        if (started) {
+            this._trails.push([]);
+        }
+        var trail = this._trails[this._trails.length - 1];
+        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, 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, 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 };
+const RESULT = {
+    status_code: 200,
+    key_values: {
+        '1P': ['LNK304PG'],
+        Q: ['259', '311', '430'],
+        '9D': ['2139', '2139', '2135'],
+        '1T': ['BA268F', 'BA268C', 'BC488D']
+    },
+    boundaries: [
+        [
+            {
+                x: 217.0,
+                y: 117.0
+            },
+            {
+                x: 291.0,
+                y: 120.0
+            },
+            {
+                x: 291.0,
+                y: 143.0
+            },
+            {
+                x: 216.0,
+                y: 140.0
+            }
+        ],
+        [
+            {
+                x: 294.0,
+                y: 120.0
+            },
+            {
+                x: 442.0,
+                y: 129.0
+            },
+            {
+                x: 441.0,
+                y: 151.0
+            },
+            {
+                x: 292.0,
+                y: 143.0
+            }
+        ],
+        [
+            {
+                x: 443.0,
+                y: 130.0
+            },
+            {
+                x: 484.0,
+                y: 130.0
+            },
+            {
+                x: 484.0,
+                y: 151.0
+            },
+            {
+                x: 443.0,
+                y: 151.0
+            }
+        ],
+        [
+            {
+                x: 549.0,
+                y: 134.0
+            },
+            {
+                x: 642.0,
+                y: 138.0
+            },
+            {
+                x: 642.0,
+                y: 157.0
+            },
+            {
+                x: 548.0,
+                y: 152.0
+            }
+        ],
+        [
+            {
+                x: 255.0,
+                y: 163.0
+            },
+            {
+                x: 390.0,
+                y: 167.0
+            },
+            {
+                x: 389.0,
+                y: 191.0
+            },
+            {
+                x: 254.0,
+                y: 187.0
+            }
+        ],
+        [
+            {
+                x: 212.0,
+                y: 208.0
+            },
+            {
+                x: 255.0,
+                y: 208.0
+            },
+            {
+                x: 255.0,
+                y: 235.0
+            },
+            {
+                x: 212.0,
+                y: 235.0
+            }
+        ],
+        [
+            {
+                x: 257.0,
+                y: 210.0
+            },
+            {
+                x: 320.0,
+                y: 210.0
+            },
+            {
+                x: 320.0,
+                y: 232.0
+            },
+            {
+                x: 257.0,
+                y: 232.0
+            }
+        ],
+        [
+            {
+                x: 383.0,
+                y: 214.0
+            },
+            {
+                x: 480.0,
+                y: 218.0
+            },
+            {
+                x: 480.0,
+                y: 240.0
+            },
+            {
+                x: 383.0,
+                y: 236.0
+            }
+        ],
+        [
+            {
+                x: 215.0,
+                y: 301.0
+            },
+            {
+                x: 382.0,
+                y: 301.0
+            },
+            {
+                x: 382.0,
+                y: 325.0
+            },
+            {
+                x: 215.0,
+                y: 325.0
+            }
+        ],
+        [
+            {
+                x: 436.0,
+                y: 305.0
+            },
+            {
+                x: 539.0,
+                y: 305.0
+            },
+            {
+                x: 539.0,
+                y: 327.0
+            },
+            {
+                x: 436.0,
+                y: 327.0
+            }
+        ],
+        [
+            {
+                x: 537.0,
+                y: 308.0
+            },
+            {
+                x: 582.0,
+                y: 308.0
+            },
+            {
+                x: 582.0,
+                y: 328.0
+            },
+            {
+                x: 537.0,
+                y: 328.0
+            }
+        ],
+        [
+            {
+                x: 594.0,
+                y: 309.0
+            },
+            {
+                x: 624.0,
+                y: 309.0
+            },
+            {
+                x: 624.0,
+                y: 334.0
+            },
+            {
+                x: 594.0,
+                y: 334.0
+            }
+        ],
+        [
+            {
+                x: 624.0,
+                y: 310.0
+            },
+            {
+                x: 659.0,
+                y: 310.0
+            },
+            {
+                x: 659.0,
+                y: 330.0
+            },
+            {
+                x: 624.0,
+                y: 330.0
+            }
+        ],
+        [
+            {
+                x: 675.0,
+                y: 311.0
+            },
+            {
+                x: 707.0,
+                y: 311.0
+            },
+            {
+                x: 707.0,
+                y: 330.0
+            },
+            {
+                x: 675.0,
+                y: 330.0
+            }
+        ],
+        [
+            {
+                x: 735.0,
+                y: 342.0
+            },
+            {
+                x: 775.0,
+                y: 342.0
+            },
+            {
+                x: 775.0,
+                y: 360.0
+            },
+            {
+                x: 735.0,
+                y: 360.0
+            }
+        ],
+        [
+            {
+                x: 806.0,
+                y: 341.0
+            },
+            {
+                x: 829.0,
+                y: 341.0
+            },
+            {
+                x: 829.0,
+                y: 359.0
+            },
+            {
+                x: 806.0,
+                y: 359.0
+            }
+        ],
+        [
+            {
+                x: 217.0,
+                y: 386.0
+            },
+            {
+                x: 381.0,
+                y: 383.0
+            },
+            {
+                x: 381.0,
+                y: 407.0
+            },
+            {
+                x: 217.0,
+                y: 410.0
+            }
+        ],
+        [
+            {
+                x: 436.0,
+                y: 387.0
+            },
+            {
+                x: 536.0,
+                y: 387.0
+            },
+            {
+                x: 536.0,
+                y: 410.0
+            },
+            {
+                x: 436.0,
+                y: 410.0
+            }
+        ],
+        [
+            {
+                x: 535.0,
+                y: 388.0
+            },
+            {
+                x: 577.0,
+                y: 388.0
+            },
+            {
+                x: 577.0,
+                y: 407.0
+            },
+            {
+                x: 535.0,
+                y: 407.0
+            }
+        ],
+        [
+            {
+                x: 590.0,
+                y: 387.0
+            },
+            {
+                x: 617.0,
+                y: 387.0
+            },
+            {
+                x: 617.0,
+                y: 411.0
+            },
+            {
+                x: 590.0,
+                y: 411.0
+            }
+        ],
+        [
+            {
+                x: 618.0,
+                y: 388.0
+            },
+            {
+                x: 653.0,
+                y: 388.0
+            },
+            {
+                x: 653.0,
+                y: 409.0
+            },
+            {
+                x: 618.0,
+                y: 409.0
+            }
+        ],
+        [
+            {
+                x: 669.0,
+                y: 389.0
+            },
+            {
+                x: 702.0,
+                y: 389.0
+            },
+            {
+                x: 702.0,
+                y: 408.0
+            },
+            {
+                x: 669.0,
+                y: 408.0
+            }
+        ],
+        [
+            {
+                x: 728.0,
+                y: 416.0
+            },
+            {
+                x: 769.0,
+                y: 416.0
+            },
+            {
+                x: 769.0,
+                y: 436.0
+            },
+            {
+                x: 728.0,
+                y: 436.0
+            }
+        ],
+        [
+            {
+                x: 798.0,
+                y: 416.0
+            },
+            {
+                x: 822.0,
+                y: 416.0
+            },
+            {
+                x: 822.0,
+                y: 433.0
+            },
+            {
+                x: 798.0,
+                y: 433.0
+            }
+        ],
+        [
+            {
+                x: 219.0,
+                y: 465.0
+            },
+            {
+                x: 381.0,
+                y: 460.0
+            },
+            {
+                x: 382.0,
+                y: 482.0
+            },
+            {
+                x: 220.0,
+                y: 487.0
+            }
+        ],
+        [
+            {
+                x: 434.0,
+                y: 463.0
+            },
+            {
+                x: 534.0,
+                y: 461.0
+            },
+            {
+                x: 534.0,
+                y: 481.0
+            },
+            {
+                x: 435.0,
+                y: 483.0
+            }
+        ],
+        [
+            {
+                x: 532.0,
+                y: 462.0
+            },
+            {
+                x: 574.0,
+                y: 462.0
+            },
+            {
+                x: 574.0,
+                y: 479.0
+            },
+            {
+                x: 532.0,
+                y: 479.0
+            }
+        ],
+        [
+            {
+                x: 587.0,
+                y: 461.0
+            },
+            {
+                x: 614.0,
+                y: 461.0
+            },
+            {
+                x: 614.0,
+                y: 482.0
+            },
+            {
+                x: 587.0,
+                y: 482.0
+            }
+        ],
+        [
+            {
+                x: 616.0,
+                y: 461.0
+            },
+            {
+                x: 650.0,
+                y: 463.0
+            },
+            {
+                x: 649.0,
+                y: 481.0
+            },
+            {
+                x: 615.0,
+                y: 479.0
+            }
+        ],
+        [
+            {
+                x: 664.0,
+                y: 461.0
+            },
+            {
+                x: 697.0,
+                y: 461.0
+            },
+            {
+                x: 697.0,
+                y: 479.0
+            },
+            {
+                x: 664.0,
+                y: 479.0
+            }
+        ],
+        [
+            {
+                x: 723.0,
+                y: 486.0
+            },
+            {
+                x: 761.0,
+                y: 486.0
+            },
+            {
+                x: 761.0,
+                y: 504.0
+            },
+            {
+                x: 723.0,
+                y: 504.0
+            }
+        ],
+        [
+            {
+                x: 792.0,
+                y: 485.0
+            },
+            {
+                x: 814.0,
+                y: 485.0
+            },
+            {
+                x: 814.0,
+                y: 500.0
+            },
+            {
+                x: 792.0,
+                y: 500.0
+            }
+        ],
+        [
+            {
+                x: 586.0,
+                y: 535.0
+            },
+            {
+                x: 626.0,
+                y: 535.0
+            },
+            {
+                x: 626.0,
+                y: 551.0
+            },
+            {
+                x: 586.0,
+                y: 551.0
+            }
+        ],
+        [
+            {
+                x: 664.0,
+                y: 533.0
+            },
+            {
+                x: 700.0,
+                y: 533.0
+            },
+            {
+                x: 700.0,
+                y: 548.0
+            },
+            {
+                x: 664.0,
+                y: 548.0
+            }
+        ]
+    ],
+    texts: [
+        'POWER',
+        'INTEGRATIONS',
+        'INC.',
+        '15/10/2021',
+        'LinkSwitchTM',
+        '(1P)',
+        'PROD:',
+        'LNK304PG',
+        '(1T)LotNo:BA268F',
+        '(9D)DtCode:',
+        '2139',
+        '(Q)',
+        'Qty:',
+        '259',
+        'COO:',
+        'CN',
+        '(1T)LotNo:BA268C',
+        '(9D)DtCode:',
+        '2139',
+        '(Q)',
+        'Qty:',
+        '311',
+        'COO:',
+        'CN',
+        '(1T)LotNo:BC488D',
+        '(9D)DtCode:',
+        '2135',
+        '(Q)',
+        'Qty:',
+        '430',
+        'COO:',
+        'CN',
+        'Total',
+        '1000'
+    ]
+};
+//# sourceMappingURL=ox-ocr-result-image.js.map