Merge pull request #3601 from bcakmakoglu/refactor/handle-styles

refactor(system,styles)!: use translate to align handles to center of its side

.changeset/thin-dryers-worry.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/system': major
+---
+
+Use css `translate` to align handles to the center of their side instead of using hard-coded 4px to each direction, otherwise handles with different sizes aren't correctly aligned by the default handle styles

packages/system/src/styles/init.css

@@ -183,26 +183,26 @@
   &-bottom {
     top: auto;
     left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
+    bottom: 0;
+    transform: translate(-50%, 50%);
   }
 
   &-top {
+    top: 0;
     left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -50%);
   }
 
   &-left {
     top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   &-right {
-    right: -4px;
     top: 50%;
-    transform: translate(0, -50%);
+    right: 0;
+    transform: translate(50%, -50%);
   }
 }