modal is draggable

ea-scripts/Shade Master.md

@@ -15,7 +15,7 @@ Holding down both SHIFT and CTRL/CMD when clicking the script button will toggle
 
 ```js*/
 
-if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("2.7.3")) {
+if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("1.7.19")) {
   new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
   return;
 }
@@ -94,7 +94,7 @@ function showSettingsModal() {
 
   modal.onOpen = () => {
     const { contentEl } = modal;
-    
+    modal.bgOpacity = 0;
     contentEl.createEl('h2', { text: 'Shade Master' });
 
     const instructions = contentEl.createDiv();
@@ -118,7 +118,7 @@ function showSettingsModal() {
       .addText(text => text
         .setValue(settings["Step size"].value.toString())
         .onChange(value => {
-          val = parseFloat(value);
+          const val = parseFloat(value);
           if (isNaN(val)) {
             new Notice("Enter a valid number");
             return;
@@ -158,6 +158,8 @@ function showSettingsModal() {
         .setButtonText("Close")
         .setCta(true)
         .onClick(() => modal.close()));
+
+    makeModalDraggable(modal.modalEl); // Add draggable functionality
   };
 
   modal.onClose = () => {
@@ -169,6 +171,47 @@ function showSettingsModal() {
   modal.open();
 }
 
+/**
+ * Add draggable functionality to the modal element.
+ * @param {HTMLElement} modalEl - The modal element to make draggable.
+ */
+function makeModalDraggable(modalEl) {
+  let isDragging = false;
+  let startX, startY, initialX, initialY;
+
+  const header = modalEl.querySelector('.modal-titlebar') || modalEl; // Default to modalEl if no titlebar
+  header.style.cursor = 'move';
+
+  header.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = modalEl.getBoundingClientRect();
+    initialX = rect.left;
+    initialY = rect.top;
+
+    modalEl.style.position = 'absolute';
+    modalEl.style.margin = '0'; // Reset margin to avoid issues
+    modalEl.style.left = `${initialX}px`;
+    modalEl.style.top = `${initialY}px`;
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+
+    modalEl.style.left = `${initialX + dx}px`;
+    modalEl.style.top = `${initialY + dy}px`;
+  });
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false;
+  });
+}
+
+
 // Main script execution
 const allElements = ea.getViewSelectedElements();
 const regularElements = allElements.filter(el =>