Ready to print

Author: manhtai

src/App.global.css

@@ -11,8 +11,8 @@
     @apply outline-none hover:opacity-80 active:text-gray-300 active:outline-none focus:outline-none;
   }
 
-  input[type='text'] {
-    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset;
+  input[type='number'] {
+    @apply px-1 py-0.5 rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset;
   }
 
   input[type='radio'] {

src/components/printer/Main.tsx

@@ -12,6 +12,7 @@ interface Coord {
 const Main = () => {
   const [frameCoord, setFrameCoord] = useState<Coord>();
   const [nextCoord, setNextCoord] = useState<Coord>();
+  const [pages, setPages] = useState(0);
 
   const handleCloseScreen = (c: Coord) => {
     if (c.select === 'frame') {
@@ -31,46 +32,75 @@ const Main = () => {
     ipcRenderer.invoke('open-screen', { select });
   };
 
+  const handlePrint = () => {
+    ipcRenderer.invoke('start-printing', { frameCoord, nextCoord, pages });
+  };
+
   ipcRenderer.on('close-screen', (_, c: Coord) => {
     handleCloseScreen(c);
   });
 
   return (
-    <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 className="absolute inset-0 flex flex-col items-stretch justify-center p-8 space-y-8 bg-gray-100">
+      <section className="flex flex-col items-stretch flex-1 p-4 border rounded space-y-7">
+        <section className="flex items-center justify-start space-x-4">
+          <button
+            type="button"
+            onClick={() => handleOpenScreen('frame')}
+            className="btn"
+          >
+            Select screenshot frame...
+          </button>
+          {frameCoord ? (
+            <p>
+              Rect: ({frameCoord.x0}, {frameCoord.y0}) and ({frameCoord.x1},{' '}
+              {frameCoord.y1})
+            </p>
+          ) : (
+            <p />
+          )}
+        </section>
+
+        <section className="flex items-center justify-start space-x-4">
+          <button
+            type="button"
+            onClick={() => handleOpenScreen('next')}
+            className="btn"
+          >
+            Select next button...
+          </button>
+          {nextCoord ? (
+            <p>
+              Point: ({(nextCoord.x0 + nextCoord.x1) / 2},{' '}
+              {(nextCoord.y0 + nextCoord.y1) / 2})
+            </p>
+          ) : (
+            <p />
+          )}
+        </section>
+
+        <section className="flex items-center justify-start ml-1 space-x-4">
+          <p>Total pages:</p>
+          <input
+            value={pages}
+            onChange={(e) => setPages(parseInt(e.target.value, 10))}
+            type="number"
+          />
+        </section>
       </section>
 
-      <section className="flex items-center justify-start">
+      <section className="flex flex-col items-center space-y-4">
         <button
           type="button"
-          onClick={() => handleOpenScreen('next')}
-          className="btn"
+          onClick={handlePrint}
+          className="w-full py-2 text-base btn"
+          disabled={!frameCoord || !nextCoord || !pages}
         >
-          Select next button...
+          Start printing
         </button>
-        {nextCoord ? (
-          <p>
-            Next button: ({(nextCoord.x0 + nextCoord.x1) / 2},{' '}
-            {(nextCoord.y0 + nextCoord.y1) / 2})
-          </p>
-        ) : (
-          <p />
-        )}
+        <p className="opacity-50">
+          You can stop printing anytime by pressing the &quot;ESC&quot; button
+        </p>
       </section>
     </section>
   );

src/main.dev.ts

@@ -71,6 +71,8 @@ const installExtensions = async () => {
     .catch(console.log);
 };
 
+let stopPrinting = false;
+
 const createWindow = async () => {
   if (
     process.env.NODE_ENV === 'development' ||
@@ -89,8 +91,8 @@ const createWindow = async () => {
 
   mainWindow = new BrowserWindow({
     show: false,
-    width: 1024,
-    height: 728,
+    width: 512,
+    height: 364,
     icon: getAssetPath('icon.png'),
     webPreferences: {
       nodeIntegration: true,
@@ -113,6 +115,12 @@ const createWindow = async () => {
     }
   });
 
+  mainWindow.webContents.on('before-input-event', (event, ipnut) => {
+    if (ipnut.key === 'Escape') {
+      stopPrinting = true;
+    }
+  });
+
   mainWindow.on('closed', () => {
     mainWindow = null;
   });
@@ -224,6 +232,10 @@ ipcMain.handle('close-screen', (_, coord) => {
   screenWindow?.close();
 });
 
+ipcMain.handle('start-printing', (_, { frameCoord, nextCoord, pages }) => {
+  console.log('Print with params', frameCoord, nextCoord, pages);
+});
+
 /**
  * Add event listeners...
  */