From d836164ea57910c817da0d77f057d604b4634187 Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Fri, 15 Jul 2022 02:14:49 +0000
Subject: [PATCH] Update Handle style

---
 components/FlowEditor/nodes/IO/LedNode.tsx    | 19 ++++++++--
 components/FlowEditor/nodes/IO/SensorNode.tsx | 19 ++++++++--
 .../FlowEditor/nodes/Logic/DelayNode.tsx      | 19 ++++++++--
 .../FlowEditor/nodes/Logic/MathNode.tsx       |  7 +++-
 components/FlowEditor/nodes/styles.ts         | 38 ++++++++++++++++---
 styles/globals.css                            |  1 +
 6 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/components/FlowEditor/nodes/IO/LedNode.tsx b/components/FlowEditor/nodes/IO/LedNode.tsx
index 64785eb..771b070 100644
--- a/components/FlowEditor/nodes/IO/LedNode.tsx
+++ b/components/FlowEditor/nodes/IO/LedNode.tsx
@@ -1,12 +1,21 @@
 import { Handle, Position } from "react-flow-renderer";
-import { bottomBigStyle, topBigStyle } from "../styles";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topBigStyle,
+  topDoubleRightStyle,
+} from "../styles";
 
 type LedNodeProps = {};
 
 const LedNode = (props: LedNodeProps) => {
   return (
     <div className="led-node node-layout">
-      <Handle style={topBigStyle} type="target" position={Position.Top} />
+      <Handle
+        style={topDoubleRightStyle}
+        type="target"
+        position={Position.Top}
+      />
 
       <div className="node-header">
         <span className="node-title">Светодиод</span>
@@ -19,7 +28,11 @@ const LedNode = (props: LedNodeProps) => {
         </select>
       </div>
 
-      <Handle style={bottomBigStyle} type="source" position={Position.Bottom} />
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
     </div>
   );
 };
diff --git a/components/FlowEditor/nodes/IO/SensorNode.tsx b/components/FlowEditor/nodes/IO/SensorNode.tsx
index f953b55..68b0892 100644
--- a/components/FlowEditor/nodes/IO/SensorNode.tsx
+++ b/components/FlowEditor/nodes/IO/SensorNode.tsx
@@ -1,12 +1,21 @@
 import { Handle, Position } from "react-flow-renderer";
-import { bottomBigStyle, topBigStyle } from "../styles";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topBigStyle,
+  topDoubleRightStyle,
+} from "../styles";
 
 type SensorNodeProps = {};
 
 const SensorNode = (props: SensorNodeProps) => {
   return (
     <div className="sensor-node node-layout">
-      <Handle style={topBigStyle} type="target" position={Position.Top} />
+      <Handle
+        style={topDoubleRightStyle}
+        type="target"
+        position={Position.Top}
+      />
       <div className="node-header">
         <span className="node-title">Сенсор</span>
       </div>
@@ -17,7 +26,11 @@ const SensorNode = (props: SensorNodeProps) => {
         </select>
       </div>
 
-      <Handle style={bottomBigStyle} type="source" position={Position.Bottom} />
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
     </div>
   );
 };
diff --git a/components/FlowEditor/nodes/Logic/DelayNode.tsx b/components/FlowEditor/nodes/Logic/DelayNode.tsx
index a26293e..4920dfc 100644
--- a/components/FlowEditor/nodes/Logic/DelayNode.tsx
+++ b/components/FlowEditor/nodes/Logic/DelayNode.tsx
@@ -1,12 +1,21 @@
 import { Handle, Position } from "react-flow-renderer";
-import { bottomBigStyle, topBigStyle } from "../styles";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topBigStyle,
+  topDoubleRightStyle,
+} from "../styles";
 
 type DelayNodeProps = {};
 
 const DelayNode = (props: DelayNodeProps) => {
   return (
     <div className="delay-node node-layout">
-      <Handle style={topBigStyle} type="target" position={Position.Top} />
+      <Handle
+        style={topDoubleRightStyle}
+        type="target"
+        position={Position.Top}
+      />
       <div className="node-header">
         <span className="node-title">Задержка</span>
       </div>
@@ -17,7 +26,11 @@ const DelayNode = (props: DelayNodeProps) => {
         </select>
       </div>
 
-      <Handle style={bottomBigStyle} type="source" position={Position.Bottom} />
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
     </div>
   );
 };
diff --git a/components/FlowEditor/nodes/Logic/MathNode.tsx b/components/FlowEditor/nodes/Logic/MathNode.tsx
index 9b11fca..6d5f42b 100644
--- a/components/FlowEditor/nodes/Logic/MathNode.tsx
+++ b/components/FlowEditor/nodes/Logic/MathNode.tsx
@@ -1,6 +1,7 @@
 import { Handle, Position } from "react-flow-renderer";
 import {
   bottomBigStyle,
+  bottomSmallStyle,
   topDoubleLeftStyle,
   topDoubleRightStyle,
 } from "../styles";
@@ -38,7 +39,11 @@ const MathNode = (props: MathNodeProps) => {
         </select>
       </div>
 
-      <Handle style={bottomBigStyle} type="source" position={Position.Bottom} />
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
     </div>
   );
 };
diff --git a/components/FlowEditor/nodes/styles.ts b/components/FlowEditor/nodes/styles.ts
index f63ad4e..1cc6074 100644
--- a/components/FlowEditor/nodes/styles.ts
+++ b/components/FlowEditor/nodes/styles.ts
@@ -1,24 +1,24 @@
 const topDoubleLeftStyle = {
   width: "20px",
-  height: "20px",
+  height: "15px",
   border: "none",
   borderTopLeftRadius: "10px",
   borderTopRightRadius: "10px",
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px",
-  top: "-20px",
+  top: "-15px",
   left: "20px",
 };
 
 const topDoubleRightStyle = {
   width: "20px",
-  height: "20px",
+  height: "15px",
   border: "none",
   borderTopLeftRadius: "10px",
   borderTopRightRadius: "10px",
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px",
-  top: "-20px",
+  top: "-15px",
 };
 
 const topBigStyle = {
@@ -43,4 +43,32 @@ const bottomBigStyle = {
   bottom: "-10px",
 };
 
-export { topBigStyle, bottomBigStyle, topDoubleLeftStyle, topDoubleRightStyle };
+const topSmallStyle = {
+  width: "20px",
+  height: "15px",
+  border: "none",
+  borderTopLeftRadius: "10px",
+  borderTopRightRadius: "10px",
+  borderBottomLeftRadius: "0px",
+  borderBottomRightRadius: "0px",
+  top: "-15px",
+};
+
+const bottomSmallStyle = {
+  width: "20px",
+  height: "15px",
+  border: "none",
+  borderTopLeftRadius: "0px",
+  borderTopRightRadius: "0px",
+  borderBottomLeftRadius: "10px",
+  borderBottomRightRadius: "10px",
+  bottom: "-15px",
+};
+
+export {
+  topBigStyle,
+  bottomBigStyle,
+  topDoubleLeftStyle,
+  topDoubleRightStyle,
+  bottomSmallStyle,
+};
diff --git a/styles/globals.css b/styles/globals.css
index 34d2b88..25a8736 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -63,6 +63,7 @@
 
   .node-layout {
     @apply flex flex-col items-center
+    rounded-lg
     w-[150px] h-fit bg-bluePrimary
     p-[4px];
   }