Merge pull request #5091 from xyflow/feat/panel-pos

feat(panel): add center-left and center-right positions

.changeset/witty-toys-wash.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/system': patch
+---
+
+Add center-left and center-right as a panel position

packages/system/src/styles/init.css

@@ -278,6 +278,14 @@ svg.xy-flow__connectionline {
     bottom: 0;
   }
 
+  &.top,
+  &.bottom {
+    &.center {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
   &.left {
     left: 0;
   }
@@ -286,9 +294,12 @@ svg.xy-flow__connectionline {
     right: 0;
   }
 
-  &.center {
+  &.left,
-    left: 50%;
+  &.right {
-    transform: translateX(-50%);
+    &.center {
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 }
 

packages/system/src/types/general.ts

@@ -169,7 +169,15 @@ export type UpdateNodeInternals = (nodeId: string | string[]) => void;
  *
  * @public
  */
-export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type PanelPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'center-left'
+  | 'center-right';
 
 export type ProOptions = {
   account?: string;