@servicetitan/dte-pdf-editor 1.92.2 → 1.92.3

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

@@ -1,23 +1,32 @@
 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 {
+export interface ZoomControlsProps {
     zoom: number;
+    vertical?: boolean;
+    position?: 'right-center' | 'right-bottom';
     onZoomIn(): void;
     onZoomOut(): void;
     onResetZoom(): void;
 }
 
-const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut, zoom }) => {
+export const ZoomControls: FC<ZoomControlsProps> = ({
+    onResetZoom,
+    onZoomIn,
+    onZoomOut,
+    position = 'right-center',
+    vertical,
+    zoom,
+}) => {
     return (
-        <Flex alignItems="center" gap={1} className="dte-pdf-zoom-controls">
+        <Flex
+            alignItems="center"
+            gap={1}
+            className={`dte-pdf-zoom-controls ${vertical ? '--vertical' : '--horizontal'} --${position}`}
+        >
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -28,7 +37,7 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
             >
                 <Icon svg={IconZoomOut} size="medium" />
             </Button>
-
+            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
             <Text
                 variant="body"
                 size="small"
@@ -38,7 +47,7 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
             >
                 {Math.round(zoom * 100)}%
             </Text>
-
+            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -54,130 +63,23 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
 };
 
 interface FieldNavigationControlsProps {
-    disabledNext: boolean;
-    disabledOnFirstField: boolean;
-    disabledOnLastField: boolean;
-    disabledPrev: boolean;
+    isStarted: boolean;
+    disabled?: boolean;
     onNextField(): void;
-    onPrevField(): void;
-    onFirstField(): void;
-    onLastField(): void;
 }
 
-const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
-    disabledNext,
-    disabledOnFirstField,
-    disabledOnLastField,
-    disabledPrev,
-    onFirstField,
-    onLastField,
+export const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
+    disabled,
+    isStarted,
     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>
+        <div
+            className={`dte-pdf-field-next-controls-button ${disabled && '--disabled'} ${isStarted && '--started'}`}
+            role="button"
+            onClick={onNextField}
+        >
+            <span>{isStarted ? 'Next' : 'Start'}</span>
+        </div>
     );
 };

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

@@ -10,13 +10,13 @@ import {
     useState,
 } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { useZoom } from '../../hooks';
+import { usePinchZoom, useZoom } from '../../hooks';
 import { type PdfField } from '../../interface/types';
 import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
-import { CanvasControls } from './canvas-controls';
+import { ZoomControls, ZoomControlsProps } from './canvas-controls';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
 
-interface PdfCanvasProps {
+export interface PdfCanvasProps {
     pdfUrl: string;
     zoomable: boolean;
     errorPlaceholder?: ReactNode;
@@ -29,6 +29,10 @@ interface PdfCanvasProps {
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
     fieldWrapperClassNames?: string;
+    zoomProps?: {
+        vertical: ZoomControlsProps['vertical'];
+        position: ZoomControlsProps['position'];
+    };
     onLoadSuccess?(pageNums: number): void;
     handleAddNewField(field: PdfField): void;
     onDragOver(e: DragEvent<HTMLDivElement>): void;
@@ -61,10 +65,17 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
+    zoomProps,
     zoomable,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
-    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
+    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
+    usePinchZoom(pdfContainerRef, {
+        enabled: zoomable,
+        setZoomValue,
+        zoom,
+        zoomByFactor,
+    });
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -77,10 +88,9 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
 
     return (
         <Fragment>
-            {isPdfLoaded && (
-                <CanvasControls
-                    enableInputNavigation={false}
-                    zoomable={zoomable}
+            {isPdfLoaded && zoomable && (
+                <ZoomControls
+                    {...zoomProps}
                     zoom={zoom}
                     onZoomIn={zoomIn}
                     onZoomOut={zoomOut}

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

@@ -12,7 +12,7 @@ import {
 import { extractGroupedFieldsFromDataModel, mapColorsToRecipients } from '../../utils';
 import { FieldConfigPanelOverlay } from '../field-config-panel/field-config-panel-overlay';
 import { FieldSidebar } from '../field-sidebar/field-sidebar';
-import { PdfCanvas } from '../pdf-canvas/pdf-canvas';
+import { PdfCanvas, PdfCanvasProps } from '../pdf-canvas/pdf-canvas';
 
 import '../../styles/index.css';
 
@@ -29,6 +29,7 @@ export interface PdfEditorProps {
     hideFields?: FieldTypeEnum[];
     hideConditionalLogic?: boolean;
     forms?: FormInfo[];
+    zoomProps?: PdfCanvasProps['zoomProps'];
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
@@ -52,6 +53,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     onLoadSuccess,
     pdfUrl,
     recipients = [],
+    zoomProps,
     zoomable = true,
 }) => {
     const pdfContainerRef = useRef<HTMLDivElement>(null);
@@ -122,6 +124,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                 className="dte-pdf-editor-content-container skeleton-item"
             >
                 <PdfCanvas
+                    zoomProps={zoomProps}
                     zoomable={zoomable}
                     pdfUrl={pdfUrl}
                     fields={fields}

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

@@ -49,7 +49,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                     field={field}
                     fieldWrapperClassNames={fieldWrapperClassNames}
                     onFieldConfigChange={onFieldConfigChange}
-                    error={errors[field.id]}
+                    error={errors[field.id] ?? errors[field.path ?? '']}
                     handleAddNewField={handleAddNewField}
                     onFieldMove={onFieldMove}
                     onFieldClick={onFieldClick}

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

@@ -1,3 +1,4 @@
+import { Flex } from '@servicetitan/anvil2';
 import { FC } from 'react';
 import { type PdfField } from '../../interface/types';
 
@@ -7,11 +8,12 @@ interface PdfOverlayFieldESignProps {
 
 export const PdfOverlayFieldESign: FC<PdfOverlayFieldESignProps> = ({ field }) => {
     return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
-                {field.path}
-            </div>
-        </span>
+        <Flex
+            alignItems="center"
+            className="dte-pdf-field-value"
+            style={{ fontSize: '8px', height: '100%' }}
+        >
+            {field.path} {field.required ? '*' : ''}
+        </Flex>
     );
 };

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

@@ -1,8 +1,14 @@
+import { Icon } from '@servicetitan/anvil2';
 import { FC, MouseEvent, RefObject } from 'react';
 import { DISABLE_FIELD_RESIZE } from '../../constants';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, type PdfField } from '../../interface/types';
-import { getFieldBackgroundColor, getFieldBoundsStyle, getPagePosition } from '../../utils';
+import {
+    getFieldBackgroundColor,
+    getFieldBoundsStyle,
+    getFieldTypeOption,
+    getPagePosition,
+} from '../../utils';
 import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
 import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
@@ -85,6 +91,8 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
         .filter(Boolean)
         .join(' ');
 
+    const fieldTypeOption = getFieldTypeOption(field);
+
     return (
         <div
             title={field.description}
@@ -96,6 +104,14 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             className={className}
             style={style}
         >
+            {fieldTypeOption && (
+                <div className="dte-pdf-field-label">
+                    {fieldTypeOption.icon && (
+                        <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
+                    )}
+                    {fieldTypeOption.label}
+                </div>
+            )}
             {field.type === FieldTypeEnum.calculated && (
                 <PdfOverlayFieldCalculated field={field} pathToLabel={pathToLabel} />
             )}

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

@@ -1,3 +1,4 @@
+import { Flex } from '@servicetitan/anvil2';
 import { FC } from 'react';
 import { type PdfField } from '../../interface/types';
 
@@ -7,11 +8,12 @@ interface PdfViewESignProps {
 
 export const PdfViewESign: FC<PdfViewESignProps> = ({ field }) => {
     return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
-                {field.path}
-            </div>
-        </span>
+        <Flex
+            alignItems="center"
+            className="dte-pdf-field-value"
+            style={{ fontSize: '8px', height: '100%' }}
+        >
+            {field.path} {field.required ? '*' : ''}
+        </Flex>
     );
 };

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

@@ -1,9 +1,11 @@
+import { Icon } from '@servicetitan/anvil2';
 import { FC, Fragment, PropsWithChildren, RefObject } from 'react';
 import { type DataModelValues, type PdfField } from '../../interface/types';
 import {
     evaluateDisplayCondition,
     getFieldBackgroundColor,
     getFieldBoundsStyle,
+    getFieldTypeOption,
     getPagePosition,
 } from '../../utils';
 
@@ -36,6 +38,8 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
 
     const pagePos = getPagePosition(field.page, pdfWrapperRef);
     const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+    const fieldTypeOption = getFieldTypeOption(field);
+
     return (
         <Fragment>
             <div
@@ -45,13 +49,28 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
                 style={getFieldBoundsStyle(field, {
                     pageOffset: pagePos,
                     backgroundColor: bgColor,
-                    borderColor: error ? 'red' : undefined,
+                    borderColor: error ? 'red' : bgColor.replace('1f', '7d'),
                     zoom,
                 })}
                 onFocus={() => onFocus?.(field.id)}
             >
                 {children}
             </div>
+            {fieldTypeOption && (
+                <div
+                    className="dte-pdf-field-label"
+                    style={{
+                        top: pagePos.top + field.y * zoom - 10,
+                        left: pagePos.left + field.x * zoom + 3,
+                        position: 'absolute',
+                    }}
+                >
+                    {fieldTypeOption.icon && (
+                        <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
+                    )}
+                    {fieldTypeOption.label}
+                </div>
+            )}
             {error && (
                 <span
                     style={{
@@ -59,6 +78,7 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
                         top: pagePos.top + (field.y + field.height) * zoom + 8,
                         left: pagePos.left + field.x * zoom,
                         minWidth: '100px',
+                        fontSize: '10px',
                         position: 'absolute',
                     }}
                 >

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

@@ -31,7 +31,7 @@ interface FillableTextInputProps {
 }
 
 const fillableTextStyles = {
-    background: 'inherit',
+    background: 'transparent',
     width: '100%',
     height: '100%',
     border: 'none',