リンク外観の定義

Diagram コンポーネントは、項目間の関係を表す Link クラスのインスタンスを生成します。IBM® ILOG®Dojo Diagrammer では、リンクのグラフィック表現をカスタマイズできる組み込みのスタイリング・メカニズムを提供しています。

リンク・テンプレートの定義

リンク・テンプレートを定義するには、次のようにします。
  • linkTemplate プロパティーを使用します。その値は、JSON ストリング、または GFX 形状の階層としてノードを記述するオブジェクトです。 これは、nodeTemplate プロパティーと同じルールに従います。 詳しくは、ノード外観の定義を参照してください。
    diagram.Link は、3 つの dojox.gfx.Shape サブコンポーネントで構成されます。
    • メインパス (必須)
    • 開始矢印 (オプション)
    • 終了矢印 (オプション)
    リンク・テンプレートは、この構造に従う必要があります。リンク・テンプレート内の各形状には、各形状が対応するサブコンポーネントを指定する dojoAttachPoint プロパティーが指定された特定の ID がなければなりません。サブコンポーネントに応じて、 dojoAttachPoint プロパティーは、 _path_startArrow、または _endArrow のいずれかのサブコンポーネント仕様になっている必要があります。
以下に示すのは、簡略化したデフォルト・リンク・テンプレートです (簡便化のため、バインディングは取り外されています)。
[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }]
      },
      fill: '#00'
   }
]
以下のコードでは、開始矢印として円が、リンク・パスおよび終了矢印として折れ線が設定されたリンクを定義しています。
var linkTemplate = "[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_startArrow',
      shape: {
         type: 'circle',
         r: 4
      },
      fill: 'white',
      stroke: 'black'
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }, {
            x: -8,
            y: 4
         }]
      },
      fill: 'black'
   }
]";

リンク・スタイルの定義

リンク・スタイルをカスタマイズするには、次のようにします。
  • linkStyle プロパティーを使用します。その値は、設定する対応リンク・プロパティーの定義を含む簡潔な JavaScript オブジェクトになります。 これは、プロパティーに setter が存在し、その名前が Java 命名規則に従っている場合 (a_property というプロパティーの場合は setter setAProperty が存在していなければなりません)、 あらゆるリンク・プロパティーに対して有効です。
    リンク・クラスは、linkStyle プロパティーが設定されたリンクの外観の変更に使用できる以下のプロパティーを定義します。
    プロパティー タイプ 説明
    strokeColor ストリングまたは dojo.Color
    リンクの描線色を設定します。
    strokeWidth int
    リンクの描線幅を設定します。
    selectedStrokeColor ストリングまたは dojo.Color
    選択された場合のリンクの描線色を設定します。
    selectedStrokeWidth int
    選択された場合のリンクの描線幅を設定します。
    startArrowVisible ブール値
    開始矢印が表示されるかどうかを設定します。
    startArrowFill dojox.gfx.fill
    開始矢印の塗りつぶしを設定します。
    startArrowStroke dojox.gfx.stroke
    開始矢印の描線を設定します。
    endArrowVisible ブール値
    終了矢印が表示されるかどうかを設定します。
    endArrowFill dojox.gfx.fill
    終了矢印の塗りつぶしを設定します。
    endArrowStroke dojox.gfx.stroke
    終了矢印の描線を設定します。
    例えば、以下のコードはリンクの描線幅を 4 に設定します。
    <div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' style="width:900px;height:700px" movableNode="true"
              linkStyle="{strokeWidth:4}">
       </div>

プログラムによるカスタム・リンクの定義

カスタム・リンクを定義するには、次のようにします。
  • このトピックで説明されているメカニズムがリンクをカスタマイズするのに不十分な場合は、 Diagram ウィジェットの onLinkCreated 属性または createLinkFunction 属性を設定します。
    onLinkCreated は、 リンクの作成が完了するたびに呼び出されます。これにより、必要に応じてリンクをカスタマイズできます。 関数は、以下のプロトタイプに準拠している必要があります。
    function linkCreated(link, start, end, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // link: ibm_ilog.diagram.Link: The newly created Link.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    createLinkFunction により、 リンクの作成方法を変更することができます。これは、各リンクを作成するために呼び出され、 以下のプロトタイプに準拠している必要があります。
    function createLink(item, start, end, template, onGraph, diagram){
        // summary: Creates a Link for a given data store item.
        // item: The item contained in the linksStore, or null if the link is not created from a linksStore item.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return link; // ibm_ilog.diagram.Link
    };
    推奨されるテンプレートは、linkTemplate 属性または linkTemplateFunction 属性によって指定されたテンプレートです。 createLinkFunction は、別のテンプレートを使用できます。 カスタム・リンクを作成するには、createLinkFunction で Diagram ウィジェットの createTemplatedShape 関数を呼び出す必要があります。
    以下の例では、MyLink クラスのインスタンス を作成します。これは、ibm_ilog.diagram.Link のサブクラスでなければなりません。
    function createLink(item, start, end, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyLink, template, onGraph, diagram.linkStyle, diagram.linksStore, item);
    };
    createLinkFunction が (link.setStartPort/setEndPort を呼び出して) リンクを開始ノードおよび終了ノードに接続しない場合は、 createLinkFunction が呼び出された後、 Diagram ウィジェットにより自動的に接続されます。 ただし、createLinkFunction は、 例えば接続ポイントをカスタマイズしたり、カスタム・ポートを使用したりするためにリンクを接続することができます。この場合、ウィジェットは、関数により設定されたポートをオーバーライドしません。