フローチャートコントロールの組み込みGraphObjectクラスの各インデックスの概要

GoJSは、JavaScriptおよびHTML5 Canvasプログラムでフローチャートを作成し、JavaScript / Canvasプログラムを大幅に簡素化するのに役立つ強力で高速かつ軽量のフローチャートコントロールです。

GoJSの最新バージョンをダウンロードするにはクリックしてください

関連コンテンツの推奨

フローチャート制御GoJSチュートリアル:組み込みGraphObjectクラスの各インデックスの概要(1)

フローチャート制御GoJSチュートリアル:組み込みGraphObjectクラスの各インデックスの概要(2)

fromMaxLinks:番号

このポートによって発行される可能性のあるリンクの最大数を取得または設定します。LinkingBaseTool.isValidFromはこのプロパティを使用します。
値は負でない必要があります。デフォルト値は無限大です。

ノード全体が単一のポートとして機能しない限り、この属性は、portIdがnullではないGraphObjectに設定する必要があります。この場合、この属性はノードに設定する必要があります。

fromShortLength:数値

リンクの端からポートから実際のポートまでの距離を取得または設定します。正の値は、fromEndSegmentLengthまたはLink.fromEndSegmentLengthによって制限されます。負の値を指定すると、リンクがポートに拡張されます。デフォルト値はゼロです。

このプロパティは、太いリンクと鋭い矢印がある場合に役立ちます。通常、リンクShapeは矢印の端まで伸びます。リンクの「形状」が広い場合は、矢印の後ろにそのエッジが表示されます。このプロパティを小さな正の値に設定することにより、リンクの形状を矢印の本体内で終了でき、リンクの終了時に矢印のポイントのみが表示されます。

このプロパティの負の値は、リンクシェイプを引き続きポートに入力する場合にも役立ちます。これは、ポートの一部が透過的であり、リンクがノード上の他のポイントに視覚的に接続されているように見せたい場合などです。

リンクのルートを決定するとき、Link.fromShortLengthの値(NaNでない場合)がこのポートの値よりも優先されます。

この属性の使用方法の例については、リンク接続ポイントを参照してください。

ノード全体が単一のポートとして機能しない限り、この属性は、portIdがnullではないGraphObjectに設定する必要があります。この場合、この属性はノードに設定する必要があります。

fromSpot:スポット

このポートからリンクを接続する場所を取得または設定します。デフォルト値はSpot.Noneです。これは、リンクルーティングがポートの形状を考慮し、最も近いポイントで接続する必要があることを意味します。

値Link.fromSpotは、Spot.Defaultでない場合、リンクのルートを判断するときに、ポートの優先度がこの値よりも高くなります。多くの事前定義されたレイアウトは、Link.fromSpotとLink.toSpotを自動的に設定するため、この属性とポート要素のtoSpotは無視されます。レイアウトによっては、たとえばForceDirectedLayout.setsPortSpots、TreeLayout.setsPortSpot、TreeLayout.setsChildPortSpot、またはLayeredDigraphLayout.setsPortSpotsをfalseに設定することで、この動作を無効にできる場合があります。

この属性の使用方法の例については、リンク接続ポイントを参照してください。

ノード全体が単一のポートとして機能しない限り、この属性は、portIdがnullではないGraphObjectに設定する必要があります。この場合、この属性はノードに設定する必要があります。

高さ:数

このGraphObjectの目的の高さをローカル座標で取得または設定します。これは、必要なサイズの高さコンポーネントを取得または設定するだけです。デフォルト値はNaNです。

minSizeとmaxSizeを設定することで、サイズを制限することもできます。

高さには、スケールや角度による変形は含まれません。また、Shape.strokeWidth(Shapeの場合)によるペンの太さも含まれません。パネルを含むパネルがある場合、パネルが実際のサイズを決定します。

isActionable:ブール値

このプロパティは、このGraphObjectのイベントが他のすべてのイベント(選択を含む)の前に発生するかどうかを決定します。これにより、actionDown、actionMove、actionUp、およびactionCancelイベントが有効になります。これらはすべてActionToolによって処理されます。

オブジェクトが表示されていないか、ピックアップできない場合、マウス/タッチイベントは発生しません。

この属性が使用されることはめったにありません。通常、ボタン、ノブ、またはスライダーとして使用されるオブジェクトを実装する場合にのみ使用されます。デフォルト値はfalseです。

パネルメイン:ブール値

GraphObjectが特定のPanelタイプの「メイン」オブジェクトであるかどうかを取得または設定します。「メイン」オブジェクトを使用するパネルには、Panel.Auto、Panel.Spot、およびPanel.Linkが含まれます。

「メイン」オブジェクトを使用するパネルは、プロパティがtrueに設定されている最初のオブジェクトを使用します。それ以外の場合は、最初のオブジェクトのみを使用します(プロパティが設定されていない場合)。

オブジェクトがパネルの要素になったら、この属性を変更しないでください。

読み取り専用レイヤー:レイヤー| ヌル

この読み取り専用プロパティは、GraphObjectに含まれているレイヤーを返します(存在する場合)。通常のGraphObjectは、レイヤーに直接属することはできません。パーツのみがレイヤーに直接属することができます。

この属性は設定できません。通常、GraphObjectが配置されているレイヤーは、Part.layerNameを設定することで変更できます。関係図にパーツを追加すると、layerNameに基づいて関係図のレイヤーにパーツが自動的に追加されます。

マージン:MarginLike

Panel座標に含まれる、このGraphObjectの周囲の空白領域のサイズ(マージンの形式)を取得または設定します。

負の値は許可されますが、パネル内の隣接するオブジェクトと重複する可能性があります。このプロパティ値の上部、左側、右側、または下部を変更することはできません。マージンを変更する場合は、このプロパティを別のマージンに設定する必要があります。デフォルトのマージンはマージン(0,0,0,0)です。

プロパティセッターは、Marginオブジェクトの代わりに数値を受け入れます。数値Nを指定すると、Margin(N、N、N、N)が使用されます。プロパティゲッターは常にマージンを返します。

maxSize:サイズ

このGraphObjectの最大サイズをコンテナ座標(パネルまたはドキュメント)で取得または設定します。新しい値はすべてサイズタイプである必要があります。NaN値は無限大として扱われます。最大の幅や高さが必要ない場合は、NaNまたはInfinityを使用してください。

この属性値の幅または高さを変更することはできません。maxSizeを変更する場合は、この属性を別のサイズに設定する必要があります。デフォルト値は「無限大×無限大」です。パネルを含むパネルは、オブジェクトの実際のサイズを決定します。

読み取り専用のmeasuredBounds:Rect

この読み取り専用プロパティは、GraphObjectのmeasuredBoundsをコンテナ座標(パネルまたはドキュメント)で返します。これは、境界が除外されている遷移境界を表します。

Rectの属性、つまりこの属性の値を変更してはなりません。

すべての読み取り専用プロパティと同様に、このプロパティをバインディングソースとして使用することはあまり役に立ちません。

minSize:サイズ

このGraphObjectの最小サイズをコンテナ座標(パネルまたはドキュメント)で取得または設定します。新しい値はすべてサイズタイプである必要があります。NaN値は0として扱われます。

この属性値の幅または高さを変更することはできません。minSizeを変更する場合は、この属性を別のサイズに設定する必要があります。デフォルト値はゼロ×ゼロです。パネルを含むパネルは、オブジェクトの実際のサイズを決定します。

mouseDragEnter:function(e:InputEvent、thisObj:GraphObject、prevObj:GraphObject):void | ヌル

DraggingToolのドラッグ中にユーザーが固定オブジェクトにマウスを移動したときに実行される関数を取得または設定します。これにより、ドラッグの位置に応じてドラッグプロセス中にフィードバックを提供できます。

このプロパティ値が関数の場合、InputEventが使用され、このGraphObjectと以前のGraphObjectが呼び出されます。InputEvent.targetObjectは、このオブジェクトを取得するためにマウスがビジュアルツリーをクリックする前にGraphObjectGraphObject.panelが検出されることを規定しています。デフォルトでは、この属性はnullです。

異なるグラフからのドラッグアンドドロップの場合、ターゲットグラフの選択セットはドラッグされる部分ではないことに注意してください。代わりに、ドラッグされる一時的なパーツは、ソースイメージのDraggingTool.copiedPartsにあります。

返し関数数用Diagram.skipsUndoManager调用を一時的にtrueに設定して、GraphObjectsへの変更がUndoManagerに記録されないようにします。DraggingToolはすでにトランザクションを実行しているため、この関数でトランザクションを開始してコミットする必要はありません。この関数を呼び出すと、ダイアグラムはすぐに更新されます。

mouseDragEnterイベントハンドラーの例については、サンプルの組織図エディターのノードテンプレートを参照してください。

mouseDragLeave:function(e:InputEvent、thisObj:GraphObject、nextObj:GraphObject):void | ヌル

DraggingToolのドラッグ中にユーザーが固定オブジェクトからマウスを移動したときに実行される関数を取得または設定します。これにより、ドラッグの位置に応じてドラッグプロセス中にフィードバックを提供できます。

この属性値が関数の場合は、InputEvent、このGraphObject、およびマウスが配置されている新しいGraphObjectを使用します。InputEvent.targetObjectは、GraphObjectのビジュアルツリーを検索する前に、マウスポイントで見つかったGraphObjectを提供します。.panelはこのオブジェクトに到達します。デフォルトでは、この属性はnullです。

異なるグラフからのドラッグアンドドロップの場合、ターゲットグラフの選択セットはドラッグされる部分ではないことに注意してください。代わりに、ドラッグされる一時的なパーツは、ソースイメージのDraggingTool.copiedPartsにあります。

Diagram.skipsUndoManagerを一時的にtrueに設定してこの関数を呼び出し、GraphObjectへの変更がUndoManagerに記録されないようにします。DraggingToolはすでにトランザクションを実行しているため、この関数でトランザクションを開始してコミットする必要はありません。この関数を呼び出すと、グラフはすぐに更新されます。

mouseDragLeaveイベントハンドラーの例については、サンプルの組織図エディターのノードテンプレートを参照してください。

mouseDrop:function(e:InputEvent、thisObj:GraphObject):void | ヌル

DraggingToolがドラッグされたときにユーザーがオブジェクトに選択をドロップしたときに実行される関数を取得または設定します。これにより、オブジェクトがドロップされたときの動作をカスタマイズできます。

このプロパティ値が関数の場合は、InputEvent(このGraphObject)を使用して呼び出します。InputEvent.targetObjectは、このオブジェクトを取得するためにマウスがビジュアルツリーをクリックする前にGraphObjectGraphObject.panelが検出されることを規定しています。この関数はDraggingToolによって実行されるトランザクションで呼び出されるため、実行する必要はありません。デフォルトでは、この属性はnullです。

mouseDropイベントハンドラーの例については、サンプルの組織図エディターのノードテンプレートを参照してください。

mouseEnter:function(e:InputEvent、thisObj:GraphObject、prevObj:GraphObject):void | ヌル

ユーザーがボタンを押さずにオブジェクトにマウスを移動したときに実行される関数を取得または設定します。この属性はToolManagerによって使用されます。

このプロパティ値が関数の場合、InputEventを使用して、マウスが現在ある場所のGraphObjectと、マウスがある場所にある以前のGraphObjectを呼び出します。InputEvent.targetObjectは、オブジェクトに到達するための検索の前にマウスポイントで見つかったGraphObjectによって描画されたGraphObject.panelのビジュアルツリーを提供します。デフォルトでは、この属性はnullです。

Diagram.skipsUndoManagerを一時的にtrueに設定してこの関数を呼び出し、GraphObjectへの変更がUndoManagerに記録されないようにします。この関数では、トランザクションを開始してコミットする必要はありません。この関数を呼び出すと、グラフはすぐに更新されます。

たとえば、ユーザーがノード上でマウスを動かすと、ユーザーがクリックできるボタンを表示したい場合を考えてみます。マウスがノードを離れると、これらのボタンは自動的に消えます。これは、ボタンを押して装飾を表示することで実現できます。

var nodeContextMenu =
$(go.Adornment、 "Spot"、
{background: "transparent"}、//マウスが領域を離れたときの検出に役立ちます
$(go.Placeholder)、
$(go.Panel、 "Vertical"、
{配置:go.Spot.Right、alignmentFocus:go.Spot.Left}、
$( "Button"、
$(go.TextBlock、 "Command 1")、
{ クリック:function(e、obj){ var node = obj。 part.adornedPart; alert( "Command 1 on" + node.data.text); node.removeAdornment( "ContextMenuOver"); } })、$( "Button"、$(go.TextBlock、 "Command 2")、{ クリック:function(e、obj){ var node = obj.part.adornedPart; alert( "Command 2 on" + node.data.text);












node.removeAdornment( "ContextMenuOver");
}
})
));
次に、Nodeの定義で、mouseEnterイベントハンドラーを実装できます
。myDiagram.nodeTemplate=
$(go.Node、
...
{ mouseEnter:function(e 、node){ nodeContextMenu.adornedObject = node; nodeContextMenu.mouseLeave = function(ev、cm){ node.removeAdornment( "ContextMenuOver"); } node.addAdornment( "ContextMenuOver"、nodeContextMenu); } });







また、mouseLeaveイベントハンドラーを自動的に定義する方法にも注意してください。マウスが装飾領域を離れるか、ユーザーがボタンクリックイベントハンドラーを実行すると、コンテキストメニューの装飾が削除されます。

おすすめ

転載: blog.csdn.net/RoffeyYang/article/details/113847310