Drawing scene node arrangement method and device, computer device and storage medium

Abstract

The application relates to a node arrangement method and device in a drawing scene, computer equipment and a storage medium. The method comprises the following steps: acquiring node attribute information and node layout information of a node to be arranged; constructing a node tree structure corresponding to the node to be arranged according to the node attribute information; traversing each node branch in the node tree structure to obtain node positions and node widths of each node branch in the node tree structure; updating the node layout information according to the node positions and the node widths; and arranging the node to be arranged according to the updated node layout information to obtain a node arrangement result. The node arrangement result with neat node layout can be obtained by using the method.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, computer device, and storage medium for arranging nodes in a drawing scene. Background Technology

[0002] With the development of computer technology, drawing components suitable for web development have emerged, such as jsPlumb. These drawing components provide drag-and-drop and connection functions for HTML (Hypertext Markup Language) elements, and can draw lines of different types and styles. In modern browsers, drawing components mainly use SVG (Scalable Vector Graphics) technology or Canvas (HTML canvas element) technology, while for browsers below IE8 (Internet Explorer) (including IE8), drawing components mainly use VML (Vector Markup Language) technology.

[0003] In traditional technologies, drawing components provide interfaces for many node operations, allowing users to drag and drop HTML elements, connect them, and perform other operations.

[0004] However, the drawing component does not provide the function of freely arranging nodes. When using the drawing component to build a webpage, the node layout will become messy after the user drags and drops it multiple times. Summary of the Invention

[0005] Therefore, it is necessary to provide a method, apparatus, computer device, and storage medium for arranging nodes in a drawing scene that can achieve a neat layout of nodes, in order to address the above-mentioned technical problems.

[0006] A method for arranging nodes in a drawing scene, the method comprising:

[0007] Obtain the node attribute information and node layout information of the nodes to be arranged;

[0008] Based on the node attribute information, construct the node tree structure corresponding to the nodes to be arranged;

[0009] Traverse each node branch in the node tree structure to obtain the node position and node width of each node branch in the node tree structure;

[0010] Update the node layout information based on the node position and node width;

[0011] The nodes to be arranged are arranged according to the updated node layout information to obtain the node arrangement result.

[0012] A node arrangement device in a drawing scene, the device comprising:

[0013] The acquisition module is used to acquire the node attribute information and node layout information of the nodes to be arranged;

[0014] The construction module is used to construct a node tree structure corresponding to the nodes to be arranged based on the node attribute information.

[0015] The traversal module is used to traverse each node branch in the node tree structure to obtain the node position and node width of each node branch in the node tree structure.

[0016] The update module is used to update the node layout information based on the node position and node width.

[0017] The arrangement module is used to arrange the nodes to be arranged according to the updated node layout information, and obtain the node arrangement result.

[0018] A computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program performing the following steps:

[0019] Obtain the node attribute information and node layout information of the nodes to be arranged;

[0020] Based on the node attribute information, construct the node tree structure corresponding to the nodes to be arranged;

[0021] Traverse each node branch in the node tree structure to obtain the node position and node width of each node branch in the node tree structure;

[0022] Update the node layout information based on the node position and node width;

[0023] The nodes to be arranged are arranged according to the updated node layout information to obtain the node arrangement result.

[0024] A computer-readable storage medium having a computer program stored thereon, the computer program performing the following steps when executed by a processor:

[0025] Obtain the node attribute information and node layout information of the nodes to be arranged;

[0026] Based on the node attribute information, construct the node tree structure corresponding to the nodes to be arranged;

[0027] Traverse each node branch in the node tree structure to obtain the node position and node width of each node branch in the node tree structure;

[0028] Update the node layout information based on the node position and node width;

[0029] The nodes to be arranged are arranged according to the updated node layout information to obtain the node arrangement result.

[0030] The node arrangement method, device, computer equipment, and storage medium in the above drawing scenario can obtain the node attribute information and node layout information of the nodes to be arranged. By using the node attribute information, a node tree structure corresponding to the nodes to be arranged can be constructed. Then, by traversing each node branch in the node tree structure, the node position and node width of each node branch in the node tree structure can be obtained. Based on the node position and node width, the node layout information can be updated. Based on the updated node layout information, the nodes to be arranged can be arranged to obtain a neatly arranged node arrangement result. Attached Figure Description

[0031] Figure 1 This is a flowchart illustrating a node arrangement method in a drawing scene in one embodiment;

[0032] Figure 2 This is a schematic diagram of the nodes to be arranged in one embodiment;

[0033] Figure 3 This is a schematic diagram of a node tree structure in one embodiment;

[0034] Figure 4 This is a flowchart illustrating the node arrangement method in a drawing scene in another embodiment;

[0035] Figure 5 This is a schematic diagram of the hierarchical relationship of the nodes to be arranged in one embodiment;

[0036] Figure 6 This is a schematic diagram of a node tree structure in another embodiment;

[0037] Figure 7 This is a schematic diagram of the node arrangement result in one embodiment;

[0038] Figure 8 This is a structural block diagram of a node arrangement device in a drawing scene in one embodiment;

[0039] Figure 9 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0040] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0041] In one embodiment, such as Figure 1 As shown, a method for arranging nodes in a drawing scene is provided. This embodiment illustrates the application of this method to a terminal. It is understood that this method can also be applied to a server, or to a system including both a terminal and a server, and implemented through interaction between the terminal and the server. The server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal can be a smartphone, tablet, laptop, desktop computer, smart speaker, smartwatch, etc., but is not limited to these. The terminal and server can be directly or indirectly connected via wired or wireless communication, which is not limited herein. In this embodiment, the method includes the following steps:

[0042] Step 102: Obtain the node attribute information and node layout information of the nodes to be arranged.

[0043] Here, "nodes to be arranged" refers to elements within the drawing component that can be freely dragged by the user. For example, ... Figure 2 As shown, each rectangular element and the circular element including the "+" sign in the diagram represents a node to be arranged. Node attribute information refers to information used to characterize the hierarchical relationship between the nodes to be arranged. For example, node attribute information can specifically refer to the node identifier of the node to be arranged and the node identifier of its parent element. For instance, node attribute information can specifically refer to the ID (node ​​identifier) ​​and PID (parent element node identifier) ​​of the node to be arranged, where both ID and PID are in the form of UUID (Universally Unique Identifier).

[0044] The node attribute information is generated when creating the nodes to be arranged. For example, when creating a node to be arranged, the terminal obtains the ID of the parent element directly connected to the node to be arranged as the PID, and then generates a UUID as the ID of the node to be arranged. The ID and PID are used as the node attribute information of the node to be arranged, and it is added to the preset node list. It should be noted that for the root node, its node attribute information includes a special attribute identifier to distinguish it from other nodes to be arranged. In addition, for nodes to be arranged that belong to the same parent element, there will be an additional sorting field to describe its position. For example, for nodes to be arranged that belong to the same parent element, the sorting field can be in the form of 1, 2, 3, 4, etc., from left to right.

[0045] The node layout information describes the position of the nodes to be arranged within the drawing component. Specifically, node layout information can refer to the positioning information of the nodes to be arranged. For example, node layout information can specifically refer to the `left` and `top` properties. The `left` property specifies the left edge of the node to be arranged, describing the offset between the left outer margin of the node and the left boundary of its containing block. The `top` property specifies the height of the node to be arranged, describing the distance from the top of the node to the default top. The default margin and default top can be set as needed; for example, the default margin can be the left boundary of the drawing canvas, and the default top can be the top boundary of the drawing canvas.

[0046] Specifically, after a user freely drags and drops a node on the page corresponding to the drawing component, the drawing component sends a node arrangement request to the terminal. The terminal responds to the node arrangement request, retrieves the node attribute information and node layout information of the nodes to be arranged from the preset node list, and then arranges the nodes.

[0047] Step 104: Based on the node attribute information, construct the node tree structure corresponding to the nodes to be arranged.

[0048] In this context, a tree structure refers to a data structure where data elements have a one-to-many tree-like relationship. In a tree structure, the root node has no predecessor node, each other node has exactly one predecessor node, leaf nodes have no successors node, and each other node can have one or more successors node. In this embodiment, the node tree structure refers to a data structure where the nodes to be arranged have a one-to-many tree-like relationship. The predecessor node of a node is the node corresponding to its parent element, and the successor node is the node corresponding to its child element when the node is the parent element.

[0049] Specifically, the node attribute information records the node identifier of each node to be arranged and the node identifier of the parent element of the node to be arranged. Based on the node attribute information, the terminal can determine the hierarchical relationship between the nodes to be arranged, thereby constructing the node tree structure corresponding to the nodes to be arranged.

[0050] Step 106: Traverse each node branch in the node tree structure to obtain the node position and node width of each node branch in the node tree structure.

[0051] In this context, a node branch refers to a branch structure within a node tree structure, consisting of the node to be arranged and all its child nodes, corresponding to the node to be arranged. For example, when the node to be arranged is a leaf node (i.e., there are no subsequent nodes), its corresponding node branch is the node itself. When the node to be arranged is a non-leaf node (i.e., there are subsequent nodes), its corresponding node branch is the tree structure consisting of the node and its child nodes.

[0052] The node position includes the position of the node branch within its own node hierarchy and the position of each child node within its hierarchy. The current node hierarchy refers to the node hierarchy of the root node within the node branch, and the child node hierarchy refers to the node hierarchy of the child nodes within the node branch. The node hierarchy is determined by the node's position within the node tree structure. For example, the node hierarchy of the root node in the node tree structure is the highest node hierarchy, the node hierarchy of the directly connected child nodes to the root node is the next highest node hierarchy, and so on, thus obtaining the node hierarchy of each node. The position of a node branch within its node hierarchy (including its current node hierarchy and the positions of each child node) refers to the shortest distance between all nodes within each node hierarchy corresponding to the node branch and a preset default boundary. When a node branch has no child nodes, its node position is the preset position. When a node branch has child nodes, its node position includes both its current node hierarchy position and the positions of its child node hierarchies. The preset position can be set as needed. It should be noted that, for ease of calculation, all node positions involved in this application are quantified values, i.e., unitless numerical values. For example, to facilitate calculation, the preset position can be quantized as 0.

[0053] The node width includes the width of the node branch at its current node level and the width of each child node level. The width of a node branch at its current node level (including the width of the branch at its current node level and the width of each child node level) refers to the total node width of all nodes at that level. The total node width is the distance between the leftmost and rightmost nodes at that level. It should be noted that the width of the current node level is a preset width, while the width of each child node level needs to be determined based on the total node width of all nodes at that level. When a node branch has no child nodes, its node width is the preset width. When a node branch has child nodes, its node width includes the width of both the current node level and the width of its child node levels. The preset width can be set as needed. It should be noted that, for ease of calculation, all node widths mentioned in this application are quantized values, i.e., unitless numerical values. For example, for ease of calculation, the preset width can be quantized to 1.

[0054] Specifically, after obtaining the node tree structure, the terminal determines the node branch corresponding to each node to be arranged and its branch level based on the node tree structure. It then traverses the node branches level by level according to the branch level to obtain the node position and width of each branch. The method for traversing the node branches level by level can be a depth-first traversal, that is, traversing from the root node of the node tree structure. If a node has child nodes, the child nodes are processed first until a leaf node is found, and then logical processing is performed level by level from the leaf node upwards. The node branch level is determined by the position of the node to be arranged (i.e., the root node of the node branch) in the node tree structure. For example, when the node to be arranged is the root node of the node tree structure, the branch level of the node to be arranged is the highest level; when the node to be arranged is a child node of the root node, the branch level of the node to be arranged is the second highest level, and so on, to obtain the branch levels of all node branches.

[0055] Specifically, when performing a depth-first traversal of each node branch in the node tree structure, the terminal first determines the lowest-level node branch and then traverses upwards level by level from the lowest-level branch to obtain the node position and width of each branch. During this upward traversal, the terminal determines the node position and width of the branch based on its child nodes. When a node branch has no child nodes (i.e., it is a leaf node), the terminal sets the node position and width to a preset value. When a node branch has child nodes, the terminal determines the node position and width based on the child node positions and widths.

[0056] Specifically, when determining the node position and width of a branch based on the position and width of its child nodes, if the branch contains only a single child node, the terminal obtains the first node position and width of that single child node. Based on the first node position, the terminal determines the branch's node position, and based on the first node width, it determines the branch's node width. If the branch contains at least two child nodes, the terminal obtains the second node position, second node width, and child node level of both child nodes. Based on these information, the terminal determines the branch's node position and width. It should be noted that the first and second node positions refer to the child node's position within its current node level, and the first and second node widths refer to the child node's width within its current node level.

[0057] Step 108: Update the node layout information based on the node position and node width.

[0058] Specifically, after obtaining the node positions and widths, the initial arrangement of nodes to be arranged is completed. The terminal can calculate the new horizontal position of each node to be arranged based on its position and width, and the new vertical position based on its node hierarchy. By combining the horizontal and vertical positions, new positioning information for each node to be arranged is obtained, which can then be used to update the node layout information. It should be noted that, as mentioned earlier, the node positions and widths in this embodiment are quantified values. When calculating the new horizontal position of each node to be arranged, the actual width of the node to be arranged must also be considered, as this actual width has been pre-set. The new vertical position of the node to be arranged is the node hierarchy multiplied by the pre-set height of each node level. In the node tree structure, the node hierarchy of the root node is the first level, the node hierarchy of the child nodes directly connected to the root node is the second level, and so on, thus obtaining the node hierarchy corresponding to each node to be arranged. For example, ... Figure 3 In the node tree structure shown, nodes 5, 6, and 7 are located at the fourth level, so their vertical position is 4 * the height of each level's nodes. For example, the horizontal position can be represented by the `left` attribute, and the vertical position by the `top` attribute.

[0059] Step 110: Arrange the nodes to be arranged according to the updated node layout information to obtain the node arrangement result.

[0060] Specifically, after obtaining the updated node layout information, the terminal can arrange the nodes to be arranged according to the updated layout information to obtain the node arrangement result. One specific arrangement method is to trigger a React (a JavaScript library for building user interfaces) update strategy to re-render based on the updated node layout information. The terminal will instruct React to compare data based on the updated node layout information, and through the render function, build a new virtual DOM (Document Object Model) tree. This tree is compared with the old DOM tree to identify the real DOM that needs updating on the page corresponding to the drawing component. New HTML is then regenerated based on the required real DOM updates. After obtaining the new HTML, React will instruct the browser to re-render based on the new HTML. Once rendering is complete, the node arrangement result is obtained.

[0061] The node arrangement method in the above drawing scenario obtains the node attribute information and node layout information of the nodes to be arranged. It can use the node attribute information to construct a node tree structure corresponding to the nodes to be arranged. Then, by traversing each node branch in the node tree structure, the node position and node width of each node branch in the node tree structure can be obtained. Based on the node position and node width, the node layout information can be updated. The nodes to be arranged are then arranged according to the updated node layout information to obtain a neatly arranged node arrangement result.

[0062] In one embodiment, constructing a node tree structure corresponding to the nodes to be arranged based on node attribute information includes:

[0063] Determine the hierarchical relationship between the nodes to be arranged based on the node attribute information;

[0064] Based on the hierarchical relationship, construct a node tree structure corresponding to the nodes to be arranged.

[0065] Among them, the hierarchical relationship refers to the parent-child node correspondence between the nodes to be arranged.

[0066] Specifically, the node attribute information records the node identifier of each node to be arranged and the node identifier of the parent element of the node to be arranged. Based on the node attribute information, the terminal can determine the hierarchical relationship between the nodes to be arranged, thereby constructing the node tree structure corresponding to the nodes to be arranged.

[0067] In this embodiment, by determining the hierarchical relationship between the nodes to be arranged based on the node attribute information, the hierarchical relationship can be used to construct a node tree structure corresponding to the nodes to be arranged.

[0068] In one embodiment, the traversal includes a depth-first traversal, which traverses each branch of the node tree structure to obtain the node position and node width of each branch of the node tree structure, including:

[0069] Based on the node tree structure, determine the node branch level of each node branch;

[0070] Based on the node branch hierarchy, traverse upwards level by level from the lowest level node branch to obtain the node position and node width of each node branch.

[0071] Specifically, the terminal will determine the node branch corresponding to each node to be arranged based on the node tree structure, and determine the node branch level of the corresponding node branch according to the position of the node to be arranged in the node tree structure. Then, based on the node branch level, it will traverse from the lowest level node branch to the top level to obtain the node position and node width of each node branch.

[0072] In this embodiment, by determining the node branch level of each node branch based on the node tree structure, it is possible to traverse from the lowest level node branch upwards level by level according to the node branch level, thereby obtaining the node position and node width of each node branch.

[0073] In one embodiment, based on the node branch hierarchy, the nodes are traversed level by level from the lowest level to obtain the node position and node width of each branch, including:

[0074] When there are no child nodes in the currently traversed node branch, the node position of the node branch is determined to be the preset position and the node width is the preset width;

[0075] When there is only a single child node in the currently traversed node branch, obtain the first node position and the first node width of the single child node, determine the node position of the node branch based on the first node position, and determine the node width of the node branch based on the first node width.

[0076] When there are at least two child nodes in the currently traversed node branch, obtain the position, width, and level of the second node of the at least two child nodes. Based on the position, width, and level of the second node, determine the node position and width of the node branch.

[0077] Specifically, when traversing upwards from the lowest-level node branch, if the currently traversed node branch has no child nodes, it indicates that the node branch is a leaf node. The terminal will determine the node position and width of this node branch as preset positions and widths. When the currently traversed node branch has only a single child node, since the traversal is done level by level, the first node position and width of the single child node are already determined. The terminal will obtain the first node position and width of the single child node, using the first node position as the position of the node branch at both the current node level and the child node level. The width of the single child node will be appended to the width of the current node level, and this first node width will be used as the width of the child node level within the node width. For example, assuming the first node position of a single child node is 0 and the first node width is 1, then the node branch will have a position of 0 and a width of 1 at the current node level, and a position of 0 and a width of 1 at the child node level.

[0078] Specifically, when the currently traversed node branch has at least two child nodes, since the traversal is performed level by level upwards, the positions, widths, and levels of the second child nodes of these at least two child nodes are already determined. The terminal directly obtains the positions, widths, and levels of the second child nodes of these at least two child nodes. Based on these positions, widths, and levels, and following a depth-first approach, it traverses the child nodes in each level sequentially to determine the node position and width of the node branch. During traversal, the traversal method for child nodes within the same level can be from left to right.

[0079] In this embodiment, by confirming whether there are child nodes in the currently traversed node branch, the node position and node width of each node branch can be obtained according to the child node situation in different node branches.

[0080] In one embodiment, determining the node position and node width of a node branch based on the second node position, the second node width, and the child node level includes:

[0081] Based on the position and width of the second node and the level of the child nodes, and following the depth-first principle, the position and width of the second node of the child nodes in each level of the child nodes are updated sequentially.

[0082] Based on the updated second node position and second node width, determine the node position and node width of the node branch.

[0083] The depth-first principle means that, based on the child node hierarchy, starting from the lowest level of child nodes, the position of the second node and the width of the second node in each child node hierarchy are updated sequentially.

[0084] Specifically, the terminal determines the lowest-level child node based on the child node hierarchy. Starting from the lowest-level child node, it updates the second node position and second node width of each child node in each child node hierarchy sequentially, based on the corresponding second node position and second node width. After updating the second node position and second node width of child nodes in all child node hierarchies, it determines the node position and node width of the node branch based on the updated second node position and second node width. It should be noted that if a child node in a certain hierarchy does not have a left-side branch node, it is not necessary to update the second node position and second node width of that child node.

[0085] For example, regarding such Figure 3In the node tree structure shown, when the node branch is the node branch corresponding to node 1, the second node position and second node width of the lowest level child nodes (i.e., nodes 5, 6, and 7) will be updated first, and then the second node position and second node width of the next lowest level child nodes (nodes 3 and 4) will be updated. Since nodes 5, 3, and 2 do not have left branch nodes, it is not necessary to update the second node position and second node width of node 2.

[0086] In this embodiment, by updating the second node position and second node width of the child nodes in each child node level in turn according to the second node position, second node width and child node level, based on the depth-first principle, the node position and node width of the node branch can be determined according to the updated second node position and second node width.

[0087] In one embodiment, updating the second node position and second node width of each child node in each child node hierarchy sequentially includes:

[0088] Traverse the child nodes in each child node level from left to right in turn;

[0089] When the current traversed child node has a corresponding left branch node, obtain the rightmost width of the left branch node and the width of the left branch node;

[0090] Update the position of the second node of the currently traversed child node to the rightmost width, and add the width of the left branch node to the width of the second node of the currently traversed child node.

[0091] In this context, a left-side branch node refers to a branch node located to the left of its child node, and which shares the same parent node as the child node. Figure 3 Taking this example, since nodes 5 and 6 belong to the same parent node (node ​​3), the left branch node of node 6 is node 5. Since nodes 7 and 4 both belong to the same parent node (node ​​2) as the branch nodes composed of nodes 3, the left branch nodes of nodes 7 and 4 are both branch nodes composed of nodes 3.

[0092] Specifically, when updating, the terminal will traverse the child nodes in each child node level from left to right to determine whether the child node has a corresponding left branch node. When the currently traversed child node has a corresponding left branch node, the rightmost width of the left branch node and the width of the left branch node are obtained. The position of the second node of the currently traversed child node is updated to the rightmost width, and the width of the left branch node is added to the width of the second node of the currently traversed child node.

[0093] Continue with Figure 3For example, regarding the lowest-level child nodes (nodes 5, 6, and 7), since node 5 has no left branch node, there is no need to update its second node position and second node width. For node 6, its left branch node is node 5. The terminal will obtain the rightmost width of node 5 (i.e., the width of node 5) and the width of the left branch node (i.e., the width of node 5), update the second node position of node 6 to the rightmost width of node 5, and add the width of node 5 to the second node width of node 6. For node 7, its left branch node is a branch node composed of nodes 3. The terminal will obtain the rightmost width of the left branch node composed of nodes 3 (here, the updated second node width of node 6) and the width of the left branch node (here, obtained from the leftmost width of node 5 and the rightmost width of node 6), update the second node position of node 7 to the rightmost width of the left branch node composed of nodes 3, and add the width of the left branch node composed of nodes 3 to the second node width of node 7. For the second-lowest level child nodes, since node 3 does not have a left branch node, it is not necessary to update the position and width of its second node. For node 4, its left branch node is also a branch node composed of node 3, and the update process is similar to the update process for node 7.

[0094] In this embodiment, by traversing the child nodes in each child node level from left to right, when the currently traversed child node has a corresponding left branch node, the position and width of the second node of the currently traversed child node can be updated by using the rightmost width of the left branch node and the width of the left branch node.

[0095] In one embodiment, determining the node position and node width of a node branch based on the updated second node position and second node width includes:

[0096] Based on the updated position and width of the second node, calculate the position and width of the node branch at each child node level and at the current node level.

[0097] Specifically, the position of a node branch at the child node level can be obtained from the position of the second node of the leftmost child node in that child node level. The width of the node branch at the child node level can be obtained from the position of the second node of the leftmost child node and the width of the second node of the rightmost child node in that child node level. The position of the node branch at this node level refers to the position of the root node in the node branch, which can be obtained by calculating the middle position of the highest child node level of the node branch. The width of the node branch at this node level is a preset width. Furthermore, since the second node position and the second node width in this embodiment are quantified (i.e., represented only by numerical values), the width of the node branch at the child node level is the difference between the position of the second node of the leftmost child node and the width of the second node of the rightmost child node in that child node level.

[0098] In this embodiment, the updated second node position and second node width can be used to calculate the position and width of the node branch at each child node level and at the current node level.

[0099] In one embodiment, by means of Figure 4 The flowchart shown illustrates the node arrangement method in the drawing scenario of this application.

[0100] After a user freely drags and drops nodes on the corresponding page of the drawing component on the terminal, a node arrangement request is sent to the terminal via the automatic arrangement function on the corresponding page of the drawing component. The terminal responds to the node arrangement request, retrieves the node attribute information and node layout information of the nodes to be arranged from the preset node list, converts the flat list of nodes into tree structure data (i.e., constructs the node tree structure corresponding to the nodes to be arranged based on the node attribute information), organizes the position of all nodes from the left origin (specifically including data caching, node heaping, and heap merging) (i.e., traverses each node branch in the node tree structure to obtain the node position and node width of each node branch), maps the specific position based on the actual width and height of the nodes (i.e., updates the node layout information based on the node position and node width), and performs React update rendering based on the specific position (i.e., arranges the nodes to be arranged according to the updated node layout information to obtain the node arrangement result). Among them, data caching refers to allocating cache space to store the node position and node width of each node branch. The cache space can be a mapping table. Node heaping refers to obtaining the node branches corresponding to each node to be arranged based on the node tree structure, while heap merging refers to performing a depth-first traversal of the node branches.

[0101] In one embodiment, by means of Figure 2This paper describes how to construct a node tree structure for all rectangular elements and traverse each branch of the constructed node tree structure to illustrate the application's method of traversing each branch of the node tree structure to obtain the node position and width of each branch. It should be noted that, for ease of observation and illustration, a node tree is provided here. Figure 5 To indicate Figure 2 The hierarchical relationship between the nodes to be arranged is shown in bold arrows, and is ignored. Figure 2 All circular elements including the "+" sign are arranged only for each rectangular element. However, the position of the circular element also needs to be calculated in the actual calculation. In this embodiment, it is assumed that the preset position is 0 and the preset width is 1.

[0102] Ignoring circular elements and treating only rectangular elements as nodes to be arranged, the terminal obtains the node attribute information and node layout information of the nodes to be arranged, and then, based on the node attribute information (specifically, such as...),... Figure 5 (As shown by the arrow), construct the node tree structure corresponding to the nodes to be arranged (e.g., Figure 6 (As shown). By Figure 6 As can be seen from the node tree structure, it includes four levels of node branches.

[0103] Based on depth-first traversal, the lowest-level node branches are processed first (including node branches composed of nodes 5, 6, and 7 respectively). At this time, there are no child nodes in the node branches composed of nodes 5, 6, and 7 respectively, the node positions of the corresponding node branches are all 0, the node width is 1, and the corresponding record format can be {'id5':[0,1],'id6':[0,1],'id7':[0,1]}, where id5 represents node 5, id6 represents node 6, and id7 represents node 7.

[0104] Next, the next lower-level node branches are processed (including the branch consisting of nodes 3, 5, and 6, and the branch consisting of nodes 4 and 7). For the branch consisting of nodes 3, 5, and 6, since there are at least two child nodes in the branch, the second node positions and widths of nodes 5 and 6 are obtained and updated. Since node 5 does not have a left-side branch node, it does not need to be updated. The left-side branch node of node 6 is node 5, and the rightmost width of this left-side branch node is 1, and the width of the left-side branch node is also 1. After the update, the second node position of node 6 is 1, and the second node width is 2. After the update, the position of node 3 at this node level is (the second node position of node 5 + the second node position of node 6) / 2 = 0.5, and the width is 1. At the child node level, the position is 0 (the second node position of node 5), and the width is 2 (the difference between the second node position of node 5 and the second node width of node 6). For the node branch consisting of node 4 and node 7, since there is only a single child node (i.e., node 7) in the branch, the position of node 4 at both the current node level and the child node level is the same as the first node position of node 7, which is 0. The width at the current node level is the sum of the widths of the first node and is 1. The width at the child node level is the same as the width of node 7 and is 1. The corresponding record format can be {'id3':[[0.5, 1], [0, 2]], 'id4':[[0, 1], [0, 1]]}. Here, id3 represents the node branch corresponding to node 3, and id4 represents the node branch corresponding to node 4.

[0105] Continuing upwards, consider the branch consisting of nodes 2, 3, 4, 5, 6, and 7. Since node 7 now has a corresponding left branch node (a branch consisting of nodes 3, 5, and 6), and the rightmost width of the left branch node is 2 (the rightmost width of node 6), and the width of the left branch node is 2 (the distance between the leftmost width of node 5 and the rightmost width of node 6), the second node position of node 7 will be updated to 2, and the second node width will be updated to 3. Similarly, the second node position and width of node 4 can be updated, with the second node position of node 4 updated to 2 and the second node width updated to 3. After the update, for node 2, the position of its current level node is 1.25 (the midpoint between nodes 3 and 4), and the width of its current level node is 1. The position of the first child node level (the node level where nodes 3 and 4 are located) is 0.5 (the second node position of node 3), and the width is 2.5 (the total node width of the node level where nodes 3 and 4 are located, obtained by subtracting the second node position of node 3 from the second node width of node 4). The position of the second child node level is 0 (the second node position of node 5), and the width is 3 (obtained by subtracting the second node position of node 5 from the second node width of node 7).

[0106] The node position and node location of node 1 can be deduced by analogy using the above reasoning method, and will not be described again in this embodiment.

[0107] After the node arrangement is completed, the node arrangement result is as follows: Figure 7 As shown, this section includes the arrangement of circular elements, including those with a "+" sign.

[0108] It should be understood that although the steps in the flowcharts of the above embodiments are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the above embodiments may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps.

[0109] In one embodiment, such as Figure 8As shown, a node arrangement device for a drawing scene is provided. This device can be a software module, a hardware module, or a combination of both integrated into a computer device. Specifically, the device includes: an acquisition module 802, a construction module 804, a traversal module 806, an update module 808, and an arrangement module 810, wherein:

[0110] The acquisition module 802 is used to acquire the node attribute information and node layout information of the nodes to be arranged;

[0111] Construction module 804 is used to construct a node tree structure corresponding to the nodes to be arranged based on the node attribute information;

[0112] Traversal module 806 is used to traverse each node branch in the node tree structure to obtain the node position and node width of each node branch in the node tree structure.

[0113] Update module 808 is used to update node layout information based on node position and node width;

[0114] The arrangement module 810 is used to arrange the nodes to be arranged according to the updated node layout information to obtain the node arrangement result.

[0115] In the above drawing scenario, the node arrangement device can obtain the node attribute information and node layout information of the nodes to be arranged. It can then use the node attribute information to construct a node tree structure corresponding to the nodes to be arranged. By traversing each node branch in the node tree structure, it can obtain the node position and node width of each node branch. Based on the node position and node width, it can update the node layout information and arrange the nodes to be arranged according to the updated node layout information to obtain a neatly arranged node arrangement result.

[0116] In one embodiment, the construction module is further configured to determine the hierarchical relationship between the nodes to be arranged based on the node attribute information, and construct a node tree structure corresponding to the nodes to be arranged based on the hierarchical relationship.

[0117] In one embodiment, the traversal includes a depth-first traversal. The traversal module is also used to determine the node branch level of each node branch based on the node tree structure, and to traverse upwards from the lowest level node branch according to the node branch level to obtain the node position and node width of each node branch.

[0118] In one embodiment, the traversal module is further configured to: when there are no child nodes in the currently traversed node branch, determine the node position of the node branch as a preset position and the node width as a preset width; when there is only a single child node in the currently traversed node branch, obtain the first node position and the first node width of the single child node, determine the node position of the node branch based on the first node position, and determine the node width of the node branch based on the first node width; when there are at least two child nodes in the currently traversed node branch, obtain the second node position, the second node width, and the child node level of the at least two child nodes, and determine the node position and the node width of the node branch based on the second node position, the second node width, and the child node level.

[0119] In one embodiment, the traversal module is further configured to update the second node position and second node width of the child nodes in each child node level in turn, based on the second node position, second node width and child node level, according to the depth-first principle, and determine the node position and node width of the node branch based on the updated second node position and second node width.

[0120] In one embodiment, the traversal module is further configured to traverse the child nodes in each child node level from left to right in turn. When the currently traversed child node has a corresponding left branch node, the rightmost width of the left branch node and the width of the left branch node are obtained, the position of the second node of the currently traversed child node is updated to the rightmost width, and the width of the left branch node is superimposed on the width of the second node of the currently traversed child node.

[0121] In one embodiment, the traversal module is further configured to calculate the position and width of the node branch at each child node level and at the current node level, based on the updated second node position and second node width.

[0122] Specific limitations regarding the node arrangement device in the drawing scene can be found in the limitations on the node arrangement method in the drawing scene above, and will not be repeated here. Each module in the node arrangement device in the drawing scene described above can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in the processor of the computer device in hardware form or independent of it, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0123] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 9As shown, the computer device includes a processor, memory, communication interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, carrier networks, NFC (Near Field Communication), or other technologies. When executed by the processor, the computer program implements a node arrangement method in a drawing scene. The display screen can be an LCD screen or an e-ink screen. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the computer device casing, or an external keyboard, touchpad, or mouse.

[0124] Those skilled in the art will understand that Figure 9 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0125] In one embodiment, a computer device is also provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above method embodiments.

[0126] In one embodiment, a computer-readable storage medium is provided storing a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0127] In one embodiment, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and executes the computer instructions, causing the computer device to perform the steps in the above method embodiments.

[0128] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the methods described above. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, or optical storage, etc. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc.

[0129] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0130] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.

Claims

1. A method for arranging nodes in a drawing scene, characterized in that, The method includes: Obtain the node attribute information and node layout information of the nodes to be arranged; Based on the node attribute information, construct a node tree structure corresponding to the nodes to be arranged; Based on the node tree structure, the node branch level of each node branch is determined; the node branch refers to the branch structure in the node tree structure consisting of the node to be arranged and all its child nodes, corresponding to the node to be arranged. Based on the node branch hierarchy, traverse upwards level by level from the lowest level node branch to obtain the node position and node width of each node branch; the node position includes the position of the node branch in the current node hierarchy and the position of each child node hierarchy; the current node hierarchy refers to the node hierarchy where the root node of the node branch is located; the child node hierarchy refers to the node hierarchy where the child nodes of the node branch are located. Update the node layout information based on the node position and the node width; The nodes to be arranged are arranged according to the updated node layout information to obtain the node arrangement result; The step of traversing the node branches from the lowest level upwards to obtain the node position and width of each branch includes: When there are at least two child nodes in the currently traversed node branch, obtain the second node position, second node width, and child node level of the at least two child nodes; Based on the position of the second node, the width of the second node, and the level of the child node, the child nodes in each level of the child node are traversed from left to right according to the depth-first principle. When the currently traversed child node has a corresponding left branch node, obtain the rightmost width of the left branch node and the width of the left branch node; Update the position of the second node of the currently traversed child node to the rightmost width, and add the width of the left branch node to the width of the second node of the currently traversed child node; Based on the updated second node position and second node width, calculate the position and width of the node branch at each child node level and at the current node level; the position of the node branch at the child node level is obtained by the second node position of the leftmost child node in the child node level; the width of the node branch at the child node level is obtained by the second node position of the leftmost child node and the second node width of the rightmost child node in the child node level; the position of the node branch at the current node level refers to the position of the root node in the node branch, which is obtained by calculating the middle position of the highest child node level of the node branch.

2. The method according to claim 1, characterized in that, The step of constructing a node tree structure corresponding to the nodes to be arranged based on the node attribute information includes: Based on the node attribute information, determine the hierarchical relationship between the nodes to be arranged; Based on the hierarchical relationship, construct a node tree structure corresponding to the nodes to be arranged.

3. The method according to claim 1, characterized in that, The step of traversing upwards from the lowest-level node branch according to the node branch hierarchy to obtain the node position and node width of each node branch includes: When there are no child nodes in the currently traversed node branch, the node position of the node branch is determined to be the preset position and the node width is the preset width; When there is only a single child node in the currently traversed node branch, obtain the first node position and the first node width of the single child node, determine the node position of the node branch based on the first node position, and determine the node width of the node branch based on the first node width.

4. The method according to claim 1, characterized in that, The step of updating the node layout information based on the node position and the node width includes: Based on the node position and the node width, calculate the new horizontal position of each node to be arranged, and based on the node level of the nodes to be arranged, calculate the new vertical position of each node to be arranged. The new horizontal and vertical positions of each node to be arranged are collected to obtain the new positioning information of each node. The node layout information is updated based on the new positioning information of each node to be arranged.

5. A node arrangement device in a drawing scene, characterized in that, The device includes: The acquisition module is used to acquire the node attribute information and node layout information of the nodes to be arranged; The construction module is used to construct a node tree structure corresponding to the nodes to be arranged based on the node attribute information. The traversal module is used to determine the node branch level of each node branch based on the node tree structure. A node branch refers to a branch structure in the node tree structure consisting of the node to be arranged and all its child nodes, corresponding to the node to be arranged. Based on the node branch level, the module traverses upwards from the lowest level node branch to obtain the node position and node width of each node branch. The node position includes the position of the node branch at its current node level and the position of each child node at its respective level. The current node level refers to the node level where the root node of the node branch is located; the child node level refers to the node level where the child nodes of the node branch are located. The update module is used to update the node layout information based on the node position and the node width; The arrangement module is used to arrange the nodes to be arranged according to the updated node layout information to obtain the node arrangement result; The traversal module is further configured to, when there are at least two child nodes in the currently traversed node branch, obtain the second node position, second node width, and child node level of the at least two child nodes; based on the second node position, second node width, and child node level, traverse the child nodes in each child node level from left to right according to the depth-first principle; when the currently traversed child node has a corresponding left branch node, obtain the rightmost width of the left branch node and the width of the left branch node; update the second node position of the currently traversed child node to the rightmost width; and add the width of the left branch node to the left branch node. The width of the second node of the currently traversed child node is given. Based on the updated position and width of the second node, the position and width of the node branch at each child node level and at the current node level are calculated. The position of the node branch at the child node level is obtained by the position of the second node of the leftmost child node in the child node level. The width of the node branch at the child node level is obtained by the position of the second node of the leftmost child node and the width of the second node of the rightmost child node in the child node level. The position of the node branch at the current node level refers to the position of the root node in the node branch, which is obtained by calculating the middle position of the highest child node level of the node branch.

6. The apparatus according to claim 5, characterized in that, The construction module is also used to determine the hierarchical relationship between the nodes to be arranged based on the node attribute information, and to construct a node tree structure corresponding to the nodes to be arranged based on the hierarchical relationship.

7. The apparatus according to claim 5, characterized in that, The traversal module is also used to determine the node position of the node branch as a preset position and the node width as a preset width when there are no child nodes in the currently traversed node branch; and to obtain the first node position and first node width of the single child node when there are only a single child node in the currently traversed node branch, to determine the node position of the node branch based on the first node position, and to determine the node width of the node branch based on the first node width.

8. The apparatus according to claim 5, characterized in that, The update module is further configured to calculate the new horizontal position of each node to be arranged based on the node position and the node width, and calculate the new vertical position of each node to be arranged based on the node level of the node to be arranged, collect the new horizontal and new vertical positions of each node to be arranged respectively, obtain the new positioning information of each node to be arranged, and update the node layout information based on the new positioning information of each node to be arranged.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 4.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 4.

11. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 4.

Images