feat: 代码结构优化

nashaofu · Jul 13, 2023 · 758b0bf · 758b0bf
1 parent 68be6e0
commit 758b0bf
Show file tree

Hide file tree

Showing 24 changed files with 406 additions and 155 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ electron 截图插件和 react 截图插件，[在线示例](https://github.com/
 - 多语言支持
 - 截图操作：马赛克、文本、画笔、箭头、椭圆、矩形
 
+
 ## electron-screenshots
 
 electron 截图插件，[electron-screenshots 文档](./packages/electron-screenshots/README.md)

diff --git a/examples/publishElectron.sh b/examples/publishElectron.sh
@@ -0,0 +1,13 @@
+#！/bin/bash
+
+cd ..
+
+home=$(pwd)
+
+electron_screenshot=$home"/packages/electron-screenshots"
+
+
+cd $electron_screenshot
+yarn add [email protected]
+
+npm publish --tag beta
diff --git a/examples/publishReact.sh b/examples/publishReact.sh
@@ -0,0 +1,12 @@
+#！/bin/bash
+
+cd ..
+
+home=$(pwd)
+
+react_screenshot=$home"/packages/react-screenshots"
+
+
+cd $react_screenshot
+
+npm publish --tag beta
diff --git a/examples/reset.sh b/examples/reset.sh
@@ -8,5 +8,5 @@ electron_screenshot=$home"/packages/electron-screenshots"
 
 
 cd $electron_screenshot
-yarn add [email protected]
+yarn add [email protected].2
 yarn build
diff --git a/examples/run.sh b/examples/run.sh
@@ -8,15 +8,14 @@ react_screenshot=$home"/packages/react-screenshots"
 electron_screenshot=$home"/packages/electron-screenshots"
 example=$home"/examples"
 
-# echo $react_screenshot
-# yarn build
+echo $react_screenshot
+yarn build
 
 cd $electron_screenshot
-# yarn add $react_screenshot
+yarn add $react_screenshot
 yarn build
 
 
 cd $example
 yarn add $electron_screenshot
-# yarn add $react_screenshot
 yarn start
diff --git a/examples/src/main/index.ts b/examples/src/main/index.ts
@@ -1,5 +1,4 @@
-import { app, BrowserWindow, screen, ipcMain } from "electron";
-import os from 'os'
+import { app, BrowserWindow, globalShortcut, nativeImage, ipcMain } from "electron";
 import path from "path";
 import { Screenshots } from "akey-electron-screenshots";
 import log from "electron-log";
@@ -33,7 +32,6 @@ app.whenReady().then(() => {
     singleWindow: true
   });
 
-
   app.on("activate", function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
@@ -43,7 +41,7 @@ app.whenReady().then(() => {
   ipcMain.handle("screenshot", () => {
     console.log("hit screenshot");
     const isMacFullscreenHide = mainWindow.isFullScreen();
-    screenshotsIns.startCapture({ isMacFullscreenHide: isMacFullscreenHide });
+    screenshotsIns.startCapture({ isMacFullscreenHide: isMacFullscreenHide })
     return `hi, i'm from screenshot`;
   });
 
@@ -76,6 +74,20 @@ app.whenReady().then(() => {
     console.log('getDiskDetail', detail);
     return detail
   });
+
+
+    // 点击确定按钮回调事件
+    screenshotsIns.on('ok', (e, buffer, bounds) => {
+      const image = nativeImage.createFromBuffer(buffer)
+      mainWindow.webContents.send('screenshot:ok', { url: image.toDataURL() })
+
+      console.log('screenshots buffer', buffer)
+      console.log('screenshots image', image.toDataURL())
+    })
+
+    globalShortcut.register('Escape', () => {
+      screenshotsIns.endCapture()
+    })
 });
 
 // Quit when all windows are closed, except on macOS. There, it's common

diff --git a/examples/src/main/preload.ts b/examples/src/main/preload.ts
@@ -22,4 +22,10 @@ contextBridge.exposeInMainWorld("$api", {
   diskDetail: async () => {
     return await ipcRenderer.invoke("disk-detail");
   },
+  handleScreenShot: (callback: any) => {
+    ipcRenderer.on('screenshot:ok', callback)
+  },
+  rmHandleScreenShot: (callback: any) => {
+    ipcRenderer.removeListener('screenshot:ok', callback)
+  }
 });
diff --git a/examples/src/pages/index.tsx b/examples/src/pages/index.tsx
@@ -1,27 +1,35 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import yayJpg from "../assets/yay.jpg";
+import { ipcRenderer } from "electron";
 
 export default function HomePage() {
   const [logPath, setLogPath] = useState("");
-  const [diskDetail, setDiskDetail] = useState('');
+  const [diskDetail, setDiskDetail] = useState("");
+  const [imgUrl, setImgUrl] = useState("");
+
+  function handleScreenShot(e: any, data: any) {
+    console.log("handleScreenShot", data.url);
+    setImgUrl(data.url);
+  }
+
+  useEffect(() => {
+    window.$api.handleScreenShot(handleScreenShot);
+    return () => {
+      window.$api.rmHandleScreenShot(handleScreenShot);
+    };
+  }, []);
 
   return (
     <div>
-      <h2>Yay! Welcome to umi with electron!</h2>
-      <p>
-        <img src={yayJpg} width="388" />
-      </p>
-      <p>
-        To get started, edit <code>pages/index.tsx</code> and save to reload.
-      </p>
-      <button
-        onClick={async () => {
-          window.alert(await window.$api.getPlatform());
-          window.alert("edit src/main/ipc/platform.ts and try me again!");
-        }}
-      >
-        what is my platform?
-      </button>
+      <div style={{
+        width: '200px',
+        height: '200px',
+        border: "2px solid pink",
+        padding: '10px',
+        background: '#9b93931f'
+      }}>
+      {imgUrl ? <img src={imgUrl} alt="截图图片" style={{width: '100%'}} /> : null}
+      </div>
 
       <button
         onClick={async () => {
@@ -67,7 +75,7 @@ export default function HomePage() {
       <button
         onClick={async () => {
           const data = await window.$api.diskDetail();
-          setDiskDetail(data)
+          setDiskDetail(data);
         }}
       >
         Disk Detail

diff --git a/examples/yarn.lock b/examples/yarn.lock
@@ -2430,28 +2430,23 @@ ajv@^6.10.0, ajv@^6.12.0, ajv@^6.12.5:
     uri-js "^4.2.2"
 
 akey-electron-screenshots@/Users/ansiyuan/Documents/ansiyuan/packages/screenshots/packages/electron-screenshots:
-  version "1.0.14-alpha.9"
+  version "1.0.1-5.1"
   dependencies:
-    akey-react-screenshots "1.0.14-alpha.5"
+    akey-react-screenshots "file:../packages/react-screenshots"
     debug "^4.3.3"
     fs-extra "^10.1.0"
     screenshot-desktop "^1.12.7"
 
 "akey-electron-screenshots@file:../packages/electron-screenshots":
-  version "1.0.14-alpha.9"
+  version "1.0.1-5.1"
   dependencies:
-    akey-react-screenshots "1.0.14-alpha.5"
+    akey-react-screenshots "file:../packages/react-screenshots"
     debug "^4.3.3"
     fs-extra "^10.1.0"
     screenshot-desktop "^1.12.7"
 
-[email protected]:
-  version "1.0.14-alpha.5"
-  resolved "https://registry.npmjs.org/akey-react-screenshots/-/akey-react-screenshots-1.0.14-alpha.5.tgz#eb215eee0a0096b217b42e9985394f8f64121b56"
-  integrity sha512-rRXe9o7bsV/dioA/TRdJ0jDBbhhOapEC/MqxS8gkULOqqKLpavdC1N9RgJHWyOvFlj5qFHNEtQ8p0kHJSvTxvw==
-
 "akey-react-screenshots@file:../packages/react-screenshots":
-  version "1.0.14-alpha.5"
+  version "1.0.15"
 
 ansi-html-community@^0.0.8:
   version "0.0.8"

diff --git a/packages/electron-screenshots/package.json b/packages/electron-screenshots/package.json
@@ -1,6 +1,6 @@
 {
   "name": "akey-electron-screenshots",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "electron 截图插件",
   "types": "lib/screenshots.d.ts",
   "main": "lib/screenshots.js",
@@ -35,7 +35,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "akey-react-screenshots": "1.0.15",
+    "akey-react-screenshots": "/Users/ansiyuan/Documents/ansiyuan/packages/screenshots/packages/react-screenshots",
     "debug": "^4.3.3",
     "fs-extra": "^10.1.0",
     "screenshot-desktop": "^1.12.7"

diff --git a/packages/electron-screenshots/src/getDisplay.ts b/packages/electron-screenshots/src/getDisplay.ts
@@ -49,6 +49,7 @@ export const getAllDisplays = async () => {
   return displays.map(({ bounds, id }, index) => {
     return {
       id,
+      index, // 很重要，页面截图回调的时候会带着这个参数，用来跟窗口对应
       screenshotDesktopId: screenshotDesktopDisplays[index].id,
       x: Math.floor(bounds.x),
       y: Math.floor(bounds.y),

diff --git a/packages/electron-screenshots/src/preload.ts b/packages/electron-screenshots/src/preload.ts
@@ -39,10 +39,13 @@ contextBridge.exposeInMainWorld('screenshots', {
 
     ipcRenderer.send('SCREENSHOTS:cancel')
   },
-  disabled: () => {
-    console.log('contextBridge disabled')
-
-    ipcRenderer.send('SCREENSHOTS:disabled')
+  boundsSelectChange: (index: number) => {
+    console.log('contextBridge boundsSelectChange')
+    ipcRenderer.send('SCREENSHOTS:boundsSelectChange', index)
+  },
+  rejectError: (message: string) => {
+    console.log('contextBridge boundsSelectChange')
+    ipcRenderer.send('SCREENSHOTS:rejectError', message)
   },
   ok: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => {
     console.log('contextBridge ok', arrayBuffer, data)