@verdocs/web-sdk 6.13.2 → 6.14.0

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -17,6 +17,11 @@ const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="
 const iconDropdown = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
 const iconAttachment = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';
 const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
+const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'page', 'multiline'];
+// We save a burst of arrow-key nudges once the keys go quiet instead of on every press.
+const NUDGE_SAVE_DELAY_MS = 400;
+const MAX_UNDO = 50;
+const isTypingTarget = (el) => !!el && (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName) || el.isContentEditable);
 const menuOptions = [
     { id: 'signature', tooltip: 'Signature', icon: iconSignature, class: 'signature' },
     { id: 'initial', tooltip: 'Initials', icon: iconInitial, class: 'initial' },
@@ -63,24 +68,91 @@ export class VerdocsTemplateFields {
         this.loading = true;
         this.template = null;
         this.pageHeights = {};
+        // Selection lives on the DOM (a class on the field element) so picking a field doesn't re-render every page.
+        this.selectedFieldName = null;
+        // Undo entries are recorded only once their save lands, so the stack never holds a change the server didn't take.
+        this.undoStack = [];
+        this.pendingNudge = null;
+        this.nudgeTimer = null;
+        this.dragBefore = null;
+        // Geometry we've sent but the server hasn't confirmed yet, so a new nudge or undo starts from where the field is drawn.
+        this.optimistic = new Map();
+        this.inFlight = new Set();
+        // Field components save their own resizes and announce them with settingsChanged; undo waits for that.
+        this.pendingResizes = new Map();
+        // Stable references so makeDraggable can re-bind them on every render without stacking duplicates.
+        this.handleFieldTap = (e) => { var _a, _b; return this.selectField(((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'fieldname')) || null); };
+        this.handleFieldResizeStart = (e) => {
+            var _a, _b;
+            const name = ((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'fieldname')) || null;
+            this.flushNudge();
+            this.selectField(name);
+            this.startResize(name);
+        };
         this.cachedPageInfo = {};
     }
     onTemplateIdChanged() {
         this.listenToTemplate();
     }
-    // Stop field-placement mode if ESC is pressed
+    // Escape clears placement and selection, arrows nudge the selected field (Shift for 10pt), and Cmd/Ctrl+Z undoes a move or resize.
     handleKeyDown(ev) {
+        var _a, _b;
         if (ev.key === 'Escape') {
             this.placing = null;
+            this.selectField(null);
+            return;
+        }
+        // composedPath reaches inputs inside a host page's shadow DOM, where activeElement would only show the host.
+        const target = (((_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)[0]) || ev.target);
+        if (ev.defaultPrevented || isTypingTarget(target)) {
+            return;
+        }
+        // Keys pressed in a dialog, menu, or anything else outside the builder belong to that control.
+        if (target !== document.body && target !== document.documentElement && !this.el.contains(target)) {
+            return;
+        }
+        if ((ev.metaKey || ev.ctrlKey) && !ev.shiftKey && !ev.altKey && ev.key.toLowerCase() === 'z') {
+            if (this.pendingNudge || this.undoStack.length > 0 || this.inFlight.size > 0 || this.pendingResizes.size > 0) {
+                ev.preventDefault();
+                this.undo();
+            }
+            return;
         }
+        const step = ev.shiftKey ? 10 : 1;
+        const delta = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] }[ev.key];
+        if (!delta || !this.selectedFieldName || ev.metaKey || ev.ctrlKey || ev.altKey) {
+            return;
+        }
+        // Once the selected field has scrolled out of view, arrows go back to scrolling the page.
+        const field = this.findField(this.selectedFieldName);
+        const rect = field ? (_b = document.getElementById(getFieldId(field))) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() : null;
+        if (!rect || rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth) {
+            this.selectField(null);
+            return;
+        }
+        ev.preventDefault();
+        this.nudge(delta[0], delta[1]);
     }
-    handleFieldSettingsChanged() {
+    handleFieldSettingsChanged(e) {
         var _a;
+        const { fieldName, field } = e.detail || {};
+        if (field && fieldName && field.name !== fieldName) {
+            this.renameFieldState(fieldName, field.name);
+        }
+        const resize = field ? this.pendingResizes.get(field.name) : null;
+        if (resize) {
+            this.recordUndo(field.name, resize.before, field);
+            resize.settle();
+        }
         (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
     }
-    handleFieldDeleted() {
-        var _a;
-        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
+    handleFieldDeleted(e) {
+        var _a, _b;
+        const name = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.fieldName;
+        if (name) {
+            this.forgetField(name);
+        }
+        (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -116,6 +188,7 @@ export class VerdocsTemplateFields {
             toolbarEl.remove();
             toolbarTarget.append(toolbarEl);
         }
+        this.applySelection();
     }
     componentWillUpdate() {
         var _a, _b;
@@ -128,6 +201,8 @@ export class VerdocsTemplateFields {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
+        this.flushNudge();
+        this.selectField(null);
     }
     async listenToTemplate() {
         this.unlistenToTemplate();
@@ -173,13 +248,196 @@ export class VerdocsTemplateFields {
         });
     }
     makeDraggable(el) {
-        interact(el).draggable({
+        interact(el)
+            .draggable({
             listeners: {
+                start: this.handleMoveStart.bind(this),
                 move: this.handleMoveField.bind(this),
                 end: this.handleMoveEnd.bind(this),
             },
+        })
+            .off('tap', this.handleFieldTap)
+            .on('tap', this.handleFieldTap)
+            .off('resizestart', this.handleFieldResizeStart)
+            .on('resizestart', this.handleFieldResizeStart);
+    }
+    findField(name) {
+        var _a;
+        return name ? (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).find(field => field.name === name) : undefined;
+    }
+    // Where the field is drawn right now: its saved geometry plus anything still on its way to the server.
+    currentGeometry(field) {
+        const { x, y, width, height, page, multiline } = { ...field, ...this.optimistic.get(field.name) };
+        return { x, y, width, height, page, multiline };
+    }
+    selectField(name) {
+        if (this.pendingNudge && this.pendingNudge.name !== name) {
+            this.flushNudge();
+        }
+        this.selectedFieldName = name;
+        this.applySelection();
+    }
+    applySelection() {
+        var _a;
+        document.querySelectorAll('.verdocs-field-selected').forEach(el => el.classList.remove('verdocs-field-selected'));
+        const field = this.findField(this.selectedFieldName);
+        if (field) {
+            (_a = document.getElementById(getFieldId(field))) === null || _a === void 0 ? void 0 : _a.classList.add('verdocs-field-selected');
+        }
+    }
+    recordUndo(name, before, after) {
+        if (GEOMETRY_KEYS.some(key => after[key] !== undefined && after[key] !== before[key])) {
+            this.undoStack.push({ name, before });
+            this.undoStack.splice(0, Math.max(0, this.undoStack.length - MAX_UNDO));
+        }
+    }
+    startResize(name) {
+        var _a;
+        const field = this.findField(name);
+        if (!field) {
+            return;
+        }
+        (_a = this.pendingResizes.get(field.name)) === null || _a === void 0 ? void 0 : _a.settle();
+        let settle;
+        const done = new Promise(resolve => (settle = resolve));
+        const entry = { before: this.currentGeometry(field), settle: () => settle(), done };
+        this.pendingResizes.set(field.name, entry);
+        // A failed resize never announces itself, so stop waiting on it after a while.
+        const timer = setTimeout(() => entry.settle(), 5000);
+        done.then(() => {
+            clearTimeout(timer);
+            if (this.pendingResizes.get(field.name) === entry) {
+                this.pendingResizes.delete(field.name);
+            }
         });
     }
+    renameFieldState(oldName, newName) {
+        this.undoStack.forEach(entry => entry.name === oldName && (entry.name = newName));
+        if (this.selectedFieldName === oldName) {
+            this.selectedFieldName = newName;
+        }
+    }
+    forgetField(name) {
+        var _a, _b;
+        this.undoStack = this.undoStack.filter(entry => entry.name !== name);
+        this.optimistic.delete(name);
+        (_a = this.pendingResizes.get(name)) === null || _a === void 0 ? void 0 : _a.settle();
+        if (((_b = this.pendingNudge) === null || _b === void 0 ? void 0 : _b.name) === name) {
+            clearTimeout(this.nudgeTimer);
+            this.nudgeTimer = null;
+            this.pendingNudge = null;
+        }
+        if (this.selectedFieldName === name) {
+            this.selectField(null);
+        }
+    }
+    drawField(field, geometry = {}) {
+        var _a, _b;
+        const pageInfo = (_a = this.cachedPageInfo[field.document_id]) === null || _a === void 0 ? void 0 : _a[(_b = geometry.page) !== null && _b !== void 0 ? _b : field.page];
+        const el = document.getElementById(getFieldId(field));
+        if (el && pageInfo) {
+            setControlStyles(el, { ...field, ...geometry }, pageInfo.xScale, pageInfo.yScale);
+        }
+    }
+    nudge(dx, dy) {
+        var _a, _b, _c, _d, _e;
+        const field = this.findField(this.selectedFieldName);
+        if (!field || !document.getElementById(getFieldId(field)) || !((_a = this.cachedPageInfo[field.document_id]) === null || _a === void 0 ? void 0 : _a[field.page])) {
+            return;
+        }
+        if (((_b = this.pendingNudge) === null || _b === void 0 ? void 0 : _b.name) !== field.name) {
+            this.flushNudge();
+            const before = this.currentGeometry(field);
+            this.pendingNudge = { name: field.name, before, x: before.x, y: before.y };
+        }
+        // Keep the whole field on the page, measured in PDF points.
+        const pageSize = (_e = (_d = (((_c = this.template) === null || _c === void 0 ? void 0 : _c.documents) || []).find(doc => doc.id === field.document_id)) === null || _d === void 0 ? void 0 : _d.page_sizes) === null || _e === void 0 ? void 0 : _e[field.page];
+        const maxX = ((pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612) - (field.width || defaultWidth(field.type));
+        const maxY = ((pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792) - (field.height || defaultHeight(field.type));
+        this.pendingNudge.x = Math.min(Math.max(this.pendingNudge.x + dx, 0), maxX);
+        this.pendingNudge.y = Math.min(Math.max(this.pendingNudge.y + dy, 0), maxY);
+        this.drawField(field, { x: this.pendingNudge.x, y: this.pendingNudge.y });
+        if (this.nudgeTimer) {
+            clearTimeout(this.nudgeTimer);
+        }
+        this.nudgeTimer = setTimeout(() => this.flushNudge(), NUDGE_SAVE_DELAY_MS);
+    }
+    async flushNudge() {
+        if (this.nudgeTimer) {
+            clearTimeout(this.nudgeTimer);
+            this.nudgeTimer = null;
+        }
+        const pending = this.pendingNudge;
+        this.pendingNudge = null;
+        if (pending) {
+            await this.saveGeometry(pending.name, { x: pending.x, y: pending.y }, pending.before);
+        }
+    }
+    async undo() {
+        await this.flushNudge();
+        await Promise.all([...this.inFlight, ...[...this.pendingResizes.values()].map(resize => resize.done)]);
+        while (this.undoStack.length > 0) {
+            const { name, before } = this.undoStack.pop();
+            const field = this.findField(name);
+            if (field && GEOMETRY_KEYS.some(key => field[key] !== before[key])) {
+                this.selectField(name);
+                await this.saveGeometry(name, before);
+                return;
+            }
+        }
+    }
+    // Saves a move, nudge, or undo, drawing the field at its new spot right away. Pass `before` to make it undoable.
+    saveGeometry(name, geometry, before) {
+        const field = this.findField(name);
+        if (!field) {
+            return Promise.resolve();
+        }
+        const sent = { ...geometry };
+        this.optimistic.set(name, sent);
+        this.drawField(field, geometry);
+        const save = (async () => {
+            var _a, _b, _c, _d, _e, _f;
+            try {
+                const updatedField = await updateField(this.endpoint, this.templateId, name, geometry);
+                const newTemplate = JSON.parse(JSON.stringify(this.template));
+                const fieldIndex = newTemplate.fields.findIndex(field => field.name === name);
+                if (fieldIndex > -1) {
+                    newTemplate.fields[fieldIndex] = updatedField;
+                }
+                Store.updateTemplate(this.templateId, newTemplate);
+                this.drawField(updatedField);
+                if (before) {
+                    this.recordUndo(name, before, updatedField);
+                }
+                (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: newTemplate, event: 'updated-field' });
+            }
+            catch (e) {
+                console.log('[FIELDS] Error saving field position', e);
+                VerdocsToast(((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) || 'Unable to move the field. Please try again.', { style: 'error' });
+                (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+                // Put it back where the server still has it.
+                const saved = this.findField(name);
+                if (saved) {
+                    this.drawField(saved);
+                }
+            }
+            finally {
+                if (this.optimistic.get(name) === sent) {
+                    this.optimistic.delete(name);
+                }
+            }
+        })();
+        this.inFlight.add(save);
+        save.finally(() => this.inFlight.delete(save));
+        return save;
+    }
+    handleMoveStart(event) {
+        const name = event.target.getAttribute('fieldname');
+        this.flushNudge();
+        this.selectField(name);
+        const field = this.findField(name);
+        this.dragBefore = field ? { name, before: this.currentGeometry(field) } : null;
+    }
     async handleMoveField(event) {
         const oldX = +(event.target.getAttribute('posX') || 0);
         const oldY = +(event.target.getAttribute('posY') || 0);
@@ -192,7 +450,7 @@ export class VerdocsTemplateFields {
         updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
     async handleMoveEnd(event) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e;
         const name = event.target.getAttribute('fieldname');
         const field = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).find(field => field.name === name);
         if (!field) {
@@ -225,31 +483,12 @@ export class VerdocsTemplateFields {
             console.log('[FIELDS] Next page', { newPageNumber, newY, renderedHeight });
         }
         const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, documentId, pageNumber, naturalWidth - width, naturalHeight - height);
-        try {
-            const params = { x, y, page: newPageNumber };
-            const updatedField = await updateField(this.endpoint, this.templateId, name, params);
-            console.log('[FIELDS] Updated', updatedField);
-            const newTemplate = JSON.parse(JSON.stringify(this.template));
-            const fieldIndex = newTemplate.fields.findIndex(field => field.name === name);
-            if (fieldIndex > -1) {
-                newTemplate.fields[fieldIndex] = updatedField;
-            }
-            Store.updateTemplate(this.templateId, newTemplate);
-            event.target.removeAttribute('posX');
-            event.target.removeAttribute('posY');
-            removeCssTransform(event.target);
-            const { xScale = 1, yScale = 1 } = this.cachedPageInfo[documentId][pageNumber];
-            setControlStyles(event.target, updatedField, xScale, yScale);
-            (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: newTemplate, event: 'updated-field' });
-        }
-        catch (e) {
-            VerdocsToast('Error updating field, please try again later', { style: 'error' });
-            console.log('[FIELDS] Error updating field', e);
-            (_f = this.sdkError) === null || _f === void 0 ? void 0 : _f.emit(new SDKError(e.message, (_g = e.response) === null || _g === void 0 ? void 0 : _g.status, (_h = e.response) === null || _h === void 0 ? void 0 : _h.data));
-            event.target.removeAttribute('posX');
-            event.target.removeAttribute('posY');
-            removeCssTransform(event.target);
-        }
+        event.target.removeAttribute('posX');
+        event.target.removeAttribute('posY');
+        removeCssTransform(event.target);
+        const before = ((_e = this.dragBefore) === null || _e === void 0 ? void 0 : _e.name) === name ? this.dragBefore.before : undefined;
+        this.dragBefore = null;
+        await this.saveGeometry(name, { x, y, page: newPageNumber }, before);
     }
     generateFieldName(type, pageNumber) {
         var _a;
@@ -264,12 +503,17 @@ export class VerdocsTemplateFields {
     // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
     viewCoordinatesToPageCoordinates(viewX, viewY, documentId, pageNumber, xMax, yMax) {
         const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[documentId][pageNumber];
-        const x = Math.floor(Math.min(viewX / xScale, xMax));
-        const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
+        // Round rather than floor: PDF y counts up from the bottom, so flooring would pull every drop down and to the left.
+        const x = Math.round(Math.min(viewX / xScale, xMax));
+        const y = Math.round(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
         return { x, y };
     }
     async handleClickPage(e, documentId, pageNumber) {
-        var _a;
+        var _a, _b, _c;
+        // Clicks on a field select it through interact's tap, so only a click on the bare page clears the selection.
+        if (!this.placing && !((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.verdocs-field'))) {
+            this.selectField(null);
+        }
         if (this.placing) {
             // console.log('Placing field', {documentId, pageNumber});
             const clickedX = e.offsetX;
@@ -308,7 +552,7 @@ export class VerdocsTemplateFields {
             const newTemplate = JSON.parse(JSON.stringify(this.template));
             newTemplate.fields.push(newField);
             Store.updateTemplate(this.templateId, newTemplate);
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: newTemplate, event: 'added-field' });
+            (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: newTemplate, event: 'added-field' });
             this.placing = null;
         }
     }
@@ -488,6 +732,7 @@ export class VerdocsTemplateFields {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "templateId",