サーバーサイド装飾コンポジター

はじめに

「サーバーサイド装飾コンポジター」は、サーバーサイドのウィンドウ装飾を実装した、デスクトップスタイルの Wayland コンポジターのサンプルです。

Qt を使用した Qt Wayland Compositor については、「Minimal Qml」の例を参照してください。

装飾

「ウィンドウ装飾」という用語は、ウィンドウシステムにおいてほとんどのウィンドウに付随する追加の UI を指します。その例としては、

• ウィンドウ領域を囲むグラフィカルな枠。ユーザーはこれをクリックしてドラッグし、ウィンドウのサイズを変更できます。
• ウィンドウのタイトルバー。これを使ってウィンドウを移動することができます。
• ウィンドウを最大化、最小化、または閉じるためのシステムツールボタン。

従来、Wayland では、これらの装飾をレンダリングするのはクライアントの役割でした。一方、ウィンドウの位置、サイズ、状態はコンポジターの管轄です。一部のシェル拡張機能では、オプションとしてサーバーサイドの装飾をサポートしています。これにより、コンポジターはクライアントに対して、独自のウィンドウ装飾を描画しないよう通知することができます。 その代わりに、コンポジターがウィンドウ装飾の描画を担当します。これは、macOS、Windows、X11 などの他のウィンドウシステムにおける装飾の扱い方に相当します。なお、一部のクライアントではこれをまったくサポートしていない場合がある点に留意する必要があります。システムでそのようなアプリケーションを実行することが想定される場合は、この点も考慮に入れる必要があります。

サーバーサイド装飾の利点：

• クライアントは、Waylandバッファ内でシステムUI用の領域を確保する必要がありません。
• Qt Quick また、OpenGLベースのクライアントは、別のFBOにレンダリングしてその内容をWaylandバッファにコピーする必要がありません。
• クライアントウィンドウは、使用しているUIツールキットに関係なく、一貫した外観を保つことができます。
• ウィンドウのサイズ変更、閉じる操作、状態の変更といったシステム機能は、サーバーとクライアントの間で共有されるのではなく、サーバーに一元化されます。

コード

このサンプルコンポジターは、XdgShell 拡張機能のみをサポートしています。通常の方法で拡張機能を初期化し、後でアクセスできるように、ListModel にサーフェスを追加します。

XdgShell {
    onToplevelCreated: (toplevel, xdgSurface) => shellSurfaces.append({shellSurface: xdgSurface});
}
XdgDecorationManagerV1 {
    preferredMode: XdgToplevel.ServerSideDecoration
}

さらに、このサンプルではXdgDecorationManagerV1 拡張機能を初期化しています。これにより、サーバー側の装飾を優先することをクライアントに伝えることができます。

このインターフェースはオプションであるため、クライアントがこれをサポートしておらず、常に独自の装飾を描画する場合もあります。したがって、このモードはあくまで「推奨」に過ぎず、装飾を適用する前にトップレベルウィンドウの実際のモードを確認する必要があります。

Column {
    id: chrome
    width: shellSurfaceItem.implicitWidth
    Rectangle {
        visible: modelData.toplevel.decorationMode === XdgToplevel.ServerSideDecoration
        width: parent.width
        height: 30
        gradient: "HeavyRain";
        Text {
            text: modelData.toplevel.title
            anchors.centerIn: parent
        }
        Item {
            anchors.right: parent.right
            width: 30
            height: 30
            Text { text: "X"; anchors.centerIn: parent }
            TapHandler {
                onTapped: modelData.toplevel.sendClose()
            }
        }
        DragHandler {
            target: chrome
        }
    }
    ShellSurfaceItem {
        id: shellSurfaceItem
        moveItem: parent
        shellSurface: modelData
        onSurfaceDestroyed: shellSurfaces.remove(index)
    }
}

各ウィンドウに対して、その上部にシンプルなタイトルバーを作成します。タイトルバーには、グラデーション、テキスト、位置を管理するDragHandler 、および閉じるボタンが含まれています。

画像の左上には、デコレーションマネージャの拡張機能をサポートするクライアントが表示されており、右下にはクライアント側のデコレーションが適用された同じクライアントが表示されています。

サンプルプロジェクト @ code.qt.io