@servicetitan/dte-pdf-editor 1.76.0 → 1.78.0

package/dist/utils/field/get-field-bounds-style.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-field-bounds-style.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/field/get-field-bounds-style.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAiB,KAAK,QAAQ,EAAwB,MAAM,uBAAuB,CAAC;AAG3F,UAAU,uBAAuB;IAC7B,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAsBD;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAC5B,OAAO,QAAQ,EACf,UAAU,uBAAuB,KAClC,aAwBF,CAAC"}
+{"version":3,"file":"get-field-bounds-style.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/field/get-field-bounds-style.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAiB,KAAK,QAAQ,EAAwB,MAAM,uBAAuB,CAAC;AAG3F,UAAU,uBAAuB;IAC7B,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAsBD;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAC5B,OAAO,QAAQ,EACf,UAAU,uBAAuB,KAClC,aA6BF,CAAC"}

package/dist/utils/field/get-field-bounds-style.utils.js

@@ -27,13 +27,13 @@ const getFieldTypeSpecificStyle = (field) => {
  * and shared typography (font size / family / weight).
  */
 export const getFieldBoundsStyle = (field, options) => {
-    const { backgroundColor, borderColor, pageOffset = { left: 0, top: 0 } } = options !== null && options !== void 0 ? options : {};
+    const { backgroundColor, borderColor, pageOffset = { left: 0, top: 0 }, zoom = 1, } = options !== null && options !== void 0 ? 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/dist/utils/field/get-field-bounds-style.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-field-bounds-style.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-field-bounds-style.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAuC,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAQvE,MAAM,yBAAyB,GAAG,CAAC,KAAe,EAAiB,EAAE;;IACjE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,MAAM,MAAM,GAAG;QACX,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;YACtB,QAAQ,EAAE;gBACN,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAClB;YACD,KAAK,EAAE;gBACH,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAClB;SACJ;KAC6D,CAAC;IAEnE,OAAO,MAAA,MAAA,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,0CAAG,KAAK,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC;AACrD,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAC/B,KAAe,EACf,OAAiC,EACpB,EAAE;IACf,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC;IAEzF,OAAO;QACH,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;QAC/B,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC;QAC7B,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,YAAY;QACxB,cAAc,EAAE,YAAY;QAC5B,SAAS,EAAE,aAAa;QACxB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,CAAC;QACb,GAAG,yBAAyB,CAAC,KAAK,CAAC;QACnC,GAAG,uBAAuB,CAAC,KAAK,CAAC;QACjC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/C,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC1C,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"get-field-bounds-style.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-field-bounds-style.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAuC,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAevE,MAAM,yBAAyB,GAAG,CAAC,KAAe,EAAiB,EAAE;;IACjE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,MAAM,MAAM,GAAG;QACX,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;YACtB,QAAQ,EAAE;gBACN,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAClB;YACD,KAAK,EAAE;gBACH,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAClB;SACJ;KAC6D,CAAC;IAEnE,OAAO,MAAA,MAAA,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,0CAAG,KAAK,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC;AACrD,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAC/B,KAAe,EACf,OAAiC,EACpB,EAAE;IACf,MAAM,EACF,eAAe,EACf,WAAW,EACX,UAAU,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAChC,IAAI,GAAG,CAAC,GACX,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC;IAElB,OAAO;QACH,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI;QACtC,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI;QACpC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI;QACzB,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI;QAC3B,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,YAAY;QACxB,cAAc,EAAE,YAAY;QAC5B,SAAS,EAAE,aAAa;QACxB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,CAAC;QACb,GAAG,yBAAyB,CAAC,KAAK,CAAC;QACnC,GAAG,uBAAuB,CAAC,KAAK,CAAC;QACjC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/C,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC1C,CAAC;AACN,CAAC,CAAC"}

package/dist/utils/field/index.d.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';

package/dist/utils/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}

package/dist/utils/field/index.js

@@ -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';

package/dist/utils/field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.76.0",
+  "version": "1.78.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

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,75 @@ 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)
+                    .filter(
+                        field =>
+                            !field.displayCondition ||
+                            evaluateDisplayCondition(field.displayCondition, activeData),
+                    ),
+            ),
+        [fields, activeData],
+    );
+
+    // -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 fieldEl = document.getElementById(`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 +180,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;