A method and apparatus for generating a visual layout display interface

Abstract

The present disclosure relates to a method and apparatus for generating a visual layout display interface. The method can obtain single-node array data and multi-level data of a target visual layout; determine child nodes corresponding to a folded node in a folded state as hidden nodes; determine nodes in the single-node array data that are not hidden nodes as display nodes; determine display connection lines between the display nodes; and render a target visual layout display interface based on attribute information corresponding to the display nodes and the display connection lines. In this way, when generating the target visual layout display interface, the hidden nodes, the display nodes, the display connection lines, etc. can be quickly determined based on the flatly stored single-node array data and multi-level data, without frequent recursive traversal, thereby solving the problem of large recursive traversal overhead.

Description

Technical Field

[0001] This disclosure relates to the field of digital twin technology, and in particular to a method and apparatus for generating a visual layout display interface. Background Technology

[0002] In traditional hierarchical data management, tree-structured data is widely used as the standard form of data organization. This data structure can intuitively represent hierarchical relationships and supports displaying nodes and their relationships graphically in a visual interface.

[0003] In tree-structured hierarchical data management schemes, editing a node, such as updating its collapsed state, typically involves recursive traversal to update node information and the visual layout. However, this recursive traversal-based editing method requires recursively traversing the entire tree structure from the root node for each edit operation. Such frequent recursive traversals not only consume significant CPU resources but also risk CPU overflow, leading to rendering stutters in the visual interface and severely impacting user experience and system responsiveness. Summary of the Invention

[0004] The purpose of this disclosure is to provide a method and apparatus for generating a visual layout display interface to solve the problem of high overhead from recursive traversal.

[0005] In a first aspect, embodiments of this disclosure provide a method for generating a visual layout display interface, the method comprising:

[0006] Obtain single-node array data and multi-level data of the target visualization layout; the single-node array data includes multiple nodes and the attribute information corresponding to each node, including collapsed nodes; the multi-level data includes each collapsed node and the child nodes and display attributes corresponding to each collapsed node, and the display attributes include collapsed state and expanded state.

[0007] The child nodes corresponding to the collapsed nodes in the collapsed state are identified as hidden nodes;

[0008] Nodes in a single-node array that are not hidden nodes are identified as visible nodes;

[0009] Determine the display connection lines between each display node;

[0010] Based on the attribute information corresponding to the display nodes and the display connection lines, the target visual layout display interface is rendered and generated.

[0011] Optionally, the attribute information includes the first node identifier corresponding to each node, and the multi-level data includes the second node identifier corresponding to each node, wherein the first node identifier and the second node identifier of the same node are the same.

[0012] The child nodes corresponding to the collapsed nodes in the collapsed state are identified as hidden nodes, including:

[0013] Identify the target folded node in the multi-level data that is in a folded state;

[0014] Based on multi-level data, the third node identifier corresponding to the target child nodes included in each target fold node is determined; the third node identifier is the identifier in the second node identifier.

[0015] Determine the identifier of the fourth node in the single-node array that is identical to the identifiers of each third node; the fourth node identifier is the identifier in the first node identifier.

[0016] The node corresponding to the fourth node identifier in the single-node array data is identified as a hidden node.

[0017] Optionally, the attribute information includes a first hidden node identifier for representing hidden nodes and a second hidden node identifier for representing displayed nodes; determining nodes in the single-node array data that are not hidden nodes as displayed nodes includes:

[0018] Nodes with the second hidden node identifier in the single-node array data are identified as display nodes.

[0019] Optionally, the display connection lines between each display node are determined, including:

[0020] Determine whether the target display node is a collapsed node; the target display node can be any node among the display nodes.

[0021] If the target display node is a collapsed node and its display attribute is collapsed, then the connection line connecting the child node corresponding to the target display node will be determined as a hidden connection line.

[0022] If the target display node is a collapsed node and its display attribute is expanded, then the connection line between the target display node and its child nodes is determined as the first display connection line;

[0023] Determine whether the target display node includes a parent node;

[0024] If the target display node includes a parent node, then the connection line between the target display node and its parent node is defined as the second display connection line; the display connection line includes the first display connection line and the second display connection line.

[0025] Optionally, multi-level data may also include connection information between nodes; determining the display connection lines between display nodes, including:

[0026] Identify hidden connectors, where at least one endpoint of a hidden connector is a hidden node;

[0027] Based on the connection information after removing hidden connection lines from the multi-level data, the connection lines to be displayed are determined.

[0028] Optionally, the method also includes:

[0029] Create a hidden node variable, which is used to manage hidden nodes;

[0030] Create a hidden connector variable, which is used to manage hidden connectors;

[0031] Create a display connector variable, which is used to manage display connectors;

[0032] In response to receiving a change indication for the folding state of the target folding node, update the hidden node variable, hidden connector variable, and displayed connector variable based on the folding state of the target folding node;

[0033] Based on the updated hidden node variables, hidden connector variables, and visible connector variables, the target visual layout display interface is rendered and generated.

[0034] Optionally, the attribute information includes the node's position and size information on the canvas; based on the attribute information corresponding to the display node and the display connection lines, the target visual layout display interface is rendered and generated, including:

[0035] Obtain the target position and target size information corresponding to each display node from the single-node array data;

[0036] Based on the target position information, target size information, and display connection lines of each display node, a target visualization layout display interface is rendered and generated.

[0037] Secondly, embodiments of this disclosure provide an apparatus for generating a visual layout display interface, the apparatus comprising:

[0038] The acquisition module is used to acquire single-node array data and multi-level data of the target visual layout. The single-node array data includes multiple nodes and the attribute information corresponding to each node, including collapsed nodes. The multi-level data includes each collapsed node and the child nodes and display attributes corresponding to each collapsed node. The display attributes include collapsed state and expanded state.

[0039] The hidden node determination module is used to determine the child nodes corresponding to collapsed nodes in a collapsed state as hidden nodes;

[0040] The display node determination module is used to determine the nodes in the single-node array data that are not hidden nodes as display nodes;

[0041] The display connection line determination module is used to determine the display connection lines between each display node;

[0042] The rendering module is used to render and generate the target visual layout display interface based on the attribute information corresponding to the display node and the display connection line.

[0043] Optionally, the attribute information includes the first node identifier corresponding to each node, and the multi-level data includes the second node identifier corresponding to each node, wherein the first node identifier and the second node identifier of the same node are the same.

[0044] The hidden node determination module is specifically used for:

[0045] Identify the target folded node in the multi-level data that is in a folded state;

[0046] Based on multi-level data, the third node identifier corresponding to the target child nodes included in each target fold node is determined; the third node identifier is the identifier in the second node identifier.

[0047] Determine the identifier of the fourth node in the single-node array that is identical to the identifiers of each third node; the fourth node identifier is the identifier in the first node identifier.

[0048] The node corresponding to the fourth node identifier in the single-node array data is identified as a hidden node.

[0049] Optionally, the attribute information includes a first hidden node identifier for characterizing hidden nodes and a second hidden node identifier for characterizing displayed nodes; the displayed node determination module is specifically used for:

[0050] Nodes with the second hidden node identifier in the single-node array data are identified as display nodes.

[0051] Optionally, a connection line determination module is displayed, specifically used for:

[0052] Determine whether the target display node is a collapsed node; the target display node can be any node among the display nodes.

[0053] If the target display node is a collapsed node and its display attribute is collapsed, then the connection line connecting the child node corresponding to the target display node will be determined as a hidden connection line.

[0054] If the target display node is a collapsed node and its display attribute is expanded, then the connection line between the target display node and its child nodes is determined as the first display connection line;

[0055] Determine whether the target display node includes a parent node;

[0056] If the target display node includes a parent node, then the connection line between the target display node and its parent node is defined as the second display connection line; the display connection line includes the first display connection line and the second display connection line.

[0057] Optionally, multi-level data may also include connection information between nodes; the connection line determination module is specifically used for:

[0058] Identify hidden connectors, where at least one endpoint of a hidden connector is a hidden node;

[0059] Based on the connection information after removing hidden connection lines from the multi-level data, the connection lines to be displayed are determined.

[0060] Optionally, the device also includes:

[0061] Create a module to create hidden node variables, which are used to manage hidden nodes; create hidden connector variables, which are used to manage hidden connectors; and create visible connector variables, which are used to manage visible connectors.

[0062] The update module is used to update the hidden node variable, hidden connector variable, and displayed connector variable based on the received indication of a change in the folding state of the target folding node in response to the folding state of the target folding node.

[0063] The rendering module is used to render and generate the target visual layout display interface based on the updated hidden node variables, hidden connector variables, and visible connector variables.

[0064] Optionally, the attribute information includes the node's position and size information on the canvas; the rendering module is specifically used for:

[0065] Obtain the target position and target size information corresponding to each display node from the single-node array data;

[0066] Based on the target position information, target size information, and display connection lines of each display node, a target visualization layout display interface is rendered and generated.

[0067] Thirdly, embodiments of this disclosure provide an electronic device, including a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program stored in the memory, and when the computer program is executed, it implements the method of the first aspect described above.

[0068] Fourthly, embodiments of this disclosure provide a computer-readable storage medium storing a computer program that, when executed, implements the method described in the first aspect.

[0069] The method and apparatus for generating a visual layout display interface provided in this disclosure employ a separate design of single-node array data and multi-level data to store the information of each node and the hierarchical relationships between nodes in a flattened manner. The single-node array data can focus on the node's attribute information (such as position and size), while the multi-level data can focus on the node's hierarchical relationships and display status. Thus, when generating the target visual layout display interface, hidden nodes, displayed nodes, and displayed connecting lines can be quickly determined based on the flattened storage of the single-node array data and multi-level data, without requiring frequent recursive traversal, thereby solving the problem of high overhead caused by recursive traversal.

[0070] Furthermore, when a collapsed node is detected to be switching its display state, the affected nodes and connections can be updated based on variables such as hidden node variables, hidden connector variables, and displayed connector variables, without requiring a global recalculation. This can further improve rendering stuttering issues and enhance the user experience. Attached Figure Description

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

[0072] Figure 1 A flowchart illustrating a method for generating a visual layout display interface according to an embodiment of this disclosure is shown.

[0073] Figure 2A An example diagram of a single-node array data provided in an embodiment of this disclosure is shown;

[0074] Figure 2B An example diagram of a multi-level data structure provided in an embodiment of this disclosure is shown;

[0075] Figure 3 A flowchart illustrating a method for determining hidden nodes provided in an embodiment of this disclosure is shown.

[0076] Figure 4 A flowchart illustrating a method for determining display connection lines according to an embodiment of this disclosure is shown;

[0077] Figure 5A structural block diagram of a device for generating a visual layout display interface according to an embodiment of the present disclosure is shown;

[0078] Figure 6 A structural block diagram of an electronic device provided in an embodiment of this disclosure is shown;

[0079] Figure 7 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of this disclosure is shown. Detailed Implementation

[0080] The present disclosure will be further described in detail below with reference to the accompanying drawings and embodiments. Through these descriptions, the features and advantages of the present disclosure will become clearer and more apparent.

[0081] The term “exemplary” as used herein means “serving as an example, embodiment, or illustration.” Any embodiment illustrated herein as “exemplary” is not necessarily to be construed as superior to or better than other embodiments. Although various aspects of embodiments are shown in the accompanying drawings, the drawings are not necessarily drawn to scale unless specifically indicated otherwise.

[0082] Furthermore, the technical features involved in the different embodiments of this disclosure described below can be combined with each other as long as they do not conflict with each other.

[0083] The digital 3D scene described in this disclosure refers to a highly realistic terrain environment used in various simulation, visualization, and game development applications. The digital 3D scene integrates graphics rendering technology to achieve the desired visual effects and interactivity, and has the following core characteristics:

[0084] Realistic terrain simulation: Digital 3D scenes include terrain generated from real-world data such as satellite imagery and topographic survey data. Terrain features include mountains, valleys, plains, and rivers to present a realistic feel of natural terrain.

[0085] Dynamic environmental elements: Environmental elements in digital 3D scenes, such as weather, lighting, and seasonal changes, are dynamic. For example, simulating day and night cycles, cloud movement, rain erosion, and seasonal vegetation changes, these elements can respond to user interactions in real time.

[0086] Advanced graphics effects: Utilizes graphics technologies such as ray tracing, physically-based rendering (PBR), high dynamic range imaging (HDR), and shadow mapping to provide visual detail and depth.

[0087] Interactivity and explorability: Users can freely move within the digital 3D scene, exploring different terrains and environments. Various interaction methods are supported, including walking, driving, or flying modes.

[0088] Ecosystem simulation: The digital 3D scene includes simulations of plant and animal ecosystems. The behavior of animals and the growth of vegetation are based on real-world models and data.

[0089] Customizability: Digital 3D scenes offer customizability, allowing users to adjust terrain, vegetation, environmental conditions, etc., according to specific needs, making them suitable for customized simulation requirements.

[0090] Application areas:

[0091] - Education and training: Can be used for educational purposes in geography, environmental science, and military training.

[0092] - Game Development: Provides game developers with rich and realistic environments to enhance the immersive experience of games.

[0093] - Urban planning and landscape design: Helping designers and planners visualize new building projects or landscape renovations.

[0094] - Film and television production: Providing high-quality background scenes for film and television production.

[0095] 3D models typically require interactive logic to realistically recreate business scenarios and enable in-depth interaction. In some embodiments, the interactive logic of the 3D model can be configured through a low-code visualization platform. During the configuration of the 3D model's interactive logic through the low-code visualization platform, the terminal device can dynamically update the visual layout display interface based on the user's editing operations.

[0096] In this context, the data corresponding to the interactive logic of configuring a 3D model through a low-code visualization platform is typically hierarchical data.

[0097] In traditional hierarchical data management, tree-structured data is widely used as the standard form of data organization. This data structure can intuitively represent hierarchical relationships and supports displaying nodes and their relationships graphically in a visual interface.

[0098] When editing a node, such as updating its collapsed state, a recursive traversal is typically used to update the node information and the visual layout. However, this recursive traversal-based editing method requires recursively traversing the entire tree structure from the root node for each editing operation. Such frequent recursive traversals not only consume a large amount of CPU computing resources but may also lead to CPU overflow risks, resulting in rendering stutters in the visual interface and severely impacting user experience and system responsiveness.

[0099] To address the issue of high overhead in recursive traversal, this disclosure provides a method and apparatus for generating a visual layout display interface.

[0100] The method and apparatus for generating a visual layout display interface provided in this disclosure will be described in detail below with reference to the accompanying drawings, through specific embodiments and application scenarios.

[0101] See Figure 1 , Figure 1 This is a flowchart illustrating a method for generating a visual layout display interface according to an embodiment of this disclosure. This method can be applied to terminal devices, servers, or other devices with data processing and image processing capabilities, and this disclosure does not impose any limitations thereon. The following description uses a terminal device as an example to illustrate an embodiment of this disclosure. Figure 1 As shown, the method may include the following steps:

[0102] Step S101: Obtain the single-node array data and multi-level data of the target visual layout.

[0103] In this embodiment, the single-node array data, also known as object array structure data, is a flat data structure. The single-node array data includes a node array of all nodes in the target visualization layout. Each node array includes the attribute information of the corresponding node. Each node can represent a visualization element, such as a graph, UI component, or data point.

[0104] The attribute information may include the node's first node identifier, the node's position and size information on the canvas, and other business information. The first node identifier is a unique identifier for the node; for example, it could be the node ID. The node's position and size information on the canvas may include left, top, width, and height.

[0105] For example, such as Figure 2A As shown, a single-node array contains multiple nodes. Taking node number "5" as an example, this node includes attribute information such as data, height, icon, left, nodeId, nodeName, nodeType, top, and width.

[0106] Taking data visualization applications as an example, in a data visualization system, multiple data nodes may need to be presented on a canvas or chart in a certain layout. Each node may contain position, size, and other visualization-related attributes. These attributes can be stored in an array of objects (i.e., a single-node array of data) for subsequent calculations and rendering.

[0107] Taking interactive application scenarios as an example, when a user interacts with the interface or objects, such as in a complex form, the display position and size of certain elements may be dynamically updated based on the user's actions. An array of objects can update the data of these nodes in real time and use this data for layout and interaction.

[0108] Taking UI / front-end interface layout application scenarios as an example, when you need to render an interface containing multiple elements (such as buttons, cards, images, etc.) and each element has different layout information (such as position, size, style, etc.), you can first obtain the single-node array data of the UI / front-end interface layout. Each array element in the single-node array data represents the attributes of a UI element, such as the element's left, top, width, height, style, color, etc.

[0109] Multi-level data can include data used to characterize the hierarchical relationships between nodes in a single-node array. For example, multi-level data can include collapsed nodes and their corresponding child nodes and display attributes.

[0110] For example, the multi-level data includes all the folded points in the target visualization layout. Each folded node corresponds to a list of child nodes, which includes all the child nodes corresponding to that folded node. Each folded node and its child nodes also has a corresponding second node identifier. The second node identifier is a unique identifier for the node; for example, the second node identifier is a node ID.

[0111] Multi-level data can also include display attributes. For example, display attributes can be represented by the isOpen field. isOpen = true indicates that the display attribute is in an expanded state; isOpen = false indicates that the display attribute is in a collapsed state.

[0112] When the display attribute is expanded, the child nodes corresponding to the collapsed node must be displayed in the target visual layout display interface. When the display attribute is collapsed, the child nodes corresponding to the collapsed node do not need to be displayed in the target visual layout display interface.

[0113] For example, such as Figure 2B As shown, multi-level data can use the `children` field to represent the child nodes included in each collapsed node. Child nodes can be collapsed or non-collapsed nodes. Multi-level data can also include attribute information for each node. For example, taking node number "0" in `children` as an example, this node can include attributes such as `isLeaf`, `isOpen`, `nodeId`, and `pNodeId`.

[0114] It should be noted that for the same node in the target visualization layout, its node identifier is the same in both the single-node array data and the multi-level data. That is, the first node identifier and the second node identifier of the same node are the same. In this way, attribute information in the single-node array data and hierarchical information in the multi-level data can be associated based on the node identifier.

[0115] It should also be noted that the present disclosure does not limit the target visualization layout. For example, the target visualization layout may be multiple data nodes and the relationship between each data node that need to be presented on a canvas or chart in a certain layout manner.

[0116] Step S102: Determine the child nodes corresponding to the collapsed nodes in the collapsed state as hidden nodes.

[0117] In this embodiment of the disclosure, a hidden node refers to a node that does not need to be displayed on the target visualization layout display interface.

[0118] like Figure 3 As shown in the embodiments of this disclosure, the child nodes corresponding to the folded nodes in the folded state are determined as hidden nodes, which can be achieved in the following way:

[0119] Step S1021: Determine the target folded node in the multi-level data that is in a folded state.

[0120] For example, the isOpen field can be used to filter target folded nodes from multi-level data. For instance, folded nodes in multi-level data where isOpen = false can be identified as target folded nodes.

[0121] Step S1022: Based on multi-level data, determine the third node identifier corresponding to the target child nodes included in each target fold node.

[0122] For example, each target fold node may include its own list of child nodes. This list of child nodes may include a node identifier, such as a nodeId, for each child node.

[0123] For ease of description, in this embodiment of the disclosure, the child node corresponding to the target fold node can be referred to as the target child node, and the node identifier corresponding to the target child node can be referred to as the third node identifier. It should be understood that the third node identifier is the node identifier used in multi-level data. That is, the third node identifier is the identifier within the second node identifier.

[0124] Step S1023: Determine the fourth node identifier in the single node array data that is the same as the identifier of each third node.

[0125] In this embodiment, the node identifier for the same node is the same in both the single-node array data and the multi-level data. Therefore, after determining the third node identifier corresponding to each target child node, the nodes in the single-node array data corresponding to each target child node can be determined based on the third node identifier. Specifically, the nodes corresponding to the fourth node identifier that is the same as each third node identifier in the single-node array data are the nodes corresponding to each target child node.

[0126] It should be noted that, for ease of description of the embodiments of this disclosure, the node identifier corresponding to each target child node can be referred to as the fourth node identifier. It should be understood that the fourth node identifier is the node identifier used in the single-node array data. That is, the fourth node identifier is the identifier within the first node identifier.

[0127] Step S1024: Determine the node corresponding to the fourth node identifier in the single-node array data as a hidden node.

[0128] One possible implementation is to add a hidden node identifier field to the single-node array data. This hidden node identifier field indicates whether each node in the single-node array data is a hidden node.

[0129] For example, the hidden node identifier may include a first hidden node identifier for representing a hidden node and a second hidden node identifier for representing a displayed node. For instance, the first hidden node identifier may be HideNodes=1, and the second hidden node identifier may be HideNodes=0.

[0130] In a single-node array, the initial value of the hidden node identifier for each node is HideNodes = 0. Later, the hidden node identifier for a specific hidden node can be changed to HideNodes = 1. This allows the nodes in the single-node array to be divided into hidden nodes and visible nodes based on the hidden node identifier. Specifically, when the hidden node identifier HideNodes = 1, it indicates that the node is a hidden node; when the hidden node identifier HideNodes = 0, it indicates that the node is a visible node.

[0131] One possible implementation is to define a hidden node variable, through which nodes that need to be hidden can be managed.

[0132] For example, the hidden node variable is defined as needHideNodes. The needHideNodes variable can be used to determine which hidden nodes need to be hidden, and dynamically add or remove the node identifiers corresponding to the hidden nodes in needHideNodes according to the changes in the display attributes of each collapsed node.

[0133] For example, when the isOpen property of a folded node changes from 1 to 0, the nodeId of the corresponding child node can be added to needHideNodes. When the isOpen property of a folded node changes from 0 to 1, the nodeId of the corresponding child node can be removed from needHideNodes.

[0134] Step S103: Determine the nodes in the single-node array that are not hidden nodes as display nodes.

[0135] Display nodes refer to the nodes that need to be shown in the target visualization layout display interface. It should be understood that after determining the hidden nodes, all nodes in the single-node array data except for the hidden nodes are display nodes.

[0136] In one possible implementation, the visible nodes in the single-node array data can be determined based on the hidden node identifiers in the single-node array data. For example, nodes with a hidden node identifier HideNodes=0 in the single-node array data are all visible nodes.

[0137] In one possible implementation, the display node variable can be defined as needShowNodes. needShowNodes can dynamically manage the node identifiers corresponding to the display nodes in needShowNodes based on changes in needHideNodes.

[0138] In this way, when the display attribute of a certain collapsed node is detected to be modified, the node identifiers of the hidden nodes in needHideNodes and the node identifiers of the displayed nodes in needShowNodes can be updated automatically.

[0139] Step S104: Determine the display connection lines between each display node.

[0140] In this embodiment of the disclosure, the display connecting line refers to the connecting line that needs to be displayed on the target visualization layout display interface.

[0141] Specifically, each end of a connecting line should be a display node. That is, a connecting line where both endpoints are hidden nodes, or where either endpoint is a hidden node, should not be displayed in the target visual layout display interface. In this embodiment, a connecting line where both endpoints are hidden nodes, or where either endpoint is a hidden node, can be referred to as a hidden node.

[0142] One possible implementation is, such as Figure 4 As shown, the display connection lines between each display node can be determined in the following way:

[0143] Step S1041: Determine whether the target display node is a collapsed node.

[0144] Steps S1041 to S1045 are illustrated by taking one display node (i.e., the target display node) as an example.

[0145] In this embodiment of the disclosure, the multi-level data may further include node type information for each node. For example, such as Figure 2B As shown, the node type corresponding to the node “collapaseDateWKCHhdqu” is “collapase”, which means that the node “collapaseDateWKCHhdqu” is a collapsible node.

[0146] Therefore, step S1041 can determine whether the target display node is a folded node based on the node type information of the target display node in the multi-level data.

[0147] Step S1042: If the target display node is a collapsed node and its display attribute is collapsed, then the connection line connecting the child node corresponding to the target display node is determined as a hidden connection line.

[0148] If the target display node is a collapsed node and its display attribute is collapsed, then the child nodes corresponding to the target display node are hidden nodes. Correspondingly, all connecting lines formed with these hidden nodes are hidden connecting lines.

[0149] One possible implementation is to define a hidden connector variable called needHideLines. needHideLines can dynamically add or remove hidden connector information based on changes in the display properties of collapsed nodes.

[0150] Step S1043: If the target display node is a collapsed node and its display attribute is in the expanded state, then the connection line between the target display node and its child nodes is determined as the first display connection line.

[0151] If the target display node is a collapsed node and its display attribute is expanded, then its child nodes are also display nodes. In this case, the connection line between the two display nodes is a display connection line.

[0152] Step S1044: Determine whether the target display node includes the parent node.

[0153] Step S1045: If the target display node includes a parent node, then the connection line between the target display node and its parent node is defined as the second display connection line; the display connection line includes the first display connection line and the second display connection line.

[0154] If the target display node includes a parent node, then its parent node must be a collapsed node with its display attribute set to expanded. Therefore, the parent node of the target display node is also a display node. Thus, the connection line between the target display node and its parent node should also be considered a display connection line.

[0155] In one possible implementation, the variable for displaying connection lines can be defined as needShowLines. needShowLines can also dynamically add or remove display connection line information based on changes in the display attributes of collapsed nodes.

[0156] Step S105: Based on the attribute information corresponding to the display nodes and the display connection lines, render and generate the target visual layout display interface.

[0157] For example, the target position and target size information corresponding to each display node can be obtained from the single-node array data. Then, based on the target position and target size information of each display node and the display connection lines, a target visualization layout display interface can be rendered. Through the target visualization layout display interface, each display node and the relationship between each display node can be displayed.

[0158] In one possible implementation, hidden node variables `needHideNodes`, hidden connector variables `needHideLines`, and displayed connector variables `needShowLines` can be created. This way, in response to a subsequent indication of a change in the collapse state of the target collapsed node, these variables can be automatically updated based on the target collapsed node's collapse state. Furthermore, based on the updated hidden node variables, hidden connector variables, and displayed connector variables, the target visual layout display interface can be rendered.

[0159] For example, users can switch the collapsed state of a node by clicking, dragging, or other interactive methods. For instance, a user can expand or collapse a node by clicking a small icon or button (such as a plus sign, minus sign, or arrow). This operation triggers a change in the `isOpen` field of the corresponding node. Thus, when the terminal device detects a change in the `isOpen` field of the target collapsed node, it can determine the node that has changed, i.e., the target collapsed node, and its displayed state after the change. Furthermore, based on the displayed state of the target collapsed node after the change, the hidden node variable, hidden connector variable, and displayed connector variable can be automatically updated with nodes and connectors related to the target collapsed node.

[0160] The method for generating a visual layout display interface provided in this embodiment can first obtain single-node array data and multi-level data of the target visual layout. The single-node array data includes multiple nodes and attribute information corresponding to each node, including collapsed nodes. The multi-level data includes each collapsed node and its corresponding child nodes and display attributes, including collapsed state and expanded state. Then, the child nodes corresponding to collapsed nodes in the collapsed state are determined as hidden nodes. Next, nodes in the single-node array data that are not hidden nodes are determined as displayed nodes. Then, display connection lines between each displayed node are determined. Finally, the target visual layout display interface can be rendered and generated based on the attribute information corresponding to the displayed nodes and the display connection lines.

[0161] In this way, by employing a separate design of single-node array data and multi-level data, the information of each node and the hierarchical relationships between nodes are stored in a flattened manner. The single-node array data can focus on the node's attribute information (such as position and size), while the multi-level data can focus on the node's hierarchical relationships and display status. Thus, when generating the target visual layout display interface, hidden nodes, visible nodes, and visible connecting lines can be quickly determined based on the flattened storage of single-node array data and multi-level data, without requiring frequent recursive traversal, thereby solving and mitigating the problem of high overhead caused by recursive traversal.

[0162] Furthermore, when a collapsed node is detected to be switching its display state, the affected nodes and connections can be updated based on variables such as hidden node variables, hidden connector variables, and displayed connector variables, without requiring a global recalculation. This can further improve rendering stuttering issues and enhance the user experience.

[0163] It is understood that the above embodiments are merely examples, and modifications can be made to the above embodiments in actual implementation. Those skilled in the art will understand that any modifications to the above embodiments that do not require creative effort fall within the protection scope of this disclosure, and will not be described in detail in the embodiments.

[0164] All the above-mentioned optional technical solutions can be referenced or combined with each other to form optional embodiments of this disclosure, and will not be described in detail here.

[0165] Based on the same inventive concept, this disclosure also provides a device for generating a visual layout display interface. Since the principle of the device for generating a visual layout display interface is similar to that of the aforementioned method for generating a visual layout display interface, the implementation of the device for generating a visual layout display interface can refer to the implementation of the aforementioned method for generating a visual layout display interface, and the repeated parts will not be described again.

[0166] See Figure 5 , Figure 5This is a structural block diagram of a device for generating a visual layout display interface, provided in an embodiment of this disclosure. Figure 5 As shown, the device 500 for generating the visual layout display interface may include: an acquisition module 501, a hidden node determination module 502, a display node determination module 503, a display connection line determination module 504, and a rendering module 505. Among them,

[0167] The acquisition module 501 is used to acquire single-node array data and multi-level data of the target visual layout; the single-node array data includes multiple nodes and the attribute information corresponding to each node, including collapsed nodes; the multi-level data includes each collapsed node and the child nodes and display attributes corresponding to each collapsed node, and the display attributes include collapsed state and expanded state.

[0168] The hidden node determination module 502 is used to determine the child nodes corresponding to the collapsed nodes in the collapsed state as hidden nodes;

[0169] The display node determination module 503 is used to determine the nodes in the single node array data that do not belong to the hidden nodes as display nodes;

[0170] Display connection line determination module 504 is used to determine the display connection lines between each display node;

[0171] The rendering module 505 is used to render and generate the target visual layout display interface based on the attribute information corresponding to the display node and the display connection line.

[0172] Optionally, the attribute information includes the first node identifier corresponding to each node, and the multi-level data includes the second node identifier corresponding to each node, wherein the first node identifier and the second node identifier of the same node are the same.

[0173] Hidden node determination module 502 is specifically used for:

[0174] Identify the target folded node in the multi-level data that is in a folded state;

[0175] Based on multi-level data, the third node identifier corresponding to the target child nodes included in each target fold node is determined; the third node identifier is the identifier in the second node identifier.

[0176] Determine the identifier of the fourth node in the single-node array that is identical to the identifiers of each third node; the fourth node identifier is the identifier in the first node identifier.

[0177] The node corresponding to the fourth node identifier in the single-node array data is identified as a hidden node.

[0178] Optionally, the attribute information includes a first hidden node identifier for characterizing hidden nodes and a second hidden node identifier for characterizing displayed nodes; the displayed node determination module 503 is specifically used for:

[0179] Nodes with the second hidden node identifier in the single-node array data are identified as display nodes.

[0180] Optionally, the display connection line determination module 504 is used for:

[0181] Determine whether the target display node is a collapsed node; the target display node can be any node among the display nodes.

[0182] If the target display node is a collapsed node and its display attribute is collapsed, then the connection line connecting the child node corresponding to the target display node will be determined as a hidden connection line.

[0183] If the target display node is a collapsed node and its display attribute is expanded, then the connection line between the target display node and its child nodes is determined as the first display connection line;

[0184] Determine whether the target display node includes a parent node;

[0185] If the target display node includes a parent node, then the connection line between the target display node and its parent node is defined as the second display connection line; the display connection line includes the first display connection line and the second display connection line.

[0186] Optionally, the multi-level data also includes connection information between nodes; the connection line determination module 504 is specifically used for:

[0187] Identify hidden connectors, where at least one endpoint of a hidden connector is a hidden node;

[0188] Based on the connection information after removing hidden connection lines from the multi-level data, the connection lines to be displayed are determined.

[0189] Optionally, the device also includes:

[0190] Create a module to create hidden node variables, which are used to manage hidden nodes; create hidden connector variables, which are used to manage hidden connectors; and create visible connector variables, which are used to manage visible connectors.

[0191] The update module is used to update the hidden node variable, hidden connector variable, and displayed connector variable based on the received indication of a change in the folding state of the target folding node in response to the folding state of the target folding node.

[0192] Rendering module 505 is used to render and generate the target visual layout display interface based on the updated hidden node variables, hidden connector variables, and visible connector variables.

[0193] Optionally, the attribute information includes the node's position and size information on the canvas; the rendering module 505 is specifically used for:

[0194] Obtain the target position and target size information corresponding to each display node from the single-node array data;

[0195] Based on the target position information, target size information, and display connection lines of each display node, a target visualization layout display interface is rendered and generated.

[0196] The apparatus for generating a visual layout display interface provided in this disclosure employs a separate design of single-node array data and multi-level data to store the information of each node and the hierarchical relationships between nodes in a flattened manner. The single-node array data can focus on the node's attribute information (such as position and size), while the multi-level data can focus on the node's hierarchical relationships and display status. Thus, when generating the target visual layout display interface, hidden nodes, displayed nodes, and displayed connecting lines can be quickly determined based on the flattened storage of the single-node array data and multi-level data, without requiring frequent recursive traversal, thereby solving the problem of high overhead caused by recursive traversal.

[0197] Furthermore, when a collapsed node is detected to be switching its display state, the affected nodes and connections can be updated based on variables such as hidden node variables, hidden connector variables, and displayed connector variables, without requiring a global recalculation. This can further improve rendering stuttering issues and enhance the user experience.

[0198] This disclosure also provides an electronic device, see [link to relevant documentation] Figure 6 , Figure 6 This is a structural block diagram of an electronic device provided in an embodiment of this disclosure. Figure 6 As shown, the electronic device 600 may include a processor 601, a memory 602, and a program or instructions stored in the memory 602 and executable on the processor 601. When the program or instructions are executed by the processor 601, they implement the various processes of the above-described method embodiment for generating the visual layout display interface and achieve the same technical effect. To avoid repetition, they will not be described again here. It should be noted that the electronic devices in the embodiments of this disclosure include mobile electronic devices and non-mobile electronic devices.

[0199] Figure 7 A schematic diagram of the hardware structure of an electronic device to implement an embodiment of this disclosure.

[0200] The electronic device 700 includes, but is not limited to, components such as: radio frequency unit 701, network module 702, audio output unit 703, input unit 704, sensor 705, display unit 706, user input unit 707, interface unit 708, memory 709, and processor 710.

[0201] Those skilled in the art will understand that the electronic device 700 may also include a power supply (such as a battery) for supplying power to various components. The power supply may be logically connected to the processor 710 through a power management system, thereby enabling functions such as managing charging, discharging, and power consumption through the power management system. Figure 7 The electronic device structure shown does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown, or combine certain components, or have different component arrangements, which will not be elaborated here.

[0202] It should be understood that, in this embodiment of the disclosure, the input unit 704 may include a graphics processing unit (GPU) 7041 and a microphone 7042. The GPU 7041 processes image data of still images or videos obtained by an image capture device (such as a camera) in video capture mode or image capture mode. The display unit 706 may include a display panel 7061, which may be configured in the form of a liquid crystal display, an organic light-emitting diode, etc. The user input unit 707 includes a touch panel 7071 and other input devices 7072. The touch panel 7071 is also called a touch screen. The touch panel 7071 may include a touch detection device and a touch controller. Other input devices 7072 may include, but are not limited to, physical keyboards, function keys (such as volume control buttons, power buttons, etc.), trackballs, mice, joysticks, etc., which will not be described in detail here. The memory 709 can be used to store software programs and various data, including but not limited to applications and operating systems. The processor 710 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understandable that the aforementioned modem processor may not be integrated into the processor 710.

[0203] This disclosure also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the various processes of the above-described method embodiment for generating a visual layout display interface, and achieves the same technical effect. To avoid repetition, it will not be described again here.

[0204] The processor is the processor in the electronic device described in the above embodiments. The readable storage medium includes computer-readable storage media, such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0205] This disclosure also provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled. The processor is used to run programs or instructions to implement the various processes of the above-described method embodiment for generating a visual layout display interface, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0206] It should be understood that the chip mentioned in the embodiments of this disclosure may also be referred to as a system-on-a-chip, system chip, chip system, or system-on-a-chip, etc.

[0207] This disclosure is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this disclosure. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0208] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0209] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0210] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and system embodiments are relatively simple in description because they are fundamentally similar to the method embodiments; relevant parts can be referred to the descriptions of the method embodiments. In this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. The terms "upper," "lower," etc., indicating orientation or positional relationships based on the orientation or positional relationships shown in the accompanying drawings, are used only for the convenience of describing this disclosure and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this disclosure. Unless otherwise expressly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to fixed connections, detachable connections, or integral connections; they can refer to mechanical connections or electrical connections; they can refer to direct connections or indirect connections through an intermediate medium; and they can refer to the internal communication between two components. Those skilled in the art can understand the specific meaning of the above terms in this disclosure according to the specific circumstances. It should be noted that, without conflict, the embodiments and features in the embodiments of this disclosure can be combined with each other. This disclosure is not limited to any single aspect, nor to any single embodiment, nor to any combination and / or substitution of these aspects and / or embodiments. Moreover, each aspect and / or embodiment of this disclosure can be used alone or in combination with one or more other aspects and / or embodiments thereof.

[0211] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this disclosure, and not to limit them. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this disclosure, and they should all be covered within the scope of the claims and specification of this disclosure.

Claims

1. A method for generating a visual layout display interface, characterized in that, The method includes: Obtain single-node array data and multi-level data of the target visualization layout; the single-node array data includes multiple nodes and attribute information corresponding to each node, including collapsed nodes among the multiple nodes; the multi-level data includes each collapsed node and its corresponding child nodes and display attributes, the display attributes including collapsed state and expanded state; The child nodes corresponding to the collapsed nodes in the collapsed state are identified as hidden nodes; Nodes in the single-node array that do not belong to the hidden nodes are identified as display nodes; Determine the display connection lines between each of the aforementioned display nodes; Based on the attribute information corresponding to the display node and the display connection line, the target visual layout display interface is rendered and generated.

2. The method according to claim 1, characterized in that, The attribute information includes a first node identifier corresponding to each node, and the multi-level data includes a second node identifier corresponding to each node, wherein the first node identifier and the second node identifier of the same node are the same. The step of determining the child nodes corresponding to the collapsed nodes in the collapsed state as hidden nodes includes: Identify the target folded node in the multi-level data that is in a folded state; Based on the multi-level data, the third node identifier corresponding to the target child node included in each target fold node is determined; the third node identifier is the identifier in the second node identifier. Determine a fourth node identifier in the single-node array data that is identical to each of the third node identifiers; the fourth node identifier is an identifier among the first node identifiers. The node corresponding to the fourth node identifier in the single-node array data is determined as a hidden node.

3. The method according to claim 1, characterized in that, The attribute information includes a first hidden node identifier for characterizing hidden nodes and a second hidden node identifier for characterizing displayed nodes; The step of determining nodes in the single-node array data that do not belong to the hidden nodes as display nodes includes: The node in the single-node array data that has the second hidden node identifier is determined as the display node.

4. The method according to claim 1, characterized in that, Determining the display connection lines between each of the display nodes includes: Determine whether the target display node is a collapsed node; the target display node can be any of the display nodes. If the target display node is a collapsed node and its display attribute is collapsed, then the connection line connecting the child node corresponding to the target display node is determined as a hidden connection line. If the target display node is a collapsed node and its display attribute is in an expanded state, then the connection line between the target display node and its child nodes is determined as the first display connection line; Determine whether the target display node includes a parent node; If the target display node includes a parent node, then the connection line between the target display node and its parent node is defined as the second display connection line; the display connection line includes the first display connection line and the second display connection line.

5. The method according to claim 1, characterized in that, The multi-level data also includes connection information between each node; determining the display connection lines between each display node includes: Determine hidden connecting lines, wherein at least one endpoint of the hidden connecting lines is a hidden node; Based on the connection information after removing the hidden connection lines from the multi-level data, the connection lines to be displayed are determined.

6. The method according to claim 4 or 5, characterized in that, The method further includes: Create a hidden node variable, which is used to manage hidden nodes; Create a hidden connector variable, which is used to manage hidden connectors; Create a display connection variable, which is used to manage display connections; In response to receiving a change indication for the folding state of the target folding node, the hidden node variable, the hidden connector variable, and the displayed connector variable are updated based on the folding state of the target folding node; Based on the updated hidden node variables, hidden connector variables, and displayed connector variables, the target visual layout display interface is rendered and generated.

7. The method according to claim 1, characterized in that, The attribute information includes the position and size information of the node in the canvas; the step of rendering and generating the target visual layout display interface based on the attribute information corresponding to the display node and the display connection line includes: Obtain the target position information and target size information corresponding to each display node from the single-node array data; Based on the target position information, target size information, and display connection lines of each display node, the target visualization layout display interface is rendered and generated.

8. A device for generating a visual layout display interface, characterized in that, The device includes: The acquisition module is used to acquire single-node array data and multi-level data of the target visual layout; the single-node array data includes multiple nodes and attribute information corresponding to each node, and the multiple nodes include collapsed nodes; the multi-level data includes each collapsed node and its corresponding child nodes and display attributes, and the display attributes include collapsed state and expanded state. The hidden node determination module is used to determine the child nodes corresponding to collapsed nodes in a collapsed state as hidden nodes; The display node determination module is used to determine the nodes in the single node array data that do not belong to the hidden nodes as display nodes; The display connection line determination module is used to determine the display connection lines between each of the display nodes; The rendering module is used to render and generate the target visual layout display interface based on the attribute information corresponding to the display node and the display connection line.

9. An electronic device, characterized in that, The electronic device includes: Memory, used to store computer programs; A processor for executing a computer program stored in the memory, wherein when the computer program is executed, it implements the method described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed, implements the method described in any one of claims 1 to 7.

Images