メインコンテンツまでスキップ

概要

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)から引用しています。下記の各機能を 理解した後は、このファイルが最良の総合リファレンスになります。最初の状態で何をするか ――キーバインドやウィンドウの挙動など――は デフォルト設定 を参照してください。

ホットリロード​

Super + Shift + R で、設定の編集内容を実行中のセッションへ即座に反映 できます(再起動不要)。このセクションで扱う内容はすべて「ファイルを保存 → ショートカット → 結果を確認」のループで反復開発できます。

  • このショートカットは設定ファイル側ではなくコンポジター本体に組み込まれて いるため、設定が壊れていても必ず効きます。
  • 新しい設定の読み込みに失敗した場合(型エラーや import 時の例外など)は 直前の設定がそのまま動き続け、画面にエラーレポートが表示されます。 ファイルを修正して再度 Super + Shift + R を押してください。
  • 状態はリロードをまたいで引き継げます。ライフサイクルフック で状態を永続化でき、デフォルト設定はこれを使ってワークスペース・タイリング・ ウィンドウ配置を維持します。

COMPOSITOR オブジェクト​

COMPOSITOR は設定可能な領域を名前付きフィールドにまとめたものです。各フィールドは このセクションの個別ページに対応します。

フィールド制御する内容ページ
event / onEnable / onDisableライフサイクルフックとウィンドウ・入力・出力のイベントバスライフサイクルとイベント
outputモニターの解像度・スケール・位置・ミラーリング出力(ディスプレイ)
inputキーボード・ポインター・タッチパッドのデバイス設定入力デバイス
key / pointerキーボードショートカットとポインターのモディファイアキーバインドとポインター
process / envプログラムの起動と環境変数プロセスと環境変数
windowウィンドウごとの装飾(合成関数)ウィンドウの合成
effectGPU エフェクト:背景ブラー、ウィンドウ/レイヤー/ポップアップごとのシェーダーエフェクト
debugFPS カウンターなどのデバッグオーバーレイライフサイクルとイベント

合成関数の内側で使う部品にも、それぞれページがあります。

  • SSD コンポーネント — <Box/>・<Label/>・<Button/>・ <AppIcon/>・<Image/>・<ShaderEffect/>・<WindowBorder/>・ <ManagedWindow/>・<ClientWindow/> と style の全リファレンス。
  • 状態とシグナル — 自動更新を支えるリアクティブモデル。
  • アニメーション — なめらかなトランジションの作り方。

全体のメンタルモデル​

  1. コンポジターのコア(Rust) が、各ウィンドウ・出力・入力デバイスの ライブでリアクティブなビューを設定側に送ります。
  2. 設定はその値を読み、コールバックを登録し、(ウィンドウについては)装飾を表す 小さな TSX ツリーを返します。
  3. 読み取った値のどれかが変化すると、影響を受けた部分だけが再評価されます。これが シグナルシステムです(状態とシグナル を参照)。

まだの場合は、両者がどう噛み合うかを アーキテクチャ概要 で先に読んでおくと理解が深まります。