Wie implementiert man Operationen zum Zusammenführen und Aufteilen von Knoten in Mind Maps mit Vue und jsmind?

Wie implementiert man Operationen zum Zusammenführen und Aufteilen von Knoten in Mind Maps mit Vue und jsmind?

Mind Map ist ein gängiges Tool zum Organisieren und Anzeigen von Informationen. Es organisiert und zeigt Gedanken und Meinungen durch Knoten und Verbindungslinien in einer Baumstruktur an. In praktischen Anwendungen müssen wir manchmal Knoten in der Mindmap zusammenführen und teilen, um Informationen besser verwalten und anzeigen zu können. In diesem Artikel wird die Verwendung von Vue- und jsmind-Bibliotheken zum Implementieren von Knotenzusammenführungs- und -aufteilungsvorgängen in Mind Maps vorgestellt und entsprechende Codebeispiele gegeben.

Zuerst müssen wir die Vue- und jsmind-Bibliotheken vorstellen. Es kann über CDN eingeführt oder über npm installiert und eingeführt werden. Als nächstes müssen wir eine Vue-Komponente erstellen, um die Mindmap zu hosten.

<template>
  <div id="jsmind-container"></div>
</template>

<script>
export default {
  mounted() {
    this.initMindMap();
  },
  methods: {
    initMindMap() {
      const options = {
        container: 'jsmind-container',
        editable: true,
        theme: 'primary'
        // 其他配置项
      };

      const mind = {
        meta: {
          name: '思维导图',
          author: 'Vue+jmind',
          version: '1.0'
        },
        format: 'free',
        data: [
          // 初始节点数据
        ],
      };

      this.mindMap = jsMind.show(options, mind);
    }
  }
}
</script>

<style>
#jsmind-container {
  width: 100%;
  height: 500px;
}
</style>

In der gemounteten Hook-Funktion der Vue-Komponente rufen wir die Methode initMindMap auf, um die Mind Map zu initialisieren. Zuerst definieren wir ein options-Objekt, in dem das Attribut container die ID des Containerelements der Mind Map und das Attribut editable angibt auf true gesetzt ist, zeigt an, dass die Mind Map bearbeitet werden kann, und das theme-Attribut ist auf „primary“ gesetzt, um das verwendete Thema anzugeben. Als Nächstes definieren wir ein mind-Objekt, um die anfänglichen Mindmap-Knotendaten festzulegen. Dies sind lediglich leere Daten, die entsprechend der tatsächlichen Situation ausgefüllt werden müssen. initMindMap方法来初始化思维导图。首先，我们定义了一个options对象，其中container属性指定了思维导图的容器元素的id，editable属性设置为true表示思维导图可以编辑，theme属性设置为'primary'来指定使用的主题。接着，我们定义了一个mind对象来设置初始的思维导图节点数据。这里只是一个空的数据，需要根据实际情况进行填充。

接下来，我们需要实现节点合并操作。在思维导图中，我们可以通过将多个相邻的节点合并为一个节点，以减少冗余的信息和节点数量。在Vue组件中，我们可以在合适的地方添加一个按钮，用来触发节点合并操作。

<template>
  <div>
    <div id="jsmind-container"></div>
    <button @click="mergeNodes">合并节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    mergeNodes() {
      const selectedNodes = this.mindMap.get_selected_node(); // 获取选中的节点
      const parent = selectedNodes[0].parent; // 获取选中节点的父节点

      // 获取选中节点的子节点
      const children = selectedNodes.map(node => {
        return {
          ...node,
          children: node.children
        };
      });

      // 创建新的节点
      const mergedNode = {
        id: 'newNode',
        topic: '合并节点',
        children: children
      };

      // 更新父节点的子节点数据
      const parentData = parent.data;
      const index = parentData.findIndex(node => node.id === selectedNodes[0].id);
      parentData.splice(index, 1, mergedNode);

      this.mindMap.update_node(parent, parentData); // 更新父节点数据
    }
  }
}
</script>

在mergeNodes方法中，我们首先通过this.mindMap.get_selected_node()方法获取选中的节点，然后通过parent属性获取该节点的父节点。接着，我们使用map方法将选中的节点转换为新的节点数据，并将原本的子节点数据保存。然后，我们创建一个新的节点，将选中节点的子节点作为新节点的子节点属性。接下来，我们更新父节点的子节点数据，并使用this.mindMap.update_node方法来更新父节点的数据。

类似地，我们可以实现节点拆分操作。拆分操作是将一个节点拆分为多个子节点的操作，以便展示更详细的信息。

<template>
  <div>
    <div id="jsmind-container"></div>
    <button @click="splitNode">拆分节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    splitNode() {
      const selectedNode = this.mindMap.get_selected_node()[0]; // 获取选中的节点

      // 拆分节点为多个子节点
      const children = selectedNode.children.map((child, index) => {
        return {
          id: 'newNode_' + index,
          topic: child.topic
        };
      });

      // 更新选中节点的子节点数据
      this.mindMap.move_node(selectedNode, children);
    }
  }
}
</script>

在splitNode方法中，我们首先通过this.mindMap.get_selected_node()方法获取选中的节点，然后使用map方法将选中节点的子节点转换为多个子节点的数据。拆分操作中，我们只改变子节点的id和topic属性，并将其保存在一个新的数组中。接着，我们使用this.mindMap.move_node

Als nächstes müssen wir den Knotenzusammenführungsvorgang implementieren. In einer Mindmap können wir redundante Informationen und die Anzahl der Knoten reduzieren, indem wir mehrere benachbarte Knoten zu einem Knoten zusammenführen. In der Vue-Komponente können wir an der entsprechenden Stelle eine Schaltfläche hinzufügen, um den Knotenzusammenführungsvorgang auszulösen.

rrreee

In der Methode mergeNodes erhalten wir zuerst den ausgewählten Knoten über die Methode this.mindMap.get_selected_node() und dann über die Methode parent-Attribut Der übergeordnete Knoten dieses Knotens. Als nächstes verwenden wir die Methode <code>map, um den ausgewählten Knoten in neue Knotendaten zu konvertieren und die ursprünglichen Daten des untergeordneten Knotens zu speichern. Anschließend erstellen wir einen neuen Knoten und verwenden die untergeordneten Knoten des ausgewählten Knotens als untergeordnete Knotenattribute des neuen Knotens. Als Nächstes aktualisieren wir die Daten des untergeordneten Knotens des übergeordneten Knotens und verwenden die Methode this.mindMap.update_node, um die Daten des übergeordneten Knotens zu aktualisieren. 🎜🎜Ähnlich können wir Knotenaufteilungsoperationen implementieren. Bei der Aufteilungsoperation wird ein Knoten in mehrere Unterknoten aufgeteilt, um detailliertere Informationen anzuzeigen. 🎜rrreee🎜In der Methode splitNode erhalten wir zuerst den ausgewählten Knoten über die Methode this.mindMap.get_selected_node() und verwenden dann die Methode map Methode zu Die untergeordneten Knoten des ausgewählten Knotens werden in Daten mehrerer untergeordneter Knoten umgewandelt. Bei der Split-Operation ändern wir nur die ID- und Topic-Attribute der untergeordneten Knoten und speichern sie in einem neuen Array. Als nächstes verwenden wir die Methode this.mindMap.move_node, um die Daten des ausgewählten Knotens durch die Daten des neuen untergeordneten Knotens zu ersetzen. 🎜🎜Durch die Implementierung von Operationen zum Zusammenführen und Aufteilen von Knoten können wir die Informationen in der Mind Map flexibler verwalten. Die oben genannten Codebeispiele werden basierend auf Vue- und jsmind-Bibliotheken implementiert. Sie können ähnliche Funktionen auch in anderen Frameworks und Bibliotheken entsprechend Ihren eigenen Anforderungen implementieren. Ich hoffe, dass dieser Artikel für Ihr Lernen und Ihre Entwicklung hilfreich sein wird! 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man Operationen zum Zusammenführen und Aufteilen von Knoten in Mind Maps mit Vue und jsmind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!