概要
ShojiWM の設定はすべて TypeScript/TSX で書きます。設定ファイルは shoji_wm から
import する普通の TypeScript モジュールで、コンポジターとのやり取りはただ一つの
ルートオブジェクト COMPOSITOR を通じて行います。
import {COMPOSITOR, ManagedWindow, ClientWindow, WindowBorder} from 'shoji_wm';
// Super+T でターミナルを起動
COMPOSITOR.key.bind('terminal', 'Super+T', () => {
COMPOSITOR.process.spawn({command: ['kitty']});
});
// すべてのウィンドウの装飾方法を決める
COMPOSITOR.window.composition = (window) => (
<ManagedWindow rect={window.position} zIndex={1}>
<WindowBorder style={{borderRadius: 10, border: {px: 2, color: '#d7ba7d'}}}>
<ClientWindow />
</WindowBorder>
</ManagedWindow>
);
ヒント
設定はデフォルトで ~/.config/shojiwm/（エントリーポイントは
~/.config/shojiwm/src/index.tsx）を読みます。このセクションの例の多くは
デフォルト設定（packages/config/src/index.tsx）から引用しています。下記の各機能を
理解した後は、このファイルが最良の総合リファレンスになります。最初の状態で何をするか
――キーバインドやウィンドウの挙動など――は デフォルト設定
を参照してください。
COMPOSITOR オブジェクト
COMPOSITOR は設定可能な領域を名前付きフィールドにまとめたものです。各フィールドは
このセクションの個別ページに対応します。
| フィールド | 制御する内容 | ページ |
|---|---|---|
event / onEnable / onDisable | ライフサイクルフックとウィンドウ・入力・出力のイベントバス | ライフサイクルとイベント |
output | モニターの解像度・スケール・位置・ミラーリング | 出力（ディスプレイ） |
input | キーボード・ポインター・タッチパッドのデバイス設定 | 入力デバイス |
key / pointer | キーボードショートカットとポインターのモディファイア | キーバインドとポインター |
process / env | プログラムの起動と環境変数 | プロセスと環境変数 |
window | ウィンドウごとの装飾（合成関数） | ウィンドウの合成 |
effect | GPU エフェクト：背景ブラー、ウィンドウ／レイヤー／ポップアップごとのシェーダー | エフェクト |
debug | FPS カウンターなどのデバッグオーバーレイ | ライフサイクルとイベント |
合成関数の内側で使う部品にも、それぞれページがあります。
- SSD コンポーネント —
<Box/>・<Label/>・<Button/>・<AppIcon/>・<Image/>・<ShaderEffect/>・<WindowBorder/>・<ManagedWindow/>・<ClientWindow/>とstyleの全リファレンス。 - 状態とシグナル — 自動更新を支えるリアクティブモデル。
- アニメーション — なめらかなトランジションの作り方。
全体のメンタルモデル
- コンポジターのコア（Rust） が、各ウィンドウ・出力・入力デバイスの ライブでリアクティブなビューを設定側に送ります。
- 設定はその値を読み、コールバックを登録し、（ウィンドウについては）装飾を表す 小さな TSX ツリーを返します。
- 読み取った値のどれかが変化すると、影響を受けた部分だけが再評価されます。これが シグナルシステムです（状態とシグナル を参照）。
まだの場合は、両者がどう噛み合うかを アーキテクチャ概要 で先に読んでおくと理解が深まります。