useMousePosition

Fluxlay デスクトップアプリからストリーミングされるグローバルマウス位置イベントをサブスクライブします。

インポート

import { useMousePosition } from "@fluxlay/react";

シグネチャ

function useMousePosition(): { x: number; y: number };

戻り値

マウス位置は壁紙ウィンドウに対して正規化されており、両軸とも -11 の範囲です。

プロパティ範囲説明
x-11-1 がウィンドウ左端、1 が右端。
y-11-1 がウィンドウ下端、1 が上端(数学的 Y 軸: 上が正)。

最初のイベントを受信するまで { x: 0, y: 0 } を返します。

ピクセル座標への変換

ビューポートサイズを掛けて、Y は CSS と反対なので反転させます。

const px = ((x + 1) / 2) * window.innerWidth;
const py = (1 - (y + 1) / 2) * window.innerHeight;

備考

  • Y 軸は数学的座標系(上が正)です。CSS は上が負(下が正)なので、toptranslateY に使う前に変換してください。
  • ウィンドウラベルは window_label クエリパラメータから読み取られ、デフォルトは "main" です。
  • サブスクリプションはウィンドウ単位で、各壁紙ウィンドウは自分自身に対して正規化された座標を受け取ります。
  • Fluxlay デスクトップアプリの外では { x: 0, y: 0 } を返します。