@servicetitan/dte-pdf-editor 1.0.0

package/src/hooks/useFieldResize.ts

@@ -0,0 +1,95 @@
+import { MouseEvent, RefObject, useEffect, useRef, useState } from 'react';
+import { PdfField } from '../interface/pdf-editor';
+import { handleFieldResize, handleFieldResizeStart } from '../utils';
+
+interface UseFieldResizeOptions {
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    onFieldResize: (
+        fieldId: string,
+        newWidth: number,
+        newHeight: number,
+        pageNumber: number,
+    ) => void;
+}
+
+interface UseFieldResizeReturn {
+    isResizing: boolean;
+    handleResizeStart: (e: MouseEvent<HTMLDivElement>, field: PdfField) => void;
+}
+
+/**
+ * Custom hook for handling field resize operations
+ * Manages resize state and coordinates field resizing with proper cleanup
+ */
+export const useFieldResize = ({
+    onFieldResize,
+    pdfWrapperRef,
+}: UseFieldResizeOptions): UseFieldResizeReturn => {
+    const resizeStartDataRef = useRef<{
+        field: PdfField;
+        startX: number;
+        startY: number;
+        startWidth: number;
+        startHeight: number;
+        page: number;
+    } | null>(null);
+    const onFieldResizeRef = useRef(onFieldResize);
+    const [isResizing, setIsResizing] = useState(false);
+
+    useEffect(() => {
+        onFieldResizeRef.current = onFieldResize;
+    }, [onFieldResize]);
+
+    useEffect(() => {
+        if (!isResizing) {
+            return;
+        }
+
+        const abortController = new AbortController();
+        const { signal } = abortController;
+
+        const handleMouseMove = (e: globalThis.MouseEvent) => {
+            if (!resizeStartDataRef.current || signal.aborted) {
+                return;
+            }
+
+            const { field, ...resizeStartData } = resizeStartDataRef.current;
+            handleFieldResize(e, field, resizeStartData, pdfWrapperRef, onFieldResizeRef.current);
+        };
+
+        const handleMouseUp = () => {
+            if (signal.aborted) {
+                return;
+            }
+            resizeStartDataRef.current = null;
+            setIsResizing(false);
+            abortController.abort();
+        };
+
+        document.addEventListener('mousemove', handleMouseMove, { signal });
+        document.addEventListener('mouseup', handleMouseUp, { signal });
+
+        return () => {
+            abortController.abort();
+        };
+    }, [isResizing, pdfWrapperRef]);
+
+    const handleResizeStart = (e: MouseEvent<HTMLDivElement>, field: PdfField) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const resizeStartData = handleFieldResizeStart(e, field, pdfWrapperRef);
+        if (resizeStartData) {
+            resizeStartDataRef.current = {
+                field,
+                ...resizeStartData,
+            };
+            setIsResizing(true);
+        }
+    };
+
+    return {
+        isResizing,
+        handleResizeStart,
+    };
+};

package/src/hooks/usePdfDocumentRenderer.ts

@@ -0,0 +1,21 @@
+import { useMemo, useState } from 'react';
+
+interface UsePdfDocumentRendererReturn {
+    pages: number[];
+    handleDocumentLoadSuccess: (data: { numPages: number }) => void;
+}
+
+export const usePdfDocumentRenderer = (): UsePdfDocumentRendererReturn => {
+    const [numPages, setNumPages] = useState<number>(0);
+
+    const handleDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+        setNumPages(numPages);
+    };
+
+    const pages = useMemo(() => Array.from({ length: numPages }, (_, i) => i + 1), [numPages]);
+
+    return {
+        pages,
+        handleDocumentLoadSuccess,
+    };
+};

package/src/index.ts

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

package/src/interface/pdf-editor.ts

@@ -0,0 +1,74 @@
+export enum FieldTypeEnum {
+    dataModel = 'data-model',
+    eSign = 'e-sign',
+    fillable = 'fillable',
+}
+
+export enum ESignFieldType {
+    signature = 'signature',
+    initials = 'initials',
+    dateSigned = 'dateSigned',
+    fullName = 'fullName',
+}
+
+export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'e-sign';
+
+export interface PdfField {
+    id: string;
+    type: FieldTypeEnum;
+    subType?: FillableFieldType | ESignFieldType;
+    x: number;
+    y: number;
+    page: number;
+    label: string;
+    width: number;
+    height: number;
+    required?: boolean;
+    path?: string;
+    recipient?: string;
+}
+
+export interface FieldTypeOption {
+    label: string;
+    type: FieldTypeEnum;
+    subType?: FillableFieldType | ESignFieldType;
+    path?: string;
+}
+
+export interface DataModelFieldGroup {
+    groupName: string;
+    fields: FieldTypeOption[];
+}
+
+export interface SchemaFieldBaseOptions {
+    placeholder?: any;
+    description?: any;
+    sampleData?: any;
+    showInEditor?: boolean;
+    isHighlighted?: boolean;
+}
+
+interface SchemaNodeProps {
+    title?: string;
+    options?: SchemaFieldBaseOptions;
+}
+
+export interface SchemaObject extends SchemaNodeProps {
+    type: 'object';
+    properties: Record<string, SchemaNode>;
+}
+
+export type SchemaNode = SchemaObject | SchemaArray | SchemaSimple;
+
+export interface SchemaArray extends SchemaNodeProps {
+    type: 'array';
+    items: SchemaNode;
+}
+export type SchemaNodeStringSubTypes = 'string' | 'text' | 'html' | 'image';
+
+export interface SchemaSimpleString extends SchemaNodeProps {
+    type: 'string';
+    subType?: SchemaNodeStringSubTypes;
+}
+
+export type SchemaSimple = SchemaSimpleString;

package/src/styles/field-config-panel-overlay.css

@@ -0,0 +1,33 @@
+@keyframes dte-slide-in-left {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+.dte-field-config-panel-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-right: 1px solid var(--border-color);
+    background-color: var(--white);
+    z-index: 1000;
+    overflow-y: auto;
+    animation: dte-slide-in-left 0.3s ease-out;
+    display: flex;
+    flex-direction: column;
+}
+
+.dte-field-config-panel-header {
+    padding: var(--spacing-2);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dte-field-config-panel-content {
+    padding: var(--spacing-2);
+    flex: 1;
+}

package/src/styles/field-sidebar.css

@@ -0,0 +1,31 @@
+.dte-field-sidebar-container {
+    position: relative;
+}
+
+.dte-pdf-editor .dte-field-sidebar-menu {
+    width: 85px;
+    padding: var(--spacing-2) var(--spacing-half);
+}
+
+.dte-field-sidebar-menu-item {
+    cursor: pointer;
+}
+
+.dte-field-sidebar-menu-item-text {
+    text-align: center;
+}
+
+.dte-field-sidebar-content {
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    padding: var(--spacing-2);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    width: 305px;
+}
+
+.dte-field-sidebar-search {
+    margin-top: 18px;
+}

package/src/styles/field-type-list.css

@@ -0,0 +1,8 @@
+.dte-field-type-group {
+    margin-top: 0.25rem;
+}
+
+.dte-field-type-group-header {
+    cursor: pointer;
+    user-select: none;
+}

package/src/styles/field-type.css

@@ -0,0 +1,10 @@
+.dte-field-type-item {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 12px;
+    background-color: var(--color-neutral-0);
+    border-radius: 0.375rem;
+    cursor: grab;
+    user-select: none;
+}

package/src/styles/generic.css

@@ -0,0 +1,3 @@
+.full-width {
+    width: 100%;
+}

package/src/styles/index.css

@@ -0,0 +1,10 @@
+@import './variables.css';
+@import './generic.css';
+@import './pdf-canvas.css';
+@import './field-sidebar.css';
+@import './pdf-field-overlay.css';
+@import './pdf-editor.css';
+@import './field-type-list.css';
+@import './field-config-panel-overlay.css';
+@import './field-type.css';
+@import './pdf-document-renderer.css';

package/src/styles/pdf-canvas.css

@@ -0,0 +1,9 @@
+.dte-pdf-canvas-container {
+    overflow: auto;
+    position: relative;
+}
+
+.dte-pdf-wrapper {
+    position: relative;
+    width: 100%;
+}

package/src/styles/pdf-document-renderer.css

@@ -0,0 +1,4 @@
+.dte-pdf-document-renderer-page {
+    margin-bottom: 20px;
+    position: relative;
+}

package/src/styles/pdf-editor.css

@@ -0,0 +1,14 @@
+.dte-pdf-editor {
+    max-width: 100%;
+    border: 1px solid var(--border-color);
+}
+
+.dte-pdf-editor-sidebar-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.dte-pdf-editor-content-container {
+    max-width: 100%;
+    overflow: auto;
+}

package/src/styles/pdf-field-overlay.css

@@ -0,0 +1,54 @@
+.dte-pdf-field-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.dte-pdf-field {
+    position: absolute;
+    border: 1px dashed #999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--typescale-1, 14px);
+    padding: var(--spacing-half, 4px);
+    box-sizing: border-box;
+    pointer-events: auto;
+}
+
+.dte-pdf-field-selected {
+    border: 2px solid var(--border-color-active);
+    cursor: move;
+}
+
+.dte-pdf-field-unselected {
+    cursor: pointer;
+}
+
+.dte-pdf-field-dragging {
+    opacity: 0.5;
+}
+
+.dte-pdf-field-path {
+    margin-top: 2px;
+}
+
+.dte-pdf-field-resize-handle {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 12px;
+    height: 12px;
+    background-color: var(--border-color-active);
+    border: 1px solid var(--border-color-active);
+    cursor: nwse-resize;
+    z-index: 10;
+    box-sizing: border-box;
+}
+
+.dte-pdf-field-resize-handle:hover {
+    background-color: var(--border-color-active);
+}

package/src/styles/variables.css

@@ -0,0 +1,26 @@
+@import '@servicetitan/tokens/dist/tokens.css';
+
+.dte-pdf-editor {
+    /* Typography */
+    --typescale-1: var(--typescale-1, 14px);
+
+    /* Spacing */
+    --spacing-0: 0;
+    --spacing-half: 4px;
+    --spacing-2: 16px;
+
+    /* Colors - Neutral */
+    --color-neutral-0: var(--color-neutral-0, #ffffff);
+
+    /* Colors - Semantic */
+    --success: #28a745;
+    --danger: #dc3545;
+    --green: #28a745;
+    --red: #dc3545;
+    --white: var(--color-neutral-0, #ffffff);
+
+    /* Border colors*/
+    --border-color: #e0e0e0;
+    --border-color-hover: #bdbdbd;
+    --border-color-active: #007bff;
+}

package/src/utils/calculate-drop-coordinates.utils.ts

@@ -0,0 +1,68 @@
+import { DragEvent, RefObject } from 'react';
+import { FIELD_CONSTANTS } from '../constants';
+
+interface DropCoordinates {
+    x: number;
+    y: number;
+}
+
+/**
+ * Calculates field coordinates from a drop event on a PDF page
+ * @param e - The drag event
+ * @param pageNumber - The page number where the drop occurred
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns Drop coordinates (x, y) or null if a drop is invalid
+ */
+export const calculateDropCoordinates = (
+    e: DragEvent<HTMLDivElement>,
+    pageNumber: number,
+    pdfWrapperRef: RefObject<HTMLDivElement>,
+): DropCoordinates | null => {
+    if (!pdfWrapperRef.current) {
+        return null;
+    }
+
+    const pageElement = pdfWrapperRef.current.querySelector(`[data-page-number="${pageNumber}"]`);
+
+    if (!pageElement) {
+        return null;
+    }
+
+    const canvas = pageElement.querySelector('canvas');
+    if (!canvas) {
+        return null;
+    }
+
+    const canvasRect = canvas.getBoundingClientRect();
+    const pageRect = pageElement.getBoundingClientRect();
+    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
+
+    /*
+     * Strictly check if the drop is within the actual PDF canvas boundaries
+     * Only allow drops directly on the canvas, not on the page wrapper outside the canvas
+     */
+    const isWithinCanvas =
+        e.clientX >= canvasRect.left &&
+        e.clientX <= canvasRect.right &&
+        e.clientY >= canvasRect.top &&
+        e.clientY <= canvasRect.bottom;
+
+    if (!isWithinCanvas) {
+        return null;
+    }
+
+    /*
+     * Calculate coordinates relative to the page element (matching the overlay's coordinate system).
+     * This matches how pdf-field-overlay.tsx calculates positions: pagePos.left + field.x
+     */
+    const pagePosLeft = pageRect.left - wrapperRect.left;
+    const pagePosTop = pageRect.top - wrapperRect.top;
+    const x = e.clientX - wrapperRect.left - pagePosLeft;
+    const y = e.clientY - wrapperRect.top - pagePosTop;
+
+    // Center the field on the drop point (half of width/height)
+    const fieldX = Math.max(0, x - FIELD_CONSTANTS.dropOffsetX);
+    const fieldY = Math.max(0, y - FIELD_CONSTANTS.dropOffsetY);
+
+    return { x: fieldX, y: fieldY };
+};

package/src/utils/extract-grouped-fields-from-data-model.utils.ts

@@ -0,0 +1,73 @@
+import {
+    DataModelFieldGroup,
+    FieldTypeEnum,
+    FieldTypeOption,
+    SchemaObject,
+} from '../interface/pdf-editor';
+
+/**
+ * Utility function to extract grouped fields from DataModel structure
+ * Filters out array types and only processes object properties, generating correct paths for data replacement
+ */
+export const extractGroupedFieldsFromDataModel = (
+    dataModel: SchemaObject,
+): DataModelFieldGroup[] => {
+    const groups: DataModelFieldGroup[] = [];
+
+    if (!dataModel?.properties) {
+        return groups;
+    }
+
+    Object.keys(dataModel.properties).forEach(key => {
+        const property = dataModel.properties[key];
+
+        if (property.type === 'object' && property.properties) {
+            const fields: FieldTypeOption[] = [];
+            extractFieldsRecursive(property.properties, key, fields, key);
+
+            if (fields.length > 0) {
+                groups.push({
+                    groupName: property.title ?? key,
+                    fields,
+                });
+            }
+        } else if (property.type === 'array' && property.items) {
+            // Skip array types - filter them out from the data model
+        }
+    });
+
+    return groups;
+};
+
+// Recursive function to extract fields from nested structures
+const extractFieldsRecursive = (
+    properties: any,
+    basePath: string,
+    fields: FieldTypeOption[],
+    groupName: string,
+): void => {
+    Object.keys(properties).forEach(fieldKey => {
+        const fieldProperty = properties[fieldKey];
+        const currentPath = basePath.includes('[]')
+            ? `${basePath}.${fieldKey}`
+            : `${basePath}.${fieldKey}`;
+
+        if (
+            fieldProperty.type === 'string' ||
+            fieldProperty.type === 'number' ||
+            fieldProperty.type === 'boolean'
+        ) {
+            // Leaf property - add as a field
+            const label = fieldProperty.title ?? fieldKey;
+            fields.push({
+                label,
+                type: FieldTypeEnum.dataModel,
+                path: currentPath,
+            });
+        } else if (fieldProperty.type === 'object' && fieldProperty.properties) {
+            extractFieldsRecursive(fieldProperty.properties, currentPath, fields, groupName);
+        } else if (fieldProperty.type === 'array' && fieldProperty.items) {
+            // Skip array types - filter them out from the data model
+        }
+    });
+};

package/src/utils/generate-e-sign-path.ts

@@ -0,0 +1,5 @@
+import { ESignFieldType } from '../interface/pdf-editor';
+
+export const generateESignPath = (recipient: string, subType: ESignFieldType): string => {
+    return `esign_${recipient}_${subType}`;
+};

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

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

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

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