Wie kann man mit Vue und jsmind die Knotenankerpunkt- und Verbindungssteuerung der Mind Map realisieren?

Verwenden Sie Vue und jsmind, um den Knotenanker und die Verbindungssteuerung der Mind Map zu realisieren.

Einführung: Mind Map ist ein häufig verwendetes Werkzeug zum Denken und Organisieren von Informationen. Es kann uns helfen, Probleme klar darzustellen und zu analysieren und Lösungen zu planen. Durch die Implementierung von Mindmapping-Funktionen in Webanwendungen können Benutzer ihre Ideen besser organisieren und verwalten. In diesem Artikel stellen wir vor, wie Sie mit Vue und der jsmind-Bibliothek die Knotenankerpunkt- und Verbindungssteuerung der Mind Map realisieren.

Verwenden Sie Vue, um eine grundlegende Mindmap-Komponente zu erstellen

Um die Mindmap-Funktion bequem nutzen zu können, können wir eine grundlegende Mindmap-Komponente erstellen. Zuerst müssen wir die jsmind-Bibliothek im Vue-Projekt installieren. Es kann über den folgenden Befehl installiert werden:

npm install jsmind --save

Führen Sie dann die jsmind-Bibliothek und -Stile in die Vue-Komponente ein und erstellen Sie ein <div>-Element zum Rendern der Mind Map. Der Code lautet wie folgt:

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

Mit dem obigen Code haben wir eine MindMap-Komponente erstellt, die jsmind-Bibliothek darin eingeführt und eine Mindmap-Instanz initialisiert. Jetzt können wir diese Komponente im Vue-Projekt verwenden und den grundlegenden Mindmap-Anzeigeeffekt sehen. <div>元素，用于渲染思维导图。代码如下所示：

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

通过以上代码，我们创建了一个MindMap组件，并在其中引入了jsmind库，并初始化了一个思维导图实例。现在我们可以在Vue项目中使用该组件，并查看基本的思维导图显示效果。

实现节点锚点和连线控制

为了实现节点锚点和连线控制的功能，我们需要在每个节点中添加一个按钮，用于控制锚点的显示和隐藏，并在节点中添加事件监听器，用于完成连线的操作。

首先，我们可以在initMindMap方法中获取所有的节点，并为每个节点添加按钮元素。代码如下：

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

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

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

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

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

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

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

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

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

rrreee

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

Knotenankerpunkt- und Verbindungssteuerung implementieren

Um die Funktion der Knotenankerpunkt- und Verbindungssteuerung zu realisieren, müssen wir jedem Knoten eine Schaltfläche hinzufügen, um das Anzeigen und Ausblenden des Ankerpunkts zu steuern, und einen Ereignis-Listener hinzufügen. wird verwendet, um den Verbindungsvorgang abzuschließen.

Zunächst können wir alle Knoten in der Methode initMindMap abrufen und jedem Knoten Schaltflächenelemente hinzufügen. Der Code lautet wie folgt:

rrreee

Im obigen Code erhalten wir das aktuell angeklickte Element über event.target, wenn das Element jmnode (also der Knoten) ist Element der Mind Map), erstellen Sie eine Schaltfläche für den Knoten und fügen Sie der Schaltfläche einen click-Ereignis-Listener hinzu.

Als nächstes können wir jedem Knoten Verbindungsoperationen hinzufügen. 🎜🎜Zuerst müssen wir zwei temporäre Variablen hinzufügen, die auf die verbundenen Knoten reagieren, um aufzuzeichnen, ob diese beiden Knoten ausgewählt wurden. Der Code lautet wie folgt: 🎜rrreee🎜 Dann können wir eine startConnect-Methode hinzufügen und in dieser Methode basierend auf dem angeklickten Knoten auswählen, ob eine Verbindung hergestellt werden soll. Der Code lautet wie folgt: 🎜rrreee🎜Wenn im obigen Code auf einen Knoten geklickt wird und selectedNode1 leer ist, wird der Knoten selectedNode1 zugewiesen >selectedNode1 ist nicht leer und selectedNode2 ist leer. Weisen Sie dann den Knoten selectedNode2 zu und rufen Sie die Methode connectNodes auf, um eine Knotenverbindung herzustellen Logik; Nachdem die Verbindung hergestellt wurde, weisen Sie selectedNode1 und selectedNode2 neu zu, um sie zu leeren. 🎜🎜In der Methode connectNodes können wir die von jsmind bereitgestellte API-Methode verwenden, um zwei Knoten zu verbinden. Der Code lautet wie folgt: 🎜rrreee🎜Im obigen Code erhalten wir zunächst das Datenobjekt mindData der Mind Map und erhalten die beiden zu verbindenden Knoten über dessen getNodeData Methode. Erstellen Sie dann ein verbundenes Datenobjekt linkData mit einer eindeutigen ID und fügen Sie die Verbindungsdaten zu mindData über die Methode addLinkData hinzu Aktualisieren Sie schließlich die Anzeige der Mindmap-Instanz über die Methode show. 🎜🎜Zu diesem Zeitpunkt haben wir die Funktionsimplementierung des Knotenankerpunkts und die Verbindungssteuerung der Mind Map abgeschlossen. Bei Verwendung dieser Mindmap-Komponente können Benutzer auf die Schaltflächen an den Knoten klicken, um den Start- und Endpunkt der Verbindung auszuwählen und die Verbindung zwischen Knoten durch Verbindungsvorgänge herzustellen. 🎜🎜Zusammenfassung🎜🎜Durch die Einleitung dieses Artikels haben wir gelernt, wie man mit Vue und der jsmind-Bibliothek die Knotenankerpunkt- und Verbindungssteuerung von Mind Maps implementiert. Wir haben zunächst eine grundlegende Mindmap-Komponente erstellt und die Mindmap-Anzeigefunktion über die jsmind-Bibliothek implementiert. Anschließend haben wir jedem Knoten Schaltflächenelemente hinzugefügt und Klickereignis-Listener für die Schaltflächen zum Anzeigen und Ausblenden von Ankerpunkten hinzugefügt Betrieb von Knotenverbindungen, und Benutzer können den Start- und Endpunkt der Verbindung auswählen, indem sie auf die Knotenschaltfläche klicken. 🎜🎜Ich hoffe, dass dieser Artikel Ihnen bei der Implementierung von Knotenankerpunkten und der Verbindungssteuerung von Mind Maps in Vue und jsmind hilfreich sein wird. Wenn Sie eine bessere Implementierungsmethode oder funktionale Anforderungen haben, hinterlassen Sie bitte eine Nachricht zur Kommunikation. 🎜

Das obige ist der detaillierte Inhalt vonWie kann man mit Vue und jsmind die Knotenankerpunkt- und Verbindungssteuerung der Mind Map realisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!