問題タブ [jsplumb]

エンドポイントアンカーをjsPlumbコンテナに動的に追加する方法を見つけようとしています。

ソースエンドポイントを左側に、ターゲットエンドポイントを右側にのみ配置したいと思います。

問題は、私が今しているように、いくつかのハックに頼らなければ、そうする方法を見つけることができなかったということです。

jsPlumbは連続アンカーをサポートしていますが、個々のアンカーの位置は、コネクタ間の方向と連続アンカーの数に基づいて再計算されます。これは、ソースエンドポイントとターゲットエンドポイントの両方がコンテナーの同じ側を共有している可能性があることを意味します。これは避けたいことです。

これが私が思いついたjsFiddlerコードです

これは、アンカー位置を自分でハッキングして再計算するために使用しているコードの一部です（[追加]ボタンがクリックされた場合）。バグのある結果がいくつかあります:(

上の画像でわかるように、左側にはソースエンドポイント（ドット）のみがあり、右側（ボックス）にはターゲットエンドポイントのみがあります。新しいエンドポイントが追加されると、アンカーは片側のアンカーの数に基づいて再計算されます。

これは機能しますが、まだバグがあります。コンテナを移動したときにのみ位置が更新され、コンテナ間の接続も正しくありません。

私が欲しいのは、それが正しく機能し、アイテムを正しく接続する方法です（できれば、ハッキングに頼らずに正しいjsPlumbコードを使用します）

特定の jsPlumb コネクタを選択する方法がわかりません。ソースまたはターゲットに関連するすべてのコネクタを選択できることはわかっていますが、同じソースとターゲットの間で複数のコネクタを使用することがよくあるため、その場合に特定のコネクタを選択できる方法がわかりません。

私の具体的なユースケースは次のとおりです。

ユーザーがコネクタをクリックすると、接続を編集できるダイアログが表示されます。(つまり、ラベル名を設定し、接続を削除します)。現在、ラベルを設定したり、接続を削除したりすると、ダイアグラム内のすべてを切り離してから、すべてを再描画する必要があります。この方法は機能します。変更された 1 つの接続を切り離すか、そのラベルを変更するだけのほうがきれいに見えます。

アイデア？

jsPlumbを使用して、クイズの質問と回答を結び付けようとしています。この作業のほとんどは、エンドポイントから別のエンドポイントにドラッグするのではなく、質問をクリックしてから回答をクリックできるようにすることを期待しています。これは、タッチ デバイスでのドラッグが面倒だからです。これは可能ですか？

これがドラッグが機能している私のjsbinです

これが私が使用しているjqueryです。

私は中規模のプロジェクトに jsPlumb を使用しています。ドキュメンテーションは説明がしっかりしているという点では薄いですが、なんとかプロジェクトを完了し、配信する準備が整いました。

納車直前に、接続線を曲線ではなく真っ直ぐにしてほしいと頼まれました。これは、jsPlumb connect メソッドに次のようなキーワードを追加するのと同じくらい簡単だと思っていましたjsPlumb.connect({ connector: 'Straight'... })。だから問題は何ですか？

私が取り組んでいるこのプロジェクトでは、ユーザーが接続線を「選択」できるようにして、「削除」ボタンを押して選択した接続をクリアできるようにする必要があります。次のようにjsPlumb のsetPaintStyle()メソッドを呼び出して、ユーザーが接続を選択できるようにしました。

これは、線が曲がっている場合にのみ期待どおりに機能します ( jsPlumb デフォルト)。

ただし、メソッドのconnectorオプションが"Straight"connect()に変更された場合、垂直な接続線 (端点が互いに向かい合っている) は、クリックすると単純に消えます。端点が互いに直接向かい合っていない残りの直線には、この問題はありません。

コネクタ オプションを完全に削除するか、その値を「Bezier」に設定するかsetPaintStyle()、オプションが「Straight」に設定されているときにメソッドを呼び出さないと、クリックされた線は本来の位置に留まります。

以下は jsBin の例です: jsPlumb setPaintStyle() with Straight lines bug

最初は、これは私のアプリケーションのバグだと思っていましたが、多くの時間を費やした後、setPaintStyle() メソッドまで問題を突き止めました。これは jsPlumb のバグであると確信していますが、完全にはわかりません。この時点で非常にイライラします。なぜなら、プロジェクトの提供を妨げているのは、ストロークの色を赤に変更する機能だけだからです。この単純なタスクを直線で完了することができれば、前進できます。

私は自分で SVG パス ノードをターゲットにしてストロークの色を変更することを検討しましたが、jsPlumb は IE8 の VML を使用するため ( ie8 はこのプロジェクトの要件です)、それができるかどうかはわかりません。助言がありますか？

jsPlumbとjQueryEasyUIで実際の問題が発生しました。

ここで何が起こりますか。EasyUIを使用しているWebサイトがあり、それにjsPlumb接続を追加しようとしましたが、この接続が希望どおりに動作していません。

jsPlumbのみを使用してデモを準備しましたが、機能しています。しかし、既存のサイトに追加すると、接続が機能しません。

紛争がどこにあるかを調査した後、私はこれに行き着きました：

EasyUIをロードしない限り、jsPlumbは機能します。EasyUIをロードした後：

• ソースエンドポイントをドラッグして新しい接続を作成できません（エンドポイントをドラッグしましたが、新しい接続が作成されました）
• エンドポイントは、それらが属するdivには従いません（マウスでポイントすると、エンドポイントは正しく配置されます）

jsFiddleを使用して2つのデモを準備し、意味を示します。この2つのサンプルが異なるのは、jquery.easyuiの外部リソースだけだと思います。

• 作業中のjsPlumbフルスクリーン結果
• 動作しない：フルスクリーンの結果

どうすればこれを解決できますか？たぶんあなたの何人かはどこが対立しているのか知っています。私のサイトは、この時点でEasyUIを他のものに変更することになっています。これほど強力なツールキットが見つからないため、jsPlumbを使用したいと思います。

編集：

提案されたように、ドラッグ可能をオーバーライドしようとしましたが、部分的には機能しますが、希望どおりには機能しません。

部分的に：

• エンドポイントはドラッグできなくなりました-それは良いことです、
• しかし、彼らは新しい接続を作成しません、それは悪いことです。
• それらは、接続されているウィンドウには従いません。

さらに今、私は今、そのEasyUIがドラッグ可能なjQueryをオーバーライドし、これがこの奇妙な（私にとって）振る舞いを引き起こします。悲しいことに、ドラッグ可能なメソッドを元のjQueryメソッドにすることに問題があります...だから、私の問題に対する他の解決策を楽しみにしています

編集：EasyUIとその動作でドラッグ可能およびドロップ可能オーバーライドに関連するすべてを削除します。問題は、easyuiスクリプトではなくプログラムでこれを行う方法です。誰かが新しいバージョンに更新し、すべてが機能しなくなるためです...

単純なことをするためだけにjsplumbsに苦労しています。divを1本の直線で接続しているだけですが、ウィンドウのサイズを変更するときに線を再描画するにはどうすればよいですか？したがって、それは常にdivの中心に従います。z-indexを使用して行をdivの下に配置できますか？1つのdivを他の複数のdivに接続する必要がある場合、1つのdivから複数の線を描画するための最良のアプローチは何ですか？

これがこれまでの私のコードです：

http://jsbin.com/esuvuw/1/edit

ご協力いただきありがとうございます

私の英語でごめんなさい。

jsPlumbで図を描き、キャプチャした画像をエクスポートしたい。

Jsplumb は、次のように svg でレンダリングされます。

これをキャンバスに変換したい（これは html2canvas で画像に変換できます-私はこの方法を試します：Google docs）または画像に直接変換します。jsPlumb は、ファイルではなく html で SVG を生成するため、svgeezyを使用できません。canvg を使用しようとしましたが、できません (不適切なドキュメント)。

クライアント側のソリューションか、より簡単なサーバー側のソリューションが必要です。

jsPlumb のサンプル コード: http://jsfiddle.net/WRUra/3/ div1 を div2 または div3 コンテナーに接続し、コネクタ要素を svg でレンダリングするだけです。

よろしく、 ゼルボ

最初に、私は（初めて）jsPlumbを試しています。jsPlumb のドキュメントやグーグルで次のことを見つけることができなかったようで、今はぐるぐる回っているので、先に進んで質問する時が来ているに違いありません: 基本的に、要素を相対的に配置して jsPlumb で動作させることはできますか?

例：以下は完全に機能します

しかし、ボックスの「位置: 絶対」を「位置: 相対」に変更すると、動作が不安定になります (特に、現在のビューを超えてボックスをドラッグする場合)。jsPlumb は絶対配置要素のみを必要としますか? 要素を相対的に配置して初期化したい場合はどうなりますか? この（一種の）質問が尋ねられた場合、またはどこかのドキュメントに記載されている場合は申し訳ありませんが、見つかりませんでした。

jsPlumb（jquery付き）を使って家系図型のプログラムを作りたいです。ノードをドラッグ可能にしたいのですが、jsPlumb がそれを実行できることを知っています。ただし、ノードをドラッグして再配置した後、ユーザーが変更を保存できるようにしたいと思います。正確なレイアウトが保存されます。各要素の座標を取得してデータベースに保存し、そのデータを使用してページを再作成する必要があります。これを最も効率的な方法で行うにはどうすればよいですか?