@servicetitan/dte-pdf-editor 1.77.0 → 1.78.0

package/src/hooks/useFieldResize.ts

@@ -10,6 +10,7 @@ interface UseFieldResizeOptions {
         newHeight: number,
         pageNumber: number,
     ) => void;
+    zoom?: number;
 }
 
 export interface UseFieldResizeReturn {
@@ -24,6 +25,7 @@ export interface UseFieldResizeReturn {
 export const useFieldResize = ({
     onFieldResize,
     pdfWrapperRef,
+    zoom = 1,
 }: UseFieldResizeOptions): UseFieldResizeReturn => {
     const resizeStartDataRef = useRef<{
         field: PdfField;
@@ -34,12 +36,17 @@ export const useFieldResize = ({
         page: number;
     } | null>(null);
     const onFieldResizeRef = useRef(onFieldResize);
+    const zoomRef = useRef(zoom);
     const [isResizing, setIsResizing] = useState(false);
 
     useEffect(() => {
         onFieldResizeRef.current = onFieldResize;
     }, [onFieldResize]);
 
+    useEffect(() => {
+        zoomRef.current = zoom;
+    }, [zoom]);
+
     useEffect(() => {
         if (!isResizing) {
             return;
@@ -54,7 +61,14 @@ export const useFieldResize = ({
             }
 
             const { field, ...resizeStartData } = resizeStartDataRef.current;
-            handleFieldResize(e, field, resizeStartData, pdfWrapperRef, onFieldResizeRef.current);
+            handleFieldResize(
+                e,
+                field,
+                resizeStartData,
+                pdfWrapperRef,
+                onFieldResizeRef.current,
+                zoomRef.current,
+            );
         };
 
         const handleMouseUp = () => {
@@ -78,7 +92,7 @@ export const useFieldResize = ({
         e.stopPropagation();
         e.preventDefault();
 
-        const resizeStartData = handleFieldResizeStart(e, field, pdfWrapperRef);
+        const resizeStartData = handleFieldResizeStart(e, field, pdfWrapperRef, zoom);
         if (resizeStartData) {
             resizeStartDataRef.current = {
                 field,

package/src/hooks/useZoom.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+import { ZOOM_DEFAULT, ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from '../constants';
+
+export interface UseZoomReturn {
+    zoom: number;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetZoom(): void;
+}
+
+const clampZoom = (value: number) =>
+    Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 100) / 100));
+
+/**
+ * Manages a page zoom factor (1 = 100%), clamped to [ZOOM_MIN, ZOOM_MAX] in ZOOM_STEP increments.
+ */
+export const useZoom = (initialZoom: number = ZOOM_DEFAULT): UseZoomReturn => {
+    const [zoom, setZoom] = useState<number>(initialZoom);
+
+    const zoomIn = useCallback(() => setZoom(prev => clampZoom(prev + ZOOM_STEP)), []);
+    const zoomOut = useCallback(() => setZoom(prev => clampZoom(prev - ZOOM_STEP)), []);
+    const resetZoom = useCallback(() => setZoom(ZOOM_DEFAULT), []);
+
+    return { zoom, zoomIn, zoomOut, resetZoom };
+};

package/src/styles/pdf-canvas.css

@@ -1,11 +1,30 @@
-.dte-pdf-canvas-container {
-    overflow: auto;
-    position: relative;
-}
-
 .dte-pdf-wrapper {
     position: relative;
     width: 100%;
     margin-inline-start: auto;
     margin-inline-end: auto;
 }
+
+.dte-pdf-canvas-controls {
+    z-index: 1;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: var(--bg-color-main, #fafafa);
+    box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
+    padding: var(--spacing-half) var(--spacing-1);
+}
+
+.dte-pdf-zoom-controls-value {
+    min-width: 44px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.dte-pdf-zoom-controls,
+.dte-pdf-field-navigation-controls {
+    border-radius: var(--radius-1, 4px);
+    padding: var(--spacing-half);
+    background-color: var(--bg-color-secondary, #eeeeee);
+}

package/src/styles/pdf-editor.css

@@ -11,5 +11,6 @@
 
 .dte-pdf-editor-content-container {
     max-width: 100%;
+    min-width: 0;
     overflow: auto;
 }

package/src/styles/pdf-field-overlay.css

@@ -101,6 +101,15 @@
     line-height: 1;
 }
 
+.dte-pdf-field-content input[type='checkbox']:focus,
+.dte-pdf-field-content input[type='checkbox']:active,
+.dte-pdf-field-content input[type='radio']:active,
+.dte-pdf-field-content input[type='radio']:focus {
+    box-shadow:
+        0 0 0 2px var(--border-color-active, #2270ee) inset,
+        0 0 0 3px var(--color-neutral-0, #ffffff) inset;
+}
+
 /*
  * Printed PDF text modes (no ellipsis — hard clip like PdfSharp).
  */
@@ -169,6 +178,11 @@
     resize: none;
 }
 
+.dte-pdf-field-fillable:focus {
+    outline: 2px solid var(--border-color-active, #2270ee);
+    outline-offset: 2px;
+}
+
 .dte-pdf-field-generic-table {
     padding: var(--spacing-0, 0);
     margin: var(--spacing-0, 0);

package/src/styles/variables.css

@@ -1,6 +1,6 @@
 @import '@servicetitan/tokens/dist/tokens.css';
 
-.dte-pdf-editor {
+.dte-pdf-editor-theme {
     --menu-active-color: var(--color-blue-400, #2270ee);
     --menu-active-bg-light-color: var(--color-blue-100, #e0f2ff);
     --menu-hover-color: var(--color-neutral-100, #606162);
@@ -16,14 +16,23 @@
     --spacing-2: 16px;
     --spacing-3: 24px;
 
+    /* Radius */
+    --radius-0: 0;
+    --radius-1: 4px;
+    --radius-2: 8px;
+
     /* Colors - Neutral */
     --color-neutral-0: var(--color-neutral-0, #ffffff);
+    --color-neutral-30: var(--color-neutral-30, #f7f7f7);
+    --color-neutral-50: var(--color-neutral-50, #eeeeee);
     --color-neutral-70: var(--color-neutral-70, #737475);
     --color-neutral-200: var(--color-neutral-200, #6c6d70);
     --color-neutral-300: var(--color-neutral-300, #2d2e31);
 
     /* Background colors */
     --bg-color-light: var(--color-neutral-0, #ffffff);
+    --bg-color-main: var(--color-neutral-20, #fafafa);
+    --bg-color-secondary: var(--color-neutral-50, #eeeeee);
     --bg-color: var(--color-neutral-200, #f5f5f5);
     --bg-color-hover: #eaeaea;
 

package/src/utils/field/__tests__/field-reading-order.utils.test.ts

@@ -0,0 +1,62 @@
+import { sortFieldsByReadingOrder } from '../field-reading-order.utils';
+
+interface TestField {
+    id: string;
+    page: number;
+    x: number;
+    y: number;
+    height: number;
+}
+
+const field = (id: string, page: number, x: number, y: number, height = 20): TestField => ({
+    id,
+    page,
+    x,
+    y,
+    height,
+});
+
+describe('sortFieldsByReadingOrder', () => {
+    const ids = (fields: TestField[]) => fields.map(f => f.id);
+
+    test('orders fields left-to-right within the same row', () => {
+        const fields = [field('right', 1, 300, 100), field('left', 1, 50, 100)];
+
+        expect(ids(sortFieldsByReadingOrder(fields))).toEqual(['left', 'right']);
+    });
+
+    test('orders fields top-to-bottom across rows', () => {
+        const fields = [field('bottom', 1, 50, 300), field('top', 1, 50, 50)];
+
+        expect(ids(sortFieldsByReadingOrder(fields))).toEqual(['top', 'bottom']);
+    });
+
+    test('keeps a field left-of-and-below another on the same row grouped correctly', () => {
+        // "left" starts slightly lower than "right" but they visually sit on the same row.
+        const fields = [field('right', 1, 500, 100), field('left', 1, 50, 105)];
+
+        expect(ids(sortFieldsByReadingOrder(fields))).toEqual(['left', 'right']);
+    });
+
+    test('does not merge a lower row into a taller row above it', () => {
+        const tall = field('tall', 1, 50, 50, 200);
+        const nextRow = field('next-row', 1, 500, 260);
+
+        expect(ids(sortFieldsByReadingOrder([nextRow, tall]))).toEqual(['tall', 'next-row']);
+    });
+
+    test('orders by page before position', () => {
+        const fields = [field('page2', 2, 0, 0), field('page1', 1, 500, 500)];
+
+        expect(ids(sortFieldsByReadingOrder(fields))).toEqual(['page1', 'page2']);
+    });
+
+    test('does not mutate the input array', () => {
+        const fields = [field('b', 1, 300, 100), field('a', 1, 50, 100)];
+        const copy = [...fields];
+
+        sortFieldsByReadingOrder(fields);
+
+        expect(fields).toEqual(copy);
+    });
+});

package/src/utils/field/field-drag.utils.ts

@@ -14,24 +14,28 @@ interface DragOffset {
  * @param e - The drag event
  * @param field - The field being dragged
  * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @param zoom - The current zoom level of the PDF
  * @returns The drag offset object or null if wrapper is not available
  */
 export const handleFieldDragStart = (
     e: DragEvent<HTMLDivElement>,
     field: PdfField,
     pdfWrapperRef: RefObject<HTMLDivElement>,
+    zoom = 1,
 ): DragOffset | null => {
     if (!pdfWrapperRef.current) {
         return null;
     }
 
     /*
-     * Calculate drag offset in page-relative coordinates
+     * Calculate drag offset in page-relative coordinates.
+     * DOM measurements reflect the current zoom, so divide by zoom to bring
+     * them into the same unzoomed reference space as the stored field.x/y.
      */
     const startPagePos = getPagePosition(field.page, pdfWrapperRef);
     const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
-    const cursorXInPage = e.clientX - wrapperRect.left - startPagePos.left;
-    const cursorYInPage = e.clientY - wrapperRect.top - startPagePos.top;
+    const cursorXInPage = (e.clientX - wrapperRect.left - startPagePos.left) / zoom;
+    const cursorYInPage = (e.clientY - wrapperRect.top - startPagePos.top) / zoom;
 
     const dragOffset: DragOffset = {
         x: cursorXInPage - field.x,
@@ -65,6 +69,7 @@ export const handleFieldDragStart = (
  * @param dragOffset - The drag offset from drag start
  * @param pdfWrapperRef - Reference to the PDF wrapper element
  * @param onFieldMove - Callback to update field position
+ * @param zoom - The current zoom level of the PDF
  */
 export const handleFieldDrag = (
     e: DragEvent<HTMLDivElement>,
@@ -72,6 +77,7 @@ export const handleFieldDrag = (
     dragOffset: DragOffset,
     pdfWrapperRef: RefObject<HTMLDivElement>,
     onFieldMove: (fieldId: string, newX: number, newY: number, pageNumber: number) => void,
+    zoom = 1,
 ): void => {
     if (!pdfWrapperRef.current || e.clientX === 0 || e.clientY === 0) {
         return;
@@ -82,9 +88,9 @@ export const handleFieldDrag = (
     const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
     const pageDimensions = getPageDimensions(currentPage, pdfWrapperRef);
 
-    // Calculate position in page coordinates
-    const x = e.clientX - wrapperRect.left - currentPagePos.left - dragOffset.x;
-    const y = e.clientY - wrapperRect.top - currentPagePos.top - dragOffset.y;
+    // Calculate position in page (unzoomed reference) coordinates
+    const x = (e.clientX - wrapperRect.left - currentPagePos.left) / zoom - dragOffset.x;
+    const y = (e.clientY - wrapperRect.top - currentPagePos.top) / zoom - dragOffset.y;
 
     /*
      * Clamp x and y to stay within page boundaries.
@@ -92,8 +98,8 @@ export const handleFieldDrag = (
      */
     const minX = 0;
     const minY = 0;
-    const maxX = Math.max(0, pageDimensions.width - field.width);
-    const maxY = Math.max(0, pageDimensions.height - field.height);
+    const maxX = Math.max(0, pageDimensions.width / zoom - field.width);
+    const maxY = Math.max(0, pageDimensions.height / zoom - field.height);
 
     const clampedX = Math.max(minX, Math.min(maxX, x));
     const clampedY = Math.max(minY, Math.min(maxY, y));

package/src/utils/field/field-reading-order.utils.ts

@@ -0,0 +1,43 @@
+interface ReadingOrderField {
+    page: number;
+    x: number;
+    y: number;
+    height: number;
+}
+
+/**
+ * Orders fields the way a person visually scans a page: top row first,
+ * left-to-right within a row, then down to the next row - rather than a
+ * strict y-then-x sort, which misorders fields that sit on the same visual
+ * row but don't share an exact y coordinate.
+ */
+export const sortFieldsByReadingOrder = <T extends ReadingOrderField>(fields: T[]): T[] => {
+    const byPosition = [...fields].sort((a, b) => a.page - b.page || a.y - b.y || a.x - b.x);
+
+    const rows: T[][] = [];
+    let currentRow: T[] = [];
+    let currentPage = NaN;
+    let rowBottom = -Infinity;
+
+    for (const field of byPosition) {
+        const startsNewRow = field.page !== currentPage || field.y >= rowBottom;
+
+        if (startsNewRow) {
+            if (currentRow.length) {
+                rows.push(currentRow);
+            }
+            currentRow = [field];
+            currentPage = field.page;
+            rowBottom = field.y + field.height;
+        } else {
+            currentRow.push(field);
+            rowBottom = Math.max(rowBottom, field.y + field.height);
+        }
+    }
+
+    if (currentRow.length) {
+        rows.push(currentRow);
+    }
+
+    return rows.flatMap(row => row.sort((a, b) => a.x - b.x));
+};

package/src/utils/field/field-resize.utils.ts

@@ -16,12 +16,14 @@ interface ResizeStartData {
  * @param e - Mouse event
  * @param field - The field being resized
  * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @param zoom - The current zoom level of the PDF
  * @returns Resize start data or null if calculation fails
  */
 export const handleFieldResizeStart = (
     e: { clientX: number; clientY: number },
     field: PdfField,
     pdfWrapperRef: RefObject<HTMLDivElement>,
+    zoom = 1,
 ): ResizeStartData | null => {
     if (!pdfWrapperRef.current) {
         return null;
@@ -30,9 +32,9 @@ export const handleFieldResizeStart = (
     const pagePos = getPagePosition(field.page, pdfWrapperRef);
     const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
 
-    // Calculate mouse position relative to the page
-    const startX = e.clientX - wrapperRect.left - pagePos.left;
-    const startY = e.clientY - wrapperRect.top - pagePos.top;
+    // Calculate mouse position relative to the page, in unzoomed reference coordinates
+    const startX = (e.clientX - wrapperRect.left - pagePos.left) / zoom;
+    const startY = (e.clientY - wrapperRect.top - pagePos.top) / zoom;
 
     return {
         startX,
@@ -51,6 +53,7 @@ export const handleFieldResizeStart = (
  * @param resizeStartData - Data from resize start
  * @param pdfWrapperRef - Reference to the PDF wrapper element
  * @param onFieldResize - Callback to update field dimensions
+ * @param zoom - The current zoom level of the PDF
  */
 export const handleFieldResize = (
     e: { clientX: number; clientY: number },
@@ -63,6 +66,7 @@ export const handleFieldResize = (
         newHeight: number,
         pageNumber: number,
     ) => void,
+    zoom = 1,
 ): void => {
     if (!pdfWrapperRef.current) {
         return;
@@ -72,9 +76,9 @@ export const handleFieldResize = (
     const pagePos = getPagePosition(resizeStartData.page, pdfWrapperRef);
     const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
 
-    // Calculate mouse position relative to the page
-    const mouseX = e.clientX - wrapperRect.left - pagePos.left;
-    const mouseY = e.clientY - wrapperRect.top - pagePos.top;
+    // Calculate mouse position relative to the page, in unzoomed reference coordinates
+    const mouseX = (e.clientX - wrapperRect.left - pagePos.left) / zoom;
+    const mouseY = (e.clientY - wrapperRect.top - pagePos.top) / zoom;
 
     // Calculate delta from the start position
     const deltaX = mouseX - resizeStartData.startX;
@@ -103,8 +107,8 @@ export const handleFieldResize = (
     newHeight = Math.max(FIELD_CONSTANTS.minHeight, newHeight);
 
     // Clamp to page boundaries (ensure the field doesn't go outside the page)
-    const maxWidth = pageDimensions.width - field.x;
-    const maxHeight = pageDimensions.height - field.y;
+    const maxWidth = pageDimensions.width / zoom - field.x;
+    const maxHeight = pageDimensions.height / zoom - field.y;
     newWidth = Math.min(newWidth, maxWidth);
     newHeight = Math.min(newHeight, maxHeight);
 

package/src/utils/field/get-field-bounds-style.utils.ts

@@ -6,6 +6,13 @@ interface FieldBoundsStyleOptions {
     pageOffset?: { left: number; top: number };
     backgroundColor?: string;
     borderColor?: string;
+    /**
+     * Current page zoom factor (1 = 100%). Field `x/y/width/height` are stored
+     * relative to the unzoomed reference page width, so they must be scaled by
+     * zoom for display while `pageOffset` (read live from the DOM) already
+     * reflects the zoomed page.
+     */
+    zoom?: number;
 }
 
 const getFieldTypeSpecificStyle = (field: PdfField): CSSProperties => {
@@ -39,14 +46,19 @@ export const getFieldBoundsStyle = (
     field: PdfField,
     options?: FieldBoundsStyleOptions,
 ): CSSProperties => {
-    const { backgroundColor, borderColor, pageOffset = { left: 0, top: 0 } } = options ?? {};
+    const {
+        backgroundColor,
+        borderColor,
+        pageOffset = { left: 0, top: 0 },
+        zoom = 1,
+    } = options ?? {};
 
     return {
         position: 'absolute',
-        left: pageOffset.left + field.x,
-        top: pageOffset.top + field.y,
-        width: field.width,
-        height: field.height,
+        left: pageOffset.left + field.x * zoom,
+        top: pageOffset.top + field.y * zoom,
+        width: field.width * zoom,
+        height: field.height * zoom,
         display: 'flex',
         alignItems: 'flex-start',
         justifyContent: 'flex-start',

package/src/utils/field/index.ts

@@ -3,6 +3,7 @@ export * from './field-background-color.utils';
 export * from './field-coordinates.utils';
 export * from './field-drag.utils';
 export * from './field-placeholder-text.utils';
+export * from './field-reading-order.utils';
 export * from './field-resize.utils';
 export * from './get-field-bounds-style.utils';
 export * from './get-field-font-size.utils';