ウェブ

トポロジエディタ-jsplumb接続



Topology Editor Jsplumb Connection



インストールと関連する構成を理解したら、接続を開始します。

Note: The following code all uses jsPlumb to call the api. In the development process, it is better to use the getInstance method mentioned above to generate a separate instance of jsPlumb to call the api.



プログラムによる接続
jsPlumb.connect({source:'element1', target:'element2'})

'element1'から 'element2'への接続を作成しました。 jsPlumb.connectメソッドのパラメーターは、ソースエンドポイント、ターゲットエンドポイント、アンカーポイント、エンドポイントスタイルなどを設定できます。設定されていない場合、デフォルト値が表示されます。

  • エンドポイント：デフォルトは「ドット」、半径は10、塗りつぶしの色は「＃456」です。
  • アンカー：デフォルトは下です
  • コネクタ：デフォルト値は「ベジェ」コネクタ、線幅8px、色は「＃456」です。

したがって、この呼び出しのレンダリング効果は次のとおりです。
「element1」の下部中央から「element2」の下部中央までの色「＃456」の8pxベジェ。各エンドポイントは半径10pxのドットエンドポイントです。色は「＃456」です。



いくつかの構成を追加します。

jsPlumb.connect({ source:'element1', target:'element2', anchors:['Right', 'Left' ], endpoint:'Rectangle', endpointStyle:{ fill: 'yellow' } })
接続タイプ

接続にマウスを置いたり、接続をクリックしたりしたときに、接続のスタイルを変更したい場合は、接続タイプを設定することで実現できます。
エンドポイントまたは接続には、0個以上のタイプを割り当てることができ、割り当て順に可能な限り細かくマージされます。サポートされているAPI：

  • hasType
  • addType
  • removeType
  • toggleType
  • setType
  • clearTypes

（1）[接続]をクリックしたときに、接続例で提供されているスタイルを設定します。



jsPlumb.registerConnectionType('example', { paintStyle:{ stroke:'blue', strokeWidth:5 }, hoverPaintStyle:{ stroke:'red', strokeWidth:7 } }) var c = jsPlumb.connect({ source:'someDiv', target:'someOtherDiv' }) c.bind('click', function() { c.setType('example') })

（2）接続をクリックするときに接続スタイルを切り替えます。

jsPlumb.registerConnectionTypes({ 'basic': { paintStyle:{ stroke:'blue', strokeWidth:5 }, hoverPaintStyle:{ stroke:'red', strokeWidth:7 }, cssClass:'connector-normal' }, 'selected':{ paintStyle:{ stroke:'red', strokeWidth:5 }, hoverPaintStyle:{ strokeWidth: 7 }, cssClass:'connector-selected' } }) var c = jsPlumb.connect({ source:'someDiv', target:'someOtherDiv', type:'basic' }) c.bind('click', function() { c.toggleType('selected') })

（3）完全なAPIの例：

jsPlumb.registerConnectionTypes({ 'foo':{ paintStyle:{ stroke:'yellow', strokeWidth:5, cssClass:'foo' } }, 'bar':{ paintStyle:{ stroke:'blue', strokeWidth:10 } }, 'baz':{ paintStyle:{ stroke:'green', strokeWidth:1, cssClass:'${clazz}' } }, 'boz':{ paintStyle: { stroke:'${color}', strokeWidth:'${width}' } } }) var c = jsPlumb.connect({ source:'someDiv', target:'someOtherDiv', type:'foo' }) // see what types the connection has. console.log(c.hasType('foo')) // -> true console.log(c.hasType('bar')) // -> false // add type 'bar' c.addType('bar') // toggle both types (they will be removed in this case) c.toggleType('foo bar') // toggle them back c.toggleType('foo bar') // getType returns a list of current types. console.log(c.getType()) // -> [ 'foo', 'bar' ] // set type to be 'baz' only c.setType('baz') // add foo and bar back in c.addType('foo bar') // remove baz and bar c.removeType('baz bar') // what are we left with? good old foo. console.log(c.getType()) // -> [ 'foo' ] // now let's add 'boz', a parameterized type c.addType('boz', { color:'#456', width:35 }) console.log(c.getType()) // -> [ 'foo', 'boz' ] // now clear all types c.clearTypes() console.log(c.getType()) // -> [ ]

Note: Each method except hasType can be processed with a space-separated list of types.

（4）接続タイプオブジェクトでサポートされているパラメータ
接続タイプは、接続のすべてのパラメーターをサポートしているわけではありません。以下は、接続タイプオブジェクトでサポートされている属性のリストです。

  • anchor：接続の両端
  • anchors：接続の両端ごと
  • detachable：マウスで接続を解除できますか？
  • paintStyle：
  • hoverPaintStyle：
  • scope：
  • cssClass：コネクタ要素を設定するためのクラス
  • parameters：-パラメータを使用してタイプを追加/設定すると、同じキーを持つ既存のパラメータが上書きされます。パラメータを使用してタイプを削除しても、そのパラメータはコネクタから削除されません
  • overlays：-複数のタイプがコネクタに適用されると、さまざまなタイプにわたって定義されたすべてのオーバーレイの和集合が取得されます。 jsPlumb.connectを使用してワイヤーを作成し、「type」を指定する場合、「addType」を呼び出すのと同じです。これにより、指定された他の型定義のセット型とオーバーレイコンストラクターが取得されます。
  • endpoint
Delete node
  • jsPlumb.remove
    DOMから要素を削除し、要素に関連付けられている接続とエンドポイントも削除されます。
var conn = jsPlumb.connect({source:'element1', target:'element2'}) jsPlumb.remove('element1')

* jsPlumb.empty
要素の下にあるすべての子要素と、子要素に関連付けられている接続とエンドポイントを削除します

  • One
var conn = jsPlumb.connect({source:'one', target:'someOtherElement'}) ... jsPlumb.empty('list')

Note: Each method except hasType can be processed with a space-separated list of types.

エンドポイントタイプ

エンドポイントの作成時に、プログラムで1つ以上のタイプをエンドポイントに割り当てることができます。
エンドポイントと接続タイプの唯一の実際の違いは、許可されるパラメーターです。エンドポイントリスト：

  • paintStyle
  • endpointStyle：paintStyleがこのオプションを提供する場合、それが優先されます
  • hoverPaintStyle
  • endpointHoverStyle：hoverPaintStyleがこのアイテムを提供する場合、それが優先されます
  • MaxConnections
  • connectorStyle：このエンドポイントを使用するコネクタのスタイル
  • connectorHoverStyle：このエンドポイントからのホバー接続の描画スタイル
  • connector：次のようなコネクタ定義：StateMachineまたは['フローチャート'、{スタブ：50}]
  • connectionType：これにより、このエンドポイントから確立された接続の接続のタイプを指定できます。
  • scope：エンドポイントは1つの範囲のみをサポートします。したがって、複数の型が適用される場合、スコープは型を定義する最後の型から取得されます。
  • cssClass：有線CSSクラスと同じ
  • parameters：パラメータを使用してタイプを追加/設定すると、同じキーを持つ既存のパラメータが上書きされます。パラメータを使用してタイプを削除しても、そのパラメータはコネクタから削除されません。
  • overlays：複数のタイプがエンドポイントに適用されると、さまざまなタイプにわたって定義されたすべてのオーバーレイの和集合が取得されます。
    Note: The parameters passed to Connections are only valid for the source endpoint, and the target endpoint does not take effect.
    エンドポイントタイプの使用例：
jsPlumb.registerEndpointTypes({ 'basic':{ paintStyle:{fill:'blue'} }, 'selected':{ paintStyle:{fill:'red'} } }) var e = jsPlumb.addEndpoint('someElement', { anchor:'TopMiddle', type:'basic' }) e.bind('click', function() { e.toggleType('selected') })

Note: Does not affect existing Connections, only the Connections created after setting a new type on the endpoint。

接続を削除する
単一の接続を削除します
var conn = jsPlumb.connect({source:'element1', target:'element2'}) jsPlumb.detach(conn)

jsPlumb.detachを呼び出して接続を削除しても、接続の確立方法によっては、接続に関連付けられているエンドポイントは削除されません。
次の場合、エンドポイントは削除されます。

  • deleteEndpointsOnDetachを設定せずにjsPlumb.connectを使用して接続を作成します：false
  • 接続は、ユーザーが構成された要素上でマウスによって作成されます。要素makeSourceがdeleteEndpointsOnDetach：falseに設定されていません。

次の場合、エンドポイントは削除されません。

  • jsPlumb.connectを使用して接続を作成し、deleteEndpointsOnDetachを設定します：false
  • エンドポイントはaddEndpointによって作成され、接続はユーザーがマウスを介して作成します。
  • 接続は、ユーザーが構成された要素上でマウスによって作成されます。要素makeSourceはdeleteEndpointsOnDetachを設定します：false
1つの要素のすべての接続を削除します
jsPlumb.deleteConnectionsForElement(el, [params])

el可能性：

  • 要素IDを表す文字列
  • DOM要素
  • 単一の要素を表すセレクター

パラメータはオプションであり、次のものが含まれる場合があります。
fireEvent-切断イベントをトリガーするかどうか。デフォルトはtrueです。
Note: The endpoint is deleted as above

すべての接続を接続します
jsPlumb.detachEveryConnection()

Note: The endpoint is deleted as above

エンドポイントを削除する
単一のエンドポイントを削除します
var ep = jsPlumb.addEndpoint(someElement, { ... }) ... jsPlumb.deleteEndpoint(ep)

ep可能性：

  • エンドポイントのUUIDを表す文字列（エンドポイントを追加するときに、そのエンドポイントにuuidを設定できます）
  • 実際のエンドポイントオブジェクト（上に表示）
すべてのエンドポイントを削除します
jsPlumb.deleteEveryEndpoint()

Note: This method will delete all endpoints and all connections

[接続]リストを選択して操作します
エンドポイントリストを選択して操作します

参照：
http://jsplumb.github.io/jsplumb/overlays.html

次へ：トポロジエディタ-jsplumイベント