electron-screenshots 0.4.2 → 0.4.4

package/README.md

@@ -111,10 +111,10 @@ export interface ScreenshotsOpts {
 
 | 名称                                 | 说明             | 返回值 |
 | ------------------------------------ | ---------------- | ------ |
-| `constructor(opts: ScreenshotsOpts)` | 调用截图方法截图 | -      |
-| `startCapture()`                     | 调用截图方法截图 | -      |
-| `endCapture() `                      | 手动结束截图     | -      |
-| `setLang(lang: Lang)`                | 修改语言         | -      |
+| `constructor(opts: ScreenshotsOpts): Screenshots` | 调用截图方法截图 | -      |
+| `startCapture(): Promise<void>`                     | 调用截图方法截图 | -      |
+| `endCapture(): Promise<void>`                      | 手动结束截图     | -      |
+| `setLang(lang: Lang): void`                | 修改语言         | -      |
 
 ## Events
 

package/lib/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var electron_debug_1 = __importDefault(require("electron-debug"));
 var electron_1 = require("electron");
+var electron_debug_1 = __importDefault(require("electron-debug"));
 var screenshots_1 = __importDefault(require("./screenshots"));
 electron_1.app.whenReady().then(function () {
     var screenshots = new screenshots_1.default({

package/lib/preload.js

@@ -1,4 +1,13 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var electron_1 = require("electron");
 var map = new Map();
@@ -7,6 +16,10 @@ electron_1.contextBridge.exposeInMainWorld('screenshots', {
         console.log('contextBridge ready');
         electron_1.ipcRenderer.send('SCREENSHOTS:ready');
     },
+    reset: function () {
+        console.log('contextBridge reset');
+        electron_1.ipcRenderer.send('SCREENSHOTS:reset');
+    },
     save: function (arrayBuffer, data) {
         console.log('contextBridge save', arrayBuffer, data);
         electron_1.ipcRenderer.send('SCREENSHOTS:save', Buffer.from(arrayBuffer), data);
@@ -27,7 +40,8 @@ electron_1.contextBridge.exposeInMainWorld('screenshots', {
             for (var _i = 1; _i < arguments.length; _i++) {
                 args[_i - 1] = arguments[_i];
             }
-            return fn.apply(void 0, args);
+            console.log.apply(console, __spreadArray(['contextBridge on', channel, fn], args, false));
+            fn.apply(void 0, args);
         };
         var listeners = (_a = map.get(fn)) !== null && _a !== void 0 ? _a : {};
         listeners[channel] = listener;

package/lib/screenshots.d.ts

@@ -33,15 +33,16 @@ export default class Screenshots extends Events {
     /**
      * 开始截图
      */
-    startCapture(): void;
+    startCapture(): Promise<void>;
     /**
      * 结束截图
      */
-    endCapture(): void;
+    endCapture(): Promise<void>;
     /**
      * 设置语言
      */
     setLang(lang: Partial<Lang>): void;
+    private reset;
     /**
      * 初始化窗口
      */

package/lib/screenshots.js

@@ -112,23 +112,25 @@ var Screenshots = /** @class */ (function (_super) {
      * 开始截图
      */
     Screenshots.prototype.startCapture = function () {
-        var _this = this;
-        this.logger('startCapture');
-        this.isReady.then(function () {
-            if (_this.$win && !_this.$win.isDestroyed()) {
-                _this.$win.close();
-            }
-            var boundAndDisplay = (0, getBoundAndDisplay_1.default)();
-            _this.createWindow(boundAndDisplay);
-            // 捕捉桌面之后显示窗口
-            // 避免截图窗口自己被截图
-            _this.capture(boundAndDisplay).then(function () {
-                if (!_this.$win)
-                    return;
-                // linux截图存在黑屏，这里设置为false就不会出现这个问题
-                _this.$win.setFullScreen(true);
-                _this.$win.show();
-                _this.$win.focus();
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var _c, bound, display, imageUrl;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        this.logger('startCapture');
+                        _c = (0, getBoundAndDisplay_1.default)(), bound = _c.bound, display = _c.display;
+                        return [4 /*yield*/, Promise.all([this.capture(display), this.isReady])];
+                    case 1:
+                        imageUrl = (_d.sent())[0];
+                        return [4 /*yield*/, this.createWindow(bound)];
+                    case 2:
+                        _d.sent();
+                        this.$view.webContents.send('SCREENSHOTS:capture', display, imageUrl);
+                        (_a = this.$win) === null || _a === void 0 ? void 0 : _a.show();
+                        (_b = this.$win) === null || _b === void 0 ? void 0 : _b.focus();
+                        return [2 /*return*/];
+                }
             });
         });
     };
@@ -136,12 +138,25 @@ var Screenshots = /** @class */ (function (_super) {
      * 结束截图
      */
     Screenshots.prototype.endCapture = function () {
-        this.logger('endCapture');
-        if (!this.$win)
-            return;
-        this.$win.setSimpleFullScreen(false);
-        this.$win.close();
-        this.$win = null;
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.logger('endCapture');
+                        return [4 /*yield*/, this.reset()];
+                    case 1:
+                        _a.sent();
+                        if (!this.$win) {
+                            return [2 /*return*/];
+                        }
+                        this.$win.setBrowserView(null);
+                        this.$win.setSimpleFullScreen(false);
+                        this.$win.close();
+                        this.$win = null;
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     /**
      * 设置语言
@@ -153,74 +168,121 @@ var Screenshots = /** @class */ (function (_super) {
             _this.$view.webContents.send('SCREENSHOTS:setLang', lang);
         });
     };
+    Screenshots.prototype.reset = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // 重置截图区域
+                        this.$view.webContents.send('SCREENSHOTS:reset');
+                        // 保证 UI 有足够的时间渲染
+                        return [4 /*yield*/, Promise.race([
+                                new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); }),
+                                new Promise(function (resolve) { return electron_1.ipcMain.once('SCREENSHOTS:reset', function () { return resolve(); }); })
+                            ])];
+                    case 1:
+                        // 保证 UI 有足够的时间渲染
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     /**
      * 初始化窗口
      */
-    Screenshots.prototype.createWindow = function (_a) {
-        var bound = _a.bound;
-        this.$win = new electron_1.BrowserWindow({
-            title: 'screenshots',
-            x: bound.x,
-            y: bound.y,
-            width: bound.width,
-            height: bound.height,
-            useContentSize: true,
-            frame: false,
-            show: false,
-            autoHideMenuBar: true,
-            transparent: true,
-            resizable: false,
-            movable: false,
-            focusable: true,
-            // 为true，截屏显示为黑屏
-            // 所以在截屏图像生成后再设置为true
-            // 参考48-49行
-            fullscreen: false,
-            // 设为true mac全屏窗口没有桌面滚动效果
-            simpleFullscreen: true,
-            backgroundColor: '#00000000',
-            titleBarStyle: 'hidden',
-            alwaysOnTop: true,
-            enableLargerThanScreen: true,
-            skipTaskbar: true,
-            minimizable: false,
-            maximizable: false,
-            webPreferences: {
-                nodeIntegration: false,
-                contextIsolation: false,
-                nativeWindowOpen: false
-            }
+    Screenshots.prototype.createWindow = function (bound) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: 
+                    // 重置截图区域
+                    return [4 /*yield*/, this.reset()
+                        // 复用未销毁的窗口
+                    ];
+                    case 1:
+                        // 重置截图区域
+                        _c.sent();
+                        // 复用未销毁的窗口
+                        if (!this.$win || ((_b = (_a = this.$win) === null || _a === void 0 ? void 0 : _a.isDestroyed) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                            this.$win = new electron_1.BrowserWindow({
+                                title: 'screenshots',
+                                x: bound.x,
+                                y: bound.y,
+                                width: bound.width,
+                                height: bound.height,
+                                useContentSize: true,
+                                frame: false,
+                                show: false,
+                                autoHideMenuBar: true,
+                                transparent: true,
+                                resizable: false,
+                                movable: false,
+                                // focusable: true, 否则窗口不能及时响应esc按键，输入框也不能输入
+                                focusable: true,
+                                fullscreen: true,
+                                // 设为true 防止mac新开一个桌面，影响效果
+                                simpleFullscreen: true,
+                                backgroundColor: '#00000000',
+                                titleBarStyle: 'hidden',
+                                alwaysOnTop: true,
+                                enableLargerThanScreen: true,
+                                skipTaskbar: true,
+                                hasShadow: false,
+                                minimizable: false,
+                                maximizable: false,
+                                paintWhenInitiallyHidden: false
+                            });
+                            // 确保获得焦点
+                            this.$win.on('show', function () {
+                                var _a;
+                                (_a = _this.$win) === null || _a === void 0 ? void 0 : _a.focus();
+                                setImmediate(function () {
+                                    var _a;
+                                    (_a = _this.$win) === null || _a === void 0 ? void 0 : _a.focus();
+                                });
+                            });
+                        }
+                        this.$win.setBounds(bound);
+                        this.$win.setBrowserView(this.$view);
+                        this.$view.setBounds({
+                            x: 0,
+                            y: 0,
+                            width: bound.width,
+                            height: bound.height
+                        });
+                        return [2 /*return*/];
+                }
+            });
         });
-        this.$win.setBrowserView(this.$view);
-        this.$view.setBounds(bound);
     };
-    Screenshots.prototype.capture = function (_a) {
-        var display = _a.display;
+    Screenshots.prototype.capture = function (display) {
         return __awaiter(this, void 0, void 0, function () {
             var NodeScreenshots, capturer, image, err_1, sources, source;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         this.logger('SCREENSHOTS:capture');
-                        _b.label = 1;
+                        _a.label = 1;
                     case 1:
-                        _b.trys.push([1, 4, , 6]);
+                        _a.trys.push([1, 4, , 6]);
                         return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('node-screenshots')); })];
                     case 2:
-                        NodeScreenshots = (_b.sent()).Screenshots;
+                        NodeScreenshots = (_a.sent()).Screenshots;
                         capturer = NodeScreenshots.fromDisplay(display.id);
-                        this.logger('SCREENSHOTS:NodeScreenshots.fromDisplay(%d) %o', display.id, capturer);
+                        this.logger('SCREENSHOTS:capture NodeScreenshots.fromDisplay(%d) %o', display.id, capturer);
                         if (!capturer) {
                             throw new Error("NodeScreenshots.fromDisplay(".concat(display.id, ") get null"));
                         }
                         return [4 /*yield*/, capturer.capture()];
                     case 3:
-                        image = _b.sent();
-                        this.$view.webContents.send('SCREENSHOTS:capture', display, "data:image/png;base64,".concat(image.toString('base64')));
-                        return [3 /*break*/, 6];
+                        image = _a.sent();
+                        return [2 /*return*/, "data:image/png;base64,".concat(image.toString('base64'))];
                     case 4:
-                        err_1 = _b.sent();
-                        this.logger('SCREENSHOTS:capturer.capture() error %o', err_1);
+                        err_1 = _a.sent();
+                        this.logger('SCREENSHOTS:capture NodeScreenshots capture() error %o', err_1);
                         return [4 /*yield*/, electron_1.desktopCapturer.getSources({
                                 types: ['screen'],
                                 thumbnailSize: {
@@ -229,9 +291,10 @@ var Screenshots = /** @class */ (function (_super) {
                                 }
                             })];
                     case 5:
-                        sources = _b.sent();
+                        sources = _a.sent();
                         source = void 0;
-                        // Linux系统上，screen.getDisplayNearestPoint 返回的 Display 对象的 id 和 这儿 source 对象上的 display_id(Linux上，这个值是空字符串) 或 id 的中间部分，都不一致
+                        // Linux系统上，screen.getDisplayNearestPoint 返回的 Display 对象的 id
+                        // 和这里 source 对象上的 display_id(Linux上，这个值是空字符串) 或 id 的中间部分，都不一致
                         // 但是，如果只有一个显示器的话，其实不用判断，直接返回就行
                         if (sources.length === 1) {
                             source = sources[0];
@@ -242,13 +305,10 @@ var Screenshots = /** @class */ (function (_super) {
                             });
                         }
                         if (!source) {
-                            console.error(sources);
-                            console.error(display);
-                            console.error("Can't find screen source");
-                            return [2 /*return*/];
+                            this.logger("SCREENSHOTS:capture Can't find screen source. sources: %o, display: %o", sources, display);
+                            throw new Error("Can't find screen source");
                         }
-                        this.$view.webContents.send('SCREENSHOTS:capture', display, source.thumbnail.toDataURL());
-                        return [3 /*break*/, 6];
+                        return [2 /*return*/, source.thumbnail.toDataURL()];
                     case 6: return [2 /*return*/];
                 }
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-screenshots",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "electron 截图插件",
   "types": "lib/screenshots.d.ts",
   "main": "lib/screenshots.js",
@@ -38,7 +38,7 @@
     "debug": "^4.3.3",
     "fs-extra": "^10.1.0",
     "node-screenshots": "^0.0.3",
-    "react-screenshots": "^0.4.0"
+    "react-screenshots": "^0.4.4"
   },
   "peerDependencies": {
     "electron": ">=11"
@@ -59,5 +59,5 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.5.5"
   },
-  "gitHead": "a518f3ba2a36ff0e116ebf90d180157b27a39fc3"
+  "gitHead": "4731a04ae6ad2afa477b54b472c28711c0c7eb16"
 }