Node relationship identification method, page layout code acquisition method, device, storage medium and program product

Abstract

This application relates to a node relationship identification method, a page layout code acquisition method, a device, a storage medium, and a program product, belonging to the field of computer technology, and can improve the accuracy of parent node identification. The method includes: determining a target node to be identified as the parent node from multiple nodes contained in a user interface design file; determining a first node set and a second node set for the target node; the first node set consists of each first node in the multiple nodes that contains the target node, and the second node set consists of each second node in the multiple nodes that intersects with the target node; the first and second nodes are at a lower level than the target node; when the first and second node sets are not empty, determining a target first node in the first node set that meets a preset level condition, and determining a target second node in the second node set whose level is not lower than the target first node; and determining the first parent node of the target node based on the target second node.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method for identifying node relationships, a method for obtaining page layout code, a computer device, a computer-readable storage medium, and a computer program product. Background Technology

[0002] With the development of computer technology, when designing user interfaces, the layer and node information in the corresponding design file is parsed to generate usable front-end layout code such as HyperText Markup Language (HTML) or Cascading Style Sheets (CSS). During this process, the original nodes in the design file are cleaned and transformed, resulting in an unordered set of nodes. If further front-end layout code needs to be generated, the parent node of each node must be specified.

[0003] In related technologies, parent nodes are mainly determined by strictly adhering to the layout relationships in the design draft file, or by deducing the parent node based on the spatial relationships in the design draft. However, these methods are difficult to guarantee the accuracy of parent node identification when faced with a wide variety of design draft files. Summary of the Invention

[0004] Therefore, it is necessary to provide a node relationship identification method, a page layout code acquisition method, a computer device, a computer-readable storage medium, and a computer program product to address the above-mentioned technical problems.

[0005] Firstly, this application provides a method for identifying node relationships, including:

[0006] The target node to be identified as the parent node is determined from multiple nodes contained in the user interface design file, and a first node set and a second node set of the target node are determined; the first node set consists of each first node in the multiple nodes that contains the target node, and the second node set consists of each second node in the multiple nodes that intersects with the target node; the first node and the second node are at a lower level than the target node;

[0007] When both the first node set and the second node set are non-empty sets, a target first node in the first node set that meets the preset level condition is determined, and a target second node with a level not lower than that of the target first node is determined from the second node set.

[0008] The first parent node of the target node is determined based on the second target node.

[0009] In one embodiment, determining the first parent node of the target node based on the target second node includes:

[0010] When there are multiple target second nodes, the target second node to be processed is determined according to the processing priority of each of the multiple target second nodes; the processing priority increases with the increase of the target second node level;

[0011] Based on the current target second node to be processed, determine the first parent node of the target node.

[0012] In one embodiment, determining the first parent node of the target node based on the currently pending target second node includes:

[0013] If the target second node to be processed has a pruning relationship, then determine whether to determine the target second node to be processed as the first parent node of the target node based on the pruning relationship;

[0014] If the second target node to be processed does not have a corresponding pruning relationship, then the second target node to be processed is taken as the first parent node of the target node;

[0015] The clipping relationship includes a second parent node and subordinate nodes that are associated with the second parent node and have a higher hierarchy than the second parent node; the clipping relationship indicates that the clipping area corresponding to the subordinate node should be hidden; the clipping area is the area in the user interface that extends beyond the page area corresponding to the second parent node.

[0016] In one embodiment, determining whether to determine the current target second node to be processed as the first parent node of the target node based on the pruning relationship includes:

[0017] If the trimming relationship indicates that the target second node to be processed is the second parent node and the target node is a subordinate node, then the target second node to be processed is determined as the first parent node of the target node;

[0018] If the pruning relationship indicates that the target second node to be processed is the second parent node and the target node is not a subordinate node, or if the pruning relationship indicates that the second parent node associated with the target second node to be processed is different from the second parent node associated with the target node, then return to the step of determining the target second node to be processed based on the processing priority of each of the multiple target second nodes.

[0019] In one embodiment, determining the first set of nodes and the second set of nodes for the target node includes:

[0020] Obtain multiple nodes contained in the user interface design file, and determine the interfering nodes that interfere with the node relationship identification of the target node based on the node attribute information of the multiple nodes.

[0021] Each of the interfering nodes is removed from the plurality of nodes to obtain the remaining nodes;

[0022] Obtain each first node in the remaining nodes that contains the target node, generate a first node set based on each first node, and obtain each second node in the remaining nodes that intersects with the target node, generate a second node set based on each second node.

[0023] In one embodiment, after determining the first set of nodes and the second set of nodes for the target nodes, the method further includes:

[0024] When both the first set of nodes and the second set of nodes are empty sets, if the target node corresponds to a pruning relationship, then the first parent node of the target node is determined according to the pruning relationship; the pruning relationship includes the second parent node and the subordinate nodes of the second parent node.

[0025] Secondly, this application also provides a method for obtaining page layout code, including:

[0026] Obtain multiple target nodes from the user interface design file whose node relationships need to be identified;

[0027] Determine the first parent node of each of the plurality of target nodes; the first parent node is determined according to the node relationship identification method provided in the first aspect above.

[0028] The user interface node tree is determined based on the first parent node of each of the multiple target nodes, and the page layout code corresponding to the user interface is generated based on the user interface node tree.

[0029] Thirdly, this application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of any of the above methods.

[0030] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the above methods.

[0031] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of any of the above methods.

[0032] The aforementioned node relationship identification method, page layout code acquisition method, computer device, computer-readable storage medium, and computer program product can determine the target node to be identified as the parent node from multiple nodes contained in a user interface design file, and determine a first node set and a second node set of the target node. When both the first node set and the second node set are non-empty sets, the target first node in the first node set that meets the preset level condition can be identified, and the target second node with a level not lower than the target first node can be identified from the second node set. Then, the first parent node of the target node is determined based on the target second node. In this embodiment, by using the first target node that meets the preset level condition when both the first node set and the second node set are non-empty sets, the target second node with a level not lower than the target first node can be filtered out. This can effectively identify target second nodes that may have a level conflict with the target node. By determining the first parent node of the target node based on the target second node, it helps to avoid the target node being obscured by the target second node when determining the parent node, effectively improving the accuracy of parent node identification for nodes in various design files. Attached Figure Description

[0033] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0034] Figure 1 This is a schematic diagram of the layout specification in an example;

[0035] Figure 2 This is a flowchart illustrating a node relationship identification method in one embodiment;

[0036] Figure 3 This is a schematic diagram of a spatial relationship between nodes in one embodiment;

[0037] Figure 4 This is a flowchart illustrating one step in determining the first parent node in one embodiment;

[0038] Figure 5a This is a schematic diagram of node relationships after enabling the clipping attribute in one embodiment.

[0039] Figure 5b This is a schematic diagram illustrating the spatial relationship between nodes under a certain clipping attribute in one embodiment;

[0040] Figure 6This is a flowchart illustrating a method for obtaining page layout code in one embodiment;

[0041] Figure 7 This is a flowchart illustrating the node relationship identification method in another embodiment;

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

[0043] 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.

[0044] It should be noted that the terms "first," "second," etc., used in this application can be used to describe various objects, but these objects are not limited by these terms. These terms are only used to distinguish the first object from the second object. The terms "comprising" and "having," and any variations thereof, used in this application, are intended to cover non-exclusive inclusion. The term "multiple" used in this application refers to two or more. The term "and / or" used in this application refers to one of the solutions, or any combination of multiple solutions.

[0045] With the development of computer technology, when designing user interfaces, the process involves parsing the layer and node information in the corresponding design file and, through certain transformation logic, ultimately generating usable front-end layout code such as HyperText Markup Language (HTML) or Cascading Style Sheets (CSS). This process is also known as "design to code" (D2C). During this process, the original nodes in the design file undergo cleaning and transformation, resulting in an unordered set of nodes. If further front-end layout code needs to be generated, the parent node of each node must be explicitly defined.

[0046] In related technologies, parent nodes are primarily determined by strictly adhering to the layout relationships in the design draft file, or by deriving parent nodes based on the spatial relationships in the design draft. Here, "strictly adhering to the layout relationships in the design draft file" means constraining the designer to strictly follow a certain layout specification (e.g., ...). Figure 1 The UI design is based on the Auto Layout shown. Since the layout specification itself manually guarantees the parent-child structure, no intervention or adjustment is needed to ensure accuracy when identifying parent nodes later.

[0047] However, the above methods, which restrict the design files to strictly follow specific layout relationships, impose significant limitations on designers and are often only applicable to a limited number of design files. Determining the parent node based on the spatial relationships of the design files results in a low accuracy rate in real-world scenarios.

[0048] Therefore, the relevant technologies have difficulty accurately identifying the parent node of nodes in various design files.

[0049] This application provides a node relationship identification method, a page layout code acquisition method, a computer device, a computer-readable storage medium, and a computer program product, which can more accurately identify the parent nodes of nodes in various design files and improve the generation efficiency of page layout code.

[0050] In one embodiment, such as Figure 2 As shown, a node relationship identification method 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, and further to a system including both a terminal and a server, and is implemented through interaction between the terminal and the server. In this embodiment, the method includes the following steps:

[0051] S201, determine the target node to be identified from the multiple nodes contained in the user interface design file, and determine the first node set and the second node set of the target node; the first node set consists of each first node of the multiple nodes that contains the target node, and the second node set consists of each second node of the multiple nodes that intersects with the target node; the first node and the second node are at a lower level than the target node.

[0052] The user interface design file can be understood as a file that carries visual interface layout information. In one embodiment, a user can use vector graphics editing software to generate user interface design files, which can be used to create design files needed by web front-end engineers to develop web pages.

[0053] User interface design files can contain nodes corresponding to multiple interface elements. Nodes can be basic or composite units that make up the user interface.

[0054] In one example, the user interface design file can contain various types of nodes, such as rectangle nodes, ellipse nodes, polygon nodes, star nodes, text nodes, etc., and each node can correspond to a visible or logical area on the user interface. After the final transcoding is completed, the nodes in the design file can be converted into DOM nodes in the corresponding HTML file.

[0055] Nodes can also have corresponding node attribute information. The node attribute information is the original node data obtained from the design file through a preset API. For example, the node attribute information can include one or more of the following information related to the node: node type, length, width, spatial hierarchy, transparency, X-axis coordinate, Y-axis coordinate, rounded corners, fill, and border.

[0056] In this step, the user interface design draft can be obtained and analyzed to extract multiple nodes contained in the file. These nodes can be discrete and unordered. Then, the node whose parent node is to be identified, i.e., the target node, can be determined from these nodes.

[0057] The target node whose parent node is to be identified can be understood as determining the parent-child relationship, that is, determining the subordinate relationship between nodes. If node A's parent node is identified as node B, then in the subsequent layout code generated by D2C, the relevant code of node A can be embedded in the relevant code of node B, that is, node A is positioned relative to node B. In practical applications, nodes can have relative positioning relationships or absolute positioning relationships. Specifically, if node A is absolutely positioned relative to node B, then node A's position is independent of node B's document flow, therefore it does not occupy node B's space, node A's hierarchy is higher than node B's, and it will float on top of node B. If node A is relatively positioned relative to node B, then node A is inside node B's document flow, and is laid out together with other nodes within node B, affecting each other.

[0058] For example, when determining the target node from multiple nodes, the target node can be determined by the user's selection operation. For instance, if the user clicks and selects a button node in the interface design preview canvas, then the button node is taken as the target node of the parent node to be identified. In another embodiment, the target node can also be automatically determined according to the node traversal rules. For instance, each node is taken as the target node in order of its node identifier from smallest to largest, thus completing the identification of the parent node of all nodes.

[0059] After obtaining multiple nodes in the user interface design file, the spatial relationships between nodes and the hierarchy of nodes can be identified.

[0060] Specifically, multiple nodes can have the following spatial relationships: intersecting, disjoint, and contained. For example... Figure 3 The diagrams illustrate the containment, intersection, and disjoint relationships between nodes A and B. Node hierarchy refers to the hierarchical relationship between nodes in a layout structure. Higher-level nodes are located at higher levels, with parent nodes having lower levels than child nodes. In one example, a node's display priority can increase with its hierarchy; for instance, in the same area, a higher-level node might obscure a lower-level node.

[0061] In this embodiment, a first set of nodes and a second set of nodes can be obtained. The first node refers to all nodes that have an inclusion relationship with the target node, where the first node includes the target node. The second node refers to all nodes that intersect with the target node. For example, the boundary of the first node's region completely surrounds the boundary of the target node's region, and all coordinate points of the target node fall within the region of the first node. The boundary of the second node overlaps with the boundary of the target node's region, but the boundary of the second node does not completely surround the boundary of the target node's region, and vice versa.

[0062] In one optional embodiment, node information such as node coordinates of the target node and other nodes can be obtained, and the spatial positional relationship between the other nodes and the target node can be determined based on the respective node information of the target node and other nodes.

[0063] S202, when both the first node set and the second node set are non-empty sets, determine the target first node in the first node set that meets the preset level conditions, and determine the target second node from the second node set whose level is not lower than that of the target first node.

[0064] The preset hierarchy condition can include nodes in the set whose hierarchy is lower than the target node but have the highest hierarchy. A non-empty set is one that contains at least one node.

[0065] In related technologies, when determining the parent node based on the spatial relationships in the design draft, the parent node of the target node is mainly determined according to the following process. Specifically, if the target node is node T, firstly, a set A of nodes with a spatial hierarchy lower than node T and containing node T is obtained, and a set B of nodes with a spatial hierarchy lower than node T and intersecting with node T is obtained. If node set B is not empty, the node with the highest hierarchy in node set B (maxB) is taken as the parent node of the target node, and node T is absolutely positioned relative to maxB. If node set B is empty, the node with the highest hierarchy in node set A (maxA) is taken as the parent node; and node T is relatively positioned relative to maxA.

[0066] However, the inventors discovered in practice that this method can lead to inaccurate parent node identification results in some scenarios. After further creative work, the inventors found that when there is a hierarchical conflict between intersecting nodes and containing nodes, the parent node derived using the above method may cause the target node's hierarchical level to shift down after the parent node is determined. For example... Figure 3As shown, the hierarchy of nodes A, B, and C is C>A>B, meaning node B has the lowest hierarchy and node C has the highest hierarchy. Following the above process, node C intersects with node B, and node A contains node C. Therefore, node B is the parent node of node C. Node C is positioned absolutely relative to node B, but this causes node C's hierarchy to shift downwards, changing from being higher than node A to being lower than node A, and thus being occluded by node A.

[0067] In this embodiment, if the first node set is not empty, it can further identify whether the second node set is empty. When both the first and second node sets are not empty, this embodiment does not directly determine the highest-level first node in the first node set (i.e., the target first node) as the parent node of the target node. Instead, it can use the target first node to further filter the second node set. Specifically, it can determine whether there is a second node in the second node set whose level is between the target node and the target first node. If so, the second node whose level is between the target node and the target first node can be determined as the target second node.

[0068] Compared to related technologies that directly determine the parent node of the target node from the node set A containing the target node, this embodiment fully considers the potential hierarchical conflicts between intersecting nodes. First, using the first node set, it identifies the target first node that may be a parent node under the inclusion relationship. Then, using the target first node as a boundary, it further identifies the target second node from the second node set that may have hierarchical conflicts with the target node (i.e., the target node may be occluded when the target first node is used as the parent node of the target node). In this embodiment, by first calculating the highest-level node in the first node set and then determining the target second node from the combination of the second nodes, it ensures that the hierarchy of the intersecting nodes involved in the subsequent parent node identification process has practical significance, which helps to overcome the problem of hierarchy shift.

[0069] S203, determine the first parent node of the target node based on the second target node.

[0070] The first parent node can refer to the final determined superior node to which the target node directly belongs in the interface tree structure.

[0071] In practice, the first parent node can be determined based on the target second node. For example, the target second node can be directly used as the first parent node, or the first parent node can be further determined based on the attributes of one or more target second nodes.

[0072] In one embodiment, after obtaining the target second node, the target second node can be directly determined as the first parent node of the target node; in another embodiment, the first parent node can be further confirmed by combining information such as the node type and layout attributes of the target second node.

[0073] In some possible embodiments, if the target second node is a container node, it can be directly used as the first parent node of the target node; if the target second node is a control node, its corresponding parent container node can be used as the first parent node of the target node. Specifically, for example, if the target second node is a sidebar control node, and its corresponding parent container node is the page root container node, the page root container node can be determined as the first parent node of the button control node; in another example, if the target second node itself is a layout container node, it can be directly used as the first parent node of the target node.

[0074] In the above-described node relationship identification method, a target node to be identified as the parent node can be determined from multiple nodes contained in the user interface design file. A first node set and a second node set of the target node are also determined. When both the first and second node sets are non-empty sets, a target first node in the first node set that meets a preset level condition can be identified. Then, a target second node with a level not lower than the target first node is determined from the second node set. Finally, the first parent node of the target node is determined based on the target second node. In this embodiment, by using the first target node that meets the preset level condition to filter out target second nodes with a level not lower than the target first node when both the first and second node sets are non-empty sets, it is possible to effectively identify target second nodes that may conflict with the target node in terms of level. By determining the first parent node of the target node based on the target second node, it is helpful to avoid the target node being obscured by the target second node when determining the parent node, thus effectively improving the accuracy of parent node identification for nodes in various design files.

[0075] In one embodiment, in step S203, as Figure 4 As shown, it may include the following steps:

[0076] S401, when there are multiple target second nodes, determine the target second node to be processed according to the processing priority of each of the multiple target second nodes; the processing priority increases with the increase of the target second node level.

[0077] In practical applications, a target second node may include one or more. When there are multiple target second nodes, the processing priority of each target second node can be obtained. The processing priority refers to the order in which multiple target second nodes are traversed and processed. In this embodiment, the processing priority is positively correlated with the level of the target second node; that is, the higher the level of the target second node, the higher its processing priority, and the more likely it is to be identified as the current target second node to be processed.

[0078] In scenarios where multiple target second nodes exist simultaneously, to ensure the accuracy of parent node identification, one of the multiple target second nodes is selected as the first parent node of the target node. In this embodiment, the level corresponding to each target second node can be obtained, and then a processing priority is assigned to each target second node according to the correspondence between level and processing priority. Subsequently, the target second node with the highest processing priority is determined as the target second node to be processed in descending order of processing priority. Since the processing priority increases with the increase of level, the target second node with the highest level can be determined as the target second node to be processed.

[0079] S402, determine the first parent node of the target node based on the current target second node to be processed.

[0080] After obtaining the target second node to be processed, it can be determined whether the target second node to be processed meets the relevant conditions for being the parent node of the target node. If it does, the target second node to be processed can be directly used as the first parent node of the target node. If it does not meet the conditions, it can return to step S401 and redetermine the new target second node to be processed according to the processing priority of each of the multiple target second nodes, until the target second node to be processed is determined as the first parent node, or it is determined that none of the target second nodes to be processed meet the conditions. At this time, the target first node can be used as the first parent node of the target node.

[0081] In this embodiment, when there are multiple target second nodes, by prioritizing the processing of target second nodes with higher levels according to node hierarchy, it is determined whether they can serve as the first parent node of the target node. This allows for the priority screening of target second nodes that are closer to the target node among intersecting nodes, effectively preventing the target node from being obscured by target second nodes with higher levels due to a shift in hierarchy. It also ensures the orderliness and reliability of the node processing and parent node search process.

[0082] In one embodiment, in step S402, determining the first parent node of the target node based on the current target second node to be processed may include the following steps:

[0083] If the target second node to be processed currently has a clipping relationship, then the decision is made based on the clipping relationship to determine whether the target second node to be processed currently is the first parent node of the target node; if the target second node to be processed currently does not have a clipping relationship, then the target second node to be processed currently is the first parent node of the target node; wherein, the clipping relationship includes the second parent node and subordinate nodes that are associated with the second parent node and have a higher level than the second parent node; the clipping relationship indicates that the clipping area corresponding to the subordinate node is hidden; the clipping area is the area in the user interface that exceeds the page area corresponding to the second parent node.

[0084] In this context, the pruning relationship involves both the parent node and its child nodes. For clarity, the parent node involved in the pruning relationship is referred to as the second parent node. Figure 5a As shown, this illustrates the parent node and its child nodes under a clipping relationship. Figure 5b As shown, the diagram includes nodes A, B, and C. In the user interface, node A's area corresponds to the large solid rectangle in the diagram, node B's area corresponds to the dashed rectangle, and node C's area corresponds to the small solid rectangle. Nodes A and B form a clipping relationship. Node A, as the second parent node, has a clipping property (isClipsContent). The clipping area is the region where node B extends beyond node A. Figure 5b The area filled with dotted lines will be hidden under clipping conditions.

[0085] Because node A has a clipping attribute and a clipping relationship with node B, nodes A and B will default to an original parent-child relationship, meaning that node B's parent node is deduced to be node A. Simultaneously, following the parent node derivation method described in the aforementioned related technologies, since node B contains node C, node B will be deduced to be node C's parent node, at which point node C will be relatively positioned relative to node B. However, the inventors discovered in practice that when the target node's parent node is a subordinate node in a clipping relationship, the node will be hidden, for example, when determining... Figure 5b When node C's parent node is node B, node C will be hidden.

[0086] In this embodiment, after obtaining the target second node to be processed, it can first be determined whether the target second node to be processed corresponds to a pruning relationship. For example, it can be determined whether the target second node to be processed satisfies any of the following conditions: the node itself has a pruning attribute, or its parent node has a pruning attribute. If so, it can be determined that the target second node corresponds to a pruning relationship; if not, it can be determined that the target second node does not correspond to a pruning relationship.

[0087] If the target second node to be processed has a pruning relationship, then it can be further determined whether the target second node to be processed is the first parent node of the target node based on the pruning relationship. If the target second node to be processed does not have a pruning relationship, then the target second node to be processed is the first parent node of the target node.

[0088] In this embodiment, by determining whether the target second node corresponds to a clipping relationship, different processing is performed according to the determination result. This can prevent the target node from being incorrectly hidden due to the target node being associated with a node with a clipping relationship as its parent node, thereby improving the accuracy and reliability of the target node's parent node identification.

[0089] In one embodiment, determining whether to identify the current target second node to be processed as the first parent node of the target node based on the pruning relationship may include the following steps:

[0090] If the pruning relationship indicates that the target second node to be processed is the second parent node and the target node is a subordinate node, then the target second node to be processed is determined as the first parent node of the target node; if the pruning relationship indicates that the target second node to be processed is the second parent node and the target node is not a subordinate node, or if the pruning relationship indicates that the second parent node associated with the target second node to be processed is different from the second parent node associated with the target node, then return to the step of determining the target second node to be processed based on the processing priority of the multiple target second nodes.

[0091] In practice, the clipping relationship corresponding to the second target node to be processed can be analyzed based on the node information in the user interface design file. When the clipping relationship indicates that the second target node to be processed is the second parent node and the target node is its subordinate node, the second target node to be processed can be determined as the first parent node of the target node.

[0092] When the clipping relationship indicates that the target second node to be processed is the second parent node, but the target node is not a subordinate node of this node, that is, there is no clipping relationship between the target node and the target second node to be processed, in order to avoid the pruning relationship error causing the target node to be occluded, the process will return to step S401 to continue to obtain other target second nodes for judgment and processing.

[0093] When the clipping relationship indicates that the second parent node associated with the currently pending target second node is different from the second parent node associated with the target node—for example, the second parent node associated with the currently pending target second node is node F1, while the second parent node associated with the target node is node F2, or the second parent node associated with the target node is null—using the currently pending target second node as the parent node of the target node would cause the target node to be occluded. Therefore, in cases where the values ​​of the two second parent nodes are different, the process will return to step S401 to continue obtaining other target second nodes for judgment and processing.

[0094] In this embodiment, the attributes and subordinate relationships of the target second node are determined by pruning relationship. The parent node is determined only when the target second node is the second parent node and the target node is its subordinate node. This ensures the rationality and correctness of the node hierarchy and effectively avoids hierarchy errors caused by pruning relationship during the parent node identification process.

[0095] In one embodiment, in step S101, determining the first node set and the second node set of the target node includes:

[0096] The process involves obtaining multiple nodes from the user interface design file and identifying interfering nodes that disrupt the node relationship with the target node based on the node attribute information of the multiple nodes; removing each interfering node from the multiple nodes to obtain the remaining nodes; obtaining each first node of the remaining nodes that contains the target node and generating a first node set based on each first node; and obtaining each second node of the remaining nodes that intersects with the target node and generating a second node set based on each second node.

[0097] In one embodiment, obtaining the nodes contained in a user interface design file can be achieved by parsing the structured data of the design file. Specifically, for example, the stored data of the design file can be read, the layers, controls, or element description fields in the file can be traversed, each independent visual element can be extracted as a node, and a unique identifier can be assigned to each node, thereby obtaining all the nodes corresponding to the design file.

[0098] After identifying the target node, node attribute information of multiple nodes can be obtained. Based on this information, interfering nodes that might interfere with the identification of node relationships in the target node can be identified. In one example, an interfering node can be understood as a node whose attributes have no substantial layout association with the target node, causing redundancy, errors, or confusion in the identification of parent-child relationships. For example, interfering nodes may include nodes at a higher level than the target node, nodes outside the user interface canvas boundary, nodes with rotation attributes, and nodes such as lines and text. In one embodiment, interfering nodes can be identified based on node attribute information as follows: if the node type is text, pure line, pure background fill, full-screen background color, invisible auxiliary lines, reference grid, or if the node's transparency is completely transparent, its size exceeds the effective display area of ​​the interface, or its level differs from the target node's level by more than a preset threshold, then that node can be identified as an interfering node.

[0099] Furthermore, interfering nodes can be removed from the acquired nodes, resulting in the remaining nodes. For these remaining nodes, on one hand, the target node's position coordinates, width, and height can be obtained. Then, the remaining nodes (excluding the target node) are traversed sequentially to obtain the region of each node. It is determined whether the target node's region is completely within the target node's region; if so, the node is designated as the first node. All first nodes satisfying the inclusion relationship are aggregated to form the first node set. On the other hand, the overlapping area between the target node's region and the regions of other nodes can be calculated. If the area of ​​the overlapping area is greater than zero and less than the total area of ​​the target node's region, the node is considered to intersect with the target node and is designated as the second node. All second nodes satisfying the intersection relationship are aggregated to form the second node set.

[0100] When identifying parent nodes based on spatial and hierarchical relationships, it is easy to be interfered with by nodes with special attributes. In this embodiment, interference nodes can be filtered according to node attribute information to avoid invalid nodes causing errors in the judgment of inclusion and intersection relationships and redundant results, which helps to improve the accuracy and efficiency of parent node identification.

[0101] In one embodiment, after determining the first set of nodes and the second set of nodes for the target nodes, the following steps may also be included:

[0102] When both the first and second node sets are empty sets, if the target node has a pruning relationship, the first parent node of the target node is determined according to the pruning relationship; the pruning relationship includes the second parent node and the subordinate nodes of the second parent node.

[0103] In practical applications, when both the first and second node sets are empty, it can be determined that there is a lack of directly identifiable candidate nodes that can form a parent-child relationship with the target node in terms of spatial or hierarchical relationships. In this case, we can further attempt to obtain the clipping relationship corresponding to the target node. If a clipping relationship exists, the first parent node of the target node can be obtained from the second parent node in the clipping relationship that has an original parent-child relationship with the target node. If the target node does not have a corresponding clipping relationship, the root node in the user interface design file can be used as the first parent node of the target node.

[0104] In this embodiment, when both the first node set and the second node set are empty, the first parent node is determined based on the pruning relationship corresponding to the target node. This solves the problem of the target node having no effective parent node and the node structure being incomplete when conventional candidate parent nodes are missing. By determining that both sets are empty, it can provide a clear basis for determining the parent node based on the pruning relationship, and it can also determine the parent node based on the existing original parent-child relationship. There is no need to worry about the target node being occluded due to determining the parent node based on the pruning relationship, thus ensuring the standardization and reliability of the parent node determination process.

[0105] In one embodiment, a method for obtaining page layout code is also provided. This embodiment uses the application of this method to a terminal as an example for illustration. It can be understood that this method can also be applied to a server, and can also be applied to a system including a terminal and a server, and can be implemented through the interaction between the terminal and the server.

[0106] like Figure 6 As shown, in this embodiment, the method includes the following steps:

[0107] S601, Obtain multiple target nodes from the user interface design file whose node relationships need to be identified.

[0108] In this step, multiple target nodes whose relationships to be identified can be obtained from the user interface design file. The relationship to be identified refers to the parent node of the target node to be identified.

[0109] S602, determine the first parent node of each of the multiple target nodes.

[0110] The first parent node can be determined according to the node relationship identification method provided in one or more of the foregoing embodiments. The specific identification process can be referred to the foregoing embodiments, and will not be repeated here.

[0111] S603 determines the user interface node tree based on the first parent node of each of the multiple target nodes, and generates the page layout code corresponding to the user interface based on the user interface node tree.

[0112] The user interface node tree is a data structure that represents the hierarchical relationship of user interface elements in a tree structure. The user interface node tree includes multiple nodes at different levels. Each node can correspond to a user interface element. The nodes at each level are connected through a subordinate relationship, which can reflect the hierarchical layout relationship between target nodes in the design draft.

[0113] Page layout code refers to code that can be recognized and executed by the front-end rendering engine. For example, page layout code can be HTML code, XML layout code, etc., and can be used to achieve an interface layout display that is consistent with the design draft.

[0114] In an exemplary embodiment, the interface root container can be used as the root node of a tree structure. Each target node is then sequentially attached to a branch of its corresponding first parent node according to its hierarchical relationship with the first parent node, forming a tree structure with multiple levels of branches. This tree structure is the user interface node tree. Then, the nodes at each level of the user interface node tree can be traversed, and according to preset code generation rules, the type, size, position, and hierarchy of each node can be converted into corresponding code statements. These code statements are then concatenated from top to bottom to form the page layout code.

[0115] In the above-described method for obtaining page layout code, multiple target nodes with relationships to be identified in the user interface design file can be obtained, and the first parent node of each of the multiple target nodes can be determined. The first parent node is determined by the node relationship identification method described in one or more of the preceding embodiments. Furthermore, a user interface node tree can be determined based on the first parent nodes of each of the multiple target nodes, and page layout code corresponding to the user interface can be generated based on the user interface node tree. In this embodiment, the parent nodes of target nodes in various user interface design documents can be accurately identified and a user interface node tree can be generated. This effectively solves the problems of identifying the parent node of the current node and how the current node is positioned relative to its parent node. It can efficiently convert scattered and disordered nodes into a node tree for layout. By converting the user interface node tree into page layout code, the workload of manually writing style layouts can be reduced, effectively improving the efficiency of user interface development.

[0116] To enable those skilled in the art to better understand the above steps, the following example illustrates the embodiments of this application, but it should be understood that the embodiments of this application are not limited thereto.

[0117] like Figure 7 As shown, it may include the following steps:

[0118] S701: Obtain the original node information from the user interface design file. For nodes with the clipping attribute (isClipsContent), preset the parentId for their child nodes, thus determining the preset parent node for each child node. By presetting the parent-child relationship based on the original node information, the range for subsequent child nodes to find their parent node can be limited to the original parent node.

[0119] In one example, the user interface design file can be a figma file.

[0120] S702, Obtain the canvas boundary. In one embodiment, the canvas boundary can be determined based on the root node size, or a default value can be used, such as a size of 750 pixels × 1334 pixels.

[0121] S703, start processing all nodes in a loop, assuming the target node for the current parent node to be identified is T.

[0122] S704, Filtering out interfering nodes. Interfering nodes can include nodes with a level higher than T, nodes outside the canvas boundary, nodes with rotation attributes, lines, text, and other nodes.

[0123] S705, obtain the set A of nodes containing T in space, i.e. the first set of nodes.

[0124] S706, obtain the set B of nodes that intersect with T in space, i.e., the second set of nodes.

[0125] S707, if sets A and B are empty, then the parent node of T is either the original parent node or the root node.

[0126] S708, otherwise get the node with the largest level in A, maxA.

[0127] S709, Obtain set C from set B, where the level is between maxA and the target node T.

[0128] S7010, if C is empty, then the parent node of T is maxA.

[0129] S7011, otherwise, iterate through the nodes in C, obtain the node with the highest level maxC as the parent node of T, and set the positioning relationship to absolute (isAbsolute). For a node in C, if a clipping attribute exists, and the original parent-child relationship between the node and the target node is not parent-child, then a parent-child relationship is not formed, that is, the node is not set as the parent node of the target node T, and the node is skipped to continue processing the next node; if an original parent-child relationship exists or an original parent-child relationship exists but is not the same parent node, then a parent-child relationship is not formed, and the node is skipped to continue processing the next node.

[0130] In some possible embodiments, in response to the above processing flow, multimodal technology in a large model can be used to input three-dimensional information such as original nodes of the document and two-dimensional information such as screenshots of the design draft into the user interface. Through pre-designed prompts, the above process can be achieved, allowing the large model to derive relevant results.

[0131] It should be understood that although the steps in the flowcharts of the embodiments described above 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 embodiments described above 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. It is understood that the steps in different embodiments can be freely combined as needed, and all non-contradictory solutions formed by such combinations are within the scope of protection of this application.

[0132] In one exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 8As shown, the computer device includes a processor, memory, input / output interfaces, a communication interface, a display unit, and an input device. The processor, memory, and input / output interfaces are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interfaces. 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 input / output interfaces are used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, Near Field Communication (NFC), or other technologies. When executed by the processor, the computer program implements a node relationship identification method or a page layout code acquisition method. The display unit is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0133] Those skilled in the art will understand that Figure 8 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.

[0134] In one embodiment, a computer device is 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-described method embodiments.

[0135] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps in the above method embodiments.

[0136] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0137] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.

[0138] 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 above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0139] 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 application.

[0140] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. 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 application should be determined by the appended claims.

Claims

1. A method for identifying node relationships, characterized in that, The method includes: The target node to be identified as the parent node is determined from multiple nodes contained in the user interface design file, and a first node set and a second node set of the target node are determined; the first node set consists of each first node in the multiple nodes that contains the target node, and the second node set consists of each second node in the multiple nodes that intersects with the target node; the first node and the second node are at a lower level than the target node; When both the first node set and the second node set are non-empty sets, a target first node in the first node set that meets the preset level condition is determined, and a target second node with a level not lower than that of the target first node is determined from the second node set. The first parent node of the target node is determined based on the second target node.

2. The method according to claim 1, characterized in that, Determining the first parent node of the target node based on the second target node includes: When there are multiple target second nodes, the target second node to be processed is determined according to the processing priority of each of the multiple target second nodes; the processing priority increases with the increase of the target second node level; Based on the current target second node to be processed, determine the first parent node of the target node.

3. The method according to claim 2, characterized in that, The step of determining the first parent node of the target node based on the currently pending target second node includes: If the target second node to be processed has a pruning relationship, then determine whether to determine the target second node to be processed as the first parent node of the target node based on the pruning relationship; If the second target node to be processed does not have a corresponding pruning relationship, then the second target node to be processed is taken as the first parent node of the target node; The clipping relationship includes a second parent node and subordinate nodes that are associated with the second parent node and have a higher hierarchy than the second parent node; the clipping relationship indicates that the clipping area corresponding to the subordinate node should be hidden; the clipping area is the area in the user interface that extends beyond the page area corresponding to the second parent node.

4. The method according to claim 3, characterized in that, The step of determining whether to determine the current target second node to be processed as the first parent node of the target node based on the trimming relationship includes: If the trimming relationship indicates that the target second node to be processed is the second parent node and the target node is a subordinate node, then the target second node to be processed is determined as the first parent node of the target node; If the pruning relationship indicates that the target second node to be processed is the second parent node and the target node is not a subordinate node, or if the pruning relationship indicates that the second parent node associated with the target second node to be processed is different from the second parent node associated with the target node, then return to the step of determining the target second node to be processed based on the processing priority of each of the multiple target second nodes.

5. The method according to claim 1, characterized in that, The determination of the first node set and the second node set of the target node includes: Obtain multiple nodes contained in the user interface design file, and determine the interfering nodes that interfere with the node relationship identification of the target node based on the node attribute information of the multiple nodes. Each of the interfering nodes is removed from the plurality of nodes to obtain the remaining nodes; Obtain each first node in the remaining nodes that contains the target node, generate a first node set based on each first node, and obtain each second node in the remaining nodes that intersects with the target node, generate a second node set based on each second node.

6. The method according to any one of claims 1 to 5, characterized in that, After determining the first set of nodes and the second set of nodes for the target node, the method further includes: When both the first set of nodes and the second set of nodes are empty sets, if the target node corresponds to a pruning relationship, then the first parent node of the target node is determined according to the pruning relationship; the pruning relationship includes the second parent node and the subordinate nodes of the second parent node.

7. A method for obtaining page layout code, characterized in that, The method includes: Obtain multiple target nodes from the user interface design file whose node relationships need to be identified; Determine the first parent node for each of the plurality of target nodes; the first parent node is determined according to the node relationship identification method as described in any one of claims 1 to 6. The user interface node tree is determined based on the first parent node of each of the multiple target nodes, and the page layout code corresponding to the user interface is generated based on the user interface node tree.

8. 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 7.

9. A computer-readable storage medium having a computer program stored thereon, 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 7.

10. 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 7.

Images