-
-
-
+
+
+
-
-
-
-
-
-
-
- Page
-
- of {{previewPageCount}}
+ @if (previewDocId) {
+
+ }
-
- {{ zoom * 100 | number: '1.0-0' }}%
-
+
+ {{ documentFormatter(document) }}
+
+
+ @switch (searchStatus()) {
+ @case ('loading') { Searching... }
+ @case ('empty') { No matching documents. }
+ @case ('error') { Document search failed. }
+ }
-
-
-
-
-
-
-
-
+
+
-
@@ -72,10 +69,6 @@
- OCR text -
{{ zoneTestResult.raw_text || '(nothing detected)' }}
+ {{ result.raw_text || '(nothing detected)' }}- Value -
{{ zoneTestResult.value || '(empty)' }}
- @if (zoneTestResult.regex) {
+ {{ result.value || '(empty)' }}
+ @if (result.regex) {
- Validation
-
- @if (zoneTestResult.regex_match) {
+ @if (result.regex_match) {
Regex matches
} @else {
Regex does not match
@@ -339,7 +326,7 @@
}
} @else {
- Select a zone from the Zones tab, or draw a rectangle on the document to create one. + No zone selected.
} @@ -349,94 +336,129 @@
{{ zone.name }}
-
-
-
-
@@ -305,7 +292,7 @@
Test
@if (!previewDocId) {- Load a document in the Settings tab to test this zone. + No sample document selected.
} @else { - @if (zoneTestResult) { - @if (zoneTestResult.error) { -{{ zoneTestResult.error }}
+ @if (zoneTestResult; as result) {
+ @if (result.error) {
+ {{ result.error }}
} @else {
- @if (pageImageUrl) {
-
+ let component: OcrTemplateEditorComponent
+ const documents = {
+ list: jest.fn(),
+ get: jest.fn(),
+ }
+ const templates = {
+ testZone: jest.fn(),
+ getPageImageUrl: (id: number, page: number) => `/preview/${id}/${page}`,
+ }
+
+ beforeEach(async () => {
+ documents.list.mockReset().mockReturnValue(of({ results: [] }))
+ documents.get.mockReset().mockReturnValue(of({ id: 1, page_count: 3 }))
+ templates.testZone.mockReset()
+ await TestBed.configureTestingModule({
+ imports: [OcrTemplateEditorComponent],
+ providers: [
+ {
+ provide: ActivatedRoute,
+ useValue: { snapshot: { paramMap: new Map(), queryParams: {} } },
+ },
+ { provide: DocumentService, useValue: documents },
+ { provide: OcrTemplateService, useValue: templates },
+ ...[CustomFieldsService, DocumentTypeService, CorrespondentService].map(
+ (provide) => ({
+ provide,
+ useValue: { listAll: () => of({ results: [] }) },
+ })
+ ),
+ { provide: ToastService, useValue: {} },
+ ],
+ })
+ .overrideComponent(OcrTemplateEditorComponent, {
+ set: { template: '{{ searchStatus() }}', imports: [] },
+ })
+ .compileComponents()
+ fixture = TestBed.createComponent(OcrTemplateEditorComponent)
+ component = fixture.componentInstance
+ })
+
+ afterEach(() => jest.useRealTimers())
+
+ function prepareOverlay() {
+ const image = document.createElement('img')
+ Object.defineProperties(image, {
+ naturalWidth: { value: 1000 },
+ naturalHeight: { value: 1000 },
+ clientWidth: { value: 1000 },
+ })
+ const overlay = document.createElementNS(
+ 'http://www.w3.org/2000/svg',
+ 'svg'
+ )
+ Object.assign(overlay, {
+ getScreenCTM: () => ({ inverse: () => ({}) }),
+ createSVGPoint: () => ({
+ x: 0,
+ y: 0,
+ matrixTransform() {
+ return { x: this.x, y: this.y }
+ },
+ }),
+ setPointerCapture: jest.fn(),
+ hasPointerCapture: () => true,
+ releasePointerCapture: jest.fn(),
+ })
+ component.imageRef = new ElementRef(image)
+ component.overlayRef = new ElementRef(overlay)
+ component.previewStatus = 'ready'
+ }
+
+ function pointer(x: number, y: number, pointerId = 1): PointerEvent {
+ return Object.assign(
+ new MouseEvent('pointermove', { clientX: x, clientY: y, button: 0 }),
+ { pointerId }
+ ) as PointerEvent
+ }
+
+ it('searches across document metadata even when a template document type is set', () => {
+ jest.useFakeTimers()
+ const term$ = new Subject()
+ const doc = { id: 1, title: 'Electricity Bill' } as Document
+ documents.list.mockReturnValue(of({ results: [doc] }))
+ component.template.document_type = 2
+ const found = jest.fn()
+ component.searchDocuments(term$).subscribe(found)
+
+ term$.next(' northw ')
+ jest.advanceTimersByTime(250)
+
+ expect(documents.list).toHaveBeenCalledWith(1, 10, 'created', true, {
+ search: 'northw',
+ truncate_content: true,
+ })
+ expect(found).toHaveBeenCalledWith([doc])
+ expect(component.searchStatus()).toBe('ready')
+ })
+
+ it('distinguishes an empty search from a failed request and allows another search', () => {
+ jest.useFakeTimers()
+ const term$ = new Subject()
+ component.searchDocuments(term$).subscribe()
+ term$.next('missing')
+ jest.advanceTimersByTime(250)
+ expect(component.searchStatus()).toBe('empty')
+
+ documents.list.mockReturnValueOnce(throwError(() => new Error('offline')))
+ term$.next('offline')
+ jest.advanceTimersByTime(250)
+ expect(component.searchStatus()).toBe('error')
+
+ term$.next('retry')
+ jest.advanceTimersByTime(250)
+ expect(component.searchStatus()).toBe('empty')
+ })
+
+ it('renders asynchronous search feedback without a user interaction', async () => {
+ fixture.detectChanges()
+ const pending = new Subject<{ results: Document[] }>()
+ const term$ = new Subject()
+ documents.list.mockReturnValue(pending)
+ component.searchDocuments(term$).subscribe()
+ term$.next('missing')
+ await new Promise((resolve) => setTimeout(resolve, 275))
+ pending.next({ results: [] })
+ await fixture.whenStable()
+
+ expect(fixture.nativeElement.textContent).toBe('empty')
+ })
+
+ it('does not create zones by dragging empty space in Select mode', () => {
+ prepareOverlay()
+ component.onOverlayPointerDown(pointer(100, 100))
+ component.onOverlayPointerMove(pointer(300, 200))
+ component.onOverlayPointerUp(pointer(300, 200))
+
+ expect(component.template.zones).toEqual([])
+ })
+
+ it('draws within the page bounds, uses the release position and returns to Select', () => {
+ prepareOverlay()
+ component.setOverlayMode('draw')
+ component.onOverlayPointerDown(pointer(100, 100))
+ component.onOverlayPointerUp(pointer(1200, 250))
+
+ expect(component.template.zones[0]).toMatchObject({
+ x: 100,
+ y: 100,
+ width: 900,
+ height: 150,
+ })
+ expect(component.selectedZoneIndex).toBe(0)
+ expect(component.overlayMode).toBe('select')
+ })
+
+ it('discards a drawing on Escape and ignores other pointers', () => {
+ prepareOverlay()
+ component.setOverlayMode('draw')
+ component.onOverlayPointerDown(pointer(100, 100))
+ component.onOverlayPointerUp(pointer(300, 200, 2))
+ expect(component.drawingRect()).not.toBeNull()
+
+ component.cancelDrawing()
+ component.onOverlayPointerUp(pointer(300, 200))
+ expect(component.template.zones).toEqual([])
+ expect(component.overlayMode).toBe('select')
+ })
+
+ it('hides results when extraction settings or geometry change', () => {
+ const selected = zone()
+ component.template.zones = [selected]
+ component.selectedZoneIndex = 0
+ component.previewDocId = 1
+ templates.testZone.mockReturnValue(of({ value: '123' }))
+ component.testZone()
+ expect(component.zoneTestResult?.value).toBe('123')
+
+ selected.transform = 'numeric'
+ expect(component.zoneTestResult).toBeNull()
+ component.testZone()
+ selected.width++
+ expect(component.zoneTestResult).toBeNull()
+ })
+
+ it('cancels a pending test when selection or sample document changes', () => {
+ const pending = new Subject()
+ component.template.zones = [zone(), zone()]
+ component.selectedZoneIndex = 0
+ component.previewDocId = 1
+ templates.testZone.mockReturnValue(pending)
+ component.testZone()
+ expect(component.zoneTesting).toBe(true)
+
+ component.selectZone(1)
+ pending.next({ value: 'Old zone' })
+ expect(component.zoneTesting).toBe(false)
+ expect(component.zoneTestResult).toBeNull()
+
+ component.testZone()
+ component.clearPreviewDoc()
+ pending.next({ value: 'Old document' })
+ expect(component.zoneTestResult).toBeNull()
+ })
+
+ it('ignores document metadata from a previous preview selection', () => {
+ const pending = new Subject()
+ documents.get.mockReturnValueOnce(pending)
+ component.previewDocId = 1
+ component.loadPreview()
+ component.previewDocId = 2
+ component.loadPreview()
+ pending.next({ id: 1, page_count: 99 } as Document)
+
+ expect(component.previewPageCount).toBe(3)
+ })
+
+ it('can retry a failed preview and clear the selected document', () => {
+ component.previewDocId = 1
+ component.loadPreview()
+ component.onImageError()
+ expect(component.previewStatus).toBe('error')
+
+ component.loadPreview()
+ expect(component.previewStatus).toBe('loading')
+ component.clearPreviewDoc()
+ expect(component.previewStatus).toBe('empty')
+ expect(component.pageImageUrl).toBeNull()
+ })
+})
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
index f9e735cb7..ea57d8ee8 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
@@ -7,10 +7,11 @@ import {
inject,
OnDestroy,
OnInit,
+ signal,
ViewChild,
} from '@angular/core'
import { FormsModule } from '@angular/forms'
-import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import { ActivatedRoute, RouterModule } from '@angular/router'
import {
NgbNavModule,
NgbPopoverModule,
@@ -29,6 +30,7 @@ import {
Subject,
switchMap,
takeUntil,
+ tap,
} from 'rxjs'
import { SelectComponent } from 'src/app/components/common/input/select/select.component'
import { SwitchComponent } from 'src/app/components/common/input/switch/switch.component'
@@ -70,6 +72,7 @@ import {
getZonePage,
HANDLE_SIZE,
isZoneOnPage,
+ MIN_ZONE_SIZE,
MoveStart,
moveZone,
Point,
@@ -79,17 +82,28 @@ import {
type ActiveTab = 'settings' | 'zones' | 'zone'
type ZoneFieldSelection = OcrBuiltinTarget | number | null
+type OverlayMode = 'select' | 'draw'
type OverlayInteraction =
| { kind: 'idle' }
- | { kind: 'drawing'; rect: DrawingRect }
- | { kind: 'moving'; zoneIndex: number; start: MoveStart }
- | { kind: 'resizing'; zoneIndex: number; handle: ResizeHandle }
+ | { kind: 'drawing'; pointerId: number; rect: DrawingRect }
+ | { kind: 'moving'; pointerId: number; zoneIndex: number; start: MoveStart }
+ | {
+ kind: 'resizing'
+ pointerId: number
+ zoneIndex: number
+ handle: ResizeHandle
+ }
+interface ZoneTest {
+ zone: OcrTemplateZone
+ documentId: number
+ request: ZoneTestRequest
+ result: OcrZoneTestResult | null
+}
interface ResizeHandleMarker extends Point {
handle: ResizeHandle
}
const CUSTOM_DATE_FORMAT_CHOICE = 'custom'
-const MIN_DRAWN_ZONE_SIZE = 10
const NO_OVERLAY_INTERACTION: OverlayInteraction = { kind: 'idle' }
const ZONE_COLORS = [
'#4f8ff7',
@@ -135,7 +149,6 @@ const RESIZE_CURSOR: Record = {
})
export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
private readonly route = inject(ActivatedRoute)
- private readonly router = inject(Router)
private readonly templateService = inject(OcrTemplateService)
private readonly customFieldsService = inject(CustomFieldsService)
private readonly documentTypeService = inject(DocumentTypeService)
@@ -144,10 +157,27 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
private readonly toastService = inject(ToastService)
private readonly changeDetector = inject(ChangeDetectorRef)
private readonly destroy$ = new Subject()
+ private readonly cancelZoneTest$ = new Subject()
private readonly customDateFormatZones = new WeakSet()
@ViewChild('zoneOverlay') overlayRef: ElementRef
- @ViewChild('pageImage') imageRef: ElementRef
+ imageRef: ElementRef
+ private previewResizeObserver: ResizeObserver | null = null
+ private readonly overlayScale = signal(1)
+
+ @ViewChild('pageImage')
+ set pageImage(ref: ElementRef | undefined) {
+ this.previewResizeObserver?.disconnect()
+ this.imageRef = ref
+ if (!ref) return
+ this.previewResizeObserver = new ResizeObserver(() => {
+ const image = ref.nativeElement
+ if (image.naturalWidth && image.clientWidth) {
+ this.overlayScale.set(image.naturalWidth / image.clientWidth)
+ }
+ })
+ this.previewResizeObserver.observe(ref.nativeElement)
+ }
template: OcrTemplate = {
id: null,
@@ -177,7 +207,11 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
previewPageCount: number | null = null
private pageCountForDoc: number | null = null
pageImageUrl: string | null = null
- imageLoaded = false
+ previewStatus: 'empty' | 'loading' | 'ready' | 'error' = 'empty'
+ previewError = ''
+ readonly searchStatus = signal<
+ 'idle' | 'loading' | 'ready' | 'empty' | 'error'
+ >('idle')
zoom = 1
previewDocModel: Document | string = ''
private correspondentNames = new Map()
@@ -194,10 +228,22 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
selectedZoneIndex: number | null = null
private overlayInteraction: OverlayInteraction = NO_OVERLAY_INTERACTION
- overlayCursor = 'crosshair'
+ overlayMode: OverlayMode = 'select'
+ overlayCursor = 'default'
- zoneTestResult: OcrZoneTestResult | null = null
- zoneTesting = false
+ private zoneTest: ZoneTest | null = null
+
+ get imageLoaded(): boolean {
+ return this.previewStatus === 'ready'
+ }
+
+ get zoneTestResult(): OcrZoneTestResult | null {
+ return this.isCurrentZoneTest() ? this.zoneTest.result : null
+ }
+
+ get zoneTesting(): boolean {
+ return this.isCurrentZoneTest() && this.zoneTest.result === null
+ }
showQuickCreate = false
quickCreateName = ''
@@ -282,23 +328,35 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
searchDocuments = (text$: Observable): Observable =>
text$.pipe(
+ map((term) => term.trim()),
debounceTime(250),
distinctUntilChanged(),
switchMap((term) => {
- if (!term || term.trim().length < 2) return of([])
- const params: { title__icontains: string; document_type__id?: number } =
- { title__icontains: term.trim() }
- if (this.template.document_type) {
- params['document_type__id'] = this.template.document_type
+ if (term.length < 2) {
+ this.searchStatus.set('idle')
+ return of([])
}
- return this.documentService.list(1, 10, 'created', true, params).pipe(
- map((r) => r.results),
- catchError(() => of([]))
- )
+ this.searchStatus.set('loading')
+ return this.documentService
+ .list(1, 10, 'created', true, {
+ search: term,
+ truncate_content: true,
+ })
+ .pipe(
+ map((r) => r.results),
+ tap((documents) => {
+ this.searchStatus.set(documents.length ? 'ready' : 'empty')
+ }),
+ catchError(() => {
+ this.searchStatus.set('error')
+ return of([])
+ })
+ )
})
)
- documentFormatter = (doc: Document | string): string => {
+ documentFormatter = (doc: Document | string | null): string => {
+ if (!doc) return ''
if (typeof doc === 'string') return doc
const corr = doc.correspondent
? this.correspondentNames.get(doc.correspondent)
@@ -312,6 +370,7 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
event.preventDefault()
const doc: Document = event.item
this.previewDocModel = doc
+ this.searchStatus.set('idle')
this.previewDocId = doc.id
if (!this.template.document_type && doc.document_type) {
this.template.document_type = doc.document_type
@@ -321,31 +380,45 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
}
clearPreviewDoc() {
+ this.stopOverlayInteraction()
+ this.clearZoneTest()
this.previewDocModel = ''
this.previewDocId = null
this.previewPageCount = null
this.pageCountForDoc = null
this.previewPage = 0
this.pageImageUrl = null
- this.imageLoaded = false
+ this.previewStatus = 'empty'
+ this.previewError = ''
+ this.searchStatus.set('idle')
}
loadPreview() {
if (!this.previewDocId) return
- if (this.pageCountForDoc !== this.previewDocId) {
- this.pageCountForDoc = this.previewDocId
+ this.stopOverlayInteraction()
+ this.clearZoneTest()
+ this.previewStatus = 'loading'
+ this.previewError = ''
+ const documentId = this.previewDocId
+ if (this.pageCountForDoc !== documentId) {
+ this.pageCountForDoc = documentId
this.previewPageCount = null
this.documentService
- .get(this.previewDocId)
+ .get(documentId)
.pipe(takeUntil(this.destroy$))
.subscribe({
next: (doc) => {
+ if (this.previewDocId !== documentId) return
this.previewPageCount = doc?.page_count ?? null
if (doc && !this.previewDocModel) this.previewDocModel = doc
this.changeDetector.markForCheck()
},
error: () => {
+ if (this.previewDocId !== documentId) return
this.previewPageCount = null
+ this.pageCountForDoc = null
+ this.previewStatus = 'error'
+ this.previewError = $localize`Could not load the selected document.`
this.changeDetector.markForCheck()
},
})
@@ -354,13 +427,12 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
this.previewDocId,
this.previewPage
)
- this.imageLoaded = false
}
goToPage(page: number) {
if (!Number.isFinite(page)) return
const max = this.previewPageCount ? this.previewPageCount - 1 : page
- const clamped = Math.max(0, Math.min(page, max))
+ const clamped = Math.max(0, Math.min(Math.trunc(page), max))
if (clamped === this.previewPage) return
this.previewPage = clamped
this.loadPreview()
@@ -395,35 +467,74 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
}
onImageLoad() {
- this.imageLoaded = true
+ if (this.previewStatus !== 'loading') return
+ this.previewStatus = 'ready'
const img = this.imageRef.nativeElement
this.template.source_width = img.naturalWidth
this.template.source_height = img.naturalHeight
}
- onOverlayMouseDown(event: MouseEvent) {
+ onImageError() {
+ this.stopOverlayInteraction()
+ this.previewStatus = 'error'
+ this.previewError = $localize`Could not load this page.`
+ }
+
+ setOverlayMode(mode: OverlayMode) {
+ this.stopOverlayInteraction()
+ this.overlayMode = mode
+ this.overlayCursor = mode === 'draw' ? 'crosshair' : 'default'
+ }
+
+ @HostListener('document:keydown.escape')
+ cancelDrawing() {
+ this.setOverlayMode('select')
+ }
+
+ onOverlayPointerDown(event: PointerEvent) {
+ if (event.button !== 0 || this.overlayInteraction.kind !== 'idle') return
const point = this.svgPointFromEvent(event)
- if (!point) return
+ if (!this.imageLoaded || !point) return
event.preventDefault()
+ if (this.overlayMode === 'draw') {
+ this.clearZoneTest()
+ this.overlayInteraction = {
+ kind: 'drawing',
+ pointerId: event.pointerId,
+ rect: {
+ startX: point.x,
+ startY: point.y,
+ endX: point.x,
+ endY: point.y,
+ },
+ }
+ this.selectedZoneIndex = null
+ this.overlayRef.nativeElement.setPointerCapture(event.pointerId)
+ return
+ }
+
if (this.selectedZoneIndex !== null) {
const handle = this.findHandleAt(point, this.selectedZoneIndex)
if (handle) {
this.overlayInteraction = {
kind: 'resizing',
+ pointerId: event.pointerId,
zoneIndex: this.selectedZoneIndex,
handle,
}
+ this.overlayRef.nativeElement.setPointerCapture(event.pointerId)
return
}
}
const clickedIdx = this.findZoneAt(point)
- if (clickedIdx !== null && !event.shiftKey) {
+ if (clickedIdx !== null) {
this.selectZone(clickedIdx)
const zone = this.template.zones[clickedIdx]
this.overlayInteraction = {
kind: 'moving',
+ pointerId: event.pointerId,
zoneIndex: clickedIdx,
start: {
mouseX: point.x,
@@ -432,23 +543,20 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
zoneY: zone.y,
},
}
+ this.overlayRef.nativeElement.setPointerCapture(event.pointerId)
return
}
- // Shift+click or click on empty area starts a new zone.
- this.overlayInteraction = {
- kind: 'drawing',
- rect: {
- startX: point.x,
- startY: point.y,
- endX: point.x,
- endY: point.y,
- },
- }
+ this.clearZoneTest()
this.selectedZoneIndex = null
}
- onOverlayMouseMove(event: MouseEvent) {
+ onOverlayPointerMove(event: PointerEvent) {
+ if (
+ this.overlayInteraction.kind !== 'idle' &&
+ this.overlayInteraction.pointerId !== event.pointerId
+ )
+ return
const point = this.svgPointFromEvent(event)
if (!point) return
@@ -482,6 +590,10 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
}
private updateOverlayCursor(point: Point) {
+ if (this.overlayMode === 'draw') {
+ this.overlayCursor = 'crosshair'
+ return
+ }
if (this.selectedZoneIndex !== null) {
const handle = this.findHandleAt(point, this.selectedZoneIndex)
if (handle) {
@@ -489,30 +601,26 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
return
}
}
- this.overlayCursor = this.findZoneAt(point) !== null ? 'move' : 'crosshair'
+ this.overlayCursor = this.findZoneAt(point) !== null ? 'move' : 'default'
}
- onOverlayMouseUp(_event: MouseEvent) {
- if (
- this.overlayInteraction.kind === 'moving' ||
- this.overlayInteraction.kind === 'resizing'
- ) {
- this.stopOverlayInteraction()
- return
- }
-
- if (this.overlayInteraction.kind !== 'drawing') return
- const drawingRect = this.overlayInteraction.rect
+ onOverlayPointerUp(event: PointerEvent) {
+ if (this.overlayInteraction.kind === 'idle') return
+ if (this.overlayInteraction.pointerId !== event.pointerId) return
+ this.onOverlayPointerMove(event)
+ const interaction = this.overlayInteraction
this.stopOverlayInteraction()
+ if (interaction.kind !== 'drawing') return
- const rect = this.sourceRectFromDrawing(drawingRect)
+ const rect = this.sourceRectFromDrawing(interaction.rect)
// Ignore tiny accidental clicks.
- if (rect.w < MIN_DRAWN_ZONE_SIZE || rect.h < MIN_DRAWN_ZONE_SIZE) {
+ if (rect.w < MIN_ZONE_SIZE || rect.h < MIN_ZONE_SIZE) {
return
}
this.template.zones.push(this.createZoneFromRect(rect))
+ this.setOverlayMode('select')
this.selectZone(this.template.zones.length - 1)
}
@@ -541,15 +649,23 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
return this.customFields[0]?.id ?? null
}
- @HostListener('document:mouseup')
- onDocumentMouseUp() {
+ onOverlayPointerCancel(event: PointerEvent) {
if (this.overlayInteraction.kind === 'idle') return
+ if (this.overlayInteraction.pointerId !== event.pointerId) return
this.stopOverlayInteraction()
}
private stopOverlayInteraction() {
+ const interaction = this.overlayInteraction
this.overlayInteraction = NO_OVERLAY_INTERACTION
- this.overlayCursor = 'crosshair'
+ this.overlayCursor = this.overlayMode === 'draw' ? 'crosshair' : 'default'
+ const overlay = this.overlayRef?.nativeElement
+ if (
+ interaction.kind !== 'idle' &&
+ overlay?.hasPointerCapture(interaction.pointerId)
+ ) {
+ overlay.releasePointerCapture(interaction.pointerId)
+ }
}
drawingRect(): DisplayRect | null {
@@ -646,9 +762,7 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
}
overlayUnitSize(screenPixels: number): number {
- const img = this.imageRef?.nativeElement
- if (!img?.naturalWidth || !img.clientWidth) return screenPixels
- return (screenPixels * img.naturalWidth) / img.clientWidth
+ return screenPixels * this.overlayScale()
}
private svgPointFromEvent(event: MouseEvent): Point | null {
@@ -661,7 +775,11 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
point.y = event.clientY
const svgPoint = point.matrixTransform(matrix.inverse())
- return { x: svgPoint.x, y: svgPoint.y }
+ const size = this.imageNaturalSize()
+ return {
+ x: Math.max(0, Math.min(svgPoint.x, size.width)),
+ y: Math.max(0, Math.min(svgPoint.y, size.height)),
+ }
}
private displayRectFromDrawing(rect: DrawingRect): DisplayRect {
@@ -689,6 +807,8 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
}
removeZone(index: number) {
+ this.stopOverlayInteraction()
+ this.clearZoneTest()
this.template.zones.splice(index, 1)
if (this.selectedZoneIndex === index) {
this.selectedZoneIndex = null
@@ -700,7 +820,7 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
selectZone(index: number) {
this.selectedZoneIndex = index
this.activeTab = 'zone'
- this.zoneTestResult = null
+ this.clearZoneTest()
const zone = this.template.zones[index]
if (zone) {
this.seedCombineDefault(zone)
@@ -711,27 +831,51 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
testZone() {
const zone = this.selectedZone
if (!zone || !this.previewDocId) return
- this.zoneTesting = true
- this.zoneTestResult = null
+ this.clearZoneTest()
+ const test: ZoneTest = {
+ zone,
+ documentId: this.previewDocId,
+ request: this.zoneTestRequest(zone),
+ result: null,
+ }
+ this.zoneTest = test
this.templateService
- .testZone(this.previewDocId, this.zoneTestRequest(zone))
- .pipe(takeUntil(this.destroy$))
+ .testZone(test.documentId, test.request)
+ .pipe(takeUntil(this.destroy$), takeUntil(this.cancelZoneTest$))
.subscribe({
next: (res) => {
- this.zoneTestResult = res
- this.zoneTesting = false
+ test.result = res
this.changeDetector.markForCheck()
},
error: (err) => {
- this.zoneTestResult = {
+ test.result = {
error: err.error?.error || $localize`Test failed`,
}
- this.zoneTesting = false
this.changeDetector.markForCheck()
},
})
}
+ private clearZoneTest() {
+ this.cancelZoneTest$.next()
+ this.zoneTest = null
+ }
+
+ private isCurrentZoneTest(): boolean {
+ const test = this.zoneTest
+ if (
+ !test ||
+ test.zone !== this.selectedZone ||
+ test.documentId !== this.previewDocId
+ ) {
+ return false
+ }
+ const request = this.zoneTestRequest(test.zone)
+ return (Object.keys(request) as (keyof ZoneTestRequest)[]).every(
+ (key) => request[key] === test.request[key]
+ )
+ }
+
private zoneTestRequest(zone: OcrTemplateZone): ZoneTestRequest {
return {
name: zone.name,
@@ -975,6 +1119,9 @@ export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
+ this.previewResizeObserver?.disconnect()
+ this.clearZoneTest()
+ this.cancelZoneTest$.complete()
this.destroy$.next()
this.destroy$.complete()
}
diff --git a/src-ui/src/main.ts b/src-ui/src/main.ts
index 5d42abe0d..190095b81 100644
--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -80,6 +80,7 @@ import {
clockHistory,
cpu,
creditCard,
+ cursor,
dash,
dashCircle,
diagram3,
@@ -338,6 +339,7 @@ const icons = {
cpu,
cash,
creditCard,
+ cursor,
dash,
dashCircle,
diagram3,
-
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
index 799fe67bd..527a94bd3 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
@@ -4,25 +4,33 @@
.zone-preview-scroll {
max-height: 78vh;
- overflow: auto;
}
-.zone-preview-stage {
- display: inline-block;
- position: relative;
+.preview-search-status {
+ min-height: 1.5rem;
}
-.zone-preview-image {
- display: block;
- width: 100%;
+.preview-page-input {
+ width: 3.5rem;
+}
+
+.preview-zoom {
+ min-width: 4rem;
+}
+
+// The typeahead popup is appended to body.
+::ng-deep .ocr-template-document-results {
+ max-height: min(24rem, 60vh);
}
.zone-overlay {
- height: 100%;
- inset: 0;
- position: absolute;
+ touch-action: pan-x pan-y;
+}
+
+.zone-overlay-drawing,
+.zone-rect,
+.zone-resize-handle {
touch-action: none;
- width: 100%;
}
.zone-rect,
@@ -40,9 +48,7 @@
.zone-label {
font-family: var(--bs-font-sans-serif);
- font-weight: 600;
paint-order: stroke;
- pointer-events: none;
stroke: #fff;
stroke-linejoin: round;
stroke-width: 4px;
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.spec.ts b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.spec.ts
new file mode 100644
index 000000000..dc9018c4b
--- /dev/null
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.spec.ts
@@ -0,0 +1,261 @@
+import { ElementRef } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ActivatedRoute } from '@angular/router'
+import { of, Subject, throwError } from 'rxjs'
+import { Document } from 'src/app/data/document'
+import { OcrTemplateZone, OcrZoneTestResult } from 'src/app/data/ocr-template'
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { OcrTemplateEditorComponent } from './ocr-template-editor.component'
+
+function zone(): OcrTemplateZone {
+ return {
+ name: 'Invoice number',
+ custom_field: 1,
+ x: 100,
+ y: 100,
+ width: 200,
+ height: 100,
+ page: 1,
+ ocr_language: 'eng',
+ transform: 'strip',
+ validation_regex: '',
+ order: 0,
+ }
+}
+
+describe('OcrTemplateEditorComponent', () => {
+ let fixture: ComponentFixture
- ![]()
- @if (imageLoaded) {
-