@servicetitan/dte-pdf-editor 1.92.3 → 1.92.4

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

@@ -1,7 +1,7 @@
-import { Flex, Text } from '@servicetitan/anvil2';
-import { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Flex } from '@servicetitan/anvil2';
+import { FC, ReactNode, useMemo, useRef, useState } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { usePinchZoom, useZoom } from '../../hooks';
+import { useZoom } from '../../hooks';
 import {
     type DataChangePayload,
     type DataModelValues,
@@ -15,11 +15,7 @@ import {
     mapColorsToRecipients,
     sortFieldsByReadingOrder,
 } from '../../utils';
-import {
-    FieldNavigationControls,
-    ZoomControls,
-    ZoomControlsProps,
-} from '../pdf-canvas/canvas-controls';
+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';
@@ -34,10 +30,6 @@ export interface PdfViewProps {
     viewMode?: PdfViewMode;
     data?: DataModelValues;
     zoomable?: boolean;
-    zoomProps?: {
-        vertical: ZoomControlsProps['vertical'];
-        position: ZoomControlsProps['position'];
-    };
     enableInputNavigation?: boolean;
     pdfUrl: string;
     loading?: boolean;
@@ -82,23 +74,14 @@ export const PdfView: FC<PdfViewProps> = ({
     pdfUrl,
     recipients,
     viewMode,
-    zoomProps,
     zoomable = true,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
     const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
-    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
+    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
     const activeData = viewMode === 'preview' ? previewData : data;
 
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
-    const navControlsRef = useRef<HTMLDivElement>(null);
-    const contentContainerRef = useRef<HTMLDivElement>(null);
-    usePinchZoom(contentContainerRef, {
-        enabled: zoomable,
-        setZoomValue,
-        zoom,
-        zoomByFactor,
-    });
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -128,6 +111,7 @@ export const PdfView: FC<PdfViewProps> = ({
         [navigableFields],
     );
 
+    // -1 means no field has been navigated to yet, so the first "next" lands on index 0.
     const [currentFieldIndex, setCurrentFieldIndex] = useState(-1);
 
     const handleFieldOverlayFocus = (fieldId: string) => {
@@ -136,160 +120,115 @@ export const PdfView: FC<PdfViewProps> = ({
         }
     };
 
-    const getFieldElement = (fieldId: string) => {
-        const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
-        return root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`) ?? undefined;
-    };
-
-    useLayoutEffect(() => {
-        const field = navigableFields[currentFieldIndex];
-        const navControlsEl = navControlsRef.current;
-        if (!field || !navControlsEl) {
-            return;
-        }
-
-        const fieldEl = getFieldElement(field.id);
-        if (!fieldEl) {
-            return;
-        }
-
-        const containerTop = contentContainerRef.current?.getBoundingClientRect().top ?? 0;
-        navControlsEl.style.top = `${fieldEl.getBoundingClientRect().top - containerTop}px`;
-    }, [currentFieldIndex, navigableFields]);
-
     const handleFocusField = (fieldId: string) => {
-        const fieldEl = getFieldElement(fieldId);
-        if (fieldEl) {
-            fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            const focusableChild = fieldEl.querySelector<HTMLElement>('input, textarea');
-            (focusableChild ?? fieldEl)?.focus();
-        }
+        const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+        const fieldEl = root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`);
+        fieldEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        const focusableElement = fieldEl?.querySelector<HTMLElement>('input, textarea') ?? fieldEl;
+        focusableElement?.focus();
     };
 
     const goToField = (index: number) => {
-        const fieldIndex = index < 0 || index >= navigableFields.length ? -1 : index;
-        const field = navigableFields[fieldIndex];
-
-        setCurrentFieldIndex(fieldIndex);
-        if (field) {
-            handleFocusField(field.id);
+        let i = index;
+        if (i < 0) {
+            i = 0;
+        } else if (i >= navigableFields.length) {
+            i = navigableFields.length - 1;
         }
-    };
+        const field = navigableFields[i];
 
-    const handleNextField = () => {
-        goToField(currentFieldIndex + 1);
+        setCurrentFieldIndex(i);
+        handleFocusField(field.id);
     };
 
     const recipientsColors = mapColorsToRecipients(recipients);
-    const hasNavigableFields = navigableFields.length !== 0;
-    const shouldShowFieldNavigation = enableInputNavigation && hasNavigableFields;
-
+    const hasNavigableFields = navigableFields.length === 0;
     return (
         <Flex
+            flex={1}
+            className="dte-pdf-editor-theme dte-pdf-editor-content-container --view-mode"
             direction="column"
-            style={{ position: 'relative', minWidth: 0, height: '100%' }}
-            className="dte-pdf-editor-theme"
-            ref={contentContainerRef}
         >
-            {isPdfLoaded && shouldShowFieldNavigation && (
-                <div ref={navControlsRef} className="dte-pdf-movable-next-button-wrapper">
-                    <FieldNavigationControls
-                        isStarted={currentFieldIndex !== -1}
-                        onNextField={handleNextField}
-                    />
-                </div>
-            )}
-            {isPdfLoaded && zoomable && (
-                <ZoomControls
-                    {...zoomProps}
+            {isPdfLoaded && (
+                <CanvasControls
                     zoom={zoom}
                     onZoomIn={zoomIn}
                     onZoomOut={zoomOut}
+                    zoomable={zoomable}
                     onResetZoom={resetZoom}
+                    enableInputNavigation={enableInputNavigation}
+                    disabledPrev={hasNavigableFields}
+                    disabledNext={hasNavigableFields}
+                    disabledOnFirstField={hasNavigableFields}
+                    disabledOnLastField={hasNavigableFields}
+                    onPrevField={() => goToField(currentFieldIndex - 1)}
+                    onNextField={() => goToField(currentFieldIndex + 1)}
+                    onFirstField={() => goToField(0)}
+                    onLastField={() => goToField(navigableFields.length - 1)}
                 />
             )}
-            {shouldShowFieldNavigation && (
-                <Flex
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={2}
-                    className="dte-pdf-canvas-controls"
-                >
-                    <Text style={{ color: '#ffffff' }}>Review and complete</Text>
-                    <FieldNavigationControls
-                        isStarted={currentFieldIndex !== -1}
-                        onNextField={handleNextField}
-                    />
-                </Flex>
-            )}
-            <Flex
-                flex={1}
-                className="dte-pdf-editor-content-container --view-mode"
-                direction="column"
+            <div
+                ref={pdfWrapperRef}
+                className="dte-pdf-wrapper"
+                style={{ width: BASE_PAGE_WIDTH * zoom }}
             >
-                <div
-                    ref={pdfWrapperRef}
-                    className="dte-pdf-wrapper"
-                    style={{ width: BASE_PAGE_WIDTH * zoom }}
-                >
-                    <PdfDocumentRenderer
-                        pdfUrl={pdfUrl}
-                        loading={loading}
-                        pageWidth={BASE_PAGE_WIDTH * zoom}
-                        errorPlaceholder={errorPlaceholder}
-                        loadingPlaceholder={loadingPlaceholder}
-                        onDocumentLoadSuccess={onDocumentLoadSuccess}
-                    />
-                    {isPdfLoaded && (
-                        <div className="dte-pdf-field-overlay --view-mode">
-                            {fields.map(field => (
-                                <PdfViewFieldContainer
-                                    key={field.id}
-                                    field={field}
-                                    data={viewMode === 'preview' ? previewData : data}
-                                    error={errors[field.path!] || ''}
-                                    recipientsColors={recipientsColors}
-                                    pdfWrapperRef={pdfWrapperRef}
-                                    zoom={zoom}
-                                    onFocus={handleFieldOverlayFocus}
-                                >
-                                    {(field.type === FieldTypeEnum.dataModel ||
-                                        field.type === FieldTypeEnum.forms) && (
-                                        <PdfViewDataModel
-                                            field={field}
-                                            data={viewMode === 'preview' ? previewData : data}
-                                        />
-                                    )}
-                                    {field.type === FieldTypeEnum.eSign && (
-                                        <PdfViewESign field={field} />
-                                    )}
-                                    {field.type === FieldTypeEnum.calculated && (
-                                        <PdfViewCalculated
-                                            field={field}
-                                            data={viewMode === 'preview' ? previewData : data}
-                                            holidays={holidays}
-                                            viewMode={viewMode}
-                                        />
-                                    )}
-                                    {field.type === FieldTypeEnum.fillable && (
-                                        <PdfViewFillable
-                                            data={viewMode === 'preview' ? previewData : data}
-                                            field={field}
-                                            readOnly={makeFillableFieldsReadonly}
-                                            fillingBy={fillingBy}
-                                            viewMode={viewMode}
-                                            onDataChange={handleDataChange}
-                                        />
-                                    )}
-                                    {field.type === FieldTypeEnum.generic && (
-                                        <PdfViewGeneric field={field} />
-                                    )}
-                                </PdfViewFieldContainer>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </Flex>
+                <PdfDocumentRenderer
+                    pdfUrl={pdfUrl}
+                    loading={loading}
+                    pageWidth={BASE_PAGE_WIDTH * zoom}
+                    errorPlaceholder={errorPlaceholder}
+                    loadingPlaceholder={loadingPlaceholder}
+                    onDocumentLoadSuccess={onDocumentLoadSuccess}
+                />
+                {isPdfLoaded && (
+                    <div className="dte-pdf-field-overlay --view-mode">
+                        {fields.map(field => (
+                            <PdfViewFieldContainer
+                                key={field.id}
+                                field={field}
+                                data={viewMode === 'preview' ? previewData : data}
+                                error={errors[field.path!] || ''}
+                                recipientsColors={recipientsColors}
+                                pdfWrapperRef={pdfWrapperRef}
+                                zoom={zoom}
+                                onFocus={handleFieldOverlayFocus}
+                            >
+                                {(field.type === FieldTypeEnum.dataModel ||
+                                    field.type === FieldTypeEnum.forms) && (
+                                    <PdfViewDataModel
+                                        field={field}
+                                        data={viewMode === 'preview' ? previewData : data}
+                                    />
+                                )}
+                                {field.type === FieldTypeEnum.eSign && (
+                                    <PdfViewESign field={field} />
+                                )}
+                                {field.type === FieldTypeEnum.calculated && (
+                                    <PdfViewCalculated
+                                        field={field}
+                                        data={viewMode === 'preview' ? previewData : data}
+                                        holidays={holidays}
+                                        viewMode={viewMode}
+                                    />
+                                )}
+                                {field.type === FieldTypeEnum.fillable && (
+                                    <PdfViewFillable
+                                        data={viewMode === 'preview' ? previewData : data}
+                                        field={field}
+                                        readOnly={makeFillableFieldsReadonly}
+                                        fillingBy={fillingBy}
+                                        viewMode={viewMode}
+                                        onDataChange={handleDataChange}
+                                    />
+                                )}
+                                {field.type === FieldTypeEnum.generic && (
+                                    <PdfViewGeneric field={field} />
+                                )}
+                            </PdfViewFieldContainer>
+                        ))}
+                    </div>
+                )}
+            </div>
         </Flex>
     );
 };

package/src/constants/field.constants.ts

@@ -1,17 +1,3 @@
-import NumbersIcon from '@servicetitan/anvil2/assets/icons/material/round/123.svg';
-import AbcIcon from '@servicetitan/anvil2/assets/icons/material/round/abc.svg';
-import BadgeIcon from '@servicetitan/anvil2/assets/icons/material/round/badge.svg';
-import CalculateIcon from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
-import CalendarMonthIcon from '@servicetitan/anvil2/assets/icons/material/round/calendar_month.svg';
-import CheckboxIcon from '@servicetitan/anvil2/assets/icons/material/round/check_box.svg';
-import EventAvailableIcon from '@servicetitan/anvil2/assets/icons/material/round/event_available.svg';
-import GestureIcon from '@servicetitan/anvil2/assets/icons/material/round/gesture.svg';
-import RadioIcon from '@servicetitan/anvil2/assets/icons/material/round/radio_button_checked.svg';
-import ShortTextIcon from '@servicetitan/anvil2/assets/icons/material/round/short_text.svg';
-import TableChartIcon from '@servicetitan/anvil2/assets/icons/material/round/table_chart.svg';
-import TextIcon from '@servicetitan/anvil2/assets/icons/material/round/text_fields.svg';
-import IconAppointmentsIcon from '@servicetitan/anvil2/assets/icons/st/appointments.svg';
-
 import {
     type CalculatedFormatForDate,
     type CalculatedFormatForNumber,
@@ -58,11 +44,11 @@ export const GENERIC_FIELD_DEFAULT_SIZES = {
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
 export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
-    { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text', icon: ShortTextIcon },
-    { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number', icon: NumbersIcon },
-    { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date', icon: CalendarMonthIcon },
-    { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox', icon: CheckboxIcon },
-    { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio', icon: RadioIcon },
+    { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text' },
+    { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number' },
+    { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date' },
+    { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox' },
+    { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio' },
 ];
 
 export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
@@ -70,31 +56,26 @@ export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
         label: 'Signature',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.signature,
-        icon: GestureIcon,
     },
     {
         label: 'Initials',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.initials,
-        icon: AbcIcon,
     },
     {
         label: 'Date Signed',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.dateSigned,
-        icon: EventAvailableIcon,
     },
     {
-        label: 'Calculated Singing Date',
+        label: 'Date Signed Offset',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.dateSignedOffset,
-        icon: IconAppointmentsIcon,
     },
     {
         label: 'Full Name',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.fullName,
-        icon: BadgeIcon,
     },
 ];
 
@@ -102,7 +83,6 @@ export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [
     {
         label: 'Calculated Field',
         type: FieldTypeEnum.calculated,
-        icon: CalculateIcon,
     },
 ];
 
@@ -111,13 +91,11 @@ export const GENERIC_FIELD_TYPES: FieldTypeOption[] = [
         label: 'Text',
         type: FieldTypeEnum.generic,
         subType: 'text',
-        icon: TextIcon,
     },
     {
         label: 'Table',
         type: FieldTypeEnum.generic,
         subType: 'table',
-        icon: TableChartIcon,
     },
 ];
 

package/src/hooks/index.ts

@@ -6,6 +6,5 @@ export * from './useFormulaEditor';
 export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';
 export * from './usePdfFieldSelection';
-export * from './usePinchZoom';
 export * from './useToggle';
 export * from './useZoom';

package/src/hooks/useZoom.ts

@@ -1,37 +1,25 @@
 import { useCallback, useState } from 'react';
-import { ZOOM_DEFAULT, ZOOM_STEP } from '../constants';
-import { clampZoom } from '../utils';
+import { ZOOM_DEFAULT, ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from '../constants';
 
 export interface UseZoomReturn {
     zoom: number;
     zoomIn(): void;
     zoomOut(): void;
     resetZoom(): void;
-    setZoomValue(value: number): void;
-    zoomByFactor(factor: number): 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);
-    }, []);
-    const setZoomValue = useCallback((value: number) => {
-        setZoom(clampZoom(value));
-    }, []);
-    const zoomByFactor = useCallback((factor: number) => {
-        setZoom(prev => clampZoom(prev * factor));
-    }, []);
+    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 { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut };
+    return { zoom, zoomIn, zoomOut, resetZoom };
 };

package/src/interface/types.ts

@@ -1,5 +1,3 @@
-import { Svg } from '@servicetitan/anvil2';
-
 export enum FieldTypeEnum {
     dataModel = 'dataModel',
     forms = 'forms',
@@ -166,7 +164,6 @@ export interface FieldTypeOption {
     fieldType?: SchemaFieldType;
     formSnapshot?: FormulaFieldFormSnapshot;
     sampleData?: unknown;
-    icon?: Svg;
 }
 
 export interface DataModelFieldGroup {

package/src/styles/pdf-canvas.css

@@ -5,106 +5,30 @@
     margin-inline-end: auto;
 }
 
-.dte-pdf-canvas-container {
-    touch-action: pan-x pan-y;
-}
-
-.dte-pdf-zoom-controls-value {
-    min-width: 44px;
-    text-align: center;
-    cursor: pointer;
-    user-select: none;
-}
-
-.dte-pdf-zoom-controls {
-    background-color: var(--bg-color-light, #ffffff);
-    border: 1px solid var(--border-color, #e0e0e0);
-    border-radius: var(--radius-2, 8px);
-    position: absolute;
-    z-index: 2;
-
-    &.--vertical {
-        flex-direction: column;
-    }
-
-    &.--right-center {
-        right: 0;
-        top: 50%;
-        transform: translate(100%, -50%);
-    }
-
-    &.--right-bottom {
-        bottom: 12px;
-        right: 12px;
-    }
-}
-
-.dte-pdf-field-next-controls-button {
-    background-color: #0365dd;
-    cursor: pointer;
-    color: var(--color-neutral-0, #ffffff);
-    border-radius: var(--border-radius-2, 6px);
-    font-size: var(--typescale-1, 12px);
-    font-family: 'Nunito Sans';
-    font-weight: var(--font-weight-semibold, 600);
-    font-stretch: 100%;
-
-    &.--started {
-        &:after {
-            content: '';
-            position: absolute;
-            right: -1em;
-            height: 100%;
-            width: 1.3em;
-            background-color: inherit;
-            clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-        }
-    }
-
-    &.--disabled {
-        background-color: var(--color-neutral-300, #e0e0e0);
-        cursor: not-allowed;
-    }
-
-    > span {
-        position: relative;
-        padding: 5px var(--spacing-1);
-        display: inline-block;
-    }
-}
-
 .dte-pdf-canvas-controls {
     z-index: 1;
     position: sticky;
     top: 0;
     left: 0;
-    background: var(--bg-color-highlited, #0265dc);
-    padding: var(--spacing-2, 16px);
-
-    .dte-pdf-field-next-controls-button:after {
-        display: none;
-    }
+    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-movable-next-button-wrapper {
-    top: 50px;
-    transform: translateX(-100%);
-    position: absolute;
-    z-index: 2;
+.dte-pdf-zoom-controls-value {
+    min-width: 44px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
 }
 
-@media (max-width: 1000px) {
-    .dte-pdf-movable-next-button-wrapper {
-        display: none;
-    }
-
-    .dte-pdf-zoom-controls {
-        display: none !important;
-    }
+.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);
 }
 
-@media (min-width: 1001px) {
-    .dte-pdf-editor-theme > .dte-pdf-canvas-controls {
-        display: none;
-    }
+.dte-pdf-field-view.--eSign:focus {
+    outline: 2px solid var(--border-color-active);
 }

package/src/styles/pdf-editor.css

@@ -14,7 +14,6 @@
     min-width: 0;
     overflow: auto;
     overscroll-behavior: none;
-    touch-action: pan-x pan-y;
     background-color: var(--bg-color-main, #eeeeee);
     width: 100%;