maddy/OCR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed multiple page issue

Browse Source
This commit is contained in:
Narayanan Madaswamy
2026-07-12 21:28:50 +05:30
parent ec16c50e17
commit 6fd90ef7d4
3 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/app/templates/templates.component.html
View File

@@ -13,29 +13,34 @@
</div>
</div>
<div class="preview-area"
id="document-layout-list"
cdkDropList
[cdkDropListData]="layoutNodes"
[cdkDropListConnectedTo]="getConnectedDropLists()"
(cdkDropListDropped)="drop($event)">
<div class="preview-area p-4" style="overflow-y: auto;">
<div *ngIf="layoutNodes.length === 0" class="empty-state">
<i class="pi pi-file-pdf text-4xl mb-3"></i>
<p>Upload a document to view its extracted layout structure.</p>
</div>
<div class="document-canvas" [style.aspect-ratio]="pageWidth + ' / ' + pageHeight">
<div *ngFor="let node of layoutNodes"
cdkDrag
class="layout-node"
[ngClass]="node.block_type.toLowerCase()"
[style.left.%]="(node.x_coordinate / node.page_width) * 100"
[style.top.%]="(node.y_coordinate / node.page_height) * 100"
[style.width.%]="(node.width / node.page_width) * 100"
[style.height.%]="(node.height / node.page_height) * 100">
<div class="node-type" *ngIf="node.height > 20">{{ node.block_type }}</div>
<div class="node-text">{{ node.text_value }}</div>
<div *ngFor="let page of pages; let i = index" class="document-page-container mb-5">
<div class="page-header text-sm font-semibold text-gray-500 mb-2">Page {{ page.page_number }}</div>
<div class="document-canvas"
[id]="'document-layout-list-' + i"
cdkDropList
[cdkDropListData]="page.nodes"
[cdkDropListConnectedTo]="getConnectedDropLists()"
(cdkDropListDropped)="drop($event)"
[style.aspect-ratio]="page.width + ' / ' + page.height">
<div *ngFor="let node of page.nodes"
cdkDrag
class="layout-node"
[ngClass]="node.block_type.toLowerCase()"
[style.left.%]="(node.x_coordinate / node.page_width) * 100"
[style.top.%]="(node.y_coordinate / node.page_height) * 100"
[style.width.%]="(node.width / node.page_width) * 100"
[style.height.%]="(node.height / node.page_height) * 100">
<div class="node-type" *ngIf="node.height > 20">{{ node.block_type }}</div>
<div class="node-text">{{ node.text_value }}</div>
</div>
</div>
</div>
</div>
@@ -73,7 +78,7 @@
[id]="'field-' + field.pk_template_field_id"
cdkDropList
[cdkDropListData]="mappings[field.pk_template_field_id]"
[cdkDropListConnectedTo]="['document-layout-list']"
[cdkDropListConnectedTo]="getCanvasDropLists()"
(cdkDropListDropped)="drop($event, field.pk_template_field_id)">
<div class="placeholder" *ngIf="mappings[field.pk_template_field_id].length === 0">