作業の進め方
AntV X6 Editorは、フローチャート、DAG、ER図、リネージ、組織図エディタなどのインタラクティブなダイアグラムツールを対象としています。取得したエントリはX6 v3を対象とし、グラフを作成し、ノードとエッジを追加してから、意図する操作に必要なエディタプラグインを登録するという命令的な手法を説明しています。
特徴的なのはエディタの挙動です。選択、履歴、クリップボード、キーボード、ステンシル、ドラッグ&ドロップ、変形、エクスポートには明示的な設定が必要で、キャンバスのパンや接続の挙動は別の設定レイヤーに属します。ソースはまた、シリアライズやポート固有のタスクを詳細な参照資料に誘導しています。描画したワークフローを実行可能な業務プロセスに変換するものではありません。
想定される成果物
- スタイル付きのノードとエッジを備えたX6ダイアグラムエディタJavaScript
- 意図的に選んだエディタプラグインとキャンバス操作
- エディタに適した接続、フレーミング、任意のシリアライズの挙動
ブリーフからレビューまで
- 01編集タスクを定義する
ユーザーが作成、移動、選択、接続、削除できるダイアグラムオブジェクトを一覧にします。プラグインを有効にする前に、本当に必要なエディタ操作を決めます。
- 02ノード・エッジモデルを構築する
グラフを作成し、必要な図形と接続を追加します。ポート、カスタムHTMLノード、入れ子構造が対象に含まれる場合は、それぞれ専用のガイダンスを取得します。
- 03エディタ機能を登録する
実装で使うプラグインをインポートして登録します。パンや接続などのコンストラクタオプションは、プラグインクラスとは分けて管理します。
- 04編集セッションを確認する
選択、パン、ズーム、ドラッグの各ジェスチャーに競合がないかテストし、コンテンツをフレーミングして、約束した保存/読み込みやエクスポートの経路は存在を前提とせず実際に検証します。