@servicetitan/dte-pdf-editor 1.16.0 → 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/pdf-fields-overlay/pdf-overlay-field.d.ts.map +1 -1
  2. package/dist/components/pdf-fields-overlay/pdf-overlay-field.js +9 -5
  3. package/dist/components/pdf-fields-overlay/pdf-overlay-field.js.map +1 -1
  4. package/dist/hooks/useFieldDrag.d.ts +9 -2
  5. package/dist/hooks/useFieldDrag.d.ts.map +1 -1
  6. package/dist/hooks/useFieldDrag.js +60 -8
  7. package/dist/hooks/useFieldDrag.js.map +1 -1
  8. package/dist/hooks/usePdfFieldDnD.d.ts.map +1 -1
  9. package/dist/hooks/usePdfFieldDnD.js +16 -3
  10. package/dist/hooks/usePdfFieldDnD.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx +8 -5
  13. package/src/hooks/useFieldDrag.ts +84 -8
  14. package/src/hooks/usePdfFieldDnD.ts +32 -14
  15. package/src/styles/pdf-field-overlay.css +1 -0
package/dist/components/pdf-fields-overlay/pdf-overlay-field.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pdf-overlay-field.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-fields-overlay/pdf-overlay-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOhE,UAAU,oBAAoB;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnD,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnF,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CACjG;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmDpD,CAAC"}
1
+ {"version":3,"file":"pdf-overlay-field.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-fields-overlay/pdf-overlay-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOhE,UAAU,oBAAoB;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnD,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnF,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CACjG;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsDpD,CAAC"}
package/dist/components/pdf-fields-overlay/pdf-overlay-field.js CHANGED
@@ -7,19 +7,23 @@ import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
7
7
  import { PdfOverlayFieldFillable } from './pdf-overlay-field-fillable';
8
8
  import { ResizeHandle } from './resize-handle';
9
9
  export const PdfOverlayField = ({ field, handleAddNewField, isSameGroup, isSelected, onFieldClick, onFieldMove, onFieldResize, pdfWrapperRef, recipientsColors, }) => {
10
- const { draggingFieldIdRef, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
10
+ var _a, _b, _c;
11
+ const { dragVisualPosition, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
11
12
  pdfWrapperRef,
12
13
  onFieldMove,
13
14
  });
14
- const isDragging = draggingFieldIdRef.current === field.id;
15
+ const isDragging = dragVisualPosition !== null;
15
16
  const { handleResizeStart } = useFieldResize({
16
17
  pdfWrapperRef,
17
18
  onFieldResize,
18
19
  });
19
- const pagePos = getPagePosition(field.page, pdfWrapperRef);
20
+ const page = (_a = dragVisualPosition === null || dragVisualPosition === void 0 ? void 0 : dragVisualPosition.page) !== null && _a !== void 0 ? _a : field.page;
21
+ const x = (_b = dragVisualPosition === null || dragVisualPosition === void 0 ? void 0 : dragVisualPosition.x) !== null && _b !== void 0 ? _b : field.x;
22
+ const y = (_c = dragVisualPosition === null || dragVisualPosition === void 0 ? void 0 : dragVisualPosition.y) !== null && _c !== void 0 ? _c : field.y;
23
+ const pagePos = getPagePosition(page, pdfWrapperRef);
20
24
  const style = {
21
- left: pagePos.left + field.x,
22
- top: pagePos.top + field.y,
25
+ left: pagePos.left + x,
26
+ top: pagePos.top + y,
23
27
  width: field.width,
24
28
  height: field.height,
25
29
  backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
package/dist/components/pdf-fields-overlay/pdf-overlay-field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pdf-overlay-field.js","sourceRoot":"","sources":["../../../src/components/pdf-fields-overlay/pdf-overlay-field.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAY,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAc/C,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACtD,KAAK,EACL,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,WAAW,EACX,aAAa,EACb,aAAa,EACb,gBAAgB,GACnB,EAAE,EAAE;IACD,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC;QACpF,aAAa;QACb,WAAW;KACd,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,KAAK,KAAK,CAAC,EAAE,CAAC;IAE3D,MAAM,EAAE,iBAAiB,EAAE,GAAG,cAAc,CAAC;QACzC,aAAa;QACb,aAAa;KAChB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IAE3D,MAAM,KAAK,GAAG;QACV,IAAI,EAAE,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;QAC5B,GAAG,EAAE,OAAO,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC;QAC1B,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,eAAe,EAAE,uBAAuB,CAAC,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC;KAC9E,CAAC;IAEF,OAAO,CACH,eACI,KAAK,EAAE,KAAK,CAAC,WAAW,EACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EACvC,SAAS,QACT,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,EACjC,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,iBAAiB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5I,KAAK,EAAE,KAAK,aAEX,KAAK,CAAC,IAAI,KAAK,aAAa,CAAC,KAAK,IAAI,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,GAAI,EAC5E,KAAK,CAAC,IAAI,KAAK,aAAa,CAAC,SAAS,IAAI,KAAC,wBAAwB,IAAC,KAAK,EAAE,KAAK,GAAI,EACpF,KAAK,CAAC,IAAI,KAAK,aAAa,CAAC,QAAQ,IAAI,CACtC,KAAC,uBAAuB,IAAC,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,CAClF,EACA,UAAU,IAAI,KAAC,YAAY,IAAC,iBAAiB,EAAE,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAC,GAAI,IAClF,CACT,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"pdf-overlay-field.js","sourceRoot":"","sources":["../../../src/components/pdf-fields-overlay/pdf-overlay-field.tsx"],"names":[],"mappings":"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"}
package/dist/hooks/useFieldDrag.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import { DragEvent, MutableRefObject, RefObject } from 'react';
2
2
  import { PdfField } from '../interface/types';
3
+ export interface DragVisualPosition {
4
+ x: number;
5
+ y: number;
6
+ page: number;
7
+ }
3
8
  interface UseFieldDragOptions {
4
9
  pdfWrapperRef: RefObject<HTMLDivElement>;
5
10
  onFieldMove: (fieldId: string, newX: number, newY: number, pageNumber: number) => void;
@@ -11,13 +16,15 @@ interface UseFieldDragReturn {
11
16
  page: number;
12
17
  } | null>;
13
18
  draggingFieldIdRef: MutableRefObject<string | null>;
19
+ dragVisualPosition: DragVisualPosition | null;
14
20
  handleDragStart: (e: DragEvent<HTMLDivElement>, field: PdfField) => void;
15
21
  handleDrag: (e: DragEvent<HTMLDivElement>, field: PdfField) => void;
16
22
  handleDragEnd: () => void;
17
23
  }
18
24
  /**
19
- * Custom hook for handling field drag operations
20
- * Manages drag state and coordinates field movement
25
+ * Custom hook for handling field drag operations.
26
+ * During drag, position is kept in local state (dragVisualPosition) so the rest of the tree
27
+ * (config panel, other fields) does not re-render. onFieldMove is called only once on drag end.
21
28
  */
22
29
  export declare const useFieldDrag: ({ onFieldMove, pdfWrapperRef, }: UseFieldDragOptions) => UseFieldDragReturn;
23
30
  export {};
package/dist/hooks/useFieldDrag.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFieldDrag.d.ts","sourceRoot":"","sources":["../../src/hooks/useFieldDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C,UAAU,mBAAmB;IACzB,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1F;AAED,UAAU,kBAAkB;IACxB,aAAa,EAAE,gBAAgB,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC/E,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpD,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpE,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,iCAG1B,mBAAmB,KAAG,kBA+BxB,CAAC"}
1
+ {"version":3,"file":"useFieldDrag.d.ts","sourceRoot":"","sources":["../../src/hooks/useFieldDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQ9C,MAAM,WAAW,kBAAkB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,mBAAmB;IACzB,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1F;AAED,UAAU,kBAAkB;IACxB,aAAa,EAAE,gBAAgB,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC/E,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpD,kBAAkB,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpE,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAQD;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,iCAG1B,mBAAmB,KAAG,kBAwFxB,CAAC"}
package/dist/hooks/useFieldDrag.js CHANGED
@@ -1,31 +1,83 @@
1
- import { useRef } from 'react';
2
- import { handleFieldDrag, handleFieldDragStart } from '../utils';
1
+ import { useCallback, useRef, useState } from 'react';
2
+ import { getPageDimensions, getPageNumberFromClientY, getPagePosition, handleFieldDragStart, } from '../utils';
3
3
  /**
4
- * Custom hook for handling field drag operations
5
- * Manages drag state and coordinates field movement
4
+ * Custom hook for handling field drag operations.
5
+ * During drag, position is kept in local state (dragVisualPosition) so the rest of the tree
6
+ * (config panel, other fields) does not re-render. onFieldMove is called only once on drag end.
6
7
  */
7
8
  export const useFieldDrag = ({ onFieldMove, pdfWrapperRef, }) => {
8
9
  const dragOffsetRef = useRef(null);
9
10
  const draggingFieldIdRef = useRef(null);
11
+ const pendingMoveRef = useRef(null);
12
+ const rafIdRef = useRef(null);
13
+ const fieldIdRef = useRef(null);
14
+ const [dragVisualPosition, setDragVisualPosition] = useState(null);
15
+ const flushPendingVisualUpdate = useCallback(() => {
16
+ if (pendingMoveRef.current) {
17
+ setDragVisualPosition({ ...pendingMoveRef.current });
18
+ pendingMoveRef.current = null;
19
+ }
20
+ rafIdRef.current = null;
21
+ }, []);
10
22
  const handleDragStart = (e, field) => {
11
23
  draggingFieldIdRef.current = field.id;
24
+ fieldIdRef.current = field.id;
25
+ pendingMoveRef.current = null;
26
+ if (rafIdRef.current !== null) {
27
+ cancelAnimationFrame(rafIdRef.current);
28
+ rafIdRef.current = null;
29
+ }
30
+ setDragVisualPosition({ x: field.x, y: field.y, page: field.page });
12
31
  const dragOffset = handleFieldDragStart(e, field, pdfWrapperRef);
13
32
  if (dragOffset) {
14
33
  dragOffsetRef.current = dragOffset;
15
34
  }
16
35
  };
17
36
  const handleDrag = (e, field) => {
18
- if (dragOffsetRef.current) {
19
- handleFieldDrag(e, field, dragOffsetRef.current, pdfWrapperRef, onFieldMove);
37
+ var _a;
38
+ if (!dragOffsetRef.current) {
39
+ return;
40
+ }
41
+ if (!pdfWrapperRef.current || e.clientX === 0 || e.clientY === 0) {
42
+ return;
20
43
  }
44
+ const currentPage = getPageNumberFromClientY(e.clientY, pdfWrapperRef);
45
+ const currentPagePos = getPagePosition(currentPage, pdfWrapperRef);
46
+ const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
47
+ const pageDimensions = getPageDimensions(currentPage, pdfWrapperRef);
48
+ const x = e.clientX - wrapperRect.left - currentPagePos.left - dragOffsetRef.current.x;
49
+ const y = e.clientY - wrapperRect.top - currentPagePos.top - dragOffsetRef.current.y;
50
+ const minX = 0;
51
+ const minY = 0;
52
+ const maxX = Math.max(0, pageDimensions.width - field.width);
53
+ const maxY = Math.max(0, pageDimensions.height - field.height);
54
+ const clampedX = Math.max(minX, Math.min(maxX, x));
55
+ const clampedY = Math.max(minY, Math.min(maxY, y));
56
+ pendingMoveRef.current = { x: clampedX, y: clampedY, page: currentPage };
57
+ (_a = rafIdRef.current) !== null && _a !== void 0 ? _a : (rafIdRef.current = requestAnimationFrame(flushPendingVisualUpdate));
21
58
  };
22
- const handleDragEnd = () => {
59
+ const handleDragEnd = useCallback(() => {
60
+ var _a;
61
+ if (rafIdRef.current !== null) {
62
+ cancelAnimationFrame(rafIdRef.current);
63
+ rafIdRef.current = null;
64
+ }
65
+ // Prefer pending (latest) position; fallback to current visual state
66
+ const final = (_a = pendingMoveRef.current) !== null && _a !== void 0 ? _a : dragVisualPosition;
67
+ const fid = fieldIdRef.current;
68
+ pendingMoveRef.current = null;
69
+ setDragVisualPosition(null);
23
70
  dragOffsetRef.current = null;
24
71
  draggingFieldIdRef.current = null;
25
- };
72
+ fieldIdRef.current = null;
73
+ if (fid && final) {
74
+ onFieldMove(fid, final.x, final.y, final.page);
75
+ }
76
+ }, [onFieldMove, dragVisualPosition]);
26
77
  return {
27
78
  dragOffsetRef,
28
79
  draggingFieldIdRef,
80
+ dragVisualPosition,
29
81
  handleDragStart,
30
82
  handleDrag,
31
83
  handleDragEnd,
package/dist/hooks/useFieldDrag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFieldDrag.js","sourceRoot":"","sources":["../../src/hooks/useFieldDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAejE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,aAAa,GACK,EAAsB,EAAE;IAC1C,MAAM,aAAa,GAAG,MAAM,CAAgD,IAAI,CAAC,CAAC;IAClF,MAAM,kBAAkB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAEvD,MAAM,eAAe,GAAG,CAAC,CAA4B,EAAE,KAAe,EAAE,EAAE;QACtE,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;QAEtC,MAAM,UAAU,GAAG,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;QACjE,IAAI,UAAU,EAAE,CAAC;YACb,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC;QACvC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAA4B,EAAE,KAAe,EAAE,EAAE;QACjE,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACxB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO;QACH,aAAa;QACb,kBAAkB;QAClB,eAAe;QACf,UAAU;QACV,aAAa;KAChB,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"useFieldDrag.js","sourceRoot":"","sources":["../../src/hooks/useFieldDrag.ts"],"names":[],"mappings":"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"}
package/dist/hooks/usePdfFieldDnD.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePdfFieldDnD.d.ts","sourceRoot":"","sources":["../../src/hooks/usePdfFieldDnD.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGvD,OAAO,EAGH,eAAe,EACf,QAAQ,EACR,aAAa,EAChB,MAAM,oBAAoB,CAAC;AAQ5B,UAAU,mBAAmB;IACzB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,GAAI,uEAM5B,mBAAmB;mCAGoB,eAAe;;wBAQ1B,SAAS,CAAC,cAAc,CAAC;oBAe7B,SAAS,CAAC,cAAc,CAAC,cAAc,MAAM;CA4DvE,CAAC"}
1
+ {"version":3,"file":"usePdfFieldDnD.d.ts","sourceRoot":"","sources":["../../src/hooks/usePdfFieldDnD.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAG5E,OAAO,EAGH,eAAe,EACf,QAAQ,EACR,aAAa,EAChB,MAAM,oBAAoB,CAAC;AAU5B,UAAU,mBAAmB;IACzB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,GAAI,uEAM5B,mBAAmB;mCAKoB,eAAe;;wBAU7C,SAAS,CAAC,cAAc,CAAC;oBA2BV,SAAS,CAAC,cAAc,CAAC,cAAc,MAAM;CA4DvE,CAAC"}
package/dist/hooks/usePdfFieldDnD.js CHANGED
@@ -1,30 +1,43 @@
1
- import { useState } from 'react';
1
+ import { useCallback, useRef, useState } from 'react';
2
2
  import { v4 as uuidv4 } from 'uuid';
3
3
  import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
4
4
  import { FieldTypeEnum, } from '../interface/types';
5
5
  import { calculateDropCoordinates, generateESignPath, generateFillablePath, isDragOverCanvas, } from '../utils';
6
+ const DRAG_OVER_THROTTLE_MS = 32; // ~30fps for drop effect updates
6
7
  export const usePdfFieldDnD = ({ fields, onFieldsChange, onSelectField, pdfWrapperRef, recipients, }) => {
7
8
  const [draggedFieldOption, setDraggedFieldOption] = useState(null);
9
+ const lastDragOverTimeRef = useRef(0);
10
+ const lastDropEffectRef = useRef('none');
8
11
  const handleDragStart = (fieldOption) => {
9
12
  setDraggedFieldOption(fieldOption);
13
+ lastDragOverTimeRef.current = 0;
10
14
  };
11
15
  const handleDragEnd = () => {
12
16
  setDraggedFieldOption(null);
13
17
  };
14
- const handleDragOver = (e) => {
18
+ const handleDragOver = useCallback((e) => {
15
19
  if (!draggedFieldOption) {
16
20
  e.dataTransfer.dropEffect = 'none';
17
21
  return;
18
22
  }
23
+ const now = Date.now();
24
+ if (now - lastDragOverTimeRef.current < DRAG_OVER_THROTTLE_MS) {
25
+ e.preventDefault();
26
+ e.dataTransfer.dropEffect = lastDropEffectRef.current;
27
+ return;
28
+ }
29
+ lastDragOverTimeRef.current = now;
19
30
  if (isDragOverCanvas(e, pdfWrapperRef)) {
20
31
  e.preventDefault();
21
32
  e.stopPropagation();
22
33
  e.dataTransfer.dropEffect = 'copy';
34
+ lastDropEffectRef.current = 'copy';
23
35
  }
24
36
  else {
25
37
  e.dataTransfer.dropEffect = 'none';
38
+ lastDropEffectRef.current = 'none';
26
39
  }
27
- };
40
+ }, [draggedFieldOption, pdfWrapperRef]);
28
41
  const handleDrop = (e, pageNumber) => {
29
42
  var _a, _b;
30
43
  e.preventDefault();
package/dist/hooks/usePdfFieldDnD.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePdfFieldDnD.js","sourceRoot":"","sources":["../../src/hooks/usePdfFieldDnD.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"usePdfFieldDnD.js","sourceRoot":"","sources":["../../src/hooks/usePdfFieldDnD.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAEH,aAAa,GAIhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACH,wBAAwB,EACxB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACnB,MAAM,UAAU,CAAC;AAElB,MAAM,qBAAqB,GAAG,EAAE,CAAC,CAAC,iCAAiC;AAUnE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC3B,MAAM,EACN,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,GACQ,EAAE,EAAE;IACtB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAyB,IAAI,CAAC,CAAC;IAC3F,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,iBAAiB,GAAG,MAAM,CAAkB,MAAM,CAAC,CAAC;IAE1D,MAAM,eAAe,GAAG,CAAC,WAA4B,EAAE,EAAE;QACrD,qBAAqB,CAAC,WAAW,CAAC,CAAC;QACnC,mBAAmB,CAAC,OAAO,GAAG,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,CAA4B,EAAE,EAAE;QAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACtB,CAAC,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;YACnC,OAAO;QACX,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,mBAAmB,CAAC,OAAO,GAAG,qBAAqB,EAAE,CAAC;YAC5D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,YAAY,CAAC,UAAU,GAAG,iBAAiB,CAAC,OAAO,CAAC;YACtD,OAAO;QACX,CAAC;QACD,mBAAmB,CAAC,OAAO,GAAG,GAAG,CAAC;QAElC,IAAI,gBAAgB,CAAC,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,CAAC,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;YACnC,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,CAAC,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;YACnC,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;QACvC,CAAC;IACL,CAAC,EACD,CAAC,kBAAkB,EAAE,aAAa,CAAC,CACtC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAA4B,EAAE,UAAkB,EAAE,EAAE;;QACpE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,gBAAgB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACnF,OAAO;QACX,CAAC;QAED,MAAM,WAAW,GAAG,wBAAwB,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;QAC3E,IAAI,CAAC,WAAW,EAAE,CAAC;YACf,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,OAAO;QACX,CAAC;QAED,MAAM,QAAQ,GAAa;YACvB,EAAE,EAAE,MAAM,EAAE;YACZ,IAAI,EAAE,kBAAkB,CAAC,IAAI;YAC7B,OAAO,EAAE,kBAAkB,CAAC,OAAO;YACnC,CAAC,EAAE,WAAW,CAAC,CAAC;YAChB,CAAC,EAAE,WAAW,CAAC,CAAC;YAChB,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,kBAAkB,CAAC,KAAK;YAC/B,KAAK,EAAE,eAAe,CAAC,YAAY;YACnC,MAAM,EAAE,eAAe,CAAC,aAAa;YACrC,IAAI,EAAE,kBAAkB,CAAC,IAAI;SAChC,CAAC;QAEF,MAAM,aAAa,GAAG,MAAA,MAAA,UAAU,CAAC,CAAC,CAAC,0CAAE,IAAI,mCAAI,EAAE,CAAC;QAEhD,IAAI,QAAQ,CAAC,IAAI,KAAK,aAAa,CAAC,KAAK,EAAE,CAAC;YACxC,QAAQ,CAAC,SAAS,GAAG,aAAa,CAAC;YACnC,QAAQ,CAAC,IAAI,GAAG,iBAAiB,CAC7B,aAAa,EACb,kBAAkB,CAAC,OAAyB,CAC/C,CAAC;QACN,CAAC;QAED,IAAI,QAAQ,CAAC,IAAI,KAAK,aAAa,CAAC,QAAQ,EAAE,CAAC;YAC3C,MAAM,WAAW,GAAG,4BAA4B,CAAC,QAAQ,CAAC,OAAQ,CAAC,CAAC;YACpE,QAAQ,CAAC,SAAS,GAAG,aAAa,CAAC;YACnC,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC1B,QAAQ,CAAC,IAAI,GAAG,oBAAoB,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;YAE9D,IAAI,WAAW,EAAE,CAAC;gBACd,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;gBACnC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;YACzC,CAAC;QACL,CAAC;QAED,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;QACtC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC3B,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO;QACH,eAAe;QACf,aAAa;QACb,cAAc;QACd,UAAU;KACb,CAAC;AACN,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/dte-pdf-editor",
3
- "version": "1.16.0",
3
+ "version": "1.17.0",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "typings": "./dist/index.d.ts",
package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx CHANGED
@@ -30,22 +30,25 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
30
30
  pdfWrapperRef,
31
31
  recipientsColors,
32
32
  }) => {
33
- const { draggingFieldIdRef, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
33
+ const { dragVisualPosition, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
34
34
  pdfWrapperRef,
35
35
  onFieldMove,
36
36
  });
37
- const isDragging = draggingFieldIdRef.current === field.id;
37
+ const isDragging = dragVisualPosition !== null;
38
38
 
39
39
  const { handleResizeStart } = useFieldResize({
40
40
  pdfWrapperRef,
41
41
  onFieldResize,
42
42
  });
43
43
 
44
- const pagePos = getPagePosition(field.page, pdfWrapperRef);
44
+ const page = dragVisualPosition?.page ?? field.page;
45
+ const x = dragVisualPosition?.x ?? field.x;
46
+ const y = dragVisualPosition?.y ?? field.y;
47
+ const pagePos = getPagePosition(page, pdfWrapperRef);
45
48
 
46
49
  const style = {
47
- left: pagePos.left + field.x,
48
- top: pagePos.top + field.y,
50
+ left: pagePos.left + x,
51
+ top: pagePos.top + y,
49
52
  width: field.width,
50
53
  height: field.height,
51
54
  backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
package/src/hooks/useFieldDrag.ts CHANGED
@@ -1,6 +1,17 @@
1
- import { DragEvent, MutableRefObject, RefObject, useRef } from 'react';
1
+ import { DragEvent, MutableRefObject, RefObject, useCallback, useRef, useState } from 'react';
2
2
  import { PdfField } from '../interface/types';
3
- import { handleFieldDrag, handleFieldDragStart } from '../utils';
3
+ import {
4
+ getPageDimensions,
5
+ getPageNumberFromClientY,
6
+ getPagePosition,
7
+ handleFieldDragStart,
8
+ } from '../utils';
9
+
10
+ export interface DragVisualPosition {
11
+ x: number;
12
+ y: number;
13
+ page: number;
14
+ }
4
15
 
5
16
  interface UseFieldDragOptions {
6
17
  pdfWrapperRef: RefObject<HTMLDivElement>;
@@ -10,14 +21,22 @@ interface UseFieldDragOptions {
10
21
  interface UseFieldDragReturn {
11
22
  dragOffsetRef: MutableRefObject<{ x: number; y: number; page: number } | null>;
12
23
  draggingFieldIdRef: MutableRefObject<string | null>;
24
+ dragVisualPosition: DragVisualPosition | null;
13
25
  handleDragStart: (e: DragEvent<HTMLDivElement>, field: PdfField) => void;
14
26
  handleDrag: (e: DragEvent<HTMLDivElement>, field: PdfField) => void;
15
27
  handleDragEnd: () => void;
16
28
  }
17
29
 
30
+ interface PendingMove {
31
+ x: number;
32
+ y: number;
33
+ page: number;
34
+ }
35
+
18
36
  /**
19
- * Custom hook for handling field drag operations
20
- * Manages drag state and coordinates field movement
37
+ * Custom hook for handling field drag operations.
38
+ * During drag, position is kept in local state (dragVisualPosition) so the rest of the tree
39
+ * (config panel, other fields) does not re-render. onFieldMove is called only once on drag end.
21
40
  */
22
41
  export const useFieldDrag = ({
23
42
  onFieldMove,
@@ -25,9 +44,29 @@ export const useFieldDrag = ({
25
44
  }: UseFieldDragOptions): UseFieldDragReturn => {
26
45
  const dragOffsetRef = useRef<{ x: number; y: number; page: number } | null>(null);
27
46
  const draggingFieldIdRef = useRef<string | null>(null);
47
+ const pendingMoveRef = useRef<PendingMove | null>(null);
48
+ const rafIdRef = useRef<number | null>(null);
49
+ const fieldIdRef = useRef<string | null>(null);
50
+
51
+ const [dragVisualPosition, setDragVisualPosition] = useState<DragVisualPosition | null>(null);
52
+
53
+ const flushPendingVisualUpdate = useCallback(() => {
54
+ if (pendingMoveRef.current) {
55
+ setDragVisualPosition({ ...pendingMoveRef.current });
56
+ pendingMoveRef.current = null;
57
+ }
58
+ rafIdRef.current = null;
59
+ }, []);
28
60
 
29
61
  const handleDragStart = (e: DragEvent<HTMLDivElement>, field: PdfField) => {
30
62
  draggingFieldIdRef.current = field.id;
63
+ fieldIdRef.current = field.id;
64
+ pendingMoveRef.current = null;
65
+ if (rafIdRef.current !== null) {
66
+ cancelAnimationFrame(rafIdRef.current);
67
+ rafIdRef.current = null;
68
+ }
69
+ setDragVisualPosition({ x: field.x, y: field.y, page: field.page });
31
70
 
32
71
  const dragOffset = handleFieldDragStart(e, field, pdfWrapperRef);
33
72
  if (dragOffset) {
@@ -36,19 +75,56 @@ export const useFieldDrag = ({
36
75
  };
37
76
 
38
77
  const handleDrag = (e: DragEvent<HTMLDivElement>, field: PdfField) => {
39
- if (dragOffsetRef.current) {
40
- handleFieldDrag(e, field, dragOffsetRef.current, pdfWrapperRef, onFieldMove);
78
+ if (!dragOffsetRef.current) {
79
+ return;
80
+ }
81
+ if (!pdfWrapperRef.current || e.clientX === 0 || e.clientY === 0) {
82
+ return;
41
83
  }
84
+
85
+ const currentPage = getPageNumberFromClientY(e.clientY, pdfWrapperRef);
86
+ const currentPagePos = getPagePosition(currentPage, pdfWrapperRef);
87
+ const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
88
+ const pageDimensions = getPageDimensions(currentPage, pdfWrapperRef);
89
+
90
+ const x = e.clientX - wrapperRect.left - currentPagePos.left - dragOffsetRef.current.x;
91
+ const y = e.clientY - wrapperRect.top - currentPagePos.top - dragOffsetRef.current.y;
92
+
93
+ const minX = 0;
94
+ const minY = 0;
95
+ const maxX = Math.max(0, pageDimensions.width - field.width);
96
+ const maxY = Math.max(0, pageDimensions.height - field.height);
97
+
98
+ const clampedX = Math.max(minX, Math.min(maxX, x));
99
+ const clampedY = Math.max(minY, Math.min(maxY, y));
100
+
101
+ pendingMoveRef.current = { x: clampedX, y: clampedY, page: currentPage };
102
+
103
+ rafIdRef.current ??= requestAnimationFrame(flushPendingVisualUpdate);
42
104
  };
43
105
 
44
- const handleDragEnd = () => {
106
+ const handleDragEnd = useCallback(() => {
107
+ if (rafIdRef.current !== null) {
108
+ cancelAnimationFrame(rafIdRef.current);
109
+ rafIdRef.current = null;
110
+ }
111
+ // Prefer pending (latest) position; fallback to current visual state
112
+ const final = pendingMoveRef.current ?? dragVisualPosition;
113
+ const fid = fieldIdRef.current;
114
+ pendingMoveRef.current = null;
115
+ setDragVisualPosition(null);
45
116
  dragOffsetRef.current = null;
46
117
  draggingFieldIdRef.current = null;
47
- };
118
+ fieldIdRef.current = null;
119
+ if (fid && final) {
120
+ onFieldMove(fid, final.x, final.y, final.page);
121
+ }
122
+ }, [onFieldMove, dragVisualPosition]);
48
123
 
49
124
  return {
50
125
  dragOffsetRef,
51
126
  draggingFieldIdRef,
127
+ dragVisualPosition,
52
128
  handleDragStart,
53
129
  handleDrag,
54
130
  handleDragEnd,
package/src/hooks/usePdfFieldDnD.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { DragEvent, RefObject, useState } from 'react';
1
+ import { DragEvent, RefObject, useCallback, useRef, useState } from 'react';
2
2
  import { v4 as uuidv4 } from 'uuid';
3
3
  import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
4
4
  import {
@@ -15,6 +15,8 @@ import {
15
15
  isDragOverCanvas,
16
16
  } from '../utils';
17
17
 
18
+ const DRAG_OVER_THROTTLE_MS = 32; // ~30fps for drop effect updates
19
+
18
20
  interface UsePdfFieldDnDProps {
19
21
  fields: PdfField[];
20
22
  recipients: RecipientInfo[];
@@ -31,29 +33,45 @@ export const usePdfFieldDnD = ({
31
33
  recipients,
32
34
  }: UsePdfFieldDnDProps) => {
33
35
  const [draggedFieldOption, setDraggedFieldOption] = useState<FieldTypeOption | null>(null);
36
+ const lastDragOverTimeRef = useRef(0);
37
+ const lastDropEffectRef = useRef<'copy' | 'none'>('none');
34
38
 
35
39
  const handleDragStart = (fieldOption: FieldTypeOption) => {
36
40
  setDraggedFieldOption(fieldOption);
41
+ lastDragOverTimeRef.current = 0;
37
42
  };
38
43
 
39
44
  const handleDragEnd = () => {
40
45
  setDraggedFieldOption(null);
41
46
  };
42
47
 
43
- const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
44
- if (!draggedFieldOption) {
45
- e.dataTransfer.dropEffect = 'none';
46
- return;
47
- }
48
+ const handleDragOver = useCallback(
49
+ (e: DragEvent<HTMLDivElement>) => {
50
+ if (!draggedFieldOption) {
51
+ e.dataTransfer.dropEffect = 'none';
52
+ return;
53
+ }
48
54
 
49
- if (isDragOverCanvas(e, pdfWrapperRef)) {
50
- e.preventDefault();
51
- e.stopPropagation();
52
- e.dataTransfer.dropEffect = 'copy';
53
- } else {
54
- e.dataTransfer.dropEffect = 'none';
55
- }
56
- };
55
+ const now = Date.now();
56
+ if (now - lastDragOverTimeRef.current < DRAG_OVER_THROTTLE_MS) {
57
+ e.preventDefault();
58
+ e.dataTransfer.dropEffect = lastDropEffectRef.current;
59
+ return;
60
+ }
61
+ lastDragOverTimeRef.current = now;
62
+
63
+ if (isDragOverCanvas(e, pdfWrapperRef)) {
64
+ e.preventDefault();
65
+ e.stopPropagation();
66
+ e.dataTransfer.dropEffect = 'copy';
67
+ lastDropEffectRef.current = 'copy';
68
+ } else {
69
+ e.dataTransfer.dropEffect = 'none';
70
+ lastDropEffectRef.current = 'none';
71
+ }
72
+ },
73
+ [draggedFieldOption, pdfWrapperRef],
74
+ );
57
75
 
58
76
  const handleDrop = (e: DragEvent<HTMLDivElement>, pageNumber: number) => {
59
77
  e.preventDefault();
package/src/styles/pdf-field-overlay.css CHANGED
@@ -33,6 +33,7 @@
33
33
 
34
34
  .dte-pdf-field.--dragging {
35
35
  opacity: 0.5;
36
+ will-change: left, top;
36
37
  }
37
38
 
38
39
  .dte-pdf-field.--colored:not(.--selected) {