From adf703b3bbc522ef1e5680bce373895e42fc07b1 Mon Sep 17 00:00:00 2001 From: manhtai Date: Thu, 12 Aug 2021 22:39:29 +0700 Subject: [PATCH 1/5] May we select rect --- src/components/printer/Screen.tsx | 57 ++++++++++++++++++++++++++++--- src/main.dev.ts | 2 +- 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/src/components/printer/Screen.tsx b/src/components/printer/Screen.tsx index 5e1e037..67746e9 100644 --- a/src/components/printer/Screen.tsx +++ b/src/components/printer/Screen.tsx @@ -1,10 +1,59 @@ -import React from 'react'; +import React, { MouseEvent, useRef, useState } from 'react'; const Screen = () => { + const canvasRef = useRef(null); + + const [mouse, setMouse] = useState({ + startX: 0, + startY: 0, + }); + const [draging, setDraging] = useState(true); + + const handleMouseDown = (ev: MouseEvent) => { + setMouse({ + startX: ev.pageX - (canvasRef.current?.getBoundingClientRect().left || 0), + startY: ev.pageY - (canvasRef.current?.getBoundingClientRect().top || 0), + }); + + setDraging(true); + }; + + const handleMouseMove = (ev: MouseEvent) => { + if (!draging) { + return; + } + + const ctx = canvasRef.current?.getContext('2d'); + + if (ctx) { + const width = + ev.pageX - + (canvasRef.current?.getBoundingClientRect().left || 0) - + mouse.startX; + const height = + ev.pageY - + (canvasRef.current?.getBoundingClientRect().top || 0) - + mouse.startY; + + ctx.clearRect(0, 0, 1000, 1000); + ctx.fillStyle = 'red'; + ctx.fillRect(mouse.startX, mouse.startY, width, height); + } + }; + + const handleMouseUp = () => { + setDraging(false); + }; + return ( -
-

Hello!

-
+ ); }; diff --git a/src/main.dev.ts b/src/main.dev.ts index 48ba3a4..3858261 100644 --- a/src/main.dev.ts +++ b/src/main.dev.ts @@ -181,7 +181,7 @@ const createScreenWindow = () => { if (screenWindow == null) { screenWindow = new BrowserWindow({ frame: false, - transparent: true, + // transparent: true, webPreferences: { nodeIntegration: true, }, From 5fa252b071c59e64d4c38fe6c89d2c3d3c6fc979 Mon Sep 17 00:00:00 2001 From: manhtai Date: Fri, 13 Aug 2021 08:27:10 +0700 Subject: [PATCH 2/5] Draw success --- src/components/printer/Screen.tsx | 33 ++++++++++++++++++++++--------- src/main.dev.ts | 2 +- yarn.lock | 5 ----- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/components/printer/Screen.tsx b/src/components/printer/Screen.tsx index 67746e9..2890927 100644 --- a/src/components/printer/Screen.tsx +++ b/src/components/printer/Screen.tsx @@ -1,19 +1,25 @@ import React, { MouseEvent, useRef, useState } from 'react'; const Screen = () => { + const parentRef = useRef(null); const canvasRef = useRef(null); const [mouse, setMouse] = useState({ startX: 0, startY: 0, }); - const [draging, setDraging] = useState(true); + 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 ctx = canvasRef.current; + if (ctx) { + ctx.width = window.innerWidth || 1000; + ctx.height = window.innerHeight || 1000; + } setDraging(true); }; @@ -35,7 +41,12 @@ const Screen = () => { (canvasRef.current?.getBoundingClientRect().top || 0) - mouse.startY; - ctx.clearRect(0, 0, 1000, 1000); + ctx.clearRect( + 0, + 0, + parentRef.current?.clientWidth || 1000, + parentRef.current?.clientHeight || 1000 + ); ctx.fillStyle = 'red'; ctx.fillRect(mouse.startX, mouse.startY, width, height); } @@ -46,14 +57,18 @@ const Screen = () => { }; return ( - + className="w-full h-full" + ref={parentRef} + > + + ); }; diff --git a/src/main.dev.ts b/src/main.dev.ts index 3858261..48ba3a4 100644 --- a/src/main.dev.ts +++ b/src/main.dev.ts @@ -181,7 +181,7 @@ const createScreenWindow = () => { if (screenWindow == null) { screenWindow = new BrowserWindow({ frame: false, - // transparent: true, + transparent: true, webPreferences: { nodeIntegration: true, }, diff --git a/yarn.lock b/yarn.lock index e9caabc..6e0f5a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1586,11 +1586,6 @@ resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.5.tgz" integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ== -"@types/diff@^5.0.1": - version "5.0.1" - resolved "https://registry.npmjs.org/@types/diff/-/diff-5.0.1.tgz" - integrity sha512-XIpxU6Qdvp1ZE6Kr3yrkv1qgUab0fyf4mHYvW8N3Bx3PCsbN6or1q9/q72cv5jIFWolaGH08U9XyYoLLIykyKQ== - "@types/enzyme-adapter-react-16@^1.0.6": version "1.0.6" resolved "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz" From aa3b44568afa8b8cdc214d61bab62376371f78d3 Mon Sep 17 00:00:00 2001 From: manhtai Date: Fri, 13 Aug 2021 20:43:15 +0700 Subject: [PATCH 3/5] Select frame --- src/App.tsx | 6 ++- src/components/printer/Main.tsx | 75 ++++++++++++++++++++++++++++--- src/components/printer/Screen.tsx | 46 +++++++++++++++---- src/main.dev.ts | 19 +++++--- 4 files changed, 125 insertions(+), 21 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bd5b239..ce8141b 100644 --- a/src/App.tsx +++ b/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' ? :
; + return so.page === 'screen' ? ( + + ) : ( +
+ ); }} /> diff --git a/src/components/printer/Main.tsx b/src/components/printer/Main.tsx index 9ad6164..8d8d132 100644 --- a/src/components/printer/Main.tsx +++ b/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(); + const [nextCoord, setNextCoord] = useState(); + + 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 ( -
- +
+
+ + {frameCoord ? ( +

+ Frame: ({frameCoord.x0}, {frameCoord.y0}) and ({frameCoord.x1},{' '} + {frameCoord.y1}) +

+ ) : ( +

+ )} +

+ +
+ + {nextCoord ? ( +

+ Next button: ({(nextCoord.x0 + nextCoord.x1) / 2},{' '} + {(nextCoord.y0 + nextCoord.y1) / 2}) +

+ ) : ( +

+ )} +

); }; diff --git a/src/components/printer/Screen.tsx b/src/components/printer/Screen.tsx index 2890927..96eb5c5 100644 --- a/src/components/printer/Screen.tsx +++ b/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(null); const canvasRef = useRef(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 (
{ > { +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... */ From 459a2a3e11ebeb60926a60f4d994bc17213af58c Mon Sep 17 00:00:00 2001 From: manhtai Date: Fri, 13 Aug 2021 21:08:30 +0700 Subject: [PATCH 4/5] Ready to print --- src/App.global.css | 4 +- src/components/printer/Main.tsx | 88 ++++++++++++++++++++++----------- src/main.dev.ts | 16 +++++- 3 files changed, 75 insertions(+), 33 deletions(-) diff --git a/src/App.global.css b/src/App.global.css index c88f0bb..83b5483 100644 --- a/src/App.global.css +++ b/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'] { diff --git a/src/components/printer/Main.tsx b/src/components/printer/Main.tsx index 8d8d132..93a6aa8 100644 --- a/src/components/printer/Main.tsx +++ b/src/components/printer/Main.tsx @@ -12,6 +12,7 @@ interface Coord { const Main = () => { const [frameCoord, setFrameCoord] = useState(); const [nextCoord, setNextCoord] = useState(); + 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 ( -
-
- - {frameCoord ? ( -

- Frame: ({frameCoord.x0}, {frameCoord.y0}) and ({frameCoord.x1},{' '} - {frameCoord.y1}) -

- ) : ( -

- )} +

+
+
+ + {frameCoord ? ( +

+ Rect: ({frameCoord.x0}, {frameCoord.y0}) and ({frameCoord.x1},{' '} + {frameCoord.y1}) +

+ ) : ( +

+ )} +

+ +
+ + {nextCoord ? ( +

+ Point: ({(nextCoord.x0 + nextCoord.x1) / 2},{' '} + {(nextCoord.y0 + nextCoord.y1) / 2}) +

+ ) : ( +

+ )} +

+ +
+

Total pages:

+ setPages(parseInt(e.target.value, 10))} + type="number" + /> +
-
+
- {nextCoord ? ( -

- Next button: ({(nextCoord.x0 + nextCoord.x1) / 2},{' '} - {(nextCoord.y0 + nextCoord.y1) / 2}) -

- ) : ( -

- )} +

+ You can stop printing anytime by pressing the "ESC" button +

); diff --git a/src/main.dev.ts b/src/main.dev.ts index 79a1059..e714fde 100644 --- a/src/main.dev.ts +++ b/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... */ From db8358ded4f22b6d6c6660244111c10d02f3e1b5 Mon Sep 17 00:00:00 2001 From: manhtai Date: Fri, 13 Aug 2021 21:10:15 +0700 Subject: [PATCH 5/5] ver --- src/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/package.json b/src/package.json index 8aa05de..74848c8 100644 --- a/src/package.json +++ b/src/package.json @@ -1,7 +1,7 @@ { "name": "plainprinter", "productName": "PlainPrinter", - "version": "0.0.7", + "version": "0.0.1", "description": "Plain screen printer", "main": "./main.prod.js", "author": {