Shiv ENOW large front end

Company official website: CVTE(Guangzhou Shiyuan Stock)

Team: ENOW team of CVTE software Platform Center for Future Education

The author:

preface

You wish the world, I wish you no bugs. Hello everyone, I’m Lin Daodi!

Ha ha ha, I haven’t written for a long time, but writing again today is like having dinner with a good friend I haven’t seen for a long time.

Shiwo ENOW big front end has also sent more than ten articles, a round, thank you for your support and like it.

This week, I’m going to write an interesting article about how to implement a mind map.

Well… Since this is a series of articles, be prepared for the long haul. I’ve roughly divided the series into several chapters:

  • Basic: a scheme to realize mind mapping
  • Practical article:react-topicPreliminary project construction
  • Actual combat: the concrete realization of the connection
  • Active mapping

There may be more to come, depending on the situation.

For the basic part, Dull will mainly provide some mind mapping implementation solutions (not architecture aspects) and introduce some knowledge of SVG to prepare for the later hand training.

Mind map: “Masturbation is Bad for you.”

“Hey, 110, there’s a drunk driver here.”

Check it out. By reading this article you can learn:

  • Clear goals
  • The realization idea of node
  • svgAnd quadratic Bezier curves
  • The realization idea of connection

1. Define your goals

There are a lot of mind maps out there, and there are some great products, and there are even teams that do it.

XMind:

Language finch:

Processon:

Before we start, we have to figure out what kind of product we want to make, and what it means to do it, and what kind of product positioning is finally realized.

So why don’t you tell me what you think? In fact, the idea of writing this series is very simple: consolidate and share, because the current work is partly related to it, and it is also a kind of self-consolidation. Maybe when I write articles, I can generate more good ideas to be used in practical work. In addition, I can share some existing implementation plans and communicate with more partners in my spare time. Finally, if you think your current job is getting a little boring, wouldn’t it be nice to follow through with a mind map? [Chuckles].

As for what the final product will be, we can see that the mind map cited above has many similarities:

  • Various types, left and right subtree layout (we call brain map), organization chart, fishbone chart, etc.
  • Nodes can be dragged and moved to change the hierarchy
  • .

Then we can also implement a mind map similar to the above, the final effect is similar to the following:

Product stereotypes are non-commercial (and it’s hard to be commercial), so practice on your own, and hopefully, in the process, you’ll learn some strange things.

2. Implementation ideas of nodes

2.1 Scheme Selection

The main parts of a mind map implementation are as follows:

  • Node (topic)
  • attachment

There are many ways to implement nodes, whether using ordinary DOM elements or SVG.

For example, it is used in songbirdssvgthepathChemical element:

Then enter the edit mode, turn onDOMElements of thecontenteditableProperties:

This implementation reminds me of BPMn.js, which is also made entirely of SVG:

(Hee hee, since speaking of this, ah, push wave push wave: “the most detailed BPMN textbook in the whole Web”)

And for Processon, boy, more violent… Direct use of absolute positioning:

There is also a recommended implementation: DOM elements + Flex layout.

2.2 DOM Elements + Flex Layout

The reason for choosing DOM node: easy to operate, API rich, but also easy to expand.

For the realization of its position, for example, for a brain map, we can divide it into three parts as a whole:

  • The left subtree
  • The root node
  • The right subtree

These three parts are arranged in a fixed order, so we can use the Order property in the Flex layout to complete the overall layout of a brain map.

What about the subtree part? We can also do this using flex layout, for example, the entire blue box is the right subtree, and the green box is the single subtree node:

The advantage of this is that you don’t need to manually calculate the position of each node when the content of the node changes frequently. Flex already does this for you, enabling dynamic adaptive layout.

We can simply write a small demo to see how this works:

HTML code:

<div class="mindMap">
  <div class="node rootNode">The root node</div>
  <div class="node subTree left">
    <div class="treeNode">Child nodes</div>
    <div class="treeNode">Child nodes</div>
    <div class="treeNode">Child nodes</div>
  </div>
  <div class="node subTree right">
    <div class="treeNode">Child nodes</div>
    <div class="treeNode">Child nodes</div>
    <div class="treeNode">Child nodes</div>
  </div>
</div>
Copy the code

The CSS code:

.mindMap {
  display: flex;
  align-items: center;
}
.node {
  width: 200px;
  background: rgb(192 214 255);
  text-align: center;
  color: #fff;
}
.rootNode {
  order: 2;
  background: #65bfff;
  height: 50px;
}
.left {
  order: 1;
}
.right {
  order: 3;
}
.subTree {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.treeNode {
  background-color: #ff6969;
}
.left .treeNode {
  margin-right: 56px;
}
.right .treeNode {
  margin-left: 56px;
}
.treeNode:not(:first-child) {
  margin-top: 24px;
}
Copy the code

The end result is something like this. Hahaha) :

3. SVG and Quadratic Bessel curves

3.1 introduction of SVG

Before we move on, I’m going to give you a brief introduction to SVG, which will be closely related to some of our future implementations, so I want to make sure you know the basics.

SVG is scalable vector graphics that uses an XML format to define images. We can use it directly in code as if we were using a div tag:

<svg width="300" height="300">
  <line x1="0" y1="0" x2="200" y2="0" />
</svg>
Copy the code

For CSS properties, it has its own set of three properties:

  • fill: fill color
  • stroke: the stroke color
  • stroke-width: Border width

You can think of an SVG tag as an HTML tag, to which you can add elements like PATH, line, rect, etc., to achieve a complete vector image.

Some of our common labels:

Line, line tag:

Effect:

Rectangle, recT label:

Effect:

Path, path tag:

Effect:

Ellipse, ellipse tag:

Effect:

3.2 path element

For the other elements, I don’t want to expand here. Check out the article getting Started with SVG: How to Write by Hand. But THE path element is something I’ll mention separately, because it’s the “backbone” of our functionality.

The path element can be used to create lines, curves, arcs, and so on. The shape of a path element is defined by attribute D, whose value is a sequence of commands and arguments.

What does that mean? Like this code:

<svg>
  <path d="M10 10 L90 10"
    stroke="rgb(0,0,0)" stroke-width="5"
  ></path>
</svg>
Copy the code

It means to draw a path on the page, and the path follows:

  • I’m going to go to (10, 10);
  • Draw a line to coordinate (90, 10).

(M: Move to a coordinate; L: Line to draw a Line between two coordinates

The end result:

Is that easy to understand?

3.3 Quadratic Bessel curve Q

Bezier curves are familiar to all of you, and they also exist in the path element. And it’s divided into two kinds of Bezier curves:

  • Cubic Bezier curvesC
  • Quadratic Bessel curveQ

The cubic Bessel curve C, which is determined by one point and two control points, is a little more complicated, so let’s focus on the quadratic Bessel curve Q.

It is one of the path elements used to draw smooth curves. The definition of a quadratic Bezier curve requires three sets of parameters:

  • Starting point coordinates
  • Control point coordinates
  • End point coordinates

Control points describe the slope of the starting point of the curve, and the slope of each point on the curve is a gradual process from the starting point to the end point.

As in the picture above, the red dots represent a point and its control points.

Here’s the code:

<svg>
  <path
    path d="M10 80 Q 95 10 180 80"
    stroke="black" fill="transparent"
  ></path>
</svg>
Copy the code

It means to draw a path on the page, and the path follows:

  • I’m going to go to (10, 80);
  • The coordinate of the control point is (95, 10);
  • The coordinates of the end point are (180, 80);
  • Get the slope of the starting point and the ending point according to the control point and draw a curve between them.

The final effect is:

4. The realization idea of connection

The above introduction of so much knowledge about SVG, I wonder if it gives you some ideas to implement the wiring in the map?

Hahaha, maybe we can think of the whole mind map as a whole SVG vector graph, and then draw the line with path in a specific position to realize the branches in the mind map.

And this particular position is a little bit easier to understand, because it’s a branch, so it must be somewhere between two nodes, like the root node and its first order child on the right, so we can take the right midpoint of the root node, and the left midpoint of the first order child node.

If the following straight branches are known, only the coordinates of these two points can be satisfied (blue dots in the figure) :

But what about a curved path like this?

It can be implemented using the quadratic Bezier curve Q we mentioned above, where one of the coordinates on the root node can be used as the beginning of the curve, and one of the coordinates on the branch topic can be used as the end of the curve. But we know clearly that it is not enough to only know the coordinates of the starting point and the ending point. We also need a control point to achieve a curve well.

The screenshot above shows the mind Map implementation on XMind. It may be hard to see the relationship between lines and nodes, but let’s move the branches to the far right of the central theme:

Now, it’s a little bit more intuitive (assuming we give these points another coordinate) :

  • Starting point :(x1, y1) => (100, 60)
  • Control point :(x1, y2) => (100, 10)
  • End :(x2, y2) => (150, 10)

(The coordinates here are the starting point of the top left corner of the mind map as a whole.)

To implement such a curve, all you need is the following line:

<svg>
  <path
    d="M100 60 Q 100 10 150 10"
    fill="transparent"
    stroke="rgb(102, 102, 102)"
    stroke-width="4"
  ></path>
</svg>
Copy the code

Yi ~ is not feeling a little inside taste [chuckle ~].

We just need to implement a message passed into the two DOM, and then calculate the starting point, end point, and control point method can easily realize the connection.

Refer to the article

Knowledge is priceless, support original.

Reference article:

  • MDN-SVG
  • Getting Started with SVG: How to Write by Hand

After the language

This article is mainly introduced here, the full text read down to hand a mind map seems very simple. That’s because there are a lot of problems we haven’t considered, such as how to implement different kinds of mind maps, box selection of nodes, drag and drop of nodes and so on.

As mentioned in the introduction, this article mainly provides some mind mapping implementation solutions (non-architectural aspects) and introduces some knowledge related to SVG. Nerdy is going to build a project and masturbate it with you through actual combat, so please give me a thumbs up and follow me, otherwise you might miss me. thank you