chore(edge-toolbar): cleanup

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 toolbar x relative to the edge.
+   * @default "center"
+   * @example 'left', 'center', 'right'
+   */
+  alignX?: 'left' | 'center' | 'right';
+  /**
+   * Align the toolbar x relative to the edge.
+   * @default "center"
+   * @example 'top', 'center', 'bottom'
+   */
+  alignY?: 'top' | 'center' | 'bottom';
+};

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

@@ -1,10 +1,24 @@
+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,
-  offsetX: number = 0,
-  offsetY: number = 0
+  alignX: 'left' | 'center' | 'right' = 'center',
+  alignY: 'top' | 'center' | 'bottom' = 'center'
 ): string {
   // Position the toolbar at the edge label center (scaling is handled by EdgeLabelRenderer)
-  return `translate(${x + offsetX}px, ${y + offsetY}px) translate(-50%, -50%) scale(${1 / zoom})`;
+  return `translate(${x}px, ${y}px) scale(${1 / zoom}) translate(${-(alignXToPercent[alignX] ?? 50)}%, ${-(
+    alignYToPercent[alignY] ?? 50
+  )}%)`;
 }