@servicetitan/dte-pdf-editor 1.0.0

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,55 @@
+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);
+};

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

@@ -0,0 +1,102 @@
+import { RefObject } from 'react';
+import { FIELD_CONSTANTS } from '../constants';
+import { PdfField } from '../interface/pdf-editor';
+import { getPageDimensions } from './get-page-dimensions.utils';
+import { getPagePosition } from './get-page-position.utils';
+
+interface ResizeStartData {
+    startX: number;
+    startY: number;
+    startWidth: number;
+    startHeight: number;
+    page: number;
+}
+
+/**
+ * Calculates the initial resize data when user starts resizing
+ * @param e - Mouse event
+ * @param field - The field being resized
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns Resize start data or null if calculation fails
+ */
+export const handleFieldResizeStart = (
+    e: { clientX: number; clientY: number },
+    field: PdfField,
+    pdfWrapperRef: RefObject<HTMLDivElement>,
+): ResizeStartData | null => {
+    if (!pdfWrapperRef.current) {
+        return null;
+    }
+
+    const pagePos = getPagePosition(field.page, pdfWrapperRef);
+    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
+
+    // Calculate mouse position relative to the page
+    const startX = e.clientX - wrapperRect.left - pagePos.left;
+    const startY = e.clientY - wrapperRect.top - pagePos.top;
+
+    return {
+        startX,
+        startY,
+        startWidth: field.width,
+        startHeight: field.height,
+        page: field.page,
+    };
+};
+
+/**
+ * Handles the resize event for a PDF field from bottom-right corner
+ * Only changes width and height, keeping x and y coordinates unchanged
+ * @param e - Mouse event
+ * @param field - The field being resized
+ * @param resizeStartData - Data from resize start
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @param onFieldResize - Callback to update field dimensions
+ */
+export const handleFieldResize = (
+    e: { clientX: number; clientY: number },
+    field: PdfField,
+    resizeStartData: ResizeStartData,
+    pdfWrapperRef: RefObject<HTMLDivElement>,
+    onFieldResize: (
+        fieldId: string,
+        newWidth: number,
+        newHeight: number,
+        pageNumber: number,
+    ) => void,
+): void => {
+    if (!pdfWrapperRef.current) {
+        return;
+    }
+
+    const pageDimensions = getPageDimensions(resizeStartData.page, pdfWrapperRef);
+    const pagePos = getPagePosition(resizeStartData.page, pdfWrapperRef);
+    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
+
+    // Calculate mouse position relative to the page
+    const mouseX = e.clientX - wrapperRect.left - pagePos.left;
+    const mouseY = e.clientY - wrapperRect.top - pagePos.top;
+
+    // Calculate delta from the start position
+    const deltaX = mouseX - resizeStartData.startX;
+    const deltaY = mouseY - resizeStartData.startY;
+
+    /*
+     * Calculate new width and height based on which handle is being used
+     * x and y always stay the same
+     */
+    let newWidth = resizeStartData.startWidth + deltaX;
+    let newHeight = resizeStartData.startHeight + deltaY;
+
+    // Clamp to minimum dimensions
+    newWidth = Math.max(FIELD_CONSTANTS.minWidth, newWidth);
+    newHeight = Math.max(FIELD_CONSTANTS.minHeight, newHeight);
+
+    // Clamp to page boundaries (ensure the field doesn't go outside the page)
+    const maxWidth = pageDimensions.width - field.x;
+    const maxHeight = pageDimensions.height - field.y;
+    newWidth = Math.min(newWidth, maxWidth);
+    newHeight = Math.min(newHeight, maxHeight);
+
+    onFieldResize(field.id, newWidth, newHeight, resizeStartData.page);
+};

package/src/utils/index.ts

@@ -0,0 +1,12 @@
+export * from './calculate-drop-coordinates.utils';
+export * from './extract-grouped-fields-from-data-model.utils';
+export * from './get-page-dimensions.utils';
+export * from './get-page-number-from-client-y.utils';
+export * from './get-page-position.utils';
+export * from './handle-field-drag.utils';
+export * from './handle-field-drag-start.utils';
+export * from './handle-field-resize.utils';
+export * from './is-drag-over-canvas.utils';
+export * from './map-colors-to-recipients';
+export * from './pdfjs-init';
+export * from './generate-e-sign-path';

package/src/utils/is-drag-over-canvas.utils.ts

@@ -0,0 +1,35 @@
+import { DragEvent, RefObject } from 'react';
+
+/**
+ * Checks if a drag event is over any PDF canvas within the wrapper
+ * @param e - The drag event
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns true if the drag is over a canvas, false otherwise
+ */
+export const isDragOverCanvas = (
+    e: DragEvent<HTMLDivElement>,
+    pdfWrapperRef: RefObject<HTMLDivElement>,
+): boolean => {
+    if (!pdfWrapperRef.current) {
+        return false;
+    }
+
+    const pageElements = pdfWrapperRef.current.querySelectorAll('[data-page-number]');
+
+    for (const pageElement of pageElements) {
+        const canvas = pageElement.querySelector('canvas');
+        if (canvas) {
+            const canvasRect = canvas.getBoundingClientRect();
+            if (
+                e.clientX >= canvasRect.left &&
+                e.clientX <= canvasRect.right &&
+                e.clientY >= canvasRect.top &&
+                e.clientY <= canvasRect.bottom
+            ) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+};

package/src/utils/map-colors-to-recipients.ts

@@ -0,0 +1,37 @@
+import { RecipientInfo } from '../components/pdf-editor';
+
+const colors = [
+    '#1F77B41f',
+    '#FF7F0E1f',
+    '#2CA02C1f',
+    '#9467BD1f',
+    '#8C564B1f',
+    '#E377C21f',
+    '#7F7F7F1f',
+    '#BCBD221f',
+    '#17BECF1f',
+    '#D627281f',
+    '#98DF8A1f',
+    '#FFBB781f',
+    '#C5B0D51f',
+    '#C49C941f',
+    '#F7B6D21f',
+    '#C7C7C71f',
+    '#DBDB8D1f',
+    '#9EDAE51f',
+    '#E5E5E51f',
+    '#393B791f',
+    '#5254A31f',
+    '#6B6EBD1f',
+    '#9C9EDA1f',
+];
+
+export const mapColorsToRecipients = (recipients?: RecipientInfo[]): Record<string, string> => {
+    if (!recipients) {
+        return {};
+    }
+    return recipients.reduce<Record<string, string>>((acc, curr, i) => {
+        acc[curr.name] = colors[i];
+        return acc;
+    }, {});
+};

package/src/utils/pdfjs-init.ts

@@ -0,0 +1,27 @@
+/*
+ * Initialize PDF.js worker - centralized configuration
+ * This ensures the worker is configured once and can be imported by any component
+ */
+import * as pdfjsLib from 'pdfjs-dist';
+import workerSrc from 'pdfjs-dist/build/pdf.worker.min.js?url';
+
+let isInitialized = false;
+
+/**
+ * Initializes PDF.js worker if not already initialized
+ * Safe to call multiple times - will only initialize once
+ */
+export const initializePdfJsWorker = (): void => {
+    if (isInitialized || typeof window === 'undefined') {
+        return;
+    }
+
+    try {
+        pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+        isInitialized = true;
+    } catch (error) {
+        throw new Error('Failed to initialize PDF.js worker:' + (error as Error).message);
+    }
+};
+
+initializePdfJsWorker();

package/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/*
+ * Declare module for Vite's ?url import syntax
+ * This tells TypeScript that imports ending with ?url return a string URL
+ */
+declare module '*?url' {
+    const src: string;
+    // eslint-disable-next-line import/no-default-export
+    export default src;
+}
+
+// More specific declaration for pdfjs-dist worker
+declare module 'pdfjs-dist/build/pdf.worker.min.js?url' {
+    const src: string;
+    // eslint-disable-next-line import/no-default-export
+    export default src;
+}