2

一緒に接続できる複数のボックスがある場合、jsPlumb を使用して UI を構築しています。各ボックスには 1 つのターゲットと 3 つのソースがあり、同じボックス DOM 要素で呼び出される メソッドmakeTargetとメソッドで作成されます。makeSource

jsPlumb.makeTarget($('#box_id'), targetData);
jsPlumb.makeSource($('#box_id'), sourceData1);
jsPlumb.makeSource($('#box_id'), sourceData2);
jsPlumb.makeSource($('#box_id'), sourceData3);

そして、各ソースは、それをボックスの異なる部分に接続するフィルター プロパティによって区別されます。

sourceData1.filter = '.filter_1';
sourceData2.filter = '.filter_2';
sourceData3.filter = '.filter_3';

接続は、あるボックスのソースと別のボックスのターゲットの間でのみ行うことができます。ターゲット アンカーはContinuous.

この配置は、ボックスの操作と接続のドラッグ アンド ドロップに関する限り、私が必要としているものに完全に対応しています。

保存された UI を JSON オブジェクトから再作成したいときに問題が発生します。問題なくボックスの位置を再作成できますが、ボックスで使用可能な 3 つの正しいソースから接続を再作成する方法が見つかりません。

保存した uuid を使用して再接続しようとしましたが、接続が作成される前にエンドポイントがまだ存在しないことが判明しました。私が試したもう 1 つの方法は、ソース ボックス ID とターゲット ボックス ID だけを接続することです。

jsPlumb.connect({ 
    source:"box_id1", 
    target:"box_id2",
});

ただし、これは正しいソースをターゲットに接続することはなく、接続はユーザーが作成したものとまったく同じではありません。接続がソース 1 から開始された場合、この方法では、たとえばソース 3 から開始できます。

基本的に、jsPlumb API を使用してエンドポイントを作成する前に、ソースとターゲットをプログラムで接続することは可能ですか?

これらの状況で接続を再作成することは可能ですか、それとも他の解決策を探す必要がありますか?

ありがとう。

注: UI、その設定、および問題の詳細については、https ://github.com/sporitt/jsPlumb/issues/77 を参照してください。

4

1 に答える 1