Mind mapping is a creative tool when we are thinking about a topic. It helps us visualize our thoughts graphically.

Through the analysis of the previous chapters, the implementation of the mind map has been clear, and now is the final chapter of this column [Using SVG to implement the Mind map editor], pseudo-code analysis. Specific implementation readers can practice by themselves.

As a front-end programmer, today to customize their own mind map editor, based on this to achieve a single file webpage audio playback, picture preview, mind map animation display and other advanced functions. This article is the basic implementation of mind mapping.

The tree

First, the data of the mind map is presented in the form of a multi-fork tree. In order to render the layout of the tree, we will abstract a rendering tree. That is, we have two trees in our code: Tree, a standard multi-fork data structure. RenderTree, inherited from Tree, implements pre-order traversal and post-order traversal. Multi-fork trees do not have middle-order traversal.

    class Tree {
     root
     preTraverse() // preorder traversal
     postTraverse() // middle order traversal
    }
Copy the code
    class RenderTree extends Tree {
     run() {} // Generate render style information
    }
Copy the code

Minder (Mind mapping)

Secondly, we abstract a mind map class. The mind map class mainly adds DOM elements drawn by RenderTree to the web page, and at the same time calls RenderTree methods to export JSON and other functions. Minder consists of two main components:

  • RenderTree: RenderTree that Minder needs to render.
  • ModelViewTransformer transforms RenderTree models into DOM elements.

Virtual node

As needed, we abstract out two elements that do not exist in the browser:

  • SVGELement is used to zoom in and out of maps.
  • NodeElement, used to draw nodes and wires.

RenderTree is traversing, drawing nodes and wires by calling the DOM creation functionality provided by the two virtual nodes.

Absolutely positioned input box

When a node is located, the size and x and Y coordinates of the node are obtained, and the input box of the text description of the map node is realized through absolute positioning.

Compute the x and y coordinates

Everything is a node, a single node is a node, a subtree is a node.

Through tree traversal, we need to know the height of the node and the height of the subtree corresponding to the node.

On this basis, we can get the final x and Y coordinates of the node, so as to achieve the non-coincidence of the node and the line.

More Advanced Features

This part of the function belongs to the business level, such as single file webpage audio playback, picture preview, mind map animation display.

This part is free to play.

Thanks for reading the column. As a front end, you should know how to implement a mind map editor.