electron-drag-plus 1.0.2 → 1.0.3

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
     }
 });
-// 初始化拖拽功能
-(0, index_1.initializeDragPlus)(win);
+// 初始化拖拽功能 - 只需传递窗口实例
+(0, index_1.default)(win);
 // 加载页面
 win.loadFile('index.html');
 // 渲染进程使用示例（renderer.js 或 renderer.ts）
-const renderer_1 = require("./renderer");
-// 为标题栏启用拖拽功能
-// 方法1：使用CSS选择器
-(0, renderer_1.enableWindowDrag)('#title-bar');
-// 方法2：使用DOM元素
-const titleBar = document.getElementById('title-bar');
-if (titleBar instanceof HTMLElement) {
-    (0, renderer_1.enableWindowDrag)(titleBar);
-}
-// 禁用特定元素的拖拽
-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

@@ -4,7 +4,4 @@ import { BrowserWindow } from 'electron';
  * @param win Electron窗口实例
  */
 export declare function initializeDragPlus(win: BrowserWindow): void;
-declare const _default: {
-    initializeDragPlus: typeof initializeDragPlus;
-};
-export default _default;
+export default initializeDragPlus;

package/dist/index.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initializeDragPlus = initializeDragPlus;
 const electron_1 = require("electron");
-// 当前活跃的窗口实例（不再需要Map存储）
-let activeWindowInstance = null;
+// 存储当前拖拽的窗口实例
+let currentWindow = null;
+let dragData = null;
 /**
  * 主进程初始化拖拽功能
  * @param win Electron窗口实例
@@ -12,66 +13,60 @@ function initializeDragPlus(win) {
     if (!win) {
         throw new Error('窗口实例不能为空');
     }
-    const webContents = win.webContents;
-    // 设置为当前活跃窗口实例
-    activeWindowInstance = { window: win, webContents };
-    // 清理函数
-    const cleanup = () => {
-        if (activeWindowInstance?.window === win) {
-            activeWindowInstance = null;
+    // 监听窗口关闭事件清理资源
+    win.on('closed', () => {
+        if (currentWindow === win) {
+            currentWindow = null;
+            dragData = null;
         }
-    };
-    // 监听窗口关闭事件进行清理
-    win.on('closed', cleanup);
+    });
 }
-// 处理拖拽事件
-electron_1.ipcMain.on('drag-plus:start', (event, { x, y }) => {
-    if (!activeWindowInstance)
+// 监听拖拽开始事件
+electron_1.ipcMain.on('electron-drag:start', (event, { x, y }) => {
+    // 获取触发事件的窗口
+    const win = electron_1.BrowserWindow.fromWebContents(event.sender);
+    if (!win)
         return;
-    const { window } = activeWindowInstance;
-    const data = {
+    // 设置当前窗口和拖拽数据
+    currentWindow = win;
+    dragData = {
         isDragging: true,
         startX: x,
         startY: y,
-        originalResizable: window.isResizable()
+        originalResizable: win.isResizable()
     };
-    // 关联拖拽状态到窗口实例
-    activeWindowInstance.dragData = data;
+    // 临时禁用窗口大小调整以优化拖拽体验
+    win.setResizable(false);
 });
-electron_1.ipcMain.on('drag-plus:drag', (event, { x, y }) => {
-    if (!activeWindowInstance || !activeWindowInstance.dragData?.isDragging)
+// 监听拖拽移动事件
+electron_1.ipcMain.on('electron-drag:drag', (event, { x, y }) => {
+    if (!currentWindow || !dragData || !dragData.isDragging)
         return;
-    const { window, dragData } = activeWindowInstance;
-    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', () => {
-    if (!activeWindowInstance || !activeWindowInstance.dragData)
+// 监听拖拽结束事件
+electron_1.ipcMain.on('electron-drag:stop', () => {
+    if (!currentWindow || !dragData)
         return;
-    const { window, dragData } = activeWindowInstance;
-    // 恢复原始的可缩放状态
+    // 恢复窗口原始大小调整状态
     if (dragData.originalResizable !== undefined) {
-        window.setResizable(dragData.originalResizable);
+        currentWindow.setResizable(dragData.originalResizable);
     }
-    // 清理拖拽数据
-    delete activeWindowInstance.dragData;
+    // 清理拖拽状态
+    dragData = null;
 });
-// 确保Map类型正确
 // 默认导出
-exports.default = {
-    initializeDragPlus
-};
+exports.default = initializeDragPlus;

package/dist/renderer.d.ts

@@ -1,15 +1,15 @@
 /**
- * 渲染进程启用拖拽功能
- * @param element 元素或元素选择器
+ * 为DOM元素启用窗口拖拽功能
+ * @param selector CSS选择器或HTMLElement对象
  */
-export declare function enableWindowDrag(element: HTMLElement | 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

@@ -7,150 +7,81 @@ const electron_1 = require("electron");
 let isDragging = false;
 let dragStartX = 0;
 let dragStartY = 0;
-// 初始化标志
-let isInitialized = false;
-// 初始化
-function initDragSystem() {
-    // 如果已经初始化，不再重复初始化
-    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 () => { };
-    }
+// 初始化拖拽事件系统
+function initDragEvents() {
+    // 设置全局鼠标事件监听器
+    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);
+    };
 }
-// 延迟初始化，避免在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;
+if (typeof document !== 'undefined') {
+    cleanupFunction = initDragEvents();
+    // 页面卸载时清理
+    window.addEventListener('beforeunload', () => {
+        if (cleanupFunction) {
+            cleanupFunction();
         }
-    }
-}
-// 自动初始化，但添加错误处理和延迟
-let cleanupFunction = () => { };
-try {
-    delayedInit();
-}
-catch (error) {
-    console.warn('初始化拖拽系统失败:', error);
+    });
 }
-// 页面卸载时清理
-window.addEventListener('beforeunload', () => {
-    if (cleanupFunction) {
-        cleanupFunction();
-    }
-});
 // 鼠标按下事件处理器
 function handleMouseDown(e) {
-    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;
+    const target = e.target;
+    if (!target)
+        return;
+    // 检查元素是否是可拖拽区域且不是no-drag区域
+    if (target.style.appRegion === 'drag' && !isElementNoDrag(target)) {
+        isDragging = true;
+        dragStartX = e.screenX;
+        dragStartY = e.screenY;
+        // 通知主进程开始拖拽
+        electron_1.ipcRenderer.send('electron-drag:start', {
+            x: e.screenX,
+            y: e.screenY
+        });
     }
 }
 // 鼠标移动事件处理器
 function handleMouseMove(e) {
-    // 确保我们在拖拽状态
     if (!isDragging)
         return;
-    try {
-        // 计算鼠标移动距离
-        const deltaX = e.screenX - dragStartX;
-        const deltaY = e.screenY - dragStartY;
-        // 只有在移动超过一定阈值时才发送拖拽事件，减少抖动
-        if (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2) {
-            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;
+    // 计算鼠标移动距离
+    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) {
+    if (!isDragging)
         return;
-    }
-    // 先重置拖拽状态，避免事件循环
+    // 重置拖拽状态
     isDragging = false;
-    // 通知主进程结束拖拽，移除key参数
-    try {
-        electron_1.ipcRenderer.send('drag-plus:stop');
-    }
-    catch (error) {
-        console.warn('发送拖拽停止事件失败:', error);
-    }
+    // 通知主进程结束拖拽
+    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') {
@@ -161,101 +92,55 @@ function isElementOrParentNoDrag(element) {
     return false;
 }
 /**
- * 渲染进程启用拖拽功能
- * @param element 元素或元素选择器
+ * 为DOM元素启用窗口拖拽功能
+ * @param selector CSS选择器或HTMLElement对象
  */
-function enableWindowDrag(element) {
-    try {
-        // 确保在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.error('启用窗口拖拽失败:', error);
-        // 最外层捕获，确保即使发生严重错误也不会影响窗口显示
+function enableWindowDrag(selector) {
+    // 确保在DOM环境中执行
+    if (typeof document === 'undefined')
+        return;
+    // 获取目标元素
+    const element = typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
+    if (!element || !(element instanceof HTMLElement)) {
+        return;
     }
+    // 设置拖拽区域样式
+    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) {
-    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);
-        // 最外层捕获，确保即使发生严重错误也不会影响窗口显示
+function disableWindowDrag(selector) {
+    // 确保在DOM环境中执行
+    if (typeof document === 'undefined')
+        return;
+    // 获取目标元素
+    const element = typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
+    if (!element || !(element instanceof HTMLElement)) {
+        return;
     }
+    // 设置为不可拖拽区域
+    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.2",
-  "description": "增强版Electron窗口拖拽库，解决窗口抖动、不同分辨率/缩放导致的闪屏问题，并支持拖拽区域忽略鼠标事件",
+  "version": "1.0.3",
+  "description": "简单高效的Electron窗口拖拽库，支持自定义拖拽区域和交互元素，适用于无边框窗口应用",
   "main": "dist/index.js",
+  "browser": "dist/renderer.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",