A data processing method based on a programming module group and related devices

Abstract

The application discloses a data processing method based on a programming module group and a related device. The method comprises the following steps: detecting that the display content of a window area in a canvas changes, determining that a top-level module is in a node tree of a scalable vector graphics based on a programming module group at the top layer of the canvas; determining a parent node in the node tree as a target node, and determining a canvas node as a parameter passing parent node; judging whether a programming module corresponding to the target node is in a rendering area in the canvas, if yes, inserting the target node under the parameter passing parent node, updating the parameter passing parent node with the target node, and determining a new relative coordinate of the target node; if not, removing the target node from the node tree; if the target node has a child node set, traversing the child nodes in the child node set to update the target node, and returning to the step of judging whether the programming module corresponding to the target node is in the rendering area in the canvas until the target node has no child node, so that the rearrangement process of the browser does not involve the programming module which is invisible.

Description

Technical Field

[0001] This application relates to the field of data processing, and in particular to a data processing method and related apparatus based on a group of programming modules. Background Technology

[0002] Currently, visual programming tools allow users to drag and drop programming modules onto a canvas to edit programs. Changes in the displayed content of the viewport area on the canvas actually indicate a change in the position of the top-level programming module.

[0003] Based on the fact that the module positions of programming modules in the programming module group change as the module position of the top-level module changes, the displayed content of the viewport area in the canvas changes, triggering the browser's reflow process. This reflow process requires recalculating the module positions of all programming modules in the canvas.

[0004] However, the more programming modules there are in the canvas, the longer the rearrangement process takes, leading to a decrease in the rendering efficiency of the programming modules and causing stuttering. This makes the interaction between the user and the canvas less smooth, thus affecting the program editing experience of the visual programming tool. Summary of the Invention

[0005] To address the aforementioned technical issues, this application provides a data processing method and related apparatus based on a group of programming modules. When the content displayed in the viewport area of ​​the canvas changes, the method reduces the time consumed by the rearrangement process, improves the rendering efficiency of the programming modules to reduce lag, and makes the interaction between the user and the canvas smoother, thereby enhancing the program editing experience of the visual programming tool.

[0006] The embodiments of this application disclose the following technical solutions:

[0007] On one hand, embodiments of this application provide a data processing method based on a group of programming modules, the method comprising:

[0008] If a change in the displayed content of the viewport area in the canvas is detected, it is determined that the programming module group in the canvas is a node tree based on scalable vector graphics, and the top-level module in the programming module group is at the top level of the canvas.

[0009] The target node is determined based on the parent node in the node tree, and the parameter-passing parent node is determined based on the canvas node;

[0010] If the programming module corresponding to the target node is within the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the new relative coordinates of the target node; if the programming module corresponding to the target node is not within the rendering area, remove the target node from the node tree.

[0011] If the target node has a set of child nodes, traverse the child nodes in the set to update the target node, return if the programming module corresponding to the target node is in the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the relative coordinates of the target node, if the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree, until the target node has no child nodes.

[0012] On the other hand, embodiments of this application provide a data processing apparatus based on a programming module group, the apparatus comprising: a determining unit, a processing unit, and an updating unit;

[0013] The determining unit is configured to determine, if a change in the display content of the window area in the canvas is detected, a node tree of the programming module group based on scalable vector graphics in the canvas, wherein the top-level module in the programming module group is at the top level of the canvas;

[0014] The determining unit is further configured to determine the target node based on the parent node in the node tree, and to determine the parameter-passing parent node based on the canvas node;

[0015] The processing unit is configured to: if the programming module corresponding to the target node inserts the target node under the parameter-passing parent node within the rendering area of ​​the canvas, update the parameter-passing parent node according to the target node, and determine the new relative coordinates of the target node; if the programming module corresponding to the target node is not within the rendering area, remove the target node from the node tree.

[0016] The update unit is configured to: if the target node has a set of child nodes, traverse the child nodes in the set of child nodes to update the target node; return if the programming module corresponding to the target node is in the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the relative coordinates of the target node; if the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree, until the target node has no child nodes.

[0017] On the other hand, embodiments of this application provide a computer device, the computer device including a processor and a memory:

[0018] The memory is used to store computer programs and to transfer the computer programs to the processor;

[0019] The processor is configured to execute the method described in any of the foregoing aspects according to instructions in the computer program.

[0020] On the other hand, embodiments of this application provide a computer-readable storage medium for storing a computer program that, when run on a computer device, causes the computer device to perform the methods described in any of the foregoing aspects.

[0021] On the other hand, embodiments of this application provide a computer program product, including a computer program that, when run on a computer device, causes the computer device to perform the method described in any of the foregoing aspects.

[0022] As can be seen from the above technical solution, when a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module is first determined to be a node tree based on scalable vector graphics of the top-level programming module group of the canvas. This converts the programming module group directly belonging to the canvas into a node tree that can be efficiently rendered and flexibly interacted with. Then, the parent node in the node tree is determined as the target node, and the canvas node is determined as the parameter passing parent node. This ensures that when the parameter passing parent node is initially a canvas node, subsequent node processing starts from the parent node in the node tree. The process involves determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas. If so, the programming module object is visible. The target node is first inserted under the parent node, then the parent node is updated with the target node, and the new relative coordinates of the target node are determined. This preserves the visible programming modules corresponding to the target nodes, ensuring the target node is a child of the parent node. The parent node is then recursively updated to accurately calculate the new relative coordinates of the target node during the browser's reflow. If not, the programming module object is invisible. The target node is removed from the node tree, reducing the number of invisible programming modules and preventing the browser from calculating their positions during reflow. If the target node has a set of child nodes, the process iterates through the child nodes in the set to update the target node, returning to the previous step of determining whether the programming module is within the rendering area of ​​the canvas. This process continues until the target node has no child nodes, ensuring that the browser's reflow involves visible programming modules directly belonging to the canvas's programming module group and excludes invisible ones. Based on this, the method reduces the time consumed in the reflow process, improves the rendering efficiency of the programming module to reduce lag, and makes the interaction between the user and the canvas smoother, thereby improving the program editing experience of the visual programming tool. Attached Figure Description

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

[0024] Figure 1 A system schematic diagram of a data processing method based on a programming module group provided in an embodiment of this application;

[0025] Figure 2 A flowchart illustrating a data processing method based on a programming module group, provided in an embodiment of this application;

[0026] Figure 3 A schematic diagram of a top-level block programming block group on the top layer of the canvas and the node tree of the programming block group based on scalable vector graphics, provided for embodiments of this application;

[0027] Figure 4 A schematic diagram of a data processing flow based on a programming module group provided in an embodiment of this application;

[0028] Figure 5 A schematic diagram of a top-level programming block group on the top layer of the canvas and the node tree of the programming block group after data processing based on the programming module group, provided for embodiments of this application;

[0029] Figure 6 A schematic diagram of a viewport area in a canvas and a buffer area extending outward from the edge of the viewport area, provided for an embodiment of this application;

[0030] Figure 7 A structural diagram of a data processing device based on a programming module group provided in an embodiment of this application;

[0031] Figure 8 A structural diagram of a server provided in an embodiment of this application;

[0032] Figure 9 This is a structural diagram of a terminal provided in an embodiment of this application. Detailed Implementation

[0033] The embodiments of this application will now be described with reference to the accompanying drawings.

[0034] Currently, in visual programming tools, users drag and drop programming modules onto the canvas to edit programs. Changes in the position of the top-level programming module alter the content displayed in the viewport. As the positions of programming modules within a module group change with the top-level module, this change in viewport content triggers a browser reflow process. This reflow requires recalculating the positions of all programming modules in the canvas. The more programming modules in the canvas, the longer the reflow process takes, leading to decreased rendering efficiency and stuttering. This results in less smooth interaction between the user and the canvas, negatively impacting the program editing experience of the visual programming tool.

[0035] This application provides a data processing method based on programming module groups. When a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module is first determined to be a node tree based on scalable vector graphics of the top-level programming module group of the canvas. This converts the programming module group directly belonging to the canvas into a node tree that can be efficiently rendered and flexibly interacted with. Then, the parent node in the node tree is determined as the target node, and the canvas node is determined as the parameter passing parent node. This ensures that when the parameter passing parent node is initially a canvas node, subsequent node processing starts from the parent node in the node tree. The process involves determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas. If so, the programming module object is visible. The target node is first inserted under the parent node, then the parent node is updated with the target node, and the new relative coordinates of the target node are determined. This preserves the visible programming modules corresponding to the target nodes, ensuring the target node is a child of the parent node. The parent node is then recursively updated to accurately calculate the new relative coordinates of the target node during the browser's reflow. If not, the programming module object is invisible. The target node is removed from the node tree, reducing the number of invisible programming modules and preventing the browser from calculating their positions during reflow. If the target node has a set of child nodes, the process iterates through the child nodes in the set to update the target node, returning to the previous step of determining whether the programming module is within the rendering area of ​​the canvas. This process continues until the target node has no child nodes, ensuring that the browser's reflow involves visible programming modules directly belonging to the canvas's programming module group and excludes invisible ones. Based on this, the method reduces the time consumed in the reflow process, improves the rendering efficiency of the programming module to reduce lag, and makes the interaction between the user and the canvas smoother, thereby improving the program editing experience of the visual programming tool.

[0036] Next, we will introduce the system architecture of the data processing method based on programming module groups. See [link / reference] Figure 1 ,Should Figure 1 This is a schematic diagram of a data processing method based on a programming module group provided in an embodiment of this application. The system includes a computer device 100, which is used to execute the data processing method based on the programming module group.

[0037] If computer device 100 detects a change in the displayed content of the viewport area in the canvas, it determines that the programming module group in the canvas is a node tree based on scalable vector graphics, with the top-level module in the programming module group at the top level of the canvas. Here, the canvas is the area where objects are dragged and dropped to edit the program; the viewport area in the canvas is the area where objects are visible; a programming module group is a collection of multiple programming modules directly belonging to the canvas and having one or more connection relationships, such as sequential or parent-child connections; a programming module is a module encapsulated with programming code; the node tree based on scalable vector graphics is a collection of nodes in the programming module group that present a tree structure, corresponding to multiple programming modules; and the top-level module in the programming module group is the first non-child programming module in the group.

[0038] Computer device 100 determines the target node based on the parent node in the node tree and determines the parameter passing parent node based on the canvas node. Here, the parent node in the node tree is the root node in the node tree, corresponding to the top-level module in the programming module group; the parameter passing parent node is the parent node that establishes data association with the child node through the parameter passing mechanism.

[0039] As an example, the programming module group is the programming block group, and the top-level module is the top-level block; when the computer device 100 detects that the display content of the window area in the canvas has changed, it first determines the node tree of the top-level programming block group of the top-level block in the canvas based on Scalable Vector Graphics (SVG), then determines the parent node in the node tree as the target node, and determines the canvas node as the parameter passing parent node.

[0040] If the programming module corresponding to the target node is within the rendering area of ​​the canvas, the computer device 100 inserts the target node under the parameter-passing parent node, updates the parameter-passing parent node based on the target node, and determines the new relative coordinates of the target node. If the programming module corresponding to the target node is not within the rendering area, the target node is removed from the node tree. The rendering area of ​​the canvas is the area where objects are visible and interact with; the new relative coordinates of the target node are its relative coordinates under the parameter-passing parent node.

[0041] As an example, based on the above example, the programming module is a programming block; the computer device 100 determines whether the programming block corresponding to the target node is within the rendering area of ​​the canvas. If so, the target node is first inserted under the parameter-passing parent node, then the parameter-passing parent node is updated with the target node, and the new relative coordinates of the target node are determined. If not, the target node is removed from the node tree.

[0042] If the target node has a set of child nodes, the computer device 100 iterates through the child nodes in the set of child nodes to update the target node and returns. If the programming module corresponding to the target node is in the rendering area of ​​the canvas, the target node is inserted under the parameter-passing parent node, the parameter-passing parent node is updated according to the target node, and the relative coordinates of the target node are determined. If the programming module corresponding to the target node is not in the rendering area, the target node is removed from the node tree. This process continues until the target node has no child nodes.

[0043] As an example, based on the above example, when the target node has a set of child nodes, the computer device 100 traverses the child nodes in the set of child nodes to update the target node, and returns to the aforementioned step of determining whether the programming block corresponding to the target node is within the rendering area of ​​the canvas, until the target node has no child nodes.

[0044] In other words, when a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module is first determined to be a node tree based on scalable vector graphics of the top-level programming module group of the canvas. This transforms the programming module group directly belonging to the canvas into a node tree that can be rendered efficiently and interacted with flexibly. Then, the parent node in the node tree is determined as the target node, and the canvas node is determined as the parameter passing parent node. This ensures that when the parameter passing parent node is initially a canvas node, subsequent node processing starts from the parent node in the node tree. The process involves determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas. If so, the programming module object is visible. The target node is first inserted under the parent node, then the parent node is updated with the target node, and the new relative coordinates of the target node are determined. This preserves the visible programming modules corresponding to the target nodes, ensuring the target node is a child of the parent node. The parent node is then recursively updated to accurately calculate the new relative coordinates of the target node during the browser's reflow. If not, the programming module object is invisible. The target node is removed from the node tree, reducing the number of invisible programming modules and preventing the browser from calculating their positions during reflow. If the target node has a set of child nodes, the process iterates through the child nodes in the set to update the target node, returning to the previous step of determining whether the programming module is within the rendering area of ​​the canvas. This process continues until the target node has no child nodes, ensuring that the browser's reflow involves visible programming modules directly belonging to the canvas's programming module group and excludes invisible ones. Based on this, the method reduces the time consumed in the reflow process, improves the rendering efficiency of the programming module to reduce lag, and makes the interaction between the user and the canvas smoother, thereby improving the program editing experience of the visual programming tool.

[0045] It should be noted that, in the embodiments of this application, the computer device can be a server or a terminal. The method provided in the embodiments of this application can be executed by the terminal or the server alone, or it can be executed by the terminal and the server in cooperation. Specifically, when the method provided in the embodiments of this application is executed by the terminal or the server alone, its execution method is similar to... Figure 1 The corresponding embodiments are similar, mainly replacing the computer device with a terminal or server. Furthermore, when the method provided in this application is executed by a terminal and a server, steps that need to be displayed on the front-end interface can be executed by the terminal, while steps that require background calculations and do not need to be displayed on the front-end interface can be executed by the server.

[0046] The terminal can be a smartphone, tablet, laptop, desktop computer, intelligent voice interaction device, vehicle terminal, extended reality device, or aircraft, but is not limited to these. The server can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing cloud computing services, but is not limited to these. The terminal and server can be connected directly or indirectly through wired or wireless communication, and this application does not impose any restrictions. For example, the terminal and server can be connected through a network, which can be wired or wireless.

[0047] Next, taking the method provided in the embodiments of this application as an example, and in conjunction with the accompanying drawings, we will give a detailed description of the data processing method based on programming module groups provided in the embodiments of this application.

[0048] See Figure 2 ,Should Figure 2 The flowchart of a data processing method based on a programming module group provided in this application embodiment includes the following steps S201-S204.

[0049] S201: A change in the displayed content of the window area in the canvas was detected. It was determined that the programming module group in the canvas is a node tree based on scalable vector graphics, and the top-level module in the programming module group is at the top level of the canvas.

[0050] In related technologies, changes in the position of the top-level programming module on the canvas alter the displayed content of the viewport area. Since the positions of other programming modules within a group change along with the top-level module, this change in viewport content triggers a browser reflow process. This reflow requires recalculating the positions of all programming modules on the canvas. The more programming modules on the canvas, the longer the reflow process takes, leading to decreased rendering efficiency and stuttering. This results in less smooth interaction between the user and the canvas, negatively impacting the user experience of visual programming tools.

[0051] In this embodiment, to address the aforementioned issues, considering that changes in the displayed content of the viewport area in the canvas actually indicate a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, it is first necessary to determine the programming module group directly belonging to the canvas, i.e., the top-level module in the top-level programming module group of the canvas. Furthermore, considering that the programming module group based on a scalable vector graphics node tree can achieve efficient rendering and flexible interaction, it is necessary to determine the programming module group based on a scalable vector graphics node tree. Therefore, when a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module in the top-level programming module group of the canvas based on a scalable vector graphics node tree is first determined.

[0052] Here, the canvas is the area where objects are dragged and dropped to edit programming modules; the viewport area in the canvas is the area where objects are visible in the canvas; a programming module group is a collection of multiple programming modules that are directly subordinate to the canvas and have one or more connection relationships, such as sequential connection or parent-child connection; a programming module is a module encapsulated with programming code; a node tree based on scalable vector graphics is a collection of nodes in a tree structure corresponding to multiple programming modules in a programming module group; and the top-level module in a programming module group is the first non-sub-programming module in the programming module group.

[0053] In step S201, when a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module is determined to be a node tree based on scalable vector graphics. This transforms the programming module group directly belonging to the canvas into a node tree that can be rendered efficiently and interacted with flexibly. This allows for subsequent sequential determination of whether the programming module corresponding to each node in the node tree is within the rendering area of ​​the canvas, i.e., whether the programming module corresponding to each node is visible to the object. This ensures that the browser's reflow process accurately and without omission involves each programming module in the programming module group.

[0054] As an example of S201, the programming module group is a programming block group, and the top-level module is a top-level block; when the computer device detects a change in the display content of the window area in the canvas, it determines that the top-level block is the top-level programming block group in the canvas based on the node tree of scalable vector graphics.

[0055] Based on the above example, see Figure 3 ,Should Figure 3This document provides a schematic diagram of a top-level programming block group on the top layer of a canvas and a node tree of the programming block group based on scalable vector graphics, as provided in an embodiment of this application. The programming block group includes programming block A, programming block B, and programming block C. Programming block A is connected sequentially to programming block B, and programming block B is connected sequentially to programming block C. Programming block A is the top-level block in this programming block group. In the node tree of the programming block group based on scalable vector graphics, the parent node is programming block A, the child nodes of programming block A are programming block B, and the child nodes of programming block B are programming block C. The relative coordinates of programming block A are (40, 10), the relative coordinates of programming block B are (0, 20), and the relative coordinates of programming block C are (0, 20).

[0056] S202: Determine the target node based on the parent node in the node tree, and determine the parent node for parameter passing based on the canvas node.

[0057] In this embodiment, when S201 is executed and a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, after determining that the top-level module is in the node tree of the top-level programming module group based on scalable vector graphics, considering the need to sequentially determine whether the programming module corresponding to each node in the node tree is within the rendering area of ​​the canvas, that is, to determine whether the programming module corresponding to each node is visible to the object, in order to determine whether the browser's reflow process involves each programming module in the programming module group, it is necessary to first process subsequent nodes starting from the parent node in the node tree, and in this determination process, the parameter-passing parent node is initially the canvas node directly subordinate to the parent node in the node tree. Therefore, the parent node in the node tree is determined as the target node, and the canvas node is determined as the parameter-passing parent node.

[0058] In this context, the parent node in the node tree is the root node, corresponding to the top-level module in the programming module group; the parameter-passing parent node is the parent node that establishes data association with the child node through the parameter passing mechanism.

[0059] The above S202 determines the parent node in the node tree as the target node and the canvas node as the parameter passing parent node. This ensures that when the parameter passing parent node is initially a canvas node, subsequent node processing starts from the parent node in the node tree. This allows for the sequential determination of whether the programming module corresponding to each node in the node tree is within the rendering area of ​​the canvas, i.e., whether the programming module corresponding to each node is visible to the object. This ensures that the browser's reflow process accurately and without omissions involves each programming module in the programming module group.

[0060] As an example of S202, based on the example of S201 above, the computer device determines the parent node in the node tree as the target node and the canvas node as the parameter-passing parent node. Figure 3 Based on this, the parent node in the node tree, namely the programming block A node, is determined as the target node, and the canvas node is determined as the parameter passing parent node.

[0061] S203: If the programming module corresponding to the target node is within the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the new relative coordinates of the target node. If the programming module corresponding to the target node is not within the rendering area, remove the target node from the node tree.

[0062] In this embodiment, after executing S202 to determine the parent node in the node tree as the target node and the canvas node as the parameter-passing parent node, it is necessary to determine whether the programming module corresponding to the target node is within the rendering area of ​​the canvas, that is, whether the programming module corresponding to the target node is visible, to determine whether the browser's reflow process involves the programming module corresponding to the target node. If the programming module corresponding to the target node is within the rendering area of ​​the canvas, it means that the programming module object corresponding to the target node is visible, the browser's reflow process involves the programming module corresponding to the target node, the target node is retained under the parameter-passing parent node, and the new relative coordinates of the target node are calculated. Conversely, if the programming module corresponding to the target node is not visible, the browser's reflow process does not involve the programming module corresponding to the target node, and there is no need to retain the target node. Therefore, if the programming module corresponding to the target node is within the rendering area of ​​the canvas, it means that the programming module object corresponding to the target node is visible, the target node is first inserted under the parameter-passing parent node, then the parameter-passing parent node is updated with the target node, and the new relative coordinates of the target node are determined; if not, it means that the programming module object corresponding to the target node is not visible, and the target node is removed from the node tree.

[0063] The rendering area in the canvas is the area where objects are visible and interact with; the new relative coordinates of the target node are the relative coordinates of the target node under the parameter-passing parent node.

[0064] S203 above addresses the case where the programming module corresponding to the target node is within the rendering area of ​​the canvas, and the object can see the programming module corresponding to the target node. It inserts the target node under the parent node that passes parameters, and updates the parent node with the target node, thus preserving the programming module corresponding to the target node that is visible to the object, making the target node a child node of the parent node. Furthermore, it determines the new relative coordinates of the target node, ensuring accurate calculation of these coordinates during the browser's reflow process. Conversely, if the programming module corresponding to the target node is not within the rendering area of ​​the canvas, and the object cannot see the programming module corresponding to the target node, it removes the target node from the node tree, reducing the number of programming modules corresponding to invisible target nodes and avoiding the need to calculate the module position of these invisible programming modules during the browser's reflow process.

[0065] As an example of S203, based on the example of S202 above, the programming module is a programming block; the computer device determines whether the programming block corresponding to the target node is within the rendering area of ​​the canvas. If so, it first inserts the target node under the parameter-passing parent node, then updates the parameter-passing parent node with the target node, and determines the new relative coordinates of the target node. If not, it removes the target node from the node tree. Figure 3 Based on this, if it is determined that the target node, i.e., programming block A, is not within the rendering area of ​​the canvas, then the programming block A node is removed from the node tree.

[0066] S204: If the target node has a set of child nodes, traverse the child nodes in the set of child nodes to update the target node and return. If the programming module corresponding to the target node is in the rendering area of ​​the canvas, insert the target node under the parent node of the parameter passing, update the parent node of the parameter passing according to the target node, and determine the relative coordinates of the target node. If the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree until the target node has no child nodes.

[0067] In this embodiment, when executing S203 above, if the programming module corresponding to the target node is within the rendering area of ​​the canvas and the object is found to be visible to the target node's corresponding programming module, the target node is inserted under the parameter-passing parent node, and the parameter-passing parent node is updated with the target node to determine the new relative coordinates of the target node. Conversely, after removing the target node from the node tree, considering the need to sequentially determine whether the programming module corresponding to each node in the node tree is within the rendering area of ​​the canvas (i.e., whether the programming module corresponding to each node is visible to the object), to determine whether the browser's reflow process involves each programming module in the programming module group, it is also necessary to determine whether the target node has a set of child nodes. If so, all child nodes in the child node set need to be returned as the target node in S203 above; otherwise, the node processing ends. Therefore, when the target node has a set of child nodes, the child nodes in the child node set are traversed to update the target node, and S203 above is returned until the target node has no child nodes.

[0068] In step S204, if the target node has a set of child nodes, the child nodes in the set of child nodes are traversed to update the target node. The process then returns to the previous step of determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas, until the target node has no child nodes. This process sequentially determines whether the programming module corresponding to each node in the node tree is within the rendering area of ​​the canvas, i.e., whether the programming module corresponding to each node is visible to the object. This ensures that the browser's reflow process involves every programming module in the programming module group without omission, so that the browser's reflow process involves the programming modules that are visible to the object in the programming module group that directly belong to the canvas, and does not involve programming modules that are not visible to the object.

[0069] As an example of S204, based on the example of S203 above, when the target node has a set of child nodes, the computer device iterates through the child nodes in the set of child nodes to update the target node, and returns to the aforementioned step of determining whether the programming block corresponding to the target node is within the rendering area of ​​the canvas, until the target node has no child nodes. Figure 3 Based on this, the target node, i.e., programming block A, has a child node, i.e., programming block B. The target node is updated to this programming block B. It is determined that programming block B is within the rendering area of ​​the canvas. This programming block B is then inserted under the parent node (the canvas node) of the parameter passing node. The parent node of the parameter passing node is then updated with this programming block B, and its new relative coordinates are determined. The target node, i.e., programming block B, has a child node, i.e., programming block C. The target node is updated to this programming block C. It is determined that programming block C is within the rendering area of ​​the canvas. This programming block C is then inserted under the parent node of the parameter passing node, i.e., programming block B. The parent node of the parameter passing node is then updated with this programming block C, and its new relative coordinates are determined. The process ends when the target node, i.e., programming block C, has no child nodes.

[0070] See Figure 4 ,Should Figure 4 This is a schematic diagram of a data processing flow based on a programming module group, provided in an embodiment of this application. The flow includes: starting the process, detecting whether the displayed content of the viewport area in the canvas has changed; if so, determining that the programming module group in the canvas is a node tree based on scalable vector graphics, with the top-level module in the programming module group at the top level of the canvas; determining the parent node in the node tree as the target node; determining the canvas node as the parameter-passing parent node; determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas; if so, inserting the target node under the parameter-passing parent node; updating the parameter-passing parent node with the target node and determining the new relative coordinates of the target node; if not, removing the target node from the node tree; determining whether the target node has a set of child nodes; if so, traversing the child nodes in the set to update the target node, returning to the step of determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas; if not, ending the process.

[0071] As can be seen from the above technical solution, when a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module is first determined to be a node tree based on scalable vector graphics of the top-level programming module group of the canvas. This converts the programming module group directly belonging to the canvas into a node tree that can be efficiently rendered and flexibly interacted with. Then, the parent node in the node tree is determined as the target node, and the canvas node is determined as the parameter passing parent node. This ensures that when the parameter passing parent node is initially a canvas node, subsequent node processing starts from the parent node in the node tree. The process involves determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas. If so, the programming module object is visible. The target node is first inserted under the parent node, then the parent node is updated with the target node, and the new relative coordinates of the target node are determined. This preserves the visible programming modules corresponding to the target nodes, ensuring the target node is a child of the parent node. The parent node is then recursively updated to accurately calculate the new relative coordinates of the target node during the browser's reflow. If not, the programming module object is invisible. The target node is removed from the node tree, reducing the number of invisible programming modules and preventing the browser from calculating their positions during reflow. If the target node has a set of child nodes, the process iterates through the child nodes in the set to update the target node, returning to the previous step of determining whether the programming module is within the rendering area of ​​the canvas. This process continues until the target node has no child nodes, ensuring that the browser's reflow involves visible programming modules directly belonging to the canvas's programming module group and excludes invisible ones. Based on this, the method reduces the time consumed in the reflow process, improves the rendering efficiency of the programming module to reduce lag, and makes the interaction between the user and the canvas smoother, thereby improving the program editing experience of the visual programming tool.

[0072] In this embodiment, when determining the node tree of the programming module group in the canvas based on scalable vector graphics in S201, it is considered that the programming module group is a collection of multiple programming modules with one or more connection relationships, such as sequential connection or parent-child connection. The node tree based on scalable vector graphics is a collection of nodes in the programming module group that present a tree structure, corresponding to multiple nodes of the programming modules in the programming module group. Nodes corresponding to sequentially connected programming modules have a parent-child relationship, and nodes corresponding to parent-child connected programming modules have a parent-child relationship. Therefore, the connection relationship between programming modules in the programming module group determines the parent-child relationship between nodes in the node tree based on scalable vector graphics. Based on this, this application provides a possible implementation method. Determining the node tree of the programming module group in the canvas based on scalable vector graphics in S201 may include, for example, S201a (not shown in the figure): determining the node tree according to the connection relationship between programming modules in the programming module group.

[0073] The connection relationship between programming modules in a programming module group can be sequential or parent-child.

[0074] In the above S201a, the connection relationship between programming modules in the programming module group is that they are connected one after the other. It can be determined that the node corresponding to the later programming module is the child node of the node corresponding to the earlier programming module. The connection relationship between programming modules in the programming module group is that they are connected by a parent and a child. It can be determined that the node corresponding to the child programming module is the child node of the node corresponding to the parent programming module. Based on the connection relationship between programming modules in the programming module group, the node tree of the programming module group based on scalable vector graphics can be accurately determined.

[0075] As an example of S201a, based on the example of S201 above, the computer device can determine the node tree of the programming block group based on scalable vector graphics by the connection relationship between the programming blocks in the programming block group. Figure 3 Based on this, and considering that programming block A and programming block B are connected sequentially in the programming block group, and programming block B and programming block C are connected sequentially, it is determined that the parent node in the node tree of the programming block group based on scalable vector graphics is the programming block A node, the child node of the programming block A node is the programming block B node, and the child node of the programming block B node is the programming block C node.

[0076] In this embodiment, when determining the specific implementation of the programming module group in S201, since the top-level module in the candidate module group in the canvas may or may not be at the top of the canvas, the candidate module group whose top-level module is at the top of the canvas is the programming module group; therefore, multiple candidate module groups in the canvas are first obtained, and then the candidate module group whose top-level module is at the top of the canvas is selected as the programming module group. Based on this, this application provides a possible implementation method, and the step of determining the programming module group in S201 may include, for example, the following S1-S2 (not shown in the figure).

[0077] S1: Get multiple candidate module groups in the canvas, each candidate module group includes multiple programming modules.

[0078] S2: For each candidate module group, if the top-level module in the candidate module group is at the top level of the canvas, determine the programming module group based on the candidate module group.

[0079] Among them, a candidate module group is a collection of multiple programming modules that have one or two connection relationships, such as sequential connection or parent-child connection; the top-level module in the candidate module group is either the first non-sub-programming module in the candidate module group, or the first sub-programming module in the candidate module group.

[0080] The above steps S1-S2 take into account that there are multiple candidate module groups in the canvas. The top-level module in the candidate module group may or may not be on the top level of the canvas. Based on obtaining multiple candidate module groups in the canvas, it is determined whether the top-level module in the candidate module group is on the top level of the canvas. In order to select the candidate module group whose top-level module is on the top level of the canvas as the programming module group, the programming module group in the canvas can be accurately determined.

[0081] As an example of S1-S2, based on the example of S201 above, the computer device first obtains multiple candidate module groups in the canvas, each candidate module group including multiple programming modules; then, for each candidate module group, the computer device determines whether the top-level module in the candidate module group is at the top level of the canvas, and if so, the candidate module group is determined as a programming module group.

[0082] In this embodiment of the application, when determining the new relative coordinates of the target node in S203 above, it is considered that the new relative coordinates of the target node are determined based on the relative coordinates of the parameter-passing parent node of the target node, and there are two cases: the parameter-passing parent node inserted by the target node is not the original parent node of the target node, or the parameter-passing parent node inserted by the target node is the original parent node of the target node. The determination method of the new relative coordinates of the target node is different in different cases, as shown below.

[0083] One method of determination: When the parent node to which the target node is inserted is not the original parent node of the target node, and the relative coordinates of the target node are determined based on the relative coordinates of the original parent node, thus failing to represent the positional relationship of the target node relative to the parent node to which the target node is inserted, the absolute coordinates of the target node relative to the canvas node and the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node can be determined to establish the new relative coordinates of the target node, representing its positional relationship relative to the parent node to which the target node is inserted. Based on this, this application provides a possible implementation method, where determining the new relative coordinates of the target node in S203 above can, for example, include S203a-S203c (not shown in the figure).

[0084] S203a: If the parent node to which the target node is inserted is not the original parent node of the target node, determine the absolute coordinates of the target node relative to the canvas node.

[0085] S203b: Determine the absolute coordinates of the parent node to which the target node is inserted, relative to the canvas node.

[0086] S203c: Determine the new relative coordinates of the target node based on the absolute coordinates of the target node relative to the canvas node and the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node.

[0087] Among them, the absolute coordinates of the target node relative to the canvas node are the coordinates of the target node relative to the canvas node, the absolute coordinates of the parameter-passing parent node inserted by the target node relative to the canvas node are the coordinates of the parameter-passing parent node inserted by the target node relative to the canvas node, and the new relative coordinates of the target node are the coordinates of the target node relative to the parameter-passing parent node inserted by the target node.

[0088] S203a-S203c above addresses the case where the parent node inserted into the target node is not the original parent node of the target node. Considering that the relative coordinates of the target node represent its positional relationship relative to its original parent node, but cannot represent its positional relationship relative to the parent node into which the target node is inserted, the absolute coordinates of the target node relative to the canvas node are first determined to represent its positional relationship relative to the canvas node. Then, the absolute coordinates of the parent node into which the target node is inserted are determined to represent its positional relationship relative to the canvas node. Based on this, the new relative coordinates of the target node can be accurately calculated using both the absolute coordinates of the target node relative to the canvas node and the absolute coordinates of the parent node into which the target node is inserted, thus accurately representing its positional relationship relative to the parent node into which the target node is inserted.

[0089] As an example of S203a-S203c, based on the examples of S203 and S204 above, when the parameter-passing parent node inserted by the target node is not the original parent node of the target node, the computer device first determines the absolute coordinates of the target node relative to the canvas node, and the absolute coordinates of the parameter-passing parent node inserted by the target node relative to the canvas node; the computer device then determines the new relative coordinates of the target node using the absolute coordinates of the target node relative to the canvas node and the absolute coordinates of the parameter-passing parent node inserted by the target node relative to the canvas node. In the above... Figure 3 Based on this, the parent node to which the target node, i.e., programming block B, is inserted is the canvas node, which is not the original parent node of programming block B, i.e., programming block A. First, determine the absolute coordinates (40, 30) of programming block B relative to the canvas node, and the absolute coordinates (0, 0) of the canvas node relative to the canvas node. Then, determine the new relative coordinates (40, 30) of programming block B based on the absolute coordinates (40, 30) of programming block B relative to the canvas node and the absolute coordinates (0, 0) of the canvas node.

[0090] In this embodiment, when determining the absolute coordinates of the target node relative to the canvas node in S203a, considering that the relative coordinates of the child node are determined based on the relative coordinates of the child node's original parent node, the relative coordinates of the target node, the relative coordinates of the target node's original parent node, and so on up to the canvas node can be accumulated to obtain the absolute coordinates of the target node relative to the canvas node. Therefore, starting from the target node, traversing upwards from the original parent node to the canvas node, multiple relative coordinates corresponding to multiple first nodes can be determined. By accumulating the multiple relative coordinates corresponding to multiple first nodes, the absolute coordinates of the target node relative to the canvas node can be determined. Based on this, this application provides a possible implementation method, and S203a may include, for example, S203aa-S203ab (not shown in the figure).

[0091] S203aa: Based on the target node, traverse upwards through the original parent node until the canvas node, and determine multiple relative coordinates corresponding to multiple first nodes.

[0092] S203ab: Accumulate the relative coordinates of multiple first nodes to determine the absolute coordinates of the target node relative to the canvas nodes.

[0093] Among them, the multiple relative coordinates corresponding to the multiple first nodes are the relative coordinates of the target node and the original parent node traversed upwards from the target node to each node in the canvas node.

[0094] The relative coordinates of S203aa-S203ab in the child nodes are determined based on the relative coordinates of the original parent nodes of the child nodes. Starting from the target node, the process traverses upwards from the original parent nodes to the canvas nodes, obtaining multiple relative coordinates corresponding to multiple first nodes. This accurately represents the positional relationship of the target node relative to its original parent nodes, and so on, up to the positional relationship of the canvas child nodes to which the target node belongs relative to the canvas nodes. By accumulating the multiple relative coordinates corresponding to multiple first nodes, the absolute coordinates of the target node relative to the canvas nodes are determined, which accurately represents the positional relationship of the target node relative to the canvas nodes.

[0095] As an example of S203aa-S203ab, based on the examples of S203a-S203c above, the computer device starts from the target node, traverses upwards from the original parent node to the canvas node, obtains multiple relative coordinates corresponding to multiple first nodes, accumulates the multiple relative coordinates corresponding to the multiple first nodes, and determines the absolute coordinates of the target node relative to the canvas node. In the above... Figure 3 Based on this, starting from the target node, i.e., programming block B node, traverse upwards from the original parent node to the canvas node, determine multiple relative coordinates corresponding to multiple first nodes, including the relative coordinates of programming block B node (0, 20) and programming block A node (40, 10), and sum the relative coordinates of programming block B node (0, 20) and programming block A node (40, 10) to obtain the absolute coordinates of programming block B node relative to the canvas node (40, 30).

[0096] In this embodiment of the application, when determining the absolute coordinates of the parameter-passing parent node of the target node relative to the canvas node in the above-mentioned S203b, considering that the relative coordinates of the child node are determined based on the relative coordinates of the original parent node of the child node, the relative coordinates of the parameter-passing parent node of the target node inserted, the relative coordinates of the original parent node of the parameter-passing parent node of the target node inserted, and so on up to the canvas node can be accumulated to obtain the absolute coordinates of the parameter-passing parent node of the target node inserted relative to the canvas node. Therefore, starting from the parameter-passing parent node of the target node inserted, traversing upwards from the original parent node to the canvas node, multiple relative coordinates corresponding to multiple second nodes can be determined. By accumulating the multiple relative coordinates corresponding to multiple second nodes, the absolute coordinates of the parameter-passing parent node of the target node inserted relative to the canvas node can be determined. Based on this, this application provides a possible implementation method, and the above-mentioned S203b may, for example, include S203bb-S203bc (not shown in the figure).

[0097] S203bb: Based on the parent node inserted by the target node, traverse upwards through the original parent node until the canvas node, and determine the multiple relative coordinates corresponding to multiple second nodes.

[0098] S203bc: Accumulate the relative coordinates of multiple second nodes to determine the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node.

[0099] Among them, the relative coordinates corresponding to the multiple second nodes are the relative coordinates of each node in the canvas node from which the parameter-passing parent node of the target node is inserted and the original parent node traversed upwards from the parameter-passing parent node of the target node.

[0100] The relative coordinates of S203bb-S203bc in the child nodes are determined based on the relative coordinates of the original parent nodes of the child nodes. Starting from the parent node into which the target node is inserted, the process traverses upwards from the original parent nodes to the canvas node, obtaining multiple relative coordinates corresponding to multiple second nodes. This accurately represents the positional relationship between the parent node into which the target node is inserted and the original parent node, up to the positional relationship between the canvas child node to which the parent node into which the target node is inserted and the canvas node. By accumulating the multiple relative coordinates corresponding to multiple second nodes, the absolute coordinates of the parent node into which the target node is inserted and the canvas node are determined, thus accurately representing the positional relationship between the parent node into which the target node is inserted and the canvas node.

[0101] As an example of S203bb-S203bc, based on the examples of S203a-S203c above, the computer device starts from the parent node into which the parameter is inserted at the target node, traverses upwards through the original parent nodes until the canvas node, obtains multiple relative coordinates corresponding to multiple second nodes, accumulates the multiple relative coordinates corresponding to the multiple second nodes, and determines the absolute coordinates of the inserted parameter-transmitting parent node relative to the canvas node. In the above... Figure 3 Based on this, the parent node to which the target node, i.e. the programming block B node, is inserted is the canvas node, and the relative coordinates of the canvas node can be directly determined to be the absolute coordinates (0, 0) of the canvas node.

[0102] Another method of determination: When the parent node to which the target node is inserted is the original parent node of the target node, and the relative coordinates of the target node are determined based on the relative coordinates of the original parent node of the target node, representing the positional relationship between the target node and the parent node to which the parameter is inserted, the relative coordinates of the target node can be determined as the new relative coordinates of the target node. Based on this, this application provides a possible implementation method. Determining the new relative coordinates of the target node in S203 above may include, for example, S203d (not shown in the figure): If the parent node to which the target node is inserted is the original parent node of the target node, the relative coordinates of the target node are determined as the new relative coordinates of the target node.

[0103] The relative coordinates of the target node are the coordinates of the target node relative to its original parent node.

[0104] The above S203d addresses the case where the parent node inserted into the target node is the original parent node of the target node. Considering that the relative coordinates of the target node represent the positional relationship between the target node and the original parent node, the relative coordinates of the target node are determined as the new relative coordinates of the target node, which can accurately represent the positional relationship between the target node and the parent node into which the target node is inserted.

[0105] As an example of S203d, based on the examples of S203 and S204 above, when the parent node to which the target node is inserted is the original parent node of the target node, the computer device determines the relative coordinates of the target node as the new relative coordinates of the target node. Figure 3 Based on this, the parent node to which the target node, i.e., programming block C, is inserted, i.e., programming block B, is the original parent node of programming block C, i.e., programming block B. The relative coordinates (0, 20) of programming block C are determined as the new relative coordinates (0, 20) of programming block C.

[0106] In the above Figure 3 Based on this, see Figure 5 ,Should Figure 5 This application provides a schematic diagram of a top-level programming block group on the top layer of a canvas and the node tree of this programming block group after data processing based on the programming module group, as provided in an embodiment of this application. (Targeting...) Figure 3 In the programming block group, the parent node in the node tree after data processing of the programming block group is the canvas node, the child node of the canvas node is the programming block B node, and the child node of the programming block B node is the programming block C node; where the absolute coordinate of the canvas node is (0, 0), the new relative coordinate of the programming block B is (40, 30), and the new relative coordinate of the programming block C is (0, 20).

[0107] In this embodiment, since the rendering area in the canvas is the area where objects are visible and interact with, and the viewport area in the canvas is the area where objects are visible, and considering that the viewport area is the core area for object interaction, the rendering area in the canvas can be determined from the viewport area. Based on this, this application provides a possible implementation, where the step of determining the rendering area in S203 above may include, for example, S3 (not shown in the figure): determining the rendering area based on the viewport area.

[0108] The above-mentioned S3 defines the viewport area in the canvas as the area where objects are visible in the canvas, and the rendering area in the canvas as the area where objects are visible and interactive. The visible area of ​​objects in the canvas is the core area for object interaction. Defining the viewport area in the canvas as the rendering area in the canvas lays the foundation for subsequent determination of whether the programming module corresponding to the target node is within the rendering area in the canvas, so as to accurately determine whether the programming module corresponding to the target node is visible to the object.

[0109] As an example of S3, based on the example of S203 above, the computer device determines the window area in the canvas as the rendering area in the canvas.

[0110] In this embodiment, considering the mobility of the visible area of ​​an object in the canvas, the visible and interactive area of ​​the object in the canvas can be larger than the visible area of ​​the object in the canvas, that is, the rendering area in the canvas is larger than the viewport area in the canvas. Based on the viewport area being the core area for object interaction in the canvas, the rendering area in the canvas is jointly determined by combining the buffer area extending outward from the edge of the viewport area, making the rendering area larger than the viewport area. Based on this, this application provides a possible implementation where the rendering area is larger than the viewport area. For example, S3 may include S3a (not shown in the figure): determining the rendering area based on the viewport area and the buffer area extending outward from the edge of the viewport area.

[0111] Among them, the buffer area based on the edge expansion of the window area is the area that surrounds the window area by extending outward from the edge of the window area.

[0112] Based on the fact that the visible area of ​​the object in the canvas is movable (i.e., the viewport area in the canvas is movable) and that the viewport area in the canvas is the core area for object interaction, the rendering area in the canvas is determined not only by the viewport area but also by the buffer area that extends outward from the edge of the viewport area. This makes the rendering area in the canvas larger than the viewport area, thus minimizing the switching between the displayed and hidden states of the programming modules seen by the object in the viewport area during the movement of the viewport area.

[0113] As an example of S3a, based on the example of S3 above, the computer device determines the viewport area in the canvas and the buffer area extending outward from the edge of the viewport area as the rendering area in the canvas.

[0114] See Figure 6 ,Should Figure 6 This is a schematic diagram illustrating a viewport area in a canvas and a buffer area extending outward from the edge of the viewport area, as provided in an embodiment of this application. The viewport area in the canvas is... Figure 5 The smallest region in the canvas, the buffer region that expands outward from the edge of the viewport, is the region that surrounds the viewport by extending outward from the edge of the viewport. The viewport plus the buffer region that expands outward from the edge of the viewport in the canvas represents the rendering area in the canvas.

[0115] Furthermore, in this embodiment, when determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas, i.e., determining whether the programming module corresponding to the target node is visible, if so, it means that the programming module corresponding to the target node is visible, and therefore the programming module corresponding to the target node needs to be displayed in the canvas. Therefore, when it is determined that the programming module corresponding to the target node is within the rendering area of ​​the canvas, it is determined that the programming module corresponding to the target node in the canvas is in a display state. Based on this, this application provides a possible implementation, and the method may further include S4 (not shown in the figure): if the programming module corresponding to the target node is within the rendering area, it is determined that the programming module corresponding to the target node in the canvas is in a display state.

[0116] The display state refers to the visible state of an object.

[0117] The above-mentioned S4 determines the case where the programming module corresponding to the target node is visible to the object within the rendering area of ​​the canvas, and determines that the programming module corresponding to the target node is in the display state in the canvas, so as to ensure that the object can see the programming module corresponding to the target node.

[0118] As an example of S4, based on the examples of S201-S204 above, if the computer device determines that the programming block corresponding to the target node is within the rendering area of ​​the canvas, it determines that the programming block corresponding to the target node in the canvas is in a display state. As described above... Figure 5 The programming block B corresponding to the programming block node B in the middle is in the rendering area of ​​the canvas, and the programming block B corresponding to the programming block node B in the canvas is in the display state; the programming block C corresponding to the programming block node C in the middle is in the rendering area of ​​the canvas, and the programming block C corresponding to the programming block node C in the canvas is in the display state.

[0119] Furthermore, in this embodiment, when determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas, i.e., determining whether the programming module corresponding to the target node is visible, if not, it means that the programming module object corresponding to the target node is not visible, and therefore the programming module corresponding to the target node needs to be hidden in the canvas. Therefore, if it is determined that the programming module corresponding to the target node is not within the rendering area of ​​the canvas, it is determined that the programming module corresponding to the target node in the canvas is in a hidden state. Based on this, this application provides a possible implementation, and the method may further include S5 (not shown in the figure): if the programming module corresponding to the target node is not within the rendering area, it is determined that the programming module corresponding to the target node in the canvas is in a hidden state.

[0120] The hidden state is the state in which an object is not visible.

[0121] The above-mentioned S5 addresses the situation where the programming module corresponding to the target node is not within the rendering area of ​​the canvas, and the object cannot see the programming module corresponding to the target node. It determines that the programming module corresponding to the target node in the canvas is in a hidden state, that is, there is no need to display the programming module corresponding to the target node that the object cannot see, so as to save display resources.

[0122] As an example of S5, based on the examples of S201-S204 above, if the computer device determines that the programming block corresponding to the target node is not within the rendering area of ​​the canvas, it determines that the programming block corresponding to the target node in the canvas is in a hidden state. As described above... Figure 5 The programming block A corresponding to the programming block node A in the middle is not within the rendering area of ​​the canvas, and the programming block B corresponding to the programming block node B in the canvas is in a hidden state.

[0123] It should be noted that, based on the implementation methods provided in the above aspects, this application can be further combined to provide more implementation methods.

[0124] based on Figure 2 Corresponding to the data processing method based on programming module groups provided in the embodiments, this application also provides a data processing apparatus based on programming module groups, see [link to relevant documentation]. Figure 7 ,Should Figure 7 The present application provides a structural diagram of a data processing device based on a programming module group. The data processing device 700 based on the programming module group includes: a determination unit 701, a processing unit 702, and an update unit 703.

[0125] The determining unit 701 is used to determine the node tree of the programming module group based on scalable vector graphics in the canvas if a change in the display content of the window area in the canvas is detected, and the top-level module in the programming module group is at the top level of the canvas.

[0126] The determining unit 701 is also used to determine the target node based on the parent node in the node tree, and to determine the parameter passing parent node based on the canvas node;

[0127] The processing unit 702 is used to insert the target node under the parameter-passing parent node if the programming module corresponding to the target node is in the rendering area of ​​the canvas, update the parameter-passing parent node according to the target node, and determine the new relative coordinates of the target node; if the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree.

[0128] Update unit 703 is used to update the target node by traversing the child nodes in the child node set if the target node has a set of child nodes, and to return if the programming module corresponding to the target node is in the rendering area of ​​the canvas, insert the target node under the parameter parent node, update the parameter parent node according to the target node, and determine the relative coordinates of the target node. If the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree, until the target node has no child nodes.

[0129] In one possible implementation, the determining unit 701 is used for:

[0130] The node tree is determined based on the connection relationships between programming modules in the programming module group.

[0131] In one possible implementation, the determining unit 701 is further configured to:

[0132] Retrieve multiple candidate module groups from the canvas, each candidate module group including multiple programming modules;

[0133] For each candidate module group, if the top-level module in the candidate module group is at the top level of the canvas, the programming module group is determined based on the candidate module group.

[0134] In one possible implementation, the determining unit 701 is used for:

[0135] If the parent node to which the target node is inserted is not the original parent node of the target node, determine the absolute coordinates of the target node relative to the canvas node.

[0136] Determine the absolute coordinates of the parent node to which the target node is inserted, relative to the canvas node;

[0137] The new relative coordinates of the target node are determined based on the absolute coordinates of the target node relative to the canvas node and the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node.

[0138] In one possible implementation, the determining unit 701 is used for:

[0139] Based on the target node, traverse upwards from the original parent node to the canvas node to determine multiple relative coordinates corresponding to multiple first nodes;

[0140] The relative coordinates of multiple first nodes are accumulated to determine the absolute coordinates of the target node relative to the canvas nodes.

[0141] In one possible implementation, the determining unit 701 is used for:

[0142] Based on the parent node of the parameter passed to the target node, traverse upwards from the original parent node to the canvas node to determine the multiple relative coordinates corresponding to multiple second nodes.

[0143] The relative coordinates of multiple second nodes are accumulated to determine the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node.

[0144] In one possible implementation, the determining unit 701 is used for:

[0145] If the parent node to which the parameter is inserted is the original parent node of the target node, the relative coordinates of the target node are determined as the new relative coordinates of the target node.

[0146] In one possible implementation, the determining unit 701 is further configured to:

[0147] The rendering area is determined based on the viewport area.

[0148] In one possible implementation, the rendering area is larger than the viewport area, and the determining unit 701 is used for:

[0149] The rendering area is determined based on the viewport area and the buffer area extending outward from the edge of the viewport area.

[0150] In one possible implementation, the determining unit 701 is further configured to:

[0151] If the programming module corresponding to the target node is within the rendering area, then the programming module corresponding to the target node in the canvas is determined to be in the display state.

[0152] In one possible implementation, the determining unit 701 is further configured to:

[0153] If the programming module corresponding to the target node is not within the rendering area, the programming module corresponding to the target node in the canvas is determined to be in a hidden state.

[0154] As can be seen from the above technical solution, when a change in the displayed content of the viewport area in the canvas is detected, indicating a change in the module position of the top-level programming module of the canvas, triggering the browser's reflow process, the top-level module is first determined to be a node tree based on scalable vector graphics of the top-level programming module group of the canvas. This converts the programming module group directly belonging to the canvas into a node tree that can be efficiently rendered and flexibly interacted with. Then, the parent node in the node tree is determined as the target node, and the canvas node is determined as the parameter passing parent node. This ensures that when the parameter passing parent node is initially a canvas node, subsequent node processing starts from the parent node in the node tree. The process involves determining whether the programming module corresponding to the target node is within the rendering area of ​​the canvas. If so, the programming module object is visible. The target node is first inserted under the parent node, then the parent node is updated with the target node, and the new relative coordinates of the target node are determined. This preserves the visible programming modules corresponding to the target nodes, ensuring the target node is a child of the parent node. The parent node is then recursively updated to accurately calculate the new relative coordinates of the target node during the browser's reflow. If not, the programming module object is invisible. The target node is removed from the node tree, reducing the number of invisible programming modules and preventing the browser from calculating their positions during reflow. If the target node has a set of child nodes, the process iterates through the child nodes in the set to update the target node, returning to the previous step of determining whether the programming module is within the rendering area of ​​the canvas. This process continues until the target node has no child nodes, ensuring that the browser's reflow involves visible programming modules directly belonging to the canvas's programming module group and excludes invisible ones. Based on this, the device reduces the time consumed in the rearrangement process, improves the rendering efficiency of the programming module to reduce lag, and makes the interaction between the user and the canvas smoother, thereby improving the program editing experience of the visual programming tool.

[0155] This application also provides a computer device, which may be a server, see [link to previous document]. Figure 8 ,Should Figure 8This application provides a structural diagram of a server 800. The server 800 can vary significantly due to different configurations or performance characteristics. It may include one or more processors, such as a central processing unit (CPU) 822, and a memory 832, as well as one or more storage media 830 (e.g., one or more mass storage devices) for storing application programs 842 or data 844. The memory 832 and storage media 830 can be temporary or persistent storage. The program stored in the storage media 830 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the server. Furthermore, the CPU 822 may be configured to communicate with the storage media 830 and execute the series of instruction operations stored in the storage media 830 on the server 800.

[0156] Server 800 may also include one or more power supplies 826, one or more wired or wireless network interfaces 850, one or more input / output interfaces 858, and / or one or more operating systems 841, such as Windows Server. TM Mac OS X TM Unix TM Linux TM FreeBSD TM etc.

[0157] In this embodiment, the central processing unit 822 in the server 800 can execute the methods provided in the various optional implementations of the above embodiments.

[0158] The computer device provided in this application embodiment can also be a terminal, see [link to relevant documentation]. Figure 9 ,Should Figure 9 This is a structural diagram of a terminal provided in an embodiment of this application. Taking a smartphone as an example, the smartphone includes components such as a radio frequency (RF) circuit 910, a memory 920, an input unit 930, a display unit 940, a sensor 950, an audio circuit 960, a wireless Fidelity (WiFi) module 970, a processor 980, and a power supply 990. The input unit 930 may include a touch panel 931 and other input devices 932, the display unit 940 may include a display panel 941, and the audio circuit 960 may include a speaker 961 and a microphone 962. Those skilled in the art will understand that... Figure 9 The smartphone structure shown does not constitute a limitation on smartphones and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0159] The memory 920 can be used to store software programs and modules. The processor 980 executes various functions and data processing of the smartphone by running the software programs and modules stored in the memory 920. The memory 920 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created based on the use of the smartphone (such as audio data, phonebook, etc.). In addition, the memory 920 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0160] The processor 980 is the control center of the smartphone, connecting various parts of the smartphone via various interfaces and lines. It performs various functions and processes data by running or executing software programs and / or modules stored in the memory 920, and by accessing data stored in the memory 920. Optionally, the processor 980 may include one or more processing units; preferably, the processor 980 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 980.

[0161] In this embodiment, the processor 980 in the smartphone can execute the methods provided in the various optional implementations of the above embodiments.

[0162] According to one aspect of this application, a computer-readable storage medium is provided for storing a computer program that, when run on a computer device, causes the computer device to perform the methods provided in various optional implementations of the above embodiments.

[0163] According to one aspect of this application, a computer program product is provided, comprising a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the methods provided in various optional implementations of the above embodiments.

[0164] The descriptions of the processes or structures corresponding to the above figures each have their own emphasis. For parts of a process or structure that are not described in detail, please refer to the relevant descriptions of other processes or structures.

[0165] The terms "first," "second," etc., used in this application's specification and the foregoing drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented, for example, in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0166] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.

[0167] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0168] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0169] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing computer programs, such as USB flash drives, portable hard drives, read-only memory (ROM), RAM, magnetic disks, or optical disks.

[0170] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0171] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A data processing method based on a group of programming modules, characterized in that, The method includes: If a change in the displayed content of the viewport area in the canvas is detected, it is determined that the programming module group in the canvas is a node tree based on scalable vector graphics, and the top-level module in the programming module group is at the top level of the canvas. The target node is determined based on the parent node in the node tree, and the parameter-passing parent node is determined based on the canvas node; If the programming module corresponding to the target node is within the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the new relative coordinates of the target node; if the programming module corresponding to the target node is not within the rendering area, remove the target node from the node tree. If the target node has a set of child nodes, traverse the child nodes in the set to update the target node, return if the programming module corresponding to the target node is in the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the relative coordinates of the target node, if the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree, until the target node has no child nodes.

2. The method according to claim 1, characterized in that, Determining the node tree of the programming module group in the canvas based on scalable vector graphics includes: The node tree is determined based on the connection relationships between the programming modules in the programming module group.

3. The method according to claim 1, characterized in that, The steps for determining the programming module group include: Obtain multiple candidate module groups from the canvas, each candidate module group including multiple programming modules; For each candidate module group, if the top-level module in the candidate module group is at the top of the canvas, the programming module group is determined based on the candidate module group.

4. The method according to claim 1, characterized in that, Determining the new relative coordinates of the target node includes: If the parent node to which the target node is inserted is not the original parent node of the target node, determine the absolute coordinates of the target node relative to the canvas node; Determine the absolute coordinates of the parent node to which the target node is inserted, relative to the canvas node; The new relative coordinates of the target node are determined based on the absolute coordinates of the target node relative to the canvas node and the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node.

5. The method according to claim 4, characterized in that, Determining the absolute coordinates of the target node relative to the canvas node includes: Based on the target node, traverse upwards through the original parent node until the canvas node to determine multiple relative coordinates corresponding to multiple first nodes; The relative coordinates corresponding to the plurality of first nodes are accumulated to determine the absolute coordinates of the target node relative to the canvas node.

6. The method according to claim 4, characterized in that, Determining the absolute coordinates of the parent node to which the target node is inserted, relative to the canvas node, includes: Based on the parent node inserted into the target node, traverse upwards through the original parent node until the canvas node, and determine multiple relative coordinates corresponding to multiple second nodes; The relative coordinates corresponding to the multiple second nodes are accumulated to determine the absolute coordinates of the parent node to which the target node is inserted relative to the canvas node.

7. The method according to claim 1, characterized in that, Determining the new relative coordinates of the target node includes: If the parent node to which the target node is inserted is the original parent node of the target node, the relative coordinates of the target node are determined as the new relative coordinates of the target node.

8. The method according to claim 1, characterized in that, The steps for determining the rendering area include: The rendering area is determined based on the viewport area.

9. The method according to claim 8, characterized in that, The rendering area is larger than the viewport area, and determining the rendering area based on the viewport area includes: The rendering area is determined based on the viewport area and the buffer area extending outward from the edge of the viewport area.

10. The method according to claim 1, characterized in that, The method further includes: If the programming module corresponding to the target node is within the rendering area, it is determined that the programming module corresponding to the target node in the canvas is in a display state.

11. The method according to claim 1, characterized in that, The method further includes: If the programming module corresponding to the target node is not within the rendering area, it is determined that the programming module corresponding to the target node in the canvas is in a hidden state.

12. A data processing device based on a programming module group, characterized in that, The device includes: a determining unit, a processing unit, and an updating unit; The determining unit is configured to determine, if a change in the display content of the window area in the canvas is detected, a node tree of the programming module group based on scalable vector graphics in the canvas, wherein the top-level module in the programming module group is at the top level of the canvas; The determining unit is further configured to determine the target node based on the parent node in the node tree, and to determine the parameter-passing parent node based on the canvas node; The processing unit is configured to: if the programming module corresponding to the target node inserts the target node under the parameter-passing parent node within the rendering area of ​​the canvas, update the parameter-passing parent node according to the target node, and determine the new relative coordinates of the target node; if the programming module corresponding to the target node is not within the rendering area, remove the target node from the node tree. The update unit is configured to: if the target node has a set of child nodes, traverse the child nodes in the set of child nodes to update the target node; return if the programming module corresponding to the target node is in the rendering area of ​​the canvas, insert the target node under the parameter-passing parent node, update the parameter-passing parent node according to the target node, and determine the relative coordinates of the target node; if the programming module corresponding to the target node is not in the rendering area, remove the target node from the node tree, until the target node has no child nodes.

13. A computer device, characterized in that, The computer device includes a processor and memory: The memory is used to store computer programs and to transfer the computer programs to the processor; The processor is configured to execute the method according to any one of claims 1-11 according to instructions in the computer program.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when run on a computer device, causes the computer device to perform the method according to any one of claims 1-11.

15. A computer program product, comprising a computer program, characterized in that, When the computer program is run on a computer device, it causes the computer device to perform the method according to any one of claims 1-11.

Images