C # How to implement a simple flowchart designer,

C # How to implement a simple flowchart designer,

I have seen a lot of flowcharts developed by Window Form in the past. It supports drag-and-drop nodes to easily design beautiful flowcharts. As a programmer, I have always been curious about its internal implementation principles, I wonder how exciting it will be if I can develop a similar software one day! I have been accumulating and learning this kind of knowledge since I had such an idea, A recent chance was to implement a simple flow chart designer (although its functions are still imperfect, it is still very happy and fulfilling ).

Let's not talk about it. Let's take a look at the main interface effects:

On the left is a ListView (listView1), and on the right is a Panel (panel1 ). The following describes the main ideas:

1) drag and drop are allowed. Set listView1 and panel1 to AllowDrop = true;

2) drag-and-drop processing of non-connection line graphics: After the listView1 item on the left is selected, you can obtain its graphics type (vro, server, or cloud ), record the current operation object type in the global variable, and drag and drop it to panel1 to obtain the corresponding graph type. First, determine whether the graph type is not a connection line, if yes, obtain the corresponding image. Use g. drawImage draws the image to the canvas. The coordinates of the image refer to the coordinates of the current mouse (drag and drop to panel1 and finally release the coordinates of the left mouse button.

3) graphic processing of the connection line type: if it is a connection line, there should be two points to determine a straight line. When the listView1 connection line is selected, the current operation object type is a connection line is recorded in the global variable. When you click on panel1, it is preferred to determine whether the Global Object of the current operation object type is a connection line. If yes, record the point clicked for the first time, and wait for the second point clicked for the record. After the second click is complete, call the method of drawing a straight line to draw a straight line in the canvas.

4) When a line is bound to a drawing, when you drag and drop the drawing, the point that the line is attached to the drawing changes with the change of the drawing position. After the final position, panel1 redraws the mesh and flowchart.

5) edit the graphic information: When you double-click panel1, the program obtains the coordinate point closest to all the graphic areas and calculates the distance to see if the set threshold value is met, if the value is smaller than the threshold value, double-click the image to edit the image.

The following code draws a grid:

1 /// <summary> 2 // draw the grid 3 /// </summary> 4 private void renderGrid () 5 {6 // The maximum and minimum values of global variable storage, as the drawing Area 7 Graphics g = this. panel1.CreateGraphics (); 8 Color color = Color. darkGray; 9 Pen p = new Pen (color, 1); 10 p. dashStyle = DashStyle. dash; 11 for (int x = 0; x <= this. panel1.Width; x = x + 20) 12 {13 PointF p1 = new PointF (x, 0); 14 PointF p2 = new PointF (x, Height); 15g. drawLine (p, p1, p2); 16} 17 18 for (int y = 0; y <= panel1.Height; y = y + 20) 19 {20 PointF p1 = new PointF (0, y); 21 PointF p2 = new PointF (Width, y); 22g. drawLine (p, p1, p2); 23 24} 25 26}View Code

The processing program for Mouse clicking on panel1 is as follows:

1 private void panelease mouseclick (object sender, MouseEventArgs e) 2 {3 int X = e. x; 4 int Y = e. y; 5 if (this. _ gObjType = "") 6 {7 return; 8} 9 if (this. _ gObjType! = "Line") 10 {11 AddObjectFromMouseLocation (X, Y, 0, 0, this. _ gObjType); 12} 13 else14 {15 // line16 if (_ lineMouseClickedCount = 1) 17 {18 _ lineX2 = e. x; 19 _ lineY2 = e. y; 20 AddObjectFromMouseLocation (_ lineX1, _ lineY1, _ lineX2, _ lineY2, this. _ gObjType); 21 22 // connection line direction judgment 23 _ lineMouseClickedCount = 0; 24 _ lineX1 = 0; 25 _ lineY1 = 0; 26 _ lineX2 = 0; 27 _ lineY2 = 0; 28} 29 else if (_ lineMouseClickedCount = 0) 30 {31 _ lineX1 = e. x; 32 _ lineY1 = e. y; 33 _ lineMouseClickedCount = 1; 34} 35 else36 {37 _ lineMouseClickedCount = 0; 38 _ lineX1 = 0; 39 _ lineY1 = 0; 40 _ lineX2 = 0; 41 _ lineY2 = 0; 42} 43 44} 45}View Code

The redraw procedure is as follows:

1 private void ReDrawAll () 2 {3 renderGrid (); 4 Graphics g = this. panel1.CreateGraphics (); 5g. smoothingMode = System. drawing. drawing2D. smoothingMode. highQuality; 6 GObject CurrObj = new GObject (); 7 Rectangle RDBMS = new Rectangle (); 8 Pen p = new Pen (Color. black); 9 // p. width = 2; 10 p. width = _ penWidth * _ zoomTimes; 11 12 Image ObjImg; 13 int xm = 0; 14 int ym = 0; 15 16 int _ maxX = 0; 17 int _ maxY = 0; 18 int _ minX = 0; 19 int _ minY = 0; 20 int _ oldW = this. panel1.Width; 21 int _ oldH = this. panel1.Height; 22 23 string IsLine = ""; 24 // Nobj = 50 is the maximum number of objects on the current canvas. 25 for (int I = 0; I <GNetworkFlow. nobj; I ++) 26 {27 CurrObj = GNetworkFlow. GObjects [I]; 28 // current object type Judgment 29 if (CurrObj. type = "") IsLine = "N/D"; 30 if (CurrObj. type = "Line") IsLine = "Y"; 31 if (CurrObj. type! = "Line") & (CurrObj. Type! = "") IsLine = "N"; 32 // 33 # region old panel1 as the canvas, nested in panel2 to achieve scroll bar 34 35 if (_ maxX <CurrObj. x2) 36 {37 _ maxX = CurrObj. x2; 38} 39 if (_ maxY <CurrObj. y2) 40 {41 _ maxY = CurrObj. y2; 42} 43 if (_ minX> CurrObj. x1) 44 {45 _ minX = CurrObj. x1; 46} 47 if (_ minY> CurrObj. y1) 48 {49 _ minY = CurrObj. y1; 50} 51 52 53 54 if (_ oldW <_ maxX-_ minX) 55 {56 this. panel1.Width = _ maxX-_ minX; 57} 58 if (_ oldH <_ m Minute-_ minY) 59 {60 this. panel1.Height = _ maxY-_ minY; 61} 62 if (this. panel1.Height <this. panel2.Height) 63 {64 this. panel1.Height = this. panel2.Height; 65} 66 if (this. panel1.Width <this. panel2.Width) 67 {68 this. panel1.Width = this. panel2.Width; 69} 70 71 # endregion72 73 74 switch (IsLine) 75 {76 case "Y": 77 arrow. drawArrow (g, p, p. brush, CurrObj. x1, CurrObj. y1, CurrObj. x2, CurrObj. y2); 78 xm = (Cur RObj. x1 + CurrObj. x2)/2; 79 ym = (CurrObj. y1 + CurrObj. y2)/2; 80 AddText (xm, ym, CurrObj. name, false); 81 break; 82 case "N": 83 RDBMS. X = CurrObj. x1; 84 RDBMS. Y = CurrObj. y1; 85 RDBMS. width = CurrObj. x2-CurrObj. x1; 86 RDBMS. height = CurrObj. y2-CurrObj. y1; 87 if (CurrObj. type! = String. empty) 88 {89 ObjImg = FindGObjectTypeImage (CurrObj. type); 90g. drawImage (ObjImg, RDBMS); 91 AddText (CurrObj. x1, CurrObj. y1, CurrObj. name, true); 92 GNetworkFlow. adjustpointer to (CurrObj. name); 93} 94 break; 95} 96} 97 98}View Code

The following functions will be improved:

1) serialization: You can serialize and deserialize images, save serialized information to the database, or load images from the database;

2) Other attributes and methods must be attached to the graphic node to record more information for the process, such as permission configuration, current person handling, and what node is next;

3) as the drawing function is enhanced, the color of the drawing can be dynamically modified to differentiate the color of the flow in different nodes;

4) Whether the layout optimization algorithm can automatically arrange the images based on the size of the canvas...

Today, the interface is beautified as follows: