Vue と jsmind を使用してマインド マップのノード アンカーと接続制御を実装するにはどうすればよいですか?

Vue と jsmind を使用してマインド マップのノード アンカー ポイントと接続制御を実現します

はじめに

マインド マップは一般的に使用される思考と手法です。情報を整理するためのツール。問題を明確に提示して分析し、解決策を計画するのに役立ちます。 Web アプリケーションにマインド マッピング機能を実装すると、ユーザーがアイデアをより適切に整理および管理できるようになります。この記事では、Vueとjsmindライブラリを使ってマインドマップのノードアンカーポイントと接続制御を実現する方法を紹介します。

Vue を使用して基本的なマインド マップ コンポーネントを作成する

マインド マップ機能を簡単に使用するために、基本的なマインド マップ コンポーネントを作成できます。まず、Vue プロジェクトに jsmind ライブラリをインストールする必要があります。次のコマンドでインストールできます:

npm install jsmind --save

次に、jsmind ライブラリとスタイルを Vue コンポーネントに導入し、マインド マップをレンダリングするための <div> 要素を作成します。コードは次のとおりです。 <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div ref=&quot;mindContainer&quot;&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import 'jsmind/style/jsmind.css' import jsMind from 'jsmind' export default { name: 'MindMap', mounted() { this.initMindMap() }, methods: { initMindMap() { var mind = { /* 在这里定义思维导图的数据 */ } var options = { container: this.$refs.mindContainer, editable: true, // 是否可以编辑节点 theme: 'default' } new jsMind(options).show(mind) } } } &lt;/script&gt; &lt;style scoped&gt; .mind-container { width: 100%; height: 100%; } &lt;/style&gt;</pre><p> 上記のコードを通じて、<code>MindMap コンポーネントを作成し、それに jsmind ライブラリを導入し、マインド マップ インスタンスを初期化しました。これで、このコンポーネントを Vue プロジェクトで使用して、基本的なマインド マップ表示効果を確認できるようになりました。

ノードアンカーポイントと接続制御の実装

ノードアンカーポイントと接続制御の機能を実現するには、アンカーポイントの表示を制御するボタンを各ノードに追加する必要があります。非表示にし、ノードにイベント リスナーを追加して接続操作を完了します。

まず、initMindMap メソッドですべてのノードを取得し、各ノードにボタン要素を追加します。コードは次のとおりです。

initMindMap() {
  // ...
  this.$refs.mindContainer.addEventListener('mousedown', (event) => {
    var target = event.target
    if (target.classList.contains('expanded')) {
      // 当前节点已经展开，不进行操作
      return
    }
    if (target.tagName === 'jmnode') {
      var node = target.jmnode
      var button = document.createElement('button')
      button.classList.add('anchor-button')
      button.innerText = '连线'
      button.addEventListener('click', () => {
        this.startConnect(node)
      })
      target.append(button)
    }
  })
}

上記のコードでは、要素が jmnode (つまり、マインド マップ要素のノード)、ノードのボタンを作成し、ボタンに click イベント リスナーを追加します。 次に、各ノードに接続操作を追加できます。

まず、接続されたノードに応答する 2 つの一時変数を追加して、これら 2 つのノードが選択されているかどうかを記録する必要があります。コードは次のとおりです。

data() {
  return {
    // ...
    selectedNode1: null,
    selectedNode2: null
  }
}

次に、

startConnect

メソッドを追加し、このメソッドで、クリックされたノードに基づいて接続するかどうかを選択します。コードは次のとおりです: <pre class='brush:php;toolbar:false;'>methods: { startConnect(node) { if (!this.selectedNode1) { this.selectedNode1 = node } else if (!this.selectedNode2) { this.selectedNode2 = node this.connectNodes(this.selectedNode1, this.selectedNode2) this.selectedNode1 = null this.selectedNode2 = null } }, connectNodes(node1, node2) { // 在这里实现连线的逻辑 } }</pre> 上記のコードでは、ノードがクリックされると、

selectedNode1

が空の場合、ノードは selectedNode1 に割り当てられます。 selectedNode1 が空ではなく、selectedNode2 が空である場合は、ノードを selectedNode2 に割り当て、connectNodes メソッドを呼び出してノード接続ロジックを実行します。 ; 最後に、接続が完了したら、selectedNode1 と selectedNode2 を空に再割り当てします。

connectNodes

メソッドでは、jsmind が提供する API メソッドを使用して 2 つのノードを接続できます。コードは次のとおりです。 <pre class='brush:php;toolbar:false;'>connectNodes(node1, node2) { var mindData = this.mind.data var nodeData1 = mindData.getNodeData(node1.id) var nodeData2 = mindData.getNodeData(node2.id) if (!nodeData1 || !nodeData2) { return } var edgeId = '__connect_edge_' + node1.id + '_' + node2.id if (mindData.getLinkData(edgeId)) { return } var linkData = { id: edgeId, src: node1.id, target: node2.id } mindData.addLinkData(linkData) this.mind.show(mindData) }</pre> 上記のコードでは、まずマインド マップのデータ オブジェクト

mindData

を取得し、その getNodeData# を通じて接続する 2 つを取得します。 ## メソッド ノードのデータ。次に、一意の ID を持つ接続データ オブジェクト linkData を作成し、addLinkData を通じて接続データを mindData に追加します。メソッド ;最後に、show メソッドを通じてマインド マップ インスタンスの表示を更新します。 ここまでで、マインドマップのノードアンカーポイントと接続制御の機能実装が完了しました。このマインド マップ コンポーネントを使用する場合、ユーザーはノード上のボタンをクリックして接続の開始点と終了点を選択し、接続操作を通じてノード間の関連付けを確立できます。

概要

この記事の導入部を通じて、Vue と jsmind ライブラリを使用して、マインド マップのノード アンカー ポイントと接続制御を実現する方法を学びました。最初に基本的なマインド マップ コンポーネントを作成し、jsmind ライブラリを通じてマインド マップ表示機能を実装しました。次に、各ノードにボタン要素を追加し、アンカー ポイントの表示と非表示を制御するボタンのクリック イベント リスナーを追加しました。最後に、ノード接続の操作を行うことができ、ユーザーはノード ボタンをクリックすることで接続の開始点と終了点を選択できます。

この記事が、Vue や jsmind でのマインド マップのノード アンカー ポイントと接続制御の実装に役立つことを願っています。より良い実装方法や機能要件がある場合は、メッセージを残して連絡してください。