@servicetitan/dte-pdf-editor 1.3.0 → 1.5.0

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

@@ -1,182 +0,0 @@
-import { FC, Fragment, MouseEvent, RefObject, useMemo } from 'react';
-import { useFieldDrag, useFieldResize, UseFieldResizeReturn } from '../hooks';
-import { FieldTypeEnum, PdfField } from '../interface/pdf-editor';
-import { getFieldBackgroundColor, getFieldPlaceholderText, getPagePosition } from '../utils';
-import { ResizeHandle } from './resize-handle';
-
-interface PdfFieldOverlayProps {
-    fields: PdfField[];
-    selectedField: string | null;
-    pdfWrapperRef: RefObject<HTMLDivElement>;
-    recipientsColors: Record<string, string>;
-    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 PdfFieldOverlay: FC<PdfFieldOverlayProps> = ({
-    fields,
-    onFieldClick,
-    onFieldMove,
-    onFieldResize,
-    pdfWrapperRef,
-    recipientsColors,
-    selectedField,
-}) => {
-    return (
-        <div className="dte-pdf-field-overlay skeleton-item">
-            {fields.map(field => (
-                <PdfFieldOverlayField
-                    key={field.id}
-                    field={field}
-                    onFieldMove={onFieldMove}
-                    onFieldClick={onFieldClick}
-                    pdfWrapperRef={pdfWrapperRef}
-                    onFieldResize={onFieldResize}
-                    isSelected={selectedField === field.id}
-                    recipientsColors={recipientsColors}
-                />
-            ))}
-        </div>
-    );
-};
-
-interface PdfFieldOverlayFieldProps {
-    field: PdfField;
-    isSelected: boolean;
-    recipientsColors: Record<string, string>;
-    pdfWrapperRef: RefObject<HTMLDivElement>;
-    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 PdfFieldOverlayField: FC<PdfFieldOverlayFieldProps> = ({
-    field,
-    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
-            onClick={e => onFieldClick(field.id, e)}
-            draggable
-            onDragStart={e => handleDragStart(e, field)}
-            onDrag={e => handleDrag(e, field)}
-            onDragEnd={handleDragEnd}
-            className={`dte-pdf-field ${isSelected ? 'dte-pdf-field-selected' : 'dte-pdf-field-unselected'} ${isDragging ? 'dte-pdf-field-dragging' : ''}`}
-            style={style}
-        >
-            {field.type === FieldTypeEnum.eSign && <FieldEsign field={field} />}
-            {field.type === FieldTypeEnum.dataModel && <FieldDataModel field={field} />}
-            {field.type === FieldTypeEnum.fillable && (
-                <FieldFillable
-                    field={field}
-                    handleResizeStart={handleResizeStart}
-                    isSelected={isSelected}
-                />
-            )}
-        </div>
-    );
-};
-
-interface FieldProps {
-    field: PdfField;
-}
-
-const FieldEsign: FC<FieldProps> = ({ field }) => {
-    return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value">{field.path}</div>
-        </span>
-    );
-};
-
-const FieldDataModel: FC<FieldProps> = ({ field }) => {
-    return (
-        <span>
-            {field.label ? field.label : field.path}
-            {field.required ? '*' : ''}
-        </span>
-    );
-};
-
-interface FieldFillableProps extends FieldProps {
-    isSelected: boolean;
-    handleResizeStart: UseFieldResizeReturn['handleResizeStart'];
-}
-
-const FieldFillable: FC<FieldFillableProps> = ({ field, handleResizeStart, isSelected }) => {
-    const placeholderText = getFieldPlaceholderText(field);
-
-    if (field.subType === 'checkbox' || field.subType === 'radio') {
-        return <input type={field.subType} readOnly className="dte-pdf-field-fillable" />;
-    }
-
-    if (field.subType === 'date') {
-        return (
-            <Fragment>
-                <input
-                    type="date"
-                    readOnly
-                    className="dte-pdf-field-fillable"
-                    placeholder={placeholderText}
-                />
-                {isSelected && (
-                    <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />
-                )}
-            </Fragment>
-        );
-    }
-
-    return (
-        <Fragment>
-            <input
-                type="text"
-                readOnly
-                placeholder={placeholderText}
-                className="dte-pdf-field-fillable"
-            />
-            {isSelected && <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />}
-        </Fragment>
-    );
-};

package/src/utils/get-page-dimensions.utils.ts

@@ -1,39 +0,0 @@
-import { RefObject } from 'react';
-
-/**
- * Gets the dimensions of a PDF page (width and height)
- * @param pageNumber - The page number to get dimensions for
- * @param pdfWrapperRef - Reference to the PDF wrapper element
- * @returns Dimensions object with width and height, or { width: 0, height: 0 } if not found
- */
-export const getPageDimensions = (
-    pageNumber: number,
-    pdfWrapperRef: RefObject<HTMLDivElement>,
-): { width: number; height: number } => {
-    if (!pdfWrapperRef.current) {
-        return { width: 0, height: 0 };
-    }
-
-    const pageElement = pdfWrapperRef.current.querySelector(`[data-page-number="${pageNumber}"]`);
-
-    if (!pageElement) {
-        return { width: 0, height: 0 };
-    }
-
-    // Get the canvas element inside the page to get actual PDF dimensions
-    const canvas = pageElement.querySelector('canvas');
-    if (canvas) {
-        const canvasRect = canvas.getBoundingClientRect();
-        return {
-            width: canvasRect.width,
-            height: canvasRect.height,
-        };
-    }
-
-    // Fallback to page element dimensions
-    const pageRect = pageElement.getBoundingClientRect();
-    return {
-        width: pageRect.width,
-        height: pageRect.height,
-    };
-};

package/src/utils/get-page-number-from-client-y.utils.ts

@@ -1,31 +0,0 @@
-import { RefObject } from 'react';
-
-/**
- * Determines which page number a client Y coordinate falls within
- * @param clientY - The client Y coordinate to check
- * @param pdfWrapperRef - Reference to the PDF wrapper element
- * @returns The page number (defaults to 1 if not found or wrapper is null)
- */
-export const getPageNumberFromClientY = (
-    clientY: number,
-    pdfWrapperRef: RefObject<HTMLDivElement>,
-): number => {
-    if (!pdfWrapperRef.current) {
-        return 1;
-    }
-
-    const pageElements = pdfWrapperRef.current.querySelectorAll('[data-page-number]');
-    let targetPage = 1;
-
-    pageElements.forEach(pageElement => {
-        const rect = pageElement.getBoundingClientRect();
-        if (clientY >= rect.top && clientY <= rect.bottom) {
-            const pageNumber = pageElement.getAttribute('data-page-number');
-            if (pageNumber) {
-                targetPage = parseInt(pageNumber, 10);
-            }
-        }
-    });
-
-    return targetPage;
-};

package/src/utils/get-page-position.utils.ts

@@ -1,30 +0,0 @@
-import { RefObject } from 'react';
-
-/**
- * Gets the position of a PDF page relative to the wrapper element
- * @param pageNumber - The page number to get the position for
- * @param pdfWrapperRef - Reference to the PDF wrapper element
- * @returns Position object with top and left coordinates, or { top: 0, left: 0 } if not found
- */
-export const getPagePosition = (
-    pageNumber: number,
-    pdfWrapperRef: RefObject<HTMLDivElement>,
-): { top: number; left: number } => {
-    if (!pdfWrapperRef.current) {
-        return { top: 0, left: 0 };
-    }
-
-    const pageElement = pdfWrapperRef.current.querySelector(`[data-page-number="${pageNumber}"]`);
-
-    if (!pageElement) {
-        return { top: 0, left: 0 };
-    }
-
-    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
-    const pageRect = pageElement.getBoundingClientRect();
-
-    return {
-        top: pageRect.top - wrapperRect.top,
-        left: pageRect.left - wrapperRect.left,
-    };
-};

package/src/utils/handle-field-drag-start.utils.ts

@@ -1,52 +0,0 @@
-import { DragEvent, RefObject } from 'react';
-import { PdfField } from '../interface/pdf-editor';
-import { getPagePosition } from './get-page-position.utils';
-
-/**
- * Handles the drag start event for a PDF field
- * Calculates drag offset and sets up drag data transfer
- * @param e - The drag event
- * @param field - The field being dragged
- * @param pdfWrapperRef - Reference to the PDF wrapper element
- * @returns The drag offset object or null if wrapper is not available
- */
-export const handleFieldDragStart = (
-    e: DragEvent<HTMLDivElement>,
-    field: PdfField,
-    pdfWrapperRef: RefObject<HTMLDivElement>,
-): { x: number; y: number; page: number } | null => {
-    if (!pdfWrapperRef.current) {
-        return null;
-    }
-
-    /*
-     * Calculate drag offset in page-relative coordinates
-     */
-    const startPagePos = getPagePosition(field.page, pdfWrapperRef);
-    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
-    const cursorXInPage = e.clientX - wrapperRect.left - startPagePos.left;
-    const cursorYInPage = e.clientY - wrapperRect.top - startPagePos.top;
-
-    const dragOffset = {
-        x: cursorXInPage - field.x,
-        y: cursorYInPage - field.y,
-        page: field.page,
-    };
-
-    // Mark that we're dragging an existing field, not a new field type
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/plain', 'existing-field');
-
-    // Create a transparent drag image to hide the default browser drag image
-    const dragImage = document.createElement('div');
-    dragImage.style.position = 'absolute';
-    dragImage.style.top = '-9999px';
-    dragImage.style.width = '1px';
-    dragImage.style.height = '1px';
-    dragImage.style.opacity = '0';
-    document.body.appendChild(dragImage);
-    e.dataTransfer.setDragImage(dragImage, 0, 0);
-    setTimeout(() => document.body.removeChild(dragImage), 0);
-
-    return dragOffset;
-};

package/src/utils/handle-field-drag.utils.ts

@@ -1,55 +0,0 @@
-import { DragEvent, RefObject } from 'react';
-import { PdfField } from '../interface/pdf-editor';
-import { getPageDimensions } from './get-page-dimensions.utils';
-import { getPageNumberFromClientY } from './get-page-number-from-client-y.utils';
-import { getPagePosition } from './get-page-position.utils';
-
-interface DragOffset {
-    x: number;
-    y: number;
-    page: number;
-}
-
-/**
- * Handles the drag event for a PDF field
- * Calculates new position and clamps it to page boundaries
- * @param e - The drag event
- * @param field - The field being dragged
- * @param dragOffset - The drag offset from drag start
- * @param pdfWrapperRef - Reference to the PDF wrapper element
- * @param onFieldMove - Callback to update field position
- */
-export const handleFieldDrag = (
-    e: DragEvent<HTMLDivElement>,
-    field: PdfField,
-    dragOffset: DragOffset,
-    pdfWrapperRef: RefObject<HTMLDivElement>,
-    onFieldMove: (fieldId: string, newX: number, newY: number, pageNumber: number) => void,
-): void => {
-    if (!pdfWrapperRef.current || e.clientX === 0 || e.clientY === 0) {
-        return;
-    }
-
-    const currentPage = getPageNumberFromClientY(e.clientY, pdfWrapperRef);
-    const currentPagePos = getPagePosition(currentPage, pdfWrapperRef);
-    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
-    const pageDimensions = getPageDimensions(currentPage, pdfWrapperRef);
-
-    // Calculate position in page coordinates
-    const x = e.clientX - wrapperRect.left - currentPagePos.left - dragOffset.x;
-    const y = e.clientY - wrapperRect.top - currentPagePos.top - dragOffset.y;
-
-    /*
-     * Clamp x and y to stay within page boundaries.
-     * Account for field width and height to prevent dragging outside.
-     */
-    const minX = 0;
-    const minY = 0;
-    const maxX = Math.max(0, pageDimensions.width - field.width);
-    const maxY = Math.max(0, pageDimensions.height - field.height);
-
-    const clampedX = Math.max(minX, Math.min(maxX, x));
-    const clampedY = Math.max(minY, Math.min(maxY, y));
-
-    onFieldMove(field.id, clampedX, clampedY, currentPage);
-};