@servicetitan/dte-pdf-editor 1.4.0 → 1.6.0

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

@@ -0,0 +1,44 @@
+import { FC, MouseEvent, RefObject } from 'react';
+import { PdfField } from '../../interface/types';
+import { PdfOverlayField } from './pdf-overlay-field';
+
+interface PdfFieldsOverlayProps {
+    fields: PdfField[];
+    selectedField: PdfField | null;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    recipientsColors: Record<string, string>;
+    handleAddNewField(field: PdfField): void;
+    onFieldClick(fieldId: string, e: MouseEvent): void;
+    onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
+    onFieldResize(fieldId: string, newWidth: number, newHeight: number, pageNumber: number): void;
+}
+
+export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
+    fields,
+    handleAddNewField,
+    onFieldClick,
+    onFieldMove,
+    onFieldResize,
+    pdfWrapperRef,
+    recipientsColors,
+    selectedField,
+}) => {
+    return (
+        <div className="dte-pdf-field-overlay skeleton-item">
+            {fields.map(field => (
+                <PdfOverlayField
+                    key={field.id}
+                    field={field}
+                    handleAddNewField={handleAddNewField}
+                    onFieldMove={onFieldMove}
+                    onFieldClick={onFieldClick}
+                    pdfWrapperRef={pdfWrapperRef}
+                    onFieldResize={onFieldResize}
+                    isSelected={selectedField?.id === field.id}
+                    recipientsColors={recipientsColors}
+                    isSameGroup={selectedField?.path === field.path}
+                />
+            ))}
+        </div>
+    );
+};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfOverlayFieldDataModelProps {
+    field: PdfField;
+}
+
+export const PdfOverlayFieldDataModel: FC<PdfOverlayFieldDataModelProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label ? field.label : field.path}
+            {field.required ? '*' : ''}
+        </span>
+    );
+};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfOverlayFieldESignProps {
+    field: PdfField;
+}
+
+export const PdfOverlayFieldESign: FC<PdfOverlayFieldESignProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label} {field.required ? '*' : ''}
+            <div className="dte-pdf-field-value">{field.path}</div>
+        </span>
+    );
+};

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

@@ -0,0 +1,68 @@
+import { FC, Fragment } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { PdfField } from '../../interface/types';
+import { getFieldPlaceholderText } from '../../utils';
+import { AddHandle } from './add-handle';
+
+interface PdfOverlayFieldFillableProps {
+    field: PdfField;
+    handleAddNewField(field: PdfField): void;
+}
+
+export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
+    field,
+    handleAddNewField,
+}) => {
+    const placeholderText = getFieldPlaceholderText(field);
+
+    switch (field.subType) {
+        case 'checkbox':
+            return <input type="checkbox" readOnly className="dte-pdf-field-fillable" />;
+
+        case 'radio':
+            return (
+                <Fragment>
+                    <input type="radio" readOnly className="dte-pdf-field-fillable" />
+                    <AddHandle
+                        onClick={() =>
+                            handleAddNewField({
+                                ...field,
+                                x: field.x + field.width + 15,
+                                id: uuidv4(),
+                            })
+                        }
+                    />
+                </Fragment>
+            );
+
+        case 'date':
+            return (
+                <input
+                    type="date"
+                    readOnly
+                    className="dte-pdf-field-fillable"
+                    placeholder={placeholderText}
+                />
+            );
+
+        case 'number':
+            return (
+                <input
+                    type="number"
+                    readOnly
+                    className="dte-pdf-field-fillable"
+                    placeholder={placeholderText}
+                />
+            );
+
+        default:
+            return (
+                <input
+                    type="text"
+                    readOnly
+                    placeholder={placeholderText}
+                    className="dte-pdf-field-fillable"
+                />
+            );
+    }
+};

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

@@ -0,0 +1,87 @@
+import { FC, MouseEvent, RefObject, useMemo } from 'react';
+import { useFieldDrag, useFieldResize } from '../../hooks';
+import { FieldTypeEnum, PdfField } from '../../interface/types';
+import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
+import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
+import { PdfOverlayFieldFillable } from './pdf-overlay-field-fillable';
+import { ResizeHandle } from './resize-handle';
+
+interface PdfOverlayFieldProps {
+    field: PdfField;
+    isSelected: boolean;
+    isSameGroup: boolean;
+    recipientsColors: Record<string, string>;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    handleAddNewField(field: PdfField): void;
+    onFieldClick(fieldId: string, e: MouseEvent): void;
+    onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
+    onFieldResize(fieldId: string, newWidth: number, newHeight: number, pageNumber: number): void;
+}
+
+export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
+    field,
+    handleAddNewField,
+    isSameGroup,
+    isSelected,
+    onFieldClick,
+    onFieldMove,
+    onFieldResize,
+    pdfWrapperRef,
+    recipientsColors,
+}) => {
+    const { draggingFieldIdRef, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
+        pdfWrapperRef,
+        onFieldMove,
+    });
+    const isDragging = draggingFieldIdRef.current === field.id;
+
+    const { handleResizeStart } = useFieldResize({
+        pdfWrapperRef,
+        onFieldResize,
+    });
+
+    const pagePos = useMemo(() => {
+        return getPagePosition(field.page, pdfWrapperRef);
+    }, [field.page, pdfWrapperRef]);
+
+    const style = useMemo(() => {
+        const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+        return {
+            left: pagePos.left + field.x,
+            top: pagePos.top + field.y,
+            width: field.width,
+            height: field.height,
+            backgroundColor: bgColor,
+        };
+    }, [
+        field.recipient,
+        field.x,
+        field.y,
+        field.width,
+        field.height,
+        recipientsColors,
+        pagePos.left,
+        pagePos.top,
+    ]);
+
+    return (
+        <div
+            title={field.description}
+            onClick={e => onFieldClick(field.id, e)}
+            draggable
+            onDragStart={e => handleDragStart(e, field)}
+            onDrag={e => handleDrag(e, field)}
+            onDragEnd={handleDragEnd}
+            className={`dte-pdf-field ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''}`}
+            style={style}
+        >
+            {field.type === FieldTypeEnum.eSign && <PdfOverlayFieldESign field={field} />}
+            {field.type === FieldTypeEnum.dataModel && <PdfOverlayFieldDataModel field={field} />}
+            {field.type === FieldTypeEnum.fillable && (
+                <PdfOverlayFieldFillable field={field} handleAddNewField={handleAddNewField} />
+            )}
+            {isSelected && <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />}
+        </div>
+    );
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { resolvePdfDataValues } from '../../utils';
+
+interface PdfViewDataModelProps {
+    field: PdfField;
+    data?: DataModelValues;
+}
+
+export const PdfViewDataModel: FC<PdfViewDataModelProps> = ({ data, field }) => {
+    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
+    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
+};

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

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfViewESignProps {
+    field: PdfField;
+}
+
+export const PdfViewESign: FC<PdfViewESignProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label} {field.required ? '*' : ''}
+            <div
+                className="dte-pdf-field-value"
+                style={{ opacity: 0.1, color: '#fff' }}
+            >{`{{${field.path}}}`}</div>
+        </span>
+    );
+};

package/src/components/{pdf-view-fields.tsx → pdf-view/pdf-view-fillable.tsx}

@@ -1,34 +1,15 @@
 import { FC } from 'react';
-import { DataModelValues, PdfField } from '../interface/pdf-editor';
-import { getFieldPlaceholderText, resolvePdfDataValues } from '../utils';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { getFieldPlaceholderText } from '../../utils';
 
-interface BaseFieldViewProps {
+interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
-}
-
-export const ViewDataModel: FC<BaseFieldViewProps> = ({ data, field }) => {
-    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
-};
-
-export const ViewEsign: FC<BaseFieldViewProps> = ({ data, field }) => {
-    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-
-    return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value">{resolvedValue}</div>
-        </span>
-    );
-};
-
-interface FillableFieldViewProps extends BaseFieldViewProps {
     fillingBy?: string[];
     onDataChange?(changedData: { [path: string]: string | boolean }): void;
 }
 
-export const FillableFieldView: FC<FillableFieldViewProps> = ({
+export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     data,
     field,
     fillingBy,
@@ -78,12 +59,13 @@ export const FillableFieldView: FC<FillableFieldViewProps> = ({
                 <input
                     style={{ width: 'inherit', height: 'inherit', margin: 0 }}
                     type="radio"
-                    checked={resolvedValue ?? false}
+                    value={field.id}
+                    checked={resolvedValue === field.id}
                     disabled={!isViewByCurrentRecipient}
                     name={field.path}
-                    onChange={e =>
+                    onChange={() =>
                         onDataChange?.({
-                            [field.path!]: e!.target.value,
+                            [field.path!]: field.id,
                         })
                     }
                 />
@@ -115,6 +97,29 @@ export const FillableFieldView: FC<FillableFieldViewProps> = ({
         );
     }
 
+    if (field.subType === 'number') {
+        return (
+            <input
+                type="number"
+                style={{
+                    background: 'inherit',
+                    width: 'inherit',
+                    height: 'inherit',
+                }}
+                disabled={!isViewByCurrentRecipient}
+                id={field.path}
+                name={field.path}
+                value={resolvedValue ?? ''}
+                onChange={e =>
+                    onDataChange?.({
+                        [field.path!]: e.target.value,
+                    })
+                }
+                placeholder={getFieldPlaceholderText(field)}
+            />
+        );
+    }
+
     return (
         <input
             type="text"

package/src/components/{pdf-view.tsx → pdf-view/pdf-view.tsx}

@@ -1,11 +1,12 @@
 import { Flex } from '@servicetitan/anvil2';
 import { FC, ReactNode, useRef, useState } from 'react';
-import { BASE_PAGE_WIDTH } from '../constants';
-import { DataModelValues, FieldTypeEnum, PdfField } from '../interface/pdf-editor';
-import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../utils';
-import { PdfDocumentRenderer } from './pdf-document-renderer';
-import { RecipientInfo } from './pdf-editor';
-import { FillableFieldView, ViewDataModel, ViewEsign } from './pdf-view-fields';
+import { BASE_PAGE_WIDTH } from '../../constants';
+import { DataModelValues, FieldTypeEnum, PdfField, RecipientInfo } from '../../interface/types';
+import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../../utils';
+import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
+import { PdfViewDataModel } from './pdf-view-data-model';
+import { PdfViewESign } from './pdf-view-e-sign';
+import { PdfViewFillable } from './pdf-view-fillable';
 
 interface PdfViewProps {
     fields: PdfField[];
@@ -75,13 +76,13 @@ export const PdfView: FC<PdfViewProps> = ({
                                     }}
                                 >
                                     {field.type === FieldTypeEnum.dataModel && (
-                                        <ViewDataModel field={field} data={data} />
+                                        <PdfViewDataModel field={field} data={data} />
                                     )}
                                     {field.type === FieldTypeEnum.eSign && (
-                                        <ViewEsign field={field} data={data} />
+                                        <PdfViewESign field={field} />
                                     )}
                                     {field.type === FieldTypeEnum.fillable && (
-                                        <FillableFieldView
+                                        <PdfViewFillable
                                             data={data}
                                             field={field}
                                             fillingBy={fillingBy}

package/src/constants/field.constants.ts

@@ -3,13 +3,13 @@ import {
     FieldTypeEnum,
     FieldTypeOption,
     FillableFieldType,
-} from '../interface/pdf-editor';
+} from '../interface/types';
 
 export const FIELD_CONSTANTS = {
     defaultWidth: 200,
     defaultHeight: 25,
-    minWidth: 20,
-    minHeight: 20,
+    minWidth: 10,
+    minHeight: 10,
     dropOffsetX: 75,
     dropOffsetY: 15,
 } as const;
@@ -30,6 +30,7 @@ export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] =
 
 export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
     { 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' },

package/src/hooks/index.ts

@@ -1,3 +1,7 @@
 export * from './useFieldDrag';
 export * from './useFieldResize';
+export * from './useInitializePdfJsWorker';
 export * from './usePdfDocumentRenderer';
+export * from './usePdfFieldDnD';
+export * from './usePdfFieldSelection';
+export * from './useToggle';

package/src/hooks/useFieldDrag.ts

@@ -1,5 +1,5 @@
 import { DragEvent, MutableRefObject, RefObject, useRef } from 'react';
-import { PdfField } from '../interface/pdf-editor';
+import { PdfField } from '../interface/types';
 import { handleFieldDrag, handleFieldDragStart } from '../utils';
 
 interface UseFieldDragOptions {

package/src/hooks/useFieldResize.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, RefObject, useEffect, useRef, useState } from 'react';
-import { PdfField } from '../interface/pdf-editor';
+import { PdfField } from '../interface/types';
 import { handleFieldResize, handleFieldResizeStart } from '../utils';
 
 interface UseFieldResizeOptions {

package/src/hooks/useInitializePdfJsWorker.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+import { initializePdfJsWorker } from '../utils';
+
+export const useInitializePdfJsWorker = () => {
+    useEffect(() => {
+        initializePdfJsWorker();
+    }, []);
+};

package/src/hooks/usePdfFieldDnD.ts

@@ -0,0 +1,118 @@
+import { DragEvent, RefObject, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
+import {
+    ESignFieldType,
+    FieldTypeEnum,
+    FieldTypeOption,
+    PdfField,
+    RecipientInfo,
+} from '../interface/types';
+import {
+    calculateDropCoordinates,
+    generateESignPath,
+    generateFillablePath,
+    isDragOverCanvas,
+} from '../utils';
+
+interface UsePdfFieldDnDProps {
+    fields: PdfField[];
+    recipients: RecipientInfo[];
+    onFieldsChange: (fields: PdfField[]) => void;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    onSelectField: (id: string) => void;
+}
+
+export const usePdfFieldDnD = ({
+    fields,
+    onFieldsChange,
+    onSelectField,
+    pdfWrapperRef,
+    recipients,
+}: UsePdfFieldDnDProps) => {
+    const [draggedFieldOption, setDraggedFieldOption] = useState<FieldTypeOption | null>(null);
+
+    const handleDragStart = (fieldOption: FieldTypeOption) => {
+        setDraggedFieldOption(fieldOption);
+    };
+
+    const handleDragEnd = () => {
+        setDraggedFieldOption(null);
+    };
+
+    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+        if (!draggedFieldOption) {
+            e.dataTransfer.dropEffect = 'none';
+            return;
+        }
+
+        if (isDragOverCanvas(e, pdfWrapperRef)) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = 'copy';
+        } else {
+            e.dataTransfer.dropEffect = 'none';
+        }
+    };
+
+    const handleDrop = (e: DragEvent<HTMLDivElement>, pageNumber: number) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.dataTransfer.getData('text/plain') === 'existing-field' || !draggedFieldOption) {
+            return;
+        }
+
+        const coordinates = calculateDropCoordinates(e, pageNumber, pdfWrapperRef);
+        if (!coordinates) {
+            setDraggedFieldOption(null);
+            return;
+        }
+
+        const newField: PdfField = {
+            id: uuidv4(),
+            type: draggedFieldOption.type,
+            subType: draggedFieldOption.subType,
+            x: coordinates.x,
+            y: coordinates.y,
+            page: pageNumber,
+            label: draggedFieldOption.label,
+            width: FIELD_CONSTANTS.defaultWidth,
+            height: FIELD_CONSTANTS.defaultHeight,
+            path: draggedFieldOption.path,
+        };
+
+        const recipientName = recipients[0]?.name ?? '';
+
+        if (newField.type === FieldTypeEnum.eSign) {
+            newField.recipient = recipientName;
+            newField.path = generateESignPath(
+                recipientName,
+                draggedFieldOption.subType as ESignFieldType,
+            );
+        }
+
+        if (newField.type === FieldTypeEnum.fillable) {
+            const defaultSize = FILLABLE_FIELD_DEFAULT_SIZES[newField.subType!];
+            newField.recipient = recipientName;
+            newField.required = false;
+            newField.path = generateFillablePath(recipientName, uuidv4());
+
+            if (defaultSize) {
+                newField.width = defaultSize.width;
+                newField.height = defaultSize.height;
+            }
+        }
+
+        onFieldsChange([...fields, newField]);
+        onSelectField(newField.id);
+        setDraggedFieldOption(null);
+    };
+
+    return {
+        handleDragStart,
+        handleDragEnd,
+        handleDragOver,
+        handleDrop,
+    };
+};

package/src/hooks/usePdfFieldSelection.ts

@@ -0,0 +1,55 @@
+import { MouseEvent, useMemo, useState } from 'react';
+import { PdfField } from '../interface/types';
+
+export const usePdfFieldSelection = (
+    fields: PdfField[],
+    onFieldsChange: (fields: PdfField[]) => void,
+) => {
+    const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+
+    const selectedField = useMemo(
+        () => fields.find(f => f.id === selectedFieldId) ?? null,
+        [fields, selectedFieldId],
+    );
+
+    const selectField = (fieldId: string, e?: MouseEvent) => {
+        e?.stopPropagation();
+        setSelectedFieldId(fieldId);
+    };
+
+    const deselectField = () => setSelectedFieldId(null);
+
+    const updateField = (updates: Partial<PdfField>) => {
+        if (!selectedFieldId) {
+            return;
+        }
+        onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
+    };
+
+    const deleteSelectedField = () => {
+        if (!selectedFieldId) {
+            return;
+        }
+        onFieldsChange(fields.filter(f => f.id !== selectedFieldId));
+        setSelectedFieldId(null);
+    };
+
+    const moveField = (id: string, x: number, y: number, page: number) => {
+        onFieldsChange(fields.map(f => (f.id === id ? { ...f, x, y, page } : f)));
+    };
+
+    const resizeField = (id: string, width: number, height: number, page: number) => {
+        onFieldsChange(fields.map(f => (f.id === id ? { ...f, width, height, page } : f)));
+    };
+
+    return {
+        selectedField,
+        selectField,
+        deselectField,
+        updateField,
+        deleteSelectedField,
+        moveField,
+        resizeField,
+        setSelectedFieldId,
+    };
+};

package/src/hooks/useToggle.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+
+export interface UseToggleReturn {
+    isOpen: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+}
+
+export const useToggle = (initialValue: boolean = false): UseToggleReturn => {
+    const [isOpen, setIsOpen] = useState<boolean>(initialValue);
+
+    const toggle = useCallback(() => {
+        setIsOpen(v => !v);
+    }, []);
+
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return { isOpen, toggle, open, close };
+};

package/src/index.ts

@@ -1,3 +1,2 @@
-export type * from './interface/pdf-editor';
-export * from './components/pdf-editor';
-export * from './components/pdf-view';
+export type * from './interface/types';
+export * from './components';