electron-drag-plus 1.0.1 → 1.0.2

package/README.md

@@ -6,9 +6,9 @@
 
 - **极简 API**：主进程仅需一个方法，渲染进程仅需两个方法
 - **窗口防抖**：内置窗口拖拽时的防抖优化，解决拖拽时窗口大小抖动问题
-- **多窗口支持**：通过 key 参数支持多窗口场景
 - **自动处理**：自动识别并排除交互元素，避免交互冲突
 - **TypeScript 支持**：提供完整的类型定义
+- **安全可靠**：内置错误处理和延迟初始化，确保在各种环境下稳定运行
 
 ## 安装
 
@@ -27,13 +27,12 @@ pnpm add electron-drag-plus
 
 ### 主进程 API
 
-#### `initializeDragPlus(window, key)`
+#### `initializeDragPlus(window)`
 
 初始化窗口拖拽功能。
 
 **参数：**
 - `window: BrowserWindow` - Electron 窗口实例
-- `key: string` - 窗口唯一标识，用于与渲染进程通信
 
 **示例：**
 ```typescript
@@ -52,31 +51,30 @@ const mainWindow = new BrowserWindow({
   }
 });
 
-// 初始化拖拽功能
-initializeDragPlus(mainWindow, 'main-window');
+// 初始化拖拽功能 - 无需key参数
+initializeDragPlus(mainWindow);
 ```
 
 ### 渲染进程 API
 
-#### `enableWindowDrag(element, key?)`
+#### `enableWindowDrag(element)`
 
 启用指定元素的窗口拖拽功能。
 
 **参数：**
 - `element: HTMLElement | string` - DOM 元素或 CSS 选择器
-- `key?: string` - 窗口唯一标识（可选，也可在主进程中初始化时提供）
 
 **示例：**
 ```typescript
 import { enableWindowDrag } from 'electron-drag-plus/renderer';
 
 // 使用 CSS 选择器
-enableWindowDrag('#title-bar', 'main-window');
+enableWindowDrag('#title-bar');
 
 // 或使用 DOM 元素
 const titleBar = document.getElementById('title-bar');
 if (titleBar instanceof HTMLElement) {
-  enableWindowDrag(titleBar, 'main-window');
+  enableWindowDrag(titleBar);
 }
 ```
 
@@ -119,8 +117,8 @@ function createWindow() {
     }
   });
 
-  // 初始化拖拽功能
-  initializeDragPlus(mainWindow, 'main-window');
+  // 初始化拖拽功能 - 简化版，无需key参数
+  initializeDragPlus(mainWindow);
 
   // 加载页面
   mainWindow.loadFile('index.html');
@@ -155,10 +153,10 @@ contextBridge.exposeInMainWorld('electron', {
 ```javascript
 import { enableWindowDrag, disableWindowDrag } from 'electron-drag-plus/renderer';
 
-// 启用标题栏拖拽功能
+// 启用标题栏拖拽功能 - 简化版，无需key参数
 const titleBar = document.getElementById('title-bar');
 if (titleBar) {
-  enableWindowDrag(titleBar, 'main-window');
+  enableWindowDrag(titleBar);
 }
 
 // 禁用控制按钮的拖拽
@@ -274,9 +272,9 @@ closeButton?.addEventListener('click', () => {
 
 3. **元素识别**：库会自动识别并排除常见的交互元素（如按钮、输入框等），避免交互冲突
 
-4. **多窗口支持**：为不同窗口使用不同的 key 值，确保拖拽事件正确传递
+4. **错误处理**：库内置了基本的错误处理和日志警告，便于调试
 
-5. **错误处理**：库内置了基本的错误处理和日志警告，便于调试
+5. **DOM 就绪**：库会自动检测 DOM 就绪状态，确保在合适的时机初始化
 
 ## 兼容性
 

package/dist/example.js

@@ -16,19 +16,19 @@ const win = new electron_1.BrowserWindow({
         contextIsolation: false
     }
 });
-// 初始化拖拽功能，使用唯一key关联
-(0, index_1.initializeDragPlus)(win, 'main-window-key');
+// 初始化拖拽功能
+(0, index_1.initializeDragPlus)(win);
 // 加载页面
 win.loadFile('index.html');
 // 渲染进程使用示例（renderer.js 或 renderer.ts）
 const renderer_1 = require("./renderer");
-// 为标题栏启用拖拽功能，key应与主进程保持一致
+// 为标题栏启用拖拽功能
 // 方法1：使用CSS选择器
-(0, renderer_1.enableWindowDrag)('#title-bar', 'main-window-key');
+(0, renderer_1.enableWindowDrag)('#title-bar');
 // 方法2：使用DOM元素
 const titleBar = document.getElementById('title-bar');
 if (titleBar instanceof HTMLElement) {
-    (0, renderer_1.enableWindowDrag)(titleBar, 'main-window-key');
+    (0, renderer_1.enableWindowDrag)(titleBar);
 }
 // 禁用特定元素的拖拽
 const renderer_2 = require("./renderer");

package/dist/index.d.ts

@@ -2,10 +2,9 @@ import { BrowserWindow } from 'electron';
 /**
  * 主进程初始化拖拽功能
  * @param win Electron窗口实例
- * @param key 唯一标识，用于关联主进程和渲染进程
  */
-export declare function initializeDragPlus(win: BrowserWindow, key: string): void;
+export declare function initializeDragPlus(win: BrowserWindow): void;
 declare const _default: {
-    initialize: typeof initializeDragPlus;
+    initializeDragPlus: typeof initializeDragPlus;
 };
 export default _default;

package/dist/index.js

@@ -2,37 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initializeDragPlus = initializeDragPlus;
 const electron_1 = require("electron");
-// 存储窗口实例和配置的Map
-const windowInstances = new Map();
+// 当前活跃的窗口实例（不再需要Map存储）
+let activeWindowInstance = null;
 /**
  * 主进程初始化拖拽功能
  * @param win Electron窗口实例
- * @param key 唯一标识，用于关联主进程和渲染进程
  */
-function initializeDragPlus(win, key) {
-    if (!win || !key) {
-        throw new Error('窗口实例和key不能为空');
+function initializeDragPlus(win) {
+    if (!win) {
+        throw new Error('窗口实例不能为空');
     }
     const webContents = win.webContents;
-    // 存储窗口实例
-    windowInstances.set(key, { window: win, webContents });
+    // 设置为当前活跃窗口实例
+    activeWindowInstance = { window: win, webContents };
     // 清理函数
     const cleanup = () => {
-        windowInstances.delete(key);
+        if (activeWindowInstance?.window === win) {
+            activeWindowInstance = null;
+        }
     };
     // 监听窗口关闭事件进行清理
     win.on('closed', cleanup);
-    // 发送key到渲染进程
-    webContents.on('did-finish-load', () => {
-        webContents.send('drag-plus:init', { key });
-    });
 }
 // 处理拖拽事件
-electron_1.ipcMain.on('drag-plus:start', (event, { key, x, y }) => {
-    const instance = windowInstances.get(key);
-    if (!instance)
+electron_1.ipcMain.on('drag-plus:start', (event, { x, y }) => {
+    if (!activeWindowInstance)
         return;
-    const { window } = instance;
+    const { window } = activeWindowInstance;
     const data = {
         isDragging: true,
         startX: x,
@@ -40,13 +36,12 @@ electron_1.ipcMain.on('drag-plus:start', (event, { key, x, y }) => {
         originalResizable: window.isResizable()
     };
     // 关联拖拽状态到窗口实例
-    instance.dragData = data;
+    activeWindowInstance.dragData = data;
 });
-electron_1.ipcMain.on('drag-plus:drag', (event, { key, x, y }) => {
-    const instance = windowInstances.get(key);
-    if (!instance || !instance.dragData?.isDragging)
+electron_1.ipcMain.on('drag-plus:drag', (event, { x, y }) => {
+    if (!activeWindowInstance || !activeWindowInstance.dragData?.isDragging)
         return;
-    const { window, dragData } = instance;
+    const { window, dragData } = activeWindowInstance;
     const winBounds = window.getBounds();
     // 计算新位置
     const newX = winBounds.x + (x - dragData.startX);
@@ -64,20 +59,19 @@ electron_1.ipcMain.on('drag-plus:drag', (event, { key, x, y }) => {
     dragData.startX = x;
     dragData.startY = y;
 });
-electron_1.ipcMain.on('drag-plus:stop', (event, { key }) => {
-    const instance = windowInstances.get(key);
-    if (!instance || !instance.dragData)
+electron_1.ipcMain.on('drag-plus:stop', () => {
+    if (!activeWindowInstance || !activeWindowInstance.dragData)
         return;
-    const { window, dragData } = instance;
+    const { window, dragData } = activeWindowInstance;
     // 恢复原始的可缩放状态
     if (dragData.originalResizable !== undefined) {
         window.setResizable(dragData.originalResizable);
     }
     // 清理拖拽数据
-    delete instance.dragData;
+    delete activeWindowInstance.dragData;
 });
 // 确保Map类型正确
 // 默认导出
 exports.default = {
-    initialize: initializeDragPlus
+    initializeDragPlus
 };

package/dist/renderer.d.ts

@@ -1,9 +1,8 @@
 /**
  * 渲染进程启用拖拽功能
  * @param element 元素或元素选择器
- * @param key 窗口标识，用于与主进程通信
  */
-export declare function enableWindowDrag(element: HTMLElement | string, key?: string): void;
+export declare function enableWindowDrag(element: HTMLElement | string): void;
 /**
  * 渲染进程禁用拖拽功能
  * @param element 元素或元素选择器

package/dist/renderer.js

@@ -3,34 +3,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableWindowDrag = enableWindowDrag;
 exports.disableWindowDrag = disableWindowDrag;
 const electron_1 = require("electron");
-// 存储当前窗口的key
-let currentWindowKey = null;
 // 拖拽状态
 let isDragging = false;
 let dragStartX = 0;
 let dragStartY = 0;
+// 初始化标志
+let isInitialized = false;
 // 初始化
 function initDragSystem() {
-    // 接收主进程发送的key
-    electron_1.ipcRenderer.on('drag-plus:init', (event, { key }) => {
-        currentWindowKey = key;
-    });
-    // 设置全局事件监听器
-    document.addEventListener('mousedown', handleMouseDown, true);
-    document.addEventListener('mousemove', handleMouseMove, true);
-    document.addEventListener('mouseup', handleMouseUp, true);
-    // 清理函数
-    return () => {
-        document.removeEventListener('mousedown', handleMouseDown, true);
-        document.removeEventListener('mousemove', handleMouseMove, true);
-        document.removeEventListener('mouseup', handleMouseUp, true);
-        electron_1.ipcRenderer.removeAllListeners('drag-plus:init');
-    };
+    // 如果已经初始化，不再重复初始化
+    if (isInitialized)
+        return;
+    try {
+        // 设置全局事件监听器 - 移除key相关的逻辑
+        document.addEventListener('mousedown', handleMouseDown, true);
+        document.addEventListener('mousemove', handleMouseMove, true);
+        document.addEventListener('mouseup', handleMouseUp, true);
+        isInitialized = true;
+        // 清理函数
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDown, true);
+            document.removeEventListener('mousemove', handleMouseMove, true);
+            document.removeEventListener('mouseup', handleMouseUp, true);
+            isInitialized = false;
+        };
+    }
+    catch (error) {
+        console.error('初始化拖拽系统失败:', error);
+        // 返回一个空的清理函数，避免在调用时出错
+        return () => { };
+    }
+}
+// 延迟初始化，避免在DOM未准备好时初始化
+function delayedInit() {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            // 保存返回的清理函数
+            const cleanup = initDragSystem();
+            if (cleanup) {
+                cleanupFunction = cleanup;
+            }
+        });
+    }
+    else {
+        // 保存返回的清理函数
+        const cleanup = initDragSystem();
+        if (cleanup) {
+            cleanupFunction = cleanup;
+        }
+    }
 }
-// 自动初始化
-let cleanupFunction = null;
+// 自动初始化，但添加错误处理和延迟
+let cleanupFunction = () => { };
 try {
-    cleanupFunction = initDragSystem();
+    delayedInit();
 }
 catch (error) {
     console.warn('初始化拖拽系统失败:', error);
@@ -43,44 +69,81 @@ window.addEventListener('beforeunload', () => {
 });
 // 鼠标按下事件处理器
 function handleMouseDown(e) {
-    const target = e.target;
-    // 检查元素是否是可拖拽区域
-    if (target.style.appRegion === 'drag' && !isElementOrParentNoDrag(target)) {
-        isDragging = true;
-        dragStartX = e.screenX;
-        dragStartY = e.screenY;
-        // 通知主进程开始拖拽
-        if (currentWindowKey) {
-            electron_1.ipcRenderer.send('drag-plus:start', {
-                key: currentWindowKey,
-                x: e.screenX,
-                y: e.screenY
-            });
+    try {
+        const target = e.target;
+        if (!target)
+            return;
+        // 检查元素是否是可拖拽区域
+        if (target.style.appRegion === 'drag' && !isElementOrParentNoDrag(target)) {
+            isDragging = true;
+            dragStartX = e.screenX;
+            dragStartY = e.screenY;
+            // 通知主进程开始拖拽，移除key参数
+            try {
+                electron_1.ipcRenderer.send('drag-plus:start', {
+                    x: e.screenX,
+                    y: e.screenY
+                });
+            }
+            catch (error) {
+                console.warn('发送拖拽开始事件失败:', error);
+                // 重置拖拽状态
+                isDragging = false;
+            }
         }
     }
+    catch (error) {
+        console.error('处理鼠标按下事件失败:', error);
+        isDragging = false;
+    }
 }
 // 鼠标移动事件处理器
 function handleMouseMove(e) {
-    if (isDragging && currentWindowKey) {
+    // 确保我们在拖拽状态
+    if (!isDragging)
+        return;
+    try {
         // 计算鼠标移动距离
         const deltaX = e.screenX - dragStartX;
         const deltaY = e.screenY - dragStartY;
         // 只有在移动超过一定阈值时才发送拖拽事件，减少抖动
         if (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2) {
-            electron_1.ipcRenderer.send('drag-plus:drag', {
-                key: currentWindowKey,
-                x: e.screenX,
-                y: e.screenY
-            });
+            try {
+                // 移除key参数
+                electron_1.ipcRenderer.send('drag-plus:drag', {
+                    x: e.screenX,
+                    y: e.screenY
+                });
+                // 更新拖拽起始位置
+                dragStartX = e.screenX;
+                dragStartY = e.screenY;
+            }
+            catch (error) {
+                console.warn('发送拖拽移动事件失败:', error);
+                // 重置拖拽状态
+                isDragging = false;
+            }
         }
     }
+    catch (error) {
+        console.error('处理鼠标移动事件失败:', error);
+        isDragging = false;
+    }
 }
 // 鼠标释放事件处理器
 function handleMouseUp() {
-    if (isDragging && currentWindowKey) {
-        isDragging = false;
-        // 通知主进程结束拖拽
-        electron_1.ipcRenderer.send('drag-plus:stop', { key: currentWindowKey });
+    // 确保我们在拖拽状态
+    if (!isDragging) {
+        return;
+    }
+    // 先重置拖拽状态，避免事件循环
+    isDragging = false;
+    // 通知主进程结束拖拽，移除key参数
+    try {
+        electron_1.ipcRenderer.send('drag-plus:stop');
+    }
+    catch (error) {
+        console.warn('发送拖拽停止事件失败:', error);
     }
 }
 // 检查元素或其父元素是否有no-drag样式
@@ -100,36 +163,65 @@ function isElementOrParentNoDrag(element) {
 /**
  * 渲染进程启用拖拽功能
  * @param element 元素或元素选择器
- * @param key 窗口标识，用于与主进程通信
  */
-function enableWindowDrag(element, key) {
-    // 如果提供了key，使用它更新当前窗口的key
-    if (key) {
-        currentWindowKey = key;
-    }
-    // 获取目标元素
-    const target = typeof element === 'string'
-        ? document.querySelector(element)
-        : element;
-    if (!target || !(target instanceof HTMLElement)) {
-        console.warn('元素不存在或不是有效的HTMLElement');
-        return;
-    }
-    // 设置为可拖拽区域
-    target.style.appRegion = 'drag';
-    // 自动为子交互元素设置no-drag
+function enableWindowDrag(element) {
     try {
-        const interactiveElements = target.querySelectorAll('button, input, select, textarea, a, [onclick], [href], [tabindex]:not([tabindex="-1"])');
-        interactiveElements.forEach(child => {
-            if (child instanceof HTMLElement && !child.classList.contains('ignore-no-drag')) {
-                child.style.userSelect = 'none';
-                child.style.webkitAppRegion = 'no-drag';
-                child.style.appRegion = 'no-drag';
+        // 确保在DOM环境中执行
+        if (typeof document === 'undefined' || !document.querySelector) {
+            console.warn('无法在当前环境中执行此方法: 缺少DOM支持');
+            return;
+        }
+        // 获取目标元素
+        const target = typeof element === 'string'
+            ? document.querySelector(element)
+            : element;
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn('元素不存在或不是有效的HTMLElement');
+            return;
+        }
+        // 安全地设置拖拽样式
+        try {
+            // 先设置CSS样式，这应该不会影响窗口显示
+            target.style.userSelect = 'none';
+            target.style.webkitAppRegion = 'drag';
+            target.style.appRegion = 'drag';
+        }
+        catch (styleError) {
+            console.error('设置元素样式失败:', styleError);
+            // 继续执行，不要中断函数
+        }
+        // 自动为子交互元素设置no-drag，但不要因为这个过程的异常而中断
+        try {
+            const interactiveElements = target.querySelectorAll('button, input, select, textarea, a, [onclick], [href], [tabindex]:not([tabindex="-1"])');
+            // 分批处理，避免大量元素导致性能问题
+            const batchSize = 50;
+            for (let i = 0; i < interactiveElements.length; i += batchSize) {
+                const batch = Array.from(interactiveElements).slice(i, i + batchSize);
+                // 使用setTimeout避免阻塞主线程
+                setTimeout(() => {
+                    batch.forEach(child => {
+                        try {
+                            if (child instanceof HTMLElement && !child.classList.contains('ignore-no-drag')) {
+                                child.style.userSelect = 'none';
+                                child.style.webkitAppRegion = 'no-drag';
+                                child.style.appRegion = 'no-drag';
+                            }
+                        }
+                        catch (itemError) {
+                            // 忽略单个元素的错误，继续处理其他元素
+                        }
+                    });
+                }, 0);
             }
-        });
+        }
+        catch (error) {
+            console.warn('设置子交互元素失败:', error);
+            // 不中断主函数
+        }
     }
     catch (error) {
-        console.warn('设置交互元素失败:', error);
+        console.error('启用窗口拖拽失败:', error);
+        // 最外层捕获，确保即使发生严重错误也不会影响窗口显示
     }
 }
 /**
@@ -137,14 +229,30 @@ function enableWindowDrag(element, key) {
  * @param element 元素或元素选择器
  */
 function disableWindowDrag(element) {
-    const target = typeof element === 'string'
-        ? document.querySelector(element)
-        : element;
-    if (!target || !(target instanceof HTMLElement)) {
-        return;
+    try {
+        // 确保在DOM环境中执行
+        if (typeof document === 'undefined' || !document.querySelector) {
+            return;
+        }
+        const target = typeof element === 'string'
+            ? document.querySelector(element)
+            : element;
+        if (!target || !(target instanceof HTMLElement)) {
+            return;
+        }
+        // 安全地设置为不可拖拽区域
+        try {
+            target.style.webkitAppRegion = 'no-drag';
+            target.style.appRegion = 'no-drag';
+        }
+        catch (styleError) {
+            console.error('设置元素不可拖拽样式失败:', styleError);
+        }
+    }
+    catch (error) {
+        console.error('禁用窗口拖拽失败:', error);
+        // 最外层捕获，确保即使发生严重错误也不会影响窗口显示
     }
-    // 设置为不可拖拽区域
-    target.style.appRegion = 'no-drag';
 }
 // 默认导出
 exports.default = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-drag-plus",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "增强版Electron窗口拖拽库，解决窗口抖动、不同分辨率/缩放导致的闪屏问题，并支持拖拽区域忽略鼠标事件",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",