Layout blocks segmented document
retab-ui/layout-blocks-segmented-documentFreeComponent
Projection helpers that convert OCR/layout blocks into segmented-document segments and anchors.
Install it
npx shadcn@latest add https://ui.retab.com/r/layout-blocks-segmented-document.jsonSource
1import { buildColorMap, segmentDisplayLabel } from "@/lib/segments";23import { getScrollTarget } from "./layout-blocks-geometry";4import type { LayoutDocument, LayoutItem } from "./layout-blocks-types";5import {6 createSegmentedDocumentModel,7 type DocumentSegment,8 type SegmentAnchor,9 type SegmentedDocumentModel,10} from "./segmented-document-model";1112export function createOcrSegmentedDocumentModel({13 document,14 items,15}: {16 document: LayoutDocument;17 items: readonly LayoutItem[];18}): SegmentedDocumentModel {19 const colors = buildColorMap(items.map(layoutItemSegmentLabel));20 const pageByNumber = new Map(21 document.pages.map((page) => [page.pageNumber, page]),22 );23 const segments: DocumentSegment[] = [];24 const anchors: SegmentAnchor[] = [];2526 items.forEach((item, index) => {27 const label = layoutItemSegmentLabel(item);28 const segment: DocumentSegment = {29 id: layoutItemSegmentId(item),30 label,31 pages: [],32 color:33 colors.get(label) ??34 colors.get(segmentDisplayLabel(label)) ??35 "var(--color-muted-foreground)",36 confidence: item.confidence ?? null,37 index,38 sourceId: item.id,39 };40 const page = pageByNumber.get(item.pageNumber);41 if (page) {42 const target = getScrollTarget(item, page);43 segment.pages = [target.pageNumber];44 anchors.push({45 id: `${segment.id}:anchor`,46 segmentId: segment.id,47 pageNumber: target.pageNumber,48 bounds: {49 x: target.left / 100,50 y: target.top / 100,51 width: target.width / 100,52 height: target.height / 100,53 },54 });55 }56 segments.push(segment);57 });5859 return createSegmentedDocumentModel({60 anchors,61 pages: document.pages.map((page) => ({62 pageNumber: page.pageNumber,63 width: page.width,64 height: page.height,65 })),66 segments,67 });68}6970function layoutItemSegmentLabel(item: LayoutItem): string {71 return segmentDisplayLabel(item.text || item.kind || item.level);72}7374function layoutItemSegmentId(item: LayoutItem): string {75 return `layout:${item.id}`;76}
What it pulls in
Other registry items
Files it writes
More from retab-ui
All 130 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Alertalert | retab-ui | Components | Free | 1 dep | |
| Alert Dialogalert-dialog | retab-ui | Components | Free | 1 dep | |
| Aspect Ratioaspect-ratio | retab-ui | Components | Free | no deps | |
| Attachment Sidebarattachment-sidebar | retab-ui | Components | Free | 1 dep | |
| Autocompleteautocomplete | retab-ui | Components | Free | 2 deps | |
| Calendarcalendar | retab-ui | Components | Free | 2 deps | |
| Code Viewercode-viewer | retab-ui | Components | Free | 2 deps · 32 files | |
| Commandcommand | retab-ui | Components | Free | 2 deps |
