HTML5とSVGを使用してデータモデルのカスタムグラフィカルエディターを作成する方法
HTML5準拠のブラウザで動作するデータモデル用のグラフィカルエディタを作成する必要があります。構築するための適切なライブラリ/フレームワークを探しています。モデルはxmlとして保存されますが、これはフロントエンドテクノロジにはほとんど関係ありません。
具体的には、ボックスや線を作成するための一種のダイアグラムエディタを構築したいと考えています。各ボックスには、編集可能なプロパティのセットと、さまざまな種類の線として表される他のボックスとの関係のセットがあります（UMLクラス図を考えてみてくださいが、もう少し複雑です）。エディターを使用して各ボックスのプロパティを編集できる必要があります。ユーザーが新しいボックスを選択して作成できる一種のツールバーが必要です。最後に、自動レイアウトエンジンが必要ですが、ユーザーはドラッグアンドドロップでオーバーライドできる必要があります。
Eclipse GEFは、私が探している種類のフレームワークの良い例です。ツールパレット、レイアウトマネージャー、ドラッグアンドドロップのサポート、およびMVCアーキテクチャを提供します。ただし、JavaベースのRCPアプリとしてではなく、ブラウザーで機能するためにこれが必要です。
データを表示するための優れたJSライブラリがたくさんあります（d3やjqplotなど）。そして、私はd3でプロトタイピングを始めました。これは強力で柔軟なライブラリですが、低レベルでもあります。たとえば、自分のツールバーとドラッグアンドドロップ機能を実装する必要があるように思えます。これは、Eclipse GEFが標準で提供するものです。
この機能をすべて自分で実装する必要がありますか、それとも、自分の目標により適したライブラリまたはフレームワークが存在しますか？
商用のコンテキストでは、 yFiles for HTML は、まさにまさにあなたが探しているものです：
これは、SVG、CSS3、CanvasなどのHTML5ブラウザーテクノロジーと、グラフのような構造を表示および編集するための最新のEcmascript機能を使用するクライアント側のJavascriptライブラリです。アクティブなサーバーコンポーネントには依存しません。
非常に高度にカスタマイズできる組み込みの編集機能が付属しています。例えば。要素を作成、接続、または移動するためのデフォルトのジェスチャーに満足できない場合、ビューポートをズームまたはパンするために別のジェスチャーが必要な場合は、これらすべてをカスタマイズできます。また、タッチデバイスとタッチジェスチャの特定のサポートが付属しています。
要素に任意の数と種類のデータを添付し、オプションでそのデータをビジュアライゼーションに表示できます。ダイアグラム要素（ノード、エッジ、ラベル、ポートだけでなく、サイズ変更ハンドル、マーキー長方形などのグラフィック装飾）の視覚化も完全にカスタマイズできます。新しい要素の追加は簡単です。基本的にプレーンSVGが使用されているため、既存のグラフィックスとサードパーティのデザイナーツールを活用して、インタラクティブなCSSスタイルとアニメーションのSVGアイテムを作成できます。
ストレージについて：もちろん、モデルは Javascript API を介して変更およびアクセスでき、そのコアはJavascriptオブジェクトです。ただし、XML、JSONデータ、または角度観測されたコレクションからグラフを生成する方法に関する便利なクラスとサンプルがあります。
自動レイアウト機能について：私の知る限り、ライブラリの自動レイアウトアルゴリズムは、ネイティブJavascript実装として利用できる最も精巧で完全な実装です。 このライブオンラインデモ は、いくつかのアルゴリズムといくつかの構成オプションの動作を示しています。アルゴリズムは、ポート制約、エッジグループ化、階層ノードグループ化、統合ラベリング、配置制約などの高度な概念をサポートします。開発者用ガイドでは、さまざまな使用可能なレイアウトアルゴリズムとコンセプトを紹介しています。
ドラッグアンドドロップジェスチャをカスタマイズし、ウィジェットを他のJavascriptUIフレームワークと統合する方法を示す 利用可能なデモ があります。ライブラリには、ツールバーの実装や他のウィジェットの実装は含まれていません。代わりに、ツールバー、コンテキストメニュー、プロパティパネルなどのウィジェットを追加するために、Dojo、ExtJS、jquery-UIなどのウィジェットツールキットの使用を検討できます。
非営利の状況では、これらすべてを実行するライブラリを見つけることははるかに困難です。 D3は、データをすばやく簡単に表示することに優れていますが、すぐに使用できる強力な対話機能やレイアウト機能は提供していません。 JsPlumb Toolkitは、Nice編集機能を提供しますが、レイアウト機能も提供しません。許容可能なレイアウト機能は、オープンソースのGraphVizエンジンによって提供されます。これはCライブラリですが、Javascriptソースコードのクロスコンパイルを使用して、そのライブラリを移植し、Javascriptでブラックボックスとして実行する方法があります。これにより、アルゴリズムのブラウザ内にコマンドラインのようなインターフェースが提供されます。これはあまり便利ではありませんが、要件によっては十分な場合があります。
免責事項：私はyFilesライブラリを作成する会社で働いていますが、SEでは雇用主を代表していません。私の投稿、考え、コメントは私自身のものです。