Merge pull request #5544 from xyflow/edge-toolbar

Add EdgeToolbar Component

packages/system/src/utils/edge-toolbar.ts

@@ -0,0 +1,23 @@
+const alignXToPercent: Record<'left' | 'center' | 'right', number> = {
+  left: 0,
+  center: 50,
+  right: 100,
+};
+
+const alignYToPercent: Record<'top' | 'center' | 'bottom', number> = {
+  top: 0,
+  center: 50,
+  bottom: 100,
+};
+
+export function getEdgeToolbarTransform(
+  x: number,
+  y: number,
+  zoom: number,
+  alignX: 'left' | 'center' | 'right' = 'center',
+  alignY: 'top' | 'center' | 'bottom' = 'center'
+): string {
+  return `translate(${x}px, ${y}px) scale(${1 / zoom}) translate(${-(alignXToPercent[alignX] ?? 50)}%, ${-(
+    alignYToPercent[alignY] ?? 50
+  )}%)`;
+}

packages/system/src/utils/index.ts

@@ -5,6 +5,7 @@ export * from './graph';
 export * from './general';
 export * from './marker';
 export * from './node-toolbar';
+export * from './edge-toolbar';
 export * from './store';
 export * from './types';
 export * from './shallow-node-data';