Merge pull request #5544 from xyflow/edge-toolbar

Add EdgeToolbar Component

packages/system/src/types/edges.ts

@@ -129,3 +129,34 @@ export type EdgePosition = {
 };
 
 export type EdgeLookup<EdgeType extends EdgeBase = EdgeBase> = Map<string, EdgeType>;
+
+export type EdgeToolbarBaseProps = {
+  /**
+   * An edge toolbar must be attached to an edge.
+   */
+  edgeId: string;
+  /**
+   * The `x` position of the edge label.
+   */
+  x: number;
+  /**
+   * The `y` position of the edge label.
+   */
+  y: number;
+  /** If `true`, edge toolbar is visible even if edge is not selected.
+   * @default false
+   */
+  isVisible?: boolean;
+  /**
+   * Align the vertical toolbar position relative to the passed x position.
+   * @default "center"
+   * @example 'left', 'center', 'right'
+   */
+  alignX?: 'left' | 'center' | 'right';
+  /**
+   * Align the horizontal toolbar position relative to the passed y position.
+   * @default "center"
+   * @example 'top', 'center', 'bottom'
+   */
+  alignY?: 'top' | 'center' | 'bottom';
+};

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';