Tree component rendering method and apparatus

Abstract

Embodiments of the present application provide a tree component rendering method and device. The tree component rendering method comprises: obtaining a tree component list to be rendered, the tree component list comprising index values corresponding to each node in the tree component and hierarchical relationships between the nodes; based on a height of a tree component visual area and the index values corresponding to each node in the tree component list, obtaining at least one target node from the tree component list, the rendering height of which matches the height of the tree component visual area; based on the rendering height of the at least one target node and the hierarchical relationships between the nodes, determining display positions of the at least one target node in a rendering window; and based on the display positions of the at least one target node and node content corresponding to the at least one target node, rendering the at least one target node in the rendering window. The technical solution of the embodiments of the present application improves rendering efficiency and reduces rendering delay.

Description

Technical Field

[0001] This application relates to component rendering technology, and more specifically, to a method and apparatus for rendering tree-shaped components. Background Technology

[0002] A tree structure refers to a data structure where data elements have a one-to-many hierarchical relationship. It is an important type of non-linear data structure. Examples include folder containment relationships, organizational structures, biological classifications, and geographical region divisions. Tree components within a tree structure can fully display the hierarchical relationships and provide interactive functions such as scrolling, expanding, collapsing, and selection. Therefore, tree components are commonly used components in front-end web pages.

[0003] However, in application scenarios with many data node levels and large data volumes, a large amount of data will be passed into the tree component, and the related tree component will have obvious rendering delays and other problems. Summary of the Invention

[0004] The embodiments of this application provide a tree component rendering method and apparatus, thereby at least to some extent solving the problem of tree component rendering latency under large data volume, improving tree component rendering efficiency, and enhancing user experience.

[0005] Other features and advantages of this application will become apparent from the following detailed description, or may be learned in part from practice of this application.

[0006] According to one aspect of the embodiments of this application, a tree component rendering method is provided, the method comprising:

[0007] Obtain a list of tree components to be rendered, the list of tree components including the index value of each node in the tree component and the hierarchical relationship between the nodes;

[0008] Based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list, at least one target node whose rendering height matches the height of the visible area of ​​the tree component is obtained from the tree component list;

[0009] Based on the rendering height of the at least one target node and the hierarchical relationship between the nodes, the display position of the at least one target node in the rendering window is determined;

[0010] Based on the display position of the at least one target node and the node content corresponding to the at least one target node, the at least one target node is rendered in the rendering window.

[0011] According to one aspect of the embodiments of this application, a tree component rendering apparatus is provided, the apparatus comprising:

[0012] The list retrieval unit is used to retrieve a list of tree components to be rendered, wherein the list of tree components includes the index value corresponding to each node in the tree component and the hierarchical relationship between the nodes;

[0013] The target node determination unit is used to obtain at least one target node whose rendering height matches the height of the visible area of ​​the tree component from the tree component list based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list;

[0014] The display position determination unit is used to determine the display position of the at least one target node in the rendering window based on the rendering height of the at least one target node and the hierarchical relationship between the nodes;

[0015] A rendering unit is used to render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.

[0016] In some embodiments of this application, based on the foregoing scheme, the list acquisition unit is configured to: acquire a tree component structure with hierarchical relationship; traverse sequentially from the root node of the tree component structure to generate a state tree containing node state information, the node state information including node depth and parent node identifier; and flatten the state tree to obtain the tree component list.

[0017] In some embodiments of this application, based on the foregoing scheme, the height of the visible area of ​​the tree component is less than the sum of the rendering heights of all uncollapsed nodes in the tree component list, and the apparatus further includes:

[0018] A sliding event detection unit is used to detect sliding events triggered in the rendering window and obtain the sliding distance;

[0019] The first node update unit is used to update the nodes rendered and displayed within the visible area of ​​the tree component based on the height of the visible area of ​​the tree component, the sliding distance, and the index value of each node in the tree component list.

[0020] In some embodiments of this application, based on the foregoing scheme, the node index values ​​in the tree component list are arranged in ascending order; the node update unit is configured as follows:

[0021] Based on the first index value of the first rendered node in the rendering window before the sliding event is detected, the rendering height of each node in the tree component list, and the sliding distance, the starting index value of the target node in the tree component list is determined.

[0022] The minimum ending index value of the target node in the tree component list is determined based on the height of the visible area of ​​the tree component and the rendering height of each node in the tree component list after the starting index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of ​​the tree component.

[0023] In some embodiments of this application, based on the foregoing scheme, the rendering unit is configured to: obtain created node objects in the rendering window; replace the node content corresponding to the created node object with the node content of a target node that matches the display position of the created node object by referencing the created node object; if the number of created node objects is less than the number of nodes of the target node, determine nodes from the target nodes that do not match created node objects; create new node objects in the rendering window according to the node content and display position of the nodes that do not match created node objects; and store references to the new node objects in the actual rendering node list.

[0024] In some embodiments of this application, based on the foregoing solution, the apparatus further includes:

[0025] The preload node determination unit is used to extract a preset number of nodes located after the target node from the tree component list based on the index value of the target node, and use them as preload nodes;

[0026] The preloaded node display position determination unit is used to determine the display position of the preloaded node based on the node hierarchy relationship and rendering height of the preloaded node;

[0027] The preload node object creation unit is used to create a preload node object based on the display position and node content of the preload node.

[0028] In some embodiments of this application, based on the foregoing solution, the apparatus further includes:

[0029] A drag event detection unit is used to detect drag events in the rendering window;

[0030] The second node update unit is configured to, if the drag event is dragging the first node to a blank area in the rendering window, insert the first node at the end of the last child node of the root node in the tree component list and update the index value of each node in the tree component list; if the drag event is dragging the first node to the operation area associated with the second node in the rendering window, insert the first node into the position corresponding to the operation area associated with the second node in the tree component list and update the index value of each node in the tree component list.

[0031] In some embodiments of this application, based on the foregoing scheme, the target node determination unit is configured to: obtain at least one target node from the updated tree component list that matches the height of the visible area of ​​the tree component, based on the height of the visible area of ​​the tree component and the index values ​​of each node in the updated tree component list.

[0032] In some embodiments of this application, based on the foregoing scheme, the index values ​​of each node in the tree component list are arranged in ascending order; the device further includes:

[0033] A retrieval event detection unit is used to detect retrieval events in the rendering window and obtain retrieval conditions in the retrieval events;

[0034] The target node determination unit is configured to: determine the first node in the tree component list that satisfies the search conditions; obtain at least one ancestor node of the first node that satisfies the search conditions, and determine the first target node from the at least one ancestor node; the index value of the first target node is the starting index value of the target node in the tree component list; determine the minimum ending index value of the target node in the tree component list based on the height of the visible area of ​​the tree component and the rendering height of each node in the tree component list after the starting index value; wherein the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of ​​the tree component; and obtain the target node based on the starting index value and the minimum ending index value.

[0035] According to one aspect of the embodiments of this application, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the tree component rendering method described in the above embodiments.

[0036] According to one aspect of the embodiments of this application, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the tree component rendering method as described in the above embodiments.

[0037] According to one aspect of the embodiments of this application, an electronic device is provided, including: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the electronic device to implement the tree component rendering method as described above.

[0038] In some embodiments of this application, when rendering a tree component list, nodes that match the height of the visible area of ​​the tree component are extracted from the tree component list for rendering and display, thereby improving the rendering efficiency of the tree component.

[0039] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0040] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:

[0041] Figure 1 A schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of this application can be applied is shown.

[0042] Figure 2-A A rendering of an object tree component according to an embodiment of this application is shown.

[0043] Figure 2-B A rendering of an object tree component according to an embodiment of this application is shown.

[0044] Figure 3-A A rendering of a resource tree component according to an embodiment of this application is shown.

[0045] Figure 3-B A rendering of a resource tree component according to an embodiment of this application is shown.

[0046] Figure 4-A shows a rendering of a folder selection tree component according to an embodiment of this application.

[0047] Figure 4-B shows the effect of applying a tree component according to an embodiment of this application in software.

[0048] Figure 5 A flowchart of a tree component rendering method according to an embodiment of this application is shown.

[0049] Figure 6 A comparison diagram of the visible area of ​​a tree component and the list of tree nodes according to an embodiment of this application is shown.

[0050] Figure 7 A flowchart illustrating an implementation process of step 510 according to an embodiment of this application is shown.

[0051] Figure 8 A tree component structure according to one embodiment of this application is shown.

[0052] Figure 9 The data structure of a node according to an embodiment of this application is shown.

[0053] Figure 10 A schematic diagram illustrating the process of generating a tree component list from a tree component structure according to an embodiment of this application is shown.

[0054] Figure 11 A flowchart of a tree component rendering method according to an embodiment of this application is shown.

[0055] Figure 12 A schematic diagram of a Flickable window sliding according to an embodiment of this application is shown.

[0056] Figure 13 A before-and-after comparison diagram of a rendered window according to an embodiment of this application is shown.

[0057] Figure 14 A flowchart illustrating an implementation process of step 1160 according to an embodiment of this application is shown.

[0058] Figure 15 A flowchart illustrating an implementation process of step 540 according to an embodiment of this application is shown.

[0059] Figure 16 A flowchart of a tree component rendering method according to an embodiment of this application is shown.

[0060] Figure 17 A schematic diagram of a target node and a preloaded node according to an embodiment of this application is shown.

[0061] Figure 18 A flowchart of a tree component rendering method according to an embodiment of this application is shown.

[0062] Figure 19A flowchart illustrating an implementation process of step 520 according to an embodiment of this application is shown.

[0063] Figure 20 A block diagram of a tree component rendering apparatus according to an embodiment of this application is shown.

[0064] Figure 21 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown. Detailed Implementation

[0065] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this application more comprehensive and complete, and to fully convey the concept of the exemplary embodiments to those skilled in the art.

[0066] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this application. However, those skilled in the art will recognize that the technical solutions of this application can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this application.

[0067] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0068] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0069] It should be noted that "multiple" in this article refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0070] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such uses of these terms can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described.

[0071] Figure 1 A schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of this application can be applied is shown.

[0072] like Figure 1 As shown, the system architecture may include terminal devices (such as...) Figure 1 The device shown includes one or more of a smartphone 101, a tablet 102, and a portable computer 103, a network 104, and a server 105. The network 104 serves as a medium for providing a communication link between the terminal device and the server 105. The network 104 may include various connection types, such as wired communication links, wireless communication links, etc.

[0073] In one embodiment of this application, a terminal device may obtain tree nodes from a server 105, process the tree nodes into a list of tree nodes to be rendered, and obtain at least one target node whose rendering height matches the height of the visible area of ​​the tree component based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list. Based on the rendering height of the at least one target node and the hierarchical relationship between the nodes, the display position of the at least one target node in the rendering window is determined. Based on the display position of the at least one target node and the node content corresponding to the at least one target node, the at least one target node is rendered in the rendering window.

[0074] It should be noted that the tree component rendering method provided in this application embodiment can be executed by a terminal device, and correspondingly, the tree component rendering device is generally set in the terminal device. However, in other embodiments of this application, the server may also have similar functions to the terminal device, thereby executing the tree component rendering scheme provided in this application embodiment.

[0075] It should also be noted that, Figure 1The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, servers can be independent physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. Terminals can be smartphones, tablets, laptops, desktop computers, smart speakers, smartwatches, etc., but are not limited to these, and this application does not impose any restrictions.

[0076] It's important to explain that cloud computing, as described above, is a computing model that distributes computing tasks across a resource pool comprised of numerous computers, enabling various application systems to access computing power, storage space, and information services as needed. The network providing these resources is called the "cloud." From the user's perspective, the resources in the "cloud" appear infinitely scalable and can be accessed, used on demand, and expanded at any time. By establishing a cloud computing resource pool (referred to as a cloud platform, generally called an IaaS (Infrastructure as a Service) platform), various types of virtual resources are deployed within the resource pool for external customers to choose from. The cloud computing resource pool mainly includes: computing devices (virtualized machines containing operating systems), storage devices, and network devices.

[0077] Figure 2-A A rendering of an object tree component according to an embodiment of this application is shown. Figure 2-A The object tree shown contains nodes located under a shooting template, such as canvas nodes and LvBu (prefab) nodes. An LvBu (prefab) node can contain multiple child nodes used to describe animation transitions, effects, etc. Subsequently, the SDK (Software Development Kit) rendering component performs topological traversal based on the object tree, rendering the images in layer order to form a sequence of image frames to achieve the user's special effects.

[0078] When a game only supports rendering 2D sticker layers and PAG (Portable Animated Graphics), the object tree generally has no more than 200 child nodes. However, when 3D gameplay is added to the game, the number of 3D object nodes becomes numerous. For example, the skeletal animation of a complex 3D model contains hundreds or thousands of nodes. The related object tree cannot render better and faster under large data volumes, resulting in a decrease in game performance. However, the embodiments of this application can render large data object trees faster and improve rendering efficiency.

[0079] Figure 2-B A rendering of an object tree component according to one embodiment of this application is shown. Figure 2-A The image shows the expanded state of the first LvBu (prefab) node in the object tree. It can be seen that the LvBu (prefab) node contains many child nodes, and the rendering window cannot display all child nodes on one screen. Nodes of different depths have different indentations in the X direction.

[0080] Figure 3-A The diagram illustrates a rendered resource tree component according to one embodiment of this application. Game resources mainly consist of temporary files and pre-built resources needed during the template creation process in Light Studio. As game projects become more complex, the required 2D and 3D resources increase, leading to a greater number of nodes in the resource tree. Figure 3-A The image shows the effect of displaying a resource tree in a rendering window using the component rendering method of the embodiments of this application. It includes multiple node_modules nodes, each node_module containing multiple child nodes. The expanded image is shown below. Figure 3-B As shown.

[0081] Figure 4-A A rendering of a folder selection tree component according to one embodiment of this application is shown. Figure 4-A As shown, the tree component supports a search function. For example, after entering search criteria in input box 401, files that meet the search criteria can be displayed in the window.

[0082] Figure 4-B A diagram illustrating the effect of a tree component applied in software according to an embodiment of this application is shown. Figure 4-B As shown, the software uses an object tree component and a resource tree component, both of which support search functionality. After entering search criteria in input box 402, a search can be performed on the object tree component. Since the object tree component has fewer expanded nodes, the height of the nodes to be rendered and displayed is less than the height of the tree component's visible area. Therefore, the rendering window 403 in the object tree component only occupies a portion of the tree component's visible area 404. After entering search criteria in input box 405, a search can be performed on the resource tree component. Since the resource tree component has more expanded nodes, the height of the nodes to be rendered and displayed is greater than the height of the tree component's visible area. Therefore, the rendering window 406 occupies the entire tree component's visible area 407, and a scrollbar 408 is generated for page scrolling.

[0083] Based on the tree component described in the foregoing embodiments, this application proposes a new rendering method for the tree component. The implementation details of the technical solution of this application embodiment are described in detail below:

[0084] Figure 5 A flowchart illustrating a tree component rendering method according to an embodiment of this application is shown. This tree component rendering method can be executed by an electronic device with computational processing capabilities, such as a server or terminal device. Figure 5 As shown, the method includes the following steps.

[0085] Step 510: Obtain the list of tree components to be rendered. The list of tree components includes the index value of each node in the tree component and the hierarchical relationship between the nodes.

[0086] Unlike related technical solutions that store the data nodes to be rendered as a tree structure and render based on the tree structure, this application embodiment uses a list format to store the data nodes to be rendered. The list of tree components to be rendered is the data in which each node in the tree component to be rendered is stored in list form, with each node corresponding to its index value. However, in order to display the hierarchical relationship between nodes in the subsequent rendering process, the hierarchical relationship between each node is stored in the tree component list.

[0087] Step 520: Based on the height of the tree component's visible area and the index value corresponding to each node in the tree component list, obtain at least one target node from the tree component list whose rendering height matches the height of the tree component's visible area.

[0088] The visible area of ​​a tree component is the area on a terminal device's screen used to display the tree component; that is, the area where the tree component is viewable. For example, if the tree component list is rendered across the entire desktop area of ​​the terminal device, then the height of the desktop area is the height of the tree component's visible area. Or, for example, in... Figure 4-B In this software, the object tree component and the resource tree component are both integral parts of the software, and the visible area of ​​their tree components only occupies a portion of the entire software screen.

[0089] In scenarios where the amount of data in the nodes to be rendered is very large, the rendering latency of related tree component rendering technologies is relatively large, and the root cause of the performance bottleneck is that too many nodes are rendered each time.

[0090] When the amount of data in the nodes to be rendered is very large, and the size of the visible area of ​​the tree component is limited (not exceeding the screen size of the terminal device), even if all nodes are rendered at once, the visible area of ​​the tree component cannot display all the rendered data nodes at once, which will cause rendering delay and screen stuttering. Figure 6 A comparison diagram of the visible area of ​​a tree component and the list of tree nodes according to one embodiment of this application is shown. Figure 6 As shown, the height of the tree component's visible area is less than the sum of the rendering heights of all nodes in the tree node list, and only a portion of the nodes can be displayed in the tree component's visible area at a time.

[0091] Therefore, in this embodiment, only a portion of the nodes are sequentially extracted from the tree component list as target nodes until the rendering height of the target node is greater than or equal to the visible area height of the tree component for the first time.

[0092] During the initial rendering, target nodes are extracted from the first node in the tree component list backwards until the rendered height of the target node first exceeds the visible area height of the tree component. For example, if the rendered height of the first eight nodes is less than the visible area height of the tree component, while the rendered height of the first nine nodes is greater than or equal to the visible area height of the tree component, then the first nine nodes are selected as the target nodes.

[0093] Step 530: Determine the display position of at least one target node in the rendering window based on the rendering height of at least one target node and the hierarchical relationship between nodes.

[0094] The rendering height of each node in the tree component list may be different, and child nodes are indented relative to their parent nodes. Therefore, it is necessary to dynamically calculate the display position of each node in the rendering window based on the rendering height of the target node and the hierarchical relationship between the nodes.

[0095] The display position of a node in the rendering viewport can be represented by X and Y values, where X represents the horizontal position and Y represents the vertical position. Target nodes are rendered sequentially along the Y direction. Therefore, the first target node in the rendering viewport has a Y value of 0 (indicating that this node is in the upper left area of ​​the rendering viewport), and its X value needs to be calculated based on its depth.

[0096] For example, if the display position of each node is indented by 1 in the X direction, the depth of the first node in the target node is 2, the rendering height is 5, and the depth of the second node in the target node is 2, then the X and Y values ​​of the first node in the target node are (2, 0), and the X and Y values ​​of the second node in the target node are (2, 5).

[0097] It should be noted that the embodiments of this application can be implemented based on the QT (Q toolkit) development library. QT is a cross-platform C++ development library mainly used to develop desktop graphical user interface (GUI) programs or command user interface (CUI) programs without a user interface. The rendering window can be a QT-based Flickable window. The Flickable window can display larger content in a smaller window, and users can browse the content in split-screen mode by scrolling the scroll bar. The sum of the heights of all non-collapsed nodes in the tree component list is set to the content height of the Flickable window; the height of the visible area of ​​the tree component is set to the height of the Flickable window.

[0098] Step 540: Based on the display position of at least one target node and the node content corresponding to at least one target node, render at least one target node in the rendering window.

[0099] Using the createObject API provided by Qt, the display position of the target node, the node content corresponding to the target node, and the rendering window corresponding to the target node are input into the createObject function to create the node object corresponding to the target node, thereby rendering and displaying the target node in the rendering view.

[0100] This application embodiment improves the rendering efficiency of the tree component and reduces rendering latency by extracting nodes from the tree component list that match the height of the tree component's visible area for rendering and display.

[0101] Figure 7 A detailed flowchart of step 510 according to one embodiment of this application is shown, as follows: Figure 7 As shown, step 510 includes the following steps.

[0102] Step 710: Obtain the tree component structure with hierarchical relationships.

[0103] A tree component structure is a special data structure in which the root node has no parent node, and each node has no child nodes or has multiple child nodes.

[0104] Figure 8 A tree component structure according to one embodiment of this application is shown. From Figure 8It can be concluded that the tree component structure includes a root node "0-0"; the root node "0-0" contains child nodes "0-0-0", "0-0-1" and "0-0-2"; the child node "0-0-0" contains child nodes "0-0-0-0", "0-0-0-1" and "0-0-0-2"; the child node "0-0-1" contains child nodes "0-0-1-0", "0-0-1-1" and "0-0-1-2".

[0105] Figure 9 A data structure for a node according to one embodiment of this application is shown. For example... Figure 9 As shown, each node in the tree component structure has basic attributes, such as the node's unique identifier id, the node's name title, and the node's child nodes, etc.

[0106] In this embodiment, in addition to basic attributes, tree nodes can also have extended attributes, such as node depth and the identifier of the parent node, for efficient display and use of the tree component.

[0107] It should be noted that, in order to implement the collapse / collapse function of the tree component, the nodes in the tree component structure can also extend the node's expand state property isExpand. Users can set the node's expand state property to expand or collapse through mouse operation.

[0108] Figure 2-B and Figure 3-B The expanded effect diagrams of nodes in the object tree and resource tree are shown respectively, as described in the foregoing embodiments.

[0109] It should be noted that the aforementioned tree-like component structure can also be obtained from the blockchain, specifically from a blockchain smart contract. For example, after game developers generate a tree structure of object types (containing the relationships between all entities in the game and rendering target canvases, transition groups, efficiency groups, and effects groups), they send it to the blockchain network. After consensus is reached on the blockchain network, it is written into the blockchain.

[0110] The aforementioned blockchain represents a novel application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Essentially, a blockchain is a decentralized database, a chain of data blocks linked together using cryptographic methods. Each data block contains information about a batch of network transactions, used to verify the validity of the information (anti-counterfeiting) and generate the next block. A blockchain can include an underlying platform, a platform product service layer, and an application service layer.

[0111] The underlying blockchain platform can include modules for user management, basic services, smart contracts, and operations. The user management module is responsible for managing the identity information of all blockchain participants, including maintaining public and private key generation (account management), key management, and maintaining the correspondence between user identities and blockchain addresses (access management). Under authorization, it also monitors and audits transactions of certain real identities and provides risk control rule configuration (risk control audit). The basic services module is deployed on all blockchain node devices to verify the validity of business requests. After consensus is reached on valid requests, they are recorded in storage. For a new business request, the basic services first perform interface adaptation parsing and authentication (interface adaptation), and then use a consensus algorithm to... Business information is encrypted (consensus management), and then transmitted completely and consistently to the shared ledger (network communication) for recording and storage. The smart contract module is responsible for contract registration and issuance, as well as contract triggering and execution. Developers can define contract logic using a programming language and publish it to the blockchain (contract registration). According to the contract terms, execution is triggered by calling keys or other events to complete the contract logic. It also provides functions for contract upgrades and cancellations. The operations module is mainly responsible for deployment, configuration modification, contract settings, cloud adaptation, and real-time status visualization output during product launch, such as alarms.

[0112] The platform's product service layer provides the basic capabilities and implementation frameworks for typical applications. Developers can leverage these basic capabilities, along with the specific characteristics of their business needs, to implement blockchain-based business logic. The application service layer provides blockchain-based application services to business stakeholders.

[0113] It should be noted that when a node in the tree structure list has an expanded state attribute, when obtaining the target node in step 520, the expanded state attribute of each node needs to be considered. The child nodes of a node with a collapsed expanded state attribute are not considered as target nodes.

[0114] To implement a tree component for file types, the tree structure can also extend the node's path attribute and resource identifier attribute to store the file's storage location.

[0115] Step 720: Starting from the root node of the tree component structure, traverse sequentially to generate a state tree containing node state information, including node depth and parent node identifier.

[0116] In practice, to set extended properties for each node in the tree component structure, a recursive traversal can be performed starting from the root node of the tree structure. Each node is assigned a depth and its parent node's identifier (id), thus constructing a state tree with node state information. Once the state tree stores the node state information, it eliminates the need to repeatedly calculate and retrieve the node state information during subsequent rendering of the tree component.

[0117] Step 730: Tile the state tree to obtain a list of tree components.

[0118] In practice, tiling the state tree can expand the nodes of the state tree. If a parent node has child nodes, all its child nodes are arranged under that parent node. Each data node is assigned an index value according to the order of the expanded data nodes, and the index values ​​between adjacent nodes are increased or decreased by a fixed value.

[0119] Figure 10 A schematic diagram illustrating the process of generating a tree component list from a tree component structure according to an embodiment of this application is shown. Figure 10 As shown, the tree structure is tiled to obtain a list of tree components. If the index values ​​of the tree component list are arranged in ascending order from the root node, the index value of the root node "0-0" is 0, then the index value of "0-0-0" is 1, the index value of "0-0-0-0" is 2, ..., and the index value of "0-2" is 11.

[0120] In this embodiment, the height of the visible area of ​​the tree component is less than the sum of the rendering heights of all non-collapsed nodes in the tree component list, and the rendering window forms a scrollbar for scrolling. For example, the content height of the Flickable window is less than the height of the Flickable window, and the Flickable window forms a scrollbar, which can simulate the effect of real node scrolling.

[0121] Figure 11 A flowchart of a tree component rendering method according to an embodiment of this application is shown, as follows: Figure 11 As shown, the method includes steps 1110-1160.

[0122] Among them, steps 1110-1140 and Figure 5 The specific implementation process of steps 510-540 shown is similar and will not be repeated here.

[0123] Step 1150: Detect the sliding event triggered in the rendering window and obtain the sliding distance.

[0124] After a user has browsed all the target nodes of the current page in the rendered window, they can scroll using a keyboard and mouse or by touch. This application can create a QCoreApplication object using the QT development library to detect the onContentY event (scrolling event) in the rendered window and obtain contentY, which is the scrolling distance in the Y direction. Here, contentY is a read-only property provided by the Flickable window.

[0125] Figure 12 A schematic diagram of a Flickable window sliding according to an embodiment of this application is shown, such as... Figure 12 As shown, in the Flickable window, when the page slides down 50 in the Y direction and to the left 50 in the X direction, the contentY is 50, and the sliding distance in the X direction, contentX, is -50.

[0126] Step 1160: Update the nodes that are rendered and displayed within the visible area of ​​the tree component based on the height of the tree component's visible area, the scroll distance, and the index values ​​of each node in the tree component list.

[0127] When the page is scrolled in the Flickable window, the nodes that should be displayed on the page change. Therefore, it is necessary to combine the height of the visible area of ​​the tree component with the scrolling distance, re-extract a portion of the nodes from the tree component list according to the index value order, use them as the updated target nodes, and then render and display the updated target nodes.

[0128] Figure 13 A before-and-after comparison diagram of a rendered viewport according to an embodiment of this application is shown. Figure 13 As shown, the left side is a schematic diagram of the initial rendering effect in the Flickable window. The node with an index value of 0 in the tree component list is displayed at the top of the page. Due to the limited height of the tree component's visible area, only eight nodes with index values ​​of 0-7 are displayed on the page.

[0129] When the page scrolls down a distance less than or equal to the rendering height of the node with index value 0, the first rendered node slides out of the Flickable window, and the index value of the first node on the page changes from 0 to 1. Based on the height of the tree component's visible area, nodes are sequentially extracted from index value 1 in the tree component list until the sum of the rendering heights of the eight nodes with index values ​​1-8 first exceeds the height of the tree component's visible area. Then, the updated target nodes are the eight nodes with index values ​​1-8.

[0130] Correspondingly, when the distance the page slides down again is less than or equal to the rendering height of the node with index value 1, the first rendered node on the page slides out of the Flickable window, and the index value of the first node on the page changes from 1 to 2. Nodes are sequentially extracted from index value 2 in the tree component list until the sum of the rendering heights of the eight nodes with index values ​​2-9 is greater than the visible area height of the tree component for the first time. Then, the updated target node is the eight nodes with index values ​​2-9.

[0131] It should be noted that when nodes in a tree structure list have an expanded state attribute, when extracting target nodes from the tiled list, the expanded state attribute of each node needs to be considered. Child nodes of nodes with a collapsed expanded state attribute are not considered as target nodes.

[0132] Figure 14 A flowchart illustrating one implementation process of step 1160 according to an embodiment of this application is shown. Figure 14 As shown, step 1160 includes the following steps.

[0133] Step 1410: Based on the first index value of the first rendered node in the rendering window before the sliding event is detected, the rendering height of each node in the tree component list, and the sliding distance, determine the starting index value of the target node in the tree component list.

[0134] Step 1420: Determine the minimum ending index value of the target node in the tree component list based on the height of the tree component's visible area and the rendering height of each node in the tree component list after the starting index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the tree component's visible area.

[0135] like Figure 13 As shown, before detecting the swipe event in the Flickable window, the index value of the first rendered node in the Flickable window is 0. When the upward swipe distance of the page is less than or equal to the rendering height of the node with index value 0, the node with index value 0 slides out of the window, and the starting index value of the target node in the tree component list is determined to be 1.

[0136] Starting from index 1 in the tree component list, nodes are sequentially extracted until the sum of the rendered heights of the eight nodes with indices 1-8 first exceeds the visible area height of the tree component. Then, the minimum terminating index value of the target node in the tree component list is 8.

[0137] For example, when the page scrolls down a distance greater than the rendering height of a node with index values ​​of 0-3 but less than or equal to the rendering height of a node with index values ​​of 0-4, the node with index values ​​of 0-4 slides out of the viewport, and the starting index value of the target node in the tree component list is determined to be 5.

[0138] Starting from index 5 in the tree component list, nodes are sequentially extracted until the sum of the rendered heights of the seven nodes with indices 5-10 first exceeds the visible area height of the tree component. Then, the minimum terminating index value of the target node in the tree component list is 10.

[0139] Figure 15 A flowchart illustrating one implementation of step 540 according to an embodiment of this application is shown. Figure 15 As shown, step 540 includes the following steps.

[0140] Step 1510: Obtain the created node objects in the rendering window.

[0141] In this embodiment of the application, the rendering window can create node objects using the createObject API provided by QT. For example... Figure 13 As shown, after the Flickable window is rendered for the first time, node objects corresponding to nodes with index values ​​of 0-7 have been created in the window.

[0142] Step 1520: By referencing the created node object, replace the node content corresponding to the created node object with the node content of the target node that matches the display position of the created node object.

[0143] like Figure 13 As shown, when the downward scrolling distance of the Flickable window page is less than or equal to the rendering height of the node with index value 0, then the first rendered node slides out of the Flickable window, and the updated target node consists of eight nodes with index values ​​from 1 to 8.

[0144] Accordingly, when rendering the eight nodes with index values ​​of 1-8, the node content of the node objects corresponding to the nodes with index values ​​of 0-7 is replaced with the node content of the nodes with index values ​​of 1-8, respectively, by using the references to the node objects corresponding to the nodes with index values ​​of 0-7 that have already been created.

[0145] Therefore, when the number of target nodes before the page scrolls is greater than or equal to the number of updated target nodes after the page scrolls, no new node objects need to be created during the rendering process after the page scrolls. This is because references to the already created node objects can be stored in the list of actual rendered nodes. During rendering, it is only necessary to replace the node content corresponding to the already created node object with the node content of the target node that matches the display position of the already created node object, which greatly saves memory.

[0146] Step 1530: If the number of created node objects is less than the number of nodes in the target node, then identify the nodes in the target node that do not match any created node objects.

[0147] Because the rendering height of nodes in the tree component list varies, the number of nodes displayed on the screen before the page is swiped may differ from the number displayed on the screen after the page is swiped. When the number of target nodes before the page is swiped is less than the updated number of target nodes after the page is swiped, some nodes in the target node list cannot directly apply the already created node object.

[0148] Step 1540: Create a new node object in the rendering window based on the node content and display position of the node that does not match an existing node object.

[0149] During the rendering process after page scrolling, the createObject API provided by Qt can be used to create new node objects for nodes that do not match an existing node object.

[0150] Step 1550: Store a reference to the new node object in the list of actual rendered nodes.

[0151] In this embodiment, the target node is determined and a corresponding node object is created in the Flickable window based on the height of the visible area of ​​the tree component and the rendering height of the nodes in the tree component list. The list of actually rendered nodes is then stored, containing the nodes currently displayed on the page. On one hand, in scenarios where the Flickable window page is scrolled or refreshed, the page refresh rendering can be completed simply by updating the content of the nodes in the already created node objects, saving memory and optimizing performance. On the other hand, when unloading the tree component, the component can be unloaded by destroying the list of actually rendered nodes.

[0152] Figure 16 A flowchart illustrating a tree component rendering method according to an embodiment of this application is shown. Figure 16 As shown, the method includes steps 1610-1670.

[0153] Among them, steps 1610-1640 and Figure 5 The implementation process of steps 510-540 shown is similar and will not be repeated here.

[0154] Step 1650: Based on the index value of the target node, extract a preset number of nodes located after the target node from the tree component list as preloaded nodes.

[0155] In the tree component list, a preset number of nodes are sequentially extracted from the end index value of the target node and used as preloaded nodes. The preloaded nodes are not displayed in the current page of the rendering window, but may be displayed after the user scrolls the page. Figure 17 A schematic diagram of a target node and a preloaded node according to an embodiment of this application is shown. Figure 17 As shown, the target node in the rendering window is a node with an index value of 0-8, so the node with an index value of 9 is selected as the preload node.

[0156] Step 1660: Determine the display position of the preloaded nodes based on the node hierarchy and rendering height.

[0157] Similar to the method for determining the display position of the target node, the method for determining the display position of the preloaded node is as follows.

[0158] Step 1670: Create a preloaded node object based on the display position and content of the preloaded node.

[0159] Once the node object corresponding to the target node has been created, create a preset number of preloaded nodes. This can prevent blank spaces caused by the nodes not being rendered in time when the page scrolls too quickly.

[0160] Figure 18 A flowchart illustrating a tree component rendering method according to an embodiment of this application is shown. Figure 18 As shown, the method includes the following steps 1810-1840.

[0161] Among them, steps 1810-1840 and Figure 5 The implementation process of steps 510-540 is similar and will not be repeated here.

[0162] Step 1850: Detect drag events in the rendering window.

[0163] When adding or adjusting the position of nodes in a tree component, users can perform operations by dragging the nodes. Therefore, this application can detect DragEvent events, i.e. drag events, based on the event detection object created by QT.

[0164] Step 1860: If the drag event is to drag the first node to a blank area in the rendering window, then insert the first node at the end of the last child node of the root node in the tree component list, and update the index values ​​of each node in the tree component list.

[0165] Step 1870: If the drag event is to drag the first node to the operation area associated with the second node in the rendering window, then insert the first node into the position corresponding to the operation area associated with the second node in the tree component list, and update the index value of each node in the tree component list.

[0166] The rendering window divides each node currently displayed on the page into three operation areas, namely the response area for mouse operations. After detecting a drag event, each area inserts the dragged node into a different position in the tree component list.

[0167] Accordingly, after the tree component list is updated, it is necessary to obtain at least one target node that matches the height of the tree component's visible area from the updated tree component list, based on the height of the tree component's visible area and the index values ​​of each node in the updated tree component list.

[0168] Furthermore, the updated target node needs to be re-rendered.

[0169] In order to realize the retrieval function of the tree component, in this embodiment of the application, retrieval events in the rendering window can be detected and retrieval conditions in the retrieval events can be obtained.

[0170] When the tree component has a search function Figure 19 A flowchart illustrating one implementation process of step 520 according to an embodiment of this application is shown. Figure 19 As shown, Figure 5 Step 520 shown includes the following steps.

[0171] Step 1910: Determine the first node in the tree component list that meets the search criteria.

[0172] For example, for Figure 8 The tree-like component structure shown is used for retrieval. The retrieval condition is "0-0-1". The results that meet the retrieval condition are "0-0-1", "0-0-1-0", "0-0-1-1", and "0-0-1-2". The first result that meets the retrieval condition is "0-0-1".

[0173] Step 1920: Obtain at least one ancestor node of the first node that satisfies the search criteria, and determine the first target node from at least one ancestor node; the index value of the first target node is the starting index value of the target node in the tree component list.

[0174] Based on the hierarchical relationship between nodes in the tree component list, the farthest ancestor node of "0-0-1-0" is "0-0". Therefore, "0-0" can be used as the first target node. The index value of "0-0" is 0, and the starting index value of the target node in the tree component list is 0.

[0175] It should be noted that the nearest ancestor node of "0-0-1-0" can also be "0-0-1", so "0-0-1" can also be used as the first target node. The index value of "0-0-1" is 5, and the starting index value of the target node in the tree component list is 5.

[0176] It should also be noted that if the number of ancestor nodes of the first node that meets the search criteria is too large, an ancestor node of a certain depth can be selected as the first target node based on the height of the visible area of ​​the tree component; or if the number of nodes at the same level in front of the first node that meets the search criteria is too large, and the height of the visible area of ​​the tree component is insufficient to display the first node that meets the search criteria and its nodes at the same level in front of it at the same time, the first node that meets the search criteria can also be selected as the first target node.

[0177] Step 1930: Determine the minimum ending index value of the target node in the tree component list based on the height of the tree component's visible area and the rendering height of each node in the tree component list after the starting index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the tree component's visible area.

[0178] After determining the starting index value of the target node, extract the target nodes sequentially from the first target node in the tree component list. It should be noted that the child nodes of a node whose expanded state is collapsed are not considered as target nodes.

[0179] Step 1940: Obtain the target node based on the starting index value and the minimum ending index value.

[0180] To enable dragging functionality for tree components, this embodiment detects drag events in the rendering window. Dragging a node to be dragged above another node in the rendering window inserts the node before that node; dragging a node to be dragged to the center of another node in the rendering window inserts the node to be dragged at the end of that node's child nodes; dragging a node to be dragged below another node in the rendering window inserts the node to be dragged after that node.

[0181] To implement single / double-click functionality for the tree component, this embodiment utilizes Qt to detect mouse events (MouseEvent), including the Clicked and DoubleClicked events. When a user performs a single click, the Qt onClicked signal function is triggered; similarly, when a user performs a double click, the Qt onDoubleClicked signal function is triggered. Double-clicking typically involves renaming already rendered nodes in the rendering window.

[0182] It is worth noting that the QT development library provides the simplest default rendering strategy, and the node rendering display effect may not meet the needs of the UI (User Interface). In order to enable UI developers to customize the rendering display effect of tree components, this application embodiment can provide a custom rendering interface. UI developers can use this interface to write custom rendering components and custom signal receivers in the corresponding positions, thereby customizing the rendering display effect of target nodes in the rendering window.

[0183] To further optimize the performance of this application's embodiments, when refreshing the data of a single rendered node in the rendering window, only the rendered node in the rendering window can be updated, without refreshing the entire tree component list. When the position of a node in the rendering window changes or expands / collapses, only the node that needs to be changed is refreshed, without refreshing the entire tree component list. When the width or height of the rendered view changes, a debounce function can be called to avoid unnecessary refreshes.

[0184] In the technical solutions of the above embodiments of this application, when rendering a tree component structure in a Flickable window based on QT, on the one hand, only a portion of the nodes that match the height of the visible area of ​​the tree component are rendered and displayed, improving rendering efficiency; on the other hand, the index of the created node object is stored in the actual rendered node list. In scenarios where the Flickable window page is scrolled or refreshed, the content of the nodes in the created node object can be directly updated to complete the page refresh rendering, saving memory and optimizing performance. Furthermore, when unloading the tree component, the component can be unloaded by destroying the actual rendered node list; and on the other hand, when the node object corresponding to the target node has been created, a preset number of preloaded nodes are created to prevent blank spaces caused by the node not being rendered in time due to the page scrolling too fast.

[0185] The following describes an embodiment of the apparatus described in this application, which can be used to execute the video editing effect verification method described in the above embodiments of this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the tree component rendering method described above.

[0186] Figure 20 A block diagram of a tree component rendering apparatus according to an embodiment of this application is shown. This tree component rendering apparatus can be housed within an electronic device with computing processing capabilities, such as a server or terminal device. Figure 20 As shown, the device 2000 includes the following parts.

[0187] List retrieval unit 2010 is used to retrieve a list of tree components to be rendered. The list of tree components includes the index value of each node in the tree component and the hierarchical relationship between the nodes.

[0188] The target node determination unit 2020 is used to obtain at least one target node whose rendering height matches the height of the visible area of ​​the tree component based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list.

[0189] The display position determination unit 2030 is used to determine the display position of at least one target node in the rendering window based on the rendering height of at least one target node and the hierarchical relationship between nodes;

[0190] The rendering unit 2040 is used to render at least one target node in the rendering window based on the display position of at least one target node and the node content corresponding to at least one target node.

[0191] In some embodiments of this application, based on the aforementioned scheme, the list acquisition unit is configured to: acquire a tree component structure with hierarchical relationship; traverse sequentially from the root node of the tree component structure to generate a state tree containing node state information, the node state information including node depth and parent node identifier; and flatten the state tree to obtain a tree component list.

[0192] In some embodiments of this application, based on the foregoing scheme, the height of the visible area of ​​the tree component is less than the sum of the rendering heights of all uncollapsed nodes in the tree component list, and the apparatus further includes:

[0193] The sliding event detection unit is used to detect sliding events triggered in the rendering window and obtain the sliding distance;

[0194] The first node update unit is used to update the nodes that are rendered and displayed within the visible area of ​​the tree component based on the height of the tree component's visible area, the scroll distance, and the index value of each node in the tree component list.

[0195] In some embodiments of this application, based on the foregoing scheme, the index values ​​of each node in the tree component list are arranged in ascending order; the node update unit is configured as follows:

[0196] Based on the first index value of the first rendered node in the rendering window before the sliding event is detected, the rendering height of each node in the tree component list, and the sliding distance, the starting index value of the target node in the tree component list is determined.

[0197] Based on the height of the tree component's visible area and the rendering height of each node in the tree component list after the starting index value, determine the minimum ending index value of the target node in the tree component list; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the tree component's visible area.

[0198] In some embodiments of this application, based on the foregoing scheme, the rendering unit is configured to: obtain created node objects in the rendering window; replace the node content corresponding to the created node object with the node content of the target node that matches the display position of the created node object by referencing the created node object; if the number of created node objects is less than the number of target nodes, determine the nodes that do not match the created node objects from the target nodes; create new node objects in the rendering window according to the node content and display position of the nodes that do not match the created node objects; and store the reference of the new node object in the list of actual rendering nodes.

[0199] In some embodiments of this application, based on the foregoing scheme, the apparatus further includes:

[0200] The preload node determination unit is used to extract a preset number of nodes located after the target node from the tree component list based on the index value of the target node, and use them as preload nodes;

[0201] The preload node display position determination unit is used to determine the display position of the preload node based on the node hierarchy and rendering height of the preload node;

[0202] The preload node object creation unit is used to create a preload node object based on the display position and content of the preload node.

[0203] In some embodiments of this application, based on the foregoing scheme, the apparatus further includes:

[0204] The drag event detection unit is used to detect drag events in the rendering window;

[0205] The second node update unit is used to insert the first node into the last child node of the root node in the tree component list and update the index value of each node in the tree component list if the drag event is to drag the first node to the blank area in the rendering window; if the drag event is to drag the first node to the operation area associated with the second node in the rendering window, the first node is inserted into the position corresponding to the operation area associated with the second node in the tree component list and the index value of each node in the tree component list is updated.

[0206] In some embodiments of this application, based on the foregoing scheme, the target node determination unit is configured to: obtain at least one target node from the updated tree component list that matches the height of the visible area of ​​the tree component, based on the height of the visible area of ​​the tree component and the index values ​​of each node in the updated tree component list.

[0207] In some embodiments of this application, based on the foregoing scheme, the index values ​​of each node in the tree component list are arranged in ascending order; the apparatus further includes:

[0208] The retrieval event detection unit is used to detect retrieval events in the rendering window and obtain the retrieval conditions in the retrieval events.

[0209] The target node determination unit is configured to: determine the first node in the tree component list that satisfies the search criteria; obtain at least one ancestor node of the first node that satisfies the search criteria, and determine the first target node from the at least one ancestor node; the index value of the first target node is the starting index value of the target node in the tree component list; determine the minimum ending index value of the target node in the tree component list based on the height of the visible area of ​​the tree component and the rendering height of each node in the tree component list after the starting index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of ​​the tree component; and obtain the target node based on the starting index value and the minimum ending index value.

[0210] Figure 21 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown.

[0211] It should be noted that, Figure 21 The computer system 2100 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0212] like Figure 21 As shown, the computer system 2100 includes a central processing unit (CPU) 2101, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 2102 or programs loaded from storage portion 2108 into random access memory (RAM) 2103, such as performing the methods described in the above embodiments. Various programs and data required for system operation are also stored in RAM 2103. The CPU 2101, ROM 2102, and RAM 2103 are interconnected via bus 2104. An input / output (I / O) interface 2105 is also connected to bus 2104.

[0213] The following components are connected to I / O interface 2105: an input section 2106 including a keyboard, mouse, etc.; an output section 2107 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 2108 including a hard disk, etc.; and a communication section 2109 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 2109 performs communication processing via a network such as the Internet. A drive 2110 is also connected to I / O interface 2105 as needed. Removable media 2111, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 2110 as needed so that computer programs read from them can be installed into storage section 2108 as needed.

[0214] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 2109, and / or installed from removable medium 2111. When the computer program is executed by central processing unit (CPU) 2101, it performs various functions defined in the system of this application.

[0215] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such transmitted data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0216] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0217] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0218] In another aspect, this application also provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the tree component rendering method described in the above embodiments.

[0219] In another aspect, this application also provides a computer-readable medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to implement the tree component rendering method described in the above embodiments.

[0220] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of this application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0221] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiments of this application.

[0222] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein.

[0223] It should be understood that this application is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A method for rendering tree components, characterized in that, The method includes: Obtain a list of tree components to be rendered, the list of tree components including the index value of each node in the tree component and the hierarchical relationship between the nodes; Based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list, at least one target node that matches the height of the visible area of ​​the tree component is obtained from the tree component list. Based on the rendering height of the at least one target node and the hierarchical relationship between the nodes, the display position of the at least one target node in the rendering window is determined; Based on the display position of the at least one target node and the node content corresponding to the at least one target node, the at least one target node is rendered in the rendering window; The step of retrieving at least one target node from the tree component list that matches the height of the tree component's visible area, based on the height of the tree component's visible area and the index value corresponding to each node in the tree component list, includes: If the height of the visible area of ​​the tree component is less than the sum of the rendering heights of all uncrushed nodes in the tree component list, then nodes are truncated in order of their corresponding index values ​​in the tree component list. After each node is truncated, the sum of the rendering heights of all truncated nodes is calculated based on their respective rendering heights. This process continues until the sum of the rendering heights is greater than or equal to the height of the visible area of ​​the tree component. All nodes truncated after this point are then identified as the target nodes. Here, the rendering height of a node refers to the vertical height that the node should occupy in the rendering window. The step of rendering the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node includes: Retrieve the created node objects in the rendering window; By referencing the created node object, the node content corresponding to the created node object is replaced with the node content of the target node that matches the display position of the created node object; If the number of created node objects is less than the number of nodes in the target node, then nodes that do not match any created node objects are determined from the target nodes. Using the object creation function of the cross-platform C++ application development framework QT, a node object corresponding to the target node that does not match an already created node object is created, based on the node content, display position, and rendering window of the target node that does not match an already created node object. The references to the created node objects are stored in the list of actual rendered nodes.

2. The method as described in claim 1, characterized in that, The process of obtaining the list of tree components to be rendered includes: Obtain a tree-like component structure with hierarchical relationships; Starting from the root node of the tree component structure, traverse sequentially to generate a state tree containing node state information, including node depth and parent node identifier. The state tree is tiled to obtain the tree component list.

3. The method as described in claim 1, characterized in that, The height of the visible area of ​​the tree component is less than the sum of the rendering heights of all uncollapsed nodes in the tree component list, and the method further includes: Detect the sliding event triggered in the rendering window to obtain the sliding distance; Based on the height of the visible area of ​​the tree component, the sliding distance, and the index value of each node in the tree component list, the nodes rendered and displayed within the visible area of ​​the tree component are updated.

4. The method as described in claim 3, characterized in that, The node index values ​​in the tree component list are arranged in ascending order; Based on the height of the visible area of ​​the tree component, the sliding distance, and the index values ​​of each node in the tree component list, the nodes rendered and displayed within the visible area of ​​the tree component are updated, including: Based on the first index value of the first rendered node in the rendering window before the sliding event is detected, the rendering height of each node in the tree component list, and the sliding distance, the starting index value of the target node in the tree component list is determined. The minimum ending index value of the target node in the tree component list is determined based on the height of the visible area of ​​the tree component and the rendering height of each node in the tree component list after the starting index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of ​​the tree component.

5. The method as described in claim 1, characterized in that, The method further includes: Based on the index value of the target node, a predetermined number of nodes located after the target node are extracted from the tree component list and used as preloaded nodes; Based on the node hierarchy and rendering height of the preloaded nodes, the display position of the preloaded nodes is determined; Create a preloaded node object based on the display position and content of the preloaded node.

6. The method as described in claim 1, characterized in that, The method further includes: Detect drag events in the rendering window; If the drag event is to drag the first node to the blank area in the rendering window, then the first node is inserted at the end of the last child node of the root node in the tree component list, and the index value of each node in the tree component list is updated. If the drag event is to drag the first node to the operation area associated with the second node in the rendering window, then the first node is inserted into the position corresponding to the operation area associated with the second node in the tree component list, and the index value of each node in the tree component list is updated.

7. The method as described in claim 6, characterized in that, Based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list, at least one target node matching the height of the visible area of ​​the tree component is obtained from the tree component list, including: Based on the height of the visible area of ​​the tree component and the index values ​​of each node in the updated tree component list, at least one target node that matches the height of the visible area of ​​the tree component is obtained from the updated tree component list.

8. The method according to any one of claims 1 to 7, characterized in that, The index values ​​of each node in the tree component list are arranged in ascending order; the method further includes: Detect search events in the rendering window and obtain search conditions from the search events; The step of retrieving at least one target node from the tree component list that matches the height of the tree component's visible area, based on the height of the tree component's visible area and the index values ​​corresponding to each node in the tree component list, includes: Determine the first node in the tree component list that satisfies the search criteria; Obtain at least one ancestor node of the first node that satisfies the search conditions, and determine the first target node from the at least one ancestor node; the index value of the first target node is the starting index value of the target node in the tree component list; Based on the height of the visible area of ​​the tree component and the rendering height of each node in the tree component list after the starting index value, the minimum ending index value of the target node in the tree component list is determined; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of ​​the tree component. The target node is obtained based on the starting index value and the minimum ending index value.

9. A tree component rendering device, characterized in that, The device includes: The list retrieval unit is used to retrieve a list of tree components to be rendered, wherein the list of tree components includes the index value corresponding to each node in the tree component and the hierarchical relationship between the nodes; The target node determination unit is used to obtain at least one target node that matches the height of the visible area of ​​the tree component from the tree component list based on the height of the visible area of ​​the tree component and the index value corresponding to each node in the tree component list; The display position determination unit is used to determine the display position of the at least one target node in the rendering window based on the rendering height of the at least one target node and the hierarchical relationship between the nodes; A rendering unit is configured to render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node; The step of retrieving at least one target node from the tree component list that matches the height of the tree component's visible area, based on the height of the tree component's visible area and the index value corresponding to each node in the tree component list, includes: If the height of the visible area of ​​the tree component is less than the sum of the rendering heights of all uncrushed nodes in the tree component list, then nodes are truncated in order of their corresponding index values ​​in the tree component list. After each node is truncated, the sum of the rendering heights of all truncated nodes is calculated based on their respective rendering heights. This process continues until the sum of the rendering heights is greater than or equal to the height of the visible area of ​​the tree component. All nodes truncated after this point are then identified as the target nodes. Here, the rendering height of a node refers to the vertical height that the node should occupy in the rendering window. The step of rendering the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node includes: Retrieve the created node objects in the rendering window; By referencing the created node object, the node content corresponding to the created node object is replaced with the node content of the target node that matches the display position of the created node object; If the number of created node objects is less than the number of nodes in the target node, then nodes that do not match any created node objects are determined from the target nodes. Using the object creation function of the cross-platform C++ application development framework QT, a node object corresponding to the target node that does not match an already created node object is created, based on the node content, display position, and rendering window of the target node that does not match an already created node object. The references to the created node objects are stored in the list of actual rendered nodes.

10. A computer-readable medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the tree component rendering method according to any one of claims 1 to 8.

11. An electronic device, characterized in that, The device includes one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the electronic device to implement the tree component rendering method of any one of claims 1 to 8.

12. A computer program product, characterized in that, The computer program product includes a computer program stored in a computer-readable storage medium, and a processor of a computer device reads from and executes the computer program, causing the computer device to perform the tree component rendering method according to any one of claims 1 to 8.

Images