UMLダイアグラムエディタのプロトタイプを例として使用して、OOPを使用したインタラクティブダイアグラムの実装。 パート2

これは、オブジェクト指向開発環境でゼロからインタラクティブグラフィックスを使用してインターフェイスを作成する方法について説明した以前の出版物の終わりです。 最初の部分では、このシステムの重要なアーキテクチャーのアイデア、つまり構成、委任、およびテンプレートメソッドの使用について検討しました。



次に、より日常的な質問に移り、マウスイベントの処理とスケーリング、パン、オブジェクトの選択、およびドラッグアンドドロップを担当するクラスの構築を検討します。

DiagramPanelクラス

視覚コンポーネント

DiagramObjectクラスとは異なり、DiagramPanelクラスのソースコードには重要な構造的ソリューションは含まれておらず、ルーチンタスクのみを実行します。 ただし、そのコードはDiagramObjectコードよりも約30％長くなります。 開発環境に関連するすべての詳細が含まれています：フレームワークをJavaから別の環境に書き換えたい場合（以前のように、DelphiからJavaに変換する場合）、主な問題はDiagramObjectに関連付けられます。



Swingを使用する場合、DiagramPanelクラスはjavax.swing.JPanelクラスを継承し、アプリケーションフォームに配置できるビジュアルインターフェイスコンポーネントです。 デモアプリケーションは1つのパネルのみで構成されています。 構造的にDiagramPanelは以下で構成されます。

• 水平および垂直スクロールバーjavax.swing.JScrollBar（hsbおよびvsb変数）、
• 画面上のボタンを備えたトップパネル、
• DiagramPanel.DiagramCanvasオブジェクト（java.awt.Canvasの後継者）が占める「描画」領域の中央スペース全体を埋めます。 java.awt.Canvasクラスには、描画コンテキスト（Graphics）を引数として受け取るオーバーライドされたpaintメソッド（Graphics g）を使用して継承者を作成することが含まれます。これは、DiagramPanelにネストされたDiagramCanvasクラスで行われます。 特に、ウィンドウのサイズを変更し、ウィンドウのオーバーラップを変更すると、ペイント（グラフィックg）メソッドが自動的に呼び出されるため、チャートはこれらのアクションを「損なう」ことはありません。

DiagramPanelの観点からチャートを描く

DiagramPanel.DiagramCanvasクラスのpaint（Graphics g）メソッドのコードを詳しく見てみましょう。 一部の詳細を省略すると、次のようになります。



このメソッドは次のことを行います。

• ルート描画オブジェクトのgetMaxX / Yメソッドを使用して、ワールド座標でチャートの幅と高さを取得します。
• ワールド座標の可視領域のサイズ（幅と高さ）を取得します。 これを行うには、コンポーネントの画面の幅と高さをスケーリング係数で除算します（世界から画面座標を取得するには、スケーリング係数を掛けます）。
• スクロールバースライダーの最大値と幅は、ワールド座標の対応する値にSCROLL_FACTOR係数を掛けた値に等しく設定されます。

ユーザーの利便性のために、画像の縮尺（および表示領域のサイズ）を変更するときのスクロールバースライダーの幅が正しく変更されることが非常に重要です。 このアニメーションでは、スクロールバースライダーのサイズの変化と、画像が全体に収まり始めた瞬間の消失に注意してください。







SCROLL_FACTORによる乗算が必要なのは、スクロールバーで受け入れられる値が整数であり、思い出すようにワールド座標がdouble型であるためです。 したがって、大幅に増加すると、スクロールバーの動きの「不連続性」が目立ちやすくなり、SCROLL_FACTORファクターを使用して、実際にはそれらの整数値を固定小数点値に置き換えます。



チャートの再描画メソッドは、スクロールバーの現在のスケールと位置を正しく考慮しているため、

1. スクロールバーの値の変更を処理するには、canvas.paint（canvas.getGraphics（））を呼び出すだけです（DiagramPanelクラスのscrollBarChange（）メソッドを参照）。
2. Ctrlキーを押さずにマウスホイールイベントを処理すると、
   1. どのスクロールバーがマウスポインターに近いかを判断し、
   2. 対応するスクロールバーの位置を変更し、
   3. canvas.paint（canvas.getGraphics（））の呼び出し（DiagramPanelクラスのcanvasMouseWheel（MouseWheelEvent）メソッドを参照）。

特定の固定点を維持しながらチャートをスケーリングする

この例では、ユーザーは図の縮尺を2つの方法で変更できます。画面上のボタン「ズームイン」および「ズームアウト」をクリックし、Ctrl +マウスホイールの組み合わせを使用します。 いずれの場合でも、これにより、DiagramPanelクラスのsetScale（double s）メソッドが呼び出されます。 しかし、ユーザーにとって快適に見えるようにするには、いくつかのトリックが必要です。



最初に、スケールが取る値に注意を払いましょう。 私たちの長年の経験から、ダイアグラムの最もユーザーフレンドリーな振る舞いは、「ズームイン」ボタンを2回クリックすることでスケールを2倍にすることです。 これは、「ズームイン」/「ズームアウト」ボタンを押すと、現在のスケール値を2の平方根（1.41）で乗算/除算することを意味します。



ユーザーがリストからスケール値を提供される場合、スケールの増加/減少の視覚的な均一性のために、それらは50％、70％、100％、140％、200％の2つの平方根度から選択する必要があります。



一見すると、「Ctrl +マウスホイール」イベントハンドラーのコードは予期しないように見えるかもしれません。

 private static final double WHEEL_FACTOR = 2.8854; // 1/ln(sqrt(2)) setScale(scale * Math.exp(-e.getPreciseWheelRotation() / WHEEL_FACTOR));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どうして出展者がいるのでしょうか？ マウスホイール回転ハンドラーは、ホイールのユーザーによって行われた「クリック」の数を受け取り（「クリック」の小数部分が発行されることもあります）、一般的なルールは同じです。2回クリックすると、画像が2倍になります。 ただし、これは、ホイールの回転角度に応じて、2の平方根の角度としてスケール値を変更する必要があることを意味します。

ホイールターニング	-2	-1	0	1	2
ズーム	0.5	0.7	1.0	1.4	2.0

単純な算術は、これらの計算を指数に減らします。



次に、DiagramPanelクラスのsetScale（double s）メソッドを使用します。



「合理性」の新しいスケールの値を以前にチェックしたメソッドは、

• マウスカーソルの位置を取得し、
• マウスカーソルがCanvasオブジェクト上にある場合、その相対位置を計算します。そうでない場合、Canvasの中央が相対位置と見なされます。
• 新しいスクロールバーの位置を準備し、
• それから（！）チャートを拡大して再描画します。

これらの困難は何のためですか？ これはすべて、ユーザーのスケーリング中に、彼の視線が現在フォーカスされているダイアグラム上のポイントが視覚的に固定されるように行われます。 これが行われない場合、ユーザーは各ズーム後にスクロールバーを「ねじる」必要があります。 ユーザーが画面上のボタンを使用してズームインすると、ダイアグラムの表示領域の中心は静止したままになり、ユーザーがマウスホイールでこれを行うと、カーソルが上にあるポイントは静止したままになります。 次のようになります。

パンモード

この例は、パンモードと、画面上のボタンで切り替えられるオブジェクトの選択という2つのモードで動作します。 パンモードでは、左ボタンを押したままマウスを動かすと、チャートの表示領域全体が移動します。 パンモードの最も広く知られている例は、もちろん、Adobe Acrobat ReaderでPDFファイルを表示するための対応するモードです。



左ボタンが押された状態でのマウスの動きは、canvasMouseDraggedメソッドで処理されます。パンモードでは、マウスカーソルの初期位置に対するスクロールバーの位置を調整するだけで十分です。

 if (panningMode) { hsb.setValue(round((startPoint.x - cursorPos.x / scale) * SCROLL_FACTOR)); vsb.setValue(round((startPoint.y - cursorPos.y / scale) * SCROLL_FACTOR)); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すでに実装されている機械は、正しい方法で画像を再描画します。

オブジェクト選択モード

オブジェクトを選択するメカニズムに関連付けられているロジックは多少異なるため、便宜上、DiagramPanelクラスのネストされたクラスSelectionManagerで強調表示されています。 ArrayList項目のフィールドに、このクラスは現在選択されているすべてのオブジェクトを格納します。 彼は、Shiftキーでオブジェクトを「クリック」し、「なげなわ」を使用してオブジェクトを選択し、ドラッグします。 これはすべて、説明と実装の両方で非常に複雑です。 ただし、 有限状態マシンの概念は、それをすばやく理解し、すべてを実現するのに役立ちます。 （ステートマシンはGoFデザインパターンのリストに含まれておらず、限られたクラスのタスクにのみ適用できますが、一部のタスクを簡素化する利便性と能力により、別の非常に便利で標準化されたデザインパターンとして扱うことができます。）



オブジェクトを選択するメカニズムの観点から、ダイアグラム上でのマウスカーソルの移動は、DiagramPanel.State列挙の要素に対応するオートマトンの3つの状態のいずれかで発生します。

1. マウスの左ボタンが押されていない-初期状態（選択中）。 Shiftキーを押しながら複数のオブジェクトを選択します。
2. マウスの左ボタンを押した-2つのサブケース：
   
   
   1. 選択したオブジェクトのグループを移動します（ドラッグ）。
   2. 長方形の投げ縄（LASSO）が描画されます。
   
   
   

SelectionManagerクラスを実装するとき、紙に次の状態と遷移の図のようなものをスケッチしました。







このスキームは、有限状態マシンを実装するのと同じ方法でコードに変換できます。



長方形のなげなわを描画するには、別のDiagramObjectの子孫であるDiagramPanel.Lassoクラスを使用します。 他のレンダラーとは異なり、チャートに属していないため描画されませんが、強調表示する四角形を描画する必要があるときにDiagramPanelクラスによって作成されます。 マウスカーソルに対応する必要があるため、グラフィックスコンテキストのXORモードを使用してinternalDrawSelectionメソッドに表示されます。







長方形は左上隅から描画され、「投げ縄」の開始点は任意のコーナーにあることに注意してください（アニメーションを参照）。したがって、この長方形を描画するには、最初にLULを決定する必要があります。

  int x0 = dX > 0 ? startPoint.x : startPoint.x + dX; int y0 = dY > 0 ? startPoint.y : startPoint.y + dY; g2.drawRect(x0, y0, Math.abs(dX), Math.abs(dY));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトのグループオフセット。 元に戻すとの相互作用

オブジェクトのグループの移動が完了したら、ユーザーはマウスの左ボタンを離します。 システムで何が起こっていますか？ 理論的には、選択に該当するオブジェクトを調べて、ユーザーがそれらを移動したことを「伝える」だけで十分です。 ただし、すべてがそれほど簡単なわけではありません。

  if (commandManager != null) commandManager.beginMacro("drag & drop"); for (DiagramObject i : items) { DiagramObject curItem = i.getParent(); while (curItem != null && !items.contains(curItem)) { curItem = curItem.getParent(); } if (curItem == null) i.drop(dX, dY); } if (commandManager != null) commandManager.endMacro();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

覚えているように、オブジェクトは「独立」および「半独立」です。 親と半独立オブジェクト（たとえば、アクターとその上の署名）が同時に選択範囲に入る場合、親オブジェクトのみを移動する必要があります：それに依存するオブジェクトは「追従」します。



そのため、ループと共に依存オブジェクトが親とともに選択範囲に含まれる場合、依存オブジェクトを除外します。適切なオブジェクトについてのみ、画面座標のオブジェクトのオフセットをオブジェクト自体に転送するdrop（dX、dY）メソッドを呼び出します。 DiagramObjectは、「画面」オフセットを「世界」に再計算し、その仮想メソッドinternalDropを呼び出します。この実装は、継承のレベルでDiagramObjectが「マウスドラッグ」イベントをトリガーし、データモデルオブジェクトの内部状態を変更します。



そして、なぜcommandManager.beginMacro / endMacroへの呼び出しが必要なのですか？



システムが元に戻す/やり直し機能を実装している場合は、オブジェクトのグループドラッグをマクロとして指定する必要があります。 これが行われず、ユーザーがドラッグ操作をキャンセルしたい場合、一度に移動されたオブジェクトの数だけ元に戻す（）ボタンをクリックする必要があります。 このすべての詳細については、元に戻すとやり直しの実装に関する私の記事を参照してください。

おわりに

これで、例の準備ができました。 比較的少量のコードで、インタラクティブなダイアグラムを表示および編集したいユーザー向けのすべてのアメニティを備え、実際の問題を解決する実際のアプリケーションに埋め込むための十分な準備が整った、完全に機能するソリューションを得ました。



CASE-toolsの流行の時代が長く過ぎているのは残念です。そのようなスキルがあれば、Rational Roseの危険な代替手段を作成できます:-)



この記事の例の完全なソースコードは、Mavenプロジェクトの形式でhttps://github.com/inponomarev/graphexampleからダウンロードできます 。



長年にわたり、このフレームワークを使用して、ポートフォリオマトリックス、ガントチャート、法人間の関係図、無線機器の方位角周波数図、プラント間の接続図を作成しました。



他のプロジェクトで使用する場合、このコードはGPLライセンスの下でのみ利用可能です。



著者は、 ShareXシステムの作成者に感謝しています。このシステムを使用して、記事のアニメーションGIFイラストが作成されました。