Method for inserting new nodes among connected nodes based on AntV X6 graph editing engine

Abstract

The invention relates to the technical field of electronic software, in particular to a method for inserting a new node between connected nodes based on an AntV X6 graph editing engine, which comprises the following steps of: after a user initializes a canvas in the AntV X6 graph editing engine, dragging the nodes into the canvas, and obtaining the size and position contour information of the nodes by calling a getBBox method of the nodes, by comparing the intersection conditions of the four contour lines of the node and all the edges in the canvas, whether the node is dragged to the edges or not can be judged, if the node coincides with a certain edge, insertion logic can be achieved, and compared with the mode that in the prior art, the edges between A and B need to be manually deleted, then C is dragged to the canvas, and the edges of A-C and C-B need to be manually created, the insertion logic can be achieved. According to the technical scheme, a user only needs to directly drag the node C to the edge connected with the node A and the node B, and the automatic insertion operation of the node can be triggered.

Description

Technical Field

[0001] The present invention relates to the field of electronic software technology, and in particular to a method for inserting a new node between connected nodes based on the AntV X6 graph editing engine. Background Art

[0002] When editing a flowchart, you often need to insert a new node between connected nodes. For example, you need to insert a new node C between nodes A and B that are already connected by a line. However, many diagram editors on the market do not support this insertion operation. Users usually need to manually delete the line between nodes A and B, then create a new node C, and manually connect nodes A and C, and nodes C and B. This series of steps is not only cumbersome, but also greatly reduces editing efficiency.

[0003] As one of the mainstream graph editors in the JavaScript field, its core concepts include canvas (Graph), node (Node), edge (Edge) and connection pile (Port). After the canvas is initialized, it will generate an editable area on the web page. Users can access node-related data through the canvas instance and operate the canvas content. A node can contain zero or more connection piles. By connecting the connection piles of two nodes, users can create edges to achieve connections between nodes. In AntVX6, each node and edge has a unique ID. The edge contains two attributes, source and target, which represent the ID of the source node and the ID of the target node respectively. Through these two attributes, users can easily obtain the relationship between nodes and ensure that the nodes in the canvas are consistent at the view level and the data level. Based on these core concepts, users can use AntVX6 to create and edit complex flowcharts.

[0004] However, AntVX6 also does not support node insertion in its native state. When users use AntVX6 to edit flowcharts, if they need to insert new nodes between connected nodes, they still need to follow the cumbersome manual steps mentioned above. Summary of the invention

[0005] The purpose of the present invention is to provide a method for inserting new nodes between connected nodes based on the AntV X6 graph editing engine, so as to solve the problem that when users use AntVX6 to edit flowcharts, if they need to insert new nodes between connected nodes, they still need to follow cumbersome manual steps.

[0006] To achieve the above object, the present invention provides a method for inserting a new node between connected nodes based on the AntV X6 graph editing engine, and the method for inserting a new node between connected nodes based on the AntV X6 graph editing engine comprises the following steps:

[0007] S1: After the AntVX6 graph editing engine initializes the canvas, drag the node into the canvas;

[0008] S2: By calling the getBBox method of the node, the size and position outline information of the node can be obtained;

[0009] S3: By comparing the intersection of the four outlines of the node with all the edges in the canvas, it can be determined whether the node is dragged to the edge;

[0010] S4: If the node overlaps with an edge, the insertion logic can be implemented;

[0011] S5: If the node does not overlap with an edge, a new node is created.

[0012] Among them, the specific steps of step S1 are: after the AntVX6 graph editing engine initializes the canvas, when the user drags the node to the canvas and lets go, the validateNode callback function of the Graph instance will be triggered. If the function returns true or a fulfilled Promise, the node will be added to the canvas, otherwise, the node will not be added.

[0013] Among them, in step S2, the size and position outline information of the node is obtained, including four line segment attributes of topLine, bottomLine, leftLine, and rightLine. The four line segment attributes represent the top, bottom, left, and right line segments of the node bounding box respectively. The start and end attributes of the line segment record the x and y coordinates of the line segment on the canvas.

[0014] The specific steps of step S3 are:

[0015] Call the getEdges method of the Graph object to get all the edges in the canvas;

[0016] Traverse the edge array and call the findViewByCell method of the Graph object for each edge to obtain the path attribute under its view attribute;

[0017] The intersectsWithLine method under path accepts a Line parameter. If the path intersects with the passed Line, it returns the intersection point, otherwise it returns null;

[0018] Traverse the four contour line arrays of the node, call the intersectsWithLine method for each contour line, and pass in the corresponding Line parameter. If the return value of the intersectsWithLine method is not null in any loop, it means that the currently traversed edge intersects with the node.

[0019] The specific steps of step S4 are:

[0020] If a node overlaps with an edge, the expected insertion position of the new node is determined through the source and target attributes on the edge;

[0021] Delete the crossed edges through the removeEdge method, and then create the node to be inserted in the canvas through the addNode method;

[0022] Create two new connecting edges through the addEdge method of the Graph instance.

[0023] The present invention provides a method for inserting a new node between connected nodes based on the AntV X6 graph editing engine. After the user initializes the canvas in the AntV X6 graph editing engine, the user drags the node to the canvas. By calling the getBBox method of the node, the size and position outline information of the node can be obtained. By comparing the intersection of the four outlines of the node with all the edges in the canvas, it can be determined whether the node is dragged to the edge. If the node overlaps with an edge, the insertion logic can be implemented. Compared with the prior art method of manually deleting the edge between A and B, dragging C to the canvas and manually creating the edges of AC and CB, the user of this technical solution only needs to directly drag node C to the edge connecting the A and B nodes to trigger the automatic insertion operation of the node. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0025] Figure 1 It is a flowchart of the steps of the method for inserting a new node between connected nodes based on the AntV X6 graph editing engine provided by the present invention. DETAILED DESCRIPTION

[0026] Embodiments of the present invention are described in detail below, examples of which are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present invention, and should not be construed as limiting the present invention.

[0027] See also Figure 1 The present invention provides a method for inserting a new node between connected nodes based on the AntV X6 graph editing engine. The method for inserting a new node between connected nodes based on the AntV X6 graph editing engine comprises the following steps:

[0028] S1: After the AntVX6 graph editing engine initializes the canvas, drag the node into the canvas;

[0029] S2: By calling the getBBox method of the node, the size and position outline information of the node can be obtained;

[0030] S3: By comparing the intersection of the four outlines of the node with all the edges in the canvas, it can be determined whether the node is dragged to the edge;

[0031] S4: If the node overlaps with an edge, the insertion logic can be implemented;

[0032] S5: If the node does not overlap with an edge, a new node is created.

[0033] In this embodiment, after the user initializes the canvas in the AntV X6 graph editing engine, the user drags the node into the canvas. By calling the node's getBBox method, the node's size and position outline information can be obtained. By comparing the intersection of the node's four outlines with all the edges in the canvas, it can be determined whether the node is dragged to the edge. If the node overlaps with an edge, the insertion logic can be implemented. Compared with the prior art method of manually deleting the edge between A and B, dragging C to the canvas and manually creating the edges of AC and CB, the user of this technical solution only needs to directly drag node C to the edge connecting nodes A and B to trigger the automatic insertion operation of the node.

[0034] Furthermore, the specific steps of step S1 are: after the AntVX6 graph editing engine initializes the canvas, when the user drags a node to the canvas and lets go, the validateNode callback function of the Graph instance will be triggered. If the function returns true or a fulfilled Promise (FulfilledPromise), the node will be added to the canvas, otherwise, the node will not be added.

[0035] Furthermore, in step S2, the size and position outline information of the node is obtained, including four line segment attributes of topLine, bottomLine, leftLine, and rightLine. The four line segment attributes represent the top, bottom, left, and right line segments of the node bounding box, respectively. The start and end attributes of the line segment record the x and y coordinates of the line segment on the canvas.

[0036] Furthermore, the specific steps of step S3 are:

[0037] Call the getEdges method of the Graph object to get all the edges in the canvas;

[0038] Traverse the edge array and call the findViewByCell method of the Graph object for each edge to obtain the path attribute under its view attribute;

[0039] The intersectsWithLine method under path accepts a Line parameter. If the path intersects with the passed Line, it returns the intersection point, otherwise it returns null;

[0040] Traverse the four contour line arrays of the node, call the intersectsWithLine method for each contour line, and pass in the corresponding Line parameter. If the return value of the intersectsWithLine method is not null in any loop, it means that the currently traversed edge intersects with the node.

[0041] Furthermore, the specific steps of step S4 are:

[0042] If a node overlaps with an edge, the expected insertion position of the new node is determined through the source and target attributes on the edge;

[0043] Delete the crossed edges through the removeEdge method, and then create the node to be inserted in the canvas through the addNode method;

[0044] Two new connecting edges are created through the addEdge method of the Graph instance, where the source of the first edge points to node A and the target points to node C; the source of the second edge points to node C and the target points to node B. In this way, the new node is successfully inserted and connected to the previous and next nodes.

[0045] In summary, through this technical solution, users will experience significant improvements when editing flowcharts. Specifically, users can directly drag the new node to the edge between the two nodes to be inserted, and then the new node will be automatically added to the canvas. More importantly, the system will automatically create a new edge to connect the newly inserted node with the nodes before and after it, so as to easily implement the node insertion operation. This improvement not only greatly simplifies the user's operating process and reduces cumbersome manual steps, but also significantly improves the efficiency of flowchart editing and user experience. Users no longer need to manually delete the original edges and then create new connection edges one by one, but can complete the insertion and connection of nodes with a simple drag action. In addition, this technical solution also has good compatibility and scalability. It can realize the automatic insertion function of nodes without changing the original core functions of AntVX6, providing users with a more convenient and efficient flowchart editing experience. At the same time, this technical solution is also easy to integrate and expand with other functions to meet the more diverse needs of users.

[0046] What is disclosed above is only a preferred embodiment of the present invention, and it certainly cannot be used to limit the scope of rights of the present invention. Ordinary technicians in this field can understand that all or part of the processes of the above embodiment and equivalent changes made according to the claims of the present invention still fall within the scope of the invention.

Claims

1. A method for inserting a new node between connected nodes based on AntV X6 graph editing engine, characterized in that: The steps include: S1: After the AntVX6 graph editing engine initializes the canvas, drag the node into the canvas; S2: By calling the getBBox method of the node, the size and position outline information of the node can be obtained; S3: By comparing the intersection of the four outlines of the node with all the edges in the canvas, it can be determined whether the node is dragged to the edge; S4: If the node overlaps with an edge, the insertion logic can be implemented; S5: If the node does not overlap with an edge, a new node is created.

2. The method for inserting a new node between connected nodes based on the AntV X6 graph editing engine as claimed in claim 1, characterized in that: The specific steps of step S1 are: after the AntVX6 graph editing engine initializes the canvas, when the user drags a node to the canvas and lets go, the validateNode callback function of the Graph instance will be triggered. If the function returns true or a fulfilled Promise, the node will be added to the canvas, otherwise, the node will not be added.

3. The method for inserting a new node between connected nodes based on the AntV X6 graph editing engine as claimed in claim 2, characterized in that: In step S2, the size and position outline information of the node is obtained, including four line segment attributes: topLine, bottomLine, leftLine, and rightLine. The four line segment attributes represent the top, bottom, left, and right line segments of the node bounding box, respectively. The start and end attributes of the line segment record the x and y coordinates of the line segment on the canvas.

4. The method for inserting a new node between connected nodes based on AntV X6 graph editing engine as claimed in claim 3, characterized in that: The specific steps of step S3 are: Call the getEdges method of the Graph object to get all the edges in the canvas; Traverse the edge array and call the findViewByCell method of the Graph object for each edge to obtain the path attribute under its view attribute; The intersectsWithLine method under path accepts a Line parameter. If the path intersects with the passed Line, it returns the intersection point, otherwise it returns null; Traverse the four contour line arrays of the node, call the intersectsWithLine method for each contour line, and pass in the corresponding Line parameter. If the return value of the intersectsWithLine method is not null in any loop, it means that the currently traversed edge intersects with the node.

5. The method for inserting a new node between connected nodes based on AntV X6 graph editing engine as claimed in claim 4, characterized in that: The specific steps of step S4 are: If a node overlaps with an edge, the expected insertion position of the new node is determined through the source and target attributes on the edge; Delete the crossed edges through the removeEdge method, and then create the node to be inserted in the canvas through the addNode method; Create two new connecting edges through the addEdge method of the Graph instance.

Images