Select frame

Author: manhtai

src/App.tsx

@@ -16,7 +16,11 @@ export default function App() {
           render={(props) => {
             const { search } = props.location;
             const so = qs.parse(search.slice(search.lastIndexOf('?') + 1));
-            return so.page === 'screen' ? <Screen /> : <Main />;
+            return so.page === 'screen' ? (
+              <Screen select={so.select?.toString() || 'frame'} />
+            ) : (
+              <Main />
+            );
           }}
         />
       </Switch>

src/components/printer/Main.tsx

@@ -1,16 +1,77 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ipcRenderer } from 'electron';
 
+interface Coord {
+  select: string;
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+
 const Main = () => {
-  const handleScreenSelect = async () => {
-    await ipcRenderer.invoke('open-screen');
+  const [frameCoord, setFrameCoord] = useState<Coord>();
+  const [nextCoord, setNextCoord] = useState<Coord>();
+
+  const handleCloseScreen = (c: Coord) => {
+    if (c.select === 'frame') {
+      setFrameCoord({ ...c });
+    } else if (c.select === 'next') {
+      setNextCoord({ ...c });
+    }
   };
 
+  const handleOpenScreen = (select: string) => {
+    if (select === 'frame') {
+      setFrameCoord(undefined);
+    } else {
+      setNextCoord(undefined);
+    }
+
+    ipcRenderer.invoke('open-screen', { select });
+  };
+
+  ipcRenderer.on('close-screen', (_, c: Coord) => {
+    handleCloseScreen(c);
+  });
+
   return (
-    <section className="flex flex-1">
-      <button type="button" onClick={handleScreenSelect}>
-        Open
-      </button>
+    <section className="flex flex-col items-start justify-center p-8 space-y-8">
+      <section className="flex items-center justify-start">
+        <button
+          type="button"
+          onClick={() => handleOpenScreen('frame')}
+          className="btn"
+        >
+          Select screenshot frame...
+        </button>
+        {frameCoord ? (
+          <p>
+            Frame: ({frameCoord.x0}, {frameCoord.y0}) and ({frameCoord.x1},{' '}
+            {frameCoord.y1})
+          </p>
+        ) : (
+          <p />
+        )}
+      </section>
+
+      <section className="flex items-center justify-start">
+        <button
+          type="button"
+          onClick={() => handleOpenScreen('next')}
+          className="btn"
+        >
+          Select next button...
+        </button>
+        {nextCoord ? (
+          <p>
+            Next button: ({(nextCoord.x0 + nextCoord.x1) / 2},{' '}
+            {(nextCoord.y0 + nextCoord.y1) / 2})
+          </p>
+        ) : (
+          <p />
+        )}
+      </section>
     </section>
   );
 };

src/components/printer/Screen.tsx

@@ -1,26 +1,43 @@
-import React, { MouseEvent, useRef, useState } from 'react';
+import { ipcRenderer } from 'electron';
+import React, { MouseEvent, useRef, useState, useEffect } from 'react';
 
-const Screen = () => {
+const Screen = ({ select }: { select: string }) => {
   const parentRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const [mouse, setMouse] = useState({
+    select,
     startX: 0,
     startY: 0,
+    x0: 0,
+    y0: 0,
+    x1: 0,
+    y1: 0,
   });
   const [draging, setDraging] = useState(false);
 
-  const handleMouseDown = (ev: MouseEvent) => {
-    setMouse({
-      startX: ev.pageX - (canvasRef.current?.getBoundingClientRect().left || 0),
-      startY: ev.pageY - (canvasRef.current?.getBoundingClientRect().top || 0),
-    });
+  const closeScreen = () => {
+    ipcRenderer.invoke('close-screen', { ...mouse });
+  };
+
+  const setCanvasSize = () => {
     const ctx = canvasRef.current;
     if (ctx) {
       ctx.width = window.innerWidth || 1000;
       ctx.height = window.innerHeight || 1000;
     }
+  };
 
+  const handleMouseDown = (ev: MouseEvent) => {
+    setMouse({
+      ...mouse,
+      startX: ev.pageX - (canvasRef.current?.getBoundingClientRect().left || 0),
+      startY: ev.pageY - (canvasRef.current?.getBoundingClientRect().top || 0),
+      x0: ev.screenX,
+      y0: ev.screenY,
+    });
+
+    setCanvasSize();
     setDraging(true);
   };
 
@@ -41,21 +58,33 @@ const Screen = () => {
         (canvasRef.current?.getBoundingClientRect().top || 0) -
         mouse.startY;
 
+      setMouse({
+        ...mouse,
+        x1: ev.screenX,
+        y1: ev.screenY,
+      });
+
       ctx.clearRect(
         0,
         0,
         parentRef.current?.clientWidth || 1000,
         parentRef.current?.clientHeight || 1000
       );
-      ctx.fillStyle = 'red';
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
       ctx.fillRect(mouse.startX, mouse.startY, width, height);
     }
   };
 
   const handleMouseUp = () => {
     setDraging(false);
+    closeScreen();
   };
 
+  useEffect(() => {
+    window.onblur = closeScreen;
+    window.onresize = setCanvasSize;
+  }, []);
+
   return (
     <div
       style={{ cursor: draging ? 'crosshair' : 'default' }}
@@ -64,6 +93,7 @@ const Screen = () => {
     >
       <canvas
         ref={canvasRef}
+        className="bg-gray-50 opacity-20"
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}

src/main.dev.ts

@@ -177,21 +177,25 @@ ipcMain.handle(
   }
 );
 
-const createScreenWindow = () => {
+const createScreenWindow = (select: string) => {
   if (screenWindow == null) {
     screenWindow = new BrowserWindow({
       frame: false,
       transparent: true,
       webPreferences: {
         nodeIntegration: true,
+        contextIsolation: false,
       },
+      parent: mainWindow || undefined,
     });
   }
-  screenWindow.loadURL(`file://${__dirname}/index.html?page=screen`);
+  screenWindow.loadURL(
+    `file://${__dirname}/index.html?page=screen&select=${select}`
+  );
 
   screenWindow.webContents.on('did-finish-load', () => {
-    screenWindow?.show();
     screenWindow?.maximize();
+    screenWindow?.show();
   });
 
   screenWindow.webContents.on('before-input-event', (event, ipnut) => {
@@ -207,14 +211,19 @@ const createScreenWindow = () => {
   screenWindow.webContents.openDevTools({ mode: 'undocked' });
 };
 
-ipcMain.handle('open-screen', async () => {
-  createScreenWindow();
+ipcMain.handle('open-screen', async (_, { select }) => {
+  createScreenWindow(select);
 });
 
 ipcMain.handle('get-store', (_event, { key }) => {
   return store.get(key);
 });
 
+ipcMain.handle('close-screen', (_, coord) => {
+  mainWindow?.webContents.send('close-screen', coord);
+  screenWindow?.close();
+});
+
 /**
  * Add event listeners...
  */