@servicetitan/dte-pdf-editor 1.77.0 → 1.79.0

package/src/components/pdf-canvas/canvas-controls.tsx

@@ -0,0 +1,183 @@
+import { Button, Divider, Flex, Icon, Text } from '@servicetitan/anvil2';
+import IconNavigateDown from '@servicetitan/anvil2/assets/icons/material/round/arrow_downward.svg';
+import IconNavigateUp from '@servicetitan/anvil2/assets/icons/material/round/arrow_upward.svg';
+import IconNavigateBefore from '@servicetitan/anvil2/assets/icons/material/round/navigate_before.svg';
+import IconNavigateNext from '@servicetitan/anvil2/assets/icons/material/round/navigate_next.svg';
+import IconZoomIn from '@servicetitan/anvil2/assets/icons/material/round/zoom_in.svg';
+import IconZoomOut from '@servicetitan/anvil2/assets/icons/material/round/zoom_out.svg';
+import { FC } from 'react';
+import { ZOOM_MAX, ZOOM_MIN } from '../../constants';
+
+interface ZoomControlsProps {
+    zoom: number;
+    onZoomIn(): void;
+    onZoomOut(): void;
+    onResetZoom(): void;
+}
+
+const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut, zoom }) => {
+    return (
+        <Flex alignItems="center" gap={1} className="dte-pdf-zoom-controls">
+            <Button
+                size="xsmall"
+                appearance="ghost"
+                onClick={onZoomOut}
+                disabled={zoom <= ZOOM_MIN}
+                aria-label="Zoom out"
+                title="Zoom out"
+            >
+                <Icon svg={IconZoomOut} size="medium" />
+            </Button>
+
+            <Text
+                variant="body"
+                size="small"
+                className="dte-pdf-zoom-controls-value"
+                onClick={onResetZoom}
+                title="Reset zoom"
+            >
+                {Math.round(zoom * 100)}%
+            </Text>
+
+            <Button
+                size="xsmall"
+                appearance="ghost"
+                onClick={onZoomIn}
+                disabled={zoom >= ZOOM_MAX}
+                aria-label="Zoom in"
+                title="Zoom in"
+            >
+                <Icon svg={IconZoomIn} size="medium" />
+            </Button>
+        </Flex>
+    );
+};
+
+interface FieldNavigationControlsProps {
+    disabledNext: boolean;
+    disabledOnFirstField: boolean;
+    disabledOnLastField: boolean;
+    disabledPrev: boolean;
+    onNextField(): void;
+    onPrevField(): void;
+    onFirstField(): void;
+    onLastField(): void;
+}
+
+const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
+    disabledNext,
+    disabledOnFirstField,
+    disabledOnLastField,
+    disabledPrev,
+    onFirstField,
+    onLastField,
+    onNextField,
+    onPrevField,
+}) => {
+    return (
+        <Flex alignItems="center" gap="2" className="dte-pdf-field-navigation-controls">
+            <Button
+                size="xsmall"
+                appearance="ghost"
+                onClick={onPrevField}
+                disabled={disabledPrev}
+                aria-label="Go to previous field"
+                title="Go to previous field"
+            >
+                <Icon svg={IconNavigateBefore} size="medium" />
+            </Button>
+            <Button
+                size="xsmall"
+                appearance="ghost"
+                onClick={onNextField}
+                disabled={disabledNext}
+                aria-label="Go to next field"
+                title="Go to next field"
+            >
+                <Icon svg={IconNavigateNext} size="medium" />
+            </Button>
+            <Divider vertical style={{ height: '100%' }} />
+            <Button
+                size="xsmall"
+                appearance="ghost"
+                onClick={onFirstField}
+                disabled={disabledOnFirstField}
+                aria-label="Go to first field"
+                title="Go to first field"
+            >
+                <Icon svg={IconNavigateUp} size="medium" />
+            </Button>
+            <Button
+                size="xsmall"
+                appearance="ghost"
+                onClick={onLastField}
+                disabled={disabledOnLastField}
+                aria-label="Go to last field"
+                title="Go to last field"
+            >
+                <Icon svg={IconNavigateDown} size="medium" />
+            </Button>
+        </Flex>
+    );
+};
+
+export interface CanvasControlsProps extends ZoomControlsProps {
+    /** Show the zoom in/out/reset controls. */
+    zoomable?: boolean;
+    /** Show the previous/next fillable-field navigation controls. */
+    enableInputNavigation?: boolean;
+    disabledNext?: boolean;
+    disabledPrev?: boolean;
+    disabledOnFirstField?: boolean;
+    disabledOnLastField?: boolean;
+    onNextField?(): void;
+    onPrevField?(): void;
+    onFirstField?(): void;
+    onLastField?(): void;
+}
+
+export const CanvasControls: FC<CanvasControlsProps> = ({
+    disabledNext = false,
+    disabledOnFirstField = false,
+    disabledOnLastField = false,
+    disabledPrev = false,
+    enableInputNavigation = false,
+    onFirstField = () => {},
+    onLastField = () => {},
+    onNextField = () => {},
+    onPrevField = () => {},
+    onResetZoom,
+    onZoomIn,
+    onZoomOut,
+    zoom,
+    zoomable = false,
+}) => {
+    if (!zoomable && !enableInputNavigation) {
+        return null;
+    }
+
+    return (
+        <Flex justifyContent="center" gap={2} className="dte-pdf-canvas-controls">
+            {zoomable && (
+                <ZoomControls
+                    zoom={zoom}
+                    onZoomIn={onZoomIn}
+                    onZoomOut={onZoomOut}
+                    onResetZoom={onResetZoom}
+                />
+            )}
+            {enableInputNavigation && (
+                <FieldNavigationControls
+                    disabledOnFirstField={disabledOnFirstField}
+                    disabledOnLastField={disabledOnLastField}
+                    onFirstField={onFirstField}
+                    onLastField={onLastField}
+                    disabledNext={disabledNext}
+                    disabledPrev={disabledPrev}
+                    onNextField={onNextField}
+                    onPrevField={onPrevField}
+                />
+            )}
+        </Flex>
+    );
+};

package/src/components/pdf-canvas/pdf-canvas.tsx

@@ -1,12 +1,24 @@
 import { Flex } from '@servicetitan/anvil2';
-import { DragEvent, FC, MouseEvent, ReactNode, RefObject, useEffect, useState } from 'react';
+import {
+    DragEvent,
+    FC,
+    Fragment,
+    MouseEvent,
+    ReactNode,
+    RefObject,
+    useEffect,
+    useState,
+} from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
+import { useZoom } from '../../hooks';
 import { type PdfField } from '../../interface/types';
 import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
+import { CanvasControls } from './canvas-controls';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
 
 interface PdfCanvasProps {
     pdfUrl: string;
+    zoomable: boolean;
     errorPlaceholder?: ReactNode;
     loadingPlaceholder?: ReactNode;
     fields: PdfField[];
@@ -49,8 +61,10 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
+    zoomable,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
+    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -62,39 +76,56 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     }, [pdfUrl]);
 
     return (
-        <Flex
-            flex={1}
-            ref={pdfContainerRef}
-            className="dte-pdf-canvas-container"
-            onClick={onDeselectField}
-        >
-            <div ref={pdfWrapperRef} className="dte-pdf-wrapper" style={{ width: BASE_PAGE_WIDTH }}>
-                <PdfDocumentRenderer
-                    pdfUrl={pdfUrl}
-                    onDrop={onDrop}
-                    loading={loading}
-                    onDragOver={onDragOver}
-                    pageWidth={BASE_PAGE_WIDTH}
-                    errorPlaceholder={errorPlaceholder}
-                    loadingPlaceholder={loadingPlaceholder}
-                    onDocumentLoadSuccess={onDocumentLoadSuccess}
+        <Fragment>
+            {isPdfLoaded && (
+                <CanvasControls
+                    enableInputNavigation={false}
+                    zoomable={zoomable}
+                    zoom={zoom}
+                    onZoomIn={zoomIn}
+                    onZoomOut={zoomOut}
+                    onResetZoom={resetZoom}
                 />
-                {isPdfLoaded && (
-                    <PdfFieldsOverlay
-                        fields={fields}
-                        errors={errors}
-                        onFieldConfigChange={onFieldConfigChange}
-                        handleAddNewField={handleAddNewField}
-                        pdfWrapperRef={pdfWrapperRef}
-                        recipientsColors={recipientsColors}
-                        selectedField={selectedField ?? null}
-                        onFieldClick={onFieldClick}
-                        onFieldMove={onFieldMove}
-                        onFieldResize={onFieldResize}
-                        fieldWrapperClassNames={fieldWrapperClassNames}
+            )}
+            <Flex
+                flex={1}
+                ref={pdfContainerRef}
+                className="dte-pdf-canvas-container"
+                onClick={onDeselectField}
+            >
+                <div
+                    ref={pdfWrapperRef}
+                    className="dte-pdf-wrapper"
+                    style={{ width: BASE_PAGE_WIDTH * zoom }}
+                >
+                    <PdfDocumentRenderer
+                        pdfUrl={pdfUrl}
+                        onDrop={onDrop}
+                        loading={loading}
+                        onDragOver={onDragOver}
+                        pageWidth={BASE_PAGE_WIDTH * zoom}
+                        errorPlaceholder={errorPlaceholder}
+                        loadingPlaceholder={loadingPlaceholder}
+                        onDocumentLoadSuccess={onDocumentLoadSuccess}
                     />
-                )}
-            </div>
-        </Flex>
+                    {isPdfLoaded && (
+                        <PdfFieldsOverlay
+                            fields={fields}
+                            errors={errors}
+                            onFieldConfigChange={onFieldConfigChange}
+                            handleAddNewField={handleAddNewField}
+                            pdfWrapperRef={pdfWrapperRef}
+                            recipientsColors={recipientsColors}
+                            selectedField={selectedField ?? null}
+                            onFieldClick={onFieldClick}
+                            onFieldMove={onFieldMove}
+                            onFieldResize={onFieldResize}
+                            fieldWrapperClassNames={fieldWrapperClassNames}
+                            zoom={zoom}
+                        />
+                    )}
+                </div>
+            </Flex>
+        </Fragment>
     );
 };

package/src/components/pdf-editor/pdf-editor.tsx

@@ -19,6 +19,7 @@ import '../../styles/index.css';
 export interface PdfEditorProps {
     pdfUrl: string;
     loading?: boolean;
+    zoomable?: boolean;
     errors?: Record<string, string>;
     loadingPlaceholder?: ReactNode;
     errorPlaceholder?: ReactNode;
@@ -51,6 +52,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     onLoadSuccess,
     pdfUrl,
     recipients = [],
+    zoomable = true,
 }) => {
     const pdfContainerRef = useRef<HTMLDivElement>(null);
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
@@ -77,7 +79,10 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     const recipientsColors = mapColorsToRecipients(recipients);
 
     return (
-        <Flex flex={1} className={`dte-pdf-editor ${loading ? 'skeleton' : ''}`}>
+        <Flex
+            flex={1}
+            className={`dte-pdf-editor-theme dte-pdf-editor ${loading ? 'skeleton' : ''}`}
+        >
             {pdfFieldSelection.selectedField && (
                 <FieldConfigPanelOverlay
                     dataModel={dataModel}
@@ -110,8 +115,13 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                 />
             </Flex>
 
-            <Flex gap={12} flex={1} className="dte-pdf-editor-content-container skeleton-item">
+            <Flex
+                direction="column"
+                flex={1}
+                className="dte-pdf-editor-content-container skeleton-item"
+            >
                 <PdfCanvas
+                    zoomable={zoomable}
                     pdfUrl={pdfUrl}
                     fields={fields}
                     loading={loading}

package/src/components/pdf-fields-overlay/pdf-fields-overlay.tsx

@@ -9,6 +9,7 @@ interface PdfFieldsOverlayProps {
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
     fieldWrapperClassNames?: string;
+    zoom?: number;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     handleAddNewField(field: PdfField): void;
     onFieldClick(fieldId: string, e: MouseEvent): void;
@@ -28,6 +29,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
+    zoom = 1,
 }) => {
     const pathToLabel = useMemo(() => {
         const map = new Map<string, string>();
@@ -57,6 +59,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                     recipientsColors={recipientsColors}
                     isSameGroup={selectedField?.path === field.path}
                     pathToLabel={pathToLabel}
+                    zoom={zoom}
                 />
             ))}
         </div>

package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx

@@ -19,6 +19,7 @@ interface PdfOverlayFieldProps {
     pdfWrapperRef: RefObject<HTMLDivElement>;
     pathToLabel?: Map<string, string>;
     fieldWrapperClassNames?: string;
+    zoom?: number;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     handleAddNewField(field: PdfField): void;
     onFieldClick(fieldId: string, e: MouseEvent): void;
@@ -40,16 +41,19 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
     pathToLabel,
     pdfWrapperRef,
     recipientsColors,
+    zoom = 1,
 }) => {
     const { dragVisualPosition, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
         pdfWrapperRef,
         onFieldMove,
+        zoom,
     });
     const isDragging = dragVisualPosition !== null;
 
     const { handleResizeStart } = useFieldResize({
         pdfWrapperRef,
         onFieldResize,
+        zoom,
     });
 
     const page = dragVisualPosition?.page ?? field.page;
@@ -65,6 +69,7 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
         {
             pageOffset: pagePos,
             backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
+            zoom,
         },
     );
 

package/src/components/pdf-view/pdf-view-field-container.tsx

@@ -13,6 +13,7 @@ interface PdfViewFieldContainer {
     error?: string;
     field: PdfField;
     recipientsColors: Record<string, string>;
+    zoom?: number;
 }
 
 export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>> = ({
@@ -22,6 +23,7 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
     field,
     pdfWrapperRef,
     recipientsColors,
+    zoom = 1,
 }) => {
     const visible =
         !field.displayCondition || evaluateDisplayCondition(field.displayCondition, data);
@@ -35,11 +37,13 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
     return (
         <Fragment>
             <div
+                id={`dte-pdf-field-${field.id}`}
                 className="dte-pdf-field-view"
                 style={getFieldBoundsStyle(field, {
                     pageOffset: pagePos,
                     backgroundColor: bgColor,
                     borderColor: error ? 'red' : undefined,
+                    zoom,
                 })}
             >
                 {children}
@@ -48,8 +52,8 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
                 <span
                     style={{
                         color: 'red',
-                        top: pagePos.top + field.y + field.height + 8,
-                        left: pagePos.left + field.x,
+                        top: pagePos.top + (field.y + field.height) * zoom + 8,
+                        left: pagePos.left + field.x * zoom,
                         minWidth: '100px',
                         position: 'absolute',
                     }}

package/src/components/pdf-view/pdf-view.tsx

@@ -1,6 +1,7 @@
 import { Flex } from '@servicetitan/anvil2';
-import { FC, ReactNode, useRef, useState } from 'react';
+import { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
+import { useZoom } from '../../hooks';
 import {
     type DataChangePayload,
     type DataModelValues,
@@ -9,7 +10,12 @@ import {
     type PdfViewMode,
     type RecipientInfo,
 } from '../../interface/types';
-import { mapColorsToRecipients } from '../../utils';
+import {
+    evaluateDisplayCondition,
+    mapColorsToRecipients,
+    sortFieldsByReadingOrder,
+} from '../../utils';
+import { CanvasControls } from '../pdf-canvas/canvas-controls';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
 import { PdfViewCalculated } from './pdf-view-calculated';
 import { PdfViewDataModel } from './pdf-view-data-model';
@@ -23,6 +29,8 @@ export interface PdfViewProps {
     errors?: Record<string, string>;
     viewMode?: PdfViewMode;
     data?: DataModelValues;
+    zoomable?: boolean;
+    enableInputNavigation?: boolean;
     pdfUrl: string;
     loading?: boolean;
     /**
@@ -52,6 +60,7 @@ export interface PdfViewProps {
 
 export const PdfView: FC<PdfViewProps> = ({
     data,
+    enableInputNavigation = true,
     errorPlaceholder,
     errors = {},
     fields,
@@ -65,9 +74,11 @@ export const PdfView: FC<PdfViewProps> = ({
     pdfUrl,
     recipients,
     viewMode,
+    zoomable = true,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
     const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
+    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
 
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -86,14 +97,82 @@ export const PdfView: FC<PdfViewProps> = ({
         onDataChange?.(data, field);
     };
 
+    const activeData = viewMode === 'preview' ? previewData : data;
+
+    const navigableFields = useMemo(
+        () =>
+            sortFieldsByReadingOrder(
+                fields
+                    .filter(
+                        field =>
+                            field.type === FieldTypeEnum.fillable &&
+                            field.recipient &&
+                            fillingBy?.includes(field.recipient),
+                    )
+                    .filter(
+                        field =>
+                            !field.displayCondition ||
+                            evaluateDisplayCondition(field.displayCondition, activeData),
+                    ),
+            ),
+        [fields, activeData, fillingBy],
+    );
+
+    // -1 means no field has been navigated to yet, so the first "next" lands on index 0.
+    const [currentFieldIndex, setCurrentFieldIndex] = useState(-1);
+
+    useEffect(() => {
+        setCurrentFieldIndex(index => Math.min(index, navigableFields.length - 1));
+    }, [navigableFields.length]);
+
+    const goToField = (index: number) => {
+        const field = navigableFields[index];
+        if (!field) {
+            return;
+        }
+
+        setCurrentFieldIndex(index);
+
+        const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+        const fieldEl = root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${field.id}"]`);
+        fieldEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        fieldEl?.querySelector<HTMLElement>('input, textarea')?.focus();
+    };
+
     const recipientsColors = mapColorsToRecipients(recipients);
     return (
-        <Flex flex={1} className="dte-pdf-view-container" style={{ maxWidth: BASE_PAGE_WIDTH }}>
-            <div ref={pdfWrapperRef} className="dte-pdf-wrapper">
+        <Flex
+            flex={1}
+            className="dte-pdf-editor-theme dte-pdf-editor-content-container"
+            direction="column"
+        >
+            {isPdfLoaded && (
+                <CanvasControls
+                    zoom={zoom}
+                    onZoomIn={zoomIn}
+                    onZoomOut={zoomOut}
+                    zoomable={zoomable}
+                    onResetZoom={resetZoom}
+                    enableInputNavigation={enableInputNavigation}
+                    disabledPrev={currentFieldIndex <= 0}
+                    disabledOnFirstField={currentFieldIndex === 0}
+                    disabledNext={currentFieldIndex >= navigableFields.length - 1}
+                    disabledOnLastField={currentFieldIndex === navigableFields.length - 1}
+                    onPrevField={() => goToField(currentFieldIndex - 1)}
+                    onNextField={() => goToField(currentFieldIndex + 1)}
+                    onFirstField={() => goToField(0)}
+                    onLastField={() => goToField(navigableFields.length - 1)}
+                />
+            )}
+            <div
+                ref={pdfWrapperRef}
+                className="dte-pdf-wrapper"
+                style={{ width: BASE_PAGE_WIDTH * zoom }}
+            >
                 <PdfDocumentRenderer
                     pdfUrl={pdfUrl}
                     loading={loading}
-                    pageWidth={BASE_PAGE_WIDTH}
+                    pageWidth={BASE_PAGE_WIDTH * zoom}
                     errorPlaceholder={errorPlaceholder}
                     loadingPlaceholder={loadingPlaceholder}
                     onDocumentLoadSuccess={onDocumentLoadSuccess}
@@ -108,6 +187,7 @@ export const PdfView: FC<PdfViewProps> = ({
                                 error={errors[field.path!] || ''}
                                 recipientsColors={recipientsColors}
                                 pdfWrapperRef={pdfWrapperRef}
+                                zoom={zoom}
                             >
                                 {(field.type === FieldTypeEnum.dataModel ||
                                     field.type === FieldTypeEnum.forms) && (

package/src/constants/pdf-editor.constants.ts

@@ -1 +1,6 @@
 export const BASE_PAGE_WIDTH = 980;
+
+export const ZOOM_MIN = 0.4;
+export const ZOOM_MAX = 2;
+export const ZOOM_STEP = 0.1;
+export const ZOOM_DEFAULT = 1;

package/src/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';
 export * from './usePdfFieldSelection';
 export * from './useToggle';
+export * from './useZoom';

package/src/hooks/useFieldDrag.ts

@@ -16,6 +16,7 @@ export interface DragVisualPosition {
 interface UseFieldDragOptions {
     pdfWrapperRef: RefObject<HTMLDivElement>;
     onFieldMove: (fieldId: string, newX: number, newY: number, pageNumber: number) => void;
+    zoom?: number;
 }
 
 interface UseFieldDragReturn {
@@ -41,6 +42,7 @@ interface PendingMove {
 export const useFieldDrag = ({
     onFieldMove,
     pdfWrapperRef,
+    zoom = 1,
 }: UseFieldDragOptions): UseFieldDragReturn => {
     const dragOffsetRef = useRef<{ x: number; y: number; page: number } | null>(null);
     const draggingFieldIdRef = useRef<string | null>(null);
@@ -68,7 +70,7 @@ export const useFieldDrag = ({
         }
         setDragVisualPosition({ x: field.x, y: field.y, page: field.page });
 
-        const dragOffset = handleFieldDragStart(e, field, pdfWrapperRef);
+        const dragOffset = handleFieldDragStart(e, field, pdfWrapperRef, zoom);
         if (dragOffset) {
             dragOffsetRef.current = dragOffset;
         }
@@ -87,13 +89,16 @@ export const useFieldDrag = ({
         const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
         const pageDimensions = getPageDimensions(currentPage, pdfWrapperRef);
 
-        const x = e.clientX - wrapperRect.left - currentPagePos.left - dragOffsetRef.current.x;
-        const y = e.clientY - wrapperRect.top - currentPagePos.top - dragOffsetRef.current.y;
+        // Positions in unzoomed reference coordinates, matching stored field.x/y
+        const x =
+            (e.clientX - wrapperRect.left - currentPagePos.left) / zoom - dragOffsetRef.current.x;
+        const y =
+            (e.clientY - wrapperRect.top - currentPagePos.top) / zoom - dragOffsetRef.current.y;
 
         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));