Fluent UI React で Context Menu を表示する

リリックドラゴンRPGエディタ というプロジェクトでゲームエンジンを作っています。

少し前に こちら の記事でフロントエンドのコンポーネントライブラリを Fluent UI に移行しました。
今回はコンテキストメニューを指定位置に表示する方法を調べたので、そのメモです。

と言っても検索してもパッと出てこないし、AIに聞いてもDOM直接いじるとか怪しい回答しかないしで、結局 聞きました。超絶早速の返信に感謝です。

要点だけ書くと次のようになります。 回答先のリンク は Tooltip を使っていますが、併せてご参照ください。

export const ContextMenu = () => {
    const targetOffset = { x: 100, y: 200 }; // 目的の位置
    const positioningRef = React.useRef<PositioningImperativeRef>(null);

    React.useEffect(() => {
        const x = targetOffset.x;
        const y = targetOffset.y;
        const virtualElement: PositioningVirtualElement = {
            getBoundingClientRect: () => ({
                width: 0,
                height: 0,
                top: y,
                right: x,
                bottom: y,
                left: x,
                x,
                y,
            }),
        };
        positioningRef.current?.setTarget(virtualElement);
    }, [positioningRef, targetOffset]);

    return (
        <Menu
            positioning={{
                positioningRef: positioningRef,
            }}
        >
            ...
        </Menu>
    );
};

targetOffset をマウス位置にすることで、次のように表示できました。

うん、きれい。よきよき。