JointJS で要素を「選択不可」にする

Question

利用した ジョイント 私のプロジェクトの 1 つで作図ライブラリ。

1) ユーザーが図の要素を操作しないように制限する方法が提供されるかどうか知りたいです。私が言いたいのは:ユーザーは、サイズ変更、位置の変更、リンクのドラッグなどの操作を行うのではなく、図を画像として見ることができます。

2) 私のアプリはそれに大きく依存しています。自動レイアウトの問題は解決しましたが、Jointjs でそれは可能でしょうか。これらの要素などが必要であることをライブラリに伝えるだけで、最適で衝突しない要素を最小限に抑えた図を作成するのに協力してください。リンクが連続した直線の場合、相互に衝突したり、パス内の要素と衝突したリンクの数は?

3) 最後に、他の要素と衝突しているリンク、または同じ図内の他のリンクと衝突しているリンクをチェックできるかどうか知りたいです。要素の場合はそれが可能であることはわかっています。

if (element1.getBBox().intersect(element2.getBBox())) {
    // elements intersect
}

Answer 1

1) どちらかを使用する new joint.dia.Paper({ interactive: false, ... }) または、用紙上で CSS の pointer-events プロパティを none に直接設定します。 paper.$el.css('pointer-events', 'none')

2) Joint.layout.DirectedGraph プラグインを使用できます。このプラグインはここからダウンロードできます。 http://jointjs.com/download それについて説明したブログ投稿は次のとおりです。 http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html.

3) 一般に、これは簡単ではありません。2 つのパス間の交差を計算する例については、このサイトを参照してください。 http://www.kevlindev.com/geometry/2D/intersections/intersect_bezier2_bezier2.svg. 。ダウンロード用のライブラリは次のとおりです。 http://www.kevlindev.com/gui/math/intersection/index.htm