From 9cd11ed62f427d6c874b688c93204e5b0c7fa65b Mon Sep 17 00:00:00 2001
From: GHOSCHT <31184695+GHOSCHT@users.noreply.github.com>
Date: Thu, 26 Aug 2021 01:29:59 +0200
Subject: [PATCH] Probably fix knob skipping steps if devtools closed

---
 Dashboard/src/App.tsx             | 24 ++++++++++++++++++------
 Dashboard/src/Components/Knob.tsx | 30 +++++++++++++++++-------------
 Dashboard/src/SerialConnection.ts | 11 +++++++++++
 3 files changed, 46 insertions(+), 19 deletions(-)
 create mode 100644 Dashboard/src/SerialConnection.ts

diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index 416772f..8c879b9 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -1,7 +1,8 @@
-import React from "react";
-import SerialPort from "serialport";
+import React, { useState } from "react";
 import { createGlobalStyle } from "styled-components";
+import SerialPort from "serialport";
 import Knob from "./Components/Knob";
+import SerialConnection from "./SerialConnection";
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -15,15 +16,17 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
+const port = SerialConnection();
+
 const App = () => {
-  const port = new SerialPort("COM5", {
-    baudRate: 9600,
-    autoOpen: false,
-  });
+  const [counter, setCounter] = useState(0);
+
   const sendIncreaseHandler = () => {
+    setCounter(counter + 1);
     port.write("2i");
   };
   const sendDecreaseHandler = () => {
+    setCounter(counter - 1);
     port.write("2d");
   };
   const sendToggleHandler = () => {
@@ -37,6 +40,7 @@ const App = () => {
         increase={sendIncreaseHandler}
         decrease={sendDecreaseHandler}
         toggle={sendToggleHandler}
+        status={counter}
       />
       <button
         type="button"
@@ -46,6 +50,14 @@ const App = () => {
       >
         open
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          setCounter(counter + 1);
+        }}
+      >
+        increase
+      </button>
       <button
         type="button"
         onClick={() => {
diff --git a/Dashboard/src/Components/Knob.tsx b/Dashboard/src/Components/Knob.tsx
index af91e4c..4724c02 100644
--- a/Dashboard/src/Components/Knob.tsx
+++ b/Dashboard/src/Components/Knob.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import styled from "styled-components";
 import { remote } from "electron";
 
@@ -24,6 +24,8 @@ const KnobSVG = styled.svg`
   }
   #Status {
   user-select: none;
+  vertical-align: middle;
+  display: inline-block;
 }
 `;
 
@@ -31,13 +33,15 @@ interface Proptypes {
   increase: () => void;
   decrease: () => void;
   toggle: () => void;
+  status: number;
 }
 
-const Knob = (props: Proptypes) => {
+const Knob = ({
+  increase, decrease, toggle, status,
+}: Proptypes) => {
   const overlayRef = useRef<SVGGElement>(null);
-
-  let isMouseDown = false;
-  let prevAngle = 0;
+  const [isMouseDown, setisMouseDown] = useState(false);
+  const [prevAngle, setPrevAngle] = useState(0);
 
   const move = (e: React.MouseEvent<SVGElement, MouseEvent>) => {
     const relativePosX = e.nativeEvent.offsetX - SvgHeight / 2;
@@ -60,23 +64,23 @@ const Knob = (props: Proptypes) => {
 
     if (angle % steps === Math.round(angle % steps)) {
       if (prevAngle < angle) {
-        props.increase();
+        increase();
       } else if (prevAngle > angle) {
-        props.decrease();
+        decrease();
       }
     }
-    prevAngle = angle;
+    setPrevAngle(angle);
   };
 
   const mouseDownHandler: React.MouseEventHandler<SVGElement> = (e) => {
     if (e.button !== 2) {
       move(e);
-      isMouseDown = true;
+      setisMouseDown(true);
     }
   };
 
   const mouseUpHandler: React.MouseEventHandler<SVGElement> = () => {
-    isMouseDown = false;
+    setisMouseDown(false);
   };
 
   const mouseMoveHandler: React.MouseEventHandler<SVGElement> = (e) => {
@@ -91,7 +95,7 @@ const Knob = (props: Proptypes) => {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 141.73 141.73"
         height={`${SvgHeight}px`}
-        onContextMenu={() => { props.toggle(); }}
+        onContextMenu={() => { toggle(); }}
         onMouseDown={mouseDownHandler}
         onMouseUp={mouseUpHandler}
         onMouseMove={mouseMoveHandler}
@@ -104,8 +108,8 @@ const Knob = (props: Proptypes) => {
           />
         </g>
         <g id="Status">
-          <text className="cls-2" transform="translate(53.61 77.41)">
-            255
+          <text className="cls-2" transform="translate(70.41 77.41)" textAnchor="middle">
+            {status}
           </text>
         </g>
         <g id="Overlay" ref={overlayRef}>
diff --git a/Dashboard/src/SerialConnection.ts b/Dashboard/src/SerialConnection.ts
new file mode 100644
index 0000000..11d5b4b
--- /dev/null
+++ b/Dashboard/src/SerialConnection.ts
@@ -0,0 +1,11 @@
+import SerialPort from "serialport";
+
+const newPort = () => {
+  const port = new SerialPort("COM5", {
+    baudRate: 9600,
+    autoOpen: false,
+  });
+  return port;
+};
+
+export default newPort;