electron-drag-plus 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 electron-drag-plus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,378 @@
+# electron-drag-plus
+
+增强版Electron窗口拖拽库，解决窗口抖动、不同分辨率/缩放导致的闪屏问题，并支持拖拽区域忽略鼠标事件。
+
+## 功能特性
+
+- ✅ 解决Electron原生拖拽可能出现的窗口抖动问题
+- ✅ 修复不同分辨率和显示器缩放导致的拖拽闪屏问题
+- ✅ 智能识别并忽略拖拽区域内的交互元素（按钮、输入框等）
+- ✅ 支持自定义忽略元素选择器
+- ✅ 提供平滑拖拽体验
+- ✅ 支持高DPI显示器
+- ✅ 简单易用的API
+- ✅ TypeScript支持
+
+## 安装
+
+```bash
+npm install electron-drag-plus
+# 或
+yarn add electron-drag-plus
+# 或
+pnpm add electron-drag-plus
+```
+
+## 使用方法
+
+### 主进程使用
+
+```javascript
+// 在主进程中
+import { app, BrowserWindow } from 'electron';
+import { DragPlus } from 'electron-drag-plus';
+
+// 创建窗口时初始化拖拽增强
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    frame: false, // 无边框窗口
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+
+  // 初始化拖拽增强
+  const dragPlus = new DragPlus(win, {
+    ignoreSelectors: ['.no-drag', '#close-button'],
+    enableHighDPI: true,
+    smoothDrag: true
+  });
+
+  // 手动启用特定元素的拖拽
+  dragPlus.enableDrag('.title-bar');
+  
+  // 手动禁用特定元素的拖拽
+  dragPlus.disableDrag('.window-controls');
+
+  win.loadFile('index.html');
+}
+
+app.whenReady().then(createWindow);
+```
+
+### 渲染进程使用
+
+```javascript
+// 在渲染进程中
+import { initDragPlus, setupDraggableArea, enableDrag, disableDrag } from 'electron-drag-plus/dist/renderer';
+
+// 初始化拖拽功能
+initDragPlus({
+  ignoreSelectors: ['.no-drag', '.button'],
+  enableHighDPI: true,
+  smoothDrag: true
+});
+
+// 方法1: 设置整个区域为可拖拽，并自动忽略交互元素
+setupDraggableArea('.title-bar');
+
+// 方法2: 手动为元素启用拖拽
+const header = document.getElementById('app-header');
+enableDrag(header, { ignoreChildren: true });
+
+// 方法3: 手动为元素禁用拖拽
+const closeButton = document.getElementById('close-btn');
+disableDrag(closeButton);
+```
+
+### 在现代框架中使用
+
+#### Vue 3 (Composition API)
+
+```vue
+<template>
+  <div class="app">
+    <div ref="titleBar" class="title-bar">
+      <h1>应用标题</h1>
+      <div class="window-controls">
+        <button @click="minimize">-</button>
+        <button @click="maximize">□</button>
+        <button @click="close">×</button>
+      </div>
+    </div>
+    <div class="content">
+      <!-- 应用内容 -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { setupDraggableArea } from 'electron-drag-plus/dist/renderer';
+
+// 使用 ref 获取DOM元素
+const titleBar = ref(null);
+
+// 窗口控制函数
+const minimize = () => {
+  window.electron.ipcRenderer.send('window:minimize');
+};
+
+const maximize = () => {
+  window.electron.ipcRenderer.send('window:maximize');
+};
+
+const close = () => {
+  window.electron.ipcRenderer.send('window:close');
+};
+
+// 组件挂载后设置拖拽区域
+onMounted(() => {
+  if (titleBar.value) {
+    setupDraggableArea(titleBar.value);
+  }
+});
+</script>
+
+<style scoped>
+.title-bar {
+  height: 40px;
+  background: #333;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  user-select: none;
+}
+
+.window-controls button {
+  width: 30px;
+  height: 30px;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+
+/* 确保按钮不会触发拖拽 */
+.window-controls button {
+  -webkit-app-region: no-drag;
+}
+</style>
+```
+
+#### Vue 3 组合式函数封装
+
+```vue
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { setupDraggableArea, destroyDragPlus } from 'electron-drag-plus/dist/renderer';
+
+// 创建可拖拽标题栏组件
+const titleBar = ref(null);
+
+// 组件挂载时初始化拖拽
+onMounted(() => {
+  if (titleBar.value) {
+    setupDraggableArea(titleBar.value);
+  }
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 如果需要全局清理
+  // destroyDragPlus();
+});
+</script>
+```
+
+#### React
+
+```jsx
+import React, { useEffect, useRef } from 'react';
+import { setupDraggableArea } from 'electron-drag-plus/dist/renderer';
+
+function App() {
+  const titleBarRef = useRef(null);
+  
+  useEffect(() => {
+    // 设置标题栏为可拖拽区域
+    if (titleBarRef.current) {
+      setupDraggableArea(titleBarRef.current);
+    }
+  }, []);
+  
+  const minimize = () => {
+    window.electron.ipcRenderer.send('window:minimize');
+  };
+  
+  const maximize = () => {
+    window.electron.ipcRenderer.send('window:maximize');
+  };
+  
+  const close = () => {
+    window.electron.ipcRenderer.send('window:close');
+  };
+  
+  return (
+    <div className="app">
+      <div ref={titleBarRef} className="title-bar">
+        <h1>应用标题</h1>
+        <div className="window-controls">
+          <button onClick={minimize}>-</button>
+          <button onClick={maximize}>□</button>
+          <button onClick={close}>×</button>
+        </div>
+      </div>
+      <div className="content">
+        {/* 应用内容 */}
+      </div>
+    </div>
+  );
+}
+
+export default App;
+```
+
+#### React 自定义Hook
+
+```jsx
+import { useEffect } from 'react';
+import { setupDraggableArea } from 'electron-drag-plus/dist/renderer';
+
+// 创建一个自定义Hook来管理拖拽区域
+export function useDraggable(ref) {
+  useEffect(() => {
+    if (ref.current) {
+      setupDraggableArea(ref.current);
+    }
+  }, [ref]);
+}
+
+// 使用示例
+function DraggableTitleBar() {
+  const titleBarRef = useRef(null);
+  useDraggable(titleBarRef);
+  
+  return (
+    <div ref={titleBarRef} className="title-bar">
+      <h1>拖拽标题栏</h1>
+    </div>
+  );
+}
+
+## API 参考
+
+### 主进程 API
+
+#### DragPlus 类
+
+```typescript
+constructor(window: BrowserWindow, options?: DragPlusOptions);
+```
+
+**参数**:
+- `window`: Electron BrowserWindow 实例
+- `options`: 配置选项
+  - `ignoreSelectors`: 忽略的CSS选择器数组
+  - `enableHighDPI`: 是否启用高DPI支持
+  - `smoothDrag`: 是否启用平滑拖拽
+
+**方法**:
+
+- `enableDrag(elementSelector: string)`: 为指定选择器的元素启用拖拽
+- `disableDrag(elementSelector: string)`: 为指定选择器的元素禁用拖拽
+- `updateOptions(newOptions: Partial<DragPlusOptions>)`: 更新配置选项
+- `static getInstance(webContentsId: number)`: 获取特定webContents的DragPlus实例
+
+### 渲染进程 API
+
+#### 初始化
+
+```typescript
+function initDragPlus(options?: RendererDragOptions): void;
+```
+
+**参数**:
+- `options`: 配置选项，与主进程相同
+
+#### 拖拽管理
+
+```typescript
+// 设置可拖拽区域，自动忽略交互元素
+function setupDraggableArea(container: HTMLElement | string): void;
+
+// 为元素启用拖拽
+function enableDrag(element: HTMLElement | string, options?: { ignoreChildren?: boolean }): void;
+
+// 为元素禁用拖拽
+function disableDrag(element: HTMLElement | string): void;
+
+// 更新配置选项
+function updateDragPlusOptions(options: Partial<RendererDragOptions>): void;
+
+// 销毁拖拽管理器
+function destroyDragPlus(): void;
+```
+
+## 常见问题
+
+### 1. 拖拽区域内的按钮无法点击
+
+确保为按钮元素设置了`no-drag`样式：
+
+```css
+.button {
+  -webkit-app-region: no-drag;
+}
+```
+
+或者使用`setupDraggableArea`函数，它会自动为交互元素添加`no-drag`。
+
+### 2. 在高DPI显示器上拖拽仍然有问题
+
+确保在创建`DragPlus`实例时启用了高DPI支持：
+
+```javascript
+const dragPlus = new DragPlus(win, {
+  enableHighDPI: true
+});
+```
+
+### 3. 窗口拖拽时仍然有抖动
+
+尝试调整`smoothDrag`选项，或者检查是否有其他事件监听器干扰拖拽行为：
+
+```javascript
+const dragPlus = new DragPlus(win, {
+  smoothDrag: true
+});
+```
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 开发模式
+pnpm run dev
+
+# 构建
+pnpm run build
+
+# 运行测试
+pnpm run test
+```
+
+## 许可证
+
+[MIT](LICENSE)
+
+## 贡献
+
+欢迎提交Issue和Pull Request！

package/dist/example.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/example.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// 主进程使用示例
+const electron_1 = require("electron");
+const index_1 = require("./index");
+// 创建窗口时初始化拖拽增强
+function createWindow() {
+    const win = new electron_1.BrowserWindow({
+        width: 800,
+        height: 600,
+        frame: false, // 无边框窗口
+        webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false
+        }
+    });
+    // 初始化拖拽增强
+    const dragPlus = new index_1.DragPlus(win, {
+        ignoreSelectors: ['.no-drag', '#close-button'],
+        enableHighDPI: true,
+        smoothDrag: true
+    });
+    // 手动启用特定元素的拖拽
+    dragPlus.enableDrag('.title-bar');
+    // 手动禁用特定元素的拖拽
+    dragPlus.disableDrag('.window-controls');
+    win.loadFile('index.html');
+}
+electron_1.app.whenReady().then(createWindow);
+// 渲染进程使用示例
+/*
+// 在渲染进程中
+import { initDragPlus, setupDraggableArea, enableDrag, disableDrag } from 'electron-drag-plus/dist/renderer';
+
+// 初始化拖拽功能
+initDragPlus({
+  ignoreSelectors: ['.no-drag', '.button'],
+  enableHighDPI: true,
+  smoothDrag: true
+});
+
+// 方法1: 设置整个区域为可拖拽，并自动忽略交互元素
+setupDraggableArea('.title-bar');
+
+// 方法2: 手动为元素启用拖拽
+const header = document.getElementById('app-header');
+enableDrag(header, { ignoreChildren: true });
+
+// 方法3: 手动为元素禁用拖拽
+const closeButton = document.getElementById('close-btn');
+disableDrag(closeButton);
+
+// 在Vue组件中使用示例
+// export default {
+//   mounted() {
+//     setupDraggableArea(this.$refs.titleBar);
+//   }
+// }
+
+// 在React组件中使用示例
+// import { useEffect, useRef } from 'react';
+//
+// export function TitleBar() {
+//   const titleBarRef = useRef(null);
+//
+//   useEffect(() => {
+//     setupDraggableArea(titleBarRef.current);
+//   }, []);
+//
+//   return (
+//     <div ref={titleBarRef}>
+//       <h1>应用标题</h1>
+//       <button className="window-control">关闭</button>
+//     </div>
+//   );
+// }
+*/ 

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+import { BrowserWindow } from 'electron';
+/**
+ * 拖拽配置选项
+ */
+export interface DragPlusOptions {
+    /**
+     * 需要忽略鼠标事件的选择器
+     */
+    ignoreSelectors?: string[];
+    /**
+     * 是否启用高DPI支持，解决不同分辨率和缩放问题
+     * @default true
+     */
+    enableHighDPI?: boolean;
+    /**
+     * 是否启用平滑拖拽，解决窗口抖动问题
+     * @default true
+     */
+    smoothDrag?: boolean;
+}
+/**
+ * DragPlus类 - 增强版Electron窗口拖拽库
+ */
+export declare class DragPlus {
+    private static instances;
+    private window;
+    private webContents;
+    private options;
+    private isDragging;
+    private lastMousePosition;
+    private originalResizableState;
+    /**
+     * 构造函数
+     * @param window Electron窗口实例
+     * @param options 配置选项
+     */
+    constructor(window: BrowserWindow, options?: DragPlusOptions);
+    /**
+     * 设置拖拽功能
+     */
+    private setup;
+    /**
+     * 获取特定webContents的DragPlus实例
+     * @param webContentsId webContents的ID
+     * @returns DragPlus实例或undefined
+     */
+    static getInstance(webContentsId: number): DragPlus | undefined;
+    /**
+     * 启用元素拖拽
+     * @param elementSelector CSS选择器
+     */
+    enableDrag(elementSelector: string): void;
+    /**
+     * 禁用元素拖拽
+     * @param elementSelector CSS选择器
+     */
+    disableDrag(elementSelector: string): void;
+    /**
+     * 更新配置
+     * @param newOptions 新的配置选项
+     */
+    updateOptions(newOptions: Partial<DragPlusOptions>): void;
+}
+/**
+ * 渲染进程使用的工具函数集合
+ */
+export declare const renderer: {
+    /**
+     * 为元素添加拖拽功能
+     * @param element 元素或元素选择器
+     * @param options 配置选项
+     */
+    enableDrag(element: HTMLElement | string, options?: {
+        ignoreChildren?: boolean;
+    }): void;
+    /**
+     * 为元素禁用拖拽功能
+     * @param element 元素或元素选择器
+     */
+    disableDrag(element: HTMLElement | string): void;
+    /**
+     * 设置可拖拽区域，自动忽略交互元素
+     * @param container 容器元素或选择器
+     */
+    setupDraggableArea(container: HTMLElement | string): void;
+};
+declare const dragPlus: {
+    DragPlus: typeof DragPlus;
+    renderer: {
+        /**
+         * 为元素添加拖拽功能
+         * @param element 元素或元素选择器
+         * @param options 配置选项
+         */
+        enableDrag(element: HTMLElement | string, options?: {
+            ignoreChildren?: boolean;
+        }): void;
+        /**
+         * 为元素禁用拖拽功能
+         * @param element 元素或元素选择器
+         */
+        disableDrag(element: HTMLElement | string): void;
+        /**
+         * 设置可拖拽区域，自动忽略交互元素
+         * @param container 容器元素或选择器
+         */
+        setupDraggableArea(container: HTMLElement | string): void;
+    };
+};
+export default dragPlus;

package/dist/index.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderer = exports.DragPlus = void 0;
+const electron_1 = require("electron");
+/**
+ * DragPlus类 - 增强版Electron窗口拖拽库
+ */
+class DragPlus {
+    /**
+     * 构造函数
+     * @param window Electron窗口实例
+     * @param options 配置选项
+     */
+    constructor(window, options = {}) {
+        this.isDragging = false;
+        this.lastMousePosition = null;
+        this.originalResizableState = null;
+        this.window = window;
+        this.webContents = window.webContents;
+        this.options = {
+            ignoreSelectors: options.ignoreSelectors || [],
+            enableHighDPI: options.enableHighDPI ?? true,
+            smoothDrag: options.smoothDrag ?? true
+        };
+        // 存储实例引用
+        DragPlus.instances.set(this.webContents.id, this);
+        this.setup();
+    }
+    /**
+     * 设置拖拽功能
+     */
+    setup() {
+        // 向渲染进程发送配置信息
+        this.webContents.on('did-finish-load', () => {
+            this.webContents.send('drag-plus:config', this.options);
+        });
+        // 处理拖拽事件
+        electron_1.ipcMain.on('drag-plus:start', (event, data) => {
+            if (this.options.smoothDrag) {
+                this.isDragging = true;
+                this.lastMousePosition = { x: data.x, y: data.y };
+                // 保存原始的可缩放状态
+                this.originalResizableState = this.window.isResizable();
+            }
+            else {
+                // 如果不使用平滑拖拽，则使用原生方式
+                this.window.setIgnoreMouseEvents(false, { forward: true });
+            }
+        });
+        electron_1.ipcMain.on('drag-plus:drag', (event, data) => {
+            if (this.isDragging && this.options.smoothDrag && this.lastMousePosition) {
+                const winBounds = this.window.getBounds();
+                const x = winBounds.x + (data.x - this.lastMousePosition.x);
+                const y = winBounds.y + (data.y - this.lastMousePosition.y);
+                // 应用优化的拖拽移动方法，解决窗口抖动问题
+                // 1. 记住当前尺寸
+                const size = this.window.getSize();
+                // 2. 关闭缩放
+                this.window.setResizable(false);
+                // 3. 设置新坐标
+                this.window.setPosition(x, y, false);
+                // 4. 强制写回尺寸
+                this.window.setSize(size[0], size[1], false);
+                // 5. 重新允许缩放 (移动结束时恢复，而不是每次移动都恢复)
+                this.lastMousePosition = { x: data.x, y: data.y };
+            }
+        });
+        electron_1.ipcMain.on('drag-plus:stop', () => {
+            this.isDragging = false;
+            this.lastMousePosition = null;
+            // 恢复原始的可缩放状态
+            if (this.originalResizableState !== null) {
+                this.window.setResizable(this.originalResizableState);
+                this.originalResizableState = null;
+            }
+            this.window.setIgnoreMouseEvents(false);
+        });
+        // 清理
+        this.window.on('closed', () => {
+            DragPlus.instances.delete(this.webContents.id);
+        });
+    }
+    /**
+     * 获取特定webContents的DragPlus实例
+     * @param webContentsId webContents的ID
+     * @returns DragPlus实例或undefined
+     */
+    static getInstance(webContentsId) {
+        return DragPlus.instances.get(webContentsId);
+    }
+    /**
+     * 启用元素拖拽
+     * @param elementSelector CSS选择器
+     */
+    enableDrag(elementSelector) {
+        this.webContents.executeJavaScript(`
+      (function() {
+        const elements = document.querySelectorAll('${elementSelector.replace(/'/g, "\\'")}');
+        elements.forEach(element => {
+          element.style.appRegion = 'drag';
+        });
+      })();
+    `);
+    }
+    /**
+     * 禁用元素拖拽
+     * @param elementSelector CSS选择器
+     */
+    disableDrag(elementSelector) {
+        this.webContents.executeJavaScript(`
+      (function() {
+        const elements = document.querySelectorAll('${elementSelector.replace(/'/g, "\\'")}');
+        elements.forEach(element => {
+          element.style.appRegion = 'no-drag';
+        });
+      })();
+    `);
+    }
+    /**
+     * 更新配置
+     * @param newOptions 新的配置选项
+     */
+    updateOptions(newOptions) {
+        this.options = { ...this.options, ...newOptions };
+        this.webContents.send('drag-plus:config', this.options);
+    }
+}
+exports.DragPlus = DragPlus;
+DragPlus.instances = new Map();
+/**
+ * 渲染进程使用的工具函数集合
+ */
+exports.renderer = {
+    /**
+     * 为元素添加拖拽功能
+     * @param element 元素或元素选择器
+     * @param options 配置选项
+     */
+    enableDrag(element, options) {
+        const target = typeof element === 'string' ?
+            document.querySelector(element) : element;
+        if (target && target instanceof HTMLElement) {
+            target.style.appRegion = 'drag';
+            // 处理需要忽略的子元素
+            if (options?.ignoreChildren) {
+                const interactiveElements = target.querySelectorAll('button, input, select, textarea, a, [onclick]');
+                interactiveElements.forEach(child => {
+                    child.style.appRegion = 'no-drag';
+                });
+            }
+        }
+    },
+    /**
+     * 为元素禁用拖拽功能
+     * @param element 元素或元素选择器
+     */
+    disableDrag(element) {
+        const target = typeof element === 'string' ?
+            document.querySelector(element) : element;
+        if (target && target instanceof HTMLElement) {
+            target.style.appRegion = 'no-drag';
+        }
+    },
+    /**
+     * 设置可拖拽区域，自动忽略交互元素
+     * @param container 容器元素或选择器
+     */
+    setupDraggableArea(container) {
+        const target = typeof container === 'string' ?
+            document.querySelector(container) : container;
+        if (target && target instanceof HTMLElement) {
+            // 设置整个容器为可拖拽
+            target.style.appRegion = 'drag';
+            // 为所有交互元素设置no-drag
+            const interactiveElements = target.querySelectorAll('button, input, select, textarea, a, [onclick], [href], [tabindex]:not([tabindex="-1"])');
+            interactiveElements.forEach(element => {
+                element.style.appRegion = 'no-drag';
+            });
+        }
+    }
+};
+// 默认导出
+const dragPlus = {
+    DragPlus,
+    renderer: exports.renderer
+};
+exports.default = dragPlus;

package/dist/renderer.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 渲染进程的拖拽配置选项
+ */
+export interface RendererDragOptions {
+    /**
+     * 需要忽略鼠标事件的选择器
+     */
+    ignoreSelectors?: string[];
+    /**
+     * 是否启用高DPI支持
+     */
+    enableHighDPI?: boolean;
+    /**
+     * 是否启用平滑拖拽
+     */
+    smoothDrag?: boolean;
+}
+/**
+ * 初始化拖拽管理器
+ * @param options 配置选项
+ */
+export declare function initDragPlus(options?: RendererDragOptions): void;
+/**
+ * 为元素添加拖拽功能
+ * @param element 元素或元素选择器
+ * @param options 配置选项
+ */
+export declare function enableDrag(element: HTMLElement | string, options?: {
+    ignoreChildren?: boolean;
+}): void;
+/**
+ * 为元素禁用拖拽功能
+ * @param element 元素或元素选择器
+ */
+export declare function disableDrag(element: HTMLElement | string): void;
+/**
+ * 设置可拖拽区域，自动忽略交互元素
+ * @param container 容器元素或选择器
+ */
+export declare function setupDraggableArea(container: HTMLElement | string): void;
+/**
+ * 更新拖拽配置
+ * @param options 新的配置选项
+ */
+export declare function updateDragPlusOptions(options: Partial<RendererDragOptions>): void;
+/**
+ * 销毁拖拽管理器
+ */
+export declare function destroyDragPlus(): void;
+declare const _default: {
+    init: typeof initDragPlus;
+    enableDrag: typeof enableDrag;
+    disableDrag: typeof disableDrag;
+    setupDraggableArea: typeof setupDraggableArea;
+    updateOptions: typeof updateDragPlusOptions;
+    destroy: typeof destroyDragPlus;
+};
+export default _default;

package/dist/renderer.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initDragPlus = initDragPlus;
+exports.enableDrag = enableDrag;
+exports.disableDrag = disableDrag;
+exports.setupDraggableArea = setupDraggableArea;
+exports.updateDragPlusOptions = updateDragPlusOptions;
+exports.destroyDragPlus = destroyDragPlus;
+const electron_1 = require("electron");
+/**
+ * 拖拽管理器类
+ */
+class DragManager {
+    constructor() {
+        this.options = {
+            ignoreSelectors: [],
+            enableHighDPI: true,
+            smoothDrag: true
+        };
+        this.isDragging = false;
+        this.dragElement = null;
+        this.startX = 0;
+        this.startY = 0;
+        this.setupIPC();
+        this.setupEventListeners();
+    }
+    /**
+     * 设置IPC通信
+     */
+    setupIPC() {
+        electron_1.ipcRenderer.on('drag-plus:config', (event, config) => {
+            this.options = { ...this.options, ...config };
+        });
+    }
+    /**
+     * 设置事件监听器
+     */
+    setupEventListeners() {
+        document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);
+        document.addEventListener('mousemove', this.handleMouseMove.bind(this), true);
+        document.addEventListener('mouseup', this.handleMouseUp.bind(this), true);
+    }
+    /**
+     * 检查元素是否应该忽略拖拽
+     * @param element 要检查的元素
+     * @returns 是否应该忽略
+     */
+    shouldIgnore(element) {
+        // 检查元素自身是否是no-drag
+        if (element.style.appRegion === 'no-drag') {
+            return true;
+        }
+        // 检查元素是否匹配忽略选择器
+        for (const selector of this.options.ignoreSelectors || []) {
+            if (element.matches(selector)) {
+                return true;
+            }
+        }
+        // 检查祖先元素是否是no-drag
+        let parent = element.parentElement;
+        while (parent) {
+            if (parent.style.appRegion === 'no-drag') {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    /**
+     * 鼠标按下事件处理
+     */
+    handleMouseDown(e) {
+        const target = e.target;
+        // 检查元素是否是可拖拽区域且不应该被忽略
+        if (target.style.appRegion === 'drag' && !this.shouldIgnore(target)) {
+            this.isDragging = true;
+            this.dragElement = target;
+            this.startX = e.screenX;
+            this.startY = e.screenY;
+            // 通知主进程开始拖拽
+            electron_1.ipcRenderer.send('drag-plus:start', {
+                x: e.screenX,
+                y: e.screenY
+            });
+        }
+    }
+    /**
+     * 鼠标移动事件处理
+     */
+    handleMouseMove(e) {
+        if (this.isDragging && this.dragElement) {
+            // 计算鼠标移动距离
+            const deltaX = e.screenX - this.startX;
+            const deltaY = e.screenY - this.startY;
+            // 只有在移动超过一定阈值时才发送拖拽事件，减少抖动
+            if (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2) {
+                electron_1.ipcRenderer.send('drag-plus:drag', {
+                    x: e.screenX,
+                    y: e.screenY
+                });
+            }
+        }
+    }
+    /**
+     * 鼠标释放事件处理
+     */
+    handleMouseUp() {
+        if (this.isDragging) {
+            this.isDragging = false;
+            this.dragElement = null;
+            // 通知主进程结束拖拽
+            electron_1.ipcRenderer.send('drag-plus:stop');
+        }
+    }
+    /**
+     * 更新配置选项
+     * @param options 新的配置选项
+     */
+    updateOptions(options) {
+        this.options = { ...this.options, ...options };
+    }
+    /**
+     * 销毁拖拽管理器
+     */
+    destroy() {
+        document.removeEventListener('mousedown', this.handleMouseDown.bind(this), true);
+        document.removeEventListener('mousemove', this.handleMouseMove.bind(this), true);
+        document.removeEventListener('mouseup', this.handleMouseUp.bind(this), true);
+    }
+}
+// 创建全局拖拽管理器实例
+let dragManager = null;
+/**
+ * 初始化拖拽管理器
+ * @param options 配置选项
+ */
+function initDragPlus(options = {}) {
+    if (!dragManager) {
+        dragManager = new DragManager();
+    }
+    dragManager.updateOptions(options);
+}
+/**
+ * 为元素添加拖拽功能
+ * @param element 元素或元素选择器
+ * @param options 配置选项
+ */
+function enableDrag(element, options) {
+    const target = typeof element === 'string' ?
+        document.querySelector(element) : element;
+    if (target && target instanceof HTMLElement) {
+        target.style.appRegion = 'drag';
+        // 处理需要忽略的子元素
+        if (options?.ignoreChildren) {
+            const interactiveElements = target.querySelectorAll('button, input, select, textarea, a, [onclick]');
+            interactiveElements.forEach(child => {
+                child.style.appRegion = 'no-drag';
+            });
+        }
+    }
+}
+/**
+ * 为元素禁用拖拽功能
+ * @param element 元素或元素选择器
+ */
+function disableDrag(element) {
+    const target = typeof element === 'string' ?
+        document.querySelector(element) : element;
+    if (target && target instanceof HTMLElement) {
+        target.style.appRegion = 'no-drag';
+    }
+}
+/**
+ * 设置可拖拽区域，自动忽略交互元素
+ * @param container 容器元素或选择器
+ */
+function setupDraggableArea(container) {
+    const target = typeof container === 'string' ?
+        document.querySelector(container) : container;
+    if (target && target instanceof HTMLElement) {
+        // 设置整个容器为可拖拽
+        target.style.appRegion = 'drag';
+        // 为所有交互元素设置no-drag
+        const interactiveElements = target.querySelectorAll('button, input, select, textarea, a, [onclick], [href], [tabindex]:not([tabindex="-1"])');
+        interactiveElements.forEach(element => {
+            element.style.appRegion = 'no-drag';
+        });
+    }
+}
+/**
+ * 更新拖拽配置
+ * @param options 新的配置选项
+ */
+function updateDragPlusOptions(options) {
+    if (dragManager) {
+        dragManager.updateOptions(options);
+    }
+}
+/**
+ * 销毁拖拽管理器
+ */
+function destroyDragPlus() {
+    if (dragManager) {
+        dragManager.destroy();
+        dragManager = null;
+    }
+}
+// 默认导出渲染进程API
+exports.default = {
+    init: initDragPlus,
+    enableDrag,
+    disableDrag,
+    setupDraggableArea,
+    updateOptions: updateDragPlusOptions,
+    destroy: destroyDragPlus
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "electron-drag-plus",
+  "version": "1.0.0",
+  "description": "增强版Electron窗口拖拽库，解决窗口抖动、不同分辨率/缩放导致的闪屏问题，并支持拖拽区域忽略鼠标事件",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build",
+    "test": "jest"
+  },
+  "keywords": [
+    "electron",
+    "drag",
+    "window",
+    "electron-drag",
+    "electron-window",
+    "no-drag",
+    "resize",
+    "electron-window-drag"
+  ],
+  "author": "",
+  "license": "MIT",
+  "packageManager": "pnpm@10.16.1",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "jest": "^29.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/electron-drag-plus.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/electron-drag-plus/issues"
+  },
+  "homepage": "https://github.com/yourusername/electron-drag-plus#readme",
+  "dependencies": {
+    "electron": "^39.0.0"
+  }
+}