ホームページ > 記事 > ウェブフロントエンド > Vue と jsmind を使用してマインド マップのノード アンカーと接続制御を実装するにはどうすればよいですか?
Vue と jsmind を使用してマインド マップのノード アンカーと接続制御を実装するにはどうすればよいですか?
- PHPzオリジナル
- 2023-08-16 09:57:031603ブラウズ
Vue と jsmind を使用してマインド マップのノード アンカー ポイントと接続制御を実現します
はじめに
マインド マップは一般的に使用される思考と手法です。情報を整理するためのツール。問題を明確に提示して分析し、解決策を計画するのに役立ちます。 Web アプリケーションにマインド マッピング機能を実装すると、ユーザーがアイデアをより適切に整理および管理できるようになります。この記事では、Vueとjsmindライブラリを使ってマインドマップのノードアンカーポイントと接続制御を実現する方法を紹介します。
Vue を使用して基本的なマインド マップ コンポーネントを作成する
マインド マップ機能を簡単に使用するために、基本的なマインド マップ コンポーネントを作成できます。まず、Vue プロジェクトに jsmind ライブラリをインストールする必要があります。次のコマンドでインストールできます:
npm install jsmind --save
次に、jsmind ライブラリとスタイルを Vue コンポーネントに導入し、マインド マップをレンダリングするための <div> 要素を作成します。コードは次のとおりです。 <pre class='brush:vue;toolbar:false;'><template>
<div ref="mindContainer"></div>
</template>
<script>
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)
}
}
}
</script>
<style scoped>
.mind-container {
width: 100%;
height: 100%;
}
</style></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:javascript;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 が空ではなく、selectedNode2 が空である場合は、ノードを selectedNode2 に割り当て、connectNodes メソッドを呼び出してノード接続ロジックを実行します。 ; 最後に、接続が完了したら、selectedNode1 と selectedNode2 を空に再割り当てします。
メソッドでは、jsmind が提供する API メソッドを使用して 2 つのノードを接続できます。コードは次のとおりです。 <pre class='brush:javascript;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> 上記のコードでは、まずマインド マップのデータ オブジェクト
を取得し、その getNodeData# を通じて接続する 2 つを取得します。 ## メソッド ノードのデータ。次に、一意の ID を持つ接続データ オブジェクト linkData を作成し、addLinkData を通じて接続データを mindData に追加します。メソッド ;最後に、show メソッドを通じてマインド マップ インスタンスの表示を更新します。 ここまでで、マインドマップのノードアンカーポイントと接続制御の機能実装が完了しました。このマインド マップ コンポーネントを使用する場合、ユーザーはノード上のボタンをクリックして接続の開始点と終了点を選択し、接続操作を通じてノード間の関連付けを確立できます。
以上がVue と jsmind を使用してマインド マップのノード アンカーと接続制御を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。