Cytoscape.jsでは、ノードを連続レイアウトで移動させないようにするにはどうしたらいいですか？

Question

この質問はUnlock nodes on grab/mousedown event, can not move them immediately in Cytoscape.jsに似ていますが、私には負担してください。私の状況にはしわがあり、受け入れられた答えが私には合わない。私は連続したレイアウトを使いたい。

私はCytoscapeでインタラクティブなグラフエディタを作成しています。私はグラフをd3の力のレイアウトに似た、春に基づくレイアウトで連続的にレイアウトしたいと思っています。ノードをクリックしてドラッグすると、手動でレイアウトを微調整することができます。ノードを離した後、ノードの位置は固定されます。それはもはや力のレイアウトの影響を受けてはいけません。ユーザーが再度移動したりロックを解除するまでは、その位置にとどまるだけです。 。

希望の動作の例については、https://apo.adrian-jagusch.de/#/を参照してください。ツールバーの円または四角形のボタンをクリックし、白い空白の領域をクリックしていくつかのノードを配置します。十字線のボタンをクリックし、ノードをドラッグしてみてください。ドラッグするものは、それらをダブルクリックしてロックを解除するまで移動を停止します。

私は自分のノードがロックされるように物事を設定することができました。私が上記の質問の質問者と共通している問題は、いったんノードがロックされると、ロックが解除されるまで、ノードをクリックしてドラッグすることができなくなるということです。イベントハンドラcy.nodes().on('mousedown', (event) => event.target.unlock())を登録すると、ノードをクリックするとロックが解除されますが、すぐにノードを移動することはできません。私はマウスボタンを離して、ノードがドラッグされる前にもう一度クリックしなければなりません。私は最初のクリックでそれをドラッグできるようにしたい。私はこの問題に対する解決策のカップルと考えられてきた

：

1. だけレイアウト中にノードをロックし、その後それらのロックを解除するmaxkfranzの提案に続いて、私は非連続レイアウトを使用して（オイラーまたはCOSE）を試してみましたユーザーがノードのドラッグを終了したときに起動される「フリー」イベントに応答して、単にそれを再実行します。私はアニメーションを使用しました： "終了"視覚的な移行を提供する。これは私が予想したように動作しますが、見栄えが良くなく、やりとりするのに気に入らないのです。私は本当にレイアウトを継続したい。

2. ユーザーが固定していないノードのサブセット、つまりcy.nodes('[!fixedByUser]').layout({ name: "cola" ...})にのみ連続レイアウトを適用し、既存のレイアウトを停止し、ノードが固定または固定されないたびに新しいレイアウトをインスタンス化することを考えましたユーザーによって。この考え方の問題点は、ユーザーが位置を固定したノードをレイアウトで完全に無視してはいけないということです。彼らはまだ固定されていないノードに力を加えるべきです。

3. データがプロパティfixedByUser: trueを含むノードの位置を更新しないように、コーラのレイアウトにパッチを適用します。これはあまりにも多くの作業を経なければならないように思えます。私はむしろ、この機能をサポートするライブラリを使い始めることにします。

4. 私の使用例をよりよくサポートする別のグラフライブラリに切り替えます。

私はあなたの考えをありがとう！

Answer 1

ノードがレイアウトの影響を受けないようにするには、eles.layout()を使用してレイアウトにノードを含めないでください。レイアウトの実行中にその条件を変更する場合は、古いレイアウトを停止し、新しい要素セットで新しいレイアウトを開始します。無限に実行できるレイアウトは、問題なく交換できます。