Clean up relationship component

src/components/Relationship.jsx

@@ -1,17 +1,16 @@
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { calcPath } from "../utils";
 import { Cardinality } from "../data/data";
 import useSettings from "../hooks/useSettings";
 
-export default function Relationship(props) {
-  const [hovered, setHovered] = useState(false);
+export default function Relationship({ data }) {
   const { settings } = useSettings();
   const pathRef = useRef();
 
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
 
-  switch (props.data.cardinality) {
+  switch (data.cardinality) {
     case Cardinality.MANY_TO_ONE:
       cardinalityStart = "n";
       cardinalityEnd = "1";
@@ -33,48 +32,37 @@ export default function Relationship(props) {
   let cardinalityStartY = 0;
   let cardinalityEndY = 0;
 
-  const length = 32;
+  const cardinalityOffset = 28;
 
   if (pathRef.current) {
     const pathLength = pathRef.current.getTotalLength();
-    const point1 = pathRef.current.getPointAtLength(length);
+    const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
     cardinalityStartX = point1.x;
     cardinalityStartY = point1.y;
-    const point2 = pathRef.current.getPointAtLength(pathLength - length);
+    const point2 = pathRef.current.getPointAtLength(
+      pathLength - cardinalityOffset
+    );
     cardinalityEndX = point2.x;
     cardinalityEndY = point2.y;
   }
 
   return (
-    <g className="select-none">
-      <defs>
-        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-          <feDropShadow
-            dx="0"
-            dy="0"
-            stdDeviation="4"
-            floodColor="gray"
-            floodOpacity="0.3"
-          />
-        </filter>
-      </defs>
+    <g className="select-none group">
       <path
         ref={pathRef}
         d={calcPath(
-          props.data.startX,
-          props.data.endX,
-          props.data.startY,
-          props.data.endY,
-          props.data.startFieldId,
-          props.data.endFieldId
+          data.startX,
+          data.endX,
+          data.startY,
+          data.endY,
+          data.startFieldId,
+          data.endFieldId
         )}
-        stroke={hovered ? "blue" : "gray"}
+        stroke="gray"
+        className="group-hover:stroke-sky-700"
         fill="none"
         strokeWidth={2}
-        filter="url(#shadow)"
         cursor="pointer"
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
       />
       {pathRef.current && settings.showCardinality && (
         <>
@@ -83,6 +71,7 @@ export default function Relationship(props) {
             cy={cardinalityStartY}
             r="12"
             fill="grey"
+            className="group-hover:fill-sky-700"
           ></circle>
           <text
             x={cardinalityStartX}
@@ -99,6 +88,7 @@ export default function Relationship(props) {
             cy={cardinalityEndY}
             r="12"
             fill="grey"
+            className="group-hover:fill-sky-700"
           ></circle>
           <text
             x={cardinalityEndX}