@servicetitan/dte-pdf-editor 1.92.4 → 1.93.0

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../interface/types';
 import {
     dateToUtcZero,
+    getDropdownFieldItems,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
@@ -31,11 +32,12 @@ interface FillableTextInputProps {
 }
 
 const fillableTextStyles = {
-    background: 'inherit',
+    background: 'transparent',
     width: '100%',
     height: '100%',
     border: 'none',
     fontSize: 'inherit',
+    color: 'inherit',
     boxSizing: 'border-box' as const,
     padding: 0,
     margin: 0,
@@ -96,8 +98,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
 }) => {
     const resolvedValue = data?.[field.path!];
     const isViewByCurrentRecipient = fillingBy?.includes(field.recipient!);
-    const isFillable =
-        viewMode === 'preview' ? true : viewMode === 'fill' ? false : isViewByCurrentRecipient;
+    const isFillable = viewMode === 'preview' ? true : isViewByCurrentRecipient;
 
     const isInputDisabled = !isFillable || !!readOnly;
 
@@ -208,6 +209,28 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
         );
     }
 
+    if (field.subType === 'dropdown') {
+        return (
+            <select
+                style={fillableTextStyles}
+                disabled={isInputDisabled}
+                id={field.path}
+                name={field.path}
+                value={resolvedValue ?? ''}
+                onChange={e => handleDataChange(e.target.value)}
+            >
+                <option value="" disabled hidden>
+                    {getFieldPlaceholderText(field) || 'Select...'}
+                </option>
+                {getDropdownFieldItems(field).map(item => (
+                    <option key={item.value} value={item.value}>
+                        {item.label}
+                    </option>
+                ))}
+            </select>
+        );
+    }
+
     const TextComponent = field.multiline ? FillableTextareaInput : FillableTextInput;
     return (
         <TextComponent

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

@@ -1,7 +1,7 @@
-import { Flex } from '@servicetitan/anvil2';
-import { FC, ReactNode, useMemo, useRef, useState } from 'react';
+import { Flex, Text } from '@servicetitan/anvil2';
+import { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { useZoom } from '../../hooks';
+import { usePinchZoom, useZoom } from '../../hooks';
 import {
     type DataChangePayload,
     type DataModelValues,
@@ -15,7 +15,11 @@ import {
     mapColorsToRecipients,
     sortFieldsByReadingOrder,
 } from '../../utils';
-import { CanvasControls } from '../pdf-canvas/canvas-controls';
+import {
+    FieldNavigationControls,
+    ZoomControls,
+    ZoomControlsProps,
+} from '../pdf-canvas/canvas-controls';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
 import { PdfViewCalculated } from './pdf-view-calculated';
 import { PdfViewDataModel } from './pdf-view-data-model';
@@ -30,6 +34,10 @@ export interface PdfViewProps {
     viewMode?: PdfViewMode;
     data?: DataModelValues;
     zoomable?: boolean;
+    zoomProps?: {
+        vertical: ZoomControlsProps['vertical'];
+        position: ZoomControlsProps['position'];
+    };
     enableInputNavigation?: boolean;
     pdfUrl: string;
     loading?: boolean;
@@ -74,14 +82,23 @@ export const PdfView: FC<PdfViewProps> = ({
     pdfUrl,
     recipients,
     viewMode,
+    zoomProps,
     zoomable = true,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
     const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
-    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
+    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
     const activeData = viewMode === 'preview' ? previewData : data;
 
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
+    const navControlsRef = useRef<HTMLDivElement>(null);
+    const contentContainerRef = useRef<HTMLDivElement>(null);
+    usePinchZoom(contentContainerRef, {
+        enabled: zoomable,
+        setZoomValue,
+        zoom,
+        zoomByFactor,
+    });
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -111,7 +128,6 @@ export const PdfView: FC<PdfViewProps> = ({
         [navigableFields],
     );
 
-    // -1 means no field has been navigated to yet, so the first "next" lands on index 0.
     const [currentFieldIndex, setCurrentFieldIndex] = useState(-1);
 
     const handleFieldOverlayFocus = (fieldId: string) => {
@@ -120,115 +136,168 @@ export const PdfView: FC<PdfViewProps> = ({
         }
     };
 
-    const handleFocusField = (fieldId: string) => {
+    const getFieldElement = (fieldId: string) => {
         const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
-        const fieldEl = root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`);
-        fieldEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        const focusableElement = fieldEl?.querySelector<HTMLElement>('input, textarea') ?? fieldEl;
-        focusableElement?.focus();
+        return root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`) ?? undefined;
+    };
+
+    useLayoutEffect(() => {
+        const field = navigableFields[currentFieldIndex];
+        const navControlsEl = navControlsRef.current;
+
+        if (!navControlsEl) {
+            return;
+        }
+
+        if (currentFieldIndex === -1) {
+            navControlsEl.style.top = `20px`;
+            return;
+        }
+        if (!field) {
+            return;
+        }
+
+        const fieldEl = getFieldElement(field.id);
+        if (!fieldEl) {
+            return;
+        }
+        const containerTop = contentContainerRef.current?.getBoundingClientRect().top ?? 0;
+        navControlsEl.style.top = `${fieldEl.getBoundingClientRect().top - containerTop}px`;
+    }, [currentFieldIndex, navigableFields]);
+
+    const handleFocusField = (fieldId: string) => {
+        const fieldEl = getFieldElement(fieldId);
+        if (fieldEl) {
+            fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            const focusableChild = fieldEl.querySelector<HTMLElement>('input, textarea');
+            (focusableChild ?? fieldEl)?.focus();
+        }
     };
 
     const goToField = (index: number) => {
-        let i = index;
-        if (i < 0) {
-            i = 0;
-        } else if (i >= navigableFields.length) {
-            i = navigableFields.length - 1;
+        const fieldIndex = index < 0 || index >= navigableFields.length ? -1 : index;
+        const field = navigableFields[fieldIndex];
+
+        setCurrentFieldIndex(fieldIndex);
+        if (field) {
+            handleFocusField(field.id);
         }
-        const field = navigableFields[i];
+    };
 
-        setCurrentFieldIndex(i);
-        handleFocusField(field.id);
+    const handleNextField = () => {
+        goToField(currentFieldIndex + 1);
     };
 
     const recipientsColors = mapColorsToRecipients(recipients);
-    const hasNavigableFields = navigableFields.length === 0;
+    const hasNavigableFields = navigableFields.length !== 0;
+    const shouldShowFieldNavigation = enableInputNavigation && hasNavigableFields;
+
     return (
         <Flex
-            flex={1}
-            className="dte-pdf-editor-theme dte-pdf-editor-content-container --view-mode"
             direction="column"
+            style={{ position: 'relative', minWidth: 0, height: '100%' }}
+            className="dte-pdf-editor-theme"
+            ref={contentContainerRef}
         >
-            {isPdfLoaded && (
-                <CanvasControls
+            {isPdfLoaded && shouldShowFieldNavigation && (
+                <div ref={navControlsRef} className="dte-pdf-movable-next-button-wrapper">
+                    <FieldNavigationControls
+                        isStarted={currentFieldIndex !== -1}
+                        onNextField={handleNextField}
+                    />
+                </div>
+            )}
+            {isPdfLoaded && zoomable && (
+                <ZoomControls
+                    {...zoomProps}
                     zoom={zoom}
                     onZoomIn={zoomIn}
                     onZoomOut={zoomOut}
-                    zoomable={zoomable}
                     onResetZoom={resetZoom}
-                    enableInputNavigation={enableInputNavigation}
-                    disabledPrev={hasNavigableFields}
-                    disabledNext={hasNavigableFields}
-                    disabledOnFirstField={hasNavigableFields}
-                    disabledOnLastField={hasNavigableFields}
-                    onPrevField={() => goToField(currentFieldIndex - 1)}
-                    onNextField={() => goToField(currentFieldIndex + 1)}
-                    onFirstField={() => goToField(0)}
-                    onLastField={() => goToField(navigableFields.length - 1)}
                 />
             )}
-            <div
-                ref={pdfWrapperRef}
-                className="dte-pdf-wrapper"
-                style={{ width: BASE_PAGE_WIDTH * zoom }}
+            {shouldShowFieldNavigation && (
+                <Flex
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={2}
+                    className="dte-pdf-canvas-controls"
+                >
+                    <Text style={{ color: '#ffffff' }}>Review and complete</Text>
+                    <FieldNavigationControls
+                        isStarted={currentFieldIndex !== -1}
+                        onNextField={handleNextField}
+                    />
+                </Flex>
+            )}
+            <Flex
+                flex={1}
+                className="dte-pdf-editor-content-container --view-mode"
+                direction="column"
             >
-                <PdfDocumentRenderer
-                    pdfUrl={pdfUrl}
-                    loading={loading}
-                    pageWidth={BASE_PAGE_WIDTH * zoom}
-                    errorPlaceholder={errorPlaceholder}
-                    loadingPlaceholder={loadingPlaceholder}
-                    onDocumentLoadSuccess={onDocumentLoadSuccess}
-                />
-                {isPdfLoaded && (
-                    <div className="dte-pdf-field-overlay --view-mode">
-                        {fields.map(field => (
-                            <PdfViewFieldContainer
-                                key={field.id}
-                                field={field}
-                                data={viewMode === 'preview' ? previewData : data}
-                                error={errors[field.path!] || ''}
-                                recipientsColors={recipientsColors}
-                                pdfWrapperRef={pdfWrapperRef}
-                                zoom={zoom}
-                                onFocus={handleFieldOverlayFocus}
-                            >
-                                {(field.type === FieldTypeEnum.dataModel ||
-                                    field.type === FieldTypeEnum.forms) && (
-                                    <PdfViewDataModel
-                                        field={field}
-                                        data={viewMode === 'preview' ? previewData : data}
-                                    />
-                                )}
-                                {field.type === FieldTypeEnum.eSign && (
-                                    <PdfViewESign field={field} />
-                                )}
-                                {field.type === FieldTypeEnum.calculated && (
-                                    <PdfViewCalculated
-                                        field={field}
-                                        data={viewMode === 'preview' ? previewData : data}
-                                        holidays={holidays}
-                                        viewMode={viewMode}
-                                    />
-                                )}
-                                {field.type === FieldTypeEnum.fillable && (
-                                    <PdfViewFillable
-                                        data={viewMode === 'preview' ? previewData : data}
-                                        field={field}
-                                        readOnly={makeFillableFieldsReadonly}
-                                        fillingBy={fillingBy}
-                                        viewMode={viewMode}
-                                        onDataChange={handleDataChange}
-                                    />
-                                )}
-                                {field.type === FieldTypeEnum.generic && (
-                                    <PdfViewGeneric field={field} />
-                                )}
-                            </PdfViewFieldContainer>
-                        ))}
-                    </div>
-                )}
-            </div>
+                <div
+                    ref={pdfWrapperRef}
+                    className="dte-pdf-wrapper"
+                    style={{ width: BASE_PAGE_WIDTH * zoom }}
+                >
+                    <PdfDocumentRenderer
+                        pdfUrl={pdfUrl}
+                        loading={loading}
+                        pageWidth={BASE_PAGE_WIDTH * zoom}
+                        errorPlaceholder={errorPlaceholder}
+                        loadingPlaceholder={loadingPlaceholder}
+                        onDocumentLoadSuccess={onDocumentLoadSuccess}
+                    />
+                    {isPdfLoaded && (
+                        <div className="dte-pdf-field-overlay --view-mode">
+                            {fields.map(field => (
+                                <PdfViewFieldContainer
+                                    key={field.id}
+                                    field={field}
+                                    data={viewMode === 'preview' ? previewData : data}
+                                    error={errors[field.path!] || errors[field.id] || ''}
+                                    recipientsColors={recipientsColors}
+                                    pdfWrapperRef={pdfWrapperRef}
+                                    zoom={zoom}
+                                    onFocus={handleFieldOverlayFocus}
+                                >
+                                    {(field.type === FieldTypeEnum.dataModel ||
+                                        field.type === FieldTypeEnum.forms) && (
+                                        <PdfViewDataModel
+                                            field={field}
+                                            data={viewMode === 'preview' ? previewData : data}
+                                        />
+                                    )}
+                                    {field.type === FieldTypeEnum.eSign && (
+                                        <PdfViewESign field={field} />
+                                    )}
+                                    {field.type === FieldTypeEnum.calculated && (
+                                        <PdfViewCalculated
+                                            field={field}
+                                            data={viewMode === 'preview' ? previewData : data}
+                                            holidays={holidays}
+                                            viewMode={viewMode}
+                                        />
+                                    )}
+                                    {field.type === FieldTypeEnum.fillable && (
+                                        <PdfViewFillable
+                                            data={viewMode === 'preview' ? previewData : data}
+                                            field={field}
+                                            readOnly={makeFillableFieldsReadonly}
+                                            fillingBy={fillingBy}
+                                            viewMode={viewMode}
+                                            onDataChange={handleDataChange}
+                                        />
+                                    )}
+                                    {field.type === FieldTypeEnum.generic && (
+                                        <PdfViewGeneric field={field} />
+                                    )}
+                                </PdfViewFieldContainer>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </Flex>
         </Flex>
     );
 };

package/src/constants/field.constants.ts

@@ -1,3 +1,18 @@
+import NumbersIcon from '@servicetitan/anvil2/assets/icons/material/round/123.svg';
+import AbcIcon from '@servicetitan/anvil2/assets/icons/material/round/abc.svg';
+import ArrowDropDownCircleIcon from '@servicetitan/anvil2/assets/icons/material/round/arrow_drop_down_circle.svg';
+import BadgeIcon from '@servicetitan/anvil2/assets/icons/material/round/badge.svg';
+import CalculateIcon from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
+import CalendarMonthIcon from '@servicetitan/anvil2/assets/icons/material/round/calendar_month.svg';
+import CheckboxIcon from '@servicetitan/anvil2/assets/icons/material/round/check_box.svg';
+import EventAvailableIcon from '@servicetitan/anvil2/assets/icons/material/round/event_available.svg';
+import GestureIcon from '@servicetitan/anvil2/assets/icons/material/round/gesture.svg';
+import RadioIcon from '@servicetitan/anvil2/assets/icons/material/round/radio_button_checked.svg';
+import ShortTextIcon from '@servicetitan/anvil2/assets/icons/material/round/short_text.svg';
+import TableChartIcon from '@servicetitan/anvil2/assets/icons/material/round/table_chart.svg';
+import TextIcon from '@servicetitan/anvil2/assets/icons/material/round/text_fields.svg';
+import IconAppointmentsIcon from '@servicetitan/anvil2/assets/icons/st/appointments.svg';
+
 import {
     type CalculatedFormatForDate,
     type CalculatedFormatForNumber,
@@ -32,10 +47,13 @@ export const FIELD_FONT_SIZE_OPTIONS = Array.from({ length: 17 }, (_, index) =>
 export const FILLABLE_FIELD_DEFAULT_SIZES = {
     text: { width: 200, height: 25 },
     date: { width: 200, height: 25 },
+    dropdown: { width: 200, height: 25 },
     radio: { width: 20, height: 20 },
     checkbox: { width: 20, height: 20 },
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
+export const DROPDOWN_FIELD_MAX_ITEMS = 50;
+
 export const GENERIC_FIELD_TABLE_ROW_HEIGHT = 40;
 
 export const GENERIC_FIELD_DEFAULT_SIZES = {
@@ -44,11 +62,17 @@ export const GENERIC_FIELD_DEFAULT_SIZES = {
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
 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' },
+    { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text', icon: ShortTextIcon },
+    { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number', icon: NumbersIcon },
+    { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date', icon: CalendarMonthIcon },
+    { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox', icon: CheckboxIcon },
+    { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio', icon: RadioIcon },
+    {
+        label: 'Dropdown',
+        type: FieldTypeEnum.fillable,
+        subType: 'dropdown',
+        icon: ArrowDropDownCircleIcon,
+    },
 ];
 
 export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
@@ -56,26 +80,31 @@ export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
         label: 'Signature',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.signature,
+        icon: GestureIcon,
     },
     {
         label: 'Initials',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.initials,
+        icon: AbcIcon,
     },
     {
         label: 'Date Signed',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.dateSigned,
+        icon: EventAvailableIcon,
     },
     {
-        label: 'Date Signed Offset',
+        label: 'Calculated Singing Date',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.dateSignedOffset,
+        icon: IconAppointmentsIcon,
     },
     {
         label: 'Full Name',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.fullName,
+        icon: BadgeIcon,
     },
 ];
 
@@ -83,6 +112,7 @@ export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [
     {
         label: 'Calculated Field',
         type: FieldTypeEnum.calculated,
+        icon: CalculateIcon,
     },
 ];
 
@@ -91,11 +121,13 @@ export const GENERIC_FIELD_TYPES: FieldTypeOption[] = [
         label: 'Text',
         type: FieldTypeEnum.generic,
         subType: 'text',
+        icon: TextIcon,
     },
     {
         label: 'Table',
         type: FieldTypeEnum.generic,
         subType: 'table',
+        icon: TableChartIcon,
     },
 ];
 

package/src/hooks/index.ts

@@ -6,5 +6,6 @@ export * from './useFormulaEditor';
 export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';
 export * from './usePdfFieldSelection';
+export * from './usePinchZoom';
 export * from './useToggle';
 export * from './useZoom';

package/src/hooks/usePdfFieldDnD.ts

@@ -61,12 +61,18 @@ const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField
             ...base,
             recipient: recipientName,
             required: false,
+            hideLabel: base.subType === 'radio' || base.subType === 'checkbox',
             path: generateFillablePath(recipientName, uuidv4()),
             ...(base.subType === 'radio'
                 ? {
                       groupName: `Radio Group ${uuidv4()}`,
                   }
                 : {}),
+            ...(base.subType === 'dropdown'
+                ? {
+                      dropdownItems: [{ value: '', label: '' }],
+                  }
+                : {}),
             ...(defaultSize && {
                 width: defaultSize.width,
                 height: defaultSize.height,

package/src/hooks/usePdfFieldSelection.ts

@@ -28,9 +28,15 @@ export const usePdfFieldSelection = (
 
     const updateMatchingFields = (
         predicate: (field: PdfField) => boolean,
-        updates: Partial<PdfField>,
+        updates: Partial<PdfField> | ((field: PdfField) => Partial<PdfField>),
     ) => {
-        onFieldsChange(fields.map(f => (predicate(f) ? { ...f, ...updates } : f)));
+        onFieldsChange(
+            fields.map(f =>
+                predicate(f)
+                    ? { ...f, ...(typeof updates === 'function' ? updates(f) : updates) }
+                    : f,
+            ),
+        );
     };
 
     const deleteSelectedField = () => {

package/src/hooks/usePinchZoom.ts

@@ -0,0 +1,86 @@
+import { RefObject, useEffect, useRef } from 'react';
+import {
+    clampZoom,
+    getPinchZoomValue,
+    getTouchDistance,
+    getWheelZoomFactor,
+} from '../utils';
+
+interface UsePinchZoomOptions {
+    enabled: boolean;
+    zoom: number;
+    setZoomValue(value: number): void;
+    zoomByFactor(factor: number): void;
+}
+
+/**
+ * Trackpad pinch (wheel + ctrlKey) and two-finger mobile pinch on `containerRef`.
+ * Regular two-finger trackpad scroll is left alone so the page can still pan.
+ */
+export const usePinchZoom = (
+    containerRef: RefObject<HTMLElement | null>,
+    { enabled, setZoomValue, zoom, zoomByFactor }: UsePinchZoomOptions,
+) => {
+    const zoomRef = useRef(zoom);
+    zoomRef.current = zoom;
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !enabled) {
+            return;
+        }
+
+        let pinchStartDistance = 0;
+        let pinchStartZoom = zoomRef.current;
+
+        const handleWheel = (event: WheelEvent) => {
+            if (!event.ctrlKey) {
+                return;
+            }
+
+            event.preventDefault();
+            zoomByFactor(getWheelZoomFactor(event.deltaY));
+        };
+
+        const handleTouchStart = (event: TouchEvent) => {
+            if (event.touches.length !== 2) {
+                return;
+            }
+
+            pinchStartDistance = getTouchDistance(event.touches[0], event.touches[1]);
+            pinchStartZoom = zoomRef.current;
+        };
+
+        const handleTouchMove = (event: TouchEvent) => {
+            if (event.touches.length !== 2 || pinchStartDistance <= 0) {
+                return;
+            }
+
+            event.preventDefault();
+            const currentDistance = getTouchDistance(event.touches[0], event.touches[1]);
+            setZoomValue(
+                clampZoom(getPinchZoomValue(pinchStartZoom, pinchStartDistance, currentDistance)),
+            );
+        };
+
+        const handleTouchEnd = (event: TouchEvent) => {
+            if (event.touches.length < 2) {
+                pinchStartDistance = 0;
+            }
+        };
+
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd);
+        container.addEventListener('touchcancel', handleTouchEnd);
+
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchEnd);
+        };
+    }, [containerRef, enabled, setZoomValue, zoomByFactor]);
+};