@servicetitan/dte-pdf-editor 1.91.0 → 1.92.0

package/src/hooks/useZoom.ts

@@ -1,25 +1,37 @@
 import { useCallback, useState } from 'react';
-import { ZOOM_DEFAULT, ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from '../constants';
+import { ZOOM_DEFAULT, ZOOM_STEP } from '../constants';
+import { clampZoom } from '../utils';
 
 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 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));
+    }, []);
 
-    return { zoom, zoomIn, zoomOut, resetZoom };
+    return { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut };
 };

package/src/interface/types.ts

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

package/src/styles/pdf-canvas.css

@@ -5,14 +5,8 @@
     margin-inline-end: auto;
 }
 
-.dte-pdf-canvas-controls {
-    z-index: 1;
-    position: sticky;
-    top: 0;
-    left: 0;
-    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-canvas-container {
+    touch-action: pan-x pan-y;
 }
 
 .dte-pdf-zoom-controls-value {
@@ -22,13 +16,95 @@
     user-select: none;
 }
 
-.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);
+.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: fixed;
+    z-index: 2;
+
+    &.--vertical {
+        flex-direction: column;
+    }
+
+    &.--right-center {
+        right: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    &.--right-bottom {
+        right: 24px;
+        bottom: 24px;
+    }
+}
+
+.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;
+    }
+}
+
+.dte-pdf-movable-next-button-wrapper {
+    top: 50px;
+    transform: translateX(-100%);
+    position: absolute;
+    z-index: 2;
+}
+
+@media (max-width: 1000px) {
+    .dte-pdf-movable-next-button-wrapper {
+        display: none;
+    }
+
+    .dte-pdf-zoom-controls {
+        display: none !important;
+    }
 }
 
-.dte-pdf-field-view.--eSign:focus {
-    outline: 2px solid var(--border-color-active);
+@media (min-width: 1001px) {
+    .dte-pdf-editor-theme > .dte-pdf-canvas-controls {
+        display: none;
+    }
 }

package/src/styles/pdf-editor.css

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

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

@@ -5,10 +5,10 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
-}
 
-.dte-pdf-field-overlay.--view-mode {
-    pointer-events: auto;
+    &.--view-mode {
+        pointer-events: auto;
+    }
 }
 
 /* Editor-only chrome. Layout metrics come from getFieldBoundsStyle. */
@@ -17,33 +17,34 @@
     outline-offset: 0;
     border: none;
     pointer-events: auto;
-}
+    border-radius: 4px;
 
-.dte-pdf-field-editor.fillable-radio.--edit-mode {
-    overflow: unset !important;
-}
+    &.--edit-mode {
+        overflow: unset !important;
+    }
 
-.dte-pdf-field-editor.--selected {
-    outline: 2px solid var(--border-color-active);
-    cursor: move;
-}
+    &.--selected {
+        outline: 2px solid var(--border-color-active);
+        cursor: move;
+    }
 
-.dte-pdf-field-editor.--unselected {
-    cursor: pointer;
-}
+    &.--unselected {
+        cursor: pointer;
+    }
 
-.dte-pdf-field-editor.--dragging {
-    opacity: 0.5;
-}
+    &.--dragging {
+        opacity: 0.5;
+    }
 
-.dte-pdf-field-editor.--colored:not(.--selected) {
-    outline-color: var(--border-color-active) !important;
-    box-shadow: 0 0 2px 0 var(--border-color-active);
-}
+    &.--colored:not(.--selected) {
+        outline-color: var(--border-color-active) !important;
+        box-shadow: 0 0 2px 0 var(--border-color-active);
+    }
 
-.dte-pdf-field-editor.--error {
-    outline-color: var(--danger) !important;
-    box-shadow: 0 0 4px 0 var(--danger);
+    &.--error {
+        outline-color: var(--danger) !important;
+        box-shadow: 0 0 4px 0 var(--danger);
+    }
 }
 
 .dte-pdf-field-error-message {
@@ -52,7 +53,26 @@
     position: absolute;
     margin-top: var(--spacing-half, 4px);
     color: var(--danger);
-    font-size: var(--typescale-1, 12px);
+    font-size: var(--typescale-small, 10px);
+}
+
+.dte-pdf-field-label {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-half, 4px);
+    background-color: var(--color-neutral-0, #ffffff);
+    border-radius: 4px;
+    padding: 1px var(--spacing-half, 4px);
+    top: -10px;
+    left: 3px;
+    font-size: var(--typescale-small, 10px);
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--menu-active-color, #2270ee);
+    border-width: 1px;
+    border-style: solid;
+    border-color: inherit;
 }
 
 .dte-pdf-field-resize-handle {
@@ -65,10 +85,10 @@
     cursor: nwse-resize;
     z-index: 10;
     box-sizing: border-box;
-}
 
-.dte-pdf-field-resize-handle:hover {
-    border-color: var(--border-color-active);
+    &:hover {
+        border-color: var(--border-color-active);
+    }
 }
 
 .dte-add-field-button {
@@ -80,10 +100,10 @@
     padding: var(--spacing-0, 0);
     width: 20px;
     height: 20px;
-}
 
-.dte-pdf-field-editor:hover .dte-add-field-button {
-    display: block;
+    .dte-pdf-field-editor:hover & {
+        display: block;
+    }
 }
 
 .dte-pdf-field-view {
@@ -91,6 +111,17 @@
     outline: none;
     cursor: default;
     pointer-events: auto;
+
+    &.--fillable,
+    &.--eSign {
+        border-style: dashed;
+        border-width: 1px;
+        border-radius: 4px;
+
+        &:focus {
+            outline: 2px solid var(--border-color-active);
+        }
+    }
 }
 
 .dte-pdf-field-content {
@@ -99,15 +130,15 @@
     min-height: 0;
     overflow: hidden;
     line-height: 1;
-}
 
-.dte-pdf-field-content input[type='checkbox']:focus,
-.dte-pdf-field-content input[type='checkbox']:active,
-.dte-pdf-field-content input[type='radio']:active,
-.dte-pdf-field-content input[type='radio']:focus {
-    box-shadow:
-        0 0 0 2px var(--border-color-active, #2270ee) inset,
-        0 0 0 3px var(--color-neutral-0, #ffffff) inset;
+    input[type='checkbox']:focus,
+    input[type='checkbox']:active,
+    input[type='radio']:active,
+    input[type='radio']:focus {
+        box-shadow:
+            0 0 0 2px var(--border-color-active, #2270ee) inset,
+            0 0 0 3px var(--color-neutral-0, #ffffff) inset;
+    }
 }
 
 /*
@@ -150,37 +181,37 @@
     min-width: 0;
     min-height: 0;
     box-sizing: border-box;
-    background: inherit;
+    background: transparent;
     border: none;
     padding: var(--spacing-0);
     margin: var(--spacing-0);
     line-height: 1;
     font-size: inherit;
-}
 
-.dte-pdf-field-editor .dte-pdf-field-fillable {
-    pointer-events: none;
-}
+    &.dte-pdf-field-text--single-line {
+        white-space: nowrap;
+        overflow: hidden;
+    }
 
-.dte-pdf-field-view .dte-pdf-field-fillable {
-    pointer-events: auto;
-}
+    &.dte-pdf-field-text--multiline {
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+        overflow: hidden;
+        resize: none;
+    }
 
-.dte-pdf-field-fillable.dte-pdf-field-text--single-line {
-    white-space: nowrap;
-    overflow: hidden;
-}
+    &:focus {
+        outline: 2px solid var(--border-color-active, #2270ee);
+        outline-offset: 2px;
+    }
 
-.dte-pdf-field-fillable.dte-pdf-field-text--multiline {
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    overflow: hidden;
-    resize: none;
-}
+    .dte-pdf-field-editor & {
+        pointer-events: none;
+    }
 
-.dte-pdf-field-fillable:focus {
-    outline: 2px solid var(--border-color-active, #2270ee);
-    outline-offset: 2px;
+    .dte-pdf-field-view & {
+        pointer-events: auto;
+    }
 }
 
 .dte-pdf-field-generic-table {
@@ -189,27 +220,27 @@
     border-spacing: var(--spacing-0, 0);
     width: 100%;
     table-layout: fixed;
-}
 
-.dte-pdf-field-generic-table td {
-    border-top: 1px solid var(--border-color);
-    border-left: 1px solid var(--border-color);
-    padding-inline: var(--spacing-1, 8px);
-}
+    td {
+        border-top: 1px solid var(--border-color);
+        border-left: 1px solid var(--border-color);
+        padding-inline: var(--spacing-1, 8px);
+    }
 
-.dte-pdf-field-generic-table .dte-pdf-field-generic-table-header td {
-    background-color: var(--bg-color);
-    font-weight: bold;
-}
+    .dte-pdf-field-generic-table-header td {
+        background-color: var(--bg-color);
+        font-weight: bold;
+    }
 
-.dte-pdf-field-generic-table tr:not(.dte-pdf-field-generic-table-header) td {
-    background-color: var(--bg-color-light);
-}
+    tr:not(.dte-pdf-field-generic-table-header) td {
+        background-color: var(--bg-color-light);
+    }
 
-.dte-pdf-field-generic-table tr:last-child td {
-    border-bottom: 1px solid var(--border-color);
-}
+    tr:last-child td {
+        border-bottom: 1px solid var(--border-color);
+    }
 
-.dte-pdf-field-generic-table tr td:last-child {
-    border-right: 1px solid var(--border-color);
+    tr td:last-child {
+        border-right: 1px solid var(--border-color);
+    }
 }

package/src/styles/variables.css

@@ -6,6 +6,7 @@
     --menu-hover-color: var(--color-neutral-100, #606162);
 
     /* Typography */
+    --typescale-small: 10px;
     --typescale-0: var(--typescale-1, 12px);
     --typescale-1: var(--typescale-1, 14px);
 
@@ -20,6 +21,7 @@
     --radius-0: 0;
     --radius-1: 4px;
     --radius-2: 8px;
+    --radius-3: 16px;
 
     /* Colors - Neutral */
     --color-neutral-0: var(--color-neutral-0, #ffffff);
@@ -31,6 +33,7 @@
     --color-blue-100: var(--color-blue-100, #fafcff);
 
     /* Background colors */
+    --bg-color-highlited: var(--color-blue-400);
     --bg-color-light: var(--color-neutral-0, #ffffff);
     --bg-color-main: var(--color-neutral-20, #fafafa);
     --bg-color-secondary: var(--color-neutral-50, #eeeeee);

package/src/utils/field/__tests__/get-field-type-option.utils.test.ts

@@ -0,0 +1,53 @@
+import { E_SIGN_FIELD_TYPES, FILLABLE_FIELD_TYPES } from '../../../constants';
+import { ESignFieldType, FieldTypeEnum, type PdfField } from '../../../interface/types';
+import { getFieldTypeOption } from '../get-field-type-option.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldTypeOption', () => {
+    const subject = (field: Pick<PdfField, 'type' | 'subType'>) => getFieldTypeOption(field);
+
+    test.each(
+        [...FILLABLE_FIELD_TYPES, ...E_SIGN_FIELD_TYPES].filter(
+            option => option.subType !== 'checkbox' && option.subType !== 'radio',
+        ),
+    )('returns $label for $type $subType', option => {
+        expect(subject(buildField({ type: option.type, subType: option.subType }))).toBe(option);
+    });
+
+    test.each(['checkbox', 'radio'] as const)('returns undefined for fillable %s', subType => {
+        expect(subject(buildField({ type: FieldTypeEnum.fillable, subType }))).toBeUndefined();
+    });
+
+    test.each([
+        FieldTypeEnum.calculated,
+        FieldTypeEnum.generic,
+        FieldTypeEnum.dataModel,
+        FieldTypeEnum.forms,
+    ])('returns undefined for %s fields', type => {
+        const subType = type === FieldTypeEnum.generic ? 'text' : undefined;
+        expect(subject(buildField({ type, subType }))).toBeUndefined();
+    });
+
+    test('returns undefined for unknown e-sign subtype', () => {
+        expect(
+            subject(
+                buildField({
+                    type: FieldTypeEnum.eSign,
+                    subType: 'unknown' as ESignFieldType,
+                }),
+            ),
+        ).toBeUndefined();
+    });
+});

package/src/utils/field/get-field-type-option.utils.ts

@@ -0,0 +1,16 @@
+import { E_SIGN_FIELD_TYPES, FILLABLE_FIELD_TYPES } from '../../constants';
+import { type PdfField } from '../../interface/types';
+
+const HIDDEN_OVERLAY_LABEL_SUBTYPES = new Set(['checkbox', 'radio']);
+
+const FIELD_TYPE_OPTIONS = [...FILLABLE_FIELD_TYPES, ...E_SIGN_FIELD_TYPES];
+
+export const getFieldTypeOption = (field: Pick<PdfField, 'type' | 'subType'>) => {
+    if (field.subType && HIDDEN_OVERLAY_LABEL_SUBTYPES.has(field.subType)) {
+        return undefined;
+    }
+
+    return FIELD_TYPE_OPTIONS.find(
+        option => option.type === field.type && option.subType === field.subType,
+    );
+};

package/src/utils/field/get-navigable-fields.utils.ts

@@ -1,7 +1,7 @@
 import { type DataModelValues, FieldTypeEnum, PdfField } from '../../interface/types';
 import { evaluateDisplayCondition } from '../conditions';
 
-const navigableFields = [FieldTypeEnum.fillable, FieldTypeEnum.eSign];
+const navigableFields = [FieldTypeEnum.fillable];
 
 export const getNavigableFieldsUtils = (
     fields: PdfField[],

package/src/utils/field/index.ts

@@ -8,5 +8,6 @@ export * from './field-resize.utils';
 export * from './get-field-bounds-style.utils';
 export * from './get-field-font-size.utils';
 export * from './get-field-text-clip.utils';
+export * from './get-field-type-option.utils';
 export * from './get-field-typography.utils';
 export * from './get-navigable-fields.utils';

package/src/utils/pdf/__tests__/pinch-zoom.utils.test.ts

@@ -0,0 +1,58 @@
+import { ZOOM_MAX, ZOOM_MIN } from '../../../constants';
+import {
+    clampZoom,
+    getPinchZoomValue,
+    getTouchDistance,
+    getWheelZoomFactor,
+} from '../pinch-zoom.utils';
+
+describe('clampZoom', () => {
+    const subject = (value: number) => clampZoom(value);
+
+    test('returns the value when inside the range', () => {
+        expect(subject(1)).toBe(1);
+        expect(subject(1.25)).toBe(1.25);
+    });
+
+    test('clamps to the minimum and maximum', () => {
+        expect(subject(ZOOM_MIN - 0.5)).toBe(ZOOM_MIN);
+        expect(subject(ZOOM_MAX + 0.5)).toBe(ZOOM_MAX);
+    });
+});
+
+describe('getWheelZoomFactor', () => {
+    const subject = (deltaY: number) => getWheelZoomFactor(deltaY);
+
+    test('zooms out for a positive delta', () => {
+        expect(subject(20)).toBeLessThan(1);
+    });
+
+    test('zooms in for a negative delta', () => {
+        expect(subject(-20)).toBeGreaterThan(1);
+    });
+});
+
+describe('getTouchDistance', () => {
+    const subject = (
+        first: Pick<Touch, 'clientX' | 'clientY'>,
+        second: Pick<Touch, 'clientX' | 'clientY'>,
+    ) => getTouchDistance(first, second);
+
+    test('returns the distance between two points', () => {
+        expect(subject({ clientX: 0, clientY: 0 }, { clientX: 3, clientY: 4 })).toBe(5);
+    });
+});
+
+describe('getPinchZoomValue', () => {
+    const subject = (startZoom: number, startDistance: number, currentDistance: number) =>
+        getPinchZoomValue(startZoom, startDistance, currentDistance);
+
+    test('scales zoom by the pinch distance ratio', () => {
+        expect(subject(1, 100, 150)).toBe(1.5);
+        expect(subject(1, 100, 50)).toBe(0.5);
+    });
+
+    test('returns the start zoom when the start distance is invalid', () => {
+        expect(subject(1.2, 0, 80)).toBe(1.2);
+    });
+});

package/src/utils/pdf/index.ts

@@ -1,2 +1,3 @@
 export * from './pdf-rendering.utils';
+export * from './pinch-zoom.utils';
 export * from './unit-conversion.utils';

package/src/utils/pdf/pinch-zoom.utils.ts

@@ -0,0 +1,30 @@
+import { ZOOM_MAX, ZOOM_MIN } from '../../constants';
+
+export const WHEEL_ZOOM_SENSITIVITY = 0.01;
+
+export const clampZoom = (value: number) => {
+    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 100) / 100));
+};
+
+export const getWheelZoomFactor = (deltaY: number) => {
+    return Math.exp(-deltaY * WHEEL_ZOOM_SENSITIVITY);
+};
+
+export const getTouchDistance = (
+    first: Pick<Touch, 'clientX' | 'clientY'>,
+    second: Pick<Touch, 'clientX' | 'clientY'>,
+) => {
+    return Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY);
+};
+
+export const getPinchZoomValue = (
+    startZoom: number,
+    startDistance: number,
+    currentDistance: number,
+) => {
+    if (startDistance <= 0) {
+        return startZoom;
+    }
+
+    return startZoom * (currentDistance / startDistance);
+};