@operato/ocr 0.2.19 → 0.2.23

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

@@ -1,17 +1,9 @@
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { NOTHING_RESULT, ScanResult } from './type'
 import { touch2mouse } from './utils/touch-to-mouse-event'
 
-type ScanResult = {
-  status_code: number
-  key_values: {
-    [key: string]: Array<string>
-  }
-  boundaries: Array<Array<{ x: number; y: number }>>
-  texts: Array<string>
-}
-
 @customElement('ox-ocr-result-image')
 export class OcrResultImage extends LitElement {
   static styles = [
@@ -60,9 +52,9 @@ export class OcrResultImage extends LitElement {
   ]
 
   @property({ type: Array }) file: any
-  @property({ type: Array }) result: ScanResult = RESULT
+  @property({ type: Array }) result: ScanResult = NOTHING_RESULT
 
-  @state() _ratio!: { x: number; y: number }
+  @state() _ratio: { x: number; y: number } = { x: 1, y: 1 }
   @state() _image!: string
   @state() _resizeObserver!: ResizeObserver
   @state() _trails: Array<Array<{ x: number; y: number }>> = []
@@ -75,7 +67,7 @@ export class OcrResultImage extends LitElement {
 
   render() {
     return html`
-      <img src=${this._image} />
+      <img src=${this._image} @load=${() => this.calculateRatio()} />
       <canvas overlay></canvas>
 
       ${this._text ? html` <div notice>${this._text} copied!</div> ` : html``}
@@ -105,8 +97,8 @@ export class OcrResultImage extends LitElement {
         .map((bounds): Array<{ x: number; y: number }> => {
           return bounds.map(bound => {
             return {
-              x: bound.x * this._ratio.x,
-              y: bound.y * this._ratio.y
+              x: bound.x, //* this._ratio.x,
+              y: bound.y // * this._ratio.y
             }
           })
         })
@@ -151,14 +143,19 @@ export class OcrResultImage extends LitElement {
 
   async calculateRatio() {
     const { naturalWidth, naturalHeight, offsetWidth, offsetHeight } = this._img
+    const { offsetWidth: overlayWidth, offsetHeight: overlayHeight } = this._overlay
 
-    this._overlay.setAttribute('width', String(offsetWidth))
-    this._overlay.setAttribute('height', String(offsetHeight))
+    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() {
@@ -188,23 +185,33 @@ export class OcrResultImage extends LitElement {
     this._resizeObserver.disconnect()
   }
 
+  reset() {
+    this._selections = []
+    this._trails = []
+    this._text = ''
+  }
+
   async updated(changes: PropertyValues<this>) {
+    if (changes.has('file') || changes.has('result')) {
+      this.reset()
+    }
+
     if (changes.has('file')) {
       this._image = this.file && URL.createObjectURL(this.file)
       if (this._image) {
-        requestAnimationFrame(() => URL.revokeObjectURL(this._image))
+        requestAnimationFrame(() => {
+          URL.revokeObjectURL(this._image)
+        })
+
+        await this.updateComplete
+        this.calculateRatio()
       }
     }
 
-    await this.updateComplete
-
     this.renderOverlay()
   }
 
   findIndex(x: number, y: number): number {
-    x /= this._ratio.x
-    y /= this._ratio.y
-
     const { boundaries } = this.result
 
     return boundaries.findIndex(path => {
@@ -229,8 +236,7 @@ export class OcrResultImage extends LitElement {
 
   updateTrails(point: { x: number; y: number }, started: boolean, attached?: boolean) {
     if (started && !attached) {
-      this._selections = []
-      this._trails = []
+      this.reset()
     }
 
     if (started) {
@@ -238,6 +244,9 @@ export class OcrResultImage extends LitElement {
     }
 
     var trail = this._trails[this._trails.length - 1]
+    if (!trail) {
+      return
+    }
 
     trail.push(point)
 
@@ -263,7 +272,7 @@ export class OcrResultImage extends LitElement {
     }
 
     this._tracking = true
-    this.updateTrails({ x, y }, true, shiftKey)
+    this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, true, shiftKey)
   }
 
   onTrailEnd(e: MouseEvent) {
@@ -289,666 +298,6 @@ export class OcrResultImage extends LitElement {
       return
     }
 
-    this.updateTrails({ x, y }, false)
+    this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, false)
   }
 }
-
-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'
-  ]
-}