Programming block sorting methods, apparatus, devices and storage media

Abstract

A method, apparatus, device, and storage medium for sorting programming blocks belong to the field of game technology. The method includes: displaying an index display area and a programming workspace in the user interface of a visual programming editor; displaying the index information of N top-level blocks contained in a first block group in the index display area according to a first arrangement order; responding to an adjustment operation on the arrangement order of the index information of the N top-level blocks, displaying the index information of the N top-level blocks in the index display area according to a second arrangement order; and displaying the N top-level blocks in the programming workspace according to the second arrangement order. This method, by adjusting the arrangement order of the index information of multiple top-level blocks, thereby adjusting the arrangement order of multiple top-level blocks in the programming workspace, simplifies user operation. Furthermore, since the arrangement order of the top-level blocks is not directly adjusted in the programming workspace, the integrity and stability of the programming content are ensured.

Description

Technical Field

[0001] This application relates to the field of game technology, and in particular to a method, apparatus, device and storage medium for sorting programmable building blocks. Background Technology

[0002] Visual programming is a programming method based on a graphical interface. This method encapsulates the programming language in graphical blocks, and programming can be completed by dragging and dropping blocks to build the code.

[0003] In related technologies, when a user wants to adjust the arrangement order of multiple blocks, such as adjusting the arrangement order of multiple top-level blocks (where a top-level block refers to the starting block corresponding to a code block in a visual programming project), one method is to directly drag and drop the top-level block on the programming workspace to adjust its arrangement order; another method is to delete the top-level block and recreate it in the corresponding position to adjust its arrangement order.

[0004] The method described above, which adjusts the order of multiple top-level blocks by directly dragging their vertical positions in the programming workspace, has limitations when there are many nested child blocks. The large spacing between these top-level blocks makes dragging too far difficult, causing operational challenges. Furthermore, the limited display area restricts their movement, further complicating the process of reordering them. The method of deleting and recreating top-level blocks also presents a complexity issue. Summary of the Invention

[0005] This application provides a method, apparatus, device, and storage medium for sorting programmable building blocks. The technical solution provided by this application is as follows:

[0006] According to one aspect of the embodiments of this application, a method for sorting programming building blocks is provided, the method comprising:

[0007] The user interface of the visual programming editor displays an index display area and a programming workspace. The visual programming editor is used to develop visual programming projects. The index display area is used to display the index information of at least one block group contained in the visual programming project. The programming workspace is used to display at least one block contained in the block group.

[0008] When the first block group in the at least one block group is selected, the index information of the N top-level blocks contained in the first block group is displayed in the index display area in a first sorting order, where N is an integer greater than 1.

[0009] In response to the operation of adjusting the arrangement order of the index information of the N top-level blocks, the index information of the N top-level blocks is displayed in the index display area according to a second arrangement order, wherein the second arrangement order is different from the first arrangement order;

[0010] The N top-level blocks are displayed in the programming workspace according to the second arrangement order.

[0011] According to one aspect of the embodiments of this application, a programmable building block sorting device is provided, the device comprising:

[0012] The first display module is used to display an index display area and a programming workspace in the user interface of the visual programming editor. The visual programming editor is used to develop visual programming projects. The index display area is used to display the index information of at least one block group contained in the visual programming project. The programming workspace is used to display at least one block contained in the block group.

[0013] The second display module is used to display the index information of the N top-level blocks contained in the first block group in the index display area in a first arrangement order when the first block group in the at least one block group is selected, where N is an integer greater than 1.

[0014] The third display module, in response to an operation to adjust the arrangement order of the index information of the N top-level blocks, displays the index information of the N top-level blocks in the index display area according to a second arrangement order, wherein the second arrangement order is different from the first arrangement order;

[0015] The fourth display module displays the N top-level blocks in the programming workspace according to the second arrangement order.

[0016] According to one aspect of the embodiments of this application, a terminal device is provided, the terminal device including a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement the above-described programming block sorting method.

[0017] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, wherein a computer program is stored in the storage medium, the computer program being loaded and executed by a processor to implement the above-described programming block sorting method.

[0018] According to one aspect of the embodiments of this application, a computer program product is provided, the computer program product including a computer program, the computer program being loaded and executed by a processor to implement the above-described programming block sorting method.

[0019] The technical solutions provided in this application have at least the following beneficial effects:

[0020] Users can flexibly adjust the order of the index information of multiple top-level blocks in the index display area according to their sorting needs, thereby obtaining the adjusted order that meets their expectations. Furthermore, the system can display these top-level blocks in the programming workspace in the same order. This method of adjusting the order of the index information of multiple top-level blocks in the index display area, and thus adjusting the order of the top-level blocks in the programming workspace, simplifies user operations. On the other hand, by avoiding direct adjustment of the order of the top-level blocks in the programming workspace, it ensures the integrity and stability of the programming content. Attached Figure Description

[0021] Figure 1 This is a schematic diagram of the implementation environment of a solution provided in one embodiment of this application;

[0022] Figure 2 This is a flowchart of a programming block sorting method provided in one embodiment of this application;

[0023] Figure 3 This is a schematic diagram of the user interface of a visual programming editor provided in one embodiment of this application;

[0024] Figure 4 This is a schematic diagram of the user interface of a visual programming editor provided in another embodiment of this application;

[0025] Figure 5 This is a schematic diagram of the user interface of a visual programming editor provided in another embodiment of this application;

[0026] Figure 6 This is a schematic diagram of an index display area provided in one embodiment of this application;

[0027] Figure 7 This is a schematic diagram of an index display area provided in another embodiment of this application;

[0028] Figure 8 This is a schematic diagram of the rendering process of the index display area panel provided in one embodiment of this application;

[0029] Figure 9 This is a schematic diagram illustrating the process of updating the Triggers array according to an embodiment of this application;

[0030] Figure 10 This is a flowchart of a programming block sorting method provided in another embodiment of this application;

[0031] Figure 11 This is a block diagram of a programming block sorting device provided in one embodiment of this application;

[0032] Figure 12 This is a structural block diagram of a terminal device provided in one embodiment of this application. Detailed Implementation

[0033] Before introducing and explaining the technical solution of this application, some concepts involved in this application will be defined and explained.

[0034] Please refer to Figure 1 This diagram illustrates an implementation environment provided by one embodiment of the present application. This implementation environment can be implemented as an application system. The implementation environment may include: a terminal device 10 and a server 20.

[0035] Terminal device 10 includes, but is not limited to, mobile phones, tablets, smart voice interaction devices, game consoles, wearable devices, multimedia playback devices, PCs (Personal Computers), in-vehicle terminals, smart home appliances, AR (Augmented Reality) devices, VR (Virtual Reality) devices, and other electronic devices. Terminal device 10 can run a client of a target application (such as a visual programming application). Optionally, the target application can be an application that needs to be downloaded and installed, or it can be a webpage or a mini-program; this application embodiment does not limit this.

[0036] In this application embodiment, the target application can be a visual programming application, a game application, or other applications with visual programming capabilities; this application embodiment does not limit this. It is understood that game applications have visual programming capabilities. For example, users can use this visual programming function to create UGC (User Generated Content).

[0037] Optionally, the target application is a puzzle game application that provides users with a visual programming editor to customize levels. Puzzle games are a type of game where the main objective is to complete a series of challenging levels. Users must face various obstacles, enemies, or puzzles to complete each level and ultimately achieve victory. Introducing a visual programming editor into the puzzle game application allows users without programming experience to easily design more complex custom levels. When designing a custom level using the visual programming editor, during the process of building programming blocks, if the user wants to adjust the arrangement order of multiple blocks, such as the arrangement order of multiple top-level blocks, the technical solution of this application can help users quickly and easily adjust the arrangement order of multiple top-level blocks in the programming workspace. This allows users to clearly view the programming logic of multiple top-level blocks according to the expected order, thereby improving the efficiency of creating custom levels.

[0038] Server 20 is used to provide backend services for the client of the target application in terminal device 10. For example, server 20 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides 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 (Content Delivery Network), and big data and artificial intelligence platforms, but it is not limited to these.

[0039] Terminal device 10 and server 20 can communicate with each other via a network. This network can be a wired network or a wireless network.

[0040] Please refer to Figure 2 The diagram illustrates a flowchart of a programming block sorting method provided in one embodiment of this application. The execution entity for each step of this method can be... Figure 1 In the implementation environment shown, the terminal device 10 can be a client of the target application, where the execution entity for each step can be a client of the target application. The method may include at least one of the following steps (210-240):

[0041] Step 210: In the user interface of the visual programming editor, the index display area and the programming workspace are displayed. The visual programming editor is used to develop visual programming projects. The index display area is used to display the index information of at least one block group contained in the visual programming project. The programming workspace is used to display at least one block contained in the block group.

[0042] Visual programming is a programming method based on a graphical user interface (GUI). This method encapsulates programming languages ​​within graphical blocks, allowing users to complete programming by dragging and dropping blocks. In a visual programming editor, the programming workspace is the area where the creator, or user, performs programming operations. Users can create, edit, and organize blocks within the programming workspace to build visual programming projects (also referred to as programs in this application).

[0043] In some implementations, the index display area is used to display the index information of at least one block group contained in the visual programming project, as well as the index information of at least one top-level block contained in the block group. A block is a basic unit that constitutes a program, used for specific programming commands or operations, such as variable assignment, loop control, and function calls. Users can drag and drop, assemble, and combine blocks like building blocks to achieve the goal of writing a complete program. In some embodiments, a block may include a top-level block and child blocks. The top-level block refers to the starting block corresponding to the code block contained in the visual programming project, that is, the top-level block serves as the entry point of the code block. Child blocks are blocks created under the top-level block and used to implement the specific logic of the code block. This specific logic may include conditional statements, loop bodies, and function implementations. By combining top-level blocks and child blocks, users can flexibly construct complex program structures.

[0044] In some embodiments, a block group can be understood as a code block group, also called a trigger group, which refers to a collection of multiple code blocks. It is understood that a program includes multiple code blocks, and these code blocks can be divided into at least one code block group. A code block can be implemented by a top-level block and at least one child block nested under that top-level block. In some embodiments, there is a close business relationship between at least one code block contained in a code block group. A business relationship refers to the logical association between different code blocks in a program.

[0045] For example, such as Figure 3 As shown, it illustrates a schematic diagram of the user interface 30 of a visual programming editor provided in one embodiment of this application. A code block can be implemented by a top-level block 31 and sub-blocks 32, 33 and 34 nested under the top-level block 31.

[0046] Optionally, the building blocks may include at least one of the following types: event type, control type, action type, appearance type, sound type, detection type, operation type, pen type, variable type, user-defined function type, music type, etc., and may also include other types, which are not limited in this embodiment. Event type blocks are used to trigger specified events and are the starting point for the execution of a code block. For example, the specified event may be an event execution event, a screen switching event, a click event, etc. Control type blocks are used to manage the execution flow of the program, such as loops, conditional judgments, etc. Action type blocks are used to control the movement and positioning of virtual characters, for example, controlling virtual character 1 to rotate 15 degrees, or controlling virtual character 2 to move to the position of the mouse pointer, etc. Appearance type blocks are used to change the appearance of virtual characters or the background, for example, changing the shape of the virtual character, or changing the color of the background, etc. Sound type blocks are used to play sounds or adjust the volume. Detection type blocks are used to detect user input and changes in the environment, for example, detecting whether the user has pressed a specified key, detecting whether the timer has reached zero, detecting whether the cursor is in a specified area, etc. Operation type blocks are used to perform mathematical and logical operations. Brush-type blocks are used for drawing or changing brush properties, such as lifting the brush, putting the brush down, setting the brush color, and changing the brush size. Variable-type blocks are used for creating, setting, and getting variable values. Function-type blocks are used for defining and calling custom functions. Music-type blocks are used for playing instruments and controlling music playback. For example, the event-type blocks mentioned above can serve as the trigger block, and control-type, action-type, appearance-type, sound-type, detection-type, operation-type, brush-type, variable-type, and music-type blocks can serve as child blocks.

[0047] In some embodiments, the N top-level blocks include trigger blocks and function definition blocks. Trigger blocks refer to the top-level blocks pre-defined by the visual programming editor, and function definition blocks refer to the top-level blocks corresponding to user-created custom functions.

[0048] For example, a trigger block can be a top-level block of the event type mentioned above. A user-defined function, broadly speaking, refers to a reusable piece of code logic defined by the user, used to encapsulate a series of operations or functions. In visual programming, a user-defined function refers to a reusable block defined by the user. That is, users can use user-defined functions to transform them into top-level blocks that meet their expectations, so that they can be repeatedly called in the visual programming environment. A user-defined function includes its name, parameter definitions, and function body. The function name is a user-defined identifier used to invoke and call the function in the program; parameters are the input values ​​accepted by the function, passed to the function body when the function is called; the function body defines the function's specific functionality and behavior. For example, users can graphically configure and combine the blocks of the above-mentioned user-defined function type to obtain function definition blocks that meet their expectations.

[0049] In some embodiments, the index display area refers to an area used to display the index information of block groups and the index information of at least one top-level block contained in the block group. The index information of a block group refers to the identification information of the block group, and the index information of a top-level block refers to the identification information of the top-level block. This identification information can be user-defined or automatically generated by the system, and this application does not limit it in this way. It is understood that there is a one-to-one correspondence between the index information of the top-level block in the index display area and the corresponding top-level block in the programming workspace.

[0050] For example, such as Figure 4 The diagram illustrates a user interface 30 of a visual programming editor according to another embodiment of this application. The user interface 30 of this visual programming editor includes an index display area 41 and a programming workspace 42.

[0051] For example, the index information 43 of the top-level block in the index display area corresponds one-to-one with the corresponding top-level block 46 in the programming work area, the index information 44 of the top-level block in the index display area corresponds one-to-one with the corresponding top-level block 47 in the programming work area, and the index information 45 of the top-level block in the index display area corresponds one-to-one with the corresponding top-level block 48 in the programming work area.

[0052] In some embodiments, trigger blocks and function definition blocks have different display styles in the programming workspace. For example, trigger blocks and function definition blocks may differ in visual representation such as icons, identifiers, and colors. This approach, by distinguishing trigger blocks and function definition blocks in the programming workspace, allows users to intuitively and quickly differentiate and locate trigger blocks and function definition blocks, thereby improving the development efficiency of visual programming projects.

[0053] In some embodiments, the index information of trigger blocks and the index information of function definition blocks are displayed with different styles in the index display area. For example, the index information of trigger blocks and function definition blocks may differ in visual representation such as icons, identifiers, and font colors. This method, by displaying the index information of trigger blocks and function definition blocks differently in the index display area, allows users to intuitively and quickly distinguish and find trigger blocks and function definition blocks, thereby speeding up the subsequent operation of adjusting the arrangement order of multiple top-level blocks.

[0054] Step 220: When the first block group in at least one block group is selected, the index information of the N top-level blocks contained in the first block group is displayed in the index display area in the first sorting order, where N is an integer greater than 1.

[0055] The first block group refers to any one of the at least one block group. For example, such as... Figure 4 As shown, the first order of the index information of the N top-level blocks is index information 43, index information 44, and index information 45. It can be understood that the arrangement order of these three top-level blocks in the programming workspace is the first order.

[0056] In some embodiments, the first block group may also include only one top-level block. In this case, since there is only one top-level block, sorting its index information is not involved in the index display area. In some embodiments, when there is no top-level block in the programming workspace, the index display area also does not display any index information for the top-level block.

[0057] Step 230: In response to the operation of adjusting the order of the index information of the N top-level blocks, the index information of the N top-level blocks is displayed in the index display area according to the second order, wherein the second order is different from the first order.

[0058] Optionally, the order of the index information of the N top-level blocks can be adjusted according to the classification of the top-level blocks to obtain a second arrangement order. For example, top-level blocks that are all trigger blocks can be arranged together consecutively; similarly, top-level blocks that are all function definition blocks can be arranged together consecutively.

[0059] Optionally, the order of the index information of the N top-level blocks can be adjusted according to the name of the top-level block to obtain a second arrangement order. For example, top-level blocks with the same name can be arranged consecutively.

[0060] Optionally, the order of the index information of the N top-level blocks can be adjusted according to their functions to obtain a second arrangement order. For example, top-level blocks with the same or similar functions can be arranged consecutively. In a game application, for instance, top-level blocks that control the movement of game characters can be arranged consecutively.

[0061] The above are merely exemplary examples, and the specific implementation of determining the second arrangement order in this application is not limited. Exemplarily, according to... Figure 4 The example shows how the order of the index information for the three top-level blocks can be adjusted. Figure 5 As shown, the second order of the index information of the three top-level blocks is the index information of the top-level block 45, the index information of the top-level block 44, and the index information of the top-level block 43.

[0062] Step 240: Display N top-level blocks in the programming workspace according to the second arrangement order.

[0063] Understandably, the programming workspace displays N top-level blocks and their nested child blocks in a second arrangement order. In some embodiments, the second arrangement order refers to the user's expected block arrangement. By displaying the N top-level blocks in this second arrangement order in the programming workspace, the user can more easily view, modify, and edit these blocks according to their expected arrangement. For example, when top-level blocks with similar functions are arranged together, the user can easily compare the implementation logic of these top-level blocks and their nested child blocks, which helps the user modify and compare code blocks, thereby improving development efficiency and comprehension during the programming process.

[0064] For example, according to the above Figure 4 and Figure 5 In the example, when the second arrangement of the index information of the three top-level blocks is index information 45, index information 44, and index information 43, as shown... Figure 5 As shown, the three top-level blocks are displayed in the programming workspace 42 in this second arrangement order. Specifically, they are top-level block 48, top-level block 47, and top-level block 46.

[0065] The technical solution provided in this application allows users to flexibly adjust the order of index information for multiple top-level blocks in the index display area according to their sorting needs, thereby obtaining the adjusted order that meets their expectations. Furthermore, the system can display the multiple top-level blocks in the programming workspace in the same order as the adjusted order. This method of adjusting the order of index information for multiple top-level blocks in the index display area, thereby adjusting the order of top-level blocks in the programming workspace, simplifies user operations. On the other hand, since the order of top-level blocks is not directly adjusted in the programming workspace, the integrity and stability of the programming content are ensured.

[0066] The following describes two specific implementation methods for obtaining a second sorting order by adjusting the arrangement of the index information of N top-level blocks. Method 1 is item-by-item adjustment, and Method 2 is one-click adjustment. Item-by-item adjustment refers to moving the index information of at least one top-level block to obtain a second sorting order that meets the user's sorting requirements. One-click adjustment refers to the user selecting any preset sorting rule, and then the system quickly adjusting the arrangement of the index information of the N top-level blocks according to the preset sorting rule to obtain a second sorting order that meets the user's sorting requirements.

[0067] Method 1

[0068] For the first top-level block among N top-level blocks, in response to the position adjustment operation of the index information of the first top-level block, the display position of the index information of the first top-level block is adjusted in the index display area based on the position adjustment operation. The index information of the N top-level blocks after the position adjustment is displayed in the second arrangement order.

[0069] The first block refers to any top-level block among the N top-level blocks. Adjusting each block sequentially can be achieved through the following two interactive methods.

[0070] (1) The above position adjustment operation includes a drag operation. In response to the drag operation on the index information of the first top-level block, the display position of the index information of the first top-level block is adjusted in the index display area based on the end position of the drag operation.

[0071] The endpoint of a drag-and-drop operation refers to the position where the user finally releases the mouse (or touchscreen), that is, the final position the top-level block moves to after the user completes the drag operation. Users can flexibly adjust the arrangement order of the top-level blocks through an intuitive drag-and-drop method.

[0072] (2) The above position adjustment operation includes an upward operation or a downward operation; in response to the upward operation of the index information of the first top-level block, the display positions of the index information of the first top-level block and the index information of the second top-level block are swapped in the index display area, wherein the second top-level block is the top-level block above the first top-level block in the first arrangement order; or, in response to the downward operation of the index information of the first top-level block, the display positions of the index information of the first top-level block and the index information of the third top-level block are swapped in the index display area, wherein the third top-level block is the next top-level block after the first top-level block in the first arrangement order.

[0073] Understandably, for the first top-level block in the first sorted order, since it is the starting top-level block of the list, the only operation that can be performed is to move its index downwards. Therefore, in the index display area, the display positions of the index information of the first top-level block and the index information of the next top-level block are swapped. Similarly, for the last top-level block in the first sorted order, since it is the last top-level block of the list, the only operation that can be performed is to move its index upwards. Therefore, in the index display area, the display positions of the index information of the first top-level block and the index information of the previous top-level block are swapped.

[0074] For example, such as Figure 6 sub Figure 2 As shown, the index display area 41 includes an up control 62 and a down control 63. The up control 62 is used to perform an up operation, and the down control 63 is used to perform a down operation. Users can click the up control 62 or the down control 63 with the mouse to move the first top-level block up or down in the list.

[0075] For example, such as Figure 6 sub Figure 2 As shown, assuming the index information of the first top-level block is index information 64, then the index information of the second top-level block is index information 65, and the index information of the third top-level block is index information 66. When an upward movement operation is performed on the index information 64 of the first top-level block, the display positions of the index information 64 and the index information 65 of the second top-level block are swapped in the index display area; when a downward movement operation is performed on the index information 64 of the first top-level block, the display positions of the index information 64 and the index information 66 of the third top-level block are swapped in the index display area.

[0076] For example, such as Figure 6 sub Figure 2 As shown, assuming the index information of the first top-level block is index 65 and the index information of the third top-level block is index 64, and the first top-level block does not include the previous top-level block, then the only operation that can be performed on the index information 65 of the first top-level block is to move it down. Therefore, in the index display area, the display positions of the index information 65 of the first top-level block and the index information 64 of the third top-level block are swapped. Similarly, when the first top-level block does not include the next top-level block, the only operation that can be performed on the index information of the first top-level block is to move it up. Therefore, in the index display area, the display positions of the index information of the first top-level block and the index information of the previous top-level block are swapped.

[0077] In some embodiments, the top-level blocks under each block group can be stored in the form of an array. Therefore, adjusting the order of a certain item in the array can be abstracted as: move up [Triggers[index], Triggers[index-1]] = [Triggers[index-1], Triggers[index]]; move down [Triggers[index], Triggers[index+1]] = [Triggers[index+1], Triggers[index]].

[0078] The above-described method of sorting by item allows users to precisely adjust the order of the top-level blocks according to their sorting needs. Furthermore, the drag-and-drop method allows users to flexibly adjust the order of the top-level blocks through intuitive dragging; and the up and down methods allow users to adjust the order of the top-level blocks more accurately and step-by-step.

[0079] Method 2

[0080] like Figure 6 sub Figure 3 As shown, multiple candidate sorting rules are displayed; in response to the operation of the first sorting rule among the multiple candidate sorting rules, in the index display area, based on the first sorting rule, the display position of the index information of N top-level blocks is adjusted, wherein the index information of the N top-level blocks after the position adjustment is displayed in a second sorting order.

[0081] The first sorting rule refers to any one of the multiple candidate sorting rules.

[0082] In some embodiments, the sorting rules include at least one of the following: sorting by name, sorting by creation time, and sorting by type. Sorting by name refers to sorting N top-level blocks using string comparison based on the names of the top-level blocks. For example, the names of the N top-level blocks can be arranged alphabetically, such as from "A" to "Z". Sorting by creation time refers to sorting the N top-level blocks according to their creation date, with the earliest created block listed last and the most recently created block listed first. For example, a UNIX timestamp (i.e., the number of milliseconds since January 1, 1970) can be used to record the creation time of the top-level blocks. This creation time can be a numeric type, facilitating comparison and calculation of the subsequent N creation times. Sorting by type refers to sorting according to the category of the top-level blocks. For example, they can be sorted by trigger blocks and function definition blocks, where trigger blocks can be sorted consecutively for the same event method.

[0083] In some embodiments, for the sorting method by type, different types can be assigned weights during sorting to ensure that the top-level blocks corresponding to the types that users value more are placed at the top of the sorted list.

[0084] The one-click sorting method described above allows the system to quickly and easily sort blocks according to the user's selected sorting rules, providing a convenient and fast second arrangement that meets the user's expectations. Furthermore, the name-based sorting method helps users quickly find blocks with specific names; the creation-time-based sorting method allows users to view and edit blocks according to the project's development timeline, aiding in understanding the logical construction process at different stages of the project; and the type-based sorting method allows users to quickly locate and select the desired top-level blocks of a specific type, avoiding the need to search and filter through a large number of mixed top-level blocks.

[0085] In some embodiments, such as the sub-6 Figure 1 and Figure 7 As shown, the user interface 30 also displays a switch control 67, which is used to turn on or off the function of adjusting the sorting order of the index information of the top-level blocks displayed in the index display area.

[0086] In some embodiments, such as Figure 7 As shown, when the adjustment function is off, the index display area 41 displays operation controls 71 corresponding to each of the N top-level blocks. These operation controls 71 are used to manage the top-level blocks and adjust their attributes. For example, management operations include copying, sharing, deleting, and editing. For example, adjusting the attributes of the top-level blocks includes adjusting their index information.

[0087] In some embodiments, in response to an operation on the switch control, the adjustment function is switched from a closed state to an open state, and the operation controls corresponding to each of the N top-level blocks are switched to sorting controls, which are used to adjust the order of the index information of the top-level blocks.

[0088] For example, such as Figure 6 sub Figure 1 As shown, the index display area 41 includes a switch control 67 and a sorting control 61. An operation on the switch control can include clicking the switch control to switch it from an off state to an on state. For example, the sorting control 61 is used to implement the aforementioned drag-and-drop operation. Users can click the sorting control 61 to move the order of the top-level blocks in the list.

[0089] The above method allows users to toggle the adjustment of the index order of the top-level blocks displayed in the index display area via a switch control. Users must actively enable the adjustment function before dragging the top-level blocks to rearrange them, avoiding interference with normal user operations such as sliding the panel, effectively preventing accidental operations, and improving user experience and satisfaction.

[0090] The following describes the specific implementation method for displaying N top-level blocks in the programming workspace according to the second arrangement order.

[0091] In some embodiments, N top-level blocks are displayed in a second arrangement order along a first direction in the programming workspace.

[0092] The first direction can be vertical or horizontal; this application does not limit the first direction. By displaying N top-level blocks along the first direction in a second arrangement order, the arrangement of the N top-level blocks in the programming workspace becomes more neat and orderly, reducing visual clutter and allowing users to more clearly view and manage the construction logic of multiple top-level blocks.

[0093] In some embodiments, a top-level block may or may not have nested child blocks; this application does not limit this. For any one of N top-level blocks, if the top-level block has nested child blocks, the top-level block and its nested child blocks are displayed along a first direction in a second arrangement order. It is understood that the system will display each top-level block and its contained child blocks one by one according to the second arrangement order, so that the user can clearly view and manage the structure and relationships of the code blocks.

[0094] In some embodiments, based on the height of each of the N top-level blocks, the first coordinates of the N top-level blocks in the programming workspace are determined, where the first coordinates are coordinates in a first direction; the second coordinates of each of the N top-level blocks in the programming workspace are determined, where the second coordinates are coordinates in a direction perpendicular to the first direction; based on the first and second coordinates of each of the N top-level blocks, the N top-level blocks are displayed in the programming workspace along the first direction in a second arrangement order.

[0095] The height of the top-level block refers to the sum of the heights of the top-level block and the heights of its nested child blocks. In other words, the height of the top-level block includes both its own height and the heights of its nested child blocks.

[0096] In some embodiments, when the first direction is vertical, the first coordinate can be the ordinate of the top-level block in the programming workspace, and the second coordinate can be the abscissa of the top-level block in the programming workspace. In some embodiments, when the first direction is vertical, the second coordinate of each of the N top-level blocks can all be a third value, which is used to determine the abscissa of the top-level block in the programming workspace. That is, the abscissas of the N top-level blocks in the programming workspace are all equal. This application does not limit the value of the third value.

[0097] In some embodiments, the programming workspace can be rectangular, and a Cartesian coordinate system is established at the upper left corner of the rectangle, with the positive direction of the coordinate axes along the side length of the rectangle. In some embodiments, this application does not limit the shape of the rectangular workspace or the method of establishing the reference system.

[0098] In some embodiments, for the first top-level block corresponding to the second arrangement order, the first coordinate of the first top-level block in the programming work area is determined according to the second value. The second value is used to determine the distance between the first top-level block and the edge of the programming work area. This application does not limit the value of the second value.

[0099] In some embodiments, for the first top-level block corresponding to the second arrangement order, the second value is determined as the first coordinate of the first top-level block in the programming workspace.

[0100] In some embodiments, for the i-th top-level block in the second arrangement order, the first coordinate of the i-th top-level block in the programming workspace is determined based on the first coordinate of the (i-1)-th top-level block in the programming workspace and the height of the (i-1)-th top-level block, where i is an integer greater than or equal to 2 and less than or equal to N.

[0101] In some embodiments, for the i-th top-level block in the second arrangement order, the first coordinates of the i-th top-level block in the programming workspace are determined based on the first coordinates of the (i-1)-th top-level block in the programming workspace, the height of the (i-1)-th top-level block, and a first value. The first value is used to determine the interval between two adjacent top-level blocks, where i is an integer greater than or equal to 2 and less than or equal to N. This method, by spacing adjacent top-level blocks by the first value, makes the layout of the programming workspace more uniform and neat, while ensuring that each top-level block and its nested child blocks are clearly visible, thus improving the user's visual comfort.

[0102] In some embodiments, the coordinates corresponding to the upper edge of the top-level block in the first direction can be determined as the first coordinates, the coordinates corresponding to the lower edge of the top-level block in the first direction can be determined as the first coordinates, or the coordinates corresponding to the middle position of the top-level block in the first direction can be determined as the first coordinates. This application does not limit this.

[0103] In some embodiments, the sum of the first coordinates of the (i-1)th top-level block in the programming workspace, the height of the (i-1)th top-level block, and a first value is determined as the first coordinates of the i-th top-level block in the programming workspace.

[0104] Taking the first direction as the vertical direction as an example, the second coordinate can be denoted as x, which can be 0. This determines that N top-level blocks are arranged vertically along the left edge of the programming workspace.

[0105] For example, assuming N is 3, the height of the first top-level block can be denoted as h1, the height of the second top-level block can be denoted as h2, the height of the third top-level block can be denoted as h3, and the second value can be denoted as gap. Then, the first coordinate of the first top-level block can be denoted as y1 = gap, the first coordinate of the second top-level block can be denoted as y2 = y1 + h1, and the first coordinate of the third top-level block can be denoted as y3 = y2 + h2.

[0106] For example, based on the above example, the first value can be denoted as gap1, the second value can be denoted as gap2, then the first coordinate of the first top-level block can be denoted as y1 = gap2, the first coordinate of the second top-level block can be denoted as y2 = y1 + h1 + gap1, and the first coordinate of the third top-level block can be denoted as y3 = y2 + h2 + gap1.

[0107] In some embodiments, such as Figure 4 As shown, the user interface 30 also displays an organization control 49, which is used to control the arrangement order of the N top-level blocks displayed in the programming workspace 42 and whether it is synchronized with the index display area 41.

[0108] In some embodiments, when the index information of the N top-level blocks in the index display area 41 changes to the second sorting order, if the sorting control 49 is selected, the step of displaying the N top-level blocks in the programming workspace according to the second sorting order is executed.

[0109] In some embodiments, when the index information of the N top-level blocks in the index display area 41 changes to the second arrangement order, if the sorting control 49 is in an unselected state, the display content in the programming workspace remains unchanged.

[0110] In some embodiments, when the sorting control 49 is in an unselected state, in response to an operation on the sorting control 49, the sorting control 49 is switched from an unselected state to a selected state, and the step of displaying N top-level blocks in the programming workspace in a second arrangement order is performed.

[0111] Actions to the organization control 49 may include user clicks, checkboxes, voice control, etc., to switch the state of the organization control.

[0112] The above method uses an organization control to manage the arrangement order of the N top-level blocks displayed in the programming workspace and ensure synchronization with the index display area. When the organization control is unselected, this method keeps the content displayed in the programming workspace unchanged, avoiding unnecessary duplicate updates.

[0113] In some embodiments, users can create multiple block groups, and the order in which these blocks are arranged affects the order of code generation and subsequent code execution. For example, for code block groups, users might want to place the later-created block group containing initialization-related content at the top of the sorted list for easier viewing, code generation, or execution before other code block groups. In some embodiments, such as Figure 6 As shown, when multiple block group index information is displayed in the index display area 41, in response to the operation of adjusting the arrangement order of the index information of multiple block groups, the arrangement order of the index information of multiple block groups is adjusted in the index display area.

[0114] Please refer to the specific implementation of the adjustment operations for the top-level block for the above adjustment operations. For example, as shown... Figure 6 sub Figure 1 As shown, the order of trigger groups, trigger group 1, and trigger group 2 can be adjusted. The adjusted order can be trigger group 1, trigger group 2, and trigger group 2.

[0115] In some embodiments, array traversal can be used to implement the steps of displaying N top-level blocks in the programming workspace according to the second arrangement order and adjusting the arrangement order of the index information of multiple block groups. In some embodiments, any block group can be used as an array, and the N top-level blocks contained in the block group can be used as array elements. The position of each top-level block in the programming workspace can be determined by traversing each array element. Specifically, the following steps may be included:

[0116] 1. Index display area panel rendering:

[0117] When project data is initially loaded, the data content is read, and the array elements in `TriggerGroups` (referring to the trigger array, block group) are traversed and rendered sequentially onto the panel for display. The first trigger group is selected by default, and the top-level block data mapped to that trigger group is loaded into the Blockly workspace (i.e., the programming workspace). Then, the `getTopBlocks()` function provided by Blockly is called, returning an array containing all blocks in the programming workspace. Top-level blocks, such as trigger blocks and function definition blocks, can then be filtered out and created as a new array, which is then traversed. For each top-level block, a new object is created, containing two properties: `name` and `id`. `name` is the name of the top-level block obtained by calling `block.toString()`, and `id` is the unique identifier (UUID) of the top-level block obtained directly from the `block` object. Finally, a new array `Triggers` is returned, containing all the newly created objects.

[0118] After obtaining the Triggers array, the data is rendered onto the page using the front-end technology stack. React can be used here, where the Triggers are rendered into a specified DOM structure by returning JSX in the component's render method. React is an open-source JavaScript library used to build user interfaces, especially single-page applications. It allows developers to build complex UIs by combining various reusable components. JSX is a JavaScript syntax extension that allows writing HTML-like (HyperText Markup Language) code in JavaScript. This allows HTML and JavaScript code to be better integrated. In React, JSX is often used to describe how the user interface should appear. The DOM (Document Object Model) is a programming interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. In web pages, it is typically used to represent HTML or XML (Extensible Markup Language) documents.

[0119] The technology stack listed above is merely illustrative, and this application does not impose any restrictions on the implementation of the technology stack.

[0120] In adjustment mode, the `render` method will be retried, and the `react-beautiful-dnd` plugin will render `TriggerGroups` and `Triggers` as draggable panels. The `type` field on the `Droppable` component will be used to distinguish between the drag and placement areas. The entire draggable panel will consist of three parts: `DragDropContext`, `Droppable`, and `Draggable`, as shown below. Figure 8 As shown. Among them, sub Figure 1 To render a structural diagram when dragging and dropping trigger groups, sub-groups... Figure 2 This renders a structural diagram when dragging and dropping top-level blocks. `react-beautiful-dnd` is a React plugin library for creating beautiful and accessible drag-and-drop lists. Its goal is to provide a powerful, natural drag-and-drop experience while maintaining ease of use and accessibility as much as possible.

[0121] 2. Update the top-level block arrangement:

[0122] When a user drags a Draggable component, react-beautiful-dnd automatically handles all events and animations. The application needs to update the order of the Triggers array in the callback function when the drag operation ends.

[0123] like Figure 9 The diagram illustrates a process for updating the Triggers array according to an embodiment of this application. The callback function can retrieve the type, source index, and target index of the currently dragged Draggable in the list before dragging, where the type is used to distinguish whether the drag is of a trigger group or a top-level block. This allows for accurate updating of the order of the Triggers array.

[0124] 3. Rearrange the top-level blocks in the programming workspace:

[0125] When the order of the Trigger array changes and needs to be rearranged, we use the Blockly method to rearrange the top-level blocks in the programming workspace. For example, as... Figure 10 As shown, based on the updated Triggers array, the corresponding top-level block is obtained according to the id attribute of each item. Then, the position of the block is moved using the Block.moveTo(x,y) method, where the parameter x can be fixed to ensure that the blocks are left-aligned when arranged vertically. After moving each top-level block, the height of the top-level block is obtained using Block.getHeightWidth().height, and then this height is added to y. To maintain aesthetics, a gap is added when calculating y to maintain the vertical spacing between the vector top-level blocks so that the next top-level block can be placed directly below the current top-level block without overlapping.

[0126] In summary, the technical solution provided in this application adjusts the arrangement order of multiple top-level blocks in the programming workspace by adjusting the index information of multiple top-level blocks in the index display area. This simplifies user operations. Furthermore, by avoiding direct adjustment of the top-level blocks' order in the programming workspace, the integrity and stability of the programming content are ensured.

[0127] Furthermore, when adjusting the order of index information for multiple top-level blocks in the index display area, users can adjust the order item by item, such as by dragging, moving up, or moving down, to finely adjust the order of the index information. This allows users to precisely adjust the order of top-level blocks according to their sorting needs. Additionally, a one-click sorting method is available. The system can sort the blocks according to the user's selected sorting rules, such as creation time, with a single click. This method provides a convenient and quick way to obtain the desired sorting order.

[0128] Furthermore, in the programming workspace, the system can display multiple top-level blocks in the user-predicted order along a primary direction, such as vertically. A spacing is also set between consecutive top-level blocks, making the arrangement of multiple top-level blocks in the programming workspace more neat and orderly. This allows users to more clearly view and modify the programming logic of the blocks, improving user satisfaction and programming development efficiency.

[0129] The following are embodiments of the apparatus described in this application, which can be used to execute the embodiments of the method described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method described in this application.

[0130] Please refer to Figure 11 This diagram illustrates a block diagram of a programming block sorting apparatus according to an embodiment of this application. The apparatus has the functionality to implement the above-described programming block sorting method example; this functionality can be implemented in hardware or by hardware executing corresponding software. The apparatus can be the terminal device described above, or it can be installed within a terminal device. Figure 11 As shown, the device 1100 may include a first display module 1110, a second display module 1120, a third display module 1130 and a fourth display module 1140.

[0131] The first display module 1110 is used to display an index display area and a programming workspace in the user interface of the visual programming editor. The visual programming editor is used to develop visual programming projects. The index display area is used to display the index information of at least one block group contained in the visual programming project. The programming workspace is used to display at least one block contained in the block group.

[0132] The second display module 1120 is used to display the index information of the N top-level blocks contained in the first block group in the index display area in a first sorting order when the first block group in the at least one block group is selected, where N is an integer greater than 1.

[0133] The third display module 1130 is configured to respond to an adjustment operation of the arrangement order of the index information of the N top-level blocks, and to display the index information of the N top-level blocks in the index display area according to a second arrangement order, wherein the second arrangement order is different from the first arrangement order.

[0134] The fourth display module 1140 is used to display the N top-level blocks in the programming workspace according to the second arrangement order.

[0135] In some embodiments, the third display module 1130 is configured to, in response to a position adjustment operation of the index information of the first top-level block among the N top-level blocks, adjust the display position of the index information of the first top-level block in the index display area based on the position adjustment operation, wherein the index information of the N top-level blocks after the position adjustment is displayed in the second arrangement order.

[0136] In some embodiments, the position adjustment operation includes a drag operation; the third display module 1130 is configured to, in response to a drag operation on the index information of the first top-level block, adjust the display position of the index information of the first top-level block in the index display area based on the endpoint position of the drag operation.

[0137] In some embodiments, the position adjustment operation includes an upward movement operation or a downward movement operation; the third display module 1130 is configured to, in response to an upward movement operation of the index information of the first top-level block, swap the display positions of the index information of the first top-level block and the index information of the second top-level block in the index display area, wherein the second top-level block is the top-level block preceding the first top-level block in the first arrangement order; or, in response to a downward movement operation of the index information of the first top-level block, swap the display positions of the index information of the first top-level block and the index information of the third top-level block in the index display area, wherein the third top-level block is the next top-level block following the first top-level block in the first arrangement order.

[0138] In some embodiments, the third display module 1130 is used to display multiple candidate sorting rules; in response to an operation on the first sorting rule among the multiple candidate sorting rules, in the index display area, based on the first sorting rule, the display position of the index information of the N top-level blocks is adjusted, wherein the index information of the N top-level blocks after the position adjustment is displayed according to the second arrangement order.

[0139] In some embodiments, the user interface further displays an organization control, which controls the arrangement order of the N top-level blocks displayed in the programming workspace and whether it is synchronized with the index display area; the device 1100 further includes: an execution module ( Figure 11 (Not shown in the image).

[0140] The execution module is configured to, when the index information of the N top-level blocks in the index display area changes to the second arrangement order, if the sorting control is selected, execute the step of displaying the N top-level blocks in the programming workspace according to the second arrangement order; or, when the index information of the N top-level blocks in the index display area changes to the second arrangement order, if the sorting control is unselected, keep the display content in the programming workspace unchanged.

[0141] In some embodiments, the execution module is further configured to, in response to an operation on the sorting control, switch the sorting control from the unselected state to the selected state when the sorting control is in the unselected state, and perform the step of displaying the N top-level blocks in the programming workspace according to the second arrangement order.

[0142] In some embodiments, the user interface further displays a switch control, which is used to turn on or off the function of adjusting the arrangement order of the index information of the top-level blocks displayed in the index display area; the device 1100 further includes: a fifth display module ( Figure 11 (Not shown in the image).

[0143] The fifth display module is configured to, when the adjustment function is in the off state, display the operation controls corresponding to each of the N top-level blocks in the index display area. The operation controls are used to manage the top-level blocks and adjust their attributes. In response to the operation of the switch control, the adjustment function is switched from the off state to the on state, and the operation controls corresponding to each of the N top-level blocks are switched to sorting controls. The sorting controls are used to adjust the order of the index information of the top-level blocks.

[0144] In some embodiments, the fourth display module 1140 is used to display the N top-level blocks in the programming workspace along a first direction in the second arrangement order.

[0145] In some embodiments, the fourth display module 1140 is used to display, in the case that any one of the N top-level blocks has nested sub-blocks, the top-level block and the nested sub-blocks in the second arrangement order along a first direction.

[0146] In some embodiments, the fourth display module 1140 is configured to determine, based on the height of each of the N top-level blocks, a first coordinate in the programming workspace, wherein the first coordinate is a coordinate in the first direction; determine, based on the height of each of the N top-level blocks, a second coordinate in the programming workspace, wherein the second coordinate is a coordinate in the direction perpendicular to the first direction; and display, based on the first and second coordinates of each of the N top-level blocks, the N top-level blocks in the programming workspace in the second arrangement order along the first direction.

[0147] In some embodiments, the fourth display module 1140 is used to determine, for the i-th top-level block in the second arrangement order, the first coordinate of the (i-1)-th top-level block in the programming work area based on the first coordinate of the (i-1)-th top-level block in the programming work area, the height of the (i-1)-th top-level block, and a first value, wherein the first value is used to determine the interval between two adjacent top-level blocks, and i is an integer greater than or equal to 2 and less than or equal to N; and for the 1-th top-level block in the second arrangement order, the first coordinate of the 1-th top-level block in the programming work area is determined based on a second value, wherein the second value is used to determine the distance between the 1-th top-level block and the edge of the programming work area.

[0148] In some embodiments, the device 1100 further includes: an adjustment module ( Figure 11 (Not shown in the image).

[0149] An adjustment module is used to adjust the order of index information of multiple block groups in the index display area when multiple block groups are displayed in the index display area, in response to an adjustment operation on the arrangement order of the index information of the multiple block groups.

[0150] In some embodiments, the N top-level blocks include trigger blocks and function definition blocks. The trigger blocks refer to the top-level blocks pre-defined by the visual programming editor, and the function definition blocks refer to the top-level blocks corresponding to user-created custom functions. The trigger blocks and the function definition blocks have different display styles in the programming workspace.

[0151] The technical solution provided in this application allows users to flexibly adjust the order of index information for multiple top-level blocks in the index display area according to their sorting needs, thereby obtaining the adjusted order that meets their expectations. Furthermore, the system can display the multiple top-level blocks in the programming workspace in the same order as the adjusted order. This method of adjusting the order of index information for multiple top-level blocks in the index display area, thereby adjusting the order of top-level blocks in the programming workspace, simplifies user operations. On the other hand, since the order of top-level blocks is not directly adjusted in the programming workspace, the integrity and stability of the programming content are ensured.

[0152] Please refer to Figure 12 This diagram illustrates a structural block diagram of a terminal device 1200 provided in one embodiment of this application. The terminal device 1200 may be... Figure 1 The terminal device 10 in the implementation environment shown is used to implement the programming block sorting method provided in the above embodiments. Specifically:

[0153] Typically, terminal device 1200 includes a processor 1210 and a memory 1220.

[0154] Processor 1210 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1210 may be implemented using at least one hardware form selected from Digital Signal Processing (DSP), Field Programmable Gate Array (FPGA), and Programmable Logic Array (PLA). Processor 1210 may also include a main processor and a coprocessor. The main processor, also known as the Central Processing Unit (CPU), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1210 may integrate a Graphics Processing Unit (GPU), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1210 may also include an AI processor for handling computational operations related to machine learning.

[0155] The memory 1220 may include one or more computer-readable storage media, which may be non-transitory. The memory 1220 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1220 are used to store a computer program configured to be executed by one or more processors to implement the described programmable block sorting method.

[0156] In some embodiments, the terminal device 1200 may also optionally include a peripheral device interface 1230 and at least one peripheral device. The processor 1210, memory 1220, and peripheral device interface 1230 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 1230 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of a radio frequency circuit 1240, a display screen 1250, an audio circuit 1260, and a power supply 1270.

[0157] Those skilled in the art will understand that Figure 12 The structure shown does not constitute a limitation on the terminal device 1200, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0158] In some embodiments, a computer-readable storage medium is also provided, wherein a computer program is stored therein, the computer program being loaded and executed by a processor to implement the above-described programming block sorting method.

[0159] Optionally, the computer-readable storage medium may include: ROM (Read-Only Memory), RAM (Random-Access Memory), SSD (Solid State Drives), or optical disc, etc. The random access memory may include ReRAM (Resistance Random Access Memory) and DRAM (Dynamic Random Access Memory).

[0160] In some embodiments, a computer program product is also provided, the computer program product including a computer program stored in a computer-readable storage medium, wherein a processor reads from the computer-readable storage medium and executes the computer program to implement the above-described programming block sorting method.

[0161] It should be understood that "multiple" as used herein 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 are in an "or" relationship. Furthermore, the step numbers described herein are merely illustrative of one possible execution order. In some other embodiments, the steps may not be executed in numerical order, such as two steps with different numbers being executed simultaneously, or two steps with different numbers being executed in the reverse order of the illustration. This application does not limit this.

[0162] The above description is merely an exemplary embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for sorting programming building blocks, characterized in that, The method includes: The user interface of the visual programming editor displays an index display area and a programming workspace. The visual programming editor is used to develop visual programming projects. The index display area is used to display the index information of at least one block group contained in the visual programming project. The programming workspace is used to display at least one block contained in the block group. When the first block group in the at least one block group is selected, the index information of the N top-level blocks contained in the first block group is displayed in the index display area in a first sorting order, where N is an integer greater than 1. Display multiple candidate sorting rules; In response to an operation on the first sorting rule among the multiple candidate sorting rules, in the index display area, based on the first sorting rule, the display position of the index information of the N top-level blocks is adjusted, wherein the index information of the N top-level blocks after the position adjustment is displayed in a second sorting order, which is different from the first sorting order; The N top-level blocks are displayed in the programming workspace according to the second arrangement order.

2. The method according to claim 1, characterized in that, The method further includes: For the first top-level block among the N top-level blocks, in response to the position adjustment operation of the index information of the first top-level block, in the index display area, the display position of the index information of the first top-level block is adjusted based on the position adjustment operation, wherein the index information of the N top-level blocks after the position adjustment is displayed in the second arrangement order.

3. The method according to claim 2, characterized in that, The position adjustment operation includes a drag operation; In response to the position adjustment operation of the index information of the first top-level block, the display position of the index information of the first top-level block in the index display area is adjusted based on the position adjustment operation, including: In response to a drag operation on the index information of the first top-level block, the display position of the index information of the first top-level block is adjusted in the index display area based on the endpoint position of the drag operation.

4. The method according to claim 2, characterized in that, The position adjustment operation includes moving up or moving down; In response to the position adjustment operation of the index information of the first top-level block, the display position of the index information of the first top-level block in the index display area is adjusted based on the position adjustment operation, including: In response to the up-shifting operation of the index information of the first top-level block, the display positions of the index information of the first top-level block and the index information of the second top-level block are swapped in the index display area, wherein the second top-level block is the top-level block above the first top-level block in the first arrangement order. or, In response to the downward shift operation of the index information of the first top-level block, the display positions of the index information of the first top-level block and the index information of the third top-level block are swapped in the index display area, wherein the third top-level block is the next top-level block after the first top-level block in the first arrangement order.

5. The method according to claim 1, characterized in that, The user interface also displays an organization control, which is used to control the arrangement order of the N top-level blocks displayed in the programming workspace and whether it is synchronized with the index display area; The method further includes: When the index information of the N top-level blocks in the index display area changes to the second arrangement order, if the sorting control is selected, the step of displaying the N top-level blocks in the programming workspace according to the second arrangement order is executed. or, When the index information of the N top-level blocks in the index display area changes to the second arrangement order, if the sorting control is in an unselected state, the display content in the programming workspace remains unchanged.

6. The method according to claim 5, characterized in that, The method further includes: When the sorting control is in the unselected state, in response to an operation on the sorting control, the sorting control is switched from the unselected state to the selected state, and the step of displaying the N top-level blocks in the programming workspace according to the second arrangement order is performed.

7. The method according to claim 1, characterized in that, The user interface also displays a switch control, which is used to turn on or off the function of adjusting the arrangement order of the index information of the top-level blocks displayed in the index display area; The method further includes: When the adjustment function is turned off, the index display area displays the operation controls corresponding to each of the N top-level blocks. The operation controls are used to manage the top-level blocks and to adjust their attributes. In response to the operation of the switch control, the adjustment function is switched from the off state to the on state, and the operation control corresponding to each of the N top-level blocks is switched to a sorting control, which is used to adjust the arrangement order of the index information of the top-level blocks.

8. The method according to claim 1, characterized in that, The step of displaying the N top-level blocks in the programming workspace according to the second arrangement order includes: In the programming workspace, the N top-level blocks are displayed along the first direction in the second arrangement order.

9. The method according to claim 8, characterized in that, The method further includes: For any one of the N top-level blocks, if the top-level block has nested child blocks, the top-level block and the child blocks nested with the top-level block are displayed in the second arrangement order along the first direction.

10. The method according to claim 8, characterized in that, The process of displaying the N top-level blocks in the programming workspace along a first direction and in the second arrangement order includes: Based on the height of each of the N top-level blocks, determine the first coordinates of each of the N top-level blocks in the programming work area, where the first coordinates are coordinates in the first direction; Determine the second coordinates of each of the N top-level blocks in the programming workspace, where the second coordinates are the coordinates in the direction perpendicular to the first direction; Based on the first and second coordinates of each of the N top-level blocks, the N top-level blocks are displayed in the programming workspace along the first direction in the second arrangement order.

11. The method according to claim 10, characterized in that, The step of determining the first coordinates of the N top-level blocks in the programming workspace based on their respective heights includes: For the i-th top-level block in the second arrangement order, the first coordinate of the i-th top-level block in the programming work area is determined according to the first coordinate of the (i-1)-th top-level block in the programming work area, the height of the (i-1)-th top-level block, and the first value. The first value is used to determine the interval between two adjacent top-level blocks, and i is an integer greater than or equal to 2 and less than or equal to N. For the first top-level block in the second arrangement order, the first coordinate of the first top-level block in the programming work area is determined according to the second value, and the second value is used to determine the distance between the first top-level block and the edge of the programming work area.

12. The method according to claim 1, characterized in that, The method further includes: When multiple block group index information is displayed in the index display area, in response to the operation of adjusting the arrangement order of the multiple block group index information, the arrangement order of the multiple block group index information is adjusted in the index display area.

13. The method according to any one of claims 1 to 12, characterized in that, The N top-level building blocks include trigger building blocks and function definition building blocks. The trigger building blocks refer to the top-level building blocks preset by the visual programming editor, and the function definition building blocks refer to the top-level building blocks corresponding to user-created custom functions. The trigger building blocks and the function definition building blocks have different display styles in the programming workspace.

14. A programmable building block sorting device, characterized in that, The device includes: The first display module is used to display an index display area and a programming workspace in the user interface of the visual programming editor. The visual programming editor is used to develop visual programming projects. The index display area is used to display the index information of at least one block group contained in the visual programming project. The programming workspace is used to display at least one block contained in the block group. The second display module is used to display the index information of the N top-level blocks contained in the first block group in the index display area in a first arrangement order when the first block group in the at least one block group is selected, where N is an integer greater than 1. The third display module is used to display sorting rules for multiple candidates; The third display module is further configured to respond to an operation on the first sorting rule among the multiple candidate sorting rules, and adjust the display position of the index information of the N top-level blocks in the index display area based on the first sorting rule, wherein the index information of the N top-level blocks after the position adjustment is displayed in a second sorting order, which is different from the first sorting order; The fourth display module is used to display the N top-level blocks in the programming workspace according to the second arrangement order.

15. A terminal device, characterized in that, The terminal device includes a processor and a memory, the memory storing a computer program, which is loaded and executed by the processor to implement the method as described in any one of claims 1 to 13.

16. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, which is loaded and executed by a processor to implement the method as described in any one of claims 1 to 13.

17. A computer program product, characterized in that, The computer program product includes a computer program that is loaded and executed by a processor to implement the method as claimed in any one of claims 1 to 13.

Images