@servicetitan/dte-pdf-editor 1.4.0 → 1.6.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 (356) hide show
  1. package/README.md +286 -267
  2. package/dist/components/{field-config-panel-overlay.d.ts → field-config-panel/field-config-panel-overlay.d.ts} +1 -2
  3. package/dist/components/field-config-panel/field-config-panel-overlay.d.ts.map +1 -0
  4. package/dist/components/field-config-panel/field-config-panel-overlay.js.map +1 -0
  5. package/dist/components/{field-config-panel.d.ts → field-config-panel/field-config-panel.d.ts} +1 -2
  6. package/dist/components/field-config-panel/field-config-panel.d.ts.map +1 -0
  7. package/dist/components/{field-config-panel.js → field-config-panel/field-config-panel.js} +11 -8
  8. package/dist/components/field-config-panel/field-config-panel.js.map +1 -0
  9. package/dist/components/{data-model-field-type-list.d.ts → field-sidebar/data-model-field-type-list.d.ts} +1 -1
  10. package/dist/components/field-sidebar/data-model-field-type-list.d.ts.map +1 -0
  11. package/dist/components/{data-model-field-type-list.js → field-sidebar/data-model-field-type-list.js} +3 -3
  12. package/dist/components/field-sidebar/data-model-field-type-list.js.map +1 -0
  13. package/dist/components/{e-sign-field-type-list.d.ts → field-sidebar/e-sign-field-type-list.d.ts} +1 -1
  14. package/dist/components/field-sidebar/e-sign-field-type-list.d.ts.map +1 -0
  15. package/dist/components/{e-sign-field-type-list.js → field-sidebar/e-sign-field-type-list.js} +1 -1
  16. package/dist/components/field-sidebar/e-sign-field-type-list.js.map +1 -0
  17. package/dist/components/{field-sidebar.d.ts → field-sidebar/field-sidebar.d.ts} +1 -1
  18. package/dist/components/field-sidebar/field-sidebar.d.ts.map +1 -0
  19. package/dist/components/field-sidebar/field-sidebar.js +32 -0
  20. package/dist/components/field-sidebar/field-sidebar.js.map +1 -0
  21. package/dist/components/field-sidebar/field-type.d.ts.map +1 -0
  22. package/dist/components/{field-type.js → field-sidebar/field-type.js} +1 -1
  23. package/dist/components/field-sidebar/field-type.js.map +1 -0
  24. package/dist/components/{fillable-field-type-list.d.ts → field-sidebar/fillable-field-type-list.d.ts} +1 -1
  25. package/dist/components/field-sidebar/fillable-field-type-list.d.ts.map +1 -0
  26. package/dist/components/{fillable-field-type-list.js → field-sidebar/fillable-field-type-list.js} +1 -1
  27. package/dist/components/field-sidebar/fillable-field-type-list.js.map +1 -0
  28. package/dist/components/index.d.ts +3 -0
  29. package/dist/components/index.d.ts.map +1 -0
  30. package/dist/components/index.js +3 -0
  31. package/dist/components/index.js.map +1 -0
  32. package/dist/components/{pdf-canvas.d.ts → pdf-canvas/pdf-canvas.d.ts} +3 -2
  33. package/dist/components/pdf-canvas/pdf-canvas.d.ts.map +1 -0
  34. package/dist/components/pdf-canvas/pdf-canvas.js +14 -0
  35. package/dist/components/pdf-canvas/pdf-canvas.js.map +1 -0
  36. package/dist/components/pdf-canvas/pdf-document-renderer.d.ts.map +1 -0
  37. package/dist/components/{pdf-document-renderer.js → pdf-canvas/pdf-document-renderer.js} +2 -3
  38. package/dist/components/pdf-canvas/pdf-document-renderer.js.map +1 -0
  39. package/dist/components/{pdf-editor.d.ts → pdf-editor/pdf-editor.d.ts} +2 -7
  40. package/dist/components/pdf-editor/pdf-editor.d.ts.map +1 -0
  41. package/dist/components/pdf-editor/pdf-editor.js +27 -0
  42. package/dist/components/pdf-editor/pdf-editor.js.map +1 -0
  43. package/dist/components/pdf-fields-overlay/add-handle.d.ts +7 -0
  44. package/dist/components/pdf-fields-overlay/add-handle.d.ts.map +1 -0
  45. package/dist/components/pdf-fields-overlay/add-handle.js +5 -0
  46. package/dist/components/pdf-fields-overlay/add-handle.js.map +1 -0
  47. package/dist/components/pdf-fields-overlay/pdf-fields-overlay.d.ts +15 -0
  48. package/dist/components/pdf-fields-overlay/pdf-fields-overlay.d.ts.map +1 -0
  49. package/dist/components/pdf-fields-overlay/pdf-fields-overlay.js +6 -0
  50. package/dist/components/pdf-fields-overlay/pdf-fields-overlay.js.map +1 -0
  51. package/dist/components/pdf-fields-overlay/pdf-overlay-field-data-model.d.ts +8 -0
  52. package/dist/components/pdf-fields-overlay/pdf-overlay-field-data-model.d.ts.map +1 -0
  53. package/dist/components/pdf-fields-overlay/pdf-overlay-field-data-model.js +5 -0
  54. package/dist/components/pdf-fields-overlay/pdf-overlay-field-data-model.js.map +1 -0
  55. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.d.ts +8 -0
  56. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.d.ts.map +1 -0
  57. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.js +5 -0
  58. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.js.map +1 -0
  59. package/dist/components/pdf-fields-overlay/pdf-overlay-field-fillable.d.ts +9 -0
  60. package/dist/components/pdf-fields-overlay/pdf-overlay-field-fillable.d.ts.map +1 -0
  61. package/dist/components/pdf-fields-overlay/pdf-overlay-field-fillable.js +25 -0
  62. package/dist/components/pdf-fields-overlay/pdf-overlay-field-fillable.js.map +1 -0
  63. package/dist/components/pdf-fields-overlay/pdf-overlay-field.d.ts +16 -0
  64. package/dist/components/pdf-fields-overlay/pdf-overlay-field.d.ts.map +1 -0
  65. package/dist/components/pdf-fields-overlay/pdf-overlay-field.js +44 -0
  66. package/dist/components/pdf-fields-overlay/pdf-overlay-field.js.map +1 -0
  67. package/dist/components/pdf-fields-overlay/resize-handle.d.ts.map +1 -0
  68. package/dist/components/pdf-fields-overlay/resize-handle.js.map +1 -0
  69. package/dist/components/pdf-view/pdf-view-data-model.d.ts +9 -0
  70. package/dist/components/pdf-view/pdf-view-data-model.d.ts.map +1 -0
  71. package/dist/components/pdf-view/pdf-view-data-model.js +7 -0
  72. package/dist/components/pdf-view/pdf-view-data-model.js.map +1 -0
  73. package/dist/components/pdf-view/pdf-view-e-sign.d.ts +8 -0
  74. package/dist/components/pdf-view/pdf-view-e-sign.d.ts.map +1 -0
  75. package/dist/components/pdf-view/pdf-view-e-sign.js +5 -0
  76. package/dist/components/pdf-view/pdf-view-e-sign.js.map +1 -0
  77. package/dist/components/pdf-view/pdf-view-fillable.d.ts +13 -0
  78. package/dist/components/pdf-view/pdf-view-fillable.d.ts.map +1 -0
  79. package/dist/components/{pdf-view-fields.js → pdf-view/pdf-view-fillable.js} +14 -13
  80. package/dist/components/pdf-view/pdf-view-fillable.js.map +1 -0
  81. package/dist/components/{pdf-view.d.ts → pdf-view/pdf-view.d.ts} +1 -2
  82. package/dist/components/pdf-view/pdf-view.d.ts.map +1 -0
  83. package/dist/components/{pdf-view.js → pdf-view/pdf-view.js} +8 -6
  84. package/dist/components/pdf-view/pdf-view.js.map +1 -0
  85. package/dist/constants/field.constants.d.ts +3 -3
  86. package/dist/constants/field.constants.d.ts.map +1 -1
  87. package/dist/constants/field.constants.js +4 -3
  88. package/dist/constants/field.constants.js.map +1 -1
  89. package/dist/hooks/index.d.ts +4 -0
  90. package/dist/hooks/index.d.ts.map +1 -1
  91. package/dist/hooks/index.js +4 -0
  92. package/dist/hooks/index.js.map +1 -1
  93. package/dist/hooks/useFieldDrag.d.ts +1 -1
  94. package/dist/hooks/useFieldDrag.d.ts.map +1 -1
  95. package/dist/hooks/useFieldResize.d.ts +1 -1
  96. package/dist/hooks/useFieldResize.d.ts.map +1 -1
  97. package/dist/hooks/useInitializePdfJsWorker.d.ts +2 -0
  98. package/dist/hooks/useInitializePdfJsWorker.d.ts.map +1 -0
  99. package/dist/hooks/useInitializePdfJsWorker.js +8 -0
  100. package/dist/hooks/useInitializePdfJsWorker.js.map +1 -0
  101. package/dist/hooks/usePdfFieldDnD.d.ts +17 -0
  102. package/dist/hooks/usePdfFieldDnD.d.ts.map +1 -0
  103. package/dist/hooks/usePdfFieldDnD.js +78 -0
  104. package/dist/hooks/usePdfFieldDnD.js.map +1 -0
  105. package/dist/hooks/usePdfFieldSelection.d.ts +13 -0
  106. package/dist/hooks/usePdfFieldSelection.d.ts.map +1 -0
  107. package/dist/hooks/usePdfFieldSelection.js +40 -0
  108. package/dist/hooks/usePdfFieldSelection.js.map +1 -0
  109. package/dist/hooks/useToggle.d.ts +8 -0
  110. package/dist/hooks/useToggle.d.ts.map +1 -0
  111. package/dist/hooks/useToggle.js +15 -0
  112. package/dist/hooks/useToggle.js.map +1 -0
  113. package/dist/index.d.ts +2 -3
  114. package/dist/index.d.ts.map +1 -1
  115. package/dist/index.js +1 -2
  116. package/dist/index.js.map +1 -1
  117. package/dist/interface/{pdf-editor.d.ts → types.d.ts} +8 -2
  118. package/dist/interface/types.d.ts.map +1 -0
  119. package/dist/interface/{pdf-editor.js → types.js} +1 -1
  120. package/dist/interface/types.js.map +1 -0
  121. package/dist/utils/{extract-grouped-fields-from-data-model.utils.d.ts → data-model/extract-fields.utils.d.ts} +2 -2
  122. package/dist/utils/data-model/extract-fields.utils.d.ts.map +1 -0
  123. package/dist/utils/{extract-grouped-fields-from-data-model.utils.js → data-model/extract-fields.utils.js} +2 -2
  124. package/dist/utils/data-model/extract-fields.utils.js.map +1 -0
  125. package/dist/utils/data-model/index.d.ts +3 -0
  126. package/dist/utils/data-model/index.d.ts.map +1 -0
  127. package/dist/utils/data-model/index.js +3 -0
  128. package/dist/utils/data-model/index.js.map +1 -0
  129. package/dist/utils/{resolve-pdf-data-values.d.ts → data-model/resolve-values.utils.d.ts} +2 -2
  130. package/dist/utils/data-model/resolve-values.utils.d.ts.map +1 -0
  131. package/dist/utils/{resolve-pdf-data-values.js → data-model/resolve-values.utils.js} +1 -1
  132. package/dist/utils/data-model/resolve-values.utils.js.map +1 -0
  133. package/dist/utils/{is-drag-over-canvas.utils.d.ts → field/drag-over-canvas.utils.d.ts} +1 -1
  134. package/dist/utils/field/drag-over-canvas.utils.d.ts.map +1 -0
  135. package/dist/utils/{is-drag-over-canvas.utils.js → field/drag-over-canvas.utils.js} +1 -1
  136. package/dist/utils/field/drag-over-canvas.utils.js.map +1 -0
  137. package/dist/utils/{get-field-background-color.d.ts → field/field-background-color.utils.d.ts} +1 -1
  138. package/dist/utils/field/field-background-color.utils.d.ts.map +1 -0
  139. package/dist/utils/{get-field-background-color.js → field/field-background-color.utils.js} +1 -1
  140. package/dist/utils/field/field-background-color.utils.js.map +1 -0
  141. package/dist/utils/{calculate-drop-coordinates.utils.d.ts → field/field-coordinates.utils.d.ts} +1 -1
  142. package/dist/utils/field/field-coordinates.utils.d.ts.map +1 -0
  143. package/dist/utils/{calculate-drop-coordinates.utils.js → field/field-coordinates.utils.js} +2 -2
  144. package/dist/utils/field/field-coordinates.utils.js.map +1 -0
  145. package/dist/utils/{handle-field-drag.utils.d.ts → field/field-drag.utils.d.ts} +11 -2
  146. package/dist/utils/field/field-drag.utils.d.ts.map +1 -0
  147. package/dist/utils/field/field-drag.utils.js +73 -0
  148. package/dist/utils/field/field-drag.utils.js.map +1 -0
  149. package/dist/utils/field/field-placeholder-text.utils.d.ts +3 -0
  150. package/dist/utils/field/field-placeholder-text.utils.d.ts.map +1 -0
  151. package/dist/utils/{get-field-placeholder-text.js → field/field-placeholder-text.utils.js} +1 -1
  152. package/dist/utils/field/field-placeholder-text.utils.js.map +1 -0
  153. package/dist/utils/{handle-field-resize.utils.d.ts → field/field-resize.utils.d.ts} +2 -2
  154. package/dist/utils/field/field-resize.utils.d.ts.map +1 -0
  155. package/dist/utils/{handle-field-resize.utils.js → field/field-resize.utils.js} +3 -4
  156. package/dist/utils/field/field-resize.utils.js.map +1 -0
  157. package/dist/utils/field/index.d.ts +7 -0
  158. package/dist/utils/field/index.d.ts.map +1 -0
  159. package/dist/utils/field/index.js +7 -0
  160. package/dist/utils/field/index.js.map +1 -0
  161. package/dist/utils/index.d.ts +5 -17
  162. package/dist/utils/index.d.ts.map +1 -1
  163. package/dist/utils/index.js +5 -17
  164. package/dist/utils/index.js.map +1 -1
  165. package/dist/utils/path/generate-e-sign-path.d.ts +3 -0
  166. package/dist/utils/path/generate-e-sign-path.d.ts.map +1 -0
  167. package/dist/utils/path/generate-e-sign-path.js.map +1 -0
  168. package/dist/utils/path/generate-fillable-path.d.ts.map +1 -0
  169. package/dist/utils/path/generate-fillable-path.js.map +1 -0
  170. package/dist/utils/path/index.d.ts +4 -0
  171. package/dist/utils/path/index.d.ts.map +1 -0
  172. package/dist/utils/path/index.js +4 -0
  173. package/dist/utils/path/index.js.map +1 -0
  174. package/dist/utils/path/parse-fillable-path.d.ts.map +1 -0
  175. package/dist/utils/path/parse-fillable-path.js.map +1 -0
  176. package/dist/utils/pdf/index.d.ts +3 -0
  177. package/dist/utils/pdf/index.d.ts.map +1 -0
  178. package/dist/utils/pdf/index.js +3 -0
  179. package/dist/utils/pdf/index.js.map +1 -0
  180. package/dist/utils/pdf/pdf-rendering.utils.d.ts +29 -0
  181. package/dist/utils/pdf/pdf-rendering.utils.d.ts.map +1 -0
  182. package/dist/utils/pdf/pdf-rendering.utils.js +75 -0
  183. package/dist/utils/pdf/pdf-rendering.utils.js.map +1 -0
  184. package/dist/utils/{pdfjs-init.d.ts → pdf/pdfjs-init.d.ts} +1 -0
  185. package/dist/utils/pdf/pdfjs-init.d.ts.map +1 -0
  186. package/dist/utils/{pdfjs-init.js → pdf/pdfjs-init.js} +1 -1
  187. package/dist/utils/pdf/pdfjs-init.js.map +1 -0
  188. package/dist/utils/recipients/index.d.ts +2 -0
  189. package/dist/utils/recipients/index.d.ts.map +1 -0
  190. package/dist/utils/recipients/index.js +2 -0
  191. package/dist/utils/recipients/index.js.map +1 -0
  192. package/dist/utils/recipients/map-colors.d.ts +3 -0
  193. package/dist/utils/recipients/map-colors.d.ts.map +1 -0
  194. package/dist/utils/{map-colors-to-recipients.js → recipients/map-colors.js} +1 -1
  195. package/dist/utils/recipients/map-colors.js.map +1 -0
  196. package/package.json +1 -1
  197. package/src/components/{field-config-panel-overlay.tsx → field-config-panel/field-config-panel-overlay.tsx} +1 -2
  198. package/src/components/{field-config-panel.tsx → field-config-panel/field-config-panel.tsx} +18 -25
  199. package/src/components/{data-model-field-type-list.tsx → field-sidebar/data-model-field-type-list.tsx} +4 -4
  200. package/src/components/{e-sign-field-type-list.tsx → field-sidebar/e-sign-field-type-list.tsx} +2 -2
  201. package/src/components/field-sidebar/field-sidebar.tsx +119 -0
  202. package/src/components/{field-type.tsx → field-sidebar/field-type.tsx} +1 -1
  203. package/src/components/{fillable-field-type-list.tsx → field-sidebar/fillable-field-type-list.tsx} +2 -2
  204. package/src/components/index.ts +2 -0
  205. package/src/components/{pdf-canvas.tsx → pdf-canvas/pdf-canvas.tsx} +12 -9
  206. package/src/components/{pdf-document-renderer.tsx → pdf-canvas/pdf-document-renderer.tsx} +3 -4
  207. package/src/components/pdf-editor/pdf-editor.tsx +109 -0
  208. package/src/components/pdf-fields-overlay/add-handle.tsx +12 -0
  209. package/src/components/pdf-fields-overlay/pdf-fields-overlay.tsx +44 -0
  210. package/src/components/pdf-fields-overlay/pdf-overlay-field-data-model.tsx +15 -0
  211. package/src/components/pdf-fields-overlay/pdf-overlay-field-e-sign.tsx +15 -0
  212. package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx +68 -0
  213. package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx +87 -0
  214. package/src/components/pdf-view/pdf-view-data-model.tsx +13 -0
  215. package/src/components/pdf-view/pdf-view-e-sign.tsx +18 -0
  216. package/src/components/{pdf-view-fields.tsx → pdf-view/pdf-view-fillable.tsx} +31 -26
  217. package/src/components/{pdf-view.tsx → pdf-view/pdf-view.tsx} +10 -9
  218. package/src/constants/field.constants.ts +4 -3
  219. package/src/hooks/index.ts +4 -0
  220. package/src/hooks/useFieldDrag.ts +1 -1
  221. package/src/hooks/useFieldResize.ts +1 -1
  222. package/src/hooks/useInitializePdfJsWorker.ts +8 -0
  223. package/src/hooks/usePdfFieldDnD.ts +118 -0
  224. package/src/hooks/usePdfFieldSelection.ts +55 -0
  225. package/src/hooks/useToggle.ts +26 -0
  226. package/src/index.ts +2 -3
  227. package/src/interface/{pdf-editor.ts → types.ts} +8 -1
  228. package/src/styles/field-config-panel-overlay.css +3 -1
  229. package/src/styles/field-sidebar.css +36 -3
  230. package/src/styles/field-type-list.css +1 -1
  231. package/src/styles/field-type.css +7 -0
  232. package/src/styles/pdf-canvas.css +2 -0
  233. package/src/styles/pdf-editor.css +1 -0
  234. package/src/styles/pdf-field-overlay.css +23 -3
  235. package/src/styles/variables.css +11 -1
  236. package/src/utils/{extract-grouped-fields-from-data-model.utils.ts → data-model/extract-fields.utils.ts} +1 -1
  237. package/src/utils/data-model/index.ts +2 -0
  238. package/src/utils/{resolve-pdf-data-values.ts → data-model/resolve-values.utils.ts} +1 -1
  239. package/src/utils/{calculate-drop-coordinates.utils.ts → field/field-coordinates.utils.ts} +1 -1
  240. package/src/utils/field/field-drag.utils.ts +102 -0
  241. package/src/utils/{get-field-placeholder-text.ts → field/field-placeholder-text.utils.ts} +1 -1
  242. package/src/utils/{handle-field-resize.utils.ts → field/field-resize.utils.ts} +3 -4
  243. package/src/utils/field/index.ts +6 -0
  244. package/src/utils/index.ts +5 -17
  245. package/src/utils/{generate-e-sign-path.ts → path/generate-e-sign-path.ts} +1 -1
  246. package/src/utils/path/index.ts +3 -0
  247. package/src/utils/pdf/index.ts +2 -0
  248. package/src/utils/pdf/pdf-rendering.utils.ts +98 -0
  249. package/src/utils/{pdfjs-init.ts → pdf/pdfjs-init.ts} +1 -2
  250. package/src/utils/recipients/index.ts +1 -0
  251. package/src/utils/{map-colors-to-recipients.ts → recipients/map-colors.ts} +1 -1
  252. package/dist/components/data-model-field-type-list.d.ts.map +0 -1
  253. package/dist/components/data-model-field-type-list.js.map +0 -1
  254. package/dist/components/e-sign-field-type-list.d.ts.map +0 -1
  255. package/dist/components/e-sign-field-type-list.js.map +0 -1
  256. package/dist/components/field-config-panel-overlay.d.ts.map +0 -1
  257. package/dist/components/field-config-panel-overlay.js.map +0 -1
  258. package/dist/components/field-config-panel.d.ts.map +0 -1
  259. package/dist/components/field-config-panel.js.map +0 -1
  260. package/dist/components/field-sidebar.d.ts.map +0 -1
  261. package/dist/components/field-sidebar.js +0 -25
  262. package/dist/components/field-sidebar.js.map +0 -1
  263. package/dist/components/field-type.d.ts.map +0 -1
  264. package/dist/components/field-type.js.map +0 -1
  265. package/dist/components/fillable-field-type-list.d.ts.map +0 -1
  266. package/dist/components/fillable-field-type-list.js.map +0 -1
  267. package/dist/components/pdf-canvas.d.ts.map +0 -1
  268. package/dist/components/pdf-canvas.js +0 -14
  269. package/dist/components/pdf-canvas.js.map +0 -1
  270. package/dist/components/pdf-document-renderer.d.ts.map +0 -1
  271. package/dist/components/pdf-document-renderer.js.map +0 -1
  272. package/dist/components/pdf-editor.d.ts.map +0 -1
  273. package/dist/components/pdf-editor.js +0 -114
  274. package/dist/components/pdf-editor.js.map +0 -1
  275. package/dist/components/pdf-field-overlay.d.ts +0 -24
  276. package/dist/components/pdf-field-overlay.d.ts.map +0 -1
  277. package/dist/components/pdf-field-overlay.js +0 -60
  278. package/dist/components/pdf-field-overlay.js.map +0 -1
  279. package/dist/components/pdf-view-fields.d.ts +0 -17
  280. package/dist/components/pdf-view-fields.d.ts.map +0 -1
  281. package/dist/components/pdf-view-fields.js.map +0 -1
  282. package/dist/components/pdf-view.d.ts.map +0 -1
  283. package/dist/components/pdf-view.js.map +0 -1
  284. package/dist/components/resize-handle.d.ts.map +0 -1
  285. package/dist/components/resize-handle.js.map +0 -1
  286. package/dist/interface/pdf-editor.d.ts.map +0 -1
  287. package/dist/interface/pdf-editor.js.map +0 -1
  288. package/dist/utils/calculate-drop-coordinates.utils.d.ts.map +0 -1
  289. package/dist/utils/calculate-drop-coordinates.utils.js.map +0 -1
  290. package/dist/utils/extract-grouped-fields-from-data-model.utils.d.ts.map +0 -1
  291. package/dist/utils/extract-grouped-fields-from-data-model.utils.js.map +0 -1
  292. package/dist/utils/generate-e-sign-path.d.ts +0 -3
  293. package/dist/utils/generate-e-sign-path.d.ts.map +0 -1
  294. package/dist/utils/generate-e-sign-path.js.map +0 -1
  295. package/dist/utils/generate-fillable-path.d.ts.map +0 -1
  296. package/dist/utils/generate-fillable-path.js.map +0 -1
  297. package/dist/utils/get-field-background-color.d.ts.map +0 -1
  298. package/dist/utils/get-field-background-color.js.map +0 -1
  299. package/dist/utils/get-field-placeholder-text.d.ts +0 -3
  300. package/dist/utils/get-field-placeholder-text.d.ts.map +0 -1
  301. package/dist/utils/get-field-placeholder-text.js.map +0 -1
  302. package/dist/utils/get-page-dimensions.utils.d.ts +0 -12
  303. package/dist/utils/get-page-dimensions.utils.d.ts.map +0 -1
  304. package/dist/utils/get-page-dimensions.utils.js +0 -31
  305. package/dist/utils/get-page-dimensions.utils.js.map +0 -1
  306. package/dist/utils/get-page-number-from-client-y.utils.d.ts +0 -9
  307. package/dist/utils/get-page-number-from-client-y.utils.d.ts.map +0 -1
  308. package/dist/utils/get-page-number-from-client-y.utils.js +0 -24
  309. package/dist/utils/get-page-number-from-client-y.utils.js.map +0 -1
  310. package/dist/utils/get-page-position.utils.d.ts +0 -12
  311. package/dist/utils/get-page-position.utils.d.ts.map +0 -1
  312. package/dist/utils/get-page-position.utils.js +0 -22
  313. package/dist/utils/get-page-position.utils.js.map +0 -1
  314. package/dist/utils/handle-field-drag-start.utils.d.ts +0 -16
  315. package/dist/utils/handle-field-drag-start.utils.d.ts.map +0 -1
  316. package/dist/utils/handle-field-drag-start.utils.js +0 -41
  317. package/dist/utils/handle-field-drag-start.utils.js.map +0 -1
  318. package/dist/utils/handle-field-drag.utils.d.ts.map +0 -1
  319. package/dist/utils/handle-field-drag.utils.js +0 -36
  320. package/dist/utils/handle-field-drag.utils.js.map +0 -1
  321. package/dist/utils/handle-field-resize.utils.d.ts.map +0 -1
  322. package/dist/utils/handle-field-resize.utils.js.map +0 -1
  323. package/dist/utils/is-drag-over-canvas.utils.d.ts.map +0 -1
  324. package/dist/utils/is-drag-over-canvas.utils.js.map +0 -1
  325. package/dist/utils/map-colors-to-recipients.d.ts +0 -3
  326. package/dist/utils/map-colors-to-recipients.d.ts.map +0 -1
  327. package/dist/utils/map-colors-to-recipients.js.map +0 -1
  328. package/dist/utils/parse-fillable-path.d.ts.map +0 -1
  329. package/dist/utils/parse-fillable-path.js.map +0 -1
  330. package/dist/utils/pdfjs-init.d.ts.map +0 -1
  331. package/dist/utils/pdfjs-init.js.map +0 -1
  332. package/dist/utils/resolve-pdf-data-values.d.ts.map +0 -1
  333. package/dist/utils/resolve-pdf-data-values.js.map +0 -1
  334. package/src/components/field-sidebar.tsx +0 -93
  335. package/src/components/pdf-editor.tsx +0 -223
  336. package/src/components/pdf-field-overlay.tsx +0 -182
  337. package/src/utils/get-page-dimensions.utils.ts +0 -39
  338. package/src/utils/get-page-number-from-client-y.utils.ts +0 -31
  339. package/src/utils/get-page-position.utils.ts +0 -30
  340. package/src/utils/handle-field-drag-start.utils.ts +0 -52
  341. package/src/utils/handle-field-drag.utils.ts +0 -55
  342. /package/dist/components/{field-config-panel-overlay.js → field-config-panel/field-config-panel-overlay.js} +0 -0
  343. /package/dist/components/{field-type.d.ts → field-sidebar/field-type.d.ts} +0 -0
  344. /package/dist/components/{pdf-document-renderer.d.ts → pdf-canvas/pdf-document-renderer.d.ts} +0 -0
  345. /package/dist/components/{resize-handle.d.ts → pdf-fields-overlay/resize-handle.d.ts} +0 -0
  346. /package/dist/components/{resize-handle.js → pdf-fields-overlay/resize-handle.js} +0 -0
  347. /package/dist/utils/{generate-e-sign-path.js → path/generate-e-sign-path.js} +0 -0
  348. /package/dist/utils/{generate-fillable-path.d.ts → path/generate-fillable-path.d.ts} +0 -0
  349. /package/dist/utils/{generate-fillable-path.js → path/generate-fillable-path.js} +0 -0
  350. /package/dist/utils/{parse-fillable-path.d.ts → path/parse-fillable-path.d.ts} +0 -0
  351. /package/dist/utils/{parse-fillable-path.js → path/parse-fillable-path.js} +0 -0
  352. /package/src/components/{resize-handle.tsx → pdf-fields-overlay/resize-handle.tsx} +0 -0
  353. /package/src/utils/{is-drag-over-canvas.utils.ts → field/drag-over-canvas.utils.ts} +0 -0
  354. /package/src/utils/{get-field-background-color.ts → field/field-background-color.utils.ts} +0 -0
  355. /package/src/utils/{generate-fillable-path.ts → path/generate-fillable-path.ts} +0 -0
  356. /package/src/utils/{parse-fillable-path.ts → path/parse-fillable-path.ts} +0 -0
package/README.md CHANGED
@@ -1,54 +1,17 @@
1
- # PDF Editor Component
1
+ # @servicetitan/dte-pdf-editor
2
2
 
3
- A comprehensive React component library for editing PDF documents with drag-and-drop field placement, data model integration, e-signature fields, and fillable form fields.
4
-
5
- ## Overview
6
-
7
- The PDF Editor is a powerful, interactive component that allows users to:
8
- - View PDF documents page by page
9
- - Drag and drop various field types onto PDF pages
10
- - Configure field properties (labels, recipients, requirements)
11
- - Position, resize, and move fields on PDF pages
12
- - Integrate with data models for dynamic content merging
13
- - Support e-signature workflows with recipient assignment
3
+ A React component library for creating interactive PDF editors with drag-and-drop field placement, data model integration, e-signature support, and fillable form fields.
14
4
 
15
5
  ## Features
16
6
 
17
- ### Core Functionality
18
- - **PDF Rendering**: Multi-page PDF viewing using `react-pdf` and `pdfjs-dist`
19
- - **Drag & Drop**: Intuitive drag-and-drop interface for placing fields on PDF pages
20
- - **Field Management**: Create, edit, move, resize, and delete fields
21
- - **Field Selection**: Click to select and configure individual fields
22
- - **Multi-page Support**: Handle PDFs with multiple pages
23
-
24
- ### Field Types
25
-
26
- #### 1. Data Model Fields (Merge Tags)
27
- - Extract fields from JSON schema objects
28
- - Group fields by schema structure
29
- - Search and filter data model fields
30
- - Generate paths for data replacement (e.g., `{{customer.name}}`)
31
-
32
- #### 2. E-Signature Fields
33
- - **Signature**: Digital signature field
34
- - **Initials**: Initials field
35
- - **Date Signed**: Date signature field
36
- - **Full Name**: Full name field
37
- - Recipient assignment with color coding
38
-
39
- #### 3. Fillable Fields
40
- - **Text Field**: Single-line text input
41
- - **Date Field**: Date picker input
42
- - **Checkbox**: Boolean checkbox input
43
- - Required field marking
44
- - Recipient assignment
45
-
46
- ### Visual Features
47
- - Color-coded fields by recipient
48
- - Visual field overlays on PDF pages
49
- - Resize handles for selected fields
50
- - Drag indicators and visual feedback
51
- - Loading and error states
7
+ - 📄 **PDF Rendering**: Display and interact with PDF documents using `react-pdf` and `pdfjs-dist`
8
+ - 🎯 **Drag & Drop Field Placement**: Intuitively place fields on PDF pages by dragging from a sidebar
9
+ - 📊 **Data Model Integration**: Connect fields to structured data models using JSON Schema
10
+ - ✍️ **E-Signature Support**: Add signature, initials, date signed, and full name fields
11
+ - 📝 **Fillable Fields**: Support for text, date, checkbox, and radio button inputs
12
+ - 👥 **Multi-Recipient Support**: Assign fields to different recipients with color-coded visualization
13
+ - ⚙️ **Field Configuration**: Configure field properties including position, size, label, and recipient assignment
14
+ - 👁️ **View Mode**: Display PDFs with filled data in a read-only or interactive view mode
52
15
 
53
16
  ## Installation
54
17
 
@@ -58,299 +21,355 @@ npm install @servicetitan/dte-pdf-editor
58
21
 
59
22
  ### Peer Dependencies
60
23
 
61
- The component requires the following peer dependencies:
24
+ This package requires the following peer dependencies:
62
25
 
63
- ```json
64
- {
65
- "@servicetitan/anvil2": "^1.46.9",
66
- "react": "~18.3.1",
67
- "react-dom": "~18.3.1"
68
- }
26
+ ```bash
27
+ npm install @servicetitan/anvil2@^1.46.9 react@~18.3.1 react-dom@~18.3.1
69
28
  ```
70
29
 
71
- ### Dependencies
30
+ ## Quick Start
72
31
 
73
- - `pdfjs-dist`: ^3.11.0
74
- - `react-pdf`: ^7.5.0
75
- - `uuid`: ^9.0.0
32
+ ```tsx
33
+ import { PdfEditor, PdfField, PdfView, SchemaObject } from '@servicetitan/dte-pdf-editor';
34
+ import { useState } from 'react';
76
35
 
77
- ## Usage
36
+ const pdfUrl = 'https://example.com/document.pdf';
78
37
 
79
- ### Basic Example
38
+ function App() {
39
+ const [fields, setFields] = useState<PdfField[]>([]);
40
+ const [data, setData] = useState<Record<string, any>>({});
80
41
 
81
- ```tsx
82
- import { PdfEditor } from '@servicetitan/dte-pdf-editor';
83
- import '@servicetitan/dte-pdf-editor/dist/styles/index.css';
42
+ const recipients = [
43
+ { id: 1, name: 'technician', displayName: 'Technician' },
44
+ { id: 2, name: 'customer', displayName: 'Customer' },
45
+ ];
84
46
 
85
- function App() {
86
- const [fields, setFields] = useState([]);
87
-
88
- return (
89
- <PdfEditor
90
- pdfUrl="/path/to/document.pdf"
91
- fields={fields}
92
- onFieldsChange={setFields}
93
- recipients={[
94
- { id: 1, name: 'recipient1', displayName: 'John Doe' },
95
- { id: 2, name: 'recipient2', displayName: 'Jane Smith' }
96
- ]}
97
- dataModel={{
47
+ const dataModel: SchemaObject = {
98
48
  type: 'object',
99
49
  properties: {
100
- customer: {
101
- type: 'object',
102
- properties: {
103
- name: { type: 'string', title: 'Customer Name' },
104
- email: { type: 'string', title: 'Email' }
105
- }
106
- }
107
- }
108
- }}
109
- />
110
- );
50
+ CustomerName: {
51
+ type: 'string',
52
+ title: 'Customer Name',
53
+ options: { placeholder: 'Enter customer name' },
54
+ },
55
+ },
56
+ };
57
+
58
+ return (
59
+ <PdfEditor
60
+ pdfUrl={pdfUrl}
61
+ fields={fields}
62
+ onFieldsChange={setFields}
63
+ dataModel={dataModel}
64
+ recipients={recipients}
65
+ />
66
+ );
111
67
  }
112
68
  ```
113
69
 
114
- ## API Reference
70
+ ## Components
71
+
72
+ ### PdfEditor
73
+
74
+ The main component for editing PDF documents and placing fields.
115
75
 
116
- ### PdfEditor Props
76
+ #### Props
117
77
 
118
78
  | Prop | Type | Required | Description |
119
79
  |------|------|----------|-------------|
120
80
  | `pdfUrl` | `string` | Yes | URL or path to the PDF file |
121
- | `fields` | `PdfField[]` | No | Array of field objects (default: `[]`) |
122
- | `onFieldsChange` | `(fields: PdfField[]) => void` | Yes | Callback when fields are modified |
123
- | `dataModel` | `SchemaObject` | No | JSON schema object for data model fields |
124
- | `recipients` | `RecipientInfo[]` | No | Array of recipient information (default: `[]`) |
125
- | `loading` | `boolean` | No | Loading state (default: `false`) |
126
- | `loadingPlaceholder` | `ReactNode` | No | Custom loading placeholder |
127
- | `errorPlaceholder` | `ReactNode` | No | Custom error placeholder |
81
+ | `fields` | `PdfField[]` | No | Array of fields placed on the PDF |
82
+ | `onFieldsChange` | `(fields: PdfField[]) => void` | Yes | Callback when fields are added, modified, or deleted |
83
+ | `dataModel` | `SchemaObject` | No | JSON Schema object defining available data model fields |
84
+ | `recipients` | `RecipientInfo[]` | No | Array of recipients that can be assigned to fields |
85
+ | `loading` | `boolean` | No | Whether the PDF is currently loading |
86
+ | `loadingPlaceholder` | `ReactNode` | No | Custom component to display while PDF is loading |
87
+ | `errorPlaceholder` | `ReactNode` | No | Custom component to display if PDF fails to load |
128
88
 
129
- ### PdfField Interface
89
+ #### Example
130
90
 
131
- ```typescript
132
- interface PdfField {
133
- id: string; // Unique identifier (UUID)
134
- type: FieldTypeEnum; // 'data-model' | 'e-sign' | 'fillable'
135
- subType?: string; // Field subtype (e.g., 'text', 'date', 'signature')
136
- x: number; // X coordinate on page
137
- y: number; // Y coordinate on page
138
- page: number; // Page number (1-indexed)
139
- label: string; // Display label
140
- width: number; // Field width in pixels
141
- height: number; // Field height in pixels
142
- required?: boolean; // Whether field is required (fillable fields)
143
- path?: string; // Data path for merge tags
144
- recipient?: string; // Recipient name for e-sign/fillable fields
145
- }
91
+ ```tsx
92
+ <PdfEditor
93
+ pdfUrl="https://example.com/document.pdf"
94
+ fields={fields}
95
+ onFieldsChange={setFields}
96
+ dataModel={dataModel}
97
+ recipients={recipients}
98
+ loading={!pdfUrl}
99
+ loadingPlaceholder={<Spinner />}
100
+ errorPlaceholder={<Alert status="danger" title="Failed to load PDF" />}
101
+ />
146
102
  ```
147
103
 
148
- ### RecipientInfo Interface
104
+ ### PdfView
149
105
 
150
- ```typescript
151
- interface RecipientInfo {
152
- id: number;
153
- name: string; // Internal recipient identifier
154
- displayName: string; // Display name for UI
155
- }
156
- ```
106
+ Component for displaying PDFs with filled data in view mode.
157
107
 
158
- ### SchemaObject Interface
108
+ #### Props
109
+
110
+ | Prop | Type | Required | Description |
111
+ |------|------|----------|-------------|
112
+ | `pdfUrl` | `string` | Yes | URL or path to the PDF file |
113
+ | `fields` | `PdfField[]` | Yes | Array of fields to display on the PDF |
114
+ | `data` | `DataModelValues` | No | Data object containing values for data model fields |
115
+ | `recipients` | `RecipientInfo[]` | No | Array of recipients for field assignment |
116
+ | `fillingBy` | `string[]` | No | Array of recipient names that are allowed to fill fields |
117
+ | `onDataChange` | `(changedData: { [path: string]: string \| boolean }) => void` | No | Callback when fillable field data changes |
118
+ | `loading` | `boolean` | No | Whether the PDF is currently loading |
119
+ | `loadingPlaceholder` | `ReactNode` | No | Custom component to display while PDF is loading |
120
+ | `errorPlaceholder` | `ReactNode` | No | Custom component to display if PDF fails to load |
159
121
 
160
- The data model follows a JSON Schema-like structure:
122
+ #### Example
161
123
 
162
- ```typescript
163
- interface SchemaObject {
164
- type: 'object';
165
- properties: Record<string, SchemaNode>;
166
- title?: string;
167
- options?: {
168
- placeholder?: any;
169
- description?: any;
170
- sampleData?: any;
171
- showInEditor?: boolean;
172
- isHighlighted?: boolean;
173
- };
174
- }
124
+ ```tsx
125
+ <PdfView
126
+ pdfUrl="https://example.com/document.pdf"
127
+ fields={fields}
128
+ data={data}
129
+ recipients={recipients}
130
+ fillingBy={['technician']}
131
+ onDataChange={(changedData) => {
132
+ setData({ ...data, ...changedData });
133
+ }}
134
+ />
175
135
  ```
176
136
 
177
- ## Component Architecture
137
+ ## Types
178
138
 
179
- ### Main Components
139
+ ### PdfField
180
140
 
181
- #### `PdfEditor`
182
- The root component that orchestrates the entire editor experience.
141
+ Represents a field placed on a PDF document.
183
142
 
184
- **Key Responsibilities:**
185
- - Manages field state and selection
186
- - Handles drag and drop operations
187
- - Coordinates between sidebar and canvas
188
- - Manages recipient color mapping
143
+ ```tsx
144
+ interface PdfField {
145
+ id: string;
146
+ type: FieldTypeEnum;
147
+ subType?: FillableFieldType | ESignFieldType;
148
+ x: number;
149
+ y: number;
150
+ page: number;
151
+ label: string;
152
+ width: number;
153
+ height: number;
154
+ required?: boolean;
155
+ path?: string;
156
+ recipient?: string;
157
+ }
158
+ ```
189
159
 
190
- #### `FieldSidebar`
191
- Left sidebar containing field type lists and search functionality.
160
+ ### FieldTypeEnum
192
161
 
193
- **Features:**
194
- - Three tabs: Merge Tags, E-Sign, Fillable Fields
195
- - Search functionality for data model and fillable fields
196
- - Drag source for new fields
162
+ Enumeration of field types:
197
163
 
198
- #### `PdfCanvas`
199
- Main canvas area displaying PDF pages with field overlays.
164
+ - `dataModel`: Field connected to a data model schema
165
+ - `eSign`: E-signature field
166
+ - `fillable`: User-fillable form field
200
167
 
201
- **Features:**
202
- - PDF rendering with `react-pdf`
203
- - Drop zone for new fields
204
- - Click-to-deselect functionality
205
- - Page dimension calculations
168
+ ### ESignFieldType
206
169
 
207
- #### `PdfDocumentRenderer`
208
- PDF document renderer using `react-pdf` library.
170
+ Types of e-signature fields:
209
171
 
210
- **Features:**
211
- - Multi-page rendering
212
- - Drag and drop event handling
213
- - Loading and error states
172
+ - `signature`: Signature field
173
+ - `initials`: Initials field
174
+ - `dateSigned`: Date signed field
175
+ - `fullName`: Full name field
214
176
 
215
- #### `PdfFieldOverlay`
216
- Overlay component rendering field visualizations on PDF pages.
177
+ ### FillableFieldType
217
178
 
218
- **Features:**
219
- - Field positioning and rendering
220
- - Drag and drop for existing fields
221
- - Resize handles for selected fields
222
- - Color coding by recipient
179
+ Types of fillable fields:
223
180
 
224
- #### `FieldConfigPanelOverlay`
225
- Configuration panel that appears when a field is selected.
181
+ - `text`: Text input
182
+ - `date`: Date picker
183
+ - `checkbox`: Checkbox
184
+ - `radio`: Radio button
226
185
 
227
- **Features:**
228
- - Field property editing
229
- - Recipient assignment
230
- - Field deletion
231
- - E-sign field type selection
186
+ ### SchemaObject
232
187
 
233
- ### Supporting Components
188
+ JSON Schema object defining the data model structure. Supports nested objects, arrays, and various string subtypes (string, text, html, image).
234
189
 
235
- - **`FieldType`**: Draggable field type item in sidebar
236
- - **`DataModelFieldTypeList`**: List of data model fields grouped by schema
237
- - **`ESignFieldTypeList`**: List of e-signature field types
238
- - **`FillableFieldTypeList`**: List of fillable field types
239
- - **`FieldConfigPanel`**: Form for editing field properties
190
+ ```tsx
191
+ interface SchemaObject {
192
+ type: 'object';
193
+ properties: Record<string, SchemaNode>;
194
+ title?: string;
195
+ options?: SchemaFieldBaseOptions;
196
+ }
197
+ ```
240
198
 
241
- ## Utilities
199
+ ### RecipientInfo
242
200
 
243
- The component includes several utility functions:
201
+ Information about a recipient that can be assigned to fields.
244
202
 
245
- - **`calculateDropCoordinates`**: Calculates field position from drop event
246
- - **`extractGroupedFieldsFromDataModel`**: Extracts fields from JSON schema
247
- - **`generateESignPath`**: Generates path for e-signature fields
248
- - **`getPagePosition`**: Gets page position relative to container
249
- - **`getPageDimensions`**: Gets page dimensions
250
- - **`handleFieldDrag`**: Handles field dragging logic
251
- - **`handleFieldResize`**: Handles field resizing logic
252
- - **`isDragOverCanvas`**: Checks if drag is over PDF canvas
253
- - **`mapColorsToRecipients`**: Assigns colors to recipients
203
+ ```tsx
204
+ interface RecipientInfo {
205
+ id: number;
206
+ name: string;
207
+ displayName: string;
208
+ }
209
+ ```
254
210
 
255
- ## Styling
211
+ ## Usage Examples
256
212
 
257
- The component includes CSS modules for styling. Import the main stylesheet:
213
+ ### Basic Editor with Data Model
258
214
 
259
215
  ```tsx
260
- import '@servicetitan/dte-pdf-editor/dist/styles/index.css';
261
- ```
216
+ import { PdfEditor, PdfField, SchemaObject } from '@servicetitan/dte-pdf-editor';
217
+ import { useState } from 'react';
262
218
 
263
- ### CSS Classes
264
-
265
- - `.dte-pdf-editor`: Main editor container
266
- - `.dte-pdf-editor-sidebar-container`: Sidebar container
267
- - `.dte-pdf-editor-content-container`: Main content area
268
- - `.dte-pdf-canvas-container`: PDF canvas container
269
- - `.dte-pdf-field`: Individual field overlay
270
- - `.dte-pdf-field-selected`: Selected field state
271
- - `.dte-field-sidebar-container`: Sidebar styling
272
- - `.dte-field-config-panel-overlay`: Config panel overlay
219
+ const dataModel: SchemaObject = {
220
+ type: 'object',
221
+ properties: {
222
+ JobInformation: {
223
+ type: 'object',
224
+ properties: {
225
+ JobNumber: {
226
+ type: 'string',
227
+ title: 'Job Number',
228
+ options: { placeholder: 'Enter job number' },
229
+ },
230
+ JobName: {
231
+ type: 'string',
232
+ title: 'Job Name',
233
+ options: { placeholder: 'Enter job name' },
234
+ },
235
+ },
236
+ },
237
+ },
238
+ };
239
+
240
+ function MyEditor() {
241
+ const [fields, setFields] = useState<PdfField[]>([]);
242
+
243
+ return (
244
+ <PdfEditor
245
+ pdfUrl="https://example.com/document.pdf"
246
+ fields={fields}
247
+ onFieldsChange={setFields}
248
+ dataModel={dataModel}
249
+ />
250
+ );
251
+ }
252
+ ```
273
253
 
274
- ## Field Types Details
254
+ ### Editor with Recipients
275
255
 
276
- ### Data Model Fields
256
+ ```tsx
257
+ const recipients = [
258
+ { id: 1, name: 'technician', displayName: 'Technician' },
259
+ { id: 2, name: 'customer', displayName: 'Customer' },
260
+ { id: 3, name: 'accountant', displayName: 'Accountant' },
261
+ ];
262
+
263
+ <PdfEditor
264
+ pdfUrl={pdfUrl}
265
+ fields={fields}
266
+ onFieldsChange={setFields}
267
+ recipients={recipients}
268
+ />
269
+ ```
277
270
 
278
- Data model fields are extracted from a JSON Schema structure. The component:
279
- - Groups fields by parent objects
280
- - Handles nested objects and arrays
281
- - Generates paths like `customer.name` or `items[].description`
282
- - Supports search and filtering
271
+ ### View Mode with Data
283
272
 
284
- ### E-Signature Fields
273
+ ```tsx
274
+ const [data, setData] = useState({
275
+ 'JobInformation.JobNumber': 'JOB-12345',
276
+ 'JobInformation.JobName': 'HVAC Installation',
277
+ });
278
+
279
+ <PdfView
280
+ pdfUrl={pdfUrl}
281
+ fields={fields}
282
+ data={data}
283
+ recipients={recipients}
284
+ fillingBy={['technician']}
285
+ onDataChange={(changedData) => {
286
+ setData({ ...data, ...changedData });
287
+ }}
288
+ />
289
+ ```
285
290
 
286
- E-signature fields support four subtypes:
287
- - **Signature**: Full signature field
288
- - **Initials**: Initials only
289
- - **Date Signed**: Date of signing
290
- - **Full Name**: Signer's full name
291
+ ### Toggle Between Edit and View Modes
291
292
 
292
- Each e-sign field is assigned to a recipient and generates a unique path.
293
+ ```tsx
294
+ function PdfEditorPage() {
295
+ const [fields, setFields] = useState<PdfField[]>([]);
296
+ const [isView, setIsView] = useState(false);
297
+ const [data, setData] = useState<Record<string, any>>({});
298
+
299
+ return (
300
+ <>
301
+ <Button onClick={() => setIsView(!isView)}>
302
+ {isView ? 'Edit' : 'View'}
303
+ </Button>
304
+ {!isView ? (
305
+ <PdfEditor
306
+ pdfUrl={pdfUrl}
307
+ fields={fields}
308
+ onFieldsChange={setFields}
309
+ dataModel={dataModel}
310
+ recipients={recipients}
311
+ />
312
+ ) : (
313
+ <PdfView
314
+ pdfUrl={pdfUrl}
315
+ fields={fields}
316
+ data={data}
317
+ recipients={recipients}
318
+ fillingBy={['technician']}
319
+ onDataChange={(changedData) => {
320
+ setData({ ...data, ...changedData });
321
+ }}
322
+ />
323
+ )}
324
+ </>
325
+ );
326
+ }
327
+ ```
293
328
 
294
- ### Fillable Fields
329
+ ## Field Operations
295
330
 
296
- Fillable fields support three input types:
297
- - **Text**: Single-line text input
298
- - **Date**: Date picker
299
- - **Checkbox**: Boolean checkbox
331
+ ### Adding Fields
300
332
 
301
- Fillable fields can be marked as required and assigned to recipients.
333
+ Fields are added by dragging from the sidebar onto the PDF canvas. The sidebar displays:
334
+ - **Data Model Fields**: Grouped by schema structure
335
+ - **E-Sign Fields**: Signature, initials, date signed, full name
336
+ - **Fillable Fields**: Text, date, checkbox, radio
302
337
 
303
- ## Constants
338
+ ### Configuring Fields
304
339
 
305
- - **`BASE_PAGE_WIDTH`**: 980px - Base width for PDF page rendering
340
+ Click on a field to open the configuration panel where you can:
341
+ - Change the label
342
+ - Adjust position and size
343
+ - Assign a recipient
344
+ - Set required status
345
+ - Update the data model path
306
346
 
307
- ## Development
347
+ ### Moving and Resizing
308
348
 
309
- ### Project Structure
349
+ - **Move**: Click and drag a field to reposition it
350
+ - **Resize**: Use the resize handles on field corners
310
351
 
311
- ```
312
- src/
313
- ├── components/ # React components
314
- │ ├── pdf-editor.tsx # Main editor component
315
- │ ├── pdf-document-renderer.tsx # PDF renderer
316
- │ ├── pdf-canvas.tsx # Canvas with overlays
317
- │ ├── field-sidebar.tsx
318
- │ └── ...
319
- ├── interface/ # TypeScript interfaces
320
- ├── utils/ # Utility functions
321
- ├── constants/ # Constants and enums
322
- └── styles/ # CSS stylesheets
323
- ```
352
+ ### Deleting Fields
324
353
 
325
- ### Building
354
+ Select a field and use the delete button in the configuration panel, or press the delete key.
326
355
 
327
- The project uses TypeScript and compiles to the `dist/` directory.
356
+ ## Styling
328
357
 
329
- ### TypeScript
358
+ The package includes default styles. To customize, you can override CSS classes:
330
359
 
331
- The project extends `@servicetitan/startup/tsconfig/base` and includes:
332
- - Strict type checking
333
- - Composite project support
334
- - Source maps generation
360
+ - `.dte-pdf-editor`: Main editor container
361
+ - `.dte-pdf-view-container`: View mode container
362
+ - `.dte-pdf-wrapper`: PDF document wrapper
363
+ - `.dte-pdf-field-overlay`: Field overlay container
364
+ - `.dte-pdf-editor-sidebar-container`: Sidebar container
335
365
 
336
366
  ## Browser Support
337
367
 
338
- The component requires modern browsers with support for:
339
- - ES6+ JavaScript
340
- - CSS Grid and Flexbox
341
- - HTML5 Drag and Drop API
368
+ This package requires modern browsers with support for:
369
+ - ES6+
342
370
  - Canvas API
371
+ - Drag and Drop API
343
372
 
344
373
  ## License
345
374
 
346
- This package is part of the ServiceTitan Document Template Engine components.
347
-
348
- ## Contributing
349
-
350
- When contributing to this package:
351
- 1. Follow TypeScript best practices
352
- 2. Maintain component prop interfaces
353
- 3. Update this README for API changes
354
- 4. Ensure styles are scoped to component classes
355
- 5. Test drag-and-drop functionality across browsers
356
-
375
+ Copyright © ServiceTitan
@@ -1,6 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { PdfField } from '../interface/pdf-editor';
3
- import { RecipientInfo } from './pdf-editor';
2
+ import { PdfField, RecipientInfo } from '../../interface/types';
4
3
  interface FieldConfigPanelOverlayProps {
5
4
  selectedField: PdfField;
6
5
  recipients?: RecipientInfo[];
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field-config-panel-overlay.d.ts","sourceRoot":"","sources":["../../../src/components/field-config-panel/field-config-panel-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGhE,UAAU,4BAA4B;IAClC,aAAa,EAAE,QAAQ,CAAC;IACxB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACtD,aAAa,IAAI,IAAI,CAAC;IACtB,eAAe,CAAC,IAAI,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAmCpE,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field-config-panel-overlay.js","sourceRoot":"","sources":["../../../src/components/field-config-panel/field-config-panel-overlay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,SAAS,MAAM,4DAA4D,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAUxD,MAAM,CAAC,MAAM,uBAAuB,GAAqC,CAAC,EACtE,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,UAAU,EACV,aAAa,GAChB,EAAE,EAAE;IACD,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAC,gCAAgC,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAC9E,MAAC,IAAI,IACD,SAAS,EAAC,+BAA+B,EACzC,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,aAE9B,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,oCAEtC,EACP,KAAC,MAAM,IACH,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,eAAe,gBACb,OAAO,EAClB,IAAI,EAAE,SAAS,GACjB,IACC,EACP,cAAK,SAAS,EAAC,gCAAgC,YAC3C,KAAC,gBAAgB,IACb,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,GAC9B,GACA,IACH,CACV,CAAC;AACN,CAAC,CAAC"}
@@ -1,6 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { PdfField } from '../interface/pdf-editor';
3
- import { RecipientInfo } from './pdf-editor';
2
+ import { PdfField, RecipientInfo } from '../../interface/types';
4
3
  interface FieldConfigPanelProps {
5
4
  field: PdfField;
6
5
  recipients?: RecipientInfo[];
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field-config-panel.d.ts","sourceRoot":"","sources":["../../../src/components/field-config-panel/field-config-panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAiC,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG/F,UAAU,qBAAqB;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,aAAa,IAAI,IAAI,CAAC;IACtB,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;CACzD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqItD,CAAC"}