Draw success

Author: manhtai

src/components/printer/Screen.tsx

@@ -1,19 +1,25 @@
 import React, { MouseEvent, useRef, useState } from 'react';
 
 const Screen = () => {
+  const parentRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(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 (
-    <canvas
-      ref={canvasRef}
+    <div
       style={{ cursor: draging ? 'crosshair' : 'default' }}
-      className="relative w-full h-full"
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-    />
+      className="w-full h-full"
+      ref={parentRef}
+    >
+      <canvas
+        ref={canvasRef}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+      />
+    </div>
   );
 };
 

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,
       },

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"