legalesign-document-viewer 0.9.21 → 0.9.22

package/dist/collection/components/ls-document-viewer/mouseHandlers.js

@@ -1,5 +1,34 @@
 import { findDimensions, findIn, recalculateCoordinates } from "./editorCalculator";
 import { FIELD_DEFAULTS, DEFAULT_FONT_SIZE, DEFAULT_FONT_NAME } from "../../constants/fieldDefaults";
+import { calculateSnap } from "./snapHelper";
+import { defaultRolePalette } from "./defaultPalette";
+export function updateSelectionBox() {
+    var box = this.component.shadowRoot.getElementById('ls-box-selector');
+    if (!this.selected || this.selected.length < 2) {
+        box.style.visibility = 'hidden';
+        return;
+    }
+    let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
+    this.selected.forEach(f => {
+        const left = f.offsetLeft;
+        const top = f.offsetTop;
+        const right = left + f.offsetWidth;
+        const bottom = top + f.offsetHeight;
+        if (left < minLeft)
+            minLeft = left;
+        if (top < minTop)
+            minTop = top;
+        if (right > maxRight)
+            maxRight = right;
+        if (bottom > maxBottom)
+            maxBottom = bottom;
+    });
+    box.style.left = minLeft + 'px';
+    box.style.top = minTop + 'px';
+    box.style.width = (maxRight - minLeft) + 'px';
+    box.style.height = (maxBottom - minTop) + 'px';
+    box.style.visibility = 'visible';
+}
 let mousetimer = null;
 export function debounce(data, delay) {
     if (mousetimer)
@@ -11,6 +40,16 @@ export function debounce(data, delay) {
 export function mouseDown(e) {
     if (e.offsetX < 0 || e.offsetY < 0)
         return;
+    if (this._isToolboxDragging)
+        return;
+    // Disable mouse interactions in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
+    // Ignore events originating from outside the document frame
+    const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+    if (!frame || !e.composedPath().includes(frame))
+        return;
     // console.log('mousedown', e);
     // Find if this was
     // - a hit on a field edge RESIZE
@@ -121,6 +160,7 @@ export function mouseDown(e) {
         this.selectFields.emit([]);
         this.selected = [];
         this.component.style.cursor = 'crosshair';
+        updateSelectionBox.bind(this)();
     }
 }
 export function outOfBounds(futureField) {
@@ -132,6 +172,12 @@ export function outOfBounds(futureField) {
 }
 export function mouseMove(event) {
     event.preventDefault();
+    if (this._isToolboxDragging)
+        return;
+    // Disable mouse move interactions in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     // We have the mouse held down on a field edge to resize it.
     if (this.hitField && this.edgeSide && this.startMouse && event.buttons === 1) {
         const movedX = event.screenX - this.startMouse.x;
@@ -252,21 +298,45 @@ export function mouseMove(event) {
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
+        document.body.style.userSelect = 'none';
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         box.style.visibility = 'hidden';
+        // Dismiss any open date picker when moving fields
+        if (this.selected?.length) {
+            this.selected.forEach(f => {
+                const input = f.shadowRoot?.getElementById('editing-input');
+                if (input)
+                    input.blur();
+            });
+        }
         // Move one or more selected items
         const movedX = event.screenX - this.startMouse.x;
         const movedY = event.screenY - this.startMouse.y;
         if (this.selected?.length) {
+            // Calculate snap based on the primary (first) selected field
+            const primaryLeft = this.startLocations[0].left + movedX;
+            const primaryTop = this.startLocations[0].top + movedY;
+            const primaryWidth = this.startLocations[0].width;
+            const primaryHeight = this.startLocations[0].height;
+            const allFields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+            const excludeIds = this.selected.map(s => s.dataItem.id);
+            const snap = calculateSnap(primaryLeft, primaryTop, primaryWidth, primaryHeight, allFields, this.pageNum, excludeIds);
+            // Apply snap offset to all selected fields
+            const snapOffsetX = snap.x !== null ? snap.x - primaryLeft : 0;
+            const snapOffsetY = snap.y !== null ? snap.y - primaryTop : 0;
             for (let i = 0; i < this.selected.length; i++) {
-                if (this.startLocations[i].left + movedX >= 0 &&
-                    this.startLocations[i].top + movedY >= 0 &&
-                    this.startLocations[i].left + movedX <= (this.pageDimensions[this.pageNum - 1].width - this.selected[i].dataItem.width) * this.zoom &&
-                    this.startLocations[i].top + movedY <= (this.pageDimensions[this.pageNum - 1].height - this.selected[i].dataItem.height) * this.zoom) {
-                    this.selected[i].style.left = Math.round(this.startLocations[i].left + movedX) + 'px';
-                    this.selected[i].style.top = Math.round(this.startLocations[i].top + movedY) + 'px';
+                const newLeft = this.startLocations[i].left + movedX + snapOffsetX;
+                const newTop = this.startLocations[i].top + movedY + snapOffsetY;
+                if (newLeft >= 0 &&
+                    newTop >= 0 &&
+                    newLeft <= (this.pageDimensions[this.pageNum - 1].width - this.selected[i].dataItem.width) * this.zoom &&
+                    newTop <= (this.pageDimensions[this.pageNum - 1].height - this.selected[i].dataItem.height) * this.zoom) {
+                    this.selected[i].style.left = Math.round(newLeft) + 'px';
+                    this.selected[i].style.top = Math.round(newTop) + 'px';
                 }
             }
+            showSnapGuides.bind(this)(snap.guides);
+            updateSelectionBox.bind(this)();
         }
     }
 }
@@ -274,7 +344,8 @@ export function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
-    // console.log('mouse up');
+    document.body.style.userSelect = '';
+    clearSnapGuides.bind(this)();
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox && this.isBoxing) {
         this.isBoxing = false;
@@ -285,9 +356,14 @@ export function mouseUp(event) {
         const found = findIn(fields, box, true, event.shiftKey);
         this.selected = Array.from(found);
         this.selectFields.emit(found.map(fx => fx.dataItem));
+        updateSelectionBox.bind(this)();
     }
 }
 export function mouseClick(e) {
+    // Disable click interactions in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     // check we're not moving fields
     if (this.isMoving) {
         // End dragging fields
@@ -310,6 +386,7 @@ export function mouseClick(e) {
             return { action: 'update', data: delta };
         }));
         this.selectFields.emit(selected.map(fx => fx.dataItem));
+        updateSelectionBox.bind(this)();
     }
     else {
         // reset the selection box location
@@ -328,63 +405,222 @@ export function mouseClick(e) {
         });
         this.selected = Array.from(fields).filter(fx => fx.selected);
         this.selectFields.emit(this.selected.map(fx => fx.dataItem));
+        updateSelectionBox.bind(this)();
     }
 }
-export function mouseDrop(event) {
-    event.preventDefault();
-    try {
-        const data = JSON.parse(event.dataTransfer.getData('application/json'));
-        // Unselect all current selected items
-        this.component.shadowRoot.querySelectorAll('ls-editor-field').forEach(f => (f.selected = false));
-        var frame = this.component.shadowRoot.getElementById('ls-document-frame');
-        // Make a new API compatible id for a template element (prefix 'ele')
-        const id = btoa('ele' + crypto.randomUUID());
-        const top = event.offsetY / this.zoom + frame.scrollTop;
-        const left = event.offsetX / this.zoom + frame.scrollLeft;
-        // TODO: Put these defaults somewhere sensible
-        const newData = {
-            action: 'create',
-            data: {
-                id,
-                value: '',
-                formElementType: data.formElementType,
-                elementType: data.elementType,
-                validation: data.validation,
-                substantive: false,
-                top,
-                left,
-                hideBorder: false,
-                height: data.defaultHeight,
-                width: data.defaultWidth,
-                pageDimensions: this.pageDimensions[this.pageNum - 1],
-                fontName: this.fontFamily,
-                fontSize: this.fontSize,
-                align: 'left',
-                signer: this.signer,
-                page: this.pageNum,
-                mapTo: null,
-                label: '',
-                helpText: null,
-                logicGroup: null,
-                optional: false,
-                options: null,
-                logicAction: null,
-                labelExtra: null,
-                fieldOrder: null,
-                ax: left > 0 ? left / this.pageDimensions[this.pageNum - 1].width : 0,
-                ay: top > 0 ? top / this.pageDimensions[this.pageNum - 1].height : 0,
-                bx: (left + data.defaultWidth) / this.pageDimensions[this.pageNum - 1].width,
-                by: (top + data.defaultHeight) / this.pageDimensions[this.pageNum - 1].height,
-                templateId: this._template.id,
-            },
-        };
-        this.mutate.emit([newData]);
+export function showSnapGuides(guides) {
+    const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+    let container = this.component.shadowRoot.getElementById('ls-snap-guides');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'ls-snap-guides';
+        container.style.position = 'absolute';
+        container.style.top = '0';
+        container.style.left = '0';
+        container.style.width = '100%';
+        container.style.height = '100%';
+        container.style.pointerEvents = 'none';
+        container.style.zIndex = '9999';
+        frame.appendChild(container);
     }
-    catch (e) {
-        console.error(e);
+    container.innerHTML = '';
+    for (const guide of guides) {
+        const line = document.createElement('div');
+        line.style.position = 'absolute';
+        line.style.backgroundColor = 'transparent';
+        if (guide.orientation === 'v') {
+            line.style.left = guide.position + 'px';
+            line.style.top = '0';
+            line.style.width = '0';
+            line.style.height = '100%';
+            line.style.borderLeft = '1px dashed var(--gray-50, #c8c9cc)';
+        }
+        else {
+            line.style.top = guide.position + 'px';
+            line.style.left = '0';
+            line.style.width = '100%';
+            line.style.height = '0';
+            line.style.borderTop = '1px dashed var(--gray-50, #c8c9cc)';
+        }
+        container.appendChild(line);
     }
 }
+export function clearSnapGuides() {
+    const container = this.component.shadowRoot.getElementById('ls-snap-guides');
+    if (container)
+        container.innerHTML = '';
+}
+export function toolboxDragStart(fieldData) {
+    // Cancel any existing toolbox drag
+    if (this._cancelToolboxDrag) {
+        this._cancelToolboxDrag();
+    }
+    const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+    const zoom = this.zoom;
+    this._isToolboxDragging = true;
+    const startTime = Date.now();
+    // Prevent text selection during drag
+    document.body.style.userSelect = 'none';
+    // Create ghost preview element matching the original drag image style
+    const ghost = document.createElement('div');
+    ghost.id = 'ls-toolbox-ghost';
+    ghost.style.position = 'fixed';
+    ghost.style.width = fieldData.defaultWidth * zoom + 'px';
+    ghost.style.height = fieldData.defaultHeight * zoom + 'px';
+    ghost.style.border = `2px dashed ${defaultRolePalette[this.signer % 100].s60}`;
+    const s20 = defaultRolePalette[this.signer % 100].s20.replace('#', '');
+    const r = parseInt(s20.substring(0, 2), 16);
+    const g = parseInt(s20.substring(2, 4), 16);
+    const b = parseInt(s20.substring(4, 6), 16);
+    ghost.style.background = `rgba(${r},${g},${b},0.5)`;
+    ghost.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
+    ghost.style.pointerEvents = 'none';
+    ghost.style.zIndex = '0';
+    ghost.style.visibility = 'hidden';
+    ghost.style.boxSizing = 'border-box';
+    ghost.style.fontFamily = 'var(--font-family, IBM Plex Sans, sans-serif)';
+    ghost.style.fontSize = Math.round(DEFAULT_FONT_SIZE * zoom) + 'px';
+    ghost.style.color = defaultRolePalette[this.signer % 100].s100;
+    ghost.style.overflow = 'hidden';
+    ghost.style.whiteSpace = 'nowrap';
+    ghost.style.display = 'flex';
+    ghost.style.alignItems = 'center';
+    ghost.style.textTransform = 'capitalize';
+    ghost.innerHTML = fieldData.formElementType;
+    this.component.shadowRoot.appendChild(ghost);
+    // Info chip at bottom of screen
+    const chip = document.createElement('div');
+    chip.id = 'ls-esc-chip';
+    chip.style.position = 'fixed';
+    chip.style.bottom = '1.5rem';
+    chip.style.left = '50%';
+    chip.style.transform = 'translateX(-50%)';
+    chip.style.padding = '0.375rem 0.75rem';
+    chip.style.borderRadius = '0.625rem';
+    chip.style.background = 'var(--gray-100, #1f2937)';
+    chip.style.color = 'white';
+    chip.style.fontSize = '0.75rem';
+    chip.style.fontFamily = 'var(--font-family, IBM Plex Sans, sans-serif)';
+    chip.style.pointerEvents = 'none';
+    chip.style.zIndex = '10000';
+    chip.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
+    chip.textContent = 'Press Esc to cancel field placement';
+    this.component.shadowRoot.appendChild(chip);
+    const onMouseMove = (e) => {
+        e.preventDefault();
+        const dragWidth = fieldData.defaultWidth * zoom;
+        const dragHeight = fieldData.defaultHeight * zoom;
+        // Only show ghost when cursor is over the document page
+        const frameRect = frame.getBoundingClientRect();
+        if (e.clientX >= frameRect.left && e.clientX <= frameRect.right &&
+            e.clientY >= frameRect.top && e.clientY <= frameRect.bottom) {
+            ghost.style.visibility = 'visible';
+            const frameRect = frame.getBoundingClientRect();
+            const x = e.clientX - frameRect.left + frame.scrollLeft;
+            const y = e.clientY - frameRect.top + frame.scrollTop;
+            let left = x - dragWidth / 2;
+            let top = y - dragHeight / 2;
+            const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+            const snap = calculateSnap(left, top, dragWidth, dragHeight, fields, this.pageNum);
+            ghost.style.left = (snap.x !== null ? snap.x + frameRect.left - frame.scrollLeft : e.clientX - dragWidth / 2) + 'px';
+            ghost.style.top = (snap.y !== null ? snap.y + frameRect.top - frame.scrollTop : e.clientY - dragHeight / 2) + 'px';
+            showSnapGuides.bind(this)(snap.guides);
+        }
+        else {
+            ghost.style.visibility = 'hidden';
+            clearSnapGuides.bind(this)();
+        }
+    };
+    const cleanup = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        document.removeEventListener('keydown', onKeyDown);
+        ghost.remove();
+        chip.remove();
+        clearSnapGuides.bind(this)();
+        document.body.style.userSelect = '';
+        this._isToolboxDragging = false;
+        this._cancelToolboxDrag = null;
+    };
+    const onMouseUp = (e) => {
+        // Ignore mouseup if it's from the same click that started the drag
+        if (Date.now() - startTime < 100)
+            return;
+        const frameRect = frame.getBoundingClientRect();
+        const shouldPlace = e.clientX >= frameRect.left && e.clientX <= frameRect.right &&
+            e.clientY >= frameRect.top && e.clientY <= frameRect.bottom;
+        cleanup();
+        if (shouldPlace) {
+            const dragWidth = fieldData.defaultWidth * zoom;
+            const dragHeight = fieldData.defaultHeight * zoom;
+            const x = e.clientX - frameRect.left + frame.scrollLeft;
+            const y = e.clientY - frameRect.top + frame.scrollTop;
+            let left = x - dragWidth / 2;
+            let top = y - dragHeight / 2;
+            const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+            const snap = calculateSnap(left, top, dragWidth, dragHeight, fields, this.pageNum);
+            if (snap.x !== null)
+                left = snap.x;
+            if (snap.y !== null)
+                top = snap.y;
+            const finalTop = top / zoom;
+            const finalLeft = left / zoom;
+            this.component.shadowRoot.querySelectorAll('ls-editor-field').forEach(f => (f.selected = false));
+            const id = btoa('ele' + crypto.randomUUID());
+            const newData = {
+                action: 'create',
+                data: {
+                    id,
+                    value: '',
+                    formElementType: fieldData.formElementType,
+                    elementType: fieldData.elementType,
+                    validation: fieldData.validation,
+                    substantive: false,
+                    top: finalTop,
+                    left: finalLeft,
+                    hideBorder: false,
+                    height: fieldData.defaultHeight,
+                    width: fieldData.defaultWidth,
+                    pageDimensions: this.pageDimensions[this.pageNum - 1],
+                    fontName: this.fontFamily,
+                    fontSize: this.fontSize,
+                    align: 'left',
+                    signer: this.signer,
+                    page: this.pageNum,
+                    mapTo: null,
+                    label: '',
+                    helpText: null,
+                    logicGroup: null,
+                    optional: false,
+                    options: null,
+                    logicAction: null,
+                    labelExtra: null,
+                    fieldOrder: null,
+                    ax: finalLeft > 0 ? finalLeft / this.pageDimensions[this.pageNum - 1].width : 0,
+                    ay: finalTop > 0 ? finalTop / this.pageDimensions[this.pageNum - 1].height : 0,
+                    bx: (finalLeft + fieldData.defaultWidth) / this.pageDimensions[this.pageNum - 1].width,
+                    by: (finalTop + fieldData.defaultHeight) / this.pageDimensions[this.pageNum - 1].height,
+                    templateId: this._template.id,
+                },
+            };
+            this.mutate.emit([newData]);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            cleanup();
+        }
+    };
+    this._cancelToolboxDrag = cleanup;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('keydown', onKeyDown);
+}
 export function mouseDoubleClick(event) {
+    // Disable double-click field creation in preview mode
+    if (this.mode === 'preview') {
+        return;
+    }
     console.log('double click', this.fieldTypeSelected, this.signer);
     try {
         let data = this.fieldTypeSelected;