Several small projects that I have open sourced over the years

The author is an ordinary front-end worker and has never participated in the co-construction of any popular open source projects, so every time I say that I love open source, I feel guilty. Small projects, although there are only a few from time to time star , but they also give me a quiet github adds a bit of popularity. This article will recommend the author's open source projects to everyone. You are welcome to give a follow~

Douban api

Name: douban_api

Introduction: Douban api service

Address: https://github.com/wanglin2/douban_api

star: 109, fork: 23

This project is the first project that the author uploaded to github上 . The reason is that the author made an e-book website and needed to enter books. At first, I manually went to Douban to search, and then copied and pasted the book information, which was not only tiring, but also The efficiency is very low, so I used the official Douban api to do a search function, and then filled it with one click, which greatly liberated the author's hands, but the good times did not last long, and the Douban official api went offline and never went online again.

The author who is used to one-click filling can never go back to the days of manual copy and paste, so I made this small project.

The implementation of this project is also very simple, because the web pages of Douban are all straight out of the back end, so the PhantomJS headless browser is used to crawl Douban related pages, and then use cheerio to parse the page structure and get the relevant DOM data of the node can be returned through json . The biggest disadvantage is that it is very slow.

This project was uploaded three years ago, because the author's e-book website is basically not maintained in the later period, so this project has not been maintained anymore, but the one from time to time star also made it the author's first Breakthrough 100 star project, and this project is now running normally, which is enough to show that the web version of Douban has not been changed for so many years.

markjs (markup library)

Name: markjs

Introduction: A plug-in polygon annotation library

Address: https://github.com/wanglin2/markjs

star: 29, fork: 11

This project is a framework-independent library. Its main function is to manually draw polygons, which are generally used to mark images on images:

This project comes from the needs of work. I remember that shortly after I joined the new company, there was a need to draw polygons on the picture. Obviously, this is to use svg or canvas to achieve, although these two things have not been used before, but because I have a little understanding of canvas , I decided to use canvas .

At first, reusability was not considered at all, and it was directly coupled with business code. However, with the repeated changes of requirements, from simply drawing a polygon to needing to be editable, to needing to draw multiple polygons, and then to support it for a while When editing a polygon, hide other polygons for a while and do not need to hide them, so the author decided to make a separate library to support all these requirements through configuration. The relatively independent functions are made into plug-ins, which can be registered and used on demand, but there are some problems in the final implementation. If multiple instances are created on a page at the same time, the plug-in registration will take effect on all instances.

There are also some small gains in the process of doing this project. One is to solve one of my previous doubts, how to judge whether the mouse has clicked on a polygon, the realization is actually to draw the same path as the polygon, and then use the isPointInPath() method To judge whether a point is in the current path; the other is to use some simple mathematical knowledge to achieve some interesting small functions, such as judging the intersection of line segments, adsorption functions, etc.

mind-map

Name: mind-map

Introduction: Implementation of a web mind map

Address: https://github.com/wanglin2/mind-map

star: 68, fork: 18

The cause of this project is rather confusing. The author can't remember it. It should be that the author accidentally discovered that it is open source when using Baidu Brain Map , and then I was going to look at its source code, but I found that this project has been more than 4 years old. It hasn’t been updated, and I don’t like the way the code is organized. The important thing is that I don’t understand it. In addition, I also found that there are many online mind map products on the market, and they have to pay for it. The author was shocked and felt that it was difficult. So I decided to make an open source version myself, so that everyone can use the free mind map~~~

The ideal is very beautiful, the level is very ashamed, it is really difficult, there are two main difficulties:

1. Performance problem, it is perfect when there are few nodes, but it becomes stuck when there are too many nodes, especially in the case of multiple selections, it should be related to the implementation algorithm of node layout, although each re-rendering adds batches The optimization of rendering is only a temporary solution. In addition, because of these performance optimizations, the implementation of the code has become more chaotic.

2. The author has limited ability and did not realize the fishbone diagram. This should be because the realization idea is wrong. At present, we are thinking about the realization of the graphics of each structure separately, and do not think from a higher level. If we split each small structure It may be easier to implement it separately and then combine it.

tiny_whiteboard (whiteboard)

Name: tiny_whiteboard

Introduction: An online small whiteboard, similar to excalidraw

Address: https://github.com/wanglin2/tiny_whiteboard

star: 38, fork: 10

The author used an online hand-drawn style whiteboard excalidraw to write and draw before. The function is very powerful. If you use it, you will want to realize it yourself. I wrote a small article on the topic of dragging, rotating, and scaling, but as I wrote it, I found that the amount of code to implement these functions is quite large, and since the full life cycle of the rectangle has been realized, it is better to By the way, add circles, polylines, text, pictures, etc., just like this, refer to the function of excalidraw to complete this project.

This library is also framework-independent. After all, now react and vue two frameworks may divide the world roughly equally, so it is best not to rely on a specific framework.

This small project implements some basic functions of the whiteboard, but also has some obvious flaws:

1. Because the click detection of the graph is realized by the distance between two points and the distance from the point to the straight line, graphs such as Bezier curves or ellipses are not supported, because each point of them cannot be known, so also cannot be detected.

2. Select multiple graphics and rotate at the same time. At present, there is no good way to realize it. Graphics such as free writing and polylines are no problem, because rotation is to rotate every point that constitutes them, but the rendering of other graphics It is not determined by one point, but by the common determination of position, width and height, so there is no way to rotate the points on the graph.

3. Mirroring is not supported. This was not considered in the initial design, which made it difficult to implement later.

code-run (code online running tool)

Name: code-run

Introduction: a code online editing preview tool, similar to codepen, jsbin, jsfiddle, etc.

Address: https://github.com/wanglin2/code-run

star: 186, fork: 62

This project is the author star the project with the largest number, it is an online front-end code running tool similar to CodePen , based on Vue3.x version.

The author's company initially had an intranet version based on the open source project codepan , but its interface is really ugly, and its functions are poor, and CodePen is much better. But they are commercial products and not open source, so I decided to refer to CodePen to make an open source version.

整体实现是比较清晰的，单独编辑html 、 js 、 css三部分代码，然后组装成一个完整的html结构, and finally pass in this html string for preview through the iframe srcdoc attribute of ---99568d6f11c9771de0704f2651a7fc73---.

The page layout is basically restored CodePen , supports switching structure, and supports more structures than CodePen .

The code editor does not use CodeMirror , but chooses Monaco Editor because it is very powerful. After all, it is the same source as VSCode . It comes with code input prompts out of the box. The disadvantage is that it is very complicated and huge. It is really too simple and difficult to use. However, the author successfully supported the theme of the transplant VSCode after a lot of tossing, so in terms of appearance, he is still very good at it. I am ashamed.

In addition to the basic html , js , css , the official compilation tools of various preprocessing languages and extended languages are supported for editing code languages. Pug , Less , TypeScript , etc.

最后就是Vue单文件的特别支持， Vue单文件来写demo ，所以直接支持Vue Editing a single file is very convenient.

Of course, there are many other interesting small functions, and those who are interested can experience it by themselves~

At present, this project has also successfully eliminated the previous tools within the author's company.

Summarize

The above are a few small projects that the author has open sourced. Frankly speaking, except for code-run is relatively mature, there are many other pits, and it is not recommended to use it in actual projects, but for simple usage scenarios It's still competent, just like tiny_whiteboard is now the author's official drawing tool hahaha (I made it myself, even if I cry).