electron-drag-plus 1.0.1 → 1.0.3

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

@@ -2,38 +2,61 @@
 /**
  * electron-drag-plus 简化版API使用示例
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 // 主进程使用示例（main.js 或 main.ts）
 const electron_1 = require("electron");
-const index_1 = require("./index");
+const index_1 = __importDefault(require("./index"));
 // 创建窗口
 const win = new electron_1.BrowserWindow({
     width: 800,
     height: 600,
-    frame: false, // 无边框窗口
+    frame: false, // 无边框窗口通常需要自定义拖拽
     webPreferences: {
-        nodeIntegration: true,
-        contextIsolation: false
+        contextIsolation: false, // 确保能访问ipcRenderer
+        nodeIntegration: true
     }
 });
-// 初始化拖拽功能，使用唯一key关联
-(0, index_1.initializeDragPlus)(win, 'main-window-key');
+// 初始化拖拽功能 - 只需传递窗口实例
+(0, index_1.default)(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');
-// 方法2：使用DOM元素
-const titleBar = document.getElementById('title-bar');
-if (titleBar instanceof HTMLElement) {
-    (0, renderer_1.enableWindowDrag)(titleBar, 'main-window-key');
-}
-// 禁用特定元素的拖拽
-const renderer_2 = require("./renderer");
-// 禁止按钮拖拽
-const closeButton = document.getElementById('close-button');
-if (closeButton instanceof HTMLElement) {
-    (0, renderer_2.disableWindowDrag)(closeButton);
-}
+// 在渲染进程文件中：
+/*
+import { enableWindowDrag, disableWindowDrag } from './renderer';
+
+// 在DOM加载完成后调用
+window.addEventListener('DOMContentLoaded', () => {
+  // 方式1：使用CSS选择器启用拖拽区域
+  enableWindowDrag('#title-bar');
+  
+  // 方式2：直接传递DOM元素
+  const titleBar = document.getElementById('title-bar');
+  if (titleBar) {
+    enableWindowDrag(titleBar);
+  }
+  
+  // 为按钮禁用拖拽，确保可以正常点击
+  const minimizeButton = document.getElementById('minimize-button');
+  const maximizeButton = document.getElementById('maximize-button');
+  const closeButton = document.getElementById('close-button');
+  
+  if (minimizeButton) disableWindowDrag(minimizeButton);
+  if (maximizeButton) disableWindowDrag(maximizeButton);
+  if (closeButton) disableWindowDrag(closeButton);
+});
+*/
+// HTML示例
+/*
+<div id="title-bar" style="height: 30px; background: #333; color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;">
+  <div>窗口标题</div>
+  <div>
+    <button id="minimize-button">-</button>
+    <button id="maximize-button">□</button>
+    <button id="close-button">×</button>
+  </div>
+</div>
+*/ 

package/dist/index.d.ts

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

package/dist/index.js

@@ -2,82 +2,71 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initializeDragPlus = initializeDragPlus;
 const electron_1 = require("electron");
-// 存储窗口实例和配置的Map
-const windowInstances = new Map();
+// 存储当前拖拽的窗口实例
+let currentWindow = null;
+let dragData = 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 });
-    // 清理函数
-    const cleanup = () => {
-        windowInstances.delete(key);
-    };
-    // 监听窗口关闭事件进行清理
-    win.on('closed', cleanup);
-    // 发送key到渲染进程
-    webContents.on('did-finish-load', () => {
-        webContents.send('drag-plus:init', { key });
+    // 监听窗口关闭事件清理资源
+    win.on('closed', () => {
+        if (currentWindow === win) {
+            currentWindow = null;
+            dragData = null;
+        }
     });
 }
-// 处理拖拽事件
-electron_1.ipcMain.on('drag-plus:start', (event, { key, x, y }) => {
-    const instance = windowInstances.get(key);
-    if (!instance)
+// 监听拖拽开始事件
+electron_1.ipcMain.on('electron-drag:start', (event, { x, y }) => {
+    // 获取触发事件的窗口
+    const win = electron_1.BrowserWindow.fromWebContents(event.sender);
+    if (!win)
         return;
-    const { window } = instance;
-    const data = {
+    // 设置当前窗口和拖拽数据
+    currentWindow = win;
+    dragData = {
         isDragging: true,
         startX: x,
         startY: y,
-        originalResizable: window.isResizable()
+        originalResizable: win.isResizable()
     };
-    // 关联拖拽状态到窗口实例
-    instance.dragData = data;
+    // 临时禁用窗口大小调整以优化拖拽体验
+    win.setResizable(false);
 });
-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('electron-drag:drag', (event, { x, y }) => {
+    if (!currentWindow || !dragData || !dragData.isDragging)
         return;
-    const { window, dragData } = instance;
-    const winBounds = window.getBounds();
-    // 计算新位置
-    const newX = winBounds.x + (x - dragData.startX);
-    const newY = winBounds.y + (y - dragData.startY);
-    // 应用窗口防抖优化
-    // 1. 记住当前尺寸
-    const size = window.getSize();
-    // 2. 关闭缩放
-    window.setResizable(false);
-    // 3. 设置新坐标
-    window.setPosition(newX, newY, false);
-    // 4. 强制写回尺寸
-    window.setSize(size[0], size[1], false);
-    // 更新拖拽起始位置
-    dragData.startX = x;
-    dragData.startY = y;
+    try {
+        const winBounds = currentWindow.getBounds();
+        // 计算新位置
+        const newX = winBounds.x + (x - dragData.startX);
+        const newY = winBounds.y + (y - dragData.startY);
+        // 设置窗口位置
+        currentWindow.setPosition(newX, newY, false);
+        // 更新拖拽起始位置
+        dragData.startX = x;
+        dragData.startY = y;
+    }
+    catch (error) {
+        console.error('拖拽移动出错:', error);
+    }
 });
-electron_1.ipcMain.on('drag-plus:stop', (event, { key }) => {
-    const instance = windowInstances.get(key);
-    if (!instance || !instance.dragData)
+// 监听拖拽结束事件
+electron_1.ipcMain.on('electron-drag:stop', () => {
+    if (!currentWindow || !dragData)
         return;
-    const { window, dragData } = instance;
-    // 恢复原始的可缩放状态
+    // 恢复窗口原始大小调整状态
     if (dragData.originalResizable !== undefined) {
-        window.setResizable(dragData.originalResizable);
+        currentWindow.setResizable(dragData.originalResizable);
     }
-    // 清理拖拽数据
-    delete instance.dragData;
+    // 清理拖拽状态
+    dragData = null;
 });
-// 确保Map类型正确
 // 默认导出
-exports.default = {
-    initialize: initializeDragPlus
-};
+exports.default = initializeDragPlus;

package/dist/renderer.d.ts

@@ -1,16 +1,15 @@
 /**
- * 渲染进程启用拖拽功能
- * @param element 元素或元素选择器
- * @param key 窗口标识，用于与主进程通信
+ * 为DOM元素启用窗口拖拽功能
+ * @param selector CSS选择器或HTMLElement对象
  */
-export declare function enableWindowDrag(element: HTMLElement | string, key?: string): void;
+export declare function enableWindowDrag(selector: string | HTMLElement): void;
 /**
- * 渲染进程禁用拖拽功能
- * @param element 元素或元素选择器
+ * 禁用DOM元素的窗口拖拽功能
+ * @param selector CSS选择器或HTMLElement对象
  */
-export declare function disableWindowDrag(element: HTMLElement | string): void;
+export declare function disableWindowDrag(selector: string | HTMLElement): void;
 declare const _default: {
-    enableDrag: typeof enableWindowDrag;
-    disableDrag: typeof disableWindowDrag;
+    enableWindowDrag: typeof enableWindowDrag;
+    disableWindowDrag: typeof disableWindowDrag;
 };
 export default _default;

package/dist/renderer.js

@@ -3,19 +3,13 @@ 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;
-// 初始化
-function initDragSystem() {
-    // 接收主进程发送的key
-    electron_1.ipcRenderer.on('drag-plus:init', (event, { key }) => {
-        currentWindowKey = key;
-    });
-    // 设置全局事件监听器
+// 初始化拖拽事件系统
+function initDragEvents() {
+    // 设置全局鼠标事件监听器
     document.addEventListener('mousedown', handleMouseDown, true);
     document.addEventListener('mousemove', handleMouseMove, true);
     document.addEventListener('mouseup', handleMouseUp, true);
@@ -24,70 +18,70 @@ function initDragSystem() {
         document.removeEventListener('mousedown', handleMouseDown, true);
         document.removeEventListener('mousemove', handleMouseMove, true);
         document.removeEventListener('mouseup', handleMouseUp, true);
-        electron_1.ipcRenderer.removeAllListeners('drag-plus:init');
     };
 }
-// 自动初始化
+// 初始化系统
 let cleanupFunction = null;
-try {
-    cleanupFunction = initDragSystem();
-}
-catch (error) {
-    console.warn('初始化拖拽系统失败:', error);
+if (typeof document !== 'undefined') {
+    cleanupFunction = initDragEvents();
+    // 页面卸载时清理
+    window.addEventListener('beforeunload', () => {
+        if (cleanupFunction) {
+            cleanupFunction();
+        }
+    });
 }
-// 页面卸载时清理
-window.addEventListener('beforeunload', () => {
-    if (cleanupFunction) {
-        cleanupFunction();
-    }
-});
 // 鼠标按下事件处理器
 function handleMouseDown(e) {
     const target = e.target;
-    // 检查元素是否是可拖拽区域
-    if (target.style.appRegion === 'drag' && !isElementOrParentNoDrag(target)) {
+    if (!target)
+        return;
+    // 检查元素是否是可拖拽区域且不是no-drag区域
+    if (target.style.appRegion === 'drag' && !isElementNoDrag(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
-            });
-        }
+        electron_1.ipcRenderer.send('electron-drag:start', {
+            x: e.screenX,
+            y: e.screenY
+        });
     }
 }
 // 鼠标移动事件处理器
 function handleMouseMove(e) {
-    if (isDragging && currentWindowKey) {
-        // 计算鼠标移动距离
-        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
-            });
-        }
+    if (!isDragging)
+        return;
+    // 计算鼠标移动距离
+    const deltaX = e.screenX - dragStartX;
+    const deltaY = e.screenY - dragStartY;
+    // 只有在移动超过一定阈值时才发送拖拽事件，减少抖动
+    if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
+        // 通知主进程进行拖拽
+        electron_1.ipcRenderer.send('electron-drag:drag', {
+            x: e.screenX,
+            y: e.screenY
+        });
+        // 更新拖拽起始位置
+        dragStartX = e.screenX;
+        dragStartY = e.screenY;
     }
 }
 // 鼠标释放事件处理器
 function handleMouseUp() {
-    if (isDragging && currentWindowKey) {
-        isDragging = false;
-        // 通知主进程结束拖拽
-        electron_1.ipcRenderer.send('drag-plus:stop', { key: currentWindowKey });
-    }
+    if (!isDragging)
+        return;
+    // 重置拖拽状态
+    isDragging = false;
+    // 通知主进程结束拖拽
+    electron_1.ipcRenderer.send('electron-drag:stop');
 }
-// 检查元素或其父元素是否有no-drag样式
-function isElementOrParentNoDrag(element) {
+// 检查元素是否是不可拖拽区域
+function isElementNoDrag(element) {
     if (element.style.appRegion === 'no-drag') {
         return true;
     }
+    // 检查父元素链
     let parent = element.parentElement;
     while (parent) {
         if (parent.style.appRegion === 'no-drag') {
@@ -98,56 +92,55 @@ function isElementOrParentNoDrag(element) {
     return false;
 }
 /**
- * 渲染进程启用拖拽功能
- * @param element 元素或元素选择器
- * @param key 窗口标识，用于与主进程通信
+ * 为DOM元素启用窗口拖拽功能
+ * @param selector CSS选择器或HTMLElement对象
  */
-function enableWindowDrag(element, key) {
-    // 如果提供了key，使用它更新当前窗口的key
-    if (key) {
-        currentWindowKey = key;
-    }
+function enableWindowDrag(selector) {
+    // 确保在DOM环境中执行
+    if (typeof document === 'undefined')
+        return;
     // 获取目标元素
-    const target = typeof element === 'string'
-        ? document.querySelector(element)
-        : element;
-    if (!target || !(target instanceof HTMLElement)) {
-        console.warn('元素不存在或不是有效的HTMLElement');
+    const element = typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
+    if (!element || !(element instanceof HTMLElement)) {
         return;
     }
-    // 设置为可拖拽区域
-    target.style.appRegion = 'drag';
-    // 自动为子交互元素设置no-drag
-    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';
-            }
-        });
-    }
-    catch (error) {
-        console.warn('设置交互元素失败:', error);
-    }
+    // 设置拖拽区域样式
+    element.style.userSelect = 'none';
+    element.style.webkitAppRegion = 'drag';
+    element.style.appRegion = 'drag';
+    // 为交互元素设置不可拖拽，确保正常操作
+    const interactiveElements = element.querySelectorAll('button, input, select, textarea, a, [onclick], [href], [tabindex]:not([tabindex="-1"])');
+    interactiveElements.forEach(child => {
+        if (child instanceof HTMLElement) {
+            child.style.userSelect = 'none';
+            child.style.webkitAppRegion = 'no-drag';
+            child.style.appRegion = 'no-drag';
+        }
+    });
 }
 /**
- * 渲染进程禁用拖拽功能
- * @param element 元素或元素选择器
+ * 禁用DOM元素的窗口拖拽功能
+ * @param selector CSS选择器或HTMLElement对象
  */
-function disableWindowDrag(element) {
-    const target = typeof element === 'string'
-        ? document.querySelector(element)
-        : element;
-    if (!target || !(target instanceof HTMLElement)) {
+function disableWindowDrag(selector) {
+    // 确保在DOM环境中执行
+    if (typeof document === 'undefined')
+        return;
+    // 获取目标元素
+    const element = typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
+    if (!element || !(element instanceof HTMLElement)) {
         return;
     }
     // 设置为不可拖拽区域
-    target.style.appRegion = 'no-drag';
+    element.style.webkitAppRegion = 'no-drag';
+    element.style.appRegion = 'no-drag';
 }
 // 默认导出
 exports.default = {
-    enableDrag: enableWindowDrag,
-    disableDrag: disableWindowDrag
+    enableWindowDrag,
+    disableWindowDrag
 };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "electron-drag-plus",
-  "version": "1.0.1",
-  "description": "增强版Electron窗口拖拽库，解决窗口抖动、不同分辨率/缩放导致的闪屏问题，并支持拖拽区域忽略鼠标事件",
+  "version": "1.0.3",
+  "description": "简单高效的Electron窗口拖拽库，支持自定义拖拽区域和交互元素，适用于无边框窗口应用",
   "main": "dist/index.js",
+  "browser": "dist/renderer.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",