@operato/ocr 0.2.19 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/demo/index.html +666 -2
  3. package/dist/src/ox-ocr-helper.d.ts +4 -2
  4. package/dist/src/ox-ocr-helper.js +22 -27
  5. package/dist/src/ox-ocr-helper.js.map +1 -1
  6. package/dist/src/ox-ocr-result-image.d.ts +2 -12
  7. package/dist/src/ox-ocr-result-image.js +31 -673
  8. package/dist/src/ox-ocr-result-image.js.map +1 -1
  9. package/dist/src/type.d.ts +15 -0
  10. package/dist/src/type.js +6 -0
  11. package/dist/src/type.js.map +1 -0
  12. package/dist/tsconfig.tsbuildinfo +1 -1
  13. package/package.json +2 -2
  14. package/src/ox-ocr-helper.ts +18 -25
  15. package/src/ox-ocr-result-image.ts +35 -686
  16. package/src/type.ts +13 -0
  17. package/dist/src/camera-capturer.d.ts +0 -14
  18. package/dist/src/camera-capturer.js +0 -170
  19. package/dist/src/camera-capturer.js.map +0 -1
  20. package/dist/src/file-drop-helper.d.ts +0 -16
  21. package/dist/src/file-drop-helper.js +0 -47
  22. package/dist/src/file-drop-helper.js.map +0 -1
  23. package/dist/src/utils/touch-mouse-event.d.ts +0 -0
  24. package/dist/src/utils/touch-mouse-event.js +0 -2
  25. package/dist/src/utils/touch-mouse-event.js.map +0 -1
package/dist/src/ox-ocr-result-image.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property, query, state } from 'lit/decorators.js';
4
+ import { NOTHING_RESULT } from './type';
4
5
  import { touch2mouse } from './utils/touch-to-mouse-event';
5
6
  let OcrResultImage = class OcrResultImage extends LitElement {
6
7
  constructor() {
7
8
  super(...arguments);
8
- this.result = RESULT;
9
+ this.result = NOTHING_RESULT;
10
+ this._ratio = { x: 1, y: 1 };
9
11
  this._trails = [];
10
12
  this._tracking = false;
11
13
  this._selections = [];
@@ -13,7 +15,7 @@ let OcrResultImage = class OcrResultImage extends LitElement {
13
15
  }
14
16
  render() {
15
17
  return html `
16
- <img src=${this._image} />
18
+ <img src=${this._image} @load=${() => this.calculateRatio()} />
17
19
  <canvas overlay></canvas>
18
20
 
19
21
  ${this._text ? html ` <div notice>${this._text} copied!</div> ` : html ``}
@@ -37,8 +39,8 @@ let OcrResultImage = class OcrResultImage extends LitElement {
37
39
  .map((bounds) => {
38
40
  return bounds.map(bound => {
39
41
  return {
40
- x: bound.x * this._ratio.x,
41
- y: bound.y * this._ratio.y
42
+ x: bound.x,
43
+ y: bound.y // * this._ratio.y
42
44
  };
43
45
  });
44
46
  })
@@ -75,12 +77,16 @@ let OcrResultImage = class OcrResultImage extends LitElement {
75
77
  }
76
78
  async calculateRatio() {
77
79
  const { naturalWidth, naturalHeight, offsetWidth, offsetHeight } = this._img;
78
- this._overlay.setAttribute('width', String(offsetWidth));
79
- this._overlay.setAttribute('height', String(offsetHeight));
80
+ const { offsetWidth: overlayWidth, offsetHeight: overlayHeight } = this._overlay;
81
+ if (!naturalWidth || !naturalHeight) {
82
+ return;
83
+ }
80
84
  this._ratio = {
81
85
  x: offsetWidth / naturalWidth,
82
86
  y: offsetHeight / naturalHeight
83
87
  };
88
+ this._overlay.setAttribute('width', String(overlayWidth / this._ratio.x));
89
+ this._overlay.setAttribute('height', String(overlayHeight / this._ratio.y));
84
90
  }
85
91
  async connectedCallback() {
86
92
  await super.connectedCallback();
@@ -102,19 +108,28 @@ let OcrResultImage = class OcrResultImage extends LitElement {
102
108
  super.disconnectedCallback();
103
109
  this._resizeObserver.disconnect();
104
110
  }
111
+ initialize() {
112
+ this._selections = [];
113
+ this._trails = [];
114
+ this._text = '';
115
+ }
105
116
  async updated(changes) {
117
+ if (changes.has('file') || changes.has('result')) {
118
+ this.initialize();
119
+ }
106
120
  if (changes.has('file')) {
107
121
  this._image = this.file && URL.createObjectURL(this.file);
108
122
  if (this._image) {
109
- requestAnimationFrame(() => URL.revokeObjectURL(this._image));
123
+ requestAnimationFrame(() => {
124
+ URL.revokeObjectURL(this._image);
125
+ });
126
+ await this.updateComplete;
127
+ this.calculateRatio();
110
128
  }
111
129
  }
112
- await this.updateComplete;
113
130
  this.renderOverlay();
114
131
  }
115
132
  findIndex(x, y) {
116
- x /= this._ratio.x;
117
- y /= this._ratio.y;
118
133
  const { boundaries } = this.result;
119
134
  return boundaries.findIndex(path => {
120
135
  var result = false;
@@ -133,13 +148,15 @@ let OcrResultImage = class OcrResultImage extends LitElement {
133
148
  }
134
149
  updateTrails(point, started, attached) {
135
150
  if (started && !attached) {
136
- this._selections = [];
137
- this._trails = [];
151
+ this.initialize();
138
152
  }
139
153
  if (started) {
140
154
  this._trails.push([]);
141
155
  }
142
156
  var trail = this._trails[this._trails.length - 1];
157
+ if (!trail) {
158
+ return;
159
+ }
143
160
  trail.push(point);
144
161
  this._trails.flat().forEach(({ x, y }) => {
145
162
  const idx = this.findIndex(x, y);
@@ -158,7 +175,7 @@ let OcrResultImage = class OcrResultImage extends LitElement {
158
175
  return;
159
176
  }
160
177
  this._tracking = true;
161
- this.updateTrails({ x, y }, true, shiftKey);
178
+ this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, true, shiftKey);
162
179
  }
163
180
  onTrailEnd(e) {
164
181
  if (!this._tracking) {
@@ -175,7 +192,7 @@ let OcrResultImage = class OcrResultImage extends LitElement {
175
192
  if (!this._tracking) {
176
193
  return;
177
194
  }
178
- this.updateTrails({ x, y }, false);
195
+ this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, false);
179
196
  }
180
197
  };
181
198
  OcrResultImage.styles = [
@@ -259,663 +276,4 @@ OcrResultImage = __decorate([
259
276
  customElement('ox-ocr-result-image')
260
277
  ], OcrResultImage);
261
278
  export { OcrResultImage };
262
- const RESULT = {
263
- status_code: 200,
264
- key_values: {
265
- '1P': ['LNK304PG'],
266
- Q: ['259', '311', '430'],
267
- '9D': ['2139', '2139', '2135'],
268
- '1T': ['BA268F', 'BA268C', 'BC488D']
269
- },
270
- boundaries: [
271
- [
272
- {
273
- x: 217.0,
274
- y: 117.0
275
- },
276
- {
277
- x: 291.0,
278
- y: 120.0
279
- },
280
- {
281
- x: 291.0,
282
- y: 143.0
283
- },
284
- {
285
- x: 216.0,
286
- y: 140.0
287
- }
288
- ],
289
- [
290
- {
291
- x: 294.0,
292
- y: 120.0
293
- },
294
- {
295
- x: 442.0,
296
- y: 129.0
297
- },
298
- {
299
- x: 441.0,
300
- y: 151.0
301
- },
302
- {
303
- x: 292.0,
304
- y: 143.0
305
- }
306
- ],
307
- [
308
- {
309
- x: 443.0,
310
- y: 130.0
311
- },
312
- {
313
- x: 484.0,
314
- y: 130.0
315
- },
316
- {
317
- x: 484.0,
318
- y: 151.0
319
- },
320
- {
321
- x: 443.0,
322
- y: 151.0
323
- }
324
- ],
325
- [
326
- {
327
- x: 549.0,
328
- y: 134.0
329
- },
330
- {
331
- x: 642.0,
332
- y: 138.0
333
- },
334
- {
335
- x: 642.0,
336
- y: 157.0
337
- },
338
- {
339
- x: 548.0,
340
- y: 152.0
341
- }
342
- ],
343
- [
344
- {
345
- x: 255.0,
346
- y: 163.0
347
- },
348
- {
349
- x: 390.0,
350
- y: 167.0
351
- },
352
- {
353
- x: 389.0,
354
- y: 191.0
355
- },
356
- {
357
- x: 254.0,
358
- y: 187.0
359
- }
360
- ],
361
- [
362
- {
363
- x: 212.0,
364
- y: 208.0
365
- },
366
- {
367
- x: 255.0,
368
- y: 208.0
369
- },
370
- {
371
- x: 255.0,
372
- y: 235.0
373
- },
374
- {
375
- x: 212.0,
376
- y: 235.0
377
- }
378
- ],
379
- [
380
- {
381
- x: 257.0,
382
- y: 210.0
383
- },
384
- {
385
- x: 320.0,
386
- y: 210.0
387
- },
388
- {
389
- x: 320.0,
390
- y: 232.0
391
- },
392
- {
393
- x: 257.0,
394
- y: 232.0
395
- }
396
- ],
397
- [
398
- {
399
- x: 383.0,
400
- y: 214.0
401
- },
402
- {
403
- x: 480.0,
404
- y: 218.0
405
- },
406
- {
407
- x: 480.0,
408
- y: 240.0
409
- },
410
- {
411
- x: 383.0,
412
- y: 236.0
413
- }
414
- ],
415
- [
416
- {
417
- x: 215.0,
418
- y: 301.0
419
- },
420
- {
421
- x: 382.0,
422
- y: 301.0
423
- },
424
- {
425
- x: 382.0,
426
- y: 325.0
427
- },
428
- {
429
- x: 215.0,
430
- y: 325.0
431
- }
432
- ],
433
- [
434
- {
435
- x: 436.0,
436
- y: 305.0
437
- },
438
- {
439
- x: 539.0,
440
- y: 305.0
441
- },
442
- {
443
- x: 539.0,
444
- y: 327.0
445
- },
446
- {
447
- x: 436.0,
448
- y: 327.0
449
- }
450
- ],
451
- [
452
- {
453
- x: 537.0,
454
- y: 308.0
455
- },
456
- {
457
- x: 582.0,
458
- y: 308.0
459
- },
460
- {
461
- x: 582.0,
462
- y: 328.0
463
- },
464
- {
465
- x: 537.0,
466
- y: 328.0
467
- }
468
- ],
469
- [
470
- {
471
- x: 594.0,
472
- y: 309.0
473
- },
474
- {
475
- x: 624.0,
476
- y: 309.0
477
- },
478
- {
479
- x: 624.0,
480
- y: 334.0
481
- },
482
- {
483
- x: 594.0,
484
- y: 334.0
485
- }
486
- ],
487
- [
488
- {
489
- x: 624.0,
490
- y: 310.0
491
- },
492
- {
493
- x: 659.0,
494
- y: 310.0
495
- },
496
- {
497
- x: 659.0,
498
- y: 330.0
499
- },
500
- {
501
- x: 624.0,
502
- y: 330.0
503
- }
504
- ],
505
- [
506
- {
507
- x: 675.0,
508
- y: 311.0
509
- },
510
- {
511
- x: 707.0,
512
- y: 311.0
513
- },
514
- {
515
- x: 707.0,
516
- y: 330.0
517
- },
518
- {
519
- x: 675.0,
520
- y: 330.0
521
- }
522
- ],
523
- [
524
- {
525
- x: 735.0,
526
- y: 342.0
527
- },
528
- {
529
- x: 775.0,
530
- y: 342.0
531
- },
532
- {
533
- x: 775.0,
534
- y: 360.0
535
- },
536
- {
537
- x: 735.0,
538
- y: 360.0
539
- }
540
- ],
541
- [
542
- {
543
- x: 806.0,
544
- y: 341.0
545
- },
546
- {
547
- x: 829.0,
548
- y: 341.0
549
- },
550
- {
551
- x: 829.0,
552
- y: 359.0
553
- },
554
- {
555
- x: 806.0,
556
- y: 359.0
557
- }
558
- ],
559
- [
560
- {
561
- x: 217.0,
562
- y: 386.0
563
- },
564
- {
565
- x: 381.0,
566
- y: 383.0
567
- },
568
- {
569
- x: 381.0,
570
- y: 407.0
571
- },
572
- {
573
- x: 217.0,
574
- y: 410.0
575
- }
576
- ],
577
- [
578
- {
579
- x: 436.0,
580
- y: 387.0
581
- },
582
- {
583
- x: 536.0,
584
- y: 387.0
585
- },
586
- {
587
- x: 536.0,
588
- y: 410.0
589
- },
590
- {
591
- x: 436.0,
592
- y: 410.0
593
- }
594
- ],
595
- [
596
- {
597
- x: 535.0,
598
- y: 388.0
599
- },
600
- {
601
- x: 577.0,
602
- y: 388.0
603
- },
604
- {
605
- x: 577.0,
606
- y: 407.0
607
- },
608
- {
609
- x: 535.0,
610
- y: 407.0
611
- }
612
- ],
613
- [
614
- {
615
- x: 590.0,
616
- y: 387.0
617
- },
618
- {
619
- x: 617.0,
620
- y: 387.0
621
- },
622
- {
623
- x: 617.0,
624
- y: 411.0
625
- },
626
- {
627
- x: 590.0,
628
- y: 411.0
629
- }
630
- ],
631
- [
632
- {
633
- x: 618.0,
634
- y: 388.0
635
- },
636
- {
637
- x: 653.0,
638
- y: 388.0
639
- },
640
- {
641
- x: 653.0,
642
- y: 409.0
643
- },
644
- {
645
- x: 618.0,
646
- y: 409.0
647
- }
648
- ],
649
- [
650
- {
651
- x: 669.0,
652
- y: 389.0
653
- },
654
- {
655
- x: 702.0,
656
- y: 389.0
657
- },
658
- {
659
- x: 702.0,
660
- y: 408.0
661
- },
662
- {
663
- x: 669.0,
664
- y: 408.0
665
- }
666
- ],
667
- [
668
- {
669
- x: 728.0,
670
- y: 416.0
671
- },
672
- {
673
- x: 769.0,
674
- y: 416.0
675
- },
676
- {
677
- x: 769.0,
678
- y: 436.0
679
- },
680
- {
681
- x: 728.0,
682
- y: 436.0
683
- }
684
- ],
685
- [
686
- {
687
- x: 798.0,
688
- y: 416.0
689
- },
690
- {
691
- x: 822.0,
692
- y: 416.0
693
- },
694
- {
695
- x: 822.0,
696
- y: 433.0
697
- },
698
- {
699
- x: 798.0,
700
- y: 433.0
701
- }
702
- ],
703
- [
704
- {
705
- x: 219.0,
706
- y: 465.0
707
- },
708
- {
709
- x: 381.0,
710
- y: 460.0
711
- },
712
- {
713
- x: 382.0,
714
- y: 482.0
715
- },
716
- {
717
- x: 220.0,
718
- y: 487.0
719
- }
720
- ],
721
- [
722
- {
723
- x: 434.0,
724
- y: 463.0
725
- },
726
- {
727
- x: 534.0,
728
- y: 461.0
729
- },
730
- {
731
- x: 534.0,
732
- y: 481.0
733
- },
734
- {
735
- x: 435.0,
736
- y: 483.0
737
- }
738
- ],
739
- [
740
- {
741
- x: 532.0,
742
- y: 462.0
743
- },
744
- {
745
- x: 574.0,
746
- y: 462.0
747
- },
748
- {
749
- x: 574.0,
750
- y: 479.0
751
- },
752
- {
753
- x: 532.0,
754
- y: 479.0
755
- }
756
- ],
757
- [
758
- {
759
- x: 587.0,
760
- y: 461.0
761
- },
762
- {
763
- x: 614.0,
764
- y: 461.0
765
- },
766
- {
767
- x: 614.0,
768
- y: 482.0
769
- },
770
- {
771
- x: 587.0,
772
- y: 482.0
773
- }
774
- ],
775
- [
776
- {
777
- x: 616.0,
778
- y: 461.0
779
- },
780
- {
781
- x: 650.0,
782
- y: 463.0
783
- },
784
- {
785
- x: 649.0,
786
- y: 481.0
787
- },
788
- {
789
- x: 615.0,
790
- y: 479.0
791
- }
792
- ],
793
- [
794
- {
795
- x: 664.0,
796
- y: 461.0
797
- },
798
- {
799
- x: 697.0,
800
- y: 461.0
801
- },
802
- {
803
- x: 697.0,
804
- y: 479.0
805
- },
806
- {
807
- x: 664.0,
808
- y: 479.0
809
- }
810
- ],
811
- [
812
- {
813
- x: 723.0,
814
- y: 486.0
815
- },
816
- {
817
- x: 761.0,
818
- y: 486.0
819
- },
820
- {
821
- x: 761.0,
822
- y: 504.0
823
- },
824
- {
825
- x: 723.0,
826
- y: 504.0
827
- }
828
- ],
829
- [
830
- {
831
- x: 792.0,
832
- y: 485.0
833
- },
834
- {
835
- x: 814.0,
836
- y: 485.0
837
- },
838
- {
839
- x: 814.0,
840
- y: 500.0
841
- },
842
- {
843
- x: 792.0,
844
- y: 500.0
845
- }
846
- ],
847
- [
848
- {
849
- x: 586.0,
850
- y: 535.0
851
- },
852
- {
853
- x: 626.0,
854
- y: 535.0
855
- },
856
- {
857
- x: 626.0,
858
- y: 551.0
859
- },
860
- {
861
- x: 586.0,
862
- y: 551.0
863
- }
864
- ],
865
- [
866
- {
867
- x: 664.0,
868
- y: 533.0
869
- },
870
- {
871
- x: 700.0,
872
- y: 533.0
873
- },
874
- {
875
- x: 700.0,
876
- y: 548.0
877
- },
878
- {
879
- x: 664.0,
880
- y: 548.0
881
- }
882
- ]
883
- ],
884
- texts: [
885
- 'POWER',
886
- 'INTEGRATIONS',
887
- 'INC.',
888
- '15/10/2021',
889
- 'LinkSwitchTM',
890
- '(1P)',
891
- 'PROD:',
892
- 'LNK304PG',
893
- '(1T)LotNo:BA268F',
894
- '(9D)DtCode:',
895
- '2139',
896
- '(Q)',
897
- 'Qty:',
898
- '259',
899
- 'COO:',
900
- 'CN',
901
- '(1T)LotNo:BA268C',
902
- '(9D)DtCode:',
903
- '2139',
904
- '(Q)',
905
- 'Qty:',
906
- '311',
907
- 'COO:',
908
- 'CN',
909
- '(1T)LotNo:BC488D',
910
- '(9D)DtCode:',
911
- '2135',
912
- '(Q)',
913
- 'Qty:',
914
- '430',
915
- 'COO:',
916
- 'CN',
917
- 'Total',
918
- '1000'
919
- ]
920
- };
921
279
  //# sourceMappingURL=ox-ocr-result-image.js.map