Fix concurrence issues

Author: ECRomaneli

src/main.ts

@@ -33,7 +33,7 @@ interface DragState {
 
 type MouseHandler = (event: Event, mouse: Electron.MouseInputEvent) => void;
 
-export type DraggableWindow = BaseWindow & { __wdrag__?: Draggable };
+type DraggableWindow = BaseWindow & { __wdrag__?: Draggable };
 
 export class Draggable {
   private static readonly TRUE_PROMISE = Promise.resolve(true);
@@ -108,20 +108,22 @@ export class Draggable {
   }
 
   /** Register a WebContents as a drag source for this window. */
-  public attach(webContents: WebContents, overrideOptions?: DragOptions): void {
+  public attach(webContents: WebContents, overrideOptions?: DragOptions): this {
     if (webContents.isDestroyed()) {
       throw new Error('Cannot attach to destroyed WebContents');
     }
 
     if (this.optionsByWebContents.has(webContents)) {
       overrideOptions && this.updateOptions(webContents, overrideOptions);
-      return;
+      return this;
     }
 
     let options: InternalDragOptions;
     if (overrideOptions) {
-      Draggable.normalizeOptions(overrideOptions);
-      options = { ...this.options, ...overrideOptions };
+      // Fix: Avoid changing the user-provided options object
+      const newOptions = { ...overrideOptions };
+      Draggable.normalizeOptions(newOptions);
+      options = { ...this.options, ...newOptions };
     } else {
       options = { ...this.options };
     }
@@ -132,34 +134,40 @@ export class Draggable {
     this.optionsByWebContents.set(webContents, options);
     webContents.on('before-mouse-event', options.eventHandler);
     webContents.once('destroyed', options.destroyListener);
+    return this;
   }
 
   /** Unregister a WebContents from dragging. */
-  public detach(webContents: WebContents): void {
+  public detach(webContents: WebContents): this {
     const options = this.optionsByWebContents.get(webContents);
     if (options) {
       webContents.removeListener('before-mouse-event', options.eventHandler!);
       webContents.removeListener('destroyed', options.destroyListener!);
       this.optionsByWebContents.delete(webContents);
     }
+    return this;
   }
 
   /** Unregister all WebContents from dragging. */
-  public detachAll(): void {
+  public detachAll(): this {
     for (const wc of this.optionsByWebContents.keys()) {
       this.detach(wc);
     }
+    return this;
   }
 
   /**
    * Disable drag for all registered WebContents and release the window reference.
    * @remarks After calling this method, the instance is dead and must not be reused.
    */
-  public disable(): void {
-    if (!this.window) { return; }
+  public disable(): this {
+    if (!this.window) { return this; }
     this.detachAll();
-    this.window.__wdrag__ = undefined;
+    if (this.window.__wdrag__ === this) {
+      this.window.__wdrag__ = undefined;
+    }
     this.window = undefined;
+    return this;
   }
 
   /**
@@ -169,7 +177,7 @@ export class Draggable {
    * @example
    * drag.updateOptions({ fps: 120 });
    */
-  public updateOptions(update: Partial<DragOptions>): void;
+  public updateOptions(update: Partial<DragOptions>): this;
 
   /**
    * Update drag options for specific WebContents.
@@ -179,9 +187,9 @@ export class Draggable {
    * @example
    * drag.updateOptions(webContents, { fps: 120 });
    */
-  public updateOptions(wc: WebContents, update: Partial<DragOptions>): void;
+  public updateOptions(wc: WebContents, update: Partial<DragOptions>): this;
 
-  public updateOptions(wcOrUpdate: WebContents | Partial<DragOptions>, update?: Partial<DragOptions>): void {
+  public updateOptions(wcOrUpdate: WebContents | Partial<DragOptions>, update?: Partial<DragOptions>): this {
     const newOptions = update ?? wcOrUpdate as Partial<DragOptions>;
     Draggable.normalizeOptions(newOptions);
 
@@ -193,14 +201,18 @@ export class Draggable {
         Object.assign(options, newOptions);
       }
     }
+    return this;
   }
 
   /** Retarget the instance to a new window. */
-  public setWindow(newWin: DraggableWindow): void {
-    this.window!.__wdrag__ = undefined; // Clear old reference
-
-    this.window = newWin;
-    this.window.__wdrag__ = this; // Set new reference
+  public setWindow(newWindow: DraggableWindow): this {
+    const oldWin = this.window!;
+    this.window = newWindow;
+    if (oldWin.__wdrag__ === this) {
+      oldWin.__wdrag__ = undefined; // Clear old reference 
+      this.window.__wdrag__ = this; // Set new reference
+    }
+    return this;
   }
 
   private createEventHandler(wc: WebContents): MouseHandler {

test/sample.html

@@ -4,12 +4,13 @@
     <title>Sample</title>
 </head>
 <body style="margin: 0; padding: 0; cursor: default !important;">
-    <div style="height: 100px; background-color: yellow; display: flex; align-items: center; justify-content: center; gap: 10px;">
+    <div style="height: 100px; background-color: rgb(89, 202, 89); display: flex; align-items: center; justify-content: center; gap: 10px;">
         <h4>Draggable!</h4>
-        <div class="not-draggable" style="background-color: red; height: 30px; display: flex; align-items: center; justify-content: center; padding: 5px;">
+        <div class="not-drag-1" style="background-color: rgb(194, 57, 57); display: flex; align-items: center; justify-content: center; padding: 5px;">
             <span>Not Draggable!</span>
         </div>
-        <button>Not Draggable</button>
+        <button>Not Draggable Button</button>
+        <div class="not-drag-1 drag-2" style="background-color: rgb(238, 238, 29);display: flex; align-items: center; justify-content: center; padding: 5px;">10 FPS drag area</div>
     </div>
 
     <br>
@@ -24,6 +25,5 @@ <h4>Draggable!</h4>
 
 Aliquam ut pellentesque tellus, quis vulputate nisl. Phasellus vitae blandit nunc, eu sodales velit. Duis enim tellus, faucibus id arcu vitae, consectetur tempus mauris. Praesent commodo commodo dolor non malesuada. Donec sed dolor eget arcu tincidunt efficitur sit amet vel nisi. Sed consectetur tincidunt molestie. Nam at magna a odio rhoncus convallis id eu nunc. Nam luctus ut leo et viverra. Proin tempor libero vitae arcu laoreet, sed pharetra sapien rutrum. Nam nunc orci, aliquet sit amet dignissim nec, aliquet quis quam. Nulla facilisi.
     </span>
-    <script> const $remote = require('electron-findbar/remote'); const $ipc = require('electron').ipcRenderer; </script>
 </body>
 </html>

test/sample.js

@@ -20,7 +20,12 @@ function setupWindow() {
   window.contentView.addChildView(view);
   view.setBounds({ x: 0, y: 0, width: 800, height: 600 });
   view.webContents.loadFile(`${__dirname}/sample.html`);
-  Draggable.from(window, { actionArea: 100 }).attach(view.webContents, { exclude: '.not-draggable, pre, button'});
+  const dragHandler = Draggable.from(window, { actionArea: 100 }).attach(view.webContents, { exclude: '.not-drag-1, button'});
+  Draggable.create(window, { selector: '.drag-2', fps: 10 }).attach(view.webContents);
+  if (dragHandler !== Draggable.from(window)) {
+    window.destroy();
+    throw new Error('attach did not return the Draggable instance');
+  }
   return window;
 }