useMouseEvents

Fluxlay デスクトップアプリからストリーミングされるグローバルなマウスクリック / ホイール (トラックパッドスクロール) イベントをサブスクライブします。座標は 壁紙ウィンドウに対して正規化 され、Y 軸は数学的座標系（上が正）に揃えられます。

インポート

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

シグネチャ

function useMouseEvents(handlers: MouseEventHandlers): void;
 
interface MouseEventHandlers {
  onButton?: (event: MouseButtonEvent) => void;
  onWheel?: (event: MouseWheelEvent) => void;
}

不要なコールバックは省略できます（指定したものだけ呼び出されます）。

使い方

import { useMouseEvents } from "@fluxlay/react";
 
function Wallpaper() {
  useMouseEvents({
    onButton: event => {
      if (event.pressed) {
        console.log("pressed", event.button, event.x, event.y);
      }
    },
    onWheel: event => {
      console.log("scroll", event.deltaX, event.deltaY);
    }
  });
  return <div />;
}

イベントの型

MouseButtonEvent

プロパティ	型	説明
`type`	`"button"`	判別子。
`button`	`"left" \| "right" \| "middle" \| "other"`	押された / 離されたボタン。
`pressed`	`boolean`	`true` で押下、`false` で解放。
`x`	`number`	クリック時のカーソル X（壁紙ウィンドウ正規化、`-1` … `1`）。
`y`	`number`	クリック時のカーソル Y（`-1` … `1`、上が正）。
`windowLabel`	`string`	正規化基準となったウィンドウのラベル。

MouseWheelEvent

プロパティ	型	説明
`type`	`"wheel"`	判別子。
`deltaX`	`number`	水平スクロール量（OS 定義の単位）。
`deltaY`	`number`	垂直スクロール量（OS 定義の単位）。
`x`	`number`	スクロール時のカーソル X（壁紙ウィンドウ正規化、`-1` … `1`）。
`y`	`number`	スクロール時のカーソル Y（`-1` … `1`、上が正）。
`windowLabel`	`string`	正規化基準となったウィンドウのラベル。

備考

サブスクリプションは現在の URL の window_label クエリパラメータでウィンドウにスコープされ、デフォルトは "main"。
useMousePosition と同じく Y 軸は反転（上が正）です。CSS に渡す際は再反転してください。
macOS ではユーザーが Fluxlay に「入力監視」権限を付与している必要があります。Windows ではアンチウィルスがフックを警告することがあり、また管理者権限のプロセスからのイベントは UIPI により届きません。