Comment utiliser Vue et jsmind pour implémenter l'ancrage de nœuds et le contrôle de connexion des cartes mentales ?-Voir.js-php.cn

Comment utiliser Vue et jsmind pour implémenter lancrage de nœuds et le contrôle de connexion des cartes mentales ?

Utilisez Vue et jsmind pour réaliser l'ancrage des nœuds et le contrôle de connexion de la carte mentale

Introduction

La carte mentale est un outil couramment utilisé pour réfléchir et organiser les informations. Elle peut nous aider à afficher et analyser clairement les problèmes et à planifier des solutions. . La mise en œuvre de fonctions de cartographie mentale dans les applications Web peut aider les utilisateurs à mieux organiser et gérer leurs idées. Dans cet article, nous présenterons comment utiliser Vue et la bibliothèque jsmind pour réaliser le point d'ancrage des nœuds et le contrôle de connexion de la carte mentale.

Utilisez Vue pour créer un composant de carte mentale de base

Afin d'utiliser facilement la fonction de carte mentale, nous pouvons créer un composant de carte mentale de base. Tout d'abord, nous devons installer la bibliothèque jsmind dans le projet Vue. Il peut être installé via la commande suivante :

npm install jsmind --save

Copier après la connexion

Ensuite, introduisez la bibliothèque et les styles jsmind dans le composant Vue, et créez un élément <div> pour le rendu de la carte mentale. Le code est le suivant : <div>元素，用于渲染思维导图。代码如下所示：

<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>

Copier après la connexion

通过以上代码，我们创建了一个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)
    }
  })
}

Copier après la connexion

在以上代码中，我们通过event.target获取当前点击的元素，如果该元素为jmnode（即思维导图的节点元素），则为该节点创建一个按钮，并向按钮添加click事件监听器。

接下来，我们可以为每个节点添加连线的操作。

首先，我们需要添加两个响应连线的节点的临时变量，用于记录这两个节点是否已选择。代码如下：

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

Copier après la connexion

然后，我们可以添加一个startConnect方法，并在该方法中根据点击的节点选择是否进行连线。代码如下：

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) {
    // 在这里实现连线的逻辑
  }
}

Copier après la connexion

在以上代码中，当点击一个节点时，如果selectedNode1为空，则将该节点赋值给selectedNode1；如果selectedNode1不为空且selectedNode2为空，则将该节点赋值给selectedNode2，并调用connectNodes方法进行节点连线的逻辑；最后，在连线完成后，将selectedNode1和selectedNode2重新赋值为空。

在connectNodes方法中，我们可以使用jsmind提供的API方法将两个节点进行连线。代码如下：

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)
}

Copier après la connexion

在以上代码中，我们首先获取思维导图的数据对象mindData，通过它的getNodeData方法获取待连线的两个节点的数据；然后，通过一个唯一的ID创建一个连线的数据对象linkData，并通过addLinkData方法将连线数据添加到mindData中；最后，通过showrrreee

Grâce au code ci-dessus, nous avons créé un composant MindMap, y avons introduit la bibliothèque jsmind et initialisé une instance de carte mentale. Nous pouvons maintenant utiliser ce composant dans le projet Vue et voir l'effet d'affichage de base de la carte mentale.

Implémenter le point d'ancrage du nœud et le contrôle de connexion

Afin de réaliser la fonction de point d'ancrage du nœud et de contrôle de connexion, nous devons ajouter un bouton à chaque nœud pour contrôler l'affichage et le masquage du point d'ancrage, et ajouter un écouteur d'événement, utilisé pour terminer l’opération de connexion.

Tout d'abord, nous pouvons obtenir tous les nœuds dans la méthode initMindMap et ajouter des éléments de bouton à chaque nœud. Le code est le suivant :

rrreee

Dans le code ci-dessus, nous obtenons l'élément actuellement cliqué via event.target, si l'élément est jmnode (c'est-à-dire le nœud élément de la carte mentale), créez un bouton pour le nœud et ajoutez un écouteur d'événement click au bouton. 🎜🎜Ensuite, nous pouvons ajouter des opérations de connexion à chaque nœud. 🎜🎜Tout d'abord, nous devons ajouter deux variables temporaires qui répondent aux nœuds connectés pour enregistrer si ces deux nœuds ont été sélectionnés. Le code est le suivant : 🎜rrreee🎜 Ensuite, nous pouvons ajouter une méthode startConnect, et dans cette méthode choisir si nous devons nous connecter en fonction du nœud cliqué. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, lorsqu'un nœud est cliqué, si selectedNode1 est vide, le nœud sera affecté à selectedNode1 si ; >selectedNode1 n'est pas vide et <code>selectedNode2 est vide, puis attribuez le nœud à selectedNode2 et appelez la méthode connectNodes pour effectuer la connexion du nœud logic ; Enfin, une fois la connexion terminée, réaffectez selectedNode1 et selectedNode2 à vide. 🎜🎜Dans la méthode connectNodes, nous pouvons utiliser la méthode API fournie par jsmind pour connecter deux nœuds. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord l'objet de données mindData de la carte mentale, et obtenons les deux nœuds à connecter via son getNodeData data ; puis créez un objet de données connecté linkData avec un identifiant unique et ajoutez les données de connexion à mindData via la méthode addLinkData. in; enfin, mettez à jour l'affichage de l'instance de carte mentale via la méthode show. 🎜🎜À ce stade, nous avons terminé la mise en œuvre de la fonction du point d'ancrage du nœud et du contrôle de connexion de la carte mentale. Lors de l'utilisation de ce composant de carte mentale, les utilisateurs peuvent cliquer sur les boutons des nœuds pour sélectionner le point de départ et le point final de la connexion, et établir l'association entre les nœuds via des opérations de connexion. 🎜🎜Résumé🎜🎜Grâce à l'introduction de cet article, nous avons appris à utiliser Vue et la bibliothèque jsmind pour implémenter le point d'ancrage des nœuds et le contrôle de connexion des cartes mentales. Nous avons d'abord créé un composant de carte mentale de base et implémenté la fonction d'affichage de la carte mentale via la bibliothèque jsmind ; puis, nous avons ajouté des éléments de bouton à chaque nœud et ajouté des écouteurs d'événements de clic pour les boutons pour contrôler l'affichage et masquer les points d'ancrage ; fonctionnement des connexions de nœuds, et les utilisateurs peuvent sélectionner le point de départ et le point final de la connexion en cliquant sur le bouton du nœud. 🎜🎜J'espère que cet article vous sera utile pour implémenter les points d'ancrage des nœuds et le contrôle de connexion des cartes mentales dans Vue et jsmind. Si vous avez une meilleure méthode d'implémentation ou des exigences plus fonctionnelles, veuillez laisser un message pour communiquer. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!