グリッド制御

テーブルコントロール（通常、名前はテーブルまたはグリッド）は、GUIの開発で広く使用されています。 職場でC ++とMFCを使用してユーザーインターフェイスを開発しました。 最初は、グリッドのよく知られた、かなりよく知られた実装であるCGridCtrlを使用しました 。 しかし、しばらくしてから彼は私たちに合うのをやめ、彼自身の開発が生まれました。 私たちの実装の根底にあるアイデアは、ここで共有したいと思います。 オープンソースプロジェクトを作成するというアイデアがあります（ほとんどの場合、Qtの下で）。 したがって、このメモは「概念実証」と見なすことができます。 建設的な批判とコメントを歓迎します。





既存の実装に満足できない理由は省略します（これは別のメモのトピックです）。

私たちのプロジェクトはエンジニアリングと科学であり、豊富なグラフィックスがあり、リストとテーブルはどこでも使用されています。 したがって、新しいグリッドは、大量の情報を表示するときに、柔軟なカスタマイズ、優れたパフォーマンス、および最小限のメモリ消費を提供することになっています。 開発の際、私は次のルールを遵守しようとしました。機能を可能な限り一般化および抽象化して実装しますが、ユーザビリティと作業の最適性を損なうものではありません。 もちろん、このルールは矛盾していますが、どうやってバランスを維持するかはあなた次第です。



何かを始めるために、グリッドコントロールを定義してみましょう。 一般性を維持するために、グリッドはスペースを行と列に分割する視覚要素であると言えます。 その結果、セルのグリッド（行と列の交点）が生成され、その中に情報が表示されます。 したがって、グリッドでは、構造とデータという2つのコンポーネントを区別できます。 グリッド構造は、スペースを行と列に分割する方法を決定し、データは実際、結果のセルに表示する内容を記述します。



上記で決定したように、グリッド構造（トポロジと言うことができます）は行と列で記述されます。 行と列は非常によく似たオブジェクトです。 区別できないと言うことができます。平面を水平に破壊するものと垂直に破壊するものがあります。 しかし、彼らはそれを同じ方法で行います。 ここでは、C ++クラスでスタイル設定できる、かなり小さく、自給自足のエンティティにすでにアプローチしています。 このクラスをLinesと呼びました（ロシア語ではLinesまたはStripesとして定義できます）。 このクラスは、一連の行（行または列）を定義します。 深く調べて別の行のクラスを定義する必要はありません。 クラスは小さく、機能しません。 したがって、Linesは行または列のセットのプロパティと、それらに対して実行できる操作を決定します。

• Countの主なプロパティは、Lineを構成する行の数です。
• 各行のサイズ（行の高さ、および列-幅）を変更できます
• 行を並べ替えることができます（行の並べ替え、列の並べ替え）
• 行を非表示にすることができます（ユーザーに見えないようにします）

行または列のセットに対して、多かれ少なかれ有用な操作を思い付くことができませんでした。 結果は小さくても便利なクラスです：

class Lines { public: Lines(UINT_t count = 0); UINT_t GetCount() const { return m_count; } void SetCount(UINT_t count); UINT_t GetLineSize(UINT_t line) const; void SetLineSize(UINT_t line, UINT_t size); bool IsLineVisible(UINT_t line) const; void SetLineVisible(UINT_t line, bool visible); template <typename Pred> void Sort(const Pred& pred); const vector<UINT_t>& GetPermutation() const; void SetPermutation(const vector<UINT_t>& permutation); UINT_t GetAbsoluteLineID(UINT_t visibleLine) const; UINT_t GetVisibleLineID(UINT_t absoluteLine) const; Event_t<void(const Lines&, unsigned)> changed; private: UINT_t m_count; vector<UINT_t> m_linesSize; vector<bool> m_linesVisible; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

わかりやすくするために、コメントと一部のユーティリティ関数とフィールドは省略されています。

クラスには、関数GetAbsoluteLineID



およびGetVisibleLineID



ます。 行を混在させたり非表示にしたりできるため、絶対インデックス行と表示インデックス行は異なります。 写真がこの状況をはっきりと示していることを願っています。



また、行を明確にする必要があります

 Event_t<void(const Lines&, unsigned)> changed;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで信号が定義されます（Qtまたはboostで呼び出されるため）。 C ++ 11とstd ::関数の出現により、外部ライブラリに依存しないように、信号/スロットの簡単な実装を簡単に記述できます。 この場合、Linesクラスでイベントを定義し、任意の関数またはファンクターをそれに接続できます。 たとえば、グリッドはこのイベントに接続し、Linesのインスタンスが変更されるとアラートを受信します。



したがって、グリッド構造は2つの線で表されます。

 private: Lines m_rows; Lines m_columns;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データに渡します。 表示するデータとグリッドの表示方法に関するグリッド情報の提供方法 私たちの前にすべてがすでにここで発明されています-私はMVC（Model-View-Controller）トライアドを使用しました。 ビュー要素から始めましょう。 Linesクラスが1行ではなくセット全体を定義するように、Viewクラスは、グリッドセルの特定のサブセットにある種の同種のデータを表示するものとして定義します。 たとえば、最初の列にはテキストが表示されます。 つまり、テキストデータを表示できるオブジェクトを作成する必要があり、このデータは最初の列に表示する必要があると言えます。 持っているデータはさまざまな場所で表示できるため、これらの関数をさまざまなクラスで実装することをお勧めします。 データを表示できるクラス、実際にはビュー、およびデータが表示される場所を示すことができるクラス（範囲（セルのセット））を呼び出します。 これらのクラスの2つのインスタンスをグリッドに渡し、表示するものと場所を指定するだけです。



Rangeクラスを詳しく見てみましょう。 これは驚くほど小さくて強力なクラスです。 その主なタスクは、特定のセルが含まれているかどうかの質問にすばやく答えることです。 実際、これは1つの機能を持つインターフェースです。

 class Range { public: virtual bool HasCell(CellID cell) const = 0; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、任意のセルのセットを定義できます。 もちろん、最も役立つのは次の2つです。

 class RangeAll { public: bool HasCell(CellID cell) const override { return true; } }; class RangeColumn { public: RangeColumn(UINT_t column): m_column(column) {} bool HasCell(CellID cell) const override { return cell.column == m_column; } private: UINT_t m_column; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のクラスはすべてのセルのセットを定義し、2番目のクラスは1つの特定の列のセットを定義します。



Viewクラスには関数が1つだけ残っています-セルにデータを描画します。 実際、本格的な作業を行うには、Viewがいくつかの質問に答えられる必要があります。

• データを表示するために必要なスペースの量（たとえば、テキストを表示するのに十分な幅に列を設定する-フィットモード）
• データのテキスト表現を提供します（テキストとしてクリップボードにコピーするか、ツールチップに表示します）

 class View { public: virtual void Draw(DrawContext& dc, Rect rect, CellID cell) const = 0; virtual Size GetSize(DrawContext& dc, CellID cell) const = 0; virtual bool GetText(CellID cell, INTENT intent, String& text) const = 0; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、同じセルに異なるタイプのデータを描画したい場合はどうでしょうか？ たとえば、アイコンとテキストを隣に描画したり、チェックボックスとテキストを隣に描画したりします。 これらの組み合わせに対して個別のタイプのビューを実装したくありません。 1つのセルに複数のビューを表示できるようにしましょう。特定のビューをセルに配置する方法を指示するクラスが必要です。

 class Layout { public: virtual void LayoutView(DrawContext& dc, const View* view, Rect& cellRect, Rect& viewRect) const = 0; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明確にするために、チェックボックスとテキストが最初の列に表示される例を考えてください。 2列目には、ラジオボタン、色付きのボックス、および色のテキスト表現が表示されます。 そして、別のセルにはアスタリスクがあります。



たとえば、チェックボックスの場合は、LayoutLeftを使用します。これは、Viewにサイズを要求し、セルの四角形から目的のサイズの四角形を「噛み合わせ」ます。 また、テキストにはLayoutAllを使用します。これには、セルの既に切り捨てられた四角形がcellRectパラメーターに送られます。 LayoutAllは、そのビューのサイズを要求するのではなく、セルの使用可能なすべてのスペースを単に「取得」します。 ビューと組み合わせる多くの便利なレイアウトを思い付くことができます。



データを設定したいGridクラスに戻りましょう。 トリプル<Range、View、Layout>を保存できることがわかります。トリプルは、どのセルにデータを表示するか、およびこのデータをセル内にどのように配置するかを決定します。 したがって、Gridクラスは次のようになります。

 class Grid { private: Lines m_rows; Lines m_columns; vector<tuple<Range, View, Layout>> m_data; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、この例ではm_dataのように見えます



本質的に、これはグリッドをレンダリングするのに十分です。 しかし、情報は最適な方法で編成されていません-データの表示を決定するレコードのリストだけです。

Gridクラスを使用してセルを描画する方法について考えてみましょう。

1. m_dataをフィルタリングし、セルがRangeに該当するトリプルのみを残す必要があります
   
   

    for (auto d: grid.m_data) if (d.range->HasCell(cell)) cell_data.push_back(d);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

2. セルの長方形を定義する
   
   

    Rect cellRect = CalculateCellRect(grid.m_rows, grid.m_columns, cell);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

3. すべてのビューの長方形を定義する
   
   

    vector<Rect> view_rects(cell_data.size()); auto view_rect_it = view_rects.begin(); for (auto d: cell_data) d.layout->LayoutView(grid.GetDC(), d.view, cellRect, *view_rect_it++);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

4. すべてのビューをそれらのために計算された長方形に描画します
   
   

    auto view_rect_it = view_rects.begin(); for (auto d: cell_data) d.view->Draw(grid.GetDC(), *view_rect_it++, cell);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

ご覧のように、レンダリングは最後のステップで行われ、フィルター処理されたビューのリストと、これらのビューがデータを描画する長方形のリストのみが必要です。 このデータをキャッシュする小さなクラスを考え出すことができ、その描画関数は単一のポイント4で構成されます。

 class CellCache { public: CellCache(Grid grid, CellID cell); void Draw(DrawContext& dc); private: CellID m_cell; Rect m_cellRect; vector<pair<View, Rect>> m_cache; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンストラクターのこのクラスは、最初の3つのポイントを実行し、結果をm_cacheに保存します。 同時に、Draw関数は非常に軽量であることが判明しました。 このため、軽さはm_cacheの形式で支払う必要がありました。 したがって、セルごとにそのようなクラスのインスタンスを作成することは利益がありません（セルの総数によってはデータを持たないことに同意しました）。 ただし、すべてのセルにCellCacheインスタンスを用意する必要はありません。表示されるセルに十分です。 原則として、すべてのセルのごく一部がグリッドに表示され、その数はセルの総数には依存しません。



したがって、グリッドの可視領域を制御し、可視セルごとにCellCacheを格納し、それらをすばやく描画できる別のクラスがあります。

 class GridCache { public: GridCache(Grid grid); void SetVisibleRect(Rect visibleRect); void Draw(DrawContext& dc); private: Grid m_grid; Rect m_visibleRect; vector<CellCache> m_cells; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ユーザーがグリッドのサイズを変更するか、コンテンツをスクロールすると、このオブジェクトに新しいvisibleRectを設定するだけです。 この場合、m_cellsは、表示されているセルのみを含むように再編成されます。 GridCache機能は、読み取り専用グリッドを実装するのに十分です。

 class GridWindow { public: Grid GetGrid() { return m_gridCache.GetGrid(); } void OnPaint() { m_gridCache.Draw(GetDrawContext()); } void OnScroll() { m_gridCache.SetVisibleRect(GetVisibleRect()); } void OnSize() { m_gridCache.SetVisibleRect(GetVisibleRect()); } private: GridCache m_gridCache; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

GridクラスとGridCacheクラスを分離することは非常に便利です。 たとえば、1つのグリッドインスタンスに対して複数のGridCacheを作成できます。 これを使用して、グリッドコンテンツのページごとの印刷を実装したり、画像としてグリッドをファイルにエクスポートしたりできます。 同時に、GridWindowオブジェクトは一切変更されません。それとは別に、同じGridインスタンスを参照するGridCacheがループで作成され、新しいGridCacheが現在のページのvisibleRectを設定して印刷します。



インタラクティブ機能を追加するには？ これがControllerが前面に出てくるところです。 他のクラスとは異なり、このクラスは多くの機能を持つインターフェースを定義します。 しかしそれは、マウスイベント自体が多数あるためです。

 class Controller { public: virtual bool OnLBttnDown(CellID cell, Point p) = 0; virtual bool OnLBttnUp(CellID cell, Point p) = 0; ... };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レンダリングと同様に、マウスで作業するには、表示されているセルのみが必要です。 GridCacheクラスにマウス処理関数を追加します。 マウスカーソルの位置によって、その下にあるセル（CacheCell）が決まります。 次に、マウスがヒットした長方形のすべてのビューのセルで、コントローラーを取得し、対応するメソッドを呼び出します。 メソッドがtrueを返す場合-ビューのバイパスを停止します。 このスキームは十分に高速です。 同時に、ViewクラスでControllerへの参照を追加する必要がありました。



Modelクラスの処理は残ります。 アダプタテンプレートとして必要です。 その主な目標は、「便利な」形式でViewのデータを提供することです。 例を見てみましょう。 テキストを描画できるViewTextがあります。 特定のセルに描画するには、このテキストをModelTextオブジェクトからセルに要求する必要があります。ModelTextオブジェクトは単なるインターフェイスであり、その特定の実装はテキストを取得する場所を知っています。 次に、ViewTextクラスの実装例を示します。

 class ViewText: public View { public: ViewText(ModelText model): m_model(model) {} void Draw(DrawContext& dc, Rect rect, CellID cell) const override { const String& text = model->GetText(cell); dc.DrawText(text, rect); } private: ModelText m_model; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、ModelTextに必要なインターフェイスは簡単に推測できます。

 class ModelText: public Model { public: virtual const String& GetText(CellID cell) const = 0; virtual void SetText(CellID cell, const String& text) = 0; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラーが使用できるように、セッターを追加したことに注意してください。 実際には、最も一般的に使用されるModelTextCallbackの実装

 class ModelTextCallback: public ModelText { public: function<const String&(CellID)> getCallback; function<void(CellID, const String&)> setCallback; const String& GetText(CellID cell) const override { return getCallback(cell); } void SetText(CellID cell, const String& text) override { if (setCallback) setCallback(cell, text); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このモデルにより、グリッドの初期化中に実際のデータにアクセスするラムダ関数を割り当てることができます。

さて、モデルはModelText、ModelInt、ModelBoolなどの異なるデータに共通するものは何ですか？ 一般的に、何も、それらについての唯一のことは、データが変更されたことをすべての関心のあるオブジェクトに通知する必要があると言うことはできません。 したがって、基本クラスModelは次の形式を取ります。

 class Model { public: virtual ~Model() {} Event_t<void(Model)> changed; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、グリッドは多くの小さなクラスに分割され、それぞれが明確に定義された小さなタスクを実行します。 一方では、グリッドを実装するにはクラスが多すぎるように見えるかもしれません。 しかし、一方で、クラスは小さくてシンプルで、明確な関係があることが判明しました。これにより、コードの理解が簡単になり、複雑さが軽減されます。 同時に、Range、Layout、View、Controller、およびModelクラスの継承クラスのあらゆる種類の組み合わせは、非常に大きな変動性をもたらします。 ModelCallbackにラムダ関数を使用すると、グリッドをデータに簡単かつ迅速に関連付けることができます。



次のメモでは、標準のグリッド機能を実装する方法について説明します。選択、並べ替え、列/行のサイズ変更、印刷、ヘッダーの追加方法（上部の行と左側の列を修正）。

少し秘密をお伝えします-この記事で説明されていることはすべて、上記を実装するのに十分です。 いくつかの機能を見逃した場合は、コメントを書いてください。次の記事でそれらの実装について説明します。