vue jsplumb editor

Vue-jsplumb-editor

オンラインプレビュー

機能ポイント

メニューノードエリア

• ノードをメニューからメインデザイン領域にドラッグしてノードを配置します
• ノードタイプごとにノードを整理します

メインデザインエリア

• 操作を取り消すことができます
• 背景のパンとズーム
• メニューからドラッグされたノードを受信できます
• ドラッグインノードは、現在のノード情報に基づいて対応するエンドポイントを生成します（接続のドラッグアウトに使用）
• 生成されたエンドポイントは、ソースエンドポイントとターゲットエンドポイントの2つのタイプに分割されます。これは、スタイルで区別する必要があります。
• ソースエンドポイントはノードのボトム位置に配置され、ターゲットノードはノードが上位置にないことを防ぎます（接続ラインを上から下にドラッグすることを容易にします）
• すべてのノードは、ドラッグして移動することで移動できます
• すべてのノードと接続ラインを削除できます
• すべてのノードとエンドポイントには、マウスのノードまたはエンドポイント情報をプロンプトするためのツールチップボックスが必要です
• マウスを浮かぶとき、すべてのノード、エンドポイント、接続線を異なるスタイルに設定する必要があります
• すべてのノードと接続ラインを選択できます
• 操作によりリアルタイムでデータを保存します
• データ生成フローチャートをインポートします

ノード構成領域

• 設計領域でノードを選択すると、ノード構成領域に対応するノード構成パネルが表示されます
• 異なるノードには、対応するノード構成パネルが必要です
• ノードパネルは、ノードプロパティを表示および構成するために使用されます

メニュー関数を右クリックします

• ノード：
  • コピー
  • 消去
  • データを表示します
  • 名前を変更します
• 接続ケーブル：
  • 消去
• 背景：
  • ペースト

インストール依存関係

 npm install

開発モデル

 npm run serve

生産コードをコンパイルします

 npm run build