@servicetitan/dte-pdf-editor 1.82.0 → 1.83.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.
- package/dist/components/pdf-view/pdf-view-field-container.d.ts +1 -0
- package/dist/components/pdf-view/pdf-view-field-container.d.ts.map +1 -1
- package/dist/components/pdf-view/pdf-view-field-container.js +3 -3
- package/dist/components/pdf-view/pdf-view-field-container.js.map +1 -1
- package/dist/components/pdf-view/pdf-view.d.ts.map +1 -1
- package/dist/components/pdf-view/pdf-view.js +28 -21
- package/dist/components/pdf-view/pdf-view.js.map +1 -1
- package/dist/styles/pdf-canvas.css +4 -0
- package/dist/styles/pdf-editor.css +4 -0
- package/dist/utils/field/get-navigable-fields.utils.d.ts +3 -0
- package/dist/utils/field/get-navigable-fields.utils.d.ts.map +1 -0
- package/dist/utils/field/get-navigable-fields.utils.js +13 -0
- package/dist/utils/field/get-navigable-fields.utils.js.map +1 -0
- package/dist/utils/field/index.d.ts +1 -0
- package/dist/utils/field/index.d.ts.map +1 -1
- package/dist/utils/field/index.js +1 -0
- package/dist/utils/field/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/pdf-view/pdf-view-field-container.tsx +5 -1
- package/src/components/pdf-view/pdf-view.tsx +37 -33
- package/src/styles/pdf-canvas.css +4 -0
- package/src/styles/pdf-editor.css +4 -0
- package/src/utils/field/get-navigable-fields.utils.ts +24 -0
- package/src/utils/field/index.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdf-view-field-container.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-field-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5E,UAAU,qBAAqB;IAC3B,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,QAAQ,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"pdf-view-field-container.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-field-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5E,UAAU,qBAAqB;IAC3B,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,QAAQ,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAkD9E,CAAC"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
3
|
import { evaluateDisplayCondition, getFieldBackgroundColor, getFieldBoundsStyle, getPagePosition, } from '../../utils';
|
|
4
|
-
export const PdfViewFieldContainer = ({ children, data, error, field, pdfWrapperRef, recipientsColors, zoom = 1, }) => {
|
|
4
|
+
export const PdfViewFieldContainer = ({ children, data, error, field, onFocus, pdfWrapperRef, recipientsColors, zoom = 1, }) => {
|
|
5
5
|
const visible = !field.displayCondition || evaluateDisplayCondition(field.displayCondition, data);
|
|
6
6
|
if (!visible) {
|
|
7
7
|
return null;
|
|
8
8
|
}
|
|
9
9
|
const pagePos = getPagePosition(field.page, pdfWrapperRef);
|
|
10
10
|
const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
|
|
11
|
-
return (_jsxs(Fragment, { children: [_jsx("div", { id: `dte-pdf-field-${field.id}`, className:
|
|
11
|
+
return (_jsxs(Fragment, { children: [_jsx("div", { id: `dte-pdf-field-${field.id}`, className: `dte-pdf-field-view --${field.type}`, tabIndex: -1, style: getFieldBoundsStyle(field, {
|
|
12
12
|
pageOffset: pagePos,
|
|
13
13
|
backgroundColor: bgColor,
|
|
14
14
|
borderColor: error ? 'red' : undefined,
|
|
15
15
|
zoom,
|
|
16
|
-
}), children: children }), error && (_jsx("span", { style: {
|
|
16
|
+
}), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(field.id), children: children }), error && (_jsx("span", { style: {
|
|
17
17
|
color: 'red',
|
|
18
18
|
top: pagePos.top + (field.y + field.height) * zoom + 8,
|
|
19
19
|
left: pagePos.left + field.x * zoom,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdf-view-field-container.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-field-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAgC,MAAM,OAAO,CAAC;AAEnE,OAAO,EACH,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,eAAe,GAClB,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"pdf-view-field-container.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-field-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAgC,MAAM,OAAO,CAAC;AAEnE,OAAO,EACH,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,eAAe,GAClB,MAAM,aAAa,CAAC;AAYrB,MAAM,CAAC,MAAM,qBAAqB,GAAiD,CAAC,EAChF,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,IAAI,GAAG,CAAC,GACX,EAAE,EAAE;IACD,MAAM,OAAO,GACT,CAAC,KAAK,CAAC,gBAAgB,IAAI,wBAAwB,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;IAEtF,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;IAC3E,OAAO,CACH,MAAC,QAAQ,eACL,cACI,EAAE,EAAE,iBAAiB,KAAK,CAAC,EAAE,EAAE,EAC/B,SAAS,EAAE,wBAAwB,KAAK,CAAC,IAAI,EAAE,EAC/C,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAAE;oBAC9B,UAAU,EAAE,OAAO;oBACnB,eAAe,EAAE,OAAO;oBACxB,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;oBACtC,IAAI;iBACP,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,EAAE,CAAC,YAEjC,QAAQ,GACP,EACL,KAAK,IAAI,CACN,eACI,KAAK,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,GAAG,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC;oBACtD,IAAI,EAAE,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI;oBACnC,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,UAAU;iBACvB,YAEA,KAAK,GACH,CACV,IACM,CACd,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdf-view.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"pdf-view.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAGjE,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,eAAe,EAEpB,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,aAAa,EACrB,MAAM,uBAAuB,CAAC;AAe/B,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,aAAa,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,YAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxE;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA6KpC,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Flex } from '@servicetitan/anvil2';
|
|
3
|
-
import {
|
|
3
|
+
import { useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { BASE_PAGE_WIDTH } from '../../constants';
|
|
5
5
|
import { useZoom } from '../../hooks';
|
|
6
6
|
import { FieldTypeEnum, } from '../../interface/types';
|
|
7
|
-
import {
|
|
7
|
+
import { getNavigableFieldsUtils, mapColorsToRecipients, sortFieldsByReadingOrder, } from '../../utils';
|
|
8
8
|
import { CanvasControls } from '../pdf-canvas/canvas-controls';
|
|
9
9
|
import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
|
|
10
10
|
import { PdfViewCalculated } from './pdf-view-calculated';
|
|
@@ -17,6 +17,7 @@ export const PdfView = ({ data, enableInputNavigation = true, errorPlaceholder,
|
|
|
17
17
|
const [isPdfLoaded, setIsPdfLoaded] = useState(false);
|
|
18
18
|
const [previewData, setPreviewData] = useState(data !== null && data !== void 0 ? data : {});
|
|
19
19
|
const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
|
|
20
|
+
const activeData = viewMode === 'preview' ? previewData : data;
|
|
20
21
|
const pdfWrapperRef = useRef(null);
|
|
21
22
|
const onDocumentLoadSuccess = (pageNum) => {
|
|
22
23
|
setIsPdfLoaded(true);
|
|
@@ -31,32 +32,38 @@ export const PdfView = ({ data, enableInputNavigation = true, errorPlaceholder,
|
|
|
31
32
|
}
|
|
32
33
|
onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(data, field);
|
|
33
34
|
};
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
.filter(field => field.type === FieldTypeEnum.fillable &&
|
|
37
|
-
field.recipient &&
|
|
38
|
-
(fillingBy === null || fillingBy === void 0 ? void 0 : fillingBy.includes(field.recipient)))
|
|
39
|
-
.filter(field => !field.displayCondition ||
|
|
40
|
-
evaluateDisplayCondition(field.displayCondition, activeData))), [fields, activeData, fillingBy]);
|
|
35
|
+
const navigableFields = useMemo(() => sortFieldsByReadingOrder(getNavigableFieldsUtils(fields, fillingBy !== null && fillingBy !== void 0 ? fillingBy : [], activeData !== null && activeData !== void 0 ? activeData : {})), [fields, activeData, fillingBy]);
|
|
36
|
+
const navigableFieldIndexById = useMemo(() => new Map(navigableFields.map((field, index) => [field.id, index])), [navigableFields]);
|
|
41
37
|
// -1 means no field has been navigated to yet, so the first "next" lands on index 0.
|
|
42
38
|
const [currentFieldIndex, setCurrentFieldIndex] = useState(-1);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const goToField = (index) => {
|
|
47
|
-
var _a, _b;
|
|
48
|
-
const field = navigableFields[index];
|
|
49
|
-
if (!field) {
|
|
50
|
-
return;
|
|
39
|
+
const handleFieldOverlayFocus = (fieldId) => {
|
|
40
|
+
if (navigableFieldIndexById.has(fieldId)) {
|
|
41
|
+
setCurrentFieldIndex(navigableFieldIndexById.get(fieldId));
|
|
51
42
|
}
|
|
52
|
-
|
|
43
|
+
};
|
|
44
|
+
const handleFocusField = (fieldId) => {
|
|
45
|
+
var _a, _b;
|
|
53
46
|
const root = (_a = pdfWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode();
|
|
54
|
-
const fieldEl = root === null || root === void 0 ? void 0 : root.querySelector(`[id="dte-pdf-field-${
|
|
47
|
+
const fieldEl = root === null || root === void 0 ? void 0 : root.querySelector(`[id="dte-pdf-field-${fieldId}"]`);
|
|
55
48
|
fieldEl === null || fieldEl === void 0 ? void 0 : fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
56
|
-
(_b = fieldEl === null || fieldEl === void 0 ? void 0 : fieldEl.querySelector('input, textarea'))
|
|
49
|
+
const focusableElement = (_b = fieldEl === null || fieldEl === void 0 ? void 0 : fieldEl.querySelector('input, textarea')) !== null && _b !== void 0 ? _b : fieldEl;
|
|
50
|
+
focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.focus();
|
|
51
|
+
};
|
|
52
|
+
const goToField = (index) => {
|
|
53
|
+
let i = index;
|
|
54
|
+
if (i < 0) {
|
|
55
|
+
i = 0;
|
|
56
|
+
}
|
|
57
|
+
else if (i >= navigableFields.length) {
|
|
58
|
+
i = navigableFields.length - 1;
|
|
59
|
+
}
|
|
60
|
+
const field = navigableFields[i];
|
|
61
|
+
setCurrentFieldIndex(i);
|
|
62
|
+
handleFocusField(field.id);
|
|
57
63
|
};
|
|
58
64
|
const recipientsColors = mapColorsToRecipients(recipients);
|
|
59
|
-
|
|
65
|
+
const hasNavigableFields = navigableFields.length === 0;
|
|
66
|
+
return (_jsxs(Flex, { flex: 1, className: "dte-pdf-editor-theme dte-pdf-editor-content-container --view-mode", direction: "column", children: [isPdfLoaded && (_jsx(CanvasControls, { 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) })), _jsxs("div", { ref: pdfWrapperRef, className: "dte-pdf-wrapper", style: { width: BASE_PAGE_WIDTH * zoom }, children: [_jsx(PdfDocumentRenderer, { pdfUrl: pdfUrl, loading: loading, pageWidth: BASE_PAGE_WIDTH * zoom, errorPlaceholder: errorPlaceholder, loadingPlaceholder: loadingPlaceholder, onDocumentLoadSuccess: onDocumentLoadSuccess }), isPdfLoaded && (_jsx("div", { className: "dte-pdf-field-overlay --view-mode", children: fields.map(field => (_jsxs(PdfViewFieldContainer, { field: field, data: viewMode === 'preview' ? previewData : data, error: errors[field.path] || '', recipientsColors: recipientsColors, pdfWrapperRef: pdfWrapperRef, zoom: zoom, onFocus: handleFieldOverlayFocus, children: [(field.type === FieldTypeEnum.dataModel ||
|
|
60
67
|
field.type === FieldTypeEnum.forms) && (_jsx(PdfViewDataModel, { field: field, data: viewMode === 'preview' ? previewData : data })), field.type === FieldTypeEnum.eSign && (_jsx(PdfViewESign, { field: field })), field.type === FieldTypeEnum.calculated && (_jsx(PdfViewCalculated, { field: field, data: viewMode === 'preview' ? previewData : data, holidays: holidays, viewMode: viewMode })), field.type === FieldTypeEnum.fillable && (_jsx(PdfViewFillable, { data: viewMode === 'preview' ? previewData : data, field: field, readOnly: makeFillableFieldsReadonly, fillingBy: fillingBy, viewMode: viewMode, onDataChange: handleDataChange })), field.type === FieldTypeEnum.generic && (_jsx(PdfViewGeneric, { field: field }))] }, field.id))) }))] })] }));
|
|
61
68
|
};
|
|
62
69
|
//# sourceMappingURL=pdf-view.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdf-view.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAiB,
|
|
1
|
+
{"version":3,"file":"pdf-view.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-navigable-fields.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/field/get-navigable-fields.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKtF,eAAO,MAAM,uBAAuB,GAChC,QAAQ,QAAQ,EAAE,EAClB,WAAW,MAAM,EAAE,EACnB,YAAY,eAAe,eAe9B,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FieldTypeEnum } from '../../interface/types';
|
|
2
|
+
import { evaluateDisplayCondition } from '../conditions';
|
|
3
|
+
const navigableFields = [FieldTypeEnum.fillable, FieldTypeEnum.eSign];
|
|
4
|
+
export const getNavigableFieldsUtils = (fields, fillingBy, activeData) => {
|
|
5
|
+
if (!(fillingBy === null || fillingBy === void 0 ? void 0 : fillingBy.length)) {
|
|
6
|
+
return [];
|
|
7
|
+
}
|
|
8
|
+
return fields
|
|
9
|
+
.filter(field => { var _a; return navigableFields.includes(field.type) && fillingBy.includes((_a = field.recipient) !== null && _a !== void 0 ? _a : ''); })
|
|
10
|
+
.filter(field => !field.displayCondition ||
|
|
11
|
+
evaluateDisplayCondition(field.displayCondition, activeData));
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=get-navigable-fields.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-navigable-fields.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-navigable-fields.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAY,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,eAAe,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,MAAkB,EAClB,SAAmB,EACnB,UAA2B,EAC7B,EAAE;IACA,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA,EAAE,CAAC;QACrB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,OAAO,MAAM;SACR,MAAM,CACH,KAAK,CAAC,EAAE,WACJ,OAAA,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,CAAC,CAAA,EAAA,CACxF;SACA,MAAM,CACH,KAAK,CAAC,EAAE,CACJ,CAAC,KAAK,CAAC,gBAAgB;QACvB,wBAAwB,CAAC,KAAK,CAAC,gBAAgB,EAAE,UAAU,CAAC,CACnE,CAAC;AACV,CAAC,CAAC"}
|
|
@@ -9,4 +9,5 @@ export * from './get-field-bounds-style.utils';
|
|
|
9
9
|
export * from './get-field-font-size.utils';
|
|
10
10
|
export * from './get-field-text-clip.utils';
|
|
11
11
|
export * from './get-field-typography.utils';
|
|
12
|
+
export * from './get-navigable-fields.utils';
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}
|
|
@@ -9,4 +9,5 @@ export * from './get-field-bounds-style.utils';
|
|
|
9
9
|
export * from './get-field-font-size.utils';
|
|
10
10
|
export * from './get-field-text-clip.utils';
|
|
11
11
|
export * from './get-field-typography.utils';
|
|
12
|
+
export * from './get-navigable-fields.utils';
|
|
12
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}
|
package/package.json
CHANGED
|
@@ -14,6 +14,7 @@ interface PdfViewFieldContainer {
|
|
|
14
14
|
field: PdfField;
|
|
15
15
|
recipientsColors: Record<string, string>;
|
|
16
16
|
zoom?: number;
|
|
17
|
+
onFocus?: (fieldId: string) => void;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>> = ({
|
|
@@ -21,6 +22,7 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
|
|
|
21
22
|
data,
|
|
22
23
|
error,
|
|
23
24
|
field,
|
|
25
|
+
onFocus,
|
|
24
26
|
pdfWrapperRef,
|
|
25
27
|
recipientsColors,
|
|
26
28
|
zoom = 1,
|
|
@@ -38,13 +40,15 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
|
|
|
38
40
|
<Fragment>
|
|
39
41
|
<div
|
|
40
42
|
id={`dte-pdf-field-${field.id}`}
|
|
41
|
-
className=
|
|
43
|
+
className={`dte-pdf-field-view --${field.type}`}
|
|
44
|
+
tabIndex={-1}
|
|
42
45
|
style={getFieldBoundsStyle(field, {
|
|
43
46
|
pageOffset: pagePos,
|
|
44
47
|
backgroundColor: bgColor,
|
|
45
48
|
borderColor: error ? 'red' : undefined,
|
|
46
49
|
zoom,
|
|
47
50
|
})}
|
|
51
|
+
onFocus={() => onFocus?.(field.id)}
|
|
48
52
|
>
|
|
49
53
|
{children}
|
|
50
54
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Flex } from '@servicetitan/anvil2';
|
|
2
|
-
import { FC, ReactNode,
|
|
2
|
+
import { FC, ReactNode, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { BASE_PAGE_WIDTH } from '../../constants';
|
|
4
4
|
import { useZoom } from '../../hooks';
|
|
5
5
|
import {
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
type RecipientInfo,
|
|
12
12
|
} from '../../interface/types';
|
|
13
13
|
import {
|
|
14
|
-
|
|
14
|
+
getNavigableFieldsUtils,
|
|
15
15
|
mapColorsToRecipients,
|
|
16
16
|
sortFieldsByReadingOrder,
|
|
17
17
|
} from '../../utils';
|
|
@@ -79,6 +79,7 @@ export const PdfView: FC<PdfViewProps> = ({
|
|
|
79
79
|
const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
|
|
80
80
|
const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
|
|
81
81
|
const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
|
|
82
|
+
const activeData = viewMode === 'preview' ? previewData : data;
|
|
82
83
|
|
|
83
84
|
const pdfWrapperRef = useRef<HTMLDivElement>(null);
|
|
84
85
|
|
|
@@ -97,53 +98,55 @@ export const PdfView: FC<PdfViewProps> = ({
|
|
|
97
98
|
onDataChange?.(data, field);
|
|
98
99
|
};
|
|
99
100
|
|
|
100
|
-
const activeData = viewMode === 'preview' ? previewData : data;
|
|
101
|
-
|
|
102
101
|
const navigableFields = useMemo(
|
|
103
102
|
() =>
|
|
104
103
|
sortFieldsByReadingOrder(
|
|
105
|
-
fields
|
|
106
|
-
.filter(
|
|
107
|
-
field =>
|
|
108
|
-
field.type === FieldTypeEnum.fillable &&
|
|
109
|
-
field.recipient &&
|
|
110
|
-
fillingBy?.includes(field.recipient),
|
|
111
|
-
)
|
|
112
|
-
.filter(
|
|
113
|
-
field =>
|
|
114
|
-
!field.displayCondition ||
|
|
115
|
-
evaluateDisplayCondition(field.displayCondition, activeData),
|
|
116
|
-
),
|
|
104
|
+
getNavigableFieldsUtils(fields, fillingBy ?? [], activeData ?? {}),
|
|
117
105
|
),
|
|
118
106
|
[fields, activeData, fillingBy],
|
|
119
107
|
);
|
|
120
108
|
|
|
109
|
+
const navigableFieldIndexById = useMemo(
|
|
110
|
+
() => new Map(navigableFields.map((field, index) => [field.id, index])),
|
|
111
|
+
[navigableFields],
|
|
112
|
+
);
|
|
113
|
+
|
|
121
114
|
// -1 means no field has been navigated to yet, so the first "next" lands on index 0.
|
|
122
115
|
const [currentFieldIndex, setCurrentFieldIndex] = useState(-1);
|
|
123
116
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
const goToField = (index: number) => {
|
|
129
|
-
const field = navigableFields[index];
|
|
130
|
-
if (!field) {
|
|
131
|
-
return;
|
|
117
|
+
const handleFieldOverlayFocus = (fieldId: string) => {
|
|
118
|
+
if (navigableFieldIndexById.has(fieldId)) {
|
|
119
|
+
setCurrentFieldIndex(navigableFieldIndexById.get(fieldId)!);
|
|
132
120
|
}
|
|
121
|
+
};
|
|
133
122
|
|
|
134
|
-
|
|
135
|
-
|
|
123
|
+
const handleFocusField = (fieldId: string) => {
|
|
136
124
|
const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
|
|
137
|
-
const fieldEl = root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${
|
|
125
|
+
const fieldEl = root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`);
|
|
138
126
|
fieldEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
139
|
-
fieldEl?.querySelector<HTMLElement>('input, textarea')
|
|
127
|
+
const focusableElement = fieldEl?.querySelector<HTMLElement>('input, textarea') ?? fieldEl;
|
|
128
|
+
focusableElement?.focus();
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
const goToField = (index: number) => {
|
|
132
|
+
let i = index;
|
|
133
|
+
if (i < 0) {
|
|
134
|
+
i = 0;
|
|
135
|
+
} else if (i >= navigableFields.length) {
|
|
136
|
+
i = navigableFields.length - 1;
|
|
137
|
+
}
|
|
138
|
+
const field = navigableFields[i];
|
|
139
|
+
|
|
140
|
+
setCurrentFieldIndex(i);
|
|
141
|
+
handleFocusField(field.id);
|
|
140
142
|
};
|
|
141
143
|
|
|
142
144
|
const recipientsColors = mapColorsToRecipients(recipients);
|
|
145
|
+
const hasNavigableFields = navigableFields.length === 0;
|
|
143
146
|
return (
|
|
144
147
|
<Flex
|
|
145
148
|
flex={1}
|
|
146
|
-
className="dte-pdf-editor-theme dte-pdf-editor-content-container"
|
|
149
|
+
className="dte-pdf-editor-theme dte-pdf-editor-content-container --view-mode"
|
|
147
150
|
direction="column"
|
|
148
151
|
>
|
|
149
152
|
{isPdfLoaded && (
|
|
@@ -154,10 +157,10 @@ export const PdfView: FC<PdfViewProps> = ({
|
|
|
154
157
|
zoomable={zoomable}
|
|
155
158
|
onResetZoom={resetZoom}
|
|
156
159
|
enableInputNavigation={enableInputNavigation}
|
|
157
|
-
disabledPrev={
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
disabledOnLastField={
|
|
160
|
+
disabledPrev={hasNavigableFields}
|
|
161
|
+
disabledNext={hasNavigableFields}
|
|
162
|
+
disabledOnFirstField={hasNavigableFields}
|
|
163
|
+
disabledOnLastField={hasNavigableFields}
|
|
161
164
|
onPrevField={() => goToField(currentFieldIndex - 1)}
|
|
162
165
|
onNextField={() => goToField(currentFieldIndex + 1)}
|
|
163
166
|
onFirstField={() => goToField(0)}
|
|
@@ -188,6 +191,7 @@ export const PdfView: FC<PdfViewProps> = ({
|
|
|
188
191
|
recipientsColors={recipientsColors}
|
|
189
192
|
pdfWrapperRef={pdfWrapperRef}
|
|
190
193
|
zoom={zoom}
|
|
194
|
+
onFocus={handleFieldOverlayFocus}
|
|
191
195
|
>
|
|
192
196
|
{(field.type === FieldTypeEnum.dataModel ||
|
|
193
197
|
field.type === FieldTypeEnum.forms) && (
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type DataModelValues, FieldTypeEnum, PdfField } from '../../interface/types';
|
|
2
|
+
import { evaluateDisplayCondition } from '../conditions';
|
|
3
|
+
|
|
4
|
+
const navigableFields = [FieldTypeEnum.fillable, FieldTypeEnum.eSign];
|
|
5
|
+
|
|
6
|
+
export const getNavigableFieldsUtils = (
|
|
7
|
+
fields: PdfField[],
|
|
8
|
+
fillingBy: string[],
|
|
9
|
+
activeData: DataModelValues,
|
|
10
|
+
) => {
|
|
11
|
+
if (!fillingBy?.length) {
|
|
12
|
+
return [];
|
|
13
|
+
}
|
|
14
|
+
return fields
|
|
15
|
+
.filter(
|
|
16
|
+
field =>
|
|
17
|
+
navigableFields.includes(field.type) && fillingBy.includes(field.recipient ?? ''),
|
|
18
|
+
)
|
|
19
|
+
.filter(
|
|
20
|
+
field =>
|
|
21
|
+
!field.displayCondition ||
|
|
22
|
+
evaluateDisplayCondition(field.displayCondition, activeData),
|
|
23
|
+
);
|
|
24
|
+
};
|
package/src/utils/field/index.ts
CHANGED