"use client";

import { Background, ReactFlow } from "@xyflow/react";
import { EdgeDropdownMenu } from "@/components/edge-dropdown-menu";

const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Node" },
  },
  {
    id: "2",
    position: { x: 500, y: 500 },
    data: { label: "Node" },
  },
];

const defaultEdges = [
  {
    id: "e1-2",
    source: "1",
    target: "2",
    type: "edgeDropdownMenu",
  },
];

const edgeTypes = {
  edgeDropdownMenu: EdgeDropdownMenu,
};

export default function Demo() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        edgeTypes={edgeTypes}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}


import React, { useEffect, useRef, useState } from "react";
import {
  BaseEdge,
  EdgeLabelRenderer,
  EdgeProps,
  getBezierPath,
} from "@xyflow/react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function EdgeDropdownMenu({
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  markerEnd,
}: EdgeProps) {
  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });

  const toggleDropdownVisibility = (
    event: React.MouseEvent<HTMLButtonElement>,
  ) => {
    event.stopPropagation();
    setIsDropdownVisible((prev) => !prev);
  };

  const handleClickOutside = (event: MouseEvent) => {
    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
      setIsDropdownVisible(false);
    }
  };

  useEffect(() => {
    if (isDropdownVisible) {
      document.addEventListener("click", handleClickOutside);
    } else {
      document.removeEventListener("click", handleClickOutside);
    }
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [isDropdownVisible]);

  return (
    <>
      <BaseEdge
        path={edgePath}
        markerEnd={markerEnd}
        style={{ ...style, pointerEvents: "auto" }}
      />

      <EdgeLabelRenderer>
        <div
          className="nodrag nopan pointer-events-auto absolute"
          style={{
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
          }}
        >
          <Button
            onClick={toggleDropdownVisibility}
            size="icon"
            variant="secondary"
          >
            +
          </Button>
        </div>

        {isDropdownVisible && (
          <div
            ref={menuRef}
            style={{
              position: "absolute",
              top: `${labelY}px`,
              left: `${labelX}px`,
              zIndex: 1000,
              transform: "translate(-50%, -50%)",
              pointerEvents: "auto",
            }}
          >
            <DropdownMenu open>
              <DropdownMenuTrigger />
              <DropdownMenuContent>
                <DropdownMenuItem
                  onClick={() => window.alert("New Node Created")}
                >
                  Create New Node
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => window.alert("Node Deleted")}>
                  Delete Node
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}
      </EdgeLabelRenderer>
    </>
  );
}

EdgeDropdownMenu.displayName = "EdgeDropdownMenu";


Edge Dropdown Menu

Installation