{"_id":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web","_rev":"3-e28b36e650f3a9459bd7cc4f862e9517","name":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web","version":"1.0.1","_id":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web@1.0.1","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web#readme","bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web/issues"},"dist":{"shasum":"14376060a07ed9d8c63cfc6419750793e2073c1d","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web/-/cty-ocr-interactive-bbox-web-1.0.1.tgz","fileCount":6,"integrity":"sha512-OTlLbChL6G7QFVEhjAfW+tcZeaBtZ7Z69ZiNCzzEmGFksY/+/DyRBF1fpCgrHbND2y5Vu0gHPoq+TTrLgXo8TA==","signatures":[{"sig":"MEUCIQCVyAVtyekr324wsp8CBXCvF9cs3Iu4Q1iSmIB712blDwIgIaEceB9rdpYPDcNRoiovVAdodL+i0Ivh7gYV3AN9kW4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19957},"main":"./dist/cty-ocr-interactive-bbox.umd.js","type":"module","module":"./dist/cty-ocr-interactive-bbox.es.js","exports":{".":{"import":"./dist/cty-ocr-interactive-bbox.es.js","require":"./dist/cty-ocr-interactive-bbox.umd.js"}},"gitHead":"6978b770314c0c662cd9f96d402a5d103b4a4eff","scripts":{"build":"vite build"},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"repository":{"url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive responsive bounding box drawer and form target aligner for OCR applications.","directories":{},"_nodeVersion":"23.11.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cty-ocr-interactive-bbox-web_1.0.1_1783087049497_0.5710487949098113","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web","version":"1.0.2","_id":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web@1.0.2","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web#readme","bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web/issues"},"dist":{"shasum":"e82f49660c9b7dcf5f7b26bb9c624f15499c8e88","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web/-/cty-ocr-interactive-bbox-web-1.0.2.tgz","fileCount":6,"integrity":"sha512-q74/QkhFokN5iHAPUP/VY03w/aNPc7p7dtEX+P398xmrQbEAxkbjopjJtCOJh+1XYkNuwYIqHSFHpKFtmpdJXg==","signatures":[{"sig":"MEUCIDujwqrRuur8LViXgxBQ3wfIM/KVz5cQI5TQfosHfI+oAiEAp//EuTumpJ4CiW6XGVfFn5jBtPvFsdjlXVyJr+5BsYs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20187},"main":"./dist/cty-ocr-interactive-bbox.umd.js","type":"module","module":"./dist/cty-ocr-interactive-bbox.es.js","exports":{".":{"import":"./dist/cty-ocr-interactive-bbox.es.js","require":"./dist/cty-ocr-interactive-bbox.umd.js"}},"gitHead":"fa310a4cc094fd178cde8875276beda9ad7f99cd","scripts":{"build":"vite build"},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"repository":{"url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive responsive bounding box drawer and form target aligner for OCR applications.","directories":{},"_nodeVersion":"23.11.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cty-ocr-interactive-bbox-web_1.0.2_1783090764062_0.48277938279363086","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web","description":"Interactive responsive bounding box drawer and form target aligner for OCR applications.","version":"1.0.3","license":"SEE LICENSE IN LICENSE","type":"module","repository":{"type":"git","url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web.git"},"bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web/issues"},"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web#readme","main":"./dist/cty-ocr-interactive-bbox.umd.js","module":"./dist/cty-ocr-interactive-bbox.es.js","exports":{".":{"import":"./dist/cty-ocr-interactive-bbox.es.js","require":"./dist/cty-ocr-interactive-bbox.umd.js"}},"scripts":{"build":"vite build"},"publishConfig":{"access":"public"},"dependencies":{},"devDependencies":{"vite":"^5.2.0"},"_id":"@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web@1.0.3","gitHead":"2d7c24fc3b5d7d5b2773491da0537ea3040e8786","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qUG400r4UYn3G/UkqS1hHjakh5M+cfHal48KFBja/71osS5Mx+sYfQb+rG7oH1TnfR+UtpL/BwZ48FVEPQtqiQ==","shasum":"6092ee1ed75e8f30b0bc3db6f335ff46a44e9af6","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web/-/cty-ocr-interactive-bbox-web-1.0.3.tgz","fileCount":6,"unpackedSize":20190,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDnDsqQEDcGcnAy150jSgwzLSHI04hmbYnmpRGrs1XTUwIgWQxsfgHR8eA+T715iDveYXe71upeyD2ASjQDLU6BTHY="}]},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"directories":{},"maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cty-ocr-interactive-bbox-web_1.0.3_1783146793528_0.8147532829918862"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T13:57:29.388Z","modified":"2026-07-04T06:33:13.818Z","1.0.1":"2026-07-03T13:57:29.628Z","1.0.2":"2026-07-03T14:59:24.187Z","1.0.3":"2026-07-04T06:33:13.690Z"},"bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web/issues"},"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web#readme","repository":{"type":"git","url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-ocr-interactive-bbox-web.git"},"description":"Interactive responsive bounding box drawer and form target aligner for OCR applications.","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"readme":"# @craftthingy-digital-innovation/cty-ocr-interactive-bbox-web\n\nBilingual documentation: [Bahasa Indonesia](#bahasa-indonesia) | [English](#english)\n\n---\n\n## Bahasa Indonesia\n\nLibrary client-side JavaScript modular untuk menggambar, menyelaraskan, dan menangani interaksi kotak bounding box OCR secara interaktif dan responsif di atas elemen gambar.\n\n### Fitur Utama\n- 📐 **Penskalaan Responsif:** Bounding box otomatis menyesuaikan skala saat browser di-resize (mengubah koordinat piksel alami gambar ke skala render aktif).\n- ✏️ **Target Field Alignment:** Mengisi kolom formulir target yang sedang aktif saat kotak OCR diklik.\n- ⏭️ **Auto-Advance Sequencing:** Berpindah ke kolom formulir berikutnya secara otomatis jika kolom aktif selesai diisi.\n- 🎨 **Self-Contained Styles:** Menyematkan styles modern bawaan secara dinamis saat diinisialisasi.\n\n### Instalasi\n```bash\nnpm install @craftthingy-digital-innovation/cty-ocr-interactive-bbox-web\n```\n\n### Cara Penggunaan\n```javascript\nimport { OcrBboxVisualizer } from '@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web';\n\nconst visualizer = new OcrBboxVisualizer({\n  container: '#ocr-interactive-container', // Element container gambar\n  image: '#ocr-interactive-image', // Element gambar <img>\n  bboxes: ocrResults, // Array data [{ text, box: { x, y, width, height } }]\n  activeTargetField: 'ocr-field-no_paspor',\n  fieldsSequence: ['ocr-field-no_paspor', 'ocr-field-nama_pemohon', 'ocr-field-tempat_lahir'],\n  autoAdvance: true,\n  onWordClick: (word, activeField) => {\n    // Dipanggil saat bbox diklik\n    const input = document.getElementById(activeField);\n    if (input) {\n      input.value = word.text;\n      input.dispatchEvent(new Event('input'));\n    }\n  },\n  onAutoAdvance: (nextField) => {\n    // Dipanggil saat berpindah target aktif\n    const nextBtn = document.querySelector(`.btn-ocr-target[data-target=\"${nextField}\"]`);\n    if (nextBtn) nextBtn.click();\n  }\n});\n\n// Render bboxes\nvisualizer.draw();\n\n// Update target aktif secara dinamis\nvisualizer.setActiveTargetField('ocr-field-nama_pemohon');\n\n// Hancurkan listener jika modal ditutup\nvisualizer.destroy();\n```\n\n---\n\n## English\n\nA modular client-side JavaScript library to draw, scale, and manage interactive OCR bounding boxes responsively on top of image viewport elements.\n\n### Key Features\n- 📐 **Responsive Auto-Scaling:** BBoxes scale automatically on viewport resize (computes raw natural resolution to active display widths/heights).\n- ✏️ **Target Field Alignment:** Maps clicked OCR boxes directly to active form target inputs.\n- ⏭️ **Auto-Advance Sequencing:** Cycles automatically to the next form field key sequence once a click is registered.\n- 🎨 **Self-Contained Styles:** Injects high-performance CSS styles automatically upon instantiation.\n\n### Installation\n```bash\nnpm install @craftthingy-digital-innovation/cty-ocr-interactive-bbox-web\n```\n\n### Usage\n```javascript\nimport { OcrBboxVisualizer } from '@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web';\n\nconst visualizer = new OcrBboxVisualizer({\n  container: '#ocr-interactive-container',\n  image: '#ocr-interactive-image',\n  bboxes: ocrResults,\n  activeTargetField: 'ocr-field-no_paspor',\n  fieldsSequence: ['ocr-field-no_paspor', 'ocr-field-nama_pemohon', 'ocr-field-tempat_lahir'],\n  autoAdvance: true,\n  onWordClick: (word, activeField) => {\n    const input = document.getElementById(activeField);\n    if (input) {\n      input.value = word.text;\n      input.dispatchEvent(new Event('input'));\n    }\n  },\n  onAutoAdvance: (nextField) => {\n    const nextBtn = document.querySelector(`.btn-ocr-target[data-target=\"${nextField}\"]`);\n    if (nextBtn) nextBtn.click();\n  }\n});\n\nvisualizer.draw();\nvisualizer.setActiveTargetField('ocr-field-nama_pemohon');\nvisualizer.destroy();\n```\n\n## License\nLicensed under Public-Source Corporate Royalty License (PSCRL). See [LICENSE](./LICENSE) for details.\n","readmeFilename":"README.md","license":"SEE LICENSE IN LICENSE"}