Update Handle style

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>
   );
 };

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>
   );
 };

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>
   );
 };

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>
   );
 };

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

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];
   }