問題タブ [jsplumb]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1067 参照

ember.js - Ember.js アプリケーションでの jsPlumb の使用

Ember.jsアプリケーションでjsPlumbを使用する方法を学習しようとしているので、最小限のjsFiddleをまとめて、それらがどのように連携するかを示します。

ここまでの例では、ノードを挿入して jsPlumb に追加しただけです。それらの間のリンクはまだ追加していません。この段階では、ノードはドラッグ可能である必要がありますが、そうではありません。

ブラウザ コンソールに次のエラーが表示されます。

これは、jsPlumb のコードのこの部分を指しています。

Ember.js と統合しない単純な例が期待どおりに機能することがわかります。私が持っているこのバージョンの jsPlumb は、jquery-ui を使用して要素を複製し、ドラッグ アンド ドロップをサポートしていることを知っています。ここの投稿は、Ember の jquery-ui ドラッグ可能機能に問題があることを示しています。ただし、同じ問題が発生しているかどうかはわかりません。それが私が抱えている問題と同じである場合は、そこで提案されたソリューションを私のアプリケーションに実装する方法について助けていただければ幸いです。私は Ember と jsPlumb の両方に慣れていないので、ここで何が起こっているのか、どのような道をたどるのかについて明確なガイダンスをいただければ幸いです。

この例を機能させるにはどうすればよいですか?

0 投票する
3 に答える
2723 参照

javascript - キャンバスのスケーリング jsplumb/fabric.js

私は接続などで状態マシンを生成するjavascriptライブラリ(jsPlumb)を使用しています.

生成されたグラフにズームインおよびズームアウト機能を追加しようとしています。

生成されたコードは次のようなものです。

divラッパー内に多くのキャンバス要素があります。

したがって、これらすべてのキャンバス要素を簡単にスケーリングできるライブラリを見つけようとしています。

Fabric.js は良さそうに聞こえますが、キャンバス自体に変換を適用するために既存のキャンバスを「ロード」する方法は見つかりませんでしたが、キャンバス内の要素に変換を適用するだけでした。

それができるライブラリを知っている人はいますか?または、ズームイン/ズームアウト機能をjsplumbに追加するために何かをしたことがあるなら、私も嬉しいです! このライブラリは他の多くの便利な機能を提供するため、Fabric.js を使用したソリューションが特に必要です。

ありがとう!

0 投票する
1 に答える
1767 参照

jsplumb - jsplumb ライブラリの getconnection 関数が値を返さない

こんにちは、接続を確立するために JS プラム ライブラリで作業しています。ある時点で立ち往生しており、専門家の助けが必要です。これが私のシナリオです。

私は多くの接続を持っています。私が望むのは、1 つの接続をクリックすると、その接続が選択されていることを示す特定のラベルが表示されることです。1 つクリックすると、以前にクリックした他の接続が消え、新しい接続が選択されます。

私がこれまでやってきたことは、

ここでの問題は、接続スコープが「アクティブ」に設定されていることです

jsPlumbInst.getConnections({scope:"active"}) は何も返しません。

それで、私が正しいことをしているかどうか、誰かが親切に私を導くことができますか? または、これを達成する他の方法はありますか?

0 投票する
2 に答える
17868 参照

javascript - シンプルだが便利な jquery.JsPlumb の例はありますか?

先週、私はいくつかのグラフ視覚化 javascript-library を探していましたが、私が見た例から判断すると、これまでに見た中で最も見栄えが良く、最も高度なライブラリであるjsPlumbに出くわしました。ドキュメントは非常に大きいですが、最も重要なタスクを実際に実行する方法を理解できないため、あまり役に立ちません。

私の質問のリストは次のとおりです。

  • DOM-Tree の定義済み要素を使用するようにグラフに指示するにはどうすればよいですか?
  • これらの要素のどの部分が表示されますか?
  • 接続を作成するのは簡単ですが、アライメントを定義するにはどうすればよいですか?

これらの質問は残っていますが、いくつかの例がありますが、単純すぎて役に立たないか (例 1 を参照)、非常に複雑で取得することさえできます (ダウンロードは問題ではありませんが、ライブラリをいじる前に本当にすべてを分析したい...)コードは少なくとも私には不可能です(https://github.com/sporitt/jsPlumb/tree/master/demoを参照)。

例 1

その結果、 例 1 のスクリーンショット

私の質問に答える例を誰か教えてもらえますか?

前もって感謝します。

0 投票する
1 に答える
115 参照

javascript - ネストされた関数呼び出しから変数を渡す方法

ネストされた関数呼び出しを行っていますが、同時に変数をネストされた関数に渡す必要があります。これが私がやろうとしていることです

上記のコードは、次の理由で機能しません。

私がやっていることを渡します。始まりを知る必要があるので、それが必要です。そのインデックス参照と行を削除すると

それはうまくいきますが、私は本当にそれを含める必要があります. これを行う方法はありますか??

助けてくれてありがとう!

0 投票する
2 に答える
2979 参照

javascript - jsPlumb のウィンドウ/ダイアログをランダムに配置する

jsPlumb で作成されたすべてのダイアログ/ウィンドウをランダムに配置する方法はありますか?

これらのダイアログで表現したいアイテムがたくさんある場合、問題は、それらに位置を与えて画面に配置する必要があることですが、アイテムがたくさんあるので、面倒な仕事になることは言うまでもありませんアイテムのリストは拡大/縮小する可能性があります。

jsPlumb デモを見ると、「上」と「左」の CSS プロパティを使用してダイアログに特定の位置が与えられています。

これらのダイアログを画面上にランダムに配置する方法はありますが、それらの間に一定の距離がありますか? ダイアログを画面上に配置する方法があれば、矢印とダイアログの間の交差が最小限に抑えられます。

編集:

正確には最良の解決策ではありませんが、かなり良い解決策です:

http://forums.lndb.info/showthread.php?tid=43

https://github.com/lndb/jsPlumb_Liviz.js (ここには 2 つのデモが用意されています)

http://lndb.info/light_novel/diagram/Hidan_no_Aria

0 投票する
1 に答える
1804 参照

javascript - jsPlumbとjquery-uiを使用した行の誤ったオフセット

jsPlumbを使用してdivを接続したい。スタイルを使用した場合は機能しますが、アコーディオンなどのjquery-ui装飾を使用した場合、最終行のオフセットが正しくありません。

コード:

生産: コードの結果

望ましい効果(アコーディオン装飾なし)は次のとおりです。 望ましい結果

私が間違っていることは何ですか?アコーディオン装飾の前に線が引かれているようです。

0 投票する
1 に答える
2572 参照

jsplumb - jsPlumbは要素の接続を削除します

私はjsPlumbの問題に取り組んでいます。プログラムですべての要素の接続を削除しようとすると、Uncaught TypeErrorが発生します:undefinedのプロパティ'left'を読み取れません

いくつかの「ノード」(html要素)があり、それぞれに1つの入力エンドポイント(受け入れるエンドポイント)とnの出力エンドポイントがあります。各ノードの背後には、javascriptオブジェクトもあります。ソフトウェアに「選択済み」状態があります。ユーザーは複数のノードを選択でき、オブジェクトはselectedと呼ばれる配列にプッシュされます。削除キーのキーリスナーがあります。キーを押すと、選択したノードをループし、ノードを削除してエンドポイントを削除します。これは、接続がない場合はうまく機能しますが、接続がある場合はエラーになります。

出力エンドポイントは、メインノードの子HTML要素にアタッチされます…</ p>

多くのことを行うコードはたくさんありますが、関連する部分を共有しようと思います。

これがセットアップでした。これが私が削除する方法です

0 投票する
1 に答える
152 参照

javascript - JavaScriptでの参照渡し

こんにちは、javascript と jsplumb ライブラリを使用しています。問題が発生しており、専門家の助けが必要です。

これが私のシナリオです。

接続を作成するためにjsplumbライブラリを使用している機能があります。

しかし、問題は、その関数の外側の関数conで作成された同じものにアクセスしたいので、私がしたことはcreatlink()

JS オブジェクトでは、out param または参照渡しとして渡すことができることを読みました。

したがって、別のコピーが作成されるため、関数を返したくありません。

ありがとうございました。

0 投票する
1 に答える
361 参照

javascript - JavaScriptでオーバーレイを追加する

フローチャットを作成するためにjsplumbを使用しています。フローチャートの作成が終了し、ユーザーによって承認されたら、作成した構造を編集不可にします。このために、フローチャートを保持する親に過度に追加しましたが、フローチャート上でマウスクリックが引き続き発生しています。

方法-オーバーレイを追加した後、これらのコンポーネントでマウスクリックが発生しないようにします。

ありがとうございました