Pien-Studio/apps/web/hooks/use-editor-context-menu.ts

import React from "react";
import { CONTEXT_MENU_SIZE } from "../lib/editor-constants";

type ContextMenuPosition = { x: number; y: number };

export function useEditorContextMenu() {
  const [contextMenu, setContextMenu] =
    React.useState<ContextMenuPosition | null>(null);

  const openContextMenu = React.useCallback((x: number, y: number) => {
    const rect = document.documentElement.getBoundingClientRect();
    const {
      width: menuWidth,
      height: menuHeight,
      viewportPadding: pad,
    } = CONTEXT_MENU_SIZE;
    const maxX = rect.width - menuWidth - pad;
    const maxY = rect.height - menuHeight - pad;
    setContextMenu({
      x: Math.max(pad, Math.min(x, maxX)),
      y: Math.max(pad, Math.min(y, maxY)),
    });
  }, []);

  const closeContextMenu = React.useCallback(() => {
    setContextMenu(null);
  }, []);

  return { contextMenu, openContextMenu, closeContextMenu };
}