legalesign-document-viewer 0.10.2 → 0.10.4

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

@@ -2,6 +2,18 @@ import { findDimensions, findIn, recalculateCoordinates } from "./editorCalculat
 import { FIELD_DEFAULTS, DEFAULT_FONT_SIZE, DEFAULT_FONT_NAME } from "../../constants/fieldDefaults";
 import { calculateSnap } from "./snapHelper";
 import { defaultRolePalette } from "./defaultPalette";
+import { dvI18n } from "../../i18n/i18n";
+const preventSelect = (e) => e.preventDefault();
+function disableSelection() {
+    document.body.style.userSelect = 'none';
+    document.body.style.webkitUserSelect = 'none';
+    document.addEventListener('selectstart', preventSelect);
+}
+function enableSelection() {
+    document.body.style.userSelect = '';
+    document.body.style.webkitUserSelect = '';
+    document.removeEventListener('selectstart', preventSelect);
+}
 export function updateSelectionBox() {
     var box = this.component.shadowRoot.getElementById('ls-box-selector');
     if (!this.selected || this.selected.length < 2) {
@@ -180,100 +192,189 @@ export function mouseMove(event) {
     }
     // We have the mouse held down on a field edge to resize it.
     if (this.hitField && this.edgeSide && this.startMouse && event.buttons === 1) {
+        disableSelection();
         const movedX = event.screenX - this.startMouse.x;
         const movedY = event.screenY - this.startMouse.y;
-        var width = this.hitField.dataItem.width;
-        var height = this.hitField.dataItem.height;
         var scale = this.hitField.dataItem.formElementType === 'signature' && this._template.fixSignatureScale;
         switch (this.edgeSide) {
             case 'n':
-                if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom }))
-                    break;
-                this.hitField.style.top = this.startMouse.top + movedY + 'px';
-                this.hitField.style.height = this.startMouse.height - movedY + 'px';
                 if (scale) {
-                    width = (this.startMouse.height - movedY) * 3.8;
-                    this.hitField.style.width = width + 'px';
+                    const newHeight = this.startMouse.height - movedY;
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = newHeight * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: newHeight / this.zoom, width: newWidth / this.zoom }))
+                        break;
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: newHeight / this.zoom, width: newWidth / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom }))
+                        break;
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, top: (this.startMouse.top + movedY) / this.zoom, height: (this.startMouse.height - movedY) / this.zoom, width };
                 break;
             case 's':
-                if (outOfBounds({ ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom }))
-                    break;
-                this.hitField.style.height = this.startMouse.height + movedY + 'px';
                 if (scale) {
-                    width = (this.startMouse.height + movedY) * 3.8;
-                    this.hitField.style.width = width + 'px';
+                    const newHeight = this.startMouse.height + movedY;
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = newHeight * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, height: newHeight / this.zoom, width: newWidth / this.zoom }))
+                        break;
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, height: newHeight / this.zoom, width: newWidth / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom }))
+                        break;
+                    this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, height: (this.startMouse.height + movedY) / this.zoom, width };
                 break;
             case 'e':
-                if (outOfBounds({ ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom }))
-                    break;
-                this.hitField.style.width = this.startMouse.width + movedX + 'px';
                 if (scale) {
-                    height = Math.round((this.startMouse.width + movedX) / 3.8);
-                    this.hitField.style.height = height + 'px';
+                    const newWidth = this.startMouse.width + movedX;
+                    const aspectRatio = this.startMouse.height / this.startMouse.width;
+                    const newHeight = newWidth * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom }))
+                        break;
+                    this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, width: (this.startMouse.width + movedX) / this.zoom, height };
                 break;
             case 'w':
-                if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom }))
-                    break;
-                this.hitField.style.left = this.startMouse.left + movedX + 'px';
-                this.hitField.style.width = this.startMouse.width - movedX + 'px';
                 if (scale) {
-                    height = Math.round((this.startMouse.width - movedX) / 3.8);
-                    this.hitField.style.height = height + 'px';
+                    const newWidth = this.startMouse.width - movedX;
+                    const aspectRatio = this.startMouse.height / this.startMouse.width;
+                    const newHeight = newWidth * aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    if (outOfBounds({ ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom };
                 }
-                this.hitField.dataItem = { ...this.hitField.dataItem, left: (this.startMouse.left + movedX) / this.zoom, width: (this.startMouse.width - movedX) / this.zoom, height };
                 break;
             case 'se': {
-                const newWidth = (this.startMouse.width + movedX) / this.zoom;
-                const newHeight = (this.startMouse.height + movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.width = this.startMouse.width + movedX + 'px';
-                this.hitField.style.height = this.startMouse.height + movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width + movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    if (outOfBounds({ ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newWidth = (this.startMouse.width + movedX) / this.zoom;
+                    const newHeight = (this.startMouse.height + movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                    this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, width: newWidth, height: newHeight };
+                }
                 break;
             }
             case 'nw': {
-                const newLeft = (this.startMouse.left + movedX) / this.zoom;
-                const newTop = (this.startMouse.top + movedY) / this.zoom;
-                const newWidth = (this.startMouse.width - movedX) / this.zoom;
-                const newHeight = (this.startMouse.height - movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.left = this.startMouse.left + movedX + 'px';
-                this.hitField.style.top = this.startMouse.top + movedY + 'px';
-                this.hitField.style.width = this.startMouse.width - movedX + 'px';
-                this.hitField.style.height = this.startMouse.height - movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width - movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    const newLeft = this.startMouse.left + movedX;
+                    const newTop = this.startMouse.top + (this.startMouse.height - newHeight);
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft / this.zoom, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.left = newLeft + 'px';
+                    this.hitField.style.top = newTop + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft / this.zoom, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newLeft = (this.startMouse.left + movedX) / this.zoom;
+                    const newTop = (this.startMouse.top + movedY) / this.zoom;
+                    const newWidth = (this.startMouse.width - movedX) / this.zoom;
+                    const newHeight = (this.startMouse.height - movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                    this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, top: newTop, width: newWidth, height: newHeight };
+                }
                 break;
             }
             case 'ne': {
-                const newWidth = (this.startMouse.width + movedX) / this.zoom;
-                const newTop = (this.startMouse.top + movedY) / this.zoom;
-                const newHeight = (this.startMouse.height - movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.width = this.startMouse.width + movedX + 'px';
-                this.hitField.style.top = this.startMouse.top + movedY + 'px';
-                this.hitField.style.height = this.startMouse.height - movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width + movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    const newTop = this.startMouse.top + (this.startMouse.height - newHeight);
+                    if (outOfBounds({ ...this.hitField.dataItem, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.top = newTop + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: newTop / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newWidth = (this.startMouse.width + movedX) / this.zoom;
+                    const newTop = (this.startMouse.top + movedY) / this.zoom;
+                    const newHeight = (this.startMouse.height - movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.width = this.startMouse.width + movedX + 'px';
+                    this.hitField.style.top = this.startMouse.top + movedY + 'px';
+                    this.hitField.style.height = this.startMouse.height - movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, top: newTop, width: newWidth, height: newHeight };
+                }
                 break;
             }
             case 'sw': {
-                const newLeft = (this.startMouse.left + movedX) / this.zoom;
-                const newWidth = (this.startMouse.width - movedX) / this.zoom;
-                const newHeight = (this.startMouse.height + movedY) / this.zoom;
-                if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight }))
-                    break;
-                this.hitField.style.left = this.startMouse.left + movedX + 'px';
-                this.hitField.style.width = this.startMouse.width - movedX + 'px';
-                this.hitField.style.height = this.startMouse.height + movedY + 'px';
-                this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight };
+                if (scale) {
+                    const aspectRatio = this.startMouse.width / this.startMouse.height;
+                    const newWidth = this.startMouse.width - movedX;
+                    const newHeight = newWidth / aspectRatio;
+                    const newLeft = this.startMouse.left + movedX;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom }))
+                        break;
+                    this.hitField.style.left = newLeft + 'px';
+                    this.hitField.style.width = newWidth + 'px';
+                    this.hitField.style.height = newHeight + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft / this.zoom, width: newWidth / this.zoom, height: newHeight / this.zoom };
+                }
+                else {
+                    const newLeft = (this.startMouse.left + movedX) / this.zoom;
+                    const newWidth = (this.startMouse.width - movedX) / this.zoom;
+                    const newHeight = (this.startMouse.height + movedY) / this.zoom;
+                    if (outOfBounds({ ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight }))
+                        break;
+                    this.hitField.style.left = this.startMouse.left + movedX + 'px';
+                    this.hitField.style.width = this.startMouse.width - movedX + 'px';
+                    this.hitField.style.height = this.startMouse.height + movedY + 'px';
+                    this.hitField.dataItem = { ...this.hitField.dataItem, left: newLeft, width: newWidth, height: newHeight };
+                }
                 break;
             }
         }
@@ -298,7 +399,7 @@ export function mouseMove(event) {
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
-        document.body.style.userSelect = 'none';
+        disableSelection();
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         box.style.visibility = 'hidden';
         // Dismiss any open date picker when moving fields
@@ -344,7 +445,7 @@ export function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
-    document.body.style.userSelect = '';
+    enableSelection();
     clearSnapGuides.bind(this)();
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox && this.isBoxing) {
@@ -463,12 +564,8 @@ export function toolboxDragStart(fieldData) {
     const zoom = this.zoom;
     this._isToolboxDragging = true;
     let hasMoved = false;
-    // Prevent text selection during drag and set grabbing cursor
-    document.body.style.userSelect = 'none';
-    const cursorStyle = document.createElement('style');
-    cursorStyle.id = 'ls-drag-cursor';
-    cursorStyle.textContent = '* { cursor: grabbing !important; }';
-    document.head.appendChild(cursorStyle);
+    // Prevent text selection during drag
+    disableSelection();
     // Add dragging class to toolbox fields (shadow DOM cursor override)
     this.component.shadowRoot.querySelectorAll('ls-left-bar, ls-compose-loader').forEach(bar => {
         bar.shadowRoot?.querySelectorAll('ls-toolbox-field').forEach(el => el.classList.add('ls-dv-dragging'));
@@ -479,7 +576,7 @@ export function toolboxDragStart(fieldData) {
     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}`;
+    ghost.style.border = `1px 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);
@@ -489,16 +586,40 @@ export function toolboxDragStart(fieldData) {
     ghost.style.pointerEvents = 'none';
     ghost.style.zIndex = '10000';
     ghost.style.visibility = 'hidden';
-    ghost.style.boxSizing = 'border-box';
+    ghost.style.boxSizing = 'content-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.overflow = 'visible';
     ghost.style.whiteSpace = 'nowrap';
     ghost.style.display = 'flex';
     ghost.style.alignItems = 'center';
     ghost.style.textTransform = 'capitalize';
     ghost.innerHTML = fieldData.formElementType;
+    // Assignee label below ghost
+    const assignee = this.mode === 'compose'
+        ? this._recipients?.find(r => r.signerIndex === this.signer)
+        : this._template.roles.find(r => r.signerIndex === this.signer);
+    const assigneeName = this.mode === 'compose' && assignee?.previousRecipientDecides
+        ? 'To Be Decided'
+        : this.mode === 'compose'
+            ? `${assignee?.firstName} ${assignee?.lastName}`
+            : assignee?.name || (this.signer === 0 ? 'Sender' : `Participant ${this.signer}`);
+    const assigneeLabel = document.createElement('p');
+    assigneeLabel.style.position = 'absolute';
+    assigneeLabel.style.color = 'var(--gray-80, #3a3a3a)';
+    assigneeLabel.style.bottom = `-${1 * zoom}rem`;
+    assigneeLabel.style.left = '0';
+    assigneeLabel.style.margin = '0';
+    assigneeLabel.style.padding = '0';
+    assigneeLabel.style.lineHeight = '1';
+    assigneeLabel.style.fontSize = `${0.625 * zoom}rem`;
+    assigneeLabel.style.whiteSpace = 'nowrap';
+    assigneeLabel.style.fontFamily = 'sans-serif';
+    assigneeLabel.style.textTransform = 'none';
+    assigneeLabel.style.pointerEvents = 'none';
+    assigneeLabel.textContent = `${dvI18n.t('fieldproperties.assignedto')} ${assigneeName}`;
+    ghost.appendChild(assigneeLabel);
     this.component.shadowRoot.appendChild(ghost);
     // Info chip at bottom of screen
     const chip = document.createElement('div');
@@ -523,11 +644,25 @@ export function toolboxDragStart(fieldData) {
         hasMoved = true;
         const dragWidth = fieldData.defaultWidth * zoom;
         const dragHeight = fieldData.defaultHeight * zoom;
-        ghost.style.visibility = 'visible';
         const frameRect = frame.getBoundingClientRect();
         const isOverFrame = e.clientX >= frameRect.left && e.clientX <= frameRect.right &&
             e.clientY >= frameRect.top && e.clientY <= frameRect.bottom;
+        const isDragging = e.buttons === 1;
+        // Only show grabbing cursor when ghost is visible
+        let cursorStyle = document.getElementById('ls-drag-cursor');
+        if ((isOverFrame || isDragging) && !cursorStyle) {
+            cursorStyle = document.createElement('style');
+            cursorStyle.id = 'ls-drag-cursor';
+            cursorStyle.textContent = '* { cursor: grabbing !important; }';
+            document.head.appendChild(cursorStyle);
+        }
+        else if (!isOverFrame && !isDragging && cursorStyle) {
+            cursorStyle.remove();
+        }
+        // When dragging (mouse held): show ghost over wrapper area
+        // When click-to-place (mouse not held): only show over document frame
         if (isOverFrame) {
+            ghost.style.visibility = 'visible';
             ghost.style.opacity = '1';
             const x = e.clientX - frameRect.left + frame.scrollLeft;
             const y = e.clientY - frameRect.top + frame.scrollTop;
@@ -539,12 +674,17 @@ export function toolboxDragStart(fieldData) {
             ghost.style.top = (snap.y !== null ? snap.y + frameRect.top - frame.scrollTop : e.clientY - dragHeight / 2) + 'px';
             showSnapGuides.bind(this)(snap.guides);
         }
-        else {
+        else if (isDragging) {
+            ghost.style.visibility = 'visible';
             ghost.style.opacity = '0.5';
             ghost.style.left = (e.clientX - dragWidth / 2) + 'px';
             ghost.style.top = (e.clientY - dragHeight / 2) + 'px';
             clearSnapGuides.bind(this)();
         }
+        else {
+            ghost.style.visibility = 'hidden';
+            clearSnapGuides.bind(this)();
+        }
     };
     const cleanup = () => {
         document.removeEventListener('mousemove', onMouseMove);
@@ -553,7 +693,7 @@ export function toolboxDragStart(fieldData) {
         ghost.remove();
         chip.remove();
         clearSnapGuides.bind(this)();
-        document.body.style.userSelect = '';
+        enableSelection();
         const cursorStyle = document.getElementById('ls-drag-cursor');
         if (cursorStyle)
             cursorStyle.remove();