CN115705375A

CN115705375A - Tree component rendering method and device

Info

Publication number: CN115705375A
Application number: CN202110927501.4A
Authority: CN
Inventors: 周达理; 张晨
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2021-08-10
Filing date: 2021-08-10
Publication date: 2023-02-17

Abstract

The embodiment of the application provides a tree component rendering method and device. The tree component rendering method comprises the following steps: acquiring a tree component list to be rendered, wherein the tree component list comprises index values corresponding to all nodes in the tree component and hierarchical relations among the nodes; acquiring at least one target node with rendering height matched with the height of the visual area of the tree component from the tree component list based on the height of the visual area of the tree component and the index value corresponding to each node in the tree component list; determining 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 relation between the nodes; and 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. According to the technical scheme of the embodiment of the application, the rendering efficiency is improved, and the rendering delay is reduced.

Description

Tree component rendering method and device

Technical Field

The application relates to a component rendering technology, in particular to a tree component rendering method and device.

Background

The tree structure refers to a data structure with one-to-many tree relationship among data elements, and is an important nonlinear data structure, the inclusion relationship, the organization architecture, the biological classification, the geographic region and the like of folders are all tree structures, and tree components in the tree structures can completely show the hierarchical relationship therein and have interactive functions of rolling, expanding, retracting, selecting and the like. Thus, tree components are commonly used components in front-end pages.

However, in an application scenario with a large number of data nodes and a large amount of data, a large amount of data may be transmitted into the tree component, and the related tree component may have a problem of significant rendering delay.

Disclosure of Invention

The embodiment of the application provides a tree-shaped component rendering method and device, and further solves the problem of tree-shaped component rendering delay under large data volume at least to a certain extent, so that the tree-shaped component rendering efficiency is improved, and the user experience is improved.

Other features and advantages of the present application will be apparent from the following detailed description, or may be learned by practice of the application.

According to an aspect of an embodiment of the present application, there is provided a tree component rendering method, including:

acquiring a tree component list to be rendered, wherein the tree component list comprises index values corresponding to all nodes in the tree component and hierarchical relations among the nodes;

acquiring at least one target node with rendering height matched with the height of the visual area of the tree component from the tree component list based on the height of the visual area of the tree component and the index value corresponding to each node in the tree component list;

determining 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 relation between the nodes;

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.

According to an aspect of an embodiment of the present application, there is provided a tree component rendering apparatus including:

the system comprises a list acquisition unit, a rendering unit and a rendering unit, wherein the list acquisition unit is used for acquiring a tree component list to be rendered, and the tree component list comprises index values corresponding to all nodes in the tree component and hierarchical relations among the nodes;

a target node determining unit, configured to obtain, from the tree component list, at least one target node whose rendering height matches the height of the tree component visual area based on the height of the tree component visual area and an index value corresponding to each node in the tree component list;

the display position determining unit is used for determining 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 relation between the nodes;

and the rendering unit is used for 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.

In some embodiments of the present application, based on the foregoing scheme, the list obtaining unit is configured to: acquiring a tree component structure with a hierarchical relationship; traversing from the root node of the tree-shaped component structure in sequence to generate a state tree containing node state information, wherein the node state information comprises node depth and a father node identifier; and carrying out tiling processing on the state tree to obtain the tree component list.

In some embodiments of the present application, based on the foregoing solution, the height of the visible area of the tree component is less than the sum of rendering heights of all nodes in the tree component list that are not folded, and the apparatus further includes:

the sliding event monitoring unit is used for monitoring the sliding event triggered in the rendering window to obtain a sliding distance;

and the first node updating unit is used for updating the nodes which are rendered and displayed in the visual area of the tree-shaped component based on the height of the visual area of the tree-shaped component, the sliding distance and the index value of each node in the tree-shaped component list.

In some embodiments of the present application, based on the foregoing scheme, index values of nodes in the tree component list are sequentially arranged from small to large; the node update unit is configured to:

determining a starting index value of the target node in the tree component list based on a first index value of a first rendered node in the rendering window, rendering heights of all nodes in the tree component list and the sliding distance before the sliding event is monitored;

determining a minimum ending index value of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node positioned behind the starting index value in the tree component list; and the sum of the rendering heights of all the nodes in the target nodes is greater than or equal to the height of the visual area of the tree component.

In some embodiments of the present application, based on the foregoing solution, the rendering unit is configured to: acquiring the created node object in the rendering window; replacing the node content corresponding to the created node object with the node content of the target node matched with the display position of the created node object by the reference of the created node object; if the number of the created node objects is smaller than the number of the nodes of the target node, determining the nodes which are not matched with the created node objects from the target node; creating a new node object in the rendering window according to the node content and the display position of the node which is not matched with the created node object; storing the reference of the new node object in an actual rendering node list.

In some embodiments of the present application, based on the foregoing solution, the apparatus further includes:

a preloaded node determining unit, configured to intercept, from the tree component list, a preset number of nodes located behind the target node according to the index value of the target node, as preloaded nodes;

a preloaded node display position determination unit, configured to determine a display position of the preloaded node based on a node hierarchy relationship and a rendering height of the preloaded node;

and the preloading node object creating unit is used for creating a preloading node object according to the display position and the node content of the preloading node.

the drag event monitoring unit is used for monitoring the drag event in the rendering window;

the second node updating unit is used for inserting the first node into the tail of the last child node of the root node in the tree component list and updating the index value of each node in the tree component list if the dragging event is that the first node is dragged to a hollow area in the rendering window; and if the drag event is that the first node is dragged to an operation area associated with a second node in the rendering window, inserting the first node into a position corresponding to the operation area associated with the second node in the tree component list, and updating the index value of each node in the tree component list.

In some embodiments of the present application, based on the foregoing scheme, the target node determining unit is configured to: and acquiring at least one target node matched with the height of the visual area of the tree component from the updated tree component list based on the height of the visual area of the tree component and the index value of each node in the updated tree component list.

In some embodiments of the present application, based on the foregoing scheme, the index values of the nodes in the tree component list are sequentially arranged from small to large; the device further comprises:

a retrieval event monitoring unit, configured to monitor a retrieval event in the rendering window, and obtain a retrieval condition in the retrieval event;

the target node determination unit is configured to: determining a first node in the tree component list meeting the retrieval condition; acquiring at least one ancestor node of the first node meeting the retrieval condition, and determining a first target node from the at least one ancestor node; the index value of the first target node is the initial index value of the target node in the tree component list; determining a minimum ending index value of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node positioned behind the starting index value in the tree component list; wherein the sum of the rendering heights of all nodes in the target nodes is greater than or equal to the height of the visible area of the tree component; and acquiring the target node according to the starting index value and the minimum ending index value.

According to an aspect of an embodiment of the present application, there is provided a computer program product or a computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to cause the computer device to execute the tree component rendering method described in the above embodiments.

According to an aspect of embodiments of the present application, there is provided a computer readable medium having stored thereon a computer program which, when executed by a processor, implements a tree component rendering method as described in the above embodiments.

According to an aspect of an embodiment of the present application, there is provided an electronic device including: one or more processors; a storage device for storing one or more programs which, when executed by the one or more processors, cause the electronic apparatus to implement the tree component rendering method as in the above embodiments.

In the technical scheme provided by some embodiments of the application, when the tree component list is rendered, nodes which are highly matched with the visible area of the tree component are intercepted from the tree component list for rendering display, and the rendering efficiency of the tree component is improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and together with the description, serve to explain the principles of the application. It is obvious that the drawings in the following description are only some embodiments of the application, and that for a person skilled in the art, other drawings can be derived from them without inventive effort. In the drawings:

fig. 1 shows a schematic diagram of an exemplary system architecture to which the technical solution of the embodiments of the present application can be applied.

FIG. 2-A illustrates a rendering effect diagram of an object tree component according to one embodiment of the present application.

FIG. 2-B illustrates a rendering effect diagram of an object tree component according to one embodiment of the present application.

FIG. 3-A illustrates a rendering effect diagram of a resource tree component according to one embodiment of the present application.

FIG. 3-B illustrates a rendering effect diagram of a resource tree component according to one embodiment of the present application.

FIG. 4-A illustrates a rendering effect diagram of a folder selection tree component according to one embodiment of the present application.

FIG. 4-B illustrates an effect diagram of a tree component applied in software according to one embodiment of the present application.

FIG. 5 shows a flow diagram of a tree component rendering method according to one embodiment of the present application.

FIG. 6 illustrates a diagram comparing a tree component visual area with a list of tree nodes, according to one embodiment of the present application.

FIG. 7 shows a flowchart of one implementation of step 510, according to one embodiment of the present application.

FIG. 8 illustrates a tree component structure according to one embodiment of the present application.

FIG. 9 illustrates a data structure of a node according to one embodiment of the present application

FIG. 10 illustrates a process diagram for generating a tree component list from a tree component structure according to one embodiment of the present application.

FIG. 11 illustrates a flow diagram of a tree component rendering method according to one embodiment of the present application.

FIG. 12 illustrates a Flickable Window sliding diagram according to one embodiment of the application.

FIG. 13 illustrates a front-to-back comparison diagram of a rendered window, according to one embodiment of the present application.

FIG. 14 shows a flowchart of one implementation of step 1160, according to one embodiment of the present application.

FIG. 15 shows a flowchart of one implementation of step 540, according to one embodiment of the present application.

FIG. 16 shows a flow diagram of a tree component rendering method according to one embodiment of the present application.

Figure 17 shows a target node and preload node schematic according to one embodiment of the present application.

FIG. 18 shows a flow diagram of a tree component rendering method according to one embodiment of the present application.

FIG. 19 shows a flowchart of one implementation of step 520, according to one embodiment of the present application.

FIG. 20 shows a block diagram of a tree component rendering apparatus according to an embodiment of the present application.

FIG. 21 illustrates a block diagram of a computer system suitable for use to implement the electronic device of an embodiment of the present application.

Detailed Description

Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art.

Furthermore, the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the application. One skilled in the relevant art will recognize, however, that the embodiments of the present application can be practiced without one or more of the specific details, or with other methods, components, devices, steps, and so forth. In other instances, well-known methods, devices, implementations, or operations have not been shown or described in detail to avoid obscuring aspects of the application.

The block diagrams shown in the figures are functional entities only and do not necessarily correspond to physically separate entities. I.e. these functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor means and/or microcontroller means.

The flow charts shown in the drawings are merely illustrative and do not necessarily include all of the contents and operations/steps, nor do they necessarily have to be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the actual execution sequence may be changed according to the actual situation.

It should be noted that: reference herein to "a plurality" means two or more. "and/or" describe the association relationship of the associated objects, meaning that there may be three relationships, e.g., A and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.

It is noted that the terms first, second and the like in the description and claims of the present application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the objects so used are interchangeable under appropriate circumstances such that the embodiments of the application described herein are capable of operation in other sequences than those illustrated or described herein.

As shown in fig. 1, the system architecture may include a terminal device (such as one or more of the smartphone 101, tablet 102, and portable computer 103 shown in fig. 1), a network 104, and a server 105. The network 104 serves as a medium for providing communication links between terminal devices and the server 105. Network 104 may include various connection types, such as wired communication links, wireless communication links, and so forth.

In an embodiment of the present application, a terminal device may obtain a tree node from the server 105, and the terminal device processes the tree node into a list of tree nodes to be rendered; acquiring at least one target node with rendering height matched with the height of the visual area of the tree component from the tree component list based on the height of the visual area of the tree component and the index value corresponding to each node in the tree component list; determining 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 relation between the nodes; 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.

It should be noted that the tree component rendering method provided in the embodiment of the present application may be executed by a terminal device, and accordingly, the tree component rendering apparatus is generally disposed in the terminal device. However, in other embodiments of the present application, the server may also have a similar function as the terminal device, so as to execute the tree component rendering scheme provided in the embodiments of the present application.

It should also be noted that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. According to implementation needs, the server may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a network service, cloud communication, a middleware service, a domain name service, a security service, a CDN, a big data and artificial intelligence platform, and the like. The terminal may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, and the like, but is not limited thereto, and the application is not limited thereto.

It should be explained that cloud computing (cloud computing) as described above is a computing model that distributes computing tasks over a large pool of computers, enabling various application systems to obtain computing power, storage space, and information services as needed. The network that provides the resources is referred to as the "cloud". Resources in the 'cloud' can be infinitely expanded to users, and can be acquired at any time, used as required and expanded at any time. The cloud computing resource pool mainly comprises computing equipment (which is a virtualization machine and comprises an operating system), storage equipment and network equipment.

FIG. 2-A illustrates a rendering effect diagram of an object tree component according to one embodiment of the present application. The object tree shown in fig. 2-a includes nodes located under a shooting template, such as sketchpad nodes, lvBu (prefab) nodes, and one LvBu (prefab) node may include a plurality of child nodes for describing transitions, effects, and the like of animations. And a subsequent SDK (Software Development Kit)) rendering component performs topology traversal according to the object tree and renders the object tree according to the sequence of the layers to form a picture sequence frame to realize the special effect of the user.

When only the rendering of a 2D sticker layer and PAG (Portable Animated Graphics) is supported in a game, the object tree generally does not exceed 200 child nodes, but when a 3D playing method is added to the game, the number of 3D object nodes is large, for example, a skeleton animation of a complex 3D model includes hundreds of nodes, and related object trees cannot be rendered better and faster under a large data volume, so that the game performance is reduced.

FIG. 2-B illustrates a rendering effect diagram of an object tree component according to one embodiment of the present application. The effect graph developed from the first LvBu (prefab) node in the object tree in fig. 2-a shows that the LvBu (prefab) node includes many child nodes, a rendering window cannot render and display all the child nodes, and nodes with different node depths are indented differently in the X direction.

FIG. 3-A illustrates a rendering effect diagram of a resource tree component according to one embodiment of the present application. The game resources are mainly temporary files and preset resources required in the process of making the template by the Light Studio. With the increasing complexity of game items, more and more 2D resources and 3D resources are needed, and more nodes corresponding to the resource tree are needed. Fig. 3-a shows an effect diagram of displaying a resource tree in a rendering window by using the component rendering method according to the embodiment of the present application, where the effect diagram includes a plurality of node _ modules, each node _ module also includes a plurality of child nodes, and the expanded effect diagram is shown in fig. 3-B.

FIG. 4-A illustrates a rendering effect diagram of a folder selection tree component according to one embodiment of the present application. As shown in fig. 4-a, the tree component supports a search function, such as a search condition being entered in an input box 401, and a file meeting the search condition can be presented in a window by searching.

FIG. 4-B illustrates an effect diagram of a tree component applied in software according to one embodiment of the present application. As shown in fig. 4-B, an object tree component and a resource tree component are applied in software, both of which support retrieval functionality. After the search condition is entered in the input box 402, the object tree component may be searched. The object tree component has fewer nodes to be expanded, and the height of the nodes to be rendered and displayed is less than the height of the visual area of the tree component, so the rendering window 403 in the object tree component only occupies a part of the visual area 404 of the tree component. After entering the search criteria in input block 405, the resource tree component may be searched. More nodes are expanded in the resource tree component, and the height of the nodes to be rendered and displayed is larger than the height of the visual area of the tree component, so that the rendering window 406 occupies the whole visual area 407 of the tree component and generates a scroll bar 408 for page sliding.

Based on the tree components described in the foregoing embodiments, the present application provides a new rendering method for tree components, and details of implementation details of the technical solution of the present application are set forth below:

fig. 5 shows a flowchart of a tree component rendering method according to an embodiment of the present application, which may be performed by an electronic device with a computation processing function, such as a server or a terminal device. As shown in fig. 5, the method includes the following steps.

Step 510: and acquiring a tree component list to be rendered, wherein the tree component list comprises index values corresponding to all nodes in the tree component and the hierarchical relation between the nodes.

Different from a mode that data nodes to be rendered are stored as a tree structure and rendering is performed based on the tree structure in a related technical scheme, the data nodes to be rendered are stored in a list form in the embodiment of the application. The tree component list to be rendered is data for storing each node in the tree component to be rendered in a list form, each node corresponds to an index value of the node, and the tree component list stores the hierarchical relationship among the nodes in order to display the hierarchical relationship among the nodes in a subsequent rendering link.

Step 520: and acquiring at least one target node with the rendering height matched with the height of the visual area of the tree component from the tree component list based on the height of the visual area of the tree component and the index value corresponding to each node in the tree component list.

The tree component visual area is an area for displaying tree components on a screen of the terminal device, namely an area where the tree components are available for browsing. If the tree-shaped component list is rendered in the whole desktop area of the terminal equipment, the height of the desktop area of the terminal equipment is the height of the visible area of the tree-shaped component; for another example, in fig. 4-B, the object tree component and the resource tree component are components of the whole software, and the visible areas of both tree components only occupy a part of the whole software screen.

Under the scene that the data volume of the data node to be rendered is very large, the rendering delay of the related tree component rendering technology is large, and the root of the performance bottleneck is that the number of the nodes rendered at each time is too large.

When the data volume of the data nodes to be rendered is very large, and the size of the visible area of the tree component is limited (not exceeding the size of the screen of the terminal device), even if all the nodes are rendered at one time, the visible area of the tree component cannot display all the rendered data nodes at one time, and rendering delay and image blockage are caused. FIG. 6 illustrates a diagram comparing a tree component visual area with a list of tree nodes, according to one embodiment of the present application. As shown in fig. 6, the height of the tree component visual area is smaller than the sum of the rendering heights of all nodes in the tree node list, and only a part of the nodes can be displayed in the tree component visual area at a time.

Therefore, only part of nodes are sequentially intercepted from the tree component list to serve as target nodes until the rendering height of the target nodes is greater than or equal to the height of the visible area of the tree component for the first time.

And during the first rendering, intercepting the target node from the first node in the tree component list until the rendering height of the target node is greater than the visual area height of the tree component for the first time. For example, if the rendering heights of the first eight nodes are smaller than the height of the visible area of the tree component, and the rendering heights of the first nine nodes are greater than or equal to the height of the visible area of the tree component, the first nine nodes are taken as target nodes.

Step 530: and determining 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 relation between the nodes.

The rendering height of each node in the tree component list may be different, and the child nodes are indented with respect to their parent nodes, so that the display positions of the nodes in the target node in the rendering window need to be dynamically calculated according to the rendering height of the target node and the hierarchical relationship between the nodes.

The display position of a node in a rendered window may be represented by X, Y, where X represents a horizontal position and Y represents a vertical position. And the target nodes are sequentially rendered and displayed along the Y direction, so that the Y value of the first node in the target node in the rendering window is 0 (indicating that the node is in the upper left area of the rendering window), and the X value needs to be calculated according to the depth of the node.

For example, if the display position of each layer of nodes is set to be indented 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).

It should be noted that the embodiment of the present application may be implemented based on a QT (Q toolkit) development library, where QT is a cross-platform C + + development library and is mainly used to develop a desktop end Graphical User Interface (GUI) program or a Command line Interface (CUI) program without an Interface. The render window may select a QT-based Flickable window. The Flickable window may utilize a smaller window to display larger content, and the user may browse the content by scrolling through the scrollbar. Setting the sum of the heights of all nodes of non-folding attributes in the tree component list as the content height (contentHeight) of a Flickable window; the height of the visual area of the tree component is set to the height (height) of the Flickable Window.

Step 540: and 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.

Inputting the display position of the target node, the node content corresponding to the target node and the rendering window corresponding to the target node into a createObject function through a createObject API provided by the QT, and creating a node object corresponding to the target node, thereby rendering and displaying the target node in a rendering view.

According to the method and the device, the nodes which are matched with the height of the visible area of the tree-shaped component are intercepted from the tree-shaped component list to be rendered and displayed, the rendering efficiency of the tree-shaped component is improved, and the rendering delay is reduced.

FIG. 7 shows a detailed flowchart of step 510 according to one embodiment of the present application, and as shown in FIG. 7, step 510 includes the following steps.

Step 710: a tree component structure having a hierarchical relationship is obtained.

A tree component structure is a special data structure, with the root node having no parent node, and each node having no child nodes or multiple child nodes.

FIG. 8 illustrates a tree component structure according to one embodiment of the present application. As can be derived from FIG. 8, the tree component structure includes root nodes "0-0"; the root node "0-0" includes child nodes "0-0-0", "0-0-1", and "0-0-2"; the child nodes "0-0-0" include child nodes "0-0-0-0", "0-0-0-1", and "0-0-0-2"; the child node "0-0-1" includes child nodes "0-0-1-0", "0-0-1-1", and "0-0-1-2".

FIG. 9 illustrates a data structure of a node according to one embodiment of the present application. As shown in FIG. 9, each node in the tree component structure has underlying attributes, such as: the unique identifier id of the node, the name title of the node, and the child node child of the node, etc.

In addition to the basic attributes, the tree nodes in the embodiment of the application can also expand some attributes, such as the depth of the node and the identifier id of the parent node of the node, so that the tree components can be efficiently displayed and used subsequently.

It should be noted that, in order to implement the folding/collapsing function of the tree component, the node in the tree component structure may also expand the expansion state attribute isenxpand of the node, and the user may set the expansion state attribute of the node to be expansion or folding through mouse operation.

Fig. 2-B and 3-B show the development effect diagrams of the nodes in the object tree and the resource tree, respectively, and refer to the description of the foregoing embodiments specifically.

It should be noted that the tree component structure may also be obtained from a blockchain, and specifically may be obtained from an intelligent contract of the blockchain. For example, after a game developer generates a tree structure of an object type (including all entities in a game and a relationship between a rendering target drawing board, a transition group, an efficiency group, and an effect group), the tree structure is sent to a blockchain network, and after consensus is achieved in the blockchain network, the tree structure is written into the blockchain.

The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism and an encryption algorithm. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product services layer, and an application services layer.

The block chain underlying platform can comprise processing modules such as user management, basic service, intelligent contract and operation monitoring. The user management module is responsible for identity information management of all blockchain participants, and comprises public and private key generation maintenance (account management), key management, user real identity and blockchain address corresponding relation maintenance (authority management) and the like, and under the authorization condition, the user management module supervises and audits the transaction condition of certain real identities and provides rule configuration (wind control audit) of risk control; the basic service module is deployed on all block chain node point devices and used for verifying the effectiveness of the service request, recording the effective request after consensus is completed on storage, for a new service request, the basic service firstly performs interface adaptation analysis and authentication processing (interface adaptation), then encrypts service information (consensus management) through a consensus algorithm, transmits the encrypted service information to a shared account (network communication) completely and consistently, and performs recording and storage; the intelligent contract module is responsible for registering and issuing contracts, triggering the contracts and executing the contracts, developers can define contract logics through a certain programming language, issue the contract logics to a block chain (contract registration), call keys or other event triggering and executing according to the logics of contract clauses, complete the contract logics and simultaneously provide the function of canceling contract upgrading logout; the operation monitoring module is mainly responsible for deployment, configuration modification, contract setting, cloud adaptation in the product release process, and visual output of real-time status in product operation, for example: alarm, monitoring network conditions, monitoring node equipment health status, and the like.

The platform product service layer provides basic capability and an implementation framework of typical application, and developers can complete block chain implementation of business logic based on the basic capability and the characteristics of the superposed business. The application service layer provides the application service based on the block chain scheme for the business participants to use.

When the nodes in the tree structure list have the expanded state attributes, the expanded state attributes of the nodes are considered when the target node is acquired in step 520, and the child nodes of the nodes whose expanded state attributes are collapsed are not the target node.

In order to realize the tree component of the file type, the tree structure can also expand the path attribute path and the resource identifier attribute resource of the node, and store the storage position of the file.

Step 720: and traversing sequentially from the root node of the tree-shaped component structure to generate a state tree containing node state information, wherein the node state information comprises node depth and a father node identifier.

In a specific implementation, in order to set an expansion attribute of each node in the tree component structure, a recursive traversal may be performed from a root node of the tree structure, and a depth of the node and an identifier id of a parent node of the node are added to each node, so as to construct and obtain a state tree with node state information. After the state information of the nodes is stored in the state tree, repeated calculation is not needed to obtain the state information of the nodes when the tree component is rendered subsequently.

Step 730: and carrying out tiling processing on the state tree to obtain a tree component list.

In a specific implementation, the nodes of the state tree can be expanded by tiling the state tree, and if one father node has child nodes, all the child nodes are arranged under the father node; and giving an index value to each data node according to the arrangement sequence of the expanded data nodes, wherein the index values between adjacent nodes are increased or decreased gradually according to a fixed value.

FIG. 10 illustrates a process diagram for generating a tree component list from a tree component structure according to one embodiment of the present application. As shown in fig. 10, the tree structure is tiled to obtain a tree component list. If the index values of the tree component list are arranged from the root node from small to large, and the index value of the root node '0-0' is 0, the index value of '0-0-0' is 1, the index value of '0-0-0' is 2, the index value of … …, and the index value of '0-2' is 11.

In the embodiment of the application, the height of the visible area of the tree component is smaller than the sum of rendering heights of all nodes which are not folded in the tree component list, and the rendering window forms a scroll bar for sliding. For example, the content height of the Flickable window is smaller than that of the Flickable window, and the Flickable window forms a scroll bar and can simulate the effect of real node scrolling.

FIG. 11 shows a flowchart of a tree component rendering method according to an embodiment of the present application, as shown in FIG. 11, the method comprising the following steps 1110-1160.

The steps 1110-1140 are similar to the specific implementation of the steps 510-540 shown in fig. 5, and are not described herein again.

Step 1150: and monitoring a sliding event triggered in the rendering window to obtain a sliding distance.

After the user browses the target node of the current page in the rendering window, the user can slide the scroll bar through keyboard and mouse equipment or touch. The application can establish a QCoreapplication object through a QT development library, monitor ontentity events, namely sliding events, in a rendering window, and acquire contentY, namely Y-direction sliding distance, wherein the contentY is a read-only attribute provided by a Flickable window.

FIG. 12 illustrates a Flickable window sliding diagram according to one embodiment of the application, where the Flickable window slides 50 downward in the Y direction, slides 50 leftward in the X direction, has a content Y of 50, and has a sliding distance content X of-50 in the X direction, as shown in FIG. 12.

Step 1160: and updating the nodes which are rendered and displayed in the visible area of the tree-shaped component based on the height and the sliding distance of the visible area of the tree-shaped component and the index value of each node in the list of the tree-shaped component.

After the page in the Flickable window slides, nodes which are to be displayed in the page change, so that part of the nodes are intercepted from the tree component list again according to the sequence of the index values by combining the height and the sliding distance of the visible area of the tree component to serve as updated target nodes, and the updated target nodes are rendered and displayed.

FIG. 13 illustrates a front-to-back comparison diagram of a rendered window, according to one embodiment of the present application. As shown in fig. 13, the left side is a schematic diagram of the effect of the first rendering in the Flickable window, the node with index value 0 in the tree component list is displayed at the top of the page, and is limited by the height of the visible area of the tree component, and only eight nodes with index values 0-7 are displayed in the page.

When the downward sliding distance of the page is less than or equal to the rendering height of the node with the index value of 0, the first rendered node slides out from the Flickable window, the index value of the first node of the page is changed from 0 to 1, the nodes are sequentially intercepted from the index value 1 in the tree component list according to the height of the visible area of the tree component until the sum of the rendering heights of eight nodes with the index values of 1-8 is greater than the height of the visible area of the tree component for the first time, and then the index value of the updated target node is eight nodes with the index values of 1-8.

Correspondingly, when the distance of page downward sliding again is less than or equal to the rendering height of the node with the index value of 1, the first rendered node in the page slides out from the Flickable window, the index value of the first node in the page is changed from 1 to 2, the nodes are sequentially intercepted from the index value of 2 in the tree component list until the sum of the rendering heights of eight nodes with the index values of 2-9 is greater than the height of the visible area of the tree component for the first time, and then the updated index value of the target node is eight nodes with the index values of 2-9.

When a node in the tree structure list has an expanded state attribute, the expanded state attribute of each node needs to be considered when a target node is extracted from the tile class table, and a child node of which the expanded state attribute is a folded node is not taken as the target node.

FIG. 14 shows a flowchart of one implementation of step 1160, according to one embodiment of the present application. As shown in fig. 14, step 1160 includes the following steps.

Step 1410: and determining a starting index value of the target node in the tree component list based on the first index value of the first rendered node in the rendering window, the rendering height of each node in the tree component list and the sliding distance before the sliding event is monitored.

Step 1420: determining a minimum termination index value of a target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node positioned behind the initial index value in the tree component list; and the sum of the rendering heights of all nodes in the target nodes is greater than or equal to the height of the visual area of the tree component.

As shown in fig. 13, before listening to the sliding event in the Flickable window, the index value of the first rendered node of the Flickable window is 0, and when the page upward sliding distance is less than or equal to the rendering height of the node with index value 0, the node with index value 0 slides out from the window, and it is determined that the starting index value of the target node in the tree component list is 1.

And sequentially intercepting the nodes from index value 1 in the tree component list until the sum of rendering heights of eight nodes with index values of 1-8 is greater than the height of the visible area of the tree component for the first time, so that the minimum ending index value of the target node in the tree component list is 8.

For another example, when the page down-sliding distance is greater than the rendering height of the node with the index value of 0-3 and less than or equal to the rendering height of the node with the index value of 0-4, the node with the index value of 0-4 slides out of the window, and the starting index value of the target node in the tree component list is determined to be 5.

And sequentially intercepting the nodes from the index value 5 in the tree component list until the sum of rendering heights of seven nodes with the index values of 5-10 is greater than the height of the visible area of the tree component for the first time, wherein the minimum ending index value of the target node in the tree component list is 10.

FIG. 15 shows a flowchart of one implementation of step 540, according to one embodiment of the present application. As shown in fig. 15, step 540 includes the following steps.

Step 1510: and acquiring the created node object in the rendering window.

In the embodiment of the application, the rendering window can create a node object through a createObject API provided by the QT. As shown in FIG. 13, after the Flickable window is rendered for the first time, node objects with index values of 0-7 corresponding to the nodes are created in the window.

Step 1520: and replacing the node content corresponding to the created node object with the node content of the target node matched with the display position of the created node object by the reference of the created node object.

As shown in FIG. 13, when the downward sliding distance of the Flickable window page is less than or equal to the rendering height of the node with index value of 0, then the first rendered node slides out of the Flickable window, and the updated target node has eight nodes with index values of 1-8.

Correspondingly, when eight nodes with index values of 1-8 are rendered, the node contents of the node objects with the index values of 0-7 are respectively replaced by the node contents of the nodes with the index values of 1-8 through the created node object reference corresponding to the nodes with the index values of 0-7.

Therefore, when the number of the corresponding target nodes before the page sliding is greater than or equal to the number of the corresponding updated target nodes after the page sliding, a new node object does not need to be created in the rendering process after the page sliding, because the reference of the created node object can be stored in the actual rendering node list, the node content corresponding to the created node object only needs to be replaced by the node content of the target node matched with the display position of the created node object during rendering, and the memory is greatly saved.

Step 1530: and if the number of the created node objects is less than the number of the nodes of the target node, determining the nodes which are not matched with the created node objects from the target node.

Because the rendering heights of the nodes in the tree component list are different, the number of the nodes displayed on the screen before the rendering window slides and the number of the nodes displayed on the screen after the page slides may be different. And when the number of the corresponding target nodes before the page sliding is smaller than the number of the corresponding updated target nodes after the page sliding, part of the nodes in the target nodes cannot directly apply the created node objects.

Step 1540: and creating a new node object in the rendering window according to the node content and the display position of the node which is not matched with the created node object.

During the rendering process after page sliding, a new node object can be created for the nodes which are not matched with the created node object through the createObject API provided by Qt.

Step 1550: the reference of the new node object is stored in the actual rendering node list.

According to the method and the device, in a Flickable window, a target node is determined and a node object corresponding to the target node is created according to the height of a visible area of a tree-shaped component and the rendering height of nodes in a tree-shaped component list, and the nodes actually displayed on a current page are stored in an actual rendering node list. On one hand, under the scenes of sliding of the Flickable window page or other refreshing Flickable window pages, the content of the nodes in the created node object can be directly updated to complete page refreshing and rendering, so that the memory is saved, and the performance is optimized; on the other hand, when the tree-shaped component is unloaded, the component unloading can be carried out by destroying the actual rendering node list.

FIG. 16 shows a flow diagram of a tree component rendering method according to one embodiment of the present application. As shown in fig. 16, the method includes the following steps 1610 through 1670.

Steps 1610 to 1640 are similar to the implementation process of steps 510 to 540 shown in fig. 5, and are not described herein again.

Step 1650: and intercepting a preset number of nodes behind the target node from the tree component list as preloading nodes according to the index value of the target node.

And sequentially intercepting a preset number of nodes from the termination index value of the target node in the tree component list to serve as preloaded nodes, wherein the preloaded nodes are not displayed in the current page in the rendering window but may be displayed after the user slides the page. Figure 17 shows a target node and preload node schematic according to one embodiment of the present application. As shown in FIG. 17, if the target node in the rendering window is a node with index values 0-8, then the node with index value 9 is selected as the preloaded node.

Step 1660: and determining the display position of the preloading node based on the node hierarchical relation and the rendering height of the preloading node.

Determining the display position of the preloaded nodes, similar to the method of determining the display position of the target node

Step 1670: and creating a preloaded node object according to the display position and the node content of the preloaded node.

When the node object corresponding to the target node is created, a preset number of preloaded nodes are created, so that blank caused by the fact that the page slides too fast and the nodes are not rendered in time can be prevented.

FIG. 18 shows a flow diagram of a tree component rendering method according to one embodiment of the present application. As shown in FIG. 18, the method includes the following steps 1810-1840.

Steps 1810 to 1840 are similar to the implementation of steps 510 to 540 in fig. 5, and are not described herein again.

Step 1850: and monitoring a drag event in the rendering window.

When nodes are newly added or the positions of the nodes are adjusted in the tree component, a user can operate in a node dragging mode, and therefore the DragEvent event monitoring method can monitor DragEvent events, namely dragging events, based on event monitoring objects created by QT.

Step 1860: and if the dragging event is that the first node is dragged to a hollow area in the rendering window, inserting the first node into the tail of the last child node of the root node in the tree component list, and updating the index value of each node in the tree component list.

Step 1870: and if the dragging event is that the first node is dragged to the operation area associated with the second node in the rendering window, inserting the first node into the position corresponding to the operation area associated with the second node in the tree component list, and updating the index value of each node in the tree component list.

And dividing each rendered and displayed node in the current page in the rendering window into three operation areas, namely response areas to mouse operation, and inserting the dragged node into different positions in the tree component list after each area monitors a dragging event.

Correspondingly, after the tree component list is updated, at least one target node matched with the height of the tree component visual area needs to be obtained from the updated tree component list based on the height of the tree component visual area and the index value of each node in the updated tree component list.

Further, the updated target node needs to be re-rendered.

In order to realize the retrieval function of the tree-shaped component, in the embodiment of the application, a retrieval event in the rendering window can be monitored, and a retrieval condition in the retrieval event can be obtained.

FIG. 19 shows a flowchart of one implementation of step 520 according to one embodiment of the present application when the tree component is enabled for retrieval. As shown in fig. 19, step 520 shown in fig. 5 includes the following steps.

Step 1910: and determining the first node in the tree component list meeting the retrieval condition.

For example, when the tree component structure shown in FIG. 8 is searched and the search condition is "0-0-1", the search conditions are satisfied by "0-0-1", "0-0-1-0", "0-0-1-1", and "0-0-1-2", and the first one satisfying the search condition is "0-0-1".

Step 1920: acquiring at least one ancestor node of a first node meeting the retrieval condition, and determining a first target node from the at least one ancestor node; the index value of the first target node is the initial index value of the target node in the tree component list.

According to the hierarchical relationship among the nodes in the tree component list, the farthest ancestor node of 0-0-1-0 can be obtained as 0-0, so that 0-0 can be taken as the first target node, the index value of 0-0 is 0, and the initial index value of the target node in the tree component list is 0.

It should be noted that, the nearest ancestor node of "0-0-1-0" may also be "0-0-1", so that "0-0-1" may 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.

It should be further noted that, if the number of ancestor nodes of the first node satisfying the retrieval condition is too large, the ancestor node with a certain node depth can be compromised from the ancestor nodes as a first target node according to the height of the visible region of the tree component; or when the number of the nodes in the same forward hierarchy with the first node meeting the retrieval condition is too large, and the height of the visible region of the tree component is not enough, the first node meeting the retrieval condition and the nodes in the same forward hierarchy are displayed at the same time, the first node meeting the retrieval condition can be selected as the first target node.

Step 1930: determining a minimum termination index value of a target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node behind the initial index value in the tree component list; and the sum of the rendering heights of all nodes in the target nodes is greater than or equal to the height of the visual area of the tree component.

After the initial index value of the target node is determined, sequentially intercepting the target node from the first target node in the tree component list, wherein it needs to be noted that the child node of the node in the folded state is not taken as the target node.

Step 1940: and acquiring the target node according to the initial index value and the minimum termination index value.

In order to implement the drag function of the tree component, in the embodiment of the present application, a drag event in the rendering window may be monitored. When the node to be dragged is dragged to the upper part of a certain node in the rendering window, the node to be dragged is inserted in front of the node; the node to be dragged is dragged to the middle of a certain node in the rendering window, and then the node to be dragged is inserted into the tail of the child node of the node; and dragging the node to be dragged to the position below a certain node in the rendering window, and then inserting the node to be dragged behind the node.

In order to realize the mouse single-double-click function of the tree-shaped component, in the embodiment of the application, mouse events MouseEvent can be monitored based on the QT, including click events Clicked and double-click events. When a user carries out single-click operation, an onClicked signal function in the QT is triggered to execute; when the user performs a double-click operation, the execution of the ondubleclicked signal function in the QT is triggered. The double-click operation of the user generally comprises the operation of renaming rendered nodes in the rendering window.

It is worth noting that the QT development library provides the simplest default rendering strategy, the node rendering display effect may not meet the requirement of a User Interface (UI), in order to achieve the rendering display effect of a User-defined tree component of a UI developer, the embodiment of the application can provide a User-defined rendering Interface, and the UI developer can write a User-defined rendering component and a User-defined signal receiver in a corresponding position through the Interface, so that the rendering display effect of a target node in a User-defined rendering window is achieved.

In order to further optimize the performance of the embodiment of the application, when the data of the rendered single node in the rendering window is refreshed, only the rendered node in the rendering window can be updated, and the whole tree component list is not refreshed. And the position of the node in the rendering window is changed or the node is unfolded and folded to refresh only the node needing to be changed, and the whole tree component list is not refreshed. When the width or height of the rendering view changes, function debounce (debounce) may be called to avoid unnecessary refreshes.

In the technical scheme of the embodiment of the application, when the tree-shaped component structure is rendered in a Flickable window based on QT, on one hand, only part of nodes matched with the height of the visible area of the tree-shaped component are rendered and displayed, and the rendering efficiency is improved; on the other hand, the indexes of the created node objects are stored in the actual rendering node list, and under the scene that the Flickable window page slides or other scenes for refreshing the Flickable window page, the content of the nodes in the created node objects can be directly updated to complete page refreshing rendering, so that the memory is saved, the performance is optimized, and in the process of unloading the tree-shaped component, the component unloading can be carried out by destroying the actual rendering node list; on the other hand, when the node object corresponding to the target node is created, a preset number of preloaded nodes are created, and therefore the situation that the page slides too fast and the nodes are not rendered in time to cause blank is prevented.

The following describes embodiments of an apparatus of the present application, which can be used to perform a method for verifying video editing effects in the above embodiments of the present application. For details not disclosed in the embodiments of the apparatus of the present application, please refer to the embodiments of the tree component rendering method described above in the present application.

Fig. 20 is a block diagram of a tree component rendering apparatus according to an embodiment of the present application, which may be disposed in an electronic device having a computation processing function, such as a server or a terminal device. As shown in fig. 20, the device 2000 includes a lower portion.

A list obtaining unit 2010, configured to obtain a tree component list to be rendered, where the tree component list includes index values corresponding to nodes in the tree component and a hierarchical relationship between the nodes;

a target node determination unit 2020, configured to obtain, from the tree component list, at least one target node whose rendering height matches the height of the tree component visible area based on the height of the tree component visible area and an index value corresponding to each node in the tree component list;

a display position determining unit 2030, configured to determine a 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;

the rendering unit 2040 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.

In some embodiments of the present application, based on the foregoing scheme, the list obtaining unit is configured to: acquiring a tree component structure with a hierarchical relationship; traversing sequentially from a root node of the tree-shaped component structure to generate a state tree containing node state information, wherein the node state information comprises node depth and a father node identifier; and carrying out tiling processing on the state tree to obtain a tree component list.

the sliding event monitoring unit is used for monitoring a sliding event triggered in the rendering window to obtain a sliding distance;

and the first node updating unit is used for updating the nodes which are rendered and displayed in the visible area of the tree component based on the height and the sliding distance of the visible area of the tree component and the index value of each node in the tree component list.

determining a starting index value of a target node in a tree component list based on a first index value of a first rendered node in a rendering window, rendering heights of all nodes in the tree component list and a sliding distance before a sliding event is monitored;

determining a minimum termination index value of a target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node behind the initial index value in the tree component list; and the sum of the rendering heights of all nodes in the target nodes is greater than or equal to the height of the visual area of the tree component.

In some embodiments of the present application, based on the foregoing solution, the rendering unit is configured to: acquiring a created node object in a rendering window; replacing the node content corresponding to the created node object with the node content of the target node matched with the display position of the created node object by the reference of the created node object; if the number of the created node objects is smaller than the number of the nodes of the target node, determining the nodes which are not matched with the created node objects from the target node; creating a new node object in the rendering window according to the node content and the display position of the node which is not matched with the created node object; the reference of the new node object is stored in the actual rendering node list.

the pre-loading node determining unit is used for intercepting a preset number of nodes behind the target node from the tree component list according to the index value of the target node to serve as pre-loading nodes;

the preloading node display position determining unit is used for determining the display position of the preloading node based on the node hierarchical relation and the rendering height of the preloading node;

and the preloading node object creating unit is used for creating the preloading node object according to the display position and the node content of the preloading node.

the drag event monitoring unit is used for monitoring drag events in the rendering window;

the second node updating unit is used for inserting the first node into the tail of the last child node of the root node in the tree component list and updating the index value of each node in the tree component list if the dragging event is that the first node is dragged to a hollow white area in the rendering window; and if the dragging event is that the first node is dragged to the operation area associated with the second node in the rendering window, inserting the first node into the position corresponding to the operation area associated with the second node in the tree component list, and updating the index value of each node in the tree component list.

In some embodiments of the present application, based on the foregoing scheme, the index values of the nodes in the tree component list are sequentially arranged from small to large; the device still includes:

the retrieval event monitoring unit is used for monitoring the retrieval event in the rendering window and acquiring the retrieval condition in the retrieval event;

the target node determination unit is configured to: determining a first node meeting the retrieval condition in the tree component list; acquiring at least one ancestor node of a first node meeting the retrieval condition, and determining a first target node from the at least one ancestor node; the index value of the first target node is the initial index value of the target node in the tree component list; determining a minimum termination index value of a target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node positioned behind the initial index value in the tree component list; the sum of the rendering heights of all nodes in the target node is greater than or equal to the height of the visible area of the tree component; and acquiring the target node according to the initial index value and the minimum termination index value.

FIG. 21 illustrates a schematic structural diagram of a computer system suitable for use in implementing the electronic device of an embodiment of the present application.

It should be noted that the computer system 2100 of the electronic device shown in fig. 21 is only an example, and should not bring any limitation to the functions and the scope of the application of the embodiments.

As shown in fig. 21, the computer system 2100 includes a Central Processing Unit (CPU) 2101, which can perform various appropriate actions and processes, such as performing the methods described in the above embodiments, according to a program stored in a Read-Only Memory (ROM) 2102 or a program loaded from a storage portion 2108 into a Random Access Memory (RAM) 2103. In the RAM 2103, various programs and data necessary for system operation are also stored. The CPU 2101, ROM 2102 and RAM 2103 are connected to each other via a bus 2104. An Input/Output (I/O) interface 2105 is also connected to the bus 2104.

The following components are connected to the I/O interface 2105: an input portion 2106 including a keyboard, a mouse, and the like; an output section 2107 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, a speaker, and the like; a storage portion 2108 including a hard disk and the like; and a communication section 2109 including a Network interface card such as a LAN (Local Area Network) card, a modem, or the like. The communication section 2109 performs communication processing via a network such as the internet. The driver 2110 is also connected to the I/O interface 2105 as necessary. A removable medium 2111 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 2110 as necessary, so that a computer program read out therefrom is mounted in the storage portion 2108 as necessary.

In particular, according to embodiments of the application, the processes described above with reference to the flow diagrams may be implemented as computer software programs. For example, embodiments of the present application include a computer program product comprising a computer program embodied on a computer-readable medium, the computer program comprising program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program can be downloaded and installed from a network through the communication section 2109, and/or installed from the removable medium 2111. When the computer program is executed by a Central Processing Unit (CPU) 2101, various functions defined in the system of the present application are executed.

It should be noted that the computer readable medium shown in the embodiments of the present application may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a Read-Only Memory (ROM), an Erasable Programmable Read-Only Memory (EPROM), a flash Memory, an optical fiber, a portable Compact Disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. Each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems that perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units described in the embodiments of the present application may be implemented by software or hardware, and the described units may also be disposed in a processor. Wherein the names of the elements do not in some way constitute a limitation on the elements themselves.

As another aspect, the present application also provides a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and executes the computer instructions, so that the computer device executes the tree component rendering method described in the above embodiment.

As another aspect, the present application also provides a computer-readable medium, which may be contained in the electronic device described in the above embodiments; or may exist separately without being assembled into the electronic device. The computer readable medium carries one or more programs which, when executed by an electronic device, cause the electronic device to implement the tree component rendering method described in the above embodiments.

It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit, according to embodiments of the application. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.

Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiments of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the embodiments of the present application.

Other embodiments of the present application will be apparent to those skilled in the art from consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of the invention following, in general, the principles of the application and including such departures from the present disclosure as come within known or customary practice within the art to which the invention pertains.

It will be understood that the present application is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the application is limited only by the appended claims.

Claims

1. A tree component rendering method, the method comprising:

acquiring a tree component list to be rendered, wherein the tree component list comprises index values corresponding to all nodes in a tree component and a hierarchical relation between the nodes;

2. The method of claim 1, wherein the obtaining a list of tree components to be rendered comprises:

acquiring a tree component structure with a hierarchical relationship;

traversing from the root node of the tree-shaped component structure in sequence to generate a state tree containing node state information, wherein the node state information comprises node depth and a father node identifier;

and carrying out tiling processing on the state tree to obtain the tree component list.

3. The method of claim 1, wherein a height of the tree component visible area is less than a sum of rendered heights of all unfolded nodes in the tree component list, the method further comprising:

monitoring a sliding event triggered in the rendering window to obtain a sliding distance;

and updating the nodes which are rendered and displayed in the visible area of the tree-shaped component based on the height of the visible area of the tree-shaped component, the sliding distance and the index value of each node in the tree-shaped component list.

4. The method of claim 3, wherein index values of nodes in the tree component list are arranged in order of small to large;

updating the nodes which are rendered and displayed in 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, wherein the updating comprises the following steps:

5. The method of claim 1, wherein the 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 comprises:

acquiring the created node object in the rendering window;

replacing the node content corresponding to the created node object with the node content of the target node matched with the display position of the created node object by the reference of the created node object;

if the number of the created node objects is smaller than the number of the nodes of the target node, determining the nodes which are not matched with the created node objects from the target node;

creating a new node object in the rendering window according to the node content and the display position of the node which is not matched with the created node object;

storing the reference of the new node object in an actual rendering node list.

6. The method of claim 1, wherein the method further comprises:

intercepting a preset number of nodes behind the target node from the tree component list as preloading nodes according to the index value of the target node;

determining a display position of the preloading node based on the node hierarchical relation and the rendering height of the preloading node;

and creating a preloaded node object according to the display position and the node content of the preloaded node.

7. The method of claim 1, wherein the method further comprises:

monitoring a drag event in the rendering window;

if the drag event is that a first node is dragged to a hollow area in the rendering window, inserting the first node into the tail of the last child node of the root node in the tree component list, and updating the index value of each node in the tree component list;

and if the dragging event is that the first node is dragged to an operation area associated with a second node in the rendering window, inserting the first node into a position corresponding to the operation area associated with the second node in the tree component list, and updating the index value of each node in the tree component list.

8. The method of claim 7, wherein obtaining at least one target node from the tree component list that has a rendering height that matches the height of the tree component visual area based on the height of the tree component visual area and the index value corresponding to each node in the tree component list comprises:

and acquiring at least one target node matched with the height of the visual area of the tree component from the updated tree component list based on the height of the visual area of the tree component and the index value of each node in the updated tree component list.

9. The method according to any one of claims 1 to 8, wherein index values of respective nodes in the tree component list are arranged in descending order; the method further comprises the following steps:

monitoring a retrieval event in the rendering window, and acquiring a retrieval condition in the retrieval event;

the obtaining, from the tree component list, at least one target node whose rendering height matches the height of the tree component visual area based on the height of the tree component visual area and the index value corresponding to each node in the tree component list includes:

determining a first node in the tree component list meeting the retrieval condition;

acquiring at least one ancestor node of the first node meeting the retrieval condition, and determining a first target node from the at least one ancestor node; the index value of the first target node is the initial index value of the target node in the tree component list;

determining a minimum ending index value of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node positioned behind the starting index value in the tree component list; wherein the sum of the rendering heights of each node in the target nodes is greater than or equal to the height of the visible area of the tree component;

and acquiring the target node according to the starting index value and the minimum ending index value.

10. An apparatus for tree component rendering, the apparatus comprising: